mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: minor changes to search input
This commit is contained in:
parent
b012131050
commit
0085114d4e
@ -3,7 +3,7 @@
|
||||
<div class="page-container page-body">
|
||||
<div class="page-action-bar">
|
||||
<label class="gf-form gf-form--grow gf-form--has-input-icon">
|
||||
<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" give-focus="true" placeholder="Filter by username or email" />
|
||||
<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by username or email" />
|
||||
<i class="gf-form-input-icon fa fa-search"></i>
|
||||
</label>
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
<div class="page-container page-body">
|
||||
<div class="page-action-bar">
|
||||
<label class="gf-form gf-form--grow gf-form--has-input-icon">
|
||||
<input type="text" class="gf-form-input max-width-20" placeholder="Find Team by name" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
|
||||
<input type="text" class="gf-form-input max-width-20" placeholder="Find Team by name" tabindex="1" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
|
||||
<i class="gf-form-input-icon fa fa-search"></i>
|
||||
</label>
|
||||
<div class="page-action-bar__spacer"></div>
|
||||
|
@ -4,7 +4,7 @@
|
||||
<div ng-if="ctrl.unfiltered.length">
|
||||
<div class="page-action-bar">
|
||||
<label class="gf-form gf-form--grow gf-form--has-input-icon">
|
||||
<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" give-focus="true" placeholder="Filter by name or type" />
|
||||
<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" placeholder="Filter by name or type" />
|
||||
<i class="gf-form-input-icon fa fa-search"></i>
|
||||
</label>
|
||||
<div class="page-action-bar__spacer"></div>
|
||||
|
@ -184,8 +184,8 @@ $input-bg-disabled: $dark-3;
|
||||
$input-color: $gray-4;
|
||||
$input-border-color: $dark-3;
|
||||
$input-box-shadow: inset 1px 0px 0.3rem 0px rgba(150, 150, 150, 0.10);
|
||||
$input-border-focus: $input-border-color !default;
|
||||
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
|
||||
$input-border-focus: $input-border-color;
|
||||
$input-box-shadow-focus: rgba(102, 175, 233, 0.6);
|
||||
$input-color-placeholder: $gray-1 !default;
|
||||
$input-label-bg: $gray-blue;
|
||||
$input-label-border-color: $dark-3;
|
||||
|
@ -45,10 +45,10 @@ $input-border: 1px solid $input-border-color;
|
||||
}
|
||||
|
||||
> input {
|
||||
padding-left: 30px;
|
||||
padding-left: 35px;
|
||||
|
||||
&:focus + .gf-form-input-icon {
|
||||
color: $gray-4;
|
||||
color: $text-muted
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -41,7 +41,7 @@
|
||||
&:focus {
|
||||
border-color: $input-border-focus;
|
||||
outline: none;
|
||||
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
|
||||
$shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px $input-box-shadow-focus;
|
||||
@include box-shadow($shadow);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user