mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
69 lines
2.2 KiB
SCSS
69 lines
2.2 KiB
SCSS
|
|
// iOS Search Bar
|
|
// --------------------------------------------------
|
|
|
|
$search-bar-ios-background-color: rgba(0, 0, 0, 0.2) !default;
|
|
$search-bar-ios-border-color: rgba(0, 0, 0, 0.05) !default;
|
|
$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 {
|
|
padding: $search-bar-ios-padding;
|
|
background: $search-bar-ios-background-color;
|
|
border-bottom: 1px solid $search-bar-ios-border-color;
|
|
}
|
|
|
|
.search-bar-icon {
|
|
width: 100%;
|
|
height: 13px;
|
|
|
|
transform: translateX(calc(50% - 60px));
|
|
|
|
@include svg-background-image($search-bar-ios-input-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: $search-bar-ios-input-text-color;
|
|
background-color: $search-bar-ios-input-background-color;
|
|
background-repeat: no-repeat;
|
|
background-position: 8px center;
|
|
|
|
@include calc(padding-left, "50% - 28px");
|
|
}
|
|
|
|
|
|
|
|
.search-bar-input-container.left-align {
|
|
.search-bar-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);
|
|
}
|
|
.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);
|
|
}
|
|
}
|
|
|
|
&.hairlines .search-bar {
|
|
border-bottom-width: 0.55px;
|
|
}
|