@opentiny/vue-theme/fall-menu/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-fall-menu{--tv-FallMenu-menu-height:var(--tv-size-height-xl, 48px);--tv-FallMenu-bg-color-normal:var(--tv-color-bg-secondary, #ffffff);--tv-FallMenu-bg-color-hover:var(--tv-color-bg-hover, #f5f5f5);--tv-FallMenu-icon-font-size:var(--tv-font-size-default, 14px);--tv-FallMenu-slot-text-color:var(--tv-color-text, #191919);--tv-FallMenu-slot-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-FallMenu-title-font-size:var(--tv-font-size-lg, 16px);--tv-FallMenu-box-title-text-color:var(--tv-color-text, #191919);--tv-FallMenu-box-text-color:var(--tv-color-text-secondary, #595959);--tv-FallMenu-box-font-size:var(--tv-font-size-default, 14px);--tv-FallMenu-box-title-height:var(--tv-size-height-xs, 24px);--tv-FallMenu-box-content-height:var(--tv-size-height-sm, 28px);--tv-FallMenu-box-hover-text-color:var(--tv-color-act-primary-text-hover, #191919);--tv-FallMenu-li-color-hover:var(--tv-color-act-primary-text-hover, #191919);--tv-FallMenu-box-a-font-size:var(--tv-font-size-sm, 12px);--tv-FallMenu-box-font-size-hover:var(--tv-font-size-heading-xs, 16px);--tv-FallMenu-box-font-weight-hover:var(--tv-font-weight-bold, 600);--tv-FallMenu-box-svg-fill:var(--tv-color-icon, #808080);--tv-FallMenu-box-border-radius:var(--tv-border-radius-md, 6px);-webkit-box-shadow:0 1px 4px 0 #14000000;box-shadow:0 1px 4px 0 #14000000}.tiny-fall-menu .tiny-fall-menu__wrap{background:var(--tv-FallMenu-bg-color-normal);padding:0 24px}.tiny-fall-menu .tiny-fall-menu__nav{height:var(--tv-FallMenu-menu-height);margin:0 auto;position:relative}.tiny-fall-menu .tiny-fall-menu__subnav{overflow:hidden}.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-left,.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-right{color:var(--tv-FallMenu-slot-text-color);cursor:pointer;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:var(--tv-FallMenu-icon-font-size);line-height:1}.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-left svg,.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-right svg{fill:var(--tv-FallMenu-box-svg-fill)}.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-left{left:-12px}.tiny-fall-menu .tiny-fall-menu__subnav .icon-slot-right{right:-12px}.tiny-fall-menu .tiny-fall-menu__list{position:relative;min-width:4000px;left:0;-webkit-transition:left .4s;transition:left .4s}.tiny-fall-menu .tiny-fall-menu__list .fall-hide{opacity:0}.tiny-fall-menu .tiny-fall-menu__list .active-show{font-size:var(--tv-FallMenu-box-font-size-hover);font-weight:var(--tv-FallMenu-box-font-weight-hover)}.tiny-fall-menu .tiny-fall-menu__list ul:after,.tiny-fall-menu .tiny-fall-menu__list ul:before{content:'';display:table}.tiny-fall-menu .tiny-fall-menu__list ul:after{clear:both}.tiny-fall-menu .tiny-fall-menu__list li{float:left;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tiny-fall-menu .tiny-fall-menu__list a{float:left;display:block;width:auto;padding:0 12px;height:var(--tv-FallMenu-menu-height);text-align:center;text-decoration:none;font-weight:400;line-height:var(--tv-FallMenu-menu-height);font-size:var(--tv-FallMenu-title-font-size);color:var(--tv-FallMenu-slot-text-color)}.tiny-fall-menu .tiny-fall-menu__list a.now,.tiny-fall-menu .tiny-fall-menu__list a:hover{color:var(--tv-FallMenu-slot-text-color);text-decoration:none;font-size:var(--tv-FallMenu-box-font-size-hover);font-weight:var(--tv-FallMenu-box-font-weight-hover)}.tiny-fall-menu .tiny-fall-menu__list a.now:before{position:absolute;content:'';width:0;height:0;border-style:solid;border-width:0;border-color:#fff transparent;top:34px;left:42%}.tiny-fall-menu .tiny-fall-menu__box{position:absolute;left:0;top:var(--tv-FallMenu-menu-height);width:100%;background:var(--tv-FallMenu-slot-bg-color);overflow:hidden;-webkit-transition:opacity .4s;transition:opacity .4s;border-radius:var(--tv-FallMenu-box-border-radius);opacity:0}.tiny-fall-menu .tiny-fall-menu__box .contbox{overflow:hidden;padding:32px}.tiny-fall-menu .tiny-fall-menu__box .cont{min-width:120px;padding:0 16px}.tiny-fall-menu .tiny-fall-menu__box .sublist li{float:left;width:100%}.tiny-fall-menu .tiny-fall-menu__box .sublist li h3.mcate-item-hd{font-size:var(--tv-FallMenu-box-font-size);border-bottom:0 solid #ccc;color:var(--tv-FallMenu-box-title-text-color);font-weight:700;margin:0;line-height:32px}.tiny-fall-menu .tiny-fall-menu__box .sublist li p.mcate-item-bd{margin-top:4px;line-height:32px}.tiny-fall-menu .tiny-fall-menu__box .sublist li p.mcate-item-bd a{font-size:var(--tv-FallMenu-box-a-font-size);color:var(--tv-FallMenu-box-text-color);text-decoration:none;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px}.tiny-fall-menu .tiny-fall-menu__box .sublist li p.mcate-item-bd a:hover{text-decoration:underline;color:var(--tv-FallMenu-box-hover-text-color)}.tiny-fall-menu .tiny-fall-menu__box.active,.tiny-fall-menu .tiny-fall-menu__box:hover{-webkit-box-shadow:0 4px 16px 0 #14000000;box-shadow:0 4px 16px 0 #14000000;border-radius:0 0 6px 6px;opacity:1}@-webkit-keyframes leftArrow{0%{left:-17px}50%{left:-13px}100%{left:-17px}}@keyframes leftArrow{0%{left:-17px}50%{left:-13px}100%{left:-17px}}@-webkit-keyframes rightArrow{0%{right:-17px}50%{right:-13px}100%{right:-17px}}@keyframes rightArrow{0%{right:-17px}50%{right:-13px}100%{right:-17px}}