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.
99 lines
1.6 KiB
99 lines
1.6 KiB
8 years ago
|
#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 {
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
|
||
|
|
&::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); }
|
||
|
|
}
|
||
|
|
}
|