mirror of
https://github.com/Icinga/icingaweb2.git
synced 2026-03-23 10:53:17 -04:00
606 lines
11 KiB
Text
606 lines
11 KiB
Text
/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
|
||
|
||
/**
|
||
Rules found in here are structured with two layers:
|
||
|
||
1) form.icinga-form, 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
|
||
*/
|
||
|
||
// General form layout
|
||
|
||
form.icinga-form {
|
||
max-width: 70em;
|
||
width: 80%;
|
||
|
||
.control-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: flex-start;
|
||
|
||
// Negative margin-right because every child gets 1em right but we can't exclude
|
||
// the last element as it's impossible to identify the last *visible* element
|
||
margin: 1em -1em 1em 0;
|
||
|
||
> fieldset {
|
||
> .control-group:first-of-type {
|
||
margin-top: 0;
|
||
}
|
||
|
||
> .control-group:last-of-type {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.control-group > :not(.control-label-group) {
|
||
margin-right: 1em;
|
||
}
|
||
|
||
.form-controls {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
&.inline {
|
||
width: auto;
|
||
|
||
.control-group {
|
||
margin: 0;
|
||
align-items: center;
|
||
|
||
> :not(.control-label-group) {
|
||
margin-right: .5em;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: -.5em;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
form.inline {
|
||
display: inline-block;
|
||
|
||
fieldset {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
// Minimal form layout
|
||
|
||
#layout.minimal-layout,
|
||
#layout.twocols:not(.wide-layout) {
|
||
form.icinga-form {
|
||
&:not(.inline) {
|
||
width: 100%;
|
||
}
|
||
|
||
.control-label-group {
|
||
text-align: left;
|
||
padding-bottom: 0;
|
||
padding-left: 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.toggle-switch ~ .control-info:before {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.errors {
|
||
margin: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
#layout.minimal-layout .icinga-form {
|
||
.form-controls {
|
||
input[type="submit"] {
|
||
width: 100%;
|
||
|
||
&:not(:last-child) {
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// Label styles
|
||
|
||
form.icinga-form .control-label-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
line-height: 1.1em;
|
||
padding: .5625em .5625em .5625em 0;
|
||
max-height: 2.5em;
|
||
text-align: right;
|
||
width: 14em;
|
||
}
|
||
|
||
form.icinga-form.inline .control-label-group {
|
||
width: auto;
|
||
line-height: 0.857em;
|
||
}
|
||
|
||
.icinga-controls fieldset {
|
||
margin: 0;
|
||
padding: 0;
|
||
border: none;
|
||
|
||
legend {
|
||
font-weight: bold;
|
||
font-size: 4/3em;
|
||
margin: 0.556em 0 0.333em;
|
||
}
|
||
}
|
||
|
||
.icinga-controls .control-info {
|
||
line-height: 2.25em;
|
||
opacity: .6;
|
||
|
||
&:before {
|
||
margin-right: 0;
|
||
}
|
||
|
||
&:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
form.icinga-form .control-group .control-info {
|
||
margin-left: -.5em;
|
||
}
|
||
form.icinga-form .control-group .toggle-switch ~ .control-info {
|
||
margin-left: 0;
|
||
}
|
||
|
||
// General input styles
|
||
|
||
.icinga-controls {
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="number"],
|
||
input[type="datetime-local"],
|
||
input[type="date"],
|
||
input[type="time"],
|
||
input[type="file"],
|
||
textarea,
|
||
select {
|
||
background-color: @low-sat-blue;
|
||
}
|
||
}
|
||
|
||
form.icinga-form {
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="number"],
|
||
input[type="datetime-local"],
|
||
input[type="date"],
|
||
input[type="time"],
|
||
input[type="file"],
|
||
.control-group > fieldset,
|
||
textarea,
|
||
select {
|
||
flex: 1 1 auto;
|
||
width: 0;
|
||
}
|
||
}
|
||
|
||
.icinga-controls {
|
||
input:not([type="radio"]),
|
||
.toggle-switch,
|
||
button,
|
||
select,
|
||
textarea {
|
||
border: none;
|
||
.rounded-corners(.25em);
|
||
.appearance(none);
|
||
}
|
||
}
|
||
|
||
.icinga-controls {
|
||
input:not([type="checkbox"]),
|
||
.toggle-switch,
|
||
select,
|
||
textarea,
|
||
button,
|
||
.toggle-switch {
|
||
font-size: inherit;
|
||
padding: @vertical-padding;
|
||
}
|
||
|
||
input[type="radio"] {
|
||
margin-right: .25em;
|
||
}
|
||
}
|
||
|
||
form.icinga-form {
|
||
.control-group .toggle-switch,
|
||
.form-controls .toggle-switch {
|
||
margin-top: 0.5em*0.666666667;
|
||
margin-bottom: 0.5em*0.666666667;
|
||
}
|
||
}
|
||
|
||
form.icinga-form {
|
||
select:not([multiple]),
|
||
input[type="text"],
|
||
input[type="password"],
|
||
input[type="number"],
|
||
input[type="datetime-local"],
|
||
input[type="date"],
|
||
input[type="time"] {
|
||
// Use the same height for select and all supported input elements. input[type="file"] is not styled here
|
||
// because it requires more height due to the built-in ‘Choose file’ button.
|
||
// Elements such as checkbox, radio and submit buttons have their own custom style.
|
||
line-height: 1;
|
||
height: 2.25em;
|
||
}
|
||
}
|
||
|
||
// Remove native dropdown arrow in IE10+
|
||
.icinga-controls select::-ms-expand {
|
||
display: none;
|
||
opacity: 0;
|
||
}
|
||
|
||
.icinga-controls select:not([multiple]) {
|
||
padding-right: 1.5625em;
|
||
background-image: url(../img/select-icon.svg);
|
||
background-repeat: no-repeat;
|
||
background-position: right center;
|
||
background-size: contain;
|
||
}
|
||
|
||
form.icinga-form select {
|
||
width: 0; // Prevent selects with long option values from exceeding the container
|
||
}
|
||
|
||
form.inline select {
|
||
width: auto;
|
||
}
|
||
|
||
|
||
// Specific input styles
|
||
|
||
.link-button {
|
||
.action-link();
|
||
// Reset defaults
|
||
background: none;
|
||
border: none;
|
||
display: inline-block;
|
||
padding: 0;
|
||
|
||
text-align: left;
|
||
}
|
||
|
||
.icinga-controls {
|
||
input ~ .spinner,
|
||
button ~ .spinner,
|
||
select ~ .spinner,
|
||
textarea ~ .spinner {
|
||
line-height: normal;
|
||
padding: .5em 0;
|
||
|
||
&:before {
|
||
vertical-align: middle;
|
||
margin-left: .5em;
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* selects get their spinner specifically placed */
|
||
.icinga-controls select:not([multiple]) + .spinner {
|
||
height: 2.25em;
|
||
margin: 0;
|
||
|
||
&:before {
|
||
margin-left: -3.75em;
|
||
}
|
||
}
|
||
|
||
form.icinga-form .form-controls {
|
||
.spinner {
|
||
order: -1;
|
||
}
|
||
|
||
.btn-primary {
|
||
order: 99;
|
||
}
|
||
}
|
||
|
||
// Button styles
|
||
|
||
.icinga-controls {
|
||
button:not([type]),
|
||
button[type="submit"],
|
||
input[type="submit"],
|
||
input[type="submit"].btn-confirm {
|
||
.button();
|
||
}
|
||
|
||
input[type="submit"].btn-remove {
|
||
.button(@body-bg-color, @color-critical, @color-critical-accentuated);
|
||
}
|
||
|
||
input[type="submit"].btn-cancel {
|
||
.button(@body-bg-color, @gray, @black);
|
||
}
|
||
|
||
button.noscript-apply {
|
||
color: @gray;
|
||
background-color: @gray-lightest;
|
||
border-color: @gray;
|
||
border-width: 1px;
|
||
}
|
||
|
||
button[type="button"] {
|
||
background-color: @low-sat-blue;
|
||
}
|
||
}
|
||
|
||
form.icinga-form {
|
||
button[type="button"] {
|
||
line-height: normal;
|
||
}
|
||
}
|
||
|
||
form.inline {
|
||
:not([type="hidden"]) {
|
||
& ~ button:not([type]),
|
||
& ~ button[type="submit"],
|
||
& ~ input[type="submit"],
|
||
& ~ input[type="submit"].btn-confirm {
|
||
margin-left: @horizontal-padding;
|
||
}
|
||
}
|
||
|
||
button.noscript-apply {
|
||
margin-left: .5em;
|
||
padding: .1em;
|
||
}
|
||
}
|
||
|
||
// Toggle styles
|
||
|
||
.icinga-controls .toggle-switch {
|
||
cursor: pointer;
|
||
position: relative;
|
||
display: inline-block;
|
||
height: 1.5em;
|
||
width: 2.625em;
|
||
}
|
||
|
||
.icinga-controls .toggle-switch .toggle-slider {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
|
||
display: inline-block;
|
||
background: @low-sat-blue;
|
||
border: 1px solid;
|
||
border-color: @low-sat-blue;
|
||
box-sizing: content-box;
|
||
border-radius: 1em;
|
||
height: 4/3em;
|
||
width: 8/3em;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.icinga-controls .toggle-switch .toggle-slider:before {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
|
||
background: @text-color-inverted;
|
||
border-radius: 1em;
|
||
border: 1px solid;
|
||
border-color: @low-sat-blue;
|
||
box-sizing: border-box;
|
||
content: "";
|
||
display: block;
|
||
height: 4/3em;
|
||
margin-left: 0;
|
||
width: 4/3em;
|
||
|
||
@transition: left .2s ease, margin .2s ease;
|
||
-webkit-transition: @transition;
|
||
-moz-transition: @transition;
|
||
-o-transition: @transition;
|
||
transition: @transition;
|
||
}
|
||
|
||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
|
||
background-color: @icinga-blue;
|
||
border: 1px solid;
|
||
border-color: @icinga-blue;
|
||
}
|
||
|
||
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
|
||
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px @icinga-blue-light;
|
||
}
|
||
|
||
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
|
||
border: 1px solid;
|
||
border-color: @icinga-blue;
|
||
left: 100%;
|
||
margin-left: -4/3em;
|
||
}
|
||
|
||
// Disabled inputs
|
||
|
||
.icinga-controls .toggle-switch.disabled {
|
||
cursor: default;
|
||
|
||
& > .toggle-slider {
|
||
background-color: @gray-light;
|
||
border-color: @gray-light;
|
||
|
||
&:before {
|
||
background-color: @gray-lighter;
|
||
border-color: @gray-light;
|
||
}
|
||
}
|
||
}
|
||
|
||
form.icinga-form .control-group.disabled .control-label-group {
|
||
color: @disabled-gray;
|
||
}
|
||
|
||
.icinga-controls {
|
||
input[disabled],
|
||
select[disabled] {
|
||
background-color: @gray-lighter;
|
||
border-color: transparent;
|
||
}
|
||
}
|
||
|
||
// Errors and additional information
|
||
|
||
form.icinga-form {
|
||
.form-notifications,
|
||
.form-description {
|
||
border-radius: .25em;
|
||
display: flex;
|
||
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 {
|
||
&.info {
|
||
background-color: @form-info-bg-color;
|
||
}
|
||
|
||
&.error {
|
||
background-color: @form-error-bg-color;
|
||
}
|
||
|
||
&.warning {
|
||
background-color: @form-warning-bg-color;
|
||
}
|
||
}
|
||
|
||
.form-description {
|
||
background-color: @light-text-bg-color;
|
||
}
|
||
|
||
.errors {
|
||
list-style: none;
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0 0 0 15em;
|
||
padding: 0;
|
||
|
||
& > li {
|
||
margin: 0.5em;
|
||
color: #f56;
|
||
}
|
||
}
|
||
}
|
||
|
||
form.icinga-form .form-info {
|
||
color: @text-color-light;
|
||
font-size: @font-size-small;
|
||
list-style: none;
|
||
padding-left: 0;
|
||
}
|
||
|
||
// Placeholder styles
|
||
|
||
.icinga-controls {
|
||
input::placeholder {
|
||
color: @disabled-gray;
|
||
font-style: italic;
|
||
opacity: 1;
|
||
}
|
||
|
||
input:-ms-input-placeholder {
|
||
color: @disabled-gray;
|
||
font-style: italic;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
// Specific form styles
|
||
|
||
.search.inline {
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Flyover form styles */
|
||
|
||
.flyover-content form:not(.inline):not([role="search"]) {
|
||
width: auto;
|
||
}
|
||
|
||
.flyover-content .control-label-group {
|
||
text-align: left;
|
||
}
|
||
|
||
.theme-mode-input {
|
||
display: none;
|
||
|
||
&:checked + img {
|
||
border-color: @icinga-blue;
|
||
border-radius: .25em;
|
||
}
|
||
|
||
& + img {
|
||
margin: 0 auto;
|
||
border: .25em solid transparent;
|
||
display: block;
|
||
width: 6em;
|
||
overflow: hidden;
|
||
box-shadow: 0 0 .25em 0 rgba(0,0,0,.4);
|
||
}
|
||
|
||
&[disabled] ~ img,
|
||
&[disabled] ~ span {
|
||
opacity: .25;
|
||
}
|
||
|
||
& ~ span {
|
||
display: block;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
#layout.minimal-layout .icinga-form {
|
||
.theme-mode {
|
||
.control-label-group {
|
||
width: 100%;
|
||
margin-bottom: .5em;
|
||
}
|
||
|
||
label:first-of-type {
|
||
margin-left: auto;
|
||
}
|
||
}
|
||
}
|