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.
111 lines
1.8 KiB
111 lines
1.8 KiB
#menu {
|
|
$menu-bg: #3983CD;
|
|
$menu-hl: #5badff; //#1bd886;
|
|
$menu-fg: white;
|
|
|
|
flex: 0 0 15rem;
|
|
background: $menu-bg;
|
|
|
|
& > * {
|
|
display: block;
|
|
text-decoration: none;
|
|
padding: dist(-1) dist(0);
|
|
|
|
@include nowrap;
|
|
@include noselect;
|
|
}
|
|
|
|
#brand {
|
|
cursor: pointer;
|
|
color: $menu-fg;
|
|
background: darken($menu-bg, 10%);
|
|
font-size: 120%;
|
|
text-align: center;
|
|
position:relative;
|
|
transition: none;
|
|
font-weight: bold;
|
|
|
|
margin-bottom: dist(0);
|
|
|
|
@include media($phone) {
|
|
background: $menu-bg;
|
|
cursor: pointer;
|
|
margin-bottom: dist(-2);
|
|
|
|
&::after {
|
|
position: absolute;
|
|
color: rgba(black, .4);
|
|
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(-25%,-50%) rotate(-90deg) }
|
|
}
|
|
}
|
|
|
|
a {
|
|
font-size: 130%;
|
|
color: $menu-fg;
|
|
|
|
transition: background-color 0.2s;
|
|
text-shadow: 0 0 5px rgba(black, .4);
|
|
|
|
&:hover, &.selected {
|
|
background: $menu-hl;
|
|
text-shadow: 0 0 5px rgba(black, .6);
|
|
}
|
|
|
|
&.selected {
|
|
position: relative;
|
|
box-shadow: 0 0 5px rgba(black, .5);
|
|
}
|
|
|
|
&:focus {
|
|
outline-color: $c-red-outline;
|
|
}
|
|
|
|
//&::before {
|
|
// content: "▸";
|
|
// padding-right: .5rem;
|
|
// position: relative;
|
|
// top: -0.1rem;
|
|
//}
|
|
|
|
// Fontello
|
|
&::before {
|
|
vertical-align: -2px;
|
|
margin-left: 0;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
@include media($phone) {
|
|
display: none;
|
|
&::before {margin-left: 10px;}
|
|
}
|
|
}
|
|
|
|
&.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); }
|
|
}
|
|
}
|
|
|