CSS: Move controls styles to controls.less

refs #3676
This commit is contained in:
Florian Strohmaier 2019-06-26 17:06:06 +02:00 committed by Johannes Meyer
parent 54ba112d64
commit e04d42b7a9
2 changed files with 30 additions and 37 deletions

View File

@ -23,6 +23,28 @@
}
}
.controls input.search,
input.search {
.transition(border 0.3s ease);
.transition(background-image 0.2s ease);
background-image: url(../img/icons/search.png);
background-repeat: no-repeat;
background-size: 1em 1em;
background-position: .25em center;
outline: none;
padding-left: 1.5em;
width: 20em;
&:focus {
background-image: url(../img/icons/search_icinga_blue.png);
}
&:focus:not([readonly]) {
border-color: @icinga-blue;
}
}
.backend-selection,
.pagination-control,
.selection-info,
@ -30,13 +52,6 @@
margin-bottom: 0.5em;
}
.backend-selection,
.pagination-control,
.sort-controls-container {
// Select controls may not respect font-size thus leading to improperly vertical alignment w/o big enough line-height
/*line-height: 2em;*/
}
.filter {
// Display filter control on a new line
clear: both;
@ -146,7 +161,6 @@
.sort-controls-container {
clear: right;
float: right;
line-height: 1;
> * {
vertical-align: middle;

View File

@ -125,9 +125,10 @@ select ~ .spinner:before {
form input[type="text"],
form input[type="password"],
form input[type="number"],
form input[type="datetime-local"],
form textarea,
form select {
background: @low-sat-blue;
background-color: @low-sat-blue;
flex: 1;
}
@ -173,8 +174,8 @@ form input {
input,
select {
line-height: 1.5em;
padding: 0 .5625em;
line-height: 1em;
padding: .3625em .5625em;
max-width: 16em;
}
@ -206,28 +207,6 @@ form select:not([multiple]) {
specific input styles
***********************************************************************************************************************/
input.search {
.transition(border 0.3s ease);
.transition(background-image 0.2s ease);
background: transparent url(../img/icons/search.png) no-repeat scroll 0.1em center;
background-size: 1em 1em;
border: none;
border-bottom: 1px solid @gray-light;
outline: none;
padding: @vertical-padding / 2 @horizontal-padding / 2;
padding-left: 1.5em;
width: 20em;
&:focus {
background-color: @body-bg-color;
background-image: url(../img/icons/search_icinga_blue.png);
}
&:focus:not([readonly]) {
border-color: @icinga-blue;
}
}
.link-button {
.action-link();
// Reset defaults
@ -448,21 +427,21 @@ input:checked + .toggle-slider:before {
***********************************************************************************************************************/
input:-moz-placeholder { // FF 18-
color: @gray-light;
color: @gray;
opacity: 1;
}
input::-moz-placeholder { // FF 19+
color: @gray-light;
color: @gray;
opacity: 1;
}
input:-ms-input-placeholder {
color: @gray-light;
color: @gray;
}
input::-webkit-input-placeholder {
color: @gray-light;
color: @gray;
}