fix: button styles (#191)

ocean-ds · Oct 1, 2020 · ec0f7b6 · ec0f7b6
1 parent 3b267e9
commit ec0f7b6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 28 deletions.
diff --git a/packages/ocean-components/src/Button/stories/Button.stories.mdx b/packages/ocean-components/src/Button/stories/Button.stories.mdx
@@ -118,7 +118,11 @@ If that's not sufficient, you can check the [implementation of the component](ht
 <Canvas>
   <Story
     name="Playground"
-    args={{ children: 'My Button', blocked: false }}
+    args={{
+      children: 'My Button',
+      blocked: false,
+      disabled: false,
+    }}
     argTypes={{
       children: {
         name: 'children',
@@ -142,6 +146,10 @@ If that's not sufficient, you can check the [implementation of the component](ht
         name: 'blocked',
         control: 'boolean',
       },
+      disabled: {
+        name: 'disabled',
+        control: 'boolean',
+      },
     }}
   >
     {(props) => <Button {...props} />}

diff --git a/packages/ocean-components/src/Button/styles/button.scss b/packages/ocean-components/src/Button/styles/button.scss
@@ -34,6 +34,12 @@
     padding-right: $spacing-inline-md;
   }
 
+  &:disabled {
+    cursor: not-allowed;
+    color: $color-interface-dark-up;
+    background-color: $color-interface-light-down;
+  }
+
   &--primary {
     background-color: $color-brand-primary-pure;
     color: $color-interface-light-pure;
@@ -42,17 +48,12 @@
       background-color: $color-brand-primary-down;
     }
 
-    &:active {
-      background-color: $color-brand-primary-deep;
-    }
-
     &:focus {
       background-color: $color-brand-primary-down;
     }
 
-    &:disabled {
-      background-color: $color-interface-dark-up;
-      background-color: $color-interface-light-down;
+    &:active {
+      background-color: $color-brand-primary-deep;
     }
   }
 
@@ -64,17 +65,12 @@
       background-color: $color-interface-light-down;
     }
 
-    &:active {
-      background-color: $color-interface-dark-up;
-    }
-
     &:focus {
       background-color: $color-interface-light-down;
     }
 
-    &:disabled {
+    &:active {
       background-color: $color-interface-dark-up;
-      background-color: $color-interface-light-down;
     }
   }
 
@@ -86,17 +82,12 @@
       background-color: $color-interface-light-down;
     }
 
-    &:active {
-      background-color: $color-interface-light-deep;
-    }
-
     &:focus {
       background-color: $color-interface-light-down;
     }
 
-    &:disabled {
-      background-color: $color-interface-dark-up;
-      background-color: $color-interface-light-down;
+    &:active {
+      background-color: $color-interface-light-deep;
     }
   }
 
@@ -108,17 +99,12 @@
       background-color: $color-complementary-down;
     }
 
-    &:active {
-      background-color: $color-complementary-deep;
-    }
-
     &:focus {
       background-color: $color-complementary-down;
     }
 
-    &:disabled {
-      background-color: $color-interface-dark-up;
-      background-color: $color-interface-light-down;
+    &:active {
+      background-color: $color-complementary-deep;
     }
   }