fix(button): flat buttons should have their own text color

telerik · Jul 22, 2021 · c2bf6a9 · c2bf6a9
1 parent 27debfd
commit c2bf6a9
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 28 deletions.
diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
@@ -221,23 +221,29 @@
     // Flat button and bare
     .k-button-flat {
         border-color: transparent !important; // sass-lint:disable-line no-important
-        color: inherit;
         background: none !important; // sass-lint:disable-line no-important
         box-shadow: none !important; // sass-lint:disable-line no-important
         transition: color .2s ease-in-out;
 
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: inherit;
+        // Overlay background
+        &::before {
+            display: block;
         }
 
-        &::before {
+        // Focus ring
+        &::after {
+            box-shadow: inset 0 0 0 2px currentColor;
             display: block;
         }
+
+        &:focus,
+        &.k-state-focus,
+        &.k-state-focused {
+
+            &::after {
+                opacity: .12;
+            }
+        }
     }
     .k-button.k-flat,
     .k-button.k-bare {

diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
@@ -242,36 +242,26 @@
     // Flat button
     .k-button-flat {
 
-        // Explicitly exclude flat button from button group styling
         &,
-        .k-button-group & {
-            color: inherit;
-            background: none;
-        }
-
-        &::after {
-            display: block;
-        }
-
+        &:hover,
+        &.k-state-hover,
+        &:active,
+        &.k-state-active,
         &:focus,
-        &.k-state-focused,
         &.k-state-focus {
-
-            &::after {
-                box-shadow: inset 0 0 0 2px currentColor;
-                opacity: .12;
-            }
+            color: $body-text;
         }
     }
     .k-button-flat.k-primary {
 
-        // Explicitly exclude flat button from button group styling
         &,
         &:hover,
         &.k-state-hover,
-        .k-button-group & {
+        &:active,
+        &.k-state-active,
+        &:focus,
+        &.k-state-focus {
             color: $primary;
-            background: none;
         }
     }
 

diff --git a/packages/default/scss/window/_layout.scss b/packages/default/scss/window/_layout.scss
@@ -84,6 +84,17 @@
         flex-shrink: 0;
         align-items: center;
         vertical-align: top;
+
+        .k-button-flat {
+            &,
+            &:hover,
+            &.k-state-hover,
+            &:focus,
+            &.k-state-focus,
+            &:active {
+                color: inherit;
+            }
+        }
     }
     .k-window-action {
         flex-shrink: 0;