#AdminNavigation > div.current.user {
position: relative; margin: 1vh 5% 0 5%;
}
#AdminNavigation > div.current.user > a.home {
text-align: center; display: block; font-size: 0.8em;
}
#AdminNavigation > div.current.user > a.profile.menu {
@include display(flex); @include align-items(center); @include align-content(center); @include justify-content(space-between); border-radius: 2px; background-color: rgba(darken($bright-blue, 25%), 0.2); padding: 4px 8px; &:hover svg { fill: lighten($bright-blue, 25%); }
}
#AdminNavigation > div.current.user > a.profile.menu > span {
text-align: center;
}
#AdminNavigation > div.current.user > a.profile.menu > svg {
@include transition(fill 0.1s ease-in); width: 18px; height: 18px; fill: rgba(darken($bright-blue, 25%), 0.7);
}
#AdminNavigation h2 {
@include display(flex); @include align-items(center); font-size: 1.2em; padding: 8px; margin: 0 1vw; font-weight: bold;
}
#AdminNavigation h2.selected, #AdminNavigation h2 + div > a.selected {
color: white; font-weight: bold; }
#AdminNavigation h2 > a {
@include flex(1); color: inherit;
}
#AdminNavigation h2 + div {
@include display(flex); @include flex-direction(column); margin: 0 1vw 1vh 1vw;
}
#AdminNavigation h2 + div > a {
padding: 8px 20px; color: $light-blue; font-size: 0.8em;
}
#AdminNavigation a {
color: $light-blue; &:hover { color: lighten($light-blue, 45%); }
}
#AdminNavigation form.logout {
margin-top: auto; border-top: 1px solid $light-blue; text-align: center;
}
#AdminNavigation form.logout input {
width: 100%;
}
#AdminNavigation [as='Popup'] {
position: absolute; margin: 0; top: 0; left: 0; right: 0; width: auto; background-color: $light-blue;
}
#AdminNavigation [as='Popup'] > div.current.user {
@include display(flex); @include align-items(center); @include align-content(center); @include justify-content(space-between); padding: 4px 8px;
}
#AdminNavigation [as='Popup'] > div.current.user > a {
@include display(flex); @include flex(0 auto); padding: 0; cursor: pointer;
}
#AdminNavigation [as='Popup'] > div.current.user > a > svg {
width: 18px; height: 18px; margin-top: 2px; fill: rgba(darken($bright-blue, 25%), 0.7);
}
#AdminNavigation [as='Popup'] > form.logout {
@include display(flex); margin: 8px 0; color: $red;
}
#AdminNavigation [as='Popup'] > form.logout > button {
@include display(flex); @include align-items(center); @include align-content(center); width: 100%; padding: 4px 8px; margin: 8px; font-weight: bold; background: $red; color: darken($red, 25%); &:hover { color: lighten($red, 50%); }
}
#AdminNavigation [as='Popup'] > form.logout > button > svg {
width: 12px; height: 12px; fill: darken($red, 15%); margin: 1px 8px 0 0;
}