ux: minor changes to search input

This commit is contained in:
Torkel Ödegaard 2017-12-14 13:08:32 +01:00
parent b012131050
commit 0085114d4e
6 changed files with 8 additions and 8 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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;

View File

@ -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
}
}
}

View File

@ -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);
}
}