history-navigation-vue
Version:
Native-like Navigation for Web apps.
6 lines • 2.46 kB
CSS
/*!
* history-navigation-vue v1.5.0
* (c) 2021 hezedu
* @license MIT
*/
.h-nav-ctrler{height:100%;overflow:hidden;position:relative;width:100%}.h-nav-page,.h-nav-tab-page{height:100%;left:0;position:absolute;top:0;width:100%}.h-nav-page-main{-webkit-overflow-scrolling:touch;background-color:#fff;height:100%;overflow:auto;position:relative;width:100%}.h-nav-tabs-ctrler{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0}.h-nav-page-handle,.h-nav-tab-page-handle{border:0;box-shadow:none;height:0;margin:0;outline:none;padding:0;position:static;width:0}.h-nav-page-enter-active,.h-nav-page-leave-active,.h-nav-tab-page-enter-active,.h-nav-tab-page-leave-active,.h-nav-tab-pages-wrap{animation:inherit;transition:inherit}.h-nav-tab-pages-wrap{animation-name:none;position:static;transition-property:none}.h-nav-tab-page-handle{animation:inherit;transition:inherit}.h-nav-tab-behavior-_inherit{animation:inherit;transition:inherit}.h-nav-modal{box-sizing:border-box;color:#fff;height:100%;left:0;position:absolute;top:0;width:100%}.h-nav-page-has-modal{overflow:hidden}.h-nav-behavior-back>.h-nav-transition,.h-nav-behavior-push>.h-nav-transition,.h-nav-behavior-replace>.h-nav-transition{transition:all .3s ease}.h-nav-behavior-back>.h-nav-transition>.h-nav-page-leave-to,.h-nav-behavior-push>.h-nav-transition>.h-nav-page-enter{transform:translateX(100%)}.h-nav-behavior-replace>.h-nav-transition>.h-nav-page-enter{transform:translateY(100%)}.h-nav-tabbar{-ms-flex-pack:distribute;background-color:#eee;border-top:1px solid #c7c7c7;bottom:0;box-sizing:border-box;display:-ms-flexbox;display:flex;height:48px;justify-content:space-around;left:0;position:absolute;width:100%;z-index:0}.h-nav-tab-page{height:calc(100% - 48px)}.h-nav-tab-page>.h-nav-modal{height:calc(100% + 48px)}.h-nav-tab{-ms-flex-positive:1;-ms-flex-align:center;-ms-flex-pack:center;align-items:center;color:#333;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1;justify-content:center;text-decoration:none}.h-nav-tab.h-nav-active{color:#3eaf7c}.h-nav-tab-icon{background-position:50%;background-repeat:no-repeat;background-size:contain;font-size:26px;height:26px;line-height:26px;margin-bottom:4px;text-align:center;width:26px}.h-nav-tab-text{font-size:16px;line-height:1}.h-nav-tab-icon+.h-nav-tab-text{font-size:12px}