73 lines
1.2 KiB
SCSS
73 lines
1.2 KiB
SCSS
$headerAndLogoHeight: 65px;
|
|
$headerPadding: 10px;
|
|
$logoColor: green;
|
|
$baseFontSize: 400;
|
|
$baseBgColor: black;
|
|
|
|
@media print {
|
|
.no-print,
|
|
.no-print * {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
@mixin MenuItemsTextStyling {
|
|
color: green;
|
|
cursor: pointer;
|
|
text-align: center;
|
|
// All menu texts should be in one line.
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@mixin MenuItemInvertedButton {
|
|
color: red;
|
|
}
|
|
|
|
.lang-menu {
|
|
display: none;
|
|
// It's a list, so remove list padding (where bullets are usually drawn).
|
|
padding: 0;
|
|
list-style: none;
|
|
|
|
&-item {
|
|
margin-left: 1em;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
&-link {
|
|
@include MenuItemsTextStyling;
|
|
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
input.lang-menu-trigger {
|
|
// Hide input checkbox, label is used for touch events instead.
|
|
position: absolute;
|
|
clip: rect(0, 0, 0, 0);
|
|
|
|
// Show menu on checkbox click.
|
|
&:checked ~ .lang-menu {
|
|
// Turn flexbox ul again into a block and reset it's properties.
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
z-index: 999;
|
|
|
|
.lang-menu-item {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
&:checked ~ label {
|
|
@include MenuItemInvertedButton;
|
|
}
|
|
}
|
|
|
|
// Menu button
|
|
label[for="lang-menu-trigger"] {
|
|
@include MenuItemsTextStyling;
|
|
}
|