tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 07:44:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

forms.less: Only apply form layout and design to our own forms

Browse Source 
See the file's header for more details.
This commit is contained in:
Johannes Meyer 2019-07-16 15:50:19 +02:00
parent 923582c5de
commit cb51d9cf55
1 changed files with 193 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

364
public/css/icinga/forms.less
View File

@ -1,5 +1,14 @@
/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */ /*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
/**
Rules found in here are structured with two layers:
1) form.icinga-forms, that's what defines the general structure of our single/individual forms. It's not
supposed to be used for any other forms that are not the only content on the page (e.g. inline-forms)
2) .icinga-controls, this defines the design of our controls. Any input that's part of a container with
this class gets our design applied
*/
// Used colors // Used colors
@disabled-gray: #9a9a9a; @disabled-gray: #9a9a9a;
@ -10,26 +19,25 @@
// General form layout // General form layout
form:not(.inline):not([role="search"]) { form.icinga-forms {
max-width: 70em; max-width: 70em;
width: 80%; width: 80%;
}
.form-controls { .control-group {
display: flex; display: flex;
margin-left: 16em; flex-wrap: wrap;
justify-content: flex-end; margin: 0 -.5em;
} align-items: flex-start;
> * {
margin: .5em;
}
}
.form-controls {
.control-group { display: flex;
display: flex; margin-left: 16em;
margin: 0 -.5em; justify-content: flex-end;
align-items: flex-start;
> * {
margin: .5em;
} }
} }
@ -37,7 +45,7 @@ form:not(.inline):not([role="search"]) {
#layout.minimal-layout, #layout.minimal-layout,
#layout.twocols:not(.wide-layout) { #layout.twocols:not(.wide-layout) {
form:not(.inline) { form.icinga-forms {
width: 100%; width: 100%;
.control-label-group { .control-label-group {
@ -47,24 +55,24 @@ form:not(.inline):not([role="search"]) {
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
} }
}
.toggle-switch ~ .control-info:before { .toggle-switch ~ .control-info:before {
margin-left: 0; margin-left: 0;
} }
.control-info { .control-info {
opacity: .5; opacity: .5;
} }
.errors > li { .errors > li {
margin-left: .5em; margin-left: .5em;
}
} }
} }
// Label styles // Label styles
.control-group .control-label-group { form.icinga-forms .control-group .control-label-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -75,7 +83,7 @@ form:not(.inline):not([role="search"]) {
width: @name-value-table-name-width; width: @name-value-table-name-width;
} }
.control-info { form.icinga-forms .control-group .control-info {
line-height: 2.25em; line-height: 2.25em;
margin-right: 1em; margin-right: 1em;
opacity: .6; opacity: .6;
@ -86,20 +94,11 @@ form:not(.inline):not([role="search"]) {
} }
} }
.toggle-switch ~ .control-info { form.icinga-forms .control-group .toggle-switch ~ .control-info {
position: relative; position: relative;
margin-left: .5em; margin-left: .5em;
} }
.spinner {
line-height: 2.5em;
&:before {
margin-left: .5em;
opacity: 0.4;
}
}
form.inline { form.inline {
display: inline-block; display: inline-block;
@ -110,76 +109,96 @@ form.inline {
} }
} }
select ~ .spinner:before { .icinga-controls select ~ .spinner:before {
margin-left: -3.5em; margin-left: -3.5em;
} }
// General input styles // General input styles
form input[type="text"], .icinga-controls {
form input[type="password"], input[type="text"],
form input[type="number"], input[type="password"],
form input[type="datetime-local"], input[type="number"],
form input[type="date"], input[type="datetime-local"],
form input[type="time"], input[type="date"],
form textarea, input[type="time"],
form select { textarea,
background-color: @low-sat-blue; select {
flex: 1; background-color: @low-sat-blue;
width: 0; }
} }
form input:not([type="checkbox"]), form.icinga-forms {
form .toggle-switch, input[type="text"],
form button, input[type="password"],
form select, input[type="number"],
form textarea, input[type="datetime-local"],
form button, input[type="date"],
form .toggle-switch, input[type="time"],
form input { textarea,
border: none; select {
.rounded-corners(.25em); flex: 1;
.appearance(none); width: 0;
}
} }
.control-group input:not([type="checkbox"]), .icinga-controls {
.control-group .toggle-switch, input:not([type="checkbox"]),
.control-group button, .toggle-switch,
.control-group select, button,
.control-group textarea, select,
.form-controls button, textarea,
.form-controls .toggle-switch, button,
.form-controls input { .toggle-switch,
font-size: inherit; input {
padding: @vertical-padding; border: none;
.rounded-corners(.25em);
.appearance(none);
}
} }
.control-group .toggle-switch, .icinga-controls {
.form-controls .toggle-switch { .control-group input:not([type="checkbox"]),
margin: 0.875em .5em; .control-group .toggle-switch,
.control-group button,
.control-group select,
.control-group textarea,
.form-controls button,
.form-controls .toggle-switch,
.form-controls input {
font-size: inherit;
padding: @vertical-padding;
}
} }
form select:not([multiple]) { form.icinga-forms {
padding-right: 1.5625em; .control-group .toggle-switch,
.form-controls .toggle-switch {
margin: 0.875em .5em;
}
}
form.icinga-forms select:not([multiple]) {
// Compensate inconsistent select height calculations // Compensate inconsistent select height calculations
line-height: 1em; line-height: 1em;
height: 2.25em; height: 2.25em;
} }
// Remove native dropdown arrow in IE10+ // Remove native dropdown arrow in IE10+
form select::-ms-expand { .icinga-controls select::-ms-expand {
display: none; display: none;
opacity: 0; opacity: 0;
} }
form select:not([multiple]) { .icinga-controls select:not([multiple]) {
padding-right: 1.5625em;
background-image: url(../img/select-icon.svg); background-image: url(../img/select-icon.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
background-size: contain; background-size: contain;
} }
form select { form.icinga-forms select {
width: 0; // Prevent selects with long option values from exceeding the container width: 0; // Prevent selects with long option values from exceeding the container
} }
@ -201,11 +220,17 @@ form.inline select {
text-align: left; text-align: left;
} }
.control-group .spinner { .icinga-controls .spinner {
margin: .5em 0; margin: .5em 0;
line-height: 2.5em;
&:before {
margin-left: .5em;
opacity: 0.4;
}
} }
.form-controls { form.icinga-forms .form-controls {
.spinner { .spinner {
order: -1; order: -1;
} }
@ -217,22 +242,24 @@ form.inline select {
// Button styles // Button styles
.form-controls input[type="submit"], .icinga-controls {
.form-controls input[type="submit"].btn-confirm { .form-controls input[type="submit"],
.button(); .form-controls input[type="submit"].btn-confirm {
} .button();
}
.form-controls input[type="submit"].btn-remove { .form-controls input[type="submit"].btn-remove {
.button(@body-bg-color, @color-critical, darken(@color-critical, 10%)); .button(@body-bg-color, @color-critical, darken(@color-critical, 10%));
} }
.form-controls input[type="submit"].btn-cancel { .form-controls input[type="submit"].btn-cancel {
.button(@body-bg-color, @gray, @black); .button(@body-bg-color, @gray, @black);
}
} }
// Toggle styles // Toggle styles
.toggle-switch { .icinga-controls .toggle-switch {
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -241,13 +268,13 @@ form.inline select {
} }
// Hide default checkbox // Hide default checkbox
.toggle-switch input { .icinga-controls .toggle-switch input {
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
} }
.toggle-slider { .icinga-controls .toggle-switch .toggle-slider {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -262,7 +289,7 @@ form.inline select {
vertical-align: middle; vertical-align: middle;
} }
.toggle-slider:before { .icinga-controls .toggle-switch .toggle-slider:before {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -284,16 +311,16 @@ form.inline select {
transition: @transition; transition: @transition;
} }
input:checked + .toggle-slider { .icinga-controls .toggle-switch input:checked + .toggle-slider {
background-color: @icinga-blue; background-color: @icinga-blue;
border: 1px solid @icinga-blue; border: 1px solid @icinga-blue;
} }
input:focus + .toggle-slider { .icinga-controls .toggle-switch input:focus + .toggle-slider {
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40); box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
} }
input:checked + .toggle-slider:before { .icinga-controls .toggle-switch input:checked + .toggle-slider:before {
border: 1px solid @icinga-blue; border: 1px solid @icinga-blue;
left: 100%; left: 100%;
margin-left: -4/3em; margin-left: -4/3em;
@ -301,7 +328,7 @@ input:checked + .toggle-slider:before {
// Disabled inputs // Disabled inputs
.toggle-switch.disabled { .icinga-controls .toggle-switch.disabled {
cursor: default; cursor: default;
& > .toggle-slider { & > .toggle-slider {
@ -315,80 +342,73 @@ input:checked + .toggle-slider:before {
} }
} }
.control-group.disabled .control-label-group { .icinga-controls .control-group.disabled .control-label-group {
color: @disabled-gray; color: @disabled-gray;
} }
.control-group input[disabled], .icinga-controls {
.control-group select[disabled] { .control-group input[disabled],
background: @gray-lighter; .control-group select[disabled] {
border-color: transparent; background: @gray-lighter;
border-color: transparent;
}
} }
// Errors and additional information // Errors and additional information
.form-notifications, form.icinga-forms {
.form-description { .form-notifications,
border-radius: .25em; .form-description {
display: flex; border-radius: .25em;
list-style: none; display: flex;
align-items: center;
margin: 0 0 1em 0;
padding: .25em .5em;
ul {
list-style: none; list-style: none;
align-items: center;
margin: 0 0 1em 0;
padding: .25em .5em;
ul {
list-style: none;
margin: 0;
padding: 0 .5em;
}
li {
list-style: none;
}
& .form-notification-icon,
& .form-description-icon {
font-size: 2em;
margin-left: .25em;
opacity: .4;
align-self: flex-start;
}
}
.form-notifications {
background-color: fade(@color-ok, 20%);
}
.form-description {
background-color: fade(@gray, 5%);
}
.errors {
list-style: none;
position: relative;
margin: 0; margin: 0;
padding: 0 .5em; padding: 0;
} display: block;
width: 100%;
li { & > li {
list-style: none; margin: -0.5em 0 0.5em 16.5em;
} color: #f56;
}
& .form-notification-icon,
& .form-description-icon {
font-size: 2em;
margin-left: .25em;
opacity: .4;
align-self: flex-start;
} }
} }
.form-notifications { form.icinga-forms .form-info {
background-color: fade(@color-ok, 20%);
}
.form-description {
background-color: fade(@gray, 5%);
}
.errors {
list-style: none;
position: relative;
margin: 0;
padding: 0;
display: block;
width: 100%;
& > li {
margin: -0.5em 0 0.5em 16.5em;
color: #f56;
}
}
.form-element-error {
color: @color-critical;
margin: 0 0 0.5em 15em;
padding: 0.5625em;
width: 100%;
}
.control-group {
flex-wrap: wrap;
}
.form-info {
color: @text-color-light; color: @text-color-light;
font-size: @font-size-small; font-size: @font-size-small;
list-style: none; list-style: none;
@ -397,22 +417,24 @@ input:checked + .toggle-slider:before {
// Placeholder styles // Placeholder styles
input:-moz-placeholder { // FF 18- .icinga-controls {
color: @gray; input:-moz-placeholder { // FF 18-
opacity: 1; color: @gray;
} opacity: 1;
}
input::-moz-placeholder { // FF 19+ input::-moz-placeholder { // FF 19+
color: @gray; color: @gray;
opacity: 1; opacity: 1;
} }
input:-ms-input-placeholder { input:-ms-input-placeholder {
color: @gray; color: @gray;
} }
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: @gray; color: @gray;
}
} }
// Specific form styles // Specific form styles