Merge branch 'feat/asidenav' into 'master'

Fix for nested lists in asidenav & solution for longer course-shorthands.

See merge request !25
This commit is contained in:
Felix Hamann 2018-04-11 21:58:28 +02:00
commit 8c427c9e83

View File

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