_assets/scss/components/navbar.scss in bytewax-docs-0.1.0 vs _assets/scss/components/navbar.scss in bytewax-docs-0.1.1

@@ -14,39 +14,39 @@
         align-items:center;
         min-height:92px;
         padding-top:24px;
         padding-bottom:24px;
         @include transition(.25s ease-in-out);
-        @include min-lg{
+        @include media-min($lg){
             flex-wrap:nowrap;
             min-height:126px;
             padding-top:0;
             padding-bottom:0;
         }
     }
     &__brand{
-        @include max-lg{
+        @include media-max($lg){
             order:1;
         }
     }
     &__logo{
         display:block;
         height:44px;
-        @include min-sm{
+        @include media-min($sm){
             height:54px;
         }
         &--yellow{
             display:none;
             height:44px;
-            @include min-sm{
+            @include media-min($sm){
                 height:54px;
             }
         }
         &--dark{
             display:none;
             height:44px;
-            @include min-sm{
+            @include media-min($sm){
                 height:54px;
             }
         }
     }
     &__toggler{
@@ -57,14 +57,14 @@
         padding:0px;
         background:transparent;
         border:0px;
         border-radius:0px;
         outline: 0;
-        @include max-lg{
+        @include media-max($lg){
             order:3;
         }
-        @include min-lg{
+        @include media-min($lg){
             display:none;
         }
         span{
             position: relative;
             left: 0;
@@ -111,74 +111,73 @@
         justify-content:center;
         width:100%;
         min-height:calc(100vh - 92px);
         padding:0;
         list-style-type:none;
-        @include max-lg{
+        @include media-max($lg){
             order:4;
         }
-        @include min-lg{
+        @include media-min($lg){
             display:flex;
             flex-direction:row;
             justify-content:flex-end;
             min-height:0;
             margin:0 0 0 auto;
         }
         &-item{
             position:relative;
             margin:18px 0;
             line-height:135%;
-            @include min-lg{
+            @include media-min($lg){
                 margin:0 24px;
             }
-            @include min-xxl{
+            @include media-min($xxl){
                 margin:0 36px;
             }
             &:last-of-type{
-                @include min-lg{
+                @include media-min($lg){
                     margin-right:0;
                 }
             }
         }
         &-link{
             color:$white;
             font-weight:600;
             font-size:1.25em;
             font-family:$mainFont;
             text-decoration:none;
-            @include min-lg{
+            @include media-min($lg){
                 color:$black;
                 font-size:1em;
             }
             &--dropdown::after{
                 display:inline-block;
                 color:rgba($black,.24);
-                font-size:24px;
                 vertical-align:middle;
                 transform:rotate(0deg);
                 content:"arrow_drop_down";
                 @include transition(.25s ease-in-out);
-                @include material-icons;
-                @include min-lg{
+                @include material-icons(24px);
+                @include media-min($lg){
                     color:$yellow;
                 }
             }
             &--dropdown-open::after{
                 transform:rotate(-180deg);
             }
         }
         &-item--active &-link{
             color:$black;
-            @include min-lg{
+            @include media-min($lg){
                 color:$yellow;
             }
         }
         &-dropdown{
             display:none;
             padding:12px 0 0 0;
             list-style-type:none;
-            @include min-lg{
+            @include media-min($lg){
                 position:absolute;
                 top:48px;
                 left:-24px;
                 min-width:220px;
                 padding:12px 24px 16px 24px;
@@ -186,22 +185,22 @@
             }
             &-item{
                 margin:12px 0;
                 line-height:135%;
                 text-align:center;
-                @include min-lg{
+                @include media-min($lg){
                     margin:10px 0;
                     text-align:left;
                 }
             }
             &-link{
                 color:$black;
                 font-weight:600;
                 font-size:1.25em;
                 font-family:$mainFont;
                 text-decoration:none;
-                @include min-lg{
+                @include media-min($lg){
                     color:$white;
                     font-size:1em;
                 }
             }
             &::before{
@@ -211,11 +210,11 @@
                 display:none;
                 border-color: transparent transparent $yellow transparent;
                 border-style: solid;
                 border-width: 0 5px 5px 5px;
                 content:"";
-                @include min-lg{
+                @include media-min($lg){
                     display:inline-block;
                 }
             }
         }
         &-btn{
@@ -226,11 +225,11 @@
             font-size:1.25em;
             font-family:$mainFont;
             text-decoration:none;
             background:$black;
             border:1px solid $black;
-            @include min-lg{
+            @include media-min($lg){
                 padding:14px 24px 14px 30px;
                 font-size:1em;
                 background:$yellow;
                 border:1px solid $yellow;
             }
@@ -238,11 +237,11 @@
             &::after{
                 display:inline-block;
                 margin:0 0 0 2px;
                 vertical-align:-4px;
                 content:"arrow_right";
-                @include material-icons;
+                @include material-icons(24px);
             }
             &:hover, &:focus{
                 color:$white;
                 background-color:$blue;
                 border-color:$blue;
@@ -263,11 +262,11 @@
     &--scroll:not(.navbar--open){
         background:$white;
         box-shadow:0px 3px 9px rgba($black,.12);
     }
     &--scroll &__container{
-        @include min-lg{
+        @include media-min($lg){
             min-height:96px;
         }
     }
 
     /** Dark-light mode switch **/
@@ -280,25 +279,24 @@
         border:0;
         border-radius:30px;
         outline:none;
         cursor:pointer;
         @include transition(background-color .25s ease-in-out);
-        @include max-lg{
+        @include media-max($lg){
             order:2;
         }
-        @include min-lg{
+        @include media-min($lg){
             margin-left:54px;
         }
         &::before{
             position:absolute;
             top:-9px;
             left:0;
             padding:6px;
-            font-size:18px;
             border-radius:50%;
             box-shadow:0px 1px 2px rgba($black,.24);
-            @include material-icons;
+            @include material-icons(18px);
             @include transition(transform .25s ease-in-out);
         }
         &--light{
             background-color:rgba($black,.06);
         }
@@ -328,10 +326,10 @@
     &__logo--dark{
         display:block;
     }
     &__nav{
         &-link{
-            @include min-lg{
+            @include media-max($lg){
                 color:$white;
             }
         }
     }
     &--scroll:not(.navbar--open){
\ No newline at end of file