client/planner-nav/style.css
nav {
background-color: var(--navbar-background-color);
height: 44px;
width: 320px;
position: absolute;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.2);
z-index: 10;
}
nav .logo {
background-image: url(/images/application/nav-logo.png);
background-position: 8px 10px;
background-repeat: no-repeat;
background-size: auto 24px;
height: 44px;
display: inline-block;
width: 50%;
}
.--navbar-background-color {
background-color: var(--navbar-background-color);
}
@media (--narrow-window) {
nav {
width: 100%;
}
}
nav .show-menu {
color: var(--navbar-font-color);
background: transparent;
height: 44px;
width: 44px;
border: none;
font-size: 18px;
}
nav .show-menu:active,
nav .show-menu:hover,
nav .show-menu:focus {
color: color(var(--navbar-font-color) shade(20%));
outline: transparent;
}
nav .menu {
position: absolute;
list-style-type: none;
right: 0;
background-color: var(--navbar-background-color);
padding-left: 0;
border-bottom-left-radius: var(--border-radius);
box-shadow: -2px 2px 2px -1px color(var(--navbar-background-color) alpha(10%));
margin-top: -2px;
}
nav .menu > li > a {
padding: 10px;
display: block;
}
nav .menu > li:last-of-type a {
border-bottom: transparent;
}