mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
65 lines
1.8 KiB
SCSS
65 lines
1.8 KiB
SCSS
|
|
// iOS Search Bar
|
|
// --------------------------------------------------
|
|
|
|
$search-bar-ios-background-color: #c9c9ce !default;
|
|
$search-bar-ios-border-color: $list-ios-border-color !default;
|
|
$search-bar-ios-padding: 0 8px !default;
|
|
$search-bar-ios-input-height: 28px !default;
|
|
$search-bar-ios-background-svg: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'><path fill='#939398' 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 {
|
|
padding: $search-bar-ios-padding;
|
|
background: $search-bar-ios-background-color;
|
|
@include hairline(bottom, $search-bar-ios-border-color);
|
|
|
|
.search-bar-icon {
|
|
width: 100%;
|
|
height: 13px;
|
|
|
|
transform: translateX(calc(50% - 60px));
|
|
-webkit-transform: translateX(-webkit-calc(50% - 60px));
|
|
|
|
@include svg-background-image($search-bar-ios-background-svg);
|
|
background-size: $search-bar-ios-background-size;
|
|
background-repeat: no-repeat;
|
|
position: absolute;
|
|
left: 10px;
|
|
top: 8px;
|
|
}
|
|
|
|
.search-bar-input {
|
|
height: $search-bar-ios-input-height;
|
|
padding: 0 28px;
|
|
|
|
font-size: 1.4rem;
|
|
font-weight: 400;
|
|
|
|
border-radius: 5px;
|
|
color: #000;
|
|
background-color: #fff;
|
|
background-repeat: no-repeat;
|
|
background-position: 8px center;
|
|
|
|
|
|
@include calc(padding-left, "50% - 28px");
|
|
|
|
}
|
|
|
|
.search-bar-input, .search-bar-icon {
|
|
transition: all .2s ease;
|
|
}
|
|
|
|
.search-bar-input-container.left-align {
|
|
.search-bar-icon {
|
|
transform: translateX(0);
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
.search-bar-input {
|
|
padding-left: 28px;
|
|
}
|
|
}
|
|
}
|