vue-sidebar-menu/dist/vue-sidebar-menu.css

A Vue.js Sidebar Menu Component

.v-enter-active[data-v-2640f004],.v-leave-active[data-v-2640f004]{-webkit-transition:.3s opacity ease;transition:.3s opacity ease}.v-enter-from[data-v-2640f004],.v-leave-to[data-v-2640f004]{opacity:0}.v-sidebar-menu{--vsm-primary-color: #4285f4;--vsm-base-bg: #2a2a2e;--vsm-item-color: #fff;--vsm-item-active-line-color: var(--vsm-primary-color);--vsm-item-open-color: #fff;--vsm-item-open-bg: var(--vsm-primary-color);--vsm-item-hover-bg: rgba(29.8295454545, 29.8295454545, 32.6704545455, .5);--vsm-icon-color: var(--vsm-item-color);--vsm-icon-bg: rgb(29.8295454545, 29.8295454545, 32.6704545455);--vsm-mobile-item-color: #fff;--vsm-mobile-item-bg: var(--vsm-primary-color);--vsm-mobile-icon-color: var(--vsm-mobile-item-color);--vsm-mobile-icon-bg: transparent;--vsm-dropdown-bg: rgb(54.1704545455, 54.1704545455, 59.3295454545);--vsm-header-item-color: rgba(255, 255, 255, .7);--vsm-toggle-btn-color: #fff;--vsm-toggle-btn-bg: rgb(29.8295454545, 29.8295454545, 32.6704545455);--vsm-badge-color: #fff;--vsm-badge-bg: rgb(29.8295454545, 29.8295454545, 32.6704545455);--vsm-item-font-size: 16px;--vsm-item-line-height: 35px;--vsm-item-padding: 10px 15px;--vsm-icon-height: 35px;--vsm-icon-width: 35px}.v-sidebar-menu *{-webkit-box-sizing:border-box;box-sizing:border-box}.v-sidebar-menu{position:fixed;top:0;left:0;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;z-index:999;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;text-align:left;-webkit-transition:.3s max-width ease;transition:.3s max-width ease}.v-sidebar-menu .vsm--wrapper{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.v-sidebar-menu .vsm--menu{position:static!important;-webkit-transition:.3s width ease;transition:.3s width ease}.v-sidebar-menu .vsm--scroll-wrapper{position:relative;-webkit-box-flex:1;-ms-flex:1;flex:1;min-height:0}.v-sidebar-menu .vsm--scroll{overflow-y:scroll;overflow-x:hidden;height:100%;-ms-overflow-style:none;scrollbar-width:none}.v-sidebar-menu .vsm--scroll::-webkit-scrollbar{width:0;height:0;display:none}.v-sidebar-menu .vsm--scroll-bar{position:absolute;top:2px;bottom:2px;right:2px;width:6px;border-radius:4px;z-index:5}.v-sidebar-menu .vsm--scroll-thumb{display:block;background-color:#aaa;border-radius:4px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:.5;-webkit-transition:.3s opacity ease;transition:.3s opacity ease}.v-sidebar-menu .vsm--scroll-thumb:hover,.v-sidebar-menu .vsm--scroll-thumb_clicking{opacity:1}.v-sidebar-menu .vsm--menu,.v-sidebar-menu .vsm--dropdown{padding:0;margin:0;list-style:none}.v-sidebar-menu .vsm--dropdown{padding:5px}.v-sidebar-menu .vsm--item{position:static!important;display:block;width:100%}.v-sidebar-menu .vsm--link{position:static!important;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;font-size:var(--vsm-item-font-size);font-weight:400;-webkit-box-sizing:content-box;box-sizing:content-box;padding:var(--vsm-item-padding);line-height:var(--vsm-item-line-height);text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:.3s all ease;transition:.3s all ease}.v-sidebar-menu .vsm--link_active{font-weight:600}.v-sidebar-menu .vsm--link_disabled{opacity:.4;pointer-events:none}.v-sidebar-menu .vsm--link_level-1 .vsm--icon{height:var(--vsm-icon-height);width:var(--vsm-icon-width);border-radius:3px}.v-sidebar-menu .vsm--icon{height:25px;width:25px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-right:15px;z-index:20}.v-sidebar-menu .vsm--title{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.v-sidebar-menu .vsm--title>span:first-child{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v-sidebar-menu .vsm--title_hidden{visibility:hidden}.v-sidebar-menu .vsm--arrow{width:30px;height:30px;font-size:14px;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.v-sidebar-menu .vsm--arrow_default{position:relative;width:12px;height:12px;-webkit-transition:-webkit-transform .3s ease;transition:-webkit-transform .3s ease;transition:transform .3s ease;transition:transform .3s ease,-webkit-transform .3s ease}.v-sidebar-menu .vsm--arrow_default:before{content:"";width:6px;height:6px;border-left:2px solid;border-bottom:2px solid;-webkit-transform:rotate(-135deg);transform:rotate(-135deg);display:inline-block;position:absolute;top:2px;left:0;-webkit-box-sizing:content-box;box-sizing:content-box}.v-sidebar-menu .vsm--arrow_open .vsm--arrow_default{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.v-sidebar-menu .vsm--header{font-size:14px;font-weight:600;padding:10px 15px;white-space:nowrap;text-transform:uppercase}.v-sidebar-menu .vsm--badge_default{padding:0 6px;font-size:12px;border-radius:3px;height:20px;line-height:20px;font-weight:600;text-transform:uppercase}.v-sidebar-menu .vsm--toggle-btn{width:100%;height:65px;font-size:18px;text-align:center;cursor:pointer;border:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.v-sidebar-menu .vsm--toggle-btn_default{position:relative;width:12px;height:12px}.v-sidebar-menu .vsm--toggle-btn_default:before{content:"";display:inline-block;height:12px;border-left:2px solid;position:absolute;left:0;top:0}.v-sidebar-menu .vsm--toggle-btn_default:after{content:"";display:inline-block;width:6px;height:6px;border-left:2px solid;border-bottom:2px solid;position:absolute;left:4px;top:2px;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box;box-sizing:content-box}.v-sidebar-menu.vsm_collapsed .vsm--link_level-1.vsm--link_hover,.v-sidebar-menu.vsm_collapsed .vsm--link_level-1:hover{background-color:transparent!important}.v-sidebar-menu.vsm_collapsed .vsm--toggle-btn_default{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.v-sidebar-menu.vsm_collapsed.vsm_rtl .vsm--toggle-btn_default{-webkit-transform:scaleX(1);transform:scaleX(1)}.v-sidebar-menu.vsm_collapsed .vsm--scroll-wrapper{width:calc(100% + 8px)}.v-sidebar-menu.vsm_rtl{right:0;left:inherit;text-align:right;direction:rtl}.v-sidebar-menu.vsm_rtl .vsm--icon{margin-left:15px;margin-right:0}.v-sidebar-menu.vsm_rtl .vsm--arrow_default{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.v-sidebar-menu.vsm_rtl .vsm--arrow_open .vsm--arrow_default{-webkit-transform:rotate(-90deg) scaleX(-1);transform:rotate(-90deg) scaleX(-1)}.v-sidebar-menu.vsm_rtl .vsm--toggle-btn_default{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.v-sidebar-menu.vsm_rtl .vsm--scroll-bar{right:inherit;left:2px}.v-sidebar-menu.vsm_relative{position:relative;height:100%}.v-sidebar-menu .expand-enter-active,.v-sidebar-menu .expand-leave-active{-webkit-transition:height .3s ease;transition:height .3s ease;overflow:hidden}.v-sidebar-menu .expand-enter-from,.v-sidebar-menu .expand-leave-to{height:0!important}.v-sidebar-menu .slide-animation-enter-active,.v-sidebar-menu .slide-animation-leave-active{-webkit-transition:width .3s ease;transition:width .3s ease}.v-sidebar-menu .slide-animation-enter-from,.v-sidebar-menu .slide-animation-leave-to{width:0!important}.v-sidebar-menu{background-color:var(--vsm-base-bg)}.v-sidebar-menu .vsm--item{color:var(--vsm-item-color)}.v-sidebar-menu .vsm--link_active{color:var(--vsm-item-active-color, inherit);background-color:var(--vsm-item-active-bg, transparent)}.v-sidebar-menu .vsm--link_level-1.vsm--link_active{-webkit-box-shadow:3px 0px 0px 0px var(--vsm-item-active-line-color) inset;box-shadow:3px 0 0 0 var(--vsm-item-active-line-color) inset}.v-sidebar-menu .vsm--link_level-1.vsm--link_active .vsm--icon{color:var(--vsm-icon-active-color, inherit);background-color:var(--vsm-icon-active-bg, var(--vsm-icon-bg))}.v-sidebar-menu .vsm--link_level-1 .vsm--icon{background-color:var(--vsm-icon-bg)}.v-sidebar-menu .vsm--link_hover{color:var(--vsm-item-hover-color, inherit);background-color:var(--vsm-item-hover-bg)}.v-sidebar-menu .vsm--link_mobile{color:var(--vsm-mobile-item-color)}.v-sidebar-menu.vsm_expanded .vsm--link_level-1.vsm--link_open{color:var(--vsm-item-open-color);background-color:var(--vsm-item-open-bg)}.v-sidebar-menu.vsm_expanded .vsm--link_level-1.vsm--link_open .vsm--icon{color:var(--vsm-icon-open-color, inherit);background-color:var(--vsm-icon-open-bg, transparent)}.v-sidebar-menu.vsm_collapsed .vsm--link_level-1.vsm--link_hover .vsm--icon{color:var(--vsm-mobile-icon-color);background-color:var(--vsm-mobile-icon-bg)}.v-sidebar-menu .vsm--icon{color:var(--vsm-icon-color, inherit)}.v-sidebar-menu .vsm--dropdown{background-color:var(--vsm-dropdown-bg)}.v-sidebar-menu .vsm--dropdown .vsm--item{color:var(--vsm-dropdown-color, var(--vsm-item-color))}.v-sidebar-menu .vsm--mobile-bg{background-color:var(--vsm-mobile-item-bg)}.v-sidebar-menu.vsm_rtl .vsm--link_level-1.vsm--link_active{-webkit-box-shadow:-3px 0px 0px 0px var(--vsm-item-active-line-color) inset;box-shadow:-3px 0 0 0 var(--vsm-item-active-line-color) inset}.v-sidebar-menu .vsm--header{color:var(--vsm-header-item-color)}.v-sidebar-menu .vsm--badge_default{color:var(--vsm-badge-color);background-color:var(--vsm-badge-bg)}.v-sidebar-menu .vsm--toggle-btn{color:var(--vsm-toggle-btn-color);background-color:var(--vsm-toggle-btn-bg)}.v-sidebar-menu.vsm_white-theme{--vsm-base-bg: #fff;--vsm-item-color: #262626;--vsm-item-hover-bg: rgba(242.25, 242.25, 242.25, .5);--vsm-icon-bg: #bbc5d6;--vsm-icon-active-color: #FFF;--vsm-icon-active-bg: var(--vsm-item-color);--vsm-dropdown-bg: #e3e3e3;--vsm-header-item-color: rgba(38, 38, 38, .7);--vsm-toggle-btn-color: var(--vsm-item-color);--vsm-toggle-btn-bg: rgb(242.25, 242.25, 242.25);--vsm-badge-color: var(--vsm-item-color);--vsm-badge-bg: rgb(242.25, 242.25, 242.25);background-color:var(--vsm-base-bg)}.v-sidebar-menu.vsm_white-theme .vsm--item{color:var(--vsm-item-color)}.v-sidebar-menu.vsm_white-theme .vsm--link_active{color:var(--vsm-item-active-color, inherit);background-color:var(--vsm-item-active-bg, transparent)}.v-sidebar-menu.vsm_white-theme .vsm--link_level-1.vsm--link_active{-webkit-box-shadow:3px 0px 0px 0px var(--vsm-item-active-line-color) inset;box-shadow:3px 0 0 0 var(--vsm-item-active-line-color) inset}.v-sidebar-menu.vsm_white-theme .vsm--link_level-1.vsm--link_active .vsm--icon{color:var(--vsm-icon-active-color, inherit);background-color:var(--vsm-icon-active-bg, var(--vsm-icon-bg))}.v-sidebar-menu.vsm_white-theme .vsm--link_level-1 .vsm--icon{background-color:var(--vsm-icon-bg)}.v-sidebar-menu.vsm_white-theme .vsm--link_hover{color:var(--vsm-item-hover-color, inherit);background-color:var(--vsm-item-hover-bg)}.v-sidebar-menu.vsm_white-theme .vsm--link_mobile{color:var(--vsm-mobile-item-color)}.v-sidebar-menu.vsm_white-theme.vsm_expanded .vsm--link_level-1.vsm--link_open{color:var(--vsm-item-open-color);background-color:var(--vsm-item-open-bg)}.v-sidebar-menu.vsm_white-theme.vsm_expanded .vsm--link_level-1.vsm--link_open .vsm--icon{color:var(--vsm-icon-open-color, inherit);background-color:var(--vsm-icon-open-bg, transparent)}.v-sidebar-menu.vsm_white-theme.vsm_collapsed .vsm--link_level-1.vsm--link_hover .vsm--icon{color:var(--vsm-mobile-icon-color);background-color:var(--vsm-mobile-icon-bg)}.v-sidebar-menu.vsm_white-theme .vsm--icon{color:var(--vsm-icon-color, inherit)}.v-sidebar-menu.vsm_white-theme .vsm--dropdown{background-color:var(--vsm-dropdown-bg)}.v-sidebar-menu.vsm_white-theme .vsm--dropdown .vsm--item{color:var(--vsm-dropdown-color, var(--vsm-item-color))}.v-sidebar-menu.vsm_white-theme .vsm--mobile-bg{background-color:var(--vsm-mobile-item-bg)}.v-sidebar-menu.vsm_white-theme.vsm_rtl .vsm--link_level-1.vsm--link_active{-webkit-box-shadow:-3px 0px 0px 0px var(--vsm-item-active-line-color) inset;box-shadow:-3px 0 0 0 var(--vsm-item-active-line-color) inset}.v-sidebar-menu.vsm_white-theme .vsm--header{color:var(--vsm-header-item-color)}.v-sidebar-menu.vsm_white-theme .vsm--badge_default{color:var(--vsm-badge-color);background-color:var(--vsm-badge-bg)}.v-sidebar-menu.vsm_white-theme .vsm--toggle-btn{color:var(--vsm-toggle-btn-color);background-color:var(--vsm-toggle-btn-bg)}