// iOS Search Bar // -------------------------------------------------- $search-bar-ios-padding: 0 8px !default; $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-min-height: 44px !default; $search-bar-ios-input-search-icon-color: #767676 !default; $search-bar-ios-input-search-icon-svg: "" !default; $search-bar-ios-input-search-icon-size: 13px !default; $search-bar-ios-input-height: 28px !default; $search-bar-ios-input-placeholder-color: #9D9D9D !default; $search-bar-ios-input-text-color: #000 !default; $search-bar-ios-input-background-color: #FFFFFF !default; $search-bar-ios-input-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; $search-bar-ios-cancel-transition: all 400ms cubic-bezier(.25, .45, .05, 1) !default; $search-bar-ios-input-close-icon-color: #8F8E94 !default; $search-bar-ios-input-close-icon-svg: "" !default; $search-bar-ios-input-close-icon-size: 17px !default; ion-search-bar { padding: $search-bar-ios-padding; background: $search-bar-ios-background-color; border-bottom: 1px solid $search-bar-ios-border-color; min-height: $search-bar-ios-min-height; } .search-bar-search-icon { width: $search-bar-ios-input-search-icon-size + 1; height: $search-bar-ios-input-search-icon-size + 1; @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; top: 8px; @include calc(margin-left, "50% - 60px"); transition: $search-bar-ios-input-transition; } .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; &::placeholder { color: $search-bar-ios-input-placeholder-color; } @include calc(padding-left, "50% - 28px"); transition: $search-bar-ios-input-transition; } .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-search-icon { margin-left: 0; } .search-bar-input { padding-left: 28px; } } .search-bar-cancel { @extend button[clear]; transition: $search-bar-ios-cancel-transition; padding-left: 8px; min-height: 0; padding-right: 0; } &.hairlines ion-search-bar { border-bottom-width: 0.55px; }