Add form-backgrounds colour and apply to toggles and buttons

This commit is contained in:
Feu Mourek 2019-08-02 12:53:52 +02:00
parent 7acdf789e0
commit bc4bb6741b
1 changed files with 50 additions and 1 deletions

View File

@ -9,6 +9,7 @@
@base0: #839496;
@base1: #93a1a1;
@base2: #eee8d5;
@button-primary-color: #237c98;
@icinga-blue: @base1;
@body-bg-color: @base03;
@ -266,6 +267,10 @@ textarea {
}
}
/* Form styles */
@input-background: lighten(@base02, 5);
form .control-group {
input[type="text"],
input[type="password"],
@ -275,6 +280,50 @@ form .control-group {
input[type="time"],
textarea,
select {
background-color: @base02;
background-color: @input-background;
}
}
.icinga-controls .toggle-switch .toggle-slider {
background: @input-background;
border: 2px solid @input-background;
}
.icinga-controls .toggle-switch .toggle-slider:before {
background: @body-bg-color;
border: 1px solid @body-bg-color;
}
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider {
background-color: @button-primary-color;
border: 1px solid @button-primary-color;
}
.icinga-controls input[type="checkbox"]:focus + .toggle-switch .toggle-slider {
box-shadow: 0 0 0 2px @body-bg-color, 0 0 0 4px fade(@button-primary-color, 40);
}
.icinga-controls input[type="checkbox"]:checked + .toggle-switch .toggle-slider:before {
border: 1px solid @button-primary-color;
}
.button {
background-color: @input-background;
border: 2px solid @input-background;
color: @text-color;
&:focus,
&:hover,
&.btn-primary {
background-color: lighten(@base02, 15);
border-color: lighten(@base02, 15);
color: @text-color;
}
&.btn-primary:focus,
&.btn-primary:hover {
background-color: @button-primary-color;
border-color: @button-primary-color;
color: @text-color;
}
}