navbar.sass in mere-blog-theme-0.4

- old
+ new

@@ -1,18 +1,18 @@
-$navbar-background-color: $white !default
+$navbar-background-color: $scheme-main !default
 $navbar-box-shadow-size: 0 2px 0 0 !default
 $navbar-box-shadow-color: $background !default
 $navbar-height: 3.25rem !default
 $navbar-padding-vertical: 1rem !default
 $navbar-padding-horizontal: 2rem !default
 $navbar-z: 30 !default
 $navbar-fixed-z: 30 !default
 
-$navbar-item-color: $grey-dark !default
+$navbar-item-color: $text !default
 $navbar-item-hover-color: $link !default
-$navbar-item-hover-background-color: $white-bis !default
-$navbar-item-active-color: $black !default
+$navbar-item-hover-background-color: $scheme-main-bis !default
+$navbar-item-active-color: $scheme-invert !default
 $navbar-item-active-background-color: transparent !default
 $navbar-item-img-max-height: 1.75rem !default
 
 $navbar-burger-color: $navbar-item-color !default
 
@@ -22,21 +22,21 @@
 $navbar-tab-active-background-color: transparent !default
 $navbar-tab-active-border-bottom-color: $link !default
 $navbar-tab-active-border-bottom-style: solid !default
 $navbar-tab-active-border-bottom-width: 3px !default
 
-$navbar-dropdown-background-color: $white !default
+$navbar-dropdown-background-color: $scheme-main !default
 $navbar-dropdown-border-top: 2px solid $border !default
 $navbar-dropdown-offset: -4px !default
 $navbar-dropdown-arrow: $link !default
 $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
 
-$navbar-dropdown-item-hover-color: $black !default
+$navbar-dropdown-item-hover-color: $scheme-invert !default
 $navbar-dropdown-item-hover-background-color: $background !default
 $navbar-dropdown-item-active-color: $link !default
 $navbar-dropdown-item-active-background-color: $background !default
 
 $navbar-divider-background-color: $background !default
@@ -70,11 +70,11 @@
         & > a.navbar-item,
         .navbar-link
           &:focus,
           &:hover,
           &.is-active
-            background-color: darken($color, 5%)
+            background-color: bulmaDarken($color, 5%)
             color: $color-invert
         .navbar-link
           &::after
             border-color: $color-invert
       .navbar-burger
@@ -88,19 +88,19 @@
           & > a.navbar-item,
           .navbar-link
             &:focus,
             &:hover,
             &.is-active
-              background-color: darken($color, 5%)
+              background-color: bulmaDarken($color, 5%)
               color: $color-invert
           .navbar-link
             &::after
               border-color: $color-invert
         .navbar-item.has-dropdown:focus .navbar-link,
         .navbar-item.has-dropdown:hover .navbar-link,
         .navbar-item.has-dropdown.is-active .navbar-link
-          background-color: darken($color, 5%)
+          background-color: bulmaDarken($color, 5%)
           color: $color-invert
         .navbar-dropdown
           a.navbar-item
             &.is-active
               background-color: $color
@@ -149,11 +149,11 @@
   overflow-y: hidden
 
 .navbar-burger
   color: $navbar-burger-color
   +hamburger($navbar-height)
-  margin-left: auto
+  +ltr-property("margin", auto, false)
 
 .navbar-menu
   display: none
 
 .navbar-item,
@@ -177,11 +177,10 @@
   &.is-active
     background-color: $navbar-item-hover-background-color
     color: $navbar-item-hover-color
 
 .navbar-item
-  display: block
   flex-grow: 0
   flex-shrink: 0
   img
     max-height: $navbar-item-img-max-height
   &.has-dropdown
@@ -208,16 +207,16 @@
 .navbar-content
   flex-grow: 1
   flex-shrink: 1
 
 .navbar-link:not(.is-arrowless)
-  padding-right: 2.5em
+  +ltr-property("padding", 2.5em)
   &::after
     @extend %arrow
     border-color: $navbar-dropdown-arrow
     margin-top: -0.375em
-    right: 1.125em
+    +ltr-position(1.125em)
 
 .navbar-dropdown
   font-size: 0.875rem
   padding-bottom: 0.5rem
   padding-top: 0.5rem
@@ -243,11 +242,11 @@
   .navbar-link
     &::after
       display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px rgba($black, 0.1)
+    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
   // Fixed navbar
   .navbar
@@ -255,11 +254,11 @@
     &.is-fixed-top-touch
       +navbar-fixed
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($black, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
     &.is-fixed-top-touch
       .navbar-menu
@@ -318,22 +317,21 @@
   .navbar-item,
   .navbar-link
     align-items: center
     display: flex
   .navbar-item
-    display: flex
     &.has-dropdown
       align-items: stretch
     &.has-dropdown-up
       .navbar-link::after
         transform: rotate(135deg) translate(0.25em, -0.25em)
       .navbar-dropdown
         border-bottom: $navbar-dropdown-border-top
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px rgba($black, 0.1)
+        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
     &.is-hoverable:focus-within,
     &.is-hoverable:hover
@@ -347,32 +345,32 @@
   .navbar-menu
     flex-grow: 1
     flex-shrink: 0
   .navbar-start
     justify-content: flex-start
-    margin-right: auto
+    +ltr-property("margin", auto)
   .navbar-end
     justify-content: flex-end
-    margin-left: auto
+    +ltr-property("margin", auto, false)
   .navbar-dropdown
     background-color: $navbar-dropdown-background-color
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
     border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px rgba($black, 0.1)
+    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
     display: none
     font-size: 0.875rem
-    left: 0
+    +ltr-position(0, false)
     min-width: 100%
     position: absolute
     top: 100%
     z-index: $navbar-dropdown-z
     .navbar-item
       padding: 0.375rem 1rem
       white-space: nowrap
     a.navbar-item
-      padding-right: 3rem
+      +ltr-property("padding", 3rem)
       &:focus,
       &:hover
         background-color: $navbar-dropdown-item-hover-background-color
         color: $navbar-dropdown-item-hover-color
       &.is-active
@@ -396,21 +394,21 @@
   .navbar-divider
     display: block
   .navbar > .container,
   .container > .navbar
     .navbar-brand
-      margin-left: -.75rem
+      +ltr-property("margin", -.75rem, false)
     .navbar-menu
-      margin-right: -.75rem
+      +ltr-property("margin", -.75rem)
   // Fixed navbar
   .navbar
     &.is-fixed-bottom-desktop,
     &.is-fixed-top-desktop
       +navbar-fixed
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px rgba($black, 0.1)
+        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
     &.is-fixed-top-desktop
       top: 0
   html,
   body
     &.has-navbar-fixed-top-desktop