1
0
Fork 0
blog/src/components/molecules/Menu.module.scss

67 lines
1.1 KiB
SCSS

@import 'variables';
@import 'mixins';
.menu {
@include divider-top;
margin-top: 0;
padding-top: $spacer / 2;
position: absolute;
top: calc(100% + #{$spacer / 1.5});
left: 0;
width: 100%;
ul {
margin: 0;
padding: 0;
text-align: center;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
li {
list-style: none;
display: inline-block;
&::before {
display: none;
}
}
a {
color: $text-color;
line-height: 1;
text-transform: uppercase;
margin: 0 $spacer / 4;
font-size: $font-size-small;
text-shadow: 0 1px 0 rgba(#fff, 0.5);
padding: $padding-base-horizontal;
display: block;
text-align: center;
&:hover,
&:focus {
color: $link-color-hover;
}
:global(.dark) & {
color: $text-color--dark;
text-shadow: 0 -1px 0 rgba(#000, 0.5);
&:hover,
&:focus {
color: $link-color-hover;
}
}
}
&::-webkit-scrollbar,
&::-moz-scrollbar,
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
display: none;
}
}