Create styles for mobile menu
This commit is contained in:
parent
02d17099a4
commit
85527b4467
@ -2,7 +2,9 @@
|
||||
$total_width: 95%;
|
||||
|
||||
$color_red: #cd1013;
|
||||
$color_background_mobile_menu: #f5f5f5;
|
||||
$color_background_mobile_menu_header: #e0e0e0;
|
||||
$color_hor_line: #a5a5a5;
|
||||
|
||||
$gap_columns_persons: 25px;
|
||||
|
||||
@ -487,6 +489,68 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 30px 0;
|
||||
padding: 30px 5% 0 5%;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include media-large() {
|
||||
display: none;
|
||||
}
|
||||
|
||||
border-top: 1px solid $color_hor_line;
|
||||
|
||||
|
||||
.level-1 {
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
background-color: $color_background_mobile_menu_header;
|
||||
}
|
||||
}
|
||||
.level-2 {
|
||||
width: 50%;
|
||||
|
||||
a {
|
||||
background-color: $color_background_mobile_menu;
|
||||
}
|
||||
}
|
||||
.level-1, .level-2 {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
box-sizing: border-box;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
@include menu-style();
|
||||
|
||||
&.active {
|
||||
color: white;
|
||||
background-color: $color_red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-link {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
width: max-content;
|
||||
padding: 5px 75px 5px 15px;
|
||||
margin: 5px 0 5px 20px;
|
||||
@include menu-style();
|
||||
|
||||
@include media-large() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.announcement-list {
|
||||
.entry {
|
||||
margin: 0 30px;
|
||||
|
Loading…
Reference in New Issue
Block a user