add more settings for top-bar: $topBarDropToggleColor, $topBarDropToggleAlpha

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index d4b9e1b24e04cb2a758e8ad9b15cf519c98d4b2d..e3a0cd989ec777c86f75725f3b44b7e047483e55 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -117,6 +117,8 @@ $topBarLinkColor: #fff !default;
 $topBarLinkWeight: bold !default;
 $topBarLinkSize: ms(0) - 1 !default;
 $topBarDropToggleSize: 5px !default;
+$topBarDropToggleColor: #fff !default;
+$topBarDropToggleAlpha: 0.5 !default;
 $topBarSearchWidth: 200px !default;
 $topBarBreakPoint: 940px !default; // Change to 9999px for always mobile layout
 $topBarNavToggleSize: 8px !default;

diff --git a/scss/foundation/components/modules/_topbar.scss b/scss/foundation/components/modules/_topbar.scss
index 24b004e03e712a81a3b733c374a5e28288456288..5dd2b7cfdfc08e7fb5363e9b7dc77e9a5e392d9c 100644 (file)
--- a/scss/foundation/components/modules/_topbar.scss
+++ b/scss/foundation/components/modules/_topbar.scss
@@ -76,7 +76,7 @@
         &.has-dropdown { position: relative;
           &:hover { &>.dropdown { display: block; visibility: visible; } }
           a { padding-right: $topBarHeight * .75;
-            &:after { @include cssTriangle($topBarDropToggleSize, #fff, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; }
+            &:after { @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; }
           }
           .dropdown { background: $topBarBgColor; left: 0; margin: 0; padding: $topBarHeight / 5 0 0 0; position: absolute; visibility: hidden; z-index: 99;
             li { background: $topBarBgColor; line-height: 1; min-width: 100%; padding-bottom: 5px;
@@ -181,7 +181,7 @@
           /* Dropdown Level 1 */
           &.has-dropdown {
             a { padding-right: $topBarHeight * .75;
-              &:after { @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; }
+              &:after { @include cssTriangle($topBarDropToggleSize, rgba($topBarDropToggleColor, $topBarDropToggleAlpha), left); margin-right: $topBarHeight / 3; margin-top: -($topBarDropToggleSize / 2) - 2; position: absolute; top: 50%; }
             }
             &:hover >.dropdown { display: block; visibility: hidden; }
             .dropdown { visibility: hidden; z-index: 0 !important; }
@@ -198,7 +198,7 @@
                 }
               }
               .back.title { padding-bottom: 0;
-                a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, #fff, right); }
+                a:before { position: absolute; top: 50%; left: ($topBarHeight / 2) - $topBarDropToggleSize; margin-top: -$topBarDropToggleSize; width: 0; height: 0; @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, right); }
                 h5 { margin: 0; padding-left: $topBarDropToggleSize * 3; position: relative;
                   a { padding-top: 8px; padding-bottom: 8px; font-size: ms(2); font-weight: $topBarTitleWeight; }
                 }
@@ -211,7 +211,7 @@
             &.has-dropdown {
               .dropdown { left: 100% !important; top: 0; right: auto !important; }
               &>a { padding-right: $topBarHeight * .75;
-                &:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba(255,255,255,0.5), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; }
+                &:after { content: ""; margin-right: $topBarHeight / 3; @include cssTriangle($topBarDropToggleSize, rgba($topBarDropToggleColor, $topBarDropToggleAlpha), left); position: absolute; top: 50%; margin-top: -($topBarDropToggleSize / 2) - 2; }
               }
               &.moved { position: static;
                 .dropdown { top: 0; visibility: visible; }
@@ -237,4 +237,4 @@
     }
     .top-bar ul li.has-button { padding: 0 $navBarHeight / 2 5px; }
     .top-bar ul li .button.small { margin: 0 !important; display: inline-block; width: 100%; }
-  }
\ No newline at end of file
+  }

diff --git a/templates/project/scss/_settings.scss b/templates/project/scss/_settings.scss
index b5ecf779646927f246405bc7bebeb59aaeef4310..685e7c6ca8fb5079a1b687b4bae7a2e49bb83366 100644 (file)
--- a/templates/project/scss/_settings.scss
+++ b/templates/project/scss/_settings.scss
@@ -101,6 +101,8 @@
 // $topBarLinkWeight: bold;
 // $topBarLinkSize: ms(0) - 1;
 // $topBarDropToggleSize: 5px;
+// $topBarDropToggleColor: #fff;
+// $topBarDropToggleAlpha: 0.5;
 // $topBarSearchWidth: 200px;
 // $topBarBreakPoint: 940px; // Change to 9999px for always mobile layout
-// $topBarNavToggleSize: 8px;
\ No newline at end of file
+// $topBarNavToggleSize: 8px;