tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-27 15:54:03 +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

158
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,21 +19,13 @@
// 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 {
display: flex;
margin-left: 16em;
justify-content: flex-end;
}
.control-group { .control-group {
display: flex; display: flex;
flex-wrap: wrap;
margin: 0 -.5em; margin: 0 -.5em;
align-items: flex-start; align-items: flex-start;
@ -33,11 +34,18 @@ form:not(.inline):not([role="search"]) {
} }
} }
.form-controls {
display: flex;
margin-left: 16em;
justify-content: flex-end;
}
}
// Minimal form layout // Minimal form layout
#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,7 +55,6 @@ 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;
@ -61,10 +68,11 @@ form:not(.inline):not([role="search"]) {
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,38 +109,55 @@ 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,
select {
background-color: @low-sat-blue; background-color: @low-sat-blue;
}
}
form.icinga-forms {
input[type="text"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
textarea,
select {
flex: 1; flex: 1;
width: 0; width: 0;
} }
}
form input:not([type="checkbox"]), .icinga-controls {
form .toggle-switch, input:not([type="checkbox"]),
form button, .toggle-switch,
form select, button,
form textarea, select,
form button, textarea,
form .toggle-switch, button,
form input { .toggle-switch,
input {
border: none; border: none;
.rounded-corners(.25em); .rounded-corners(.25em);
.appearance(none); .appearance(none);
} }
}
.icinga-controls {
.control-group input:not([type="checkbox"]), .control-group input:not([type="checkbox"]),
.control-group .toggle-switch, .control-group .toggle-switch,
.control-group button, .control-group button,
@ -153,33 +169,36 @@ form input {
font-size: inherit; font-size: inherit;
padding: @vertical-padding; padding: @vertical-padding;
} }
}
form.icinga-forms {
.control-group .toggle-switch, .control-group .toggle-switch,
.form-controls .toggle-switch { .form-controls .toggle-switch {
margin: 0.875em .5em; margin: 0.875em .5em;
} }
}
form select:not([multiple]) { form.icinga-forms select:not([multiple]) {
padding-right: 1.5625em;
// 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,6 +242,7 @@ form.inline select {
// Button styles // Button styles
.icinga-controls {
.form-controls input[type="submit"], .form-controls input[type="submit"],
.form-controls input[type="submit"].btn-confirm { .form-controls input[type="submit"].btn-confirm {
.button(); .button();
@ -229,10 +255,11 @@ form.inline select {
.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,18 +342,21 @@ 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;
} }
.icinga-controls {
.control-group input[disabled], .control-group input[disabled],
.control-group select[disabled] { .control-group select[disabled] {
background: @gray-lighter; background: @gray-lighter;
border-color: transparent; border-color: transparent;
} }
}
// Errors and additional information // Errors and additional information
form.icinga-forms {
.form-notifications, .form-notifications,
.form-description { .form-description {
border-radius: .25em; border-radius: .25em;
@ -376,19 +406,9 @@ input:checked + .toggle-slider:before {
color: #f56; color: #f56;
} }
} }
.form-element-error {
color: @color-critical;
margin: 0 0 0.5em 15em;
padding: 0.5625em;
width: 100%;
} }
.control-group { form.icinga-forms .form-info {
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,6 +417,7 @@ input:checked + .toggle-slider:before {
// Placeholder styles // Placeholder styles
.icinga-controls {
input:-moz-placeholder { // FF 18- input:-moz-placeholder { // FF 18-
color: @gray; color: @gray;
opacity: 1; opacity: 1;
@ -414,6 +435,7 @@ input:-ms-input-placeholder {
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: @gray; color: @gray;
} }
}
// Specific form styles // Specific form styles