html body height 100% width 100% overflow hidden #app absolute 0 0 0 0 overflow hidden section:not(.active) transform translateX(-100%) opacity 0 section.active ~ section transform translateX(100%) opacity 0 section.active transform translateX(0) opacity 1 transition transform 200ms ease-in-out, opacity 200ms ease-in-out 0s section absolute 0 0 0 0 overflow hidden transition transform 200ms ease-in-out, opacity 200s ease-in-out 100ms .toast z-layer 'modal' absolute none $toast-margin $toast-margin $toast-margin height $toast-height line-height $toast-height font-size $toast-font-size color $toast-foreground background $toast-background transition 0.7s ease-out opacity 1 transform translateY(0) &.hidden transform translateY(100%) opacity 0 .text absolute ($toast-font-size * $baseline-ratio) none none (($toast-height - $toast-font-size) / 2) header absolute 0 0 none 0 height $header-height z-layer 'section', 'header' color $header-foreground background $header-background display flex h2 font-size 1.0em font-weight 300 margin 0 color $header-foreground white-space nowrap flex 1 min-width 0 // https://css-tricks.com/flexbox-truncated-text/ height 100% // required for Safari webkit, otherwise vertical-center of decending label or div.select does not work label overflow hidden text-overflow ellipsis > label > div.select padding-right $select-padding vertical-center relative vertical-align top max-width 100% display inline-block &:first-child padding-left 15px nav &:first-child .icon:first-child padding-left $header-horizontal-nav-margin &:last-child .icon:last-child padding-right $header-horizontal-nav-margin .icon line-height $header-height width $header-icon-width text-align center font-size 1.4em display inline-block cursor pointer color $header-icon-foreground box-sizing content-box &.active color $header-icon-foreground-active .menu position relative display inline-block .entries absolute 85% 0 background $menu-entries-background color $menu-entries-foreground border $menu-entries-border box-shadow $menu-entries-shadow z-layer 'modal' opacity 0 transform-origin 50% 0% transform scale(0.75) visibility hidden transition opacity 150ms ease-out, transform 150ms ease-out, visibility 0 linear 150ms li padding $menu-entry-padding border-style $menu-entry-item-border-style border-width $menu-entry-item-border-width border-color $menu-entry-item-border-color white-space nowrap line-height 1em cursor pointer &.hidden display none &.no-link cursor default &:last-child border none &.view .icon background lighten($header-background, 5%) .entries visibility visible transition opacity 50ms ease-out, transform 50ms ease-out transition-delay 0 opacity 1 transform scale(1) article z-layer 'section', 'article' background $background absolute $header-height 0 0 0 overflow-y none aside z-layer 'section', 'aside' absolute $header-height none 0 none color $aside-foreground background $aside-background width 100% overflow hidden opacity 0 transition .2s ease-in-out @media $media-gt-phone width 40% max-width 450px &.right right 0 transform translateX(100%) &.active transform translateX(0) &.left transform translateX(-100%) &.active transform translateX(0) &.active z-layer 'section', 'aside' opacity 1