From e04d42b7a9ca420a78661dab8e53544230c75512 Mon Sep 17 00:00:00 2001 From: Florian Strohmaier Date: Wed, 26 Jun 2019 17:06:06 +0200 Subject: [PATCH] CSS: Move controls styles to controls.less refs #3676 --- public/css/icinga/controls.less | 30 +++++++++++++++++++------- public/css/icinga/forms.less | 37 +++++++-------------------------- 2 files changed, 30 insertions(+), 37 deletions(-) diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less index effc1812d..ea09a0312 100644 --- a/public/css/icinga/controls.less +++ b/public/css/icinga/controls.less @@ -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; diff --git a/public/css/icinga/forms.less b/public/css/icinga/forms.less index f801d1c44..61ea8e007 100644 --- a/public/css/icinga/forms.less +++ b/public/css/icinga/forms.less @@ -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; }