fix(button): add extra styles for link button

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

Hide file tree

Showing 8 changed files with 128 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
@@ -138,6 +138,10 @@ $outline-button-shadow-blur: 0px !default;
 $outline-button-shadow-spread: 3px !default;
 $outline-button-shadow-opacity: .5 !default;
 
+$link-button-shadow-blur: 0px !default;
+$link-button-shadow-spread: 3px !default;
+$link-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
@@ -138,6 +138,10 @@ $outline-button-shadow-blur: 4px !default;
 $outline-button-shadow-spread: 0px !default;
 $outline-button-shadow-opacity: .75 !default;
 
+$link-button-shadow-blur: 4px !default;
+$link-button-shadow-spread: 0px !default;
+$link-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
@@ -264,6 +264,21 @@
     }
 
 
+    // Link button
+    .k-button-link {
+        @include box-shadow( none );
+        border-color: transparent !important; // sass-lint:disable-line no-important
+        color: inherit;
+        background-color: transparent !important; // sass-lint:disable-line no-important
+        background-image: none !important; // sass-lint:disable-line no-important
+        text-decoration: none;
+    }
+    .k-button-link:hover,
+    .k-button-link.k-state-hover {
+        text-decoration: underline;
+    }
+
+
     // Clear button
     .k-button-clear {
         border-color: transparent !important; // sass-lint:disable-line no-important

diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
@@ -371,6 +371,71 @@
 
 
 
+@include exports( "link-button/theme" ) {
+
+    .k-button-link.k-button-link-base {
+        @include box-shadow( none );
+        color: $base-text;
+
+        &:hover,
+        &.k-state-hover {
+            color: try-shade( $base-text, 2 );
+        }
+        &:focus,
+        &.k-state-focus {
+            box-shadow: 0 0 $link-button-shadow-blur $link-button-shadow-spread rgba( $base-text, $link-button-shadow-opacity );
+        }
+        &:active,
+        &.k-state-active,
+        &.k-state-selected {
+            color: try-shade( $base-text, 2 );
+        }
+    }
+    .k-button-link.k-button-link-primary {
+        @include box-shadow( none );
+        color: $primary;
+
+        &:hover,
+        &.k-state-hover {
+            color: try-shade( $primary, 2 );
+        }
+        &:focus,
+        &.k-state-focus {
+            box-shadow: 0 0 $link-button-shadow-blur $link-button-shadow-spread rgba( $primary, $link-button-shadow-opacity );
+        }
+        &:active,
+        &.k-state-active,
+        &.k-state-selected {
+            color: try-shade( $primary, 2 );
+        }
+    }
+
+    @each $name, $color in $button-theme-colors {
+        .k-button-link.k-button-link-#{$name} {
+            @include box-shadow( none );
+            color: $color;
+
+            &:hover,
+            &.k-state-hover {
+                color: try-shade( $color, 2 );
+            }
+            &:focus,
+            &.k-state-focus {
+                box-shadow: 0 0 $link-button-shadow-blur $link-button-shadow-spread rgba( $color, $link-button-shadow-opacity );
+            }
+            &:active,
+            &.k-state-active,
+            &.k-state-selected {
+                color: try-shade( $color, 2 );
+            }
+        }
+    }
+
+}
+
+
+
+
 @include exports( "clear-button/theme" ) {
 
     .k-button-clear {

diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
@@ -138,6 +138,10 @@ $outline-button-shadow-blur: 0px !default;
 $outline-button-shadow-spread: 2px !default;
 $outline-button-shadow-opacity: .3 !default;
 
+$link-button-shadow-blur: 0px !default;
+$link-button-shadow-spread: 2px !default;
+$link-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/_layout.scss b/packages/material/scss/button/_layout.scss
@@ -38,6 +38,28 @@
     }
 
 
+    // Link button
+    .k-button.k-button-link {
+
+        &:hover,
+        &.k-state-hover,
+        &:active,
+        &.k-state-active,
+        &.k-state-selected {
+            &::before {
+                opacity: 0;
+            }
+        }
+
+        &:focus,
+        &.k-state-focus {
+            &::before {
+                opacity: $flat-button-focus-opacity;
+            }
+        }
+    }
+
+
     // Clear button
     .k-button-clear,
     .k-button.k-clear {

diff --git a/packages/material/scss/button/_theme.scss b/packages/material/scss/button/_theme.scss
@@ -82,6 +82,16 @@
     }
 
 
+    // Link button
+    .k-button.k-button-link {
+
+        &:disabled,
+        &.k-state-disabled {
+            color: $button-disabled-text;
+        }
+    }
+
+
     // Clear button
     .k-button-clear,
     .k-button.k-clear {

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