You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.4 KiB
94 lines
1.4 KiB
#menu {
|
|
$menu-bg: #2c6cab;
|
|
|
|
flex: 0 0 15rem;
|
|
background: $menu-bg;
|
|
|
|
& > * {
|
|
display: block;
|
|
text-decoration: none;
|
|
padding: dist(-1) dist(0);
|
|
|
|
@include nowrap;
|
|
@include noselect;
|
|
}
|
|
|
|
#brand {
|
|
color: white;
|
|
background: darken($menu-bg, 10%);
|
|
font-size: 120%;
|
|
text-align: center;
|
|
position:relative;
|
|
|
|
margin-bottom: dist(0);
|
|
|
|
@include media($phone) {
|
|
background: $menu-bg;
|
|
cursor: pointer;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
color: rgba(black, .2);
|
|
right: dist(0);
|
|
content: '>';
|
|
top:50%;
|
|
font-size: 120%;
|
|
font-weight: bold;
|
|
transform: translate(0,-50%) rotate(90deg);
|
|
}
|
|
}
|
|
}
|
|
&.expanded #brand {
|
|
background: darken($menu-bg, 10%);
|
|
|
|
@include media($phone) {
|
|
&:after { transform: translate(0,-50%) rotate(-90deg) }
|
|
}
|
|
}
|
|
|
|
|
|
a {
|
|
font-size: 130%;
|
|
color: white;
|
|
|
|
$hl: #1c79d6;
|
|
transition: background-color 0.2s;
|
|
text-shadow: 0 0 5px rgba(black, .4);
|
|
|
|
&:hover, &.selected {
|
|
background: $hl;
|
|
text-shadow: 0 0 5px rgba(black, .6);
|
|
}
|
|
|
|
&.selected {
|
|
position: relative;
|
|
box-shadow: 0 0 5px rgba(black, .5);
|
|
}
|
|
|
|
&:before {
|
|
content: "▸";
|
|
padding-right: .5rem;
|
|
position: relative;
|
|
top: -0.1rem;
|
|
}
|
|
|
|
@include media($phone) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.expanded a { display:block }
|
|
|
|
@include media($tablet) {
|
|
#brand {
|
|
font-size: 95%;
|
|
margin-bottom: dist(-1);
|
|
}
|
|
|
|
a { font-size: 105%; }
|
|
|
|
flex-basis: 10rem;
|
|
|
|
& > * { padding: dist(-2) dist(-1); }
|
|
}
|
|
}
|
|
|