fix(business/button): change font opacity for disabled buttons (#53)

sbb-design-systems · Jun 25, 2019 · 977fb78 · 977fb78
1 parent f373ba3
commit 977fb78
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/projects/sbb-esta/angular-business/src/lib/button/button/button.component.scss b/projects/sbb-esta/angular-business/src/lib/button/button/button.component.scss
@@ -29,4 +29,22 @@
   &:disabled {
     opacity: 0.4;
   }
+
+  &-primary.sbb-button-has-icon:disabled,
+  &-primary:not(.sbb-button-has-icon):disabled,
+  &-alternative.sbb-button-has-icon:disabled,
+  &-alternative:not(.sbb-button-has-icon):disabled {
+    color: rgba($buttonDefaultColor, 0.5);
+  }
+
+  &-secondary.sbb-button-has-icon:disabled,
+  &-secondary:not(.sbb-button-has-icon):disabled,
+  &-icon:disabled {
+    color: rgba($buttonSecondaryColor, 0.5);
+  }
+
+  &-ghost.sbb-button-has-icon,
+  &-ghost:not(.sbb-button-has-icon) {
+    color: rgba($buttonSecondaryColor, 0.4);
+  }
 }
diff --git a/projects/sbb-esta/angular-public/src/lib/button/styles/_button-variables.scss b/projects/sbb-esta/angular-public/src/lib/button/styles/_button-variables.scss
@@ -23,3 +23,8 @@ $buttonGhostBorderColorHover: $sbbColorIron;
 $buttonFramelessColor: $sbbColorIron;
 $buttonFramelessColorHover: $sbbColorRed125;
 $buttonDisabledBorderColor: $sbbColorGreyMedium;
+
+@if $sbbBusiness {
+  $buttonGhostColor: $sbbColorGranite;
+  $buttonGhostBorderColor: $sbbColorGranite;
+}