Make TopBar respond to $text-direction

TopBar doesn't respond to `$text-direction: rtl` correctly. So I used `$default-float` and `$default-opposite` and it seems to be working.

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
index 51a6b41725dfdead88d32b4b944ccf013c63f622..286efce128dcbf763ed0b4757f5654eb19812971 100644 (file)
--- a/scss/foundation/components/_top-bar.scss
+++ b/scss/foundation/components/_top-bar.scss
@@ -106,7 +106,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
   // Menu toggle button on small devices
   .toggle-topbar {
     position: absolute;
-    right: 0;
+    #{$default-opposite}: 0;
     top: 0;
 
     a {
@@ -123,10 +123,10 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
 
     // Adding the class "menu-icon" will add the 3-line icon people love and adore.
     &.menu-icon {
-      right: $topbar-height / 3;
+      #{$default-opposite}: $topbar-height / 3;
       top: 50%;
       margin-top: -16px;
-      padding-left: 40px;
+      padding-#{$default-float}: 40px;
 
       a {
         text-indent: -48px;
@@ -138,7 +138,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
 
         span {
           position: absolute;
-          right: 0;
+          #{$default-opposite}: 0;
           display: block;
           width: 16px;
           height: 0;
@@ -208,8 +208,9 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     & > a {
       display: block;
       width: 100%;
-      padding: 12px 0 12px $topbar-height / 3;
       color: $topbar-dropdown-link-color;
+      padding: 12px 0 12px 0;
+      padding-#{$default-float}: $topbar-height / 3;
       font-size: $topbar-link-font-size;
       font-weight: $topbar-link-weight;
       background: $topbar-dropdown-bg;
@@ -263,7 +264,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
         margin-top: -($topbar-dropdown-toggle-size / 2) - 2;
         position: absolute;
         top: 50%;
-        right: 0;
+        #{$default-opposite}: 0;
       }
     }
 
@@ -321,7 +322,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
   .top-bar { background: $topbar-bg; @include clearfix; overflow: visible;
     .toggle-topbar { display: none; }
 
-    .title-area { float: left; }
+    .title-area { float: $default-float; }
     .name h1 a { width: auto; }
 
     input,
@@ -349,7 +350,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
       display: inline;
 
       li {
-        float: left;
+        float: $default-float;
         .js-generated { display: none; }
       }
     }
@@ -390,7 +391,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
             border: none;
             content: "\00bb";
             margin-top: -7px;
-            right: 5px;
+            #{$default-opposite}: 5px;
           }
         }
       }
@@ -398,7 +399,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     }
 
     .dropdown {
-      left: 0;
+      #{$default-float}: 0;
       top: auto;
       background: transparent;
 
@@ -417,7 +418,7 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
 
         // Second Level Dropdowns
         .dropdown {
-          left: 100%;
+          #{$default-float}: 100%;
           top: 0;
         }
       }
@@ -426,8 +427,8 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
     & > ul > .divider {
       border-bottom: none;
       border-top: none;
-      border-right: solid 1px lighten($topbar-bg, 10%);
-      border-left: solid 1px darken($topbar-bg, 10%);
+      border-#{$default-opposite}: solid 1px lighten($topbar-bg, 10%);
+      border-#{$default-float}: solid 1px darken($topbar-bg, 10%);
       clear: none;
       height: $topbar-height;
       width: 0px;