453 lines
10 KiB
Plaintext
453 lines
10 KiB
Plaintext
/*! Icinga Web 2 | (c) 2019 Icinga Development Team | GPLv2+ */
|
|
|
|
/**********************************************************************************************************************
|
|
used colors (todo: move to base.less eventually)
|
|
***********************************************************************************************************************/
|
|
|
|
@disabled-gray: #9a9a9a;
|
|
@low-sat-blue: #dae3e6;
|
|
@low-sat-blue-dark: #becbcf;
|
|
@icinga-blue-light: #a5c4cd;
|
|
@icinga-blue-dark: #0081a6;
|
|
|
|
/**********************************************************************************************************************
|
|
general form layout
|
|
***********************************************************************************************************************/
|
|
|
|
form:not(.inline):not([role="search"]) {
|
|
max-width: 70em;
|
|
width: 80%;
|
|
}
|
|
|
|
.form-controls {
|
|
display: flex;
|
|
margin-left: 16em;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
|
|
|
|
.control-group {
|
|
display: flex;
|
|
margin: 0 -.5em;
|
|
align-items: flex-start;
|
|
|
|
> * {
|
|
margin: .5em;
|
|
}
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
minimal form layout
|
|
***********************************************************************************************************************/
|
|
|
|
#layout.minimal-layout,
|
|
#layout.twocols:not(.wide-layout) {
|
|
form:not(.inline) {
|
|
width: 100%;
|
|
|
|
.control-label-group {
|
|
text-align: left;
|
|
width: 100%;
|
|
padding-bottom: 0;
|
|
padding-left: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.toggle-switch ~ .control-info:before {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.control-info {
|
|
opacity: .5;
|
|
}
|
|
|
|
.errors > li {
|
|
margin-left: .5em;
|
|
}
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
label styles
|
|
***********************************************************************************************************************/
|
|
|
|
.control-group .control-label-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
line-height: 1;
|
|
padding: .5625em .5625em .5625em 0;
|
|
max-height: 2.5em;
|
|
text-align: right;
|
|
width: 15em;
|
|
}
|
|
|
|
.control-info {
|
|
line-height: 2.5em;
|
|
margin-right: 1em;
|
|
opacity: .6;
|
|
margin-left: 0;
|
|
|
|
&:before {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.toggle-switch ~ .control-info {
|
|
position: relative;
|
|
margin-left: .5em;
|
|
}
|
|
|
|
.spinner {
|
|
line-height: 2.5em;
|
|
|
|
&:before {
|
|
margin-left: .5em;
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
form.inline .control-group .spinner {
|
|
line-height: 1.5;
|
|
margin: 0 auto;
|
|
padding: 0 .5em;
|
|
}
|
|
|
|
select ~ .spinner:before {
|
|
margin-left: -3.5em;
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
general input styles
|
|
***********************************************************************************************************************/
|
|
|
|
form input[type="text"],
|
|
form input[type="password"],
|
|
form input[type="number"],
|
|
form input[type="datetime-local"],
|
|
form textarea,
|
|
form select {
|
|
background-color: @low-sat-blue;
|
|
flex: 1;
|
|
}
|
|
|
|
form input:not([type="checkbox"]),
|
|
form .toggle-switch,
|
|
form button,
|
|
form select,
|
|
form textarea,
|
|
form button,
|
|
form .toggle-switch,
|
|
form input {
|
|
border: none;
|
|
.rounded-corners(.25em);
|
|
.appearance(none);
|
|
}
|
|
|
|
.control-group input:not([type="checkbox"]),
|
|
.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;
|
|
}
|
|
|
|
.control-group .toggle-switch,
|
|
.form-controls .toggle-switch {
|
|
margin: 1em .5em;
|
|
}
|
|
|
|
form select {
|
|
padding-right: 1.5625em;
|
|
/* compensate inconsistent select height calculations */
|
|
line-height: 1em;
|
|
height: 2.25em;
|
|
}
|
|
|
|
/* Remove native dropdown arrow in IE10+ */
|
|
form select::-ms-expand {
|
|
display: none;
|
|
opacity: 0
|
|
}
|
|
|
|
form select:not([multiple]) {
|
|
background-image: url(../img/select-icon.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: right center;
|
|
background-size: contain;
|
|
}
|
|
|
|
form select {
|
|
/* Prevent selects with long option values from exceeding the container */
|
|
width: 0
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.control-group .spinner {
|
|
margin: .5em 0;
|
|
}
|
|
|
|
.form-controls {
|
|
.spinner {
|
|
order: -1;
|
|
}
|
|
|
|
.btn-primary {
|
|
order: 99;
|
|
}
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
button styles
|
|
***********************************************************************************************************************/
|
|
|
|
.form-controls input[type="submit"],
|
|
.form-controls input[type="submit"].btn-confirm {
|
|
.button();
|
|
}
|
|
|
|
.form-controls input[type="submit"].btn-remove {
|
|
.button(@body-bg-color, @color-critical, darken(@color-critical, 10%));
|
|
}
|
|
|
|
.form-controls input[type="submit"].btn-cancel {
|
|
.button(@body-bg-color, @gray, @black);
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
IPL toggle styles
|
|
***********************************************************************************************************************/
|
|
|
|
/* The switch - the box around the slider */
|
|
.toggle-switch {
|
|
cursor: pointer;
|
|
position: relative;
|
|
display: inline-block;
|
|
height: 1.5em;
|
|
width: 2.625em;
|
|
}
|
|
|
|
/* Hide default HTML checkbox */
|
|
.toggle-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* The slider */
|
|
.toggle-slider {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
display: inline-block;
|
|
background: @low-sat-blue;
|
|
border: 1px solid @low-sat-blue;
|
|
box-sizing: content-box;
|
|
border-radius: 1em;
|
|
height: 4/3em;
|
|
width: 8/3em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.toggle-slider:before {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
|
|
background: @text-color-inverted;
|
|
border-radius: 1em;
|
|
border: 1px solid @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;
|
|
}
|
|
|
|
input:checked + .toggle-slider {
|
|
background-color: @icinga-blue;
|
|
border: 1px solid @icinga-blue;
|
|
}
|
|
|
|
input:focus + .toggle-slider {
|
|
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@icinga-blue, 40);
|
|
}
|
|
|
|
input:checked + .toggle-slider:before {
|
|
border: 1px solid @icinga-blue;
|
|
left: 100%;
|
|
margin-left: -4/3em;
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
disabled inputs
|
|
***********************************************************************************************************************/
|
|
|
|
.toggle-switch.disabled {
|
|
cursor: default;
|
|
|
|
& > .toggle-slider {
|
|
background-color: @gray-light;
|
|
border-color: @gray-light;
|
|
|
|
&:before {
|
|
background-color: @gray-lighter;
|
|
border-color: @gray-light;
|
|
}
|
|
}
|
|
}
|
|
|
|
.control-group.disabled .control-label-group {
|
|
color: @disabled-gray;
|
|
}
|
|
|
|
.control-group input[disabled],
|
|
.control-group select[disabled] {
|
|
background: @gray-lighter;
|
|
border: none;
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
errors and additional information
|
|
***********************************************************************************************************************/
|
|
|
|
.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 {
|
|
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;
|
|
font-size: @font-size-small;
|
|
list-style: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
/**********************************************************************************************************************
|
|
placeholder styles
|
|
***********************************************************************************************************************/
|
|
|
|
input:-moz-placeholder { // FF 18-
|
|
color: @gray;
|
|
opacity: 1;
|
|
}
|
|
|
|
input::-moz-placeholder { // FF 19+
|
|
color: @gray;
|
|
opacity: 1;
|
|
}
|
|
|
|
input:-ms-input-placeholder {
|
|
color: @gray;
|
|
}
|
|
|
|
input::-webkit-input-placeholder {
|
|
color: @gray;
|
|
}
|
|
|
|
|
|
/**********************************************************************************************************************
|
|
specific form styles
|
|
***********************************************************************************************************************/
|
|
|
|
|
|
.limiter-control-form > * {
|
|
display: inline-block;
|
|
margin-right: 0.25em;
|
|
}
|
|
|
|
.search.inline {
|
|
display: inline-block;
|
|
}
|
|
|
|
.sort-control > * {
|
|
display: inline-block;
|
|
}
|