Merge pull request #18 from adidas/bugfix/button-focus-state

Fix button style on focus state
adidas · Mar 28, 2019 · 769589b · 769589b
2 parents fcdaae2 + a1524de
commit 769589b
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 1.5.5
+
+- Fixed button style on focus state.
+
+### [ buttons ]
+
+- Added `.focus` class and `:focus` pseudo-class to button generator with default button values.
+
 ## 1.5.4
 
 - Fixed breadcrumb margin between items.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@adidas/yarn-design-system",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "adidas YARN Design System: toolkit for developing with HTML and CSS",
   "repository": {
     "type": "git",

diff --git a/src/less/mixins/buttons.less b/src/less/mixins/buttons.less
@@ -30,6 +30,24 @@
     color: @active-color;
     box-shadow: @shadow-outset;
     cursor: default;
+
+    &:hover {
+      @media @pointer-query {
+        background-color: @background-color;
+      }
+    }
+  }
+
+  &:focus,
+  &.focus {
+    background-color: @background-color;
+    color: @color;
+
+    &:hover {
+      @media @pointer-query {
+        background-color: @background-color;
+      }
+    }
   }
 
   &:hover {
@@ -57,7 +75,9 @@ when (@background-color = transparent) {
 
 .disable-button-box-shadow() {
   &:active,
-  &.active {
+  &.active,
+  &:focus,
+  &.focus {
     box-shadow: none;
   }