framework7
Version:
Full featured mobile HTML framework for building iOS & Android apps
1 lines • 17.1 kB
CSS
.searchbar{width:100%;position:relative;z-index:200}.searchbar .searchbar-input-wrap{-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;width:100%;height:100%;position:relative}.searchbar .searchbar-input-wrap input[type=search]{padding:0}.searchbar .searchbar-input-wrap input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.page>.searchbar{position:absolute;left:0;top:0}.searchbar-expandable{position:absolute;-webkit-transition-duration:.3s;transition-duration:.3s;pointer-events:none}.searchbar-inner{position:absolute;left:0;top:0;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box}.searchbar-disable-button{cursor:pointer;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;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;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.searchbar-backdrop.searchbar-backdrop-in{opacity:1;pointer-events:auto}.page-content>.searchbar-backdrop{position:fixed}.searchbar-not-found{display:none}.hidden-by-searchbar,.list .hidden-by-searchbar,.list li.hidden-by-searchbar,.list.li.hidden-by-searchbar{display:none}.ios .searchbar{height:44px;background:#f7f7f8}.ios .searchbar.no-hairline:after{display:none}.ios .searchbar input[type=search],.ios .searchbar input[type=text]{padding:0 28px;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;display:block;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:10px;border-radius:8px;font-family:inherit;color:#000;font-size:17px;font-weight:400;z-index:30;background-color:#e8e8ea;position:relative}.ios .searchbar input[type=search]::-webkit-input-placeholder,.ios .searchbar input[type=text]::-webkit-input-placeholder{color:#939398;opacity:1}.ios .searchbar input[type=search]:-ms-input-placeholder,.ios .searchbar input[type=text]:-ms-input-placeholder{color:#939398;opacity:1}.ios .searchbar input[type=search]::-ms-input-placeholder,.ios .searchbar input[type=text]::-ms-input-placeholder{color:#939398;opacity:1}.ios .searchbar input[type=search]::placeholder,.ios .searchbar input[type=text]::placeholder{color:#939398;opacity:1}.ios .searchbar .input-clear-button{z-index:40;right:7px}.ios .searchbar-inner{padding:0 8px}.ios .searchbar-icon{width:13px;height:13px;position:absolute;top:50%;margin-top:-6px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2013%2013'%20enable-background%3D'new%200%200%2013%2013'%3E%3Cg%3E%3Cpath%20fill%3D'%23939398'%20d%3D'M5%2C1c2.2%2C0%2C4%2C1.8%2C4%2C4S7.2%2C9%2C5%2C9S1%2C7.2%2C1%2C5S2.8%2C1%2C5%2C1%20M5%2C0C2.2%2C0%2C0%2C2.2%2C0%2C5s2.2%2C5%2C5%2C5s5-2.2%2C5-5S7.8%2C0%2C5%2C0%20L5%2C0z'%2F%3E%3C%2Fg%3E%3Cline%20stroke%3D'%23939398'%20stroke-miterlimit%3D'10'%20stroke-width%3D'1.5'%20x1%3D'12.6'%20y1%3D'12.6'%20x2%3D'8.2'%20y2%3D'8.2'%2F%3E%3C%2Fsvg%3E");background-size:13px 13px;z-index:40;left:8px}.ios .searchbar-backdrop{background:rgba(0,0,0,.4)}.ios .searchbar-input-wrap{height:32px}.ios .searchbar:after{content:'';position:absolute;background-color:#c4c4c4;display:block;z-index:15;top:auto;right:auto;bottom:0;left:0;height:1px;width:100%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.ios.device-pixel-ratio-2 .searchbar:after{-webkit-transform:scaleY(.5);transform:scaleY(.5)}.ios.device-pixel-ratio-3 .searchbar:after{-webkit-transform:scaleY(.33);transform:scaleY(.33)}.ios .searchbar-disable-button{font-size:17px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition-duration:.3s;transition-duration:.3s;color:#007aff;display:none}.ios .searchbar-disable-button.active-state{-webkit-transition-duration:0s;transition-duration:0s;opacity:.3}.ios .searchbar-enabled .searchbar-disable-button{pointer-events:auto;opacity:1;margin-left:8px}.ios .searchbar:not(.searchbar-enabled) .searchbar-disable-button{-webkit-transition-duration:.3s;transition-duration:.3s}.ios .searchbar-expandable{left:0;bottom:0;opacity:1;width:100%;height:0%;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);overflow:hidden}.ios .searchbar-expandable .searchbar-disable-button{margin-left:8px;opacity:1;display:block}.ios .searchbar-expandable .searchbar-inner{height:44px}.ios .searchbar-expandable.searchbar-enabled{opacity:1;height:100%;pointer-events:auto}.ios .page>.searchbar{z-index:200}.ios .navbar~.page:not(.no-navbar)>.searchbar,.ios .page>.navbar~.searchbar{top:44px}.ios .navbar~.page:not(.no-navbar)>.searchbar~* .page-content,.ios .navbar~.page:not(.no-navbar)>.searchbar~.page-content,.ios .page>.navbar~.searchbar~* .page-content,.ios .page>.navbar~.searchbar~.page-content{padding-top:88px}.ios .theme-dark .searchbar,.searchbar.ios .theme-dark{background-color:#303030}.ios .theme-dark .searchbar:after,.searchbar.ios .theme-dark:after{background-color:#282829}.ios .theme-dark .searchbar input[type=search],.ios .theme-dark .searchbar input[type=text],.searchbar.ios .theme-dark input[type=search],.searchbar.ios .theme-dark input[type=text]{background-color:#171717;color:#fff}.ios .color-theme-red .searchbar-disable-button{color:#ff3b30}.ios .color-theme-green .searchbar-disable-button{color:#4cd964}.ios .color-theme-blue .searchbar-disable-button{color:#007aff}.ios .color-theme-pink .searchbar-disable-button{color:#ff2d55}.ios .color-theme-yellow .searchbar-disable-button{color:#fc0}.ios .color-theme-orange .searchbar-disable-button{color:#ff9500}.ios .color-theme-gray .searchbar-disable-button{color:#8e8e93}.ios .color-theme-white .searchbar-disable-button{color:#fff}.ios .color-theme-black .searchbar-disable-button{color:#000}@media (orientation:landscape){.ios.device-iphone-x .ios-edges .searchbar-inner,.ios.device-iphone-x .ios-left-edge .searchbar-inner,.ios.device-iphone-x .panel-left .searchbar-inner,.ios.device-iphone-x .popup .searchbar-inner,.ios.device-iphone-x .sheet-modal .searchbar-inner{padding-left:calc(8px + constant(safe-area-inset-left));padding-left:calc(8px + env(safe-area-inset-left))}.ios.device-iphone-x .ios-edges .searchbar-inner,.ios.device-iphone-x .ios-right-edge .searchbar-inner,.ios.device-iphone-x .panel-right .searchbar-inner,.ios.device-iphone-x .popup .searchbar-inner,.ios.device-iphone-x .sheet-modal .searchbar-inner{padding-right:calc(8px + constant(safe-area-inset-right));padding-right:calc(8px + env(safe-area-inset-right))}}.md .searchbar{height:48px;background:#fff}.md .searchbar input[type=search],.md .searchbar input[type=text]{padding-left:65px;padding-right:48px;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;height:100%;display:block;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:20px;color:#000;font-weight:400}.md .searchbar input[type=search]::-webkit-input-placeholder,.md .searchbar input[type=text]::-webkit-input-placeholder{color:#939398;opacity:1}.md .searchbar input[type=search]:-ms-input-placeholder,.md .searchbar input[type=text]:-ms-input-placeholder{color:#939398;opacity:1}.md .searchbar input[type=search]::-ms-input-placeholder,.md .searchbar input[type=text]::-ms-input-placeholder{color:#939398;opacity:1}.md .searchbar input[type=search]::placeholder,.md .searchbar input[type=text]::placeholder{color:#939398;opacity:1}.md .searchbar-expandable{height:100%}.md .searchbar-backdrop{background:rgba(0,0,0,.25)}.md .searchbar-disable-button,.md .searchbar-icon{position:absolute;width:48px;height:48px;left:-4px;top:50%;margin-top:-24px;background-size:24px 24px;background-repeat:no-repeat;background-position:center;-webkit-transition-duration:.3s;transition-duration:.3s}.md .searchbar-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23737373'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M15.5%2014h-.79l-.28-.27C15.41%2012.59%2016%2011.11%2016%209.5%2016%205.91%2013.09%203%209.5%203S3%205.91%203%209.5%205.91%2016%209.5%2016c1.61%200%203.09-.59%204.23-1.57l.27.28v.79l5%204.99L20.49%2019l-4.99-5zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E")}.md .searchbar-disable-button{-webkit-transform:rotate(-90deg) scale(.5);transform:rotate(-90deg) scale(.5);font-size:0;display:block;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'24'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%3E%3Cpath%20d%3D'M20%2011H7.83l5.59-5.59L12%204l-8%208%208%208%201.41-1.41L7.83%2013H20v-2z'%20fill%3D'%23737373'%2F%3E%3C%2Fsvg%3E")}.md .searchbar-disable-button:before{content:'';width:152%;height:152%;position:absolute;left:-26%;top:-26%;background-image:-webkit-radial-gradient(center,circle,rgba(0,0,0,.1) 66%,rgba(0,0,0,0) 66%);background-image:radial-gradient(circle at center,rgba(0,0,0,.1) 66%,rgba(0,0,0,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;-webkit-transition-duration:.6s;transition-duration:.6s}.md .searchbar-disable-button.active-state:before{opacity:1;-webkit-transition-duration:150ms;transition-duration:150ms}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-disable-button{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1);pointer-events:auto;opacity:1}.md .searchbar-enabled:not(.searchbar-enabled-no-disable-button) .searchbar-icon{opacity:0;-webkit-transform:rotate(90deg) scale(.5);transform:rotate(90deg) scale(.5)}.md .searchbar .input-clear-button{width:48px;height:48px;margin-top:-24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23737373'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");border-radius:0;background-repeat:no-repeat;background-position:center;background-size:24px 24px;background-color:transparent;right:0}.md .searchbar .input-clear-button:before{content:'';width:152%;height:152%;position:absolute;left:-26%;top:-26%;background-image:-webkit-radial-gradient(center,circle,rgba(0,0,0,.1) 66%,rgba(0,0,0,0) 66%);background-image:radial-gradient(circle at center,rgba(0,0,0,.1) 66%,rgba(0,0,0,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;-webkit-transition-duration:.6s;transition-duration:.6s}.md .searchbar .input-clear-button.active-state:before{opacity:1;-webkit-transition-duration:150ms;transition-duration:150ms}.md .searchbar .input-clear-button:after{display:none}.md .searchbar .input-clear-button:before{margin-left:0;margin-top:0}.md .page-content .searchbar{border-radius:2px;margin:8px;width:auto;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}.md .page-content .searchbar .searchbar-inner{border-radius:2px}.md .page>.searchbar{z-index:510}.md .page>.searchbar:after{content:'';position:absolute;right:0;width:100%;top:100%;bottom:auto;height:10px;pointer-events:none;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,.3)),color-stop(40%,rgba(0,0,0,.1)),color-stop(50%,rgba(0,0,0,.05)),color-stop(80%,rgba(0,0,0,0)),to(rgba(0,0,0,0)));background:-webkit-linear-gradient(top,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%);background:linear-gradient(to bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.05) 50%,rgba(0,0,0,0) 80%,rgba(0,0,0,0) 100%)}.md .page>.searchbar.no-shadow:after{display:none}.md .page>.searchbar input[type=search],.md .page>.searchbar input[type=text],.md .searchbar-expandable input[type=search],.md .searchbar-expandable input[type=text],.md .subnavbar .searchbar input[type=search],.md .subnavbar .searchbar input[type=text]{padding-left:73px}.md .page>.searchbar .searchbar-disable-button,.md .page>.searchbar .searchbar-icon,.md .searchbar-expandable .searchbar-disable-button,.md .searchbar-expandable .searchbar-icon,.md .subnavbar .searchbar .searchbar-disable-button,.md .subnavbar .searchbar .searchbar-icon{left:4px}.md .searchbar-expandable{width:56px;height:100%;opacity:0;top:50%;margin-top:-28px;-webkit-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);left:100%;margin-left:-56px}.md .navbar .searchbar-expandable{border-radius:28px;width:56px;margin-top:-28px;margin-left:-56px}@media (min-width:768px){.md .navbar .searchbar-expandable{border-radius:32px;width:64px;margin-top:-32px;margin-left:-64px}}.md .subnavbar .searchbar-expandable,.md .toolbar .searchbar-expandable{border-radius:24px;width:48px;margin-top:-24px;margin-left:-48px}.md .tabbar-labels .searchbar-expandable{border-radius:36px;width:72px;margin-top:-36px;margin-left:-72px}.md .searchbar-expandable.searchbar-enabled{width:100%;border-radius:0;opacity:1;pointer-events:auto;top:0;margin-top:0;left:0;margin-left:0}.md .page>.searchbar~* .page-content,.md .page>.searchbar~.page-content{padding-top:48px}.md .page>.navbar~.searchbar{top:56px}@media (min-width:768px){.md .page>.navbar~.searchbar{top:64px}}.md .page>.navbar~.searchbar~* .page-content,.md .page>.navbar~.searchbar~.page-content{padding-top:104px}@media (min-width:768px){.md .page>.navbar~.searchbar~* .page-content,.md .page>.navbar~.searchbar~.page-content{padding-top:112px}}.md .page>.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar{top:48px}.md .page>.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar~* .page-content,.md .page>.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar~.page-content{padding-top:96px}.md .page>.tabbar-labels:not(.toolbar-bottom-md)~.searchbar{top:72px}.md .page>.tabbar-labels:not(.toolbar-bottom-md)~.searchbar~* .page-content,.md .page>.tabbar-labels:not(.toolbar-bottom-md)~.searchbar~.page-content{padding-top:120px}.md .page>.navbar~.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar{top:104px}@media (min-width:768px){.md .page>.navbar~.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar{top:112px}}.md .page>.navbar~.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar~* .page-content,.md .page>.navbar~.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar~.page-content{padding-top:152px}@media (min-width:768px){.md .page>.navbar~.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar~* .page-content,.md .page>.navbar~.toolbar:not(.toolbar-bottom-md):not(.messagebar)~.searchbar~.page-content{padding-top:160px}}.md .page>.navbar~.tabbar-labels:not(.toolbar-bottom-md)~.searchbar{top:128px}@media (min-width:768px){.md .page>.navbar~.tabbar-labels:not(.toolbar-bottom-md)~.searchbar{top:136px}}.md .page>.navbar~.tabbar-labels:not(.toolbar-bottom-md)~.searchbar~* .page-content,.md .page>.navbar~.tabbar-labels:not(.toolbar-bottom-md)~.searchbar~.page-content{padding-top:176px}@media (min-width:768px){.md .page>.navbar~.tabbar-labels:not(.toolbar-bottom-md)~.searchbar~* .page-content,.md .page>.navbar~.tabbar-labels:not(.toolbar-bottom-md)~.searchbar~.page-content{padding-top:184px}}@media (orientation:landscape){.md.device-iphone-x .ios-edges .searchbar-inner,.md.device-iphone-x .ios-left-edge .searchbar-inner,.md.device-iphone-x .panel-left .searchbar-inner,.md.device-iphone-x .popup .searchbar-inner,.md.device-iphone-x .sheet-modal .searchbar-inner{padding-left:constant(safe-area-inset-left);padding-left:env(safe-area-inset-left)}.md.device-iphone-x .ios-edges .searchbar-disable-button,.md.device-iphone-x .ios-left-edge .searchbar-disable-button,.md.device-iphone-x .panel-left .searchbar-disable-button,.md.device-iphone-x .popup .searchbar-disable-button,.md.device-iphone-x .sheet-modal .searchbar-disable-button{left:calc(4px + constant(safe-area-inset-left));left:calc(4px + env(safe-area-inset-left))}.md.device-iphone-x .ios-edges .searchbar-inner,.md.device-iphone-x .ios-right-edge .searchbar-inner,.md.device-iphone-x .panel-right .searchbar-inner,.md.device-iphone-x .popup .searchbar-inner,.md.device-iphone-x .sheet-modal .searchbar-inner{padding-right:constant(safe-area-inset-right);padding-right:env(safe-area-inset-right)}}