@opentiny/vue-theme/toggle-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-toggle-menu{--tv-ToggleMenu-width:200px;--tv-ToggleMenu-font-size:var(--tv-font-size-default, 14px);--tv-ToggleMenu-name-text-color:var(--tv-color-text, #191919);--tv-ToggleMenu-tree-node-height:32px;--tv-ToggleMenu-filter-search-size:28px;--tv-ToggleMenu-filter-search-svg-size:var(--tv-icon-size, 16px);--tv-ToggleMenu-filter-search-icon-color:var(--tv-color-icon, #808080);--tv-ToggleMenu-toggle-icon-color:var(--tv-color-icon, #808080);--tv-ToggleMenu-toggle-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-ToggleMenu-toggle-bg-color:var(--tv-color-bg-gray-2, #e6e6e6);--tv-ToggleMenu-toggle-font-weight:var(--tv-font-weight-bold, 600);--tv-ToggleMenu-toggle-bg-hover-color:var(--tv-color-bg-hover, #f5f5f5);width:var(--tv-ToggleMenu-width);position:relative}.tiny-toggle-menu .tiny-toggle-menu__body{cursor:pointer;line-height:1;padding-left:4px;width:100%}.tiny-toggle-menu .tiny-toggle-menu__body,.tiny-toggle-menu .tiny-toggle-menu__body:hover{text-decoration:none}.tiny-toggle-menu .tiny-toggle-menu__name{color:var(--tv-ToggleMenu-name-text-color);font-size:var(--tv-ToggleMenu-font-size)}.tiny-toggle-menu .tiny-toggle-menu__tree{position:relative}.tiny-toggle-menu .tiny-toggle-menu__filter{position:relative;margin-bottom:8px;width:calc(100% - 16px)}.tiny-toggle-menu .tiny-toggle-menu__filter-search{width:var(--tv-ToggleMenu-filter-search-size);height:var(--tv-ToggleMenu-filter-search-size);line-height:var(--tv-ToggleMenu-filter-search-size);display:block;text-align:center;position:absolute;right:0;top:0}.tiny-toggle-menu .tiny-toggle-menu__filter-search .tiny-svg{fill:var(--tv-ToggleMenu-filter-search-icon-color);font-size:var(--tv-ToggleMenu-filter-search-svg-size)}.tiny-toggle-menu .tiny-toggle-menu__toggle{position:absolute;top:0;left:calc(100% - 14px);z-index:2;width:14px;height:var(--tv-ToggleMenu-filter-search-size);line-height:var(--tv-ToggleMenu-filter-search-size);background:var(--tv-ToggleMenu-toggle-bg-color);cursor:pointer;-webkit-transition:.2s linear;transition:.2s linear}.tiny-toggle-menu .tiny-toggle-menu__toggle .tiny-svg{fill:var(--tv-ToggleMenu-toggle-icon-color)}.tiny-toggle-menu .tiny-toggle-menu__toggle:hover .tiny-svg{fill:var(--tv-ToggleMenu-toggle-icon-color-hover)}.tiny-toggle-menu .tiny-toggle-menu__link{width:100%}.tiny-toggle-menu.is-toggle-right{width:80px}.tiny-toggle-menu.is-toggle-right .tiny-tree-node.is-current .tiny-tree-node__content{background:0 0}.tiny-toggle-menu.is-toggle-right .tiny-tree-node__content:hover{background:0 0}.tiny-toggle-menu.is-toggle-right .tiny-tree-node__content:hover .tiny-svg{fill:var(--tv-ToggleMenu-toggle-icon-color-hover)}.tiny-toggle-menu.is-toggle-right .tiny-toggle-menu__toggle{position:relative;left:0}.tiny-toggle-menu.is-toggle-right .tiny-toggle-menu__filter{display:none}.tiny-toggle-menu .tiny-tree .is-current:not(.show-checkbox)>.tiny-tree-node__content>.tiny-tree-node__content-left{font-weight:var(--tv-ToggleMenu-toggle-font-weight)}.tiny-toggle-menu .tiny-tree .tiny-tree-node__content{height:32px}.tiny-toggle-menu .tiny-tree .tiny-tree-node__content-right:hover,.tiny-toggle-menu .tiny-tree :not(.show-checkbox)>.tiny-tree-node__content .tiny-tree-node__label:hover{background-color:var(--tv-ToggleMenu-toggle-bg-hover-color);font-weight:var(--tv-ToggleMenu-toggle-font-weight)}.tiny-toggle-menu .tiny-tree .tiny-tree-node__expand-icon{font-size:16px}.tiny-toggle-menu .tiny-tree.is-wrap .tiny-tree-node__content{height:32px}.tiny-toggle-menu .tiny-tree.is-wrap .tiny-toggle-menu__name{display:inline-block;white-space:normal;line-height:normal;word-break:break-word}.tiny-toggle-menu .tiny-tree.is-overflow .tiny-toggle-menu__name{width:calc(100% - 18px);vertical-align:middle;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tiny-toggle-menu .tiny-tree.is-node-hide .tiny-toggle-menu__body,.tiny-toggle-menu .tiny-tree.is-node-hide .tiny-tree-node__children{display:none}.tiny-toggle-menu .tiny-input__inner{font-size:var(--tv-ToggleMenu-font-size);padding-right:30px;border-radius:0;border-top:0;border-left:0;border-right:0}.tiny-toggle-menu .tiny-tree-node__content{height:var(--tv-ToggleMenu-tree-node-height);line-height:var(--tv-ToggleMenu-tree-node-height);font-size:var(--tv-ToggleMenu-font-size);padding-left:0;margin-left:0}