diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss index f5c9ced..14ff107 100644 --- a/themes/tsc_vfl/assets/css/main.scss +++ b/themes/tsc_vfl/assets/css/main.scss @@ -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;