Commit 6a0c3547 authored by Emma's avatar Emma 🦉

merge desktop & mobile CSS for site-nav

parent 40d1faf3
Pipeline #52634028 passed with stages
in 8 minutes and 32 seconds
@import (reference) '../_variables';
@media screen and (min-width: @desktop-min-width) {
.site-nav {
background-color: var(--primary);
display: flex;
margin-bottom: 1rem;
.site-nav {
background-color: var(--primary);
display: flex;
flex-direction: column;
margin-bottom: 1rem;
@media screen and (min-width: @desktop-min-width) {
flex-direction: row;
padding: 0 1rem;
}
&__mobile-toggle {
display: none;
}
&__logo,
&__mobile-toggle,
&__link {
color: var(--primary-fg);
display: block;
font-size: @nav-font-size;
white-space: nowrap;
}
&__logo,
&__link {
color: var(--primary-fg);
display: block;
font-size: @nav-font-size;
padding: 1rem;
white-space: nowrap;
}
&__logo {
font-weight: bold;
padding: 1rem;
}
&__logo {
font-weight: bold;
}
&__mobile-toggle {
padding: 1rem;
&__inner {
display: flex;
justify-content: space-between;
width: 100%;
&--has-notifications {
background-color: var(--notification);
}
&__menu {
display: flex;
padding: 0;
margin: 0;
@media screen and (min-width: @desktop-min-width) {
display: none;
}
}
&__item {
display: block;
&--has-notifications {
background: var(--notification);
}
&__link {
padding: 0.5rem 1rem;
// todo: BEM
&.dropdown-container {
&.expanded,
&:not(.js):hover {
background: var(--primary-alt);
}
}
@media screen and (min-width: @desktop-min-width) {
padding: 1rem;
}
}
}
// mobile
@media screen and (max-width: (@desktop-min-width - 1px)) {
.site-nav {
background-color: var(--primary);
margin-bottom: 1rem;
// holds logo and mobile toggle
&__header {
display: flex;
justify-content: space-between;
}
&__logo {
font-weight: bold;
}
// holds the menus, hidden on mobile until toggled
&__inner {
display: none;
&__logo,
&__mobile-toggle,
&__link {
color: var(--primary-fg);
font-size: @nav-font-size;
padding: 1rem;
}
&__mobile-toggle {
&--has-notifications {
background: var(--notification);
}
&--mobile-visible {
display: flex;
flex-direction: column;
}
&__header {
@media screen and (min-width: @desktop-min-width) {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
}
&__menu {
margin: 0;
padding: 0;
}
&__item {
&--has-notifications {
background: var(--notification);
}
&.dropdown-container {
&.expanded,
&:not(.js):hover {
background: var(--primary-alt);
}
}
}
// one on each side
&__menu {
display: flex;
flex-direction: column;
&__link {
display: block;
@media screen and (min-width: @desktop-min-width) {
flex-direction: row;
}
}
&__inner {
background-color: var(--primary-alt);
display: none;
// menu item
&__item {
display: block;
&--mobile-visible {
display: block;
}
&--has-notifications {
background-color: var(--notification);
}
}
}
.no-js &__item.dropdown:hover > .dropdown__toggle,
.js &__item.dropdown--expanded > .dropdown__toggle {
background-color: var(--primary-alt);
}
}
......@@ -10,7 +10,7 @@
<div class="site-nav__inner">
{# left portion of site nav #}
<ul class="site-nav__menu">
<ul class="site-nav__menu unlistify">
<li class="site-nav__item">
<a href="{{ path('forum_list') }}" class="site-nav__link">{{ 'nav.forums'|trans }}</a>
</li>
......@@ -39,7 +39,7 @@
</ul>
{# right portion of site nav #}
<ul class="site-nav__menu right-nav">
<ul class="site-nav__menu unlistify">
{% if not is_granted('ROLE_USER') %}
<li class="site-nav__item">
<a href="{{ path('login') }}" class="site-nav__link">{{ 'nav.log_in'|trans }}</a>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment