feat(adminBar): CRO-97 update admin bar styles

bigcommerce · Apr 28, 2017 · 26133e8 · 26133e8
1 parent 8b4dd3d
commit 26133e8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/assets/js/theme/global/maintenanceMode.js b/assets/js/theme/global/maintenanceMode.js
@@ -32,6 +32,21 @@ export default function (maintenanceMode = {}) {
 
         $('body').addClass('hasAdminBar');
         $('body').prepend($element);
+
+        $('.adminBar-content a').click(attachThemeEditorParams);
+
+        $(window).scroll(() => {
+            const $topBarContainer = $('.adminBar');
+            const scrollTop = $(window).scrollTop();
+
+            if (scrollTop > 15) {
+                if (!$topBarContainer.hasClass('adminBar--scroll')) {
+                    $topBarContainer.addClass('adminBar--scroll');
+                }
+            } else if (scrollTop === 0) {
+                $topBarContainer.removeClass('adminBar--scroll');
+            }
+        });
     } else {
         const $element = $('<div>', {
             id: 'maintenance-notice',

diff --git a/assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss b/assets/scss/components/stencil/maintenanceNotice/_maintenanceNotice.scss
@@ -69,6 +69,11 @@ body.hasAdminBar {
     top: 0;
     width: 100%;
     z-index: 10000;
+
+    &.adminBar--scroll {
+        box-shadow: 0 remCalc(2) remCalc(7) 0 rgba(0, 0, 0, 0.2);
+        transition: all 0.2s ease-in;
+    }
 }
 
 .adminBar-logo {

diff --git a/assets/scss/settings/stencil/maintenanceNotice/_settings.scss b/assets/scss/settings/stencil/maintenanceNotice/_settings.scss
@@ -16,7 +16,7 @@ $maintenanceNotice-header-font-family:  stencilFontFamily("headings-font");
 $maintenanceNotice-header-margin:       0 0 spacing("half");
 
 $adminBar-height:                       46px;
-$adminBar-color:                        #f6f7f9;
+$adminBar-color:                        color("whites", "bright");;
 $adminBar-logo-color:                   #273a8a;
 $adminBar-contentLink-color:            #4b71fc;
 $adminBar-text-color:                   #626568;