javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(search-bar): Added iOS styling and a close icon

Browse Source 
References #247
This commit is contained in:
Brandy Carney
2015-10-05 19:25:30 -04:00
parent 2d7969cdf8
commit 058e28c094
2 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
ionic/components/search-bar/modes/ios.scss
View File

@@ -8,9 +8,16 @@ $search-bar-ios-padding: 0 8px !default;
$search-bar-ios-input-height: 28px !default;
$search-bar-ios-input-text-color: #9D9D9D !default;
$search-bar-ios-input-background-color: #FFFFFF !default;
$search-bar-ios-input-icon-color: #767676 !default;
$search-bar-ios-input-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='#939398' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$search-bar-ios-background-size: 13px 13px !default;
$search-bar-ios-input-transition: all 0.3s cubic-bezier(.25, .45, .05, 1) !default;
$search-bar-ios-input-search-icon-color: #767676 !default;
$search-bar-ios-input-search-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='" + $search-bar-ios-input-search-icon-color + "' d='M5,1c2.2,0,4,1.8,4,4S7.2,9,5,9S1,7.2,1,5S2.8,1,5,1 M5,0C2.2,0,0,2.2,0,5s2.2,5,5,5s5-2.2,5-5S7.8,0,5,0 L5,0z'/><line stroke='" + $search-bar-ios-input-search-icon-color + "' stroke-miterlimit='10' x1='12.6' y1='12.6' x2='8.2' y2='8.2'/></svg>" !default;
$search-bar-ios-input-search-icon-size: 13px !default;
$search-bar-ios-input-close-icon-color: #8F8E94 !default;
$search-bar-ios-input-close-icon-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='" + $search-bar-ios-input-close-icon-color + "' d='M403.1,108.9c-81.2-81.2-212.9-81.2-294.2,0s-81.2,212.9,0,294.2c81.2,81.2,212.9,81.2,294.2,0S484.3,190.1,403.1,108.9z M352,340.2L340.2,352l-84.4-84.2l-84,83.8L160,339.8l84-83.8l-84-83.8l11.8-11.8l84,83.8l84.4-84.2l11.8,11.8L267.6,256L352,340.2z'/></svg>" !default;
$search-bar-ios-input-close-icon-size: 17px !default;
.search-bar {
padding: $search-bar-ios-padding;
@@ -18,14 +25,15 @@ $search-bar-ios-background-size: 13px 13px !default;
border-bottom: 1px solid $search-bar-ios-border-color;
}
.search-bar-icon {
width: 100%;
height: 13px;
.search-bar-search-icon {
width: $search-bar-ios-input-search-icon-size + 1;
height: $search-bar-ios-input-search-icon-size + 1;
transform: translateX(calc(50% - 60px));
transform: translateX(calc(50% + 90px));
transition: $search-bar-ios-input-transition;
@include svg-background-image($search-bar-ios-input-background-svg);
background-size: $search-bar-ios-background-size;
@include svg-background-image($search-bar-ios-input-search-icon-svg);
background-size: $search-bar-ios-input-search-icon-size;
background-repeat: no-repeat;
position: absolute;
left: 10px;
@@ -45,21 +53,31 @@ $search-bar-ios-background-size: 13px 13px !default;
background-repeat: no-repeat;
background-position: 8px center;
transition: $search-bar-ios-input-transition;
@include calc(padding-left, "50% - 28px");
}
.search-bar-close-icon {
width: $search-bar-ios-input-close-icon-size;
height: $search-bar-ios-input-close-icon-size;
@include svg-background-image($search-bar-ios-input-close-icon-svg);
background-size: $search-bar-ios-input-close-icon-size;
background-repeat: no-repeat;
position: absolute;
right: 10px;
top: 6px;
}
.search-bar-input-container.left-align {
.search-bar-icon {
.search-bar-search-icon {
transform: translateX(0);
-webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
transition: $search-bar-ios-input-transition;
}
.search-bar-input {
padding-left: 28px;
-webkit-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
-moz-transition: all 0.3s cubic-bezier(.25, .45, .05, 1);
transition: $search-bar-ios-input-transition;
}
}

2
ionic/components/search-bar/search-bar.ts
View File

@@ -23,7 +23,7 @@ import {IonicComponent, IonicView} from '../../config/decorators';
@IonicView({
template: `
<div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
<div class="search-bar-icon"></div>
<div class="search-bar-search-icon"></div>
<input (focus)="inputFocused()" (blur)="inputBlurred()"
(input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
<div class="search-bar-close-icon"></div>