fix(style): fixed button disabled styles

zepdev · Apr 24, 2019 · 0af8cb5 · 0af8cb5
1 parent 125b06e
commit 0af8cb5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 11 deletions.
diff --git a/src/elements/button/_button.scss b/src/elements/button/_button.scss
@@ -29,12 +29,18 @@
         background-color: themed('hover');
       }
     }
-
     &:disabled,
     &.#{$prefix}button-primary--disabled {
       color: get('colors.gray.disabled.hex');
       background-color: get('colors.gray.grayLighter.hex');
       cursor: not-allowed;
+
+      &:hover,
+      &:focus,
+      &.#{$prefix}button-primary--hover {
+        color: get('colors.gray.disabled.hex');
+        background-color: get('colors.gray.grayLighter.hex');
+      }
     }
   }
 
@@ -55,17 +61,25 @@
         color: themed('buttonTextSecondaryHover');
       }
     }
-  }
 
-  &:disabled,
-  &.#{$prefix}button-secondary--disabled {
-    color: get('colors.gray.grayLighter.hex');
-    background-color: get('colors.gray.white.hex');
-    border-color: get('colors.gray.grayLighter.hex');
-    cursor: not-allowed;
+    &:disabled,
+    &.#{$prefix}button-secondary--disabled {
+      color: get('colors.gray.grayLighter.hex');
+      background-color: get('colors.gray.white.hex');
+      border-color: get('colors.gray.grayLighter.hex');
+      cursor: not-allowed;
+
+      &:hover,
+      &:focus,
+      &.#{$prefix}button-secondary--hover {
+        color: get('colors.gray.grayLighter.hex');
+        background-color: get('colors.gray.white.hex');
+        border-color: get('colors.gray.grayLighter.hex');
+      }
+    }
   }
 
-  &.#{$prefix}button--number-input {
+  .#{$prefix}button--number-input {
     background-color: get('colors.gray.grayLighter.hex');
     padding: 0;
     width: 3rem;

diff --git a/src/elements/button/buttonData.js b/src/elements/button/buttonData.js
@@ -42,13 +42,13 @@ const buttonData = {
   },
   catSecondary: {
     name: 'secondary',
-    js: `<div class="theme-cat" style="margin-bottom: 10px;"><a type="button" class="${
+    js: `<div class="theme-cat" style="margin-bottom: 10px;"><button class="${
       helpers.classPrefix
     }button ${helpers.classPrefix}button-secondary" ${
       helpers.htmlDataVarType
     }="button"><span class="${
       helpers.classPrefix
-    }button__text">Cat Secondary</span></a></div>`,
+    }button__text">Cat Secondary</span></button></div>`,
     react: false,
     angular: false,
     vue: false