BWA: Fix responsive layout for global navbar master
authorPablo Vazquez <pablo@blender.org>
Tue, 23 Nov 2021 13:12:10 +0000 (14:12 +0100)
committerPablo Vazquez <pablo@blender.org>
Tue, 23 Nov 2021 13:12:10 +0000 (14:12 +0100)
styles/_navigation.sass

index d4ff543fb7932551211fb9fe33da4641d4c671b0..813dc8b8e60ad6bb3e8cb81a3130c1ba960f4b51 100644 (file)
@@ -1,7 +1,9 @@
 /* Top Bar: Generics */
 .navbar-global-container
        background-color: var(--navbar-global-bg)
-       +padding(3, x)
+
+       +media-sm
+               +padding(3, x)
 
        .navbar-logo-blender
                +blender_logo_white
 
        .dropdown-menu
                background-color: var(--navbar-global-dropdown-bg)
-               color: var(--navbar-global-text-color)
                border-radius: var(--border-radius-lg)
+               color: var(--navbar-global-text-color)
+               flex-direction: column
                +padding(2)
-               width: 46rem
+               right: -.75rem
+               width: 100vw
+
+               +media-sm
+                       flex-direction: row
+                       right: 0
+                       width: 46rem
 
                &.show
                        display: flex
                        flex-wrap: wrap
 
                li
-                       width: 50%
+                       +media-sm
+                               width: 50%
 
                &::before
                        background-color: var(--navbar-global-dropdown-bg)
@@ -385,7 +395,7 @@ body
 /* Tabs navigation. */
 .tabs
        clear: both
-       
+
        .nav-tabs
                font-size: initial
                justify-content: center