cheeseburger_menu.css in Cheeseburger Menu 5.0.x
.body--has-active-cheese{overscroll-behavior-y:contain;overflow:hidden}.block-cheeseburgermenu-trigger-container{display:flex}.block-cheeseburgermenu__trigger-element{min-height:40px;min-width:40px;background:var(--cheese-trigger-bg-color);position:relative}.block-cheeseburgermenu__trigger-element span{width:24px;height:2px;background:var(--cheese-trigger-color);position:absolute;left:50%;transform:translateX(-50%);transition:width .25s}.block-cheeseburgermenu__trigger-element span:nth-of-type(1){top:12px}.block-cheeseburgermenu__trigger-element span:nth-of-type(2){top:19px}.block-cheeseburgermenu__trigger-element span:nth-of-type(3){top:26px}.block-cheeseburgermenu__trigger-element:active,.block-cheeseburgermenu__trigger-element:hover{cursor:pointer}.block-cheeseburgermenu__trigger-element:active span,.block-cheeseburgermenu__trigger-element:hover span{width:calc(24px + 5px)}.cheeseburger-menu__backdrop{transition:opacity .3s ease;transition-delay:.3s;z-index:200;transition:background-color .25s}.cheeseburger-menu__backdrop--active{position:fixed;top:0;right:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5)}.block-cheeseburgermenu-container{position:fixed;top:0;left:0;transition:all .3s ease;max-width:100%;width:350px;background:var(--cheese-main-bg-color);color:var(--cheese-main-text-color);overflow:hidden;transform:translateX(-100%);box-sizing:border-box}.block-cheeseburgermenu-container *{box-sizing:border-box}.block-cheeseburgermenu-container--is-open{transform:translateX(0);z-index:201}.block-cheeseburgermenu-container--is-open .cheeseburger-menu__side-menu{transform:translateX(0)}.block-cheeseburgermenu-container--with-navigation{padding-left:75px}.cheeseburger-menu__item{display:flex;flex-flow:row wrap;transition:all .3s ease;overflow:hidden}.cheeseburger-menu__item>ul{flex:1 0 100%;height:0;will-change:height;position:relative}.cheeseburger-menu__item--is-expanded>ul{height:auto}.cheeseburger-menu__item--is-expanded ul{background-color:rgba(0,0,0,.1)}.cheeseburger-menu__item.in-active-trail>a{text-decoration:underline}.cheeseburger-menu__item-label{min-height:40px;min-width:40px;flex:1 0 auto;display:flex;align-items:center;color:var(--cheese-main-text-color);text-decoration:none;border:none;max-width:calc(100% - 40px)}.cheeseburger-menu__item-label:hover{cursor:pointer;border:none;text-decoration:underline}.cheeseburger-menu__item-label:hover,.cheeseburger-menu__item-label:visited{color:var(--cheese-main-text-color)}.cheeseburger-menu__submenu-trigger{min-height:40px;min-width:40px;transition:all .3s ease;display:flex;align-items:center}.cheeseburger-menu__main-navigation-area{height:100vh;overflow-x:hidden;overflow-y:overlay;padding-bottom:150px;scrollbar-width:thin;scrollbar-color:var(--cheese-srcollbar-color) transparent}.cheeseburger-menu__main-navigation-area::-webkit-scrollbar{width:6px}.cheeseburger-menu__main-navigation-area::-webkit-scrollbar-track{background:0 0}.cheeseburger-menu__main-navigation-area::-webkit-scrollbar-thumb{background-color:var(--cheese-srcollbar-color)}.cheeseburger-menu__main-navigation-area>div{border-bottom:1px solid rgba(0,0,0,.2);margin-bottom:24px;transition:all .45s ease}.cheeseburger-menu__main-navigation-area>div:last-child{border-bottom:0}.cheeseburger-menu__main-navigation-area ol,.cheeseburger-menu__main-navigation-area ul{padding:0}.cheeseburger-menu__side-menu{position:fixed;left:0;top:0;transform:translateX(-100%);height:100%;transition:all .3s ease;background:var(--cheese-aside-bg-color);color:var(--cheese-aside-text-color);max-height:100%;overflow:auto}.cheeseburger-menu__side-menu-item{width:75px;transition:all .3s ease;text-align:center;min-height:calc(75px - 10px);display:flex;flex-direction:column;justify-content:center;font-weight:700}.cheeseburger-menu__side-menu-item img,.cheeseburger-menu__side-menu-item svg{display:block;margin:0 auto 6px auto;max-width:90%;max-height:40px;fill:var(--cheese-aside-text-color)}.cheeseburger-menu__side-menu-item span{font-size:10px;line-height:1.2;padding-left:3px;padding-right:3px}.cheeseburger-menu__side-menu-item:hover{cursor:pointer}.cheeseburger-menu__side-trigger{min-height:40px;min-width:40px;min-height:calc(75px - 10px);display:flex;flex-direction:column;justify-content:center;margin-bottom:18px}.cheeseburger-menu__side-trigger svg{fill:var(--cheese-aside-text-color);margin:0 auto}.cheeseburger-menu__side-trigger:hover{cursor:pointer}.cheeseburger-menu__title{padding:12px;text-transform:uppercase}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title{position:relative;transition:ease .35s}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:after,.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:before{transition:ease .35s;content:" ";position:absolute;width:2px;height:8px;background:var(--cheese-main-text-color);border-radius:0;top:calc(50% - 4px)}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:before{right:12px;transform:rotate(45deg)}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:after{right:16px;transform:rotate(-45deg)}.cheeseburger-menu__title--expanded .cheeseburger-menu__title:after,.cheeseburger-menu__title--expanded .cheeseburger-menu__title:before{right:14px;height:calc(21px / 1.5);top:calc(50% - 8px)}.cheeseburger-menu__title--expanded .cheeseburger-menu__title:before{transform:rotate(-45deg)}.cheeseburger-menu__title--expanded .cheeseburger-menu__title:after{transform:rotate(45deg)}.cheeseburger-menu__submenu{padding-left:12px!important}.cheeseburger-menu__mainmenu>li{padding-left:12px}.cheeseburger-menu__mainmenu>li.cheeseburger-parent{padding-left:0}.cheeseburger-menu__mainmenu>li.cheeseburger-parent .cheeseburger-menu__item-label{padding-left:12px}.cheeseburger-menu__mainmenu--invisible{display:none}.toolbar-fixed .block-cheeseburgermenu-container{top:39px}.toolbar-fixed.toolbar-tray-open .block-cheeseburgermenu-container{top:79px}.dropdown{position:relative;margin:20px 23.52941px;transition:ease .35s}.dropdown:after,.dropdown:before{transition:ease .35s;content:" ";position:absolute;width:2px;height:8px;background:var(--cheese-main-text-color);border-radius:0;top:-4px}.dropdown:before{left:3px;transform:rotate(45deg)}.dropdown:after{left:-2px;transform:rotate(-45deg)}.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:after,.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:before{left:0;height:calc(21px / 1.5);top:-7px}.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:before{transform:rotate(-45deg)}.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:after{transform:rotate(45deg)}
File
css/cheeseburger_menu.css
View source
- .body--has-active-cheese{overscroll-behavior-y:contain;overflow:hidden}.block-cheeseburgermenu-trigger-container{display:flex}.block-cheeseburgermenu__trigger-element{min-height:40px;min-width:40px;background:var(--cheese-trigger-bg-color);position:relative}.block-cheeseburgermenu__trigger-element span{width:24px;height:2px;background:var(--cheese-trigger-color);position:absolute;left:50%;transform:translateX(-50%);transition:width .25s}.block-cheeseburgermenu__trigger-element span:nth-of-type(1){top:12px}.block-cheeseburgermenu__trigger-element span:nth-of-type(2){top:19px}.block-cheeseburgermenu__trigger-element span:nth-of-type(3){top:26px}.block-cheeseburgermenu__trigger-element:active,.block-cheeseburgermenu__trigger-element:hover{cursor:pointer}.block-cheeseburgermenu__trigger-element:active span,.block-cheeseburgermenu__trigger-element:hover span{width:calc(24px + 5px)}.cheeseburger-menu__backdrop{transition:opacity .3s ease;transition-delay:.3s;z-index:200;transition:background-color .25s}.cheeseburger-menu__backdrop--active{position:fixed;top:0;right:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.5)}.block-cheeseburgermenu-container{position:fixed;top:0;left:0;transition:all .3s ease;max-width:100%;width:350px;background:var(--cheese-main-bg-color);color:var(--cheese-main-text-color);overflow:hidden;transform:translateX(-100%);box-sizing:border-box}.block-cheeseburgermenu-container *{box-sizing:border-box}.block-cheeseburgermenu-container--is-open{transform:translateX(0);z-index:201}.block-cheeseburgermenu-container--is-open .cheeseburger-menu__side-menu{transform:translateX(0)}.block-cheeseburgermenu-container--with-navigation{padding-left:75px}.cheeseburger-menu__item{display:flex;flex-flow:row wrap;transition:all .3s ease;overflow:hidden}.cheeseburger-menu__item>ul{flex:1 0 100%;height:0;will-change:height;position:relative}.cheeseburger-menu__item--is-expanded>ul{height:auto}.cheeseburger-menu__item--is-expanded ul{background-color:rgba(0,0,0,.1)}.cheeseburger-menu__item.in-active-trail>a{text-decoration:underline}.cheeseburger-menu__item-label{min-height:40px;min-width:40px;flex:1 0 auto;display:flex;align-items:center;color:var(--cheese-main-text-color);text-decoration:none;border:none;max-width:calc(100% - 40px)}.cheeseburger-menu__item-label:hover{cursor:pointer;border:none;text-decoration:underline}.cheeseburger-menu__item-label:hover,.cheeseburger-menu__item-label:visited{color:var(--cheese-main-text-color)}.cheeseburger-menu__submenu-trigger{min-height:40px;min-width:40px;transition:all .3s ease;display:flex;align-items:center}.cheeseburger-menu__main-navigation-area{height:100vh;overflow-x:hidden;overflow-y:overlay;padding-bottom:150px;scrollbar-width:thin;scrollbar-color:var(--cheese-srcollbar-color) transparent}.cheeseburger-menu__main-navigation-area::-webkit-scrollbar{width:6px}.cheeseburger-menu__main-navigation-area::-webkit-scrollbar-track{background:0 0}.cheeseburger-menu__main-navigation-area::-webkit-scrollbar-thumb{background-color:var(--cheese-srcollbar-color)}.cheeseburger-menu__main-navigation-area>div{border-bottom:1px solid rgba(0,0,0,.2);margin-bottom:24px;transition:all .45s ease}.cheeseburger-menu__main-navigation-area>div:last-child{border-bottom:0}.cheeseburger-menu__main-navigation-area ol,.cheeseburger-menu__main-navigation-area ul{padding:0}.cheeseburger-menu__side-menu{position:fixed;left:0;top:0;transform:translateX(-100%);height:100%;transition:all .3s ease;background:var(--cheese-aside-bg-color);color:var(--cheese-aside-text-color);max-height:100%;overflow:auto}.cheeseburger-menu__side-menu-item{width:75px;transition:all .3s ease;text-align:center;min-height:calc(75px - 10px);display:flex;flex-direction:column;justify-content:center;font-weight:700}.cheeseburger-menu__side-menu-item img,.cheeseburger-menu__side-menu-item svg{display:block;margin:0 auto 6px auto;max-width:90%;max-height:40px;fill:var(--cheese-aside-text-color)}.cheeseburger-menu__side-menu-item span{font-size:10px;line-height:1.2;padding-left:3px;padding-right:3px}.cheeseburger-menu__side-menu-item:hover{cursor:pointer}.cheeseburger-menu__side-trigger{min-height:40px;min-width:40px;min-height:calc(75px - 10px);display:flex;flex-direction:column;justify-content:center;margin-bottom:18px}.cheeseburger-menu__side-trigger svg{fill:var(--cheese-aside-text-color);margin:0 auto}.cheeseburger-menu__side-trigger:hover{cursor:pointer}.cheeseburger-menu__title{padding:12px;text-transform:uppercase}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title{position:relative;transition:ease .35s}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:after,.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:before{transition:ease .35s;content:" ";position:absolute;width:2px;height:8px;background:var(--cheese-main-text-color);border-radius:0;top:calc(50% - 4px)}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:before{right:12px;transform:rotate(45deg)}.cheeseburger-menu__title--collapsible .cheeseburger-menu__title:after{right:16px;transform:rotate(-45deg)}.cheeseburger-menu__title--expanded .cheeseburger-menu__title:after,.cheeseburger-menu__title--expanded .cheeseburger-menu__title:before{right:14px;height:calc(21px / 1.5);top:calc(50% - 8px)}.cheeseburger-menu__title--expanded .cheeseburger-menu__title:before{transform:rotate(-45deg)}.cheeseburger-menu__title--expanded .cheeseburger-menu__title:after{transform:rotate(45deg)}.cheeseburger-menu__submenu{padding-left:12px!important}.cheeseburger-menu__mainmenu>li{padding-left:12px}.cheeseburger-menu__mainmenu>li.cheeseburger-parent{padding-left:0}.cheeseburger-menu__mainmenu>li.cheeseburger-parent .cheeseburger-menu__item-label{padding-left:12px}.cheeseburger-menu__mainmenu--invisible{display:none}.toolbar-fixed .block-cheeseburgermenu-container{top:39px}.toolbar-fixed.toolbar-tray-open .block-cheeseburgermenu-container{top:79px}.dropdown{position:relative;margin:20px 23.52941px;transition:ease .35s}.dropdown:after,.dropdown:before{transition:ease .35s;content:" ";position:absolute;width:2px;height:8px;background:var(--cheese-main-text-color);border-radius:0;top:-4px}.dropdown:before{left:3px;transform:rotate(45deg)}.dropdown:after{left:-2px;transform:rotate(-45deg)}.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:after,.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:before{left:0;height:calc(21px / 1.5);top:-7px}.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:before{transform:rotate(-45deg)}.cheeseburger-menu__item--is-expanded>.cheeseburger-menu__submenu-trigger .dropdown:after{transform:rotate(45deg)}