MINOR: add success btn ton BIMDataButton component (#146)

bimdata · Dec 22, 2021 · fdfd961 · fdfd961
1 parent be7f387
commit fdfd961
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/BIMDataComponents/BIMDataButton/_BIMDataButton.scss b/src/BIMDataComponents/BIMDataButton/_BIMDataButton.scss
@@ -76,6 +76,14 @@
         background-color: var(--color-high-light);
       }
     }
+    /* style BIMDATA BTN GREEN FILL ------------- */
+    &--success {
+      background-color: var(--color-success);
+      color: var(--color-white);
+      &:hover {
+        background-color: var(--color-success-light);
+      }
+    }
     /* style BIMDATA BTN FILL BTN ICON --------- */
     &--btn-icon {
       svg {
@@ -161,6 +169,20 @@
         transition: background 0s;
       }
     }
+    &--success {
+      background-color: var(--color-success);
+      color: var(--color-white);
+      &:hover {
+        background: var(--color-success)
+          radial-gradient(circle, transparent 1%, var(--color-success) 1%)
+          center/15000%;
+      }
+      &:active {
+        background-color: var(--color-success-light);
+        background-size: 100%;
+        transition: background 0s;
+      }
+    }
   }
   &__outline {
     justify-content: center;
@@ -200,6 +222,13 @@
         background-color: var(--color-high-lighter);
       }
     }
+    &--success {
+      border-color: var(--color-success);
+      color: var(--color-success);
+      &:hover {
+        background-color: var(--color-success-lighter);
+      }
+    }
     &:disabled {
       border-color: var(--color-silver-dark);
       color: var(--color-silver-dark);
@@ -242,6 +271,12 @@
         background-color: var(--color-high-lighter);
       }
     }
+    &--success {
+      color: var(--color-success);
+      &:hover {
+        background-color: var(--color-success-lighter);
+      }
+    }
     &:disabled {
       color: var(--color-silver-dark);
       cursor: auto;

diff --git a/src/assets/colors.js b/src/assets/colors.js
@@ -3,5 +3,6 @@ export default Object.freeze([
   "primary",
   "secondary",
   "high",
+  "success",
   "granite",
 ]);
diff --git a/src/assets/css/_BIMDataVariables.css b/src/assets/css/_BIMDataVariables.css
@@ -32,9 +32,9 @@ html {
   /* --------------------------------
   color SUCCESS & VARIANTS -------------------------------- */
   --color-success-lighter: rgba(226, 255, 239, 1);
-  --color-success-light: rgba(0, 226, 102, 1);
+  --color-success-light: rgba(0, 200, 92, 1);
   --color-success: rgba(0, 175, 80, 1);
-  --color-success-dark: rgba(0, 124, 56, 1);
+  --color-success-dark: rgba(0, 149, 68, 1);
 
   /* --------------------------------
   color WARNING & VARIANTS -------------------------------- */

diff --git a/src/assets/scss/_BIMDataVariables.scss b/src/assets/scss/_BIMDataVariables.scss
@@ -73,9 +73,9 @@ html {
   /* --------------------------------
   color SUCCESS & VARIANTS -------------------------------- */
   --color-success-lighter: rgba(226, 255, 239, 1);
-  --color-success-light: rgba(0, 226, 102, 1);
+  --color-success-light: rgba(0, 200, 92, 1);
   --color-success: rgba(0, 175, 80, 1);
-  --color-success-dark: rgba(0, 124, 56, 1);
+  --color-success-dark: rgba(0, 149, 68, 1);
 
   /* --------------------------------
   color WARNING & VARIANTS -------------------------------- */