fix: switcher repairs (#1179)

carbon-design-system · Oct 19, 2021 · bed3705 · bed3705 · vercel · Oct 19, 2021
1 parent c142740
commit bed3705
Showing 1 changed file with 25 additions and 22 deletions.
diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
@@ -138,42 +138,45 @@ header.header {
   transition: background-color $duration--fast-02 $carbon--standard-easing;
 }
 
+.header .header-button.switcher-button {
+  background-color: $carbon--gray-100;
+  border: none;
+  border-color: transparent;
+  border-bottom: 1px solid $carbon--gray-80;
+  &:hover {
+    background-color: $carbon--gray-80;
+  }
+  &:active {
+    background-color: #3d3d3d;
+    border-left: 1px solid $ui-05;
+    border-right: 1px solid $ui-05;
+  }
+  &:focus {
+    outline: 2px solid $carbon--white-0;
+    outline-offset: -2px;
+  }
+}
+
 // Switcher button, extra specificity to override Carbon tooltip button styles
 // Hex values used pending shell theming
 .header :global(.bx--tooltip__trigger).header-button.switcher-button {
   &:focus {
     box-shadow: none;
-    border-color: $carbon--white-0;
+    border: none;
+    outline: 2px solid $carbon--white-0;
+    outline-offset: -2px;
   }
 }
 
 .header :global(a.bx--header__menu-item:hover) {
   color: $carbon--white-0;
 }
 
-.header .header-button.switcher-button {
-  &:hover {
-    background-color: $carbon--gray-80;
-  }
-  &:focus,
-  &:focus:active {
-    outline: 2px solid $carbon--white-0;
-    outline-offset: -2px;
-  }
-  &:active {
-    background-color: #3d3d3d;
-    border-left: 2px solid $ui-05;
-    border-right: 2px solid $ui-05;
-  }
-}
-
 .header-button.switcher-button.switcher-button--open {
-  border: 2px solid transparent;
-  border-left: 2px solid $carbon--gray-80;
-  border-bottom: 2px solid $carbon--gray-100;
-  background-color: $carbon--gray-100;
+  border: 1px solid transparent;
+  border-left: 1px solid $carbon--gray-80;
+  border-bottom: 1px solid transparent;
   &:active {
-    border-left: 2px solid $carbon--white-0;
     box-shadow: none;
     border-color: $carbon--white-0;
   }