feat(pager): add focusable styles to component

telerik · Aug 12, 2021 · 9971077 · 9971077
1 parent 42bf18e
commit 9971077
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 0 deletions.
diff --git a/packages/bootstrap/scss/pager/_variables.scss b/packages/bootstrap/scss/pager/_variables.scss
@@ -11,6 +11,9 @@ $pager-bg: $header-bg !default;
 $pager-text: $header-text !default;
 $pager-border: $header-border !default;
 
+$pager-focus-bg: null !default;
+$pager-focus-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .08) !default;
+
 $pager-section-spacing: map-get( $spacing, 4 ) !default;
 
 $pager-item-padding-x: $button-padding-y !default;

diff --git a/packages/classic/scss/pager/_variables.scss b/packages/classic/scss/pager/_variables.scss
@@ -11,6 +11,9 @@ $pager-bg: $header-bg !default;
 $pager-text: $header-text !default;
 $pager-border: $component-border !default;
 
+$pager-focus-bg: null !default;
+$pager-focus-shadow: $focused-shadow !default;
+
 $pager-section-spacing: $spacer-x !default;
 
 $pager-item-padding-x: $button-padding-y !default;

diff --git a/packages/default/scss/pager/_theme.scss b/packages/default/scss/pager/_theme.scss
@@ -88,6 +88,11 @@
     }
 
 
+    // Pager Focus
+    .k-pager-focusable {
+        @include fill( $bg: $pager-focus-bg );
+        @include box-shadow( $pager-focus-shadow );
+    }
 
 
     // Responsive

diff --git a/packages/default/scss/pager/_variables.scss b/packages/default/scss/pager/_variables.scss
@@ -11,6 +11,9 @@ $pager-bg: $header-bg !default;
 $pager-text: $header-text !default;
 $pager-border: $component-border !default;
 
+$pager-focus-bg: null !default;
+$pager-focus-shadow: $focused-shadow !default;
+
 $pager-section-spacing: $spacer-x !default;
 
 $pager-item-padding-x: $button-padding-y !default;

diff --git a/packages/material/scss/pager/_variables.scss b/packages/material/scss/pager/_variables.scss
@@ -11,6 +11,9 @@ $pager-bg: $component-bg !default;
 $pager-text: if($theme-type == dark, $light-secondary-text, $dark-secondary-text) !default;
 $pager-border: $component-border !default;
 
+$pager-focus-bg: try-darken( $pager-bg, 7% ) !default;
+$pager-focus-shadow: null !default;
+
 $pager-section-spacing: $pager-padding-x !default;
 
 $pager-item-padding-x: 0px !default;