Fix inverse button styles

Inverse (light) button had wrong text colour after recent updates.
nice-digital · Oct 31, 2017 · d32e5a6 · d32e5a6
1 parent cc4e39f
commit d32e5a6
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 18 deletions.
diff --git a/server/views/components/panels.njk b/server/views/components/panels.njk
@@ -22,7 +22,7 @@
 				Some <a href="#">text</a> content
 			</p>
 			<p>
-				<a href="#" class="btn btn--light">A light button</a>
+				<a href="#" class="btn btn--inverse">An inverse button</a>
 			</p>
 		</div>
 

diff --git a/src/components/buttons/_buttons.scss b/src/components/buttons/_buttons.scss
@@ -37,7 +37,7 @@
   &:focus {
     @include default-focus-style;
     background: $colour-btn-primary;
-    border-color: $colour-focus;
+    border-color: $colour-focus-inverse;
     color: $colour-btn-primary-text;
   }
 
@@ -112,27 +112,27 @@
   }
 }
 
-/// Light button, for use on dark panels/sections
+/// Inverse (light) button, for use on inverse (dark) panels/sections
 /// @since 0.2.0
-.btn--light {
-  background: $colour-btn-light;
-  border: em(1px) solid $colour-btn-light-text;
-  color: $colour-btn-light-text;
+.btn--inverse {
+  background: $colour-btn-inverse;
+  border: em(1px) solid $colour-btn-inverse-text;
+  color: $colour-btn-inverse-text !important; // sass-lint:disable-line no-important
 
   &:visited {
-    color: $colour-btn-light-text;
+    color: $colour-btn-inverse-text;
   }
 
   &:hover {
-    background: $colour-btn-light-hover;
-    color: $colour-btn-light-text;
+    background: $colour-btn-inverse-hover;
+    color: $colour-btn-inverse-text;
   }
 
   &:focus {
-    background: $colour-btn-light-hover;
+    background: $colour-btn-inverse-hover;
   }
 
   &:active {
-    background: $colour-btn-light-hover;
+    background: $colour-btn-inverse-hover;
   }
 }
diff --git a/src/stylesheets/settings/_settings-colours-semantic.scss b/src/stylesheets/settings/_settings-colours-semantic.scss
@@ -138,17 +138,17 @@ $colour-btn-secondary-text: $colour-nice-white;
 
 // LIGHT BUTTONS
 
-/// Light button background colour
+/// Inverse (light) button background colour
 /// @since 0.2.2
-$colour-btn-light: $colour-nice-white;
+$colour-btn-inverse: $colour-nice-white;
 
-/// Light button hover colour
+/// Inverse (light) button hover colour
 /// @since 0.2.2
-$colour-btn-light-hover: $colour-nice-grey-3;
+$colour-btn-inverse-hover: $colour-nice-grey-3;
 
-/// Light button text colour
+/// Inverse (light) button text colour
 /// @since 0.2.2
-$colour-btn-light-text: $colour-nice-rich-black;
+$colour-btn-inverse-text: $colour-nice-rich-black;
 
 
 // BACKGROUNDS/BORDERS