fix(button): adjust styles for info

baloise · Feb 21, 2022 · 3a95df1 · 3a95df1
1 parent eb30609
commit 3a95df1
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/packages/components/src/components/bal-button/bal-button.scss b/packages/components/src/components/bal-button/bal-button.scss
@@ -261,8 +261,18 @@ bal-button.is-fullwidth {
   }
 
   &.is-info.is-inverted.is-outlined {
+    svg g,
+    svg path,
+    svg circle {
+      fill: $white;
+    }
+
+    &:focus,
+    &.is-focused,
     &:hover,
-    &.is-hovered {
+    &.is-hovered,
+    &:active,
+    &.is-active {
       color: $white;
       background: darken($blue, 10);
     }
@@ -273,6 +283,12 @@ bal-button.is-fullwidth {
     &.is-hovered {
       color: $white;
       background: $cyan;
+
+      svg g,
+      svg path,
+      svg circle {
+        fill: $white;
+      }
     }
   }
 
@@ -364,15 +380,15 @@ bal-button.is-fullwidth {
 @include mobile() {
   .field.is-grouped {
     flex-wrap: wrap;
-    flex-direction: column-reverse;
+    flex-direction: column;
 
     bal-button.control {
       flex-grow: 1;
       flex-shrink: 1;
       min-width: 100%;
       margin-right: 0 !important;
 
-      &:not(:first-child) {
+      &:not(:last-child) {
         margin-bottom: 8px;
       }
     }

diff --git a/packages/components/src/components/bal-button/bal-button.tsx b/packages/components/src/components/bal-button/bal-button.tsx
@@ -153,6 +153,9 @@ export class Button implements ComponentInterface {
     if (this.outlined && !this.inverted) {
       return false
     }
+    if (this.inverted && this.color === 'info') {
+      return false
+    }
     switch (this.color) {
       case 'primary':
       case 'success':