fix(button): add extra styles for outline button

telerik · Jan 10, 2022 · 8100b97 · 8100b97
1 parent 885cc6f
commit 8100b97
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 12 deletions.
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: 0 0 0 3px rgba( $primary-button-border, .5 ) !de
 
 $button-group-focus-shadow: null !default;
 
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 3px !default;
+$outline-button-shadow-opacity: .5 !default;
+
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;

diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: 0 0 4px 0 rgba( $primary-button-border, .75 ) !d
 
 $button-group-focus-shadow: null !default;
 
+$outline-button-shadow-blur: 4px !default;
+$outline-button-shadow-spread: 0px !default;
+$outline-button-shadow-opacity: .75 !default;
+
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: .12 !default;
 $flat-button-active-opacity: .16 !default;

diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
@@ -256,7 +256,8 @@
     .k-button-outline {
         @include box-shadow( none );
         color: inherit;
-        background: none;
+        background-color: transparent;
+        background-image: none !important; // sass-lint:disable-line no-important
     }
     .k-button.k-outline {
         @extend .k-button-outline;

diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
@@ -176,65 +176,136 @@
         @include box-shadow( none );
         border-color: currentColor;
         color: $button-text;
-        background: none;
+        background-color: transparent;
 
         // Hover state
         &:hover,
         &.k-state-hover {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Focused state
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+            box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $button-text, $outline-button-shadow-opacity );
         }
 
         // Active state
         &:active,
         &.k-state-active {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
 
         // Selected state
         &.k-state-selected {
-            @include fill( contrast-wcag( $button-text ), $button-text, $button-text, none );
+            @include fill(
+                contrast-wcag( $button-text ),
+                $button-text,
+                $button-text
+            );
         }
     }
     .k-button-outline.k-primary {
         border-color: currentColor;
-        color: $primary-button-bg;
+        color: $primary;
         background: none;
         box-shadow: none;
 
         // Hover state
         &:hover,
         &.k-state-hover {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
+            @include fill(
+                contrast-wcag( $primary ),
+                $primary,
+                $primary
+            );
         }
 
         // Focused state
         &:focus,
         &.k-state-focus,
         &.k-state-focused {
-            box-shadow: $primary-button-focused-shadow;
+            box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $primary, $outline-button-shadow-opacity );
         }
 
-        // Actove state
+        // Active state
         &:active,
         &.k-state-active {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
+            @include fill(
+                contrast-wcag( $primary ),
+                $primary,
+                $primary
+            );
             box-shadow: none;
         }
 
         // Selected state
         &.k-state-selected {
-            @include fill( contrast-wcag( $primary-button-bg ), $primary-button-bg, $primary-button-bg, none );
+            @include fill(
+                contrast-wcag( $primary ),
+                $primary,
+                $primary
+            );
             box-shadow: none;
         }
     }
 
+    @each $name, $color in $button-theme-colors {
+        .k-button-outline.k-button-outline-#{$name} {
+            @include box-shadow( none );
+            border-color: currentColor;
+            color: $color;
+            background-color: transparent;
+
+            // Hover state
+            &:hover,
+            &.k-state-hover {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+            }
+
+            // Focused state
+            &:focus,
+            &.k-state-focus,
+            &.k-state-focused {
+                box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $color, $outline-button-shadow-opacity );
+            }
+
+            // Active state
+            &:active,
+            &.k-state-active {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
+
+            // Selected state
+            &.k-state-selected {
+                @include fill(
+                    contrast-wcag( $color ),
+                    $color,
+                    $color
+                );
+                box-shadow: none;
+            }
+        }
+    }
+
 }
 
 

diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: 0 0 0 2px rgba( $primary-button-border, .3 ) !de
 
 $button-group-focus-shadow: inset 0 0 0 2px rgba( $button-border, opacity( $button-border ) * 2 ) !default;
 
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 2px !default;
+$outline-button-shadow-opacity: .3 !default;
+
 $flat-button-hover-opacity: .04 !default;
 $flat-button-focus-opacity: null !default;
 $flat-button-active-opacity: .16 !default;

diff --git a/packages/material/scss/button/_theme.scss b/packages/material/scss/button/_theme.scss
@@ -59,6 +59,28 @@
         }
     }
 
+    @each $name, $color in $button-theme-colors {
+        .k-button-outline.k-button-outline-#{$name} {
+            @include box-shadow( none );
+            color: $color;
+
+            &:hover,
+            &.k-state-hover,
+            &:active,
+            &.k-state-active,
+            &.k-state-selected,
+            &:focus,
+            &.k-state-focus {
+                color: $color;
+            }
+
+            &:disabled,
+            &.k-state-disabled {
+                color: $button-disabled-text;
+            }
+        }
+    }
+
 
     // Clear button
     .k-button-clear,

diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss
@@ -134,6 +134,10 @@ $primary-button-focused-shadow: null !default;
 
 $button-group-focus-shadow: null !default;
 
+$outline-button-shadow-blur: 0px !default;
+$outline-button-shadow-spread: 0px !default;
+$outline-button-shadow-opacity: 0 !default;
+
 $flat-button-hover-opacity: .08 !default;
 $flat-button-focus-opacity: .12 !default;
 $flat-button-active-opacity: .16 !default;