79 lines
1.2 KiB
SCSS
79 lines
1.2 KiB
SCSS
.main-menu {
|
|
|
|
position: fixed;
|
|
z-index: 100;
|
|
overflow-x: scroll;
|
|
-webkit-overflow-scrolling: touch;
|
|
width: 100%;
|
|
//max-height: 15em;
|
|
|
|
background-color: black;
|
|
font-size: 1.1em;
|
|
color: #666;
|
|
|
|
list-style: none;
|
|
white-space: nowrap;
|
|
|
|
& :link, & :visited {
|
|
text-decoration: none;
|
|
border-bottom: 1px solid #333;
|
|
color: #a2a2a2;
|
|
}
|
|
|
|
li {
|
|
display: inline-block; /* 6 */
|
|
padding: 0.3em 0.2em 0.5em;
|
|
margin: 0 0.5em;
|
|
|
|
&:first-child {
|
|
margin-left: 1em;
|
|
}
|
|
}
|
|
|
|
a:hover {
|
|
color: white;
|
|
border-bottom: 1px solid #555;
|
|
}
|
|
|
|
.selected {
|
|
border-top: 4px solid white;
|
|
font-weight: bold;
|
|
|
|
a:link, a:visited {
|
|
color: white;
|
|
text-decoration: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
&.blue {
|
|
border-top: 4px solid #3f9cea;
|
|
}
|
|
|
|
&.green {
|
|
border-top: 4px solid #5cbe40;
|
|
}
|
|
|
|
&.yellow {
|
|
border-top: 4px solid #ffee00;
|
|
}
|
|
|
|
&.pink {
|
|
border-top: 4px solid #f655a0;
|
|
}
|
|
|
|
&.red {
|
|
border-top: 4px solid #f61b14;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (min-width: 31.25em) {
|
|
header{
|
|
//max-height: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.main-menu {
|
|
width: 100%;
|
|
}
|
|
} |