diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius index 1f7e26ba5..62c2d3f0c 100644 --- a/templates/widgets/asidenav.lucius +++ b/templates/widgets/asidenav.lucius @@ -28,6 +28,22 @@ .asidenav__link-wrapper { .asidenav__link-shorthand { display: flex; + position: static; + background-color: var(--darkbase); + color: var(--whitebase); + height: 50px; + width: 50px; + text-align: center; + opacity: 1; + font-size: 16px; + line-height: 1em; + margin-right: 13px; + flex-shrink: 0; + outline: 1px solid white; + text-transform: uppercase; + word-break: break-all; + align-items: center; + justify-content: center; } .asidenav__link-label { padding-left: 0; @@ -76,7 +92,9 @@ color: var(--fontbase); transform: translateX(0); opacity: 0; - transition: all .2s ease; + transition: all .2s ease-out; + width: 0; + overflow: hidden; z-index: -1; .asidenav__list-item { @@ -115,6 +133,7 @@ .asidenav__nested-list { transform: translateX(100%); opacity: 1; + width: 200px; } .asidenav__link-wrapper, @@ -123,8 +142,8 @@ } .asidenav__link-shorthand { - background-color: var(--whitebase); - color: var(--darkbase); + transform: scale(1.05, 1.0); + transform-origin: right; } } } @@ -152,19 +171,16 @@ } .asidenav__link-shorthand { - background-color: var(--darkbase); - color: var(--whitebase); - height: 50px; - width: 50px; - display: none; - text-align: center; - margin-right: 13px; - flex-shrink: 0; - outline: 1px solid white; + display: block; + position: absolute; + color: var(--greybase); + line-height: 50px; + opacity: 0.3; + right: 10px; + top: 0; + font-size: 40px; text-transform: uppercase; - word-break: break-all; - align-items: center; - justify-content: center; + transition: transform .2s ease; } .asidenav__link-label {