Add an input-container to search field in Contact toolbar

pull/91/head
iRouge 2015-02-26 00:39:18 -05:00 committed by Francis Lachapelle
parent 5819cc75d3
commit 012d953d65
4 changed files with 24 additions and 4 deletions

View File

@ -144,6 +144,7 @@
<div class="section">
<div class="attr" data-ng-repeat="phone in card.phones">
<div layout="row" layout-align="center end">
<i class="md-icon-phone md-icon-lg cols-1"><!--icon--></i>
<md-select data-ng-model="phone.type">
<md-option ng-repeat="type in allTelTypes" ng-value="type">{{ type }}</md-option>
</md-select>

View File

@ -207,9 +207,12 @@
</div>
<div class="md-toolbar-tools md-toolbar-tools-bottom" layout="row" layout-align="space-between center">
<div class="cols-7" layout="row" layout-align="space-between center" style="padding-right: 16px">
<span class="md-icon-search"><!-- icon search --></span>
<input name="folderSearch" type="search" label:placeholder="Search"
ng-model="search.filter" ng-keyup="doSearch($event)"/>
<md-input-container class="sg-search-field-container">
<label style="color: white"><i class="md-icon-search"><!--icon--></i>Search</label>
<input name="folderSearch" type="search"
ng-model="search.filter" ng-keyup="doSearch($event)" style="color: white"/>
</md-input-container>
<div class="sg-toolbar-group">
<span>ALL
<span class="md-icon-arrow-drop-down"><!-- sort drop-down --></span>

View File

@ -11,7 +11,7 @@
@import 'extends';
/**
MD-ICONS
Usage: place Material Design Iconic Font icons on almost any elemnt using the Prefix md-icon
Usage: place Material Design Iconic Font icons on almost any element using the Prefix md-icon
and the icon's name (http://zavoloklom.github.io/material-design-iconic-font/icons.html)
exemple : <i class="md-icon-more-horiz></i>
@ -37,3 +37,7 @@ src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAjEMAAsAA
font-weight: normal;
font-style: normal;
}
.md-icon-lg {
line-height: 1;
vertical-align: initial;
}

View File

@ -35,6 +35,17 @@ $input-padding-top: 2px !default;
padding: 0 2px;
}
.sg-search-field-container {
margin-bottom: 12px;
color: white;
label {
color: inherit;
}
input {
color: inherit;
border: none;
}
}
.pseudo-input-label,
.button-label {
@ -45,6 +56,7 @@ $input-padding-top: 2px !default;
font-size: sg-size(caption);
line-height: $sg-line-height-1;
}
.pseudo-input-label--no-margin,
.button-label {
margin-top: 0;