/* === Searchbar === */ .searchbar { width: 100%; position: relative; z-index: 200; .searchbar-input-wrap { flex-shrink: 1; width: 100%; height: 100%; position: relative; input[type="search"] { padding: 0; } input::-webkit-search-cancel-button { appearance: none; } } .page > & { position: absolute; left: 0; top: 0; } } .searchbar-expandable { position: absolute; transition-duration: 300ms; pointer-events: none; // overflow: hidden; } .searchbar-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; // overflow: hidden; display: flex; align-items: center; box-sizing: border-box; } .searchbar-disable-button { cursor: pointer; pointer-events: none; appearance: none; background: none; border: none; outline: 0; padding: 0; margin: 0; width: auto; opacity: 0; } .searchbar-icon { pointer-events: none; background-position: center; background-repeat: no-repeat; } .searchbar-backdrop { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; opacity: 0; pointer-events: none; transition-duration: 300ms; transform: translate3d(0,0,0); &.searchbar-backdrop-in { opacity: 1; pointer-events: auto; } .page-content > & { position: fixed; } } .searchbar-not-found { display: none; } .hidden-by-searchbar { &, .list &, .list.li&, .list li& { display: none !important; } } & when (@includeIosTheme) { @import url('./searchbar-ios.less'); } & when (@includeMdTheme) { @import url('./searchbar-md.less'); }