From 9971077fbf87e55209050925405578b59b9b42ef Mon Sep 17 00:00:00 2001
From: Juveniel <dimitar.kalaydzhievv@gmail.com>
Date: Wed, 11 Aug 2021 09:47:21 +0300
Subject: [PATCH] feat(pager): add focusable styles to component

---
 packages/bootstrap/scss/pager/_variables.scss | 3 +++
 packages/classic/scss/pager/_variables.scss   | 3 +++
 packages/default/scss/pager/_theme.scss       | 5 +++++
 packages/default/scss/pager/_variables.scss   | 3 +++
 packages/material/scss/pager/_variables.scss  | 3 +++
 5 files changed, 17 insertions(+)

diff --git a/packages/bootstrap/scss/pager/_variables.scss b/packages/bootstrap/scss/pager/_variables.scss
index ed7f62bb6c7..fd797723f26 100644
--- 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
index d1ba34bdaba..f7d00a78fbd 100644
--- 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
index ec387fc80cf..5924a182501 100644
--- 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
index d1ba34bdaba..f7d00a78fbd 100644
--- 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
index e98916a0294..8a304011641 100644
--- 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;