feat(clay-css): Global Variables add `$component-focus-inset-box-shad…

…ow` for reusable focus inset box-shadows across components feat(clay-css): Use new `$component-focus-inset-box-shadow` variable in `dropdown` and `range` fixes #2954
liferay · Mar 6, 2020 · 5008674 · 5008674
1 parent 9c3e266
commit 5008674
Show file tree

Hide file tree

Showing 5 changed files with 4 additions and 3 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_dropdowns.scss b/packages/clay-css/src/scss/atlas/variables/_dropdowns.scss
@@ -35,7 +35,7 @@ $dropdown-item-base: () !default;
 $dropdown-item-base: map-deep-merge((
 	font-size: inherit,
 	// Weird box-shadow inset with border-radius render in IE https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/12515080/
-	focus-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem $white,
+	focus-box-shadow: $component-focus-inset-box-shadow,
 	focus-outline: 0,
 	focus-text-decoration: none,
 	active-class-c-kbd-inline: (

diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -158,6 +158,7 @@ $component-active-bg: #0B5FFF !default;
 $component-active-color: #FFF !default;
 
 $component-focus-box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1 !default;
+$component-focus-inset-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem $white !default;
 
 // Spacing
 

diff --git a/packages/clay-css/src/scss/atlas/variables/_range.scss b/packages/clay-css/src/scss/atlas/variables/_range.scss
@@ -12,6 +12,5 @@ $clay-range-input: map-deep-merge((
 	track-bg: $gray-200,
 	tooltip-padding: 0.5rem 0.75rem,
 	hover-thumb-bg: $primary-l3,
-	focus-thumb-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem $white,
 	disabled-thumb-bg: $gray-100,
 ), $clay-range-input);
diff --git a/packages/clay-css/src/scss/variables/_bs4-variable-overwrites.scss b/packages/clay-css/src/scss/variables/_bs4-variable-overwrites.scss
@@ -11,6 +11,7 @@ $component-active-bg: $primary !default;
 $input-btn-focus-width: .2rem !default;
 $input-btn-focus-color: rgba($component-active-bg, .25) !default;
 $component-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+$component-focus-inset-box-shadow: inset 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 $input-btn-focus-box-shadow: $component-focus-box-shadow !default;
 
 $enable-caret: false !default;

diff --git a/packages/clay-css/src/scss/variables/_range.scss b/packages/clay-css/src/scss/variables/_range.scss
@@ -84,7 +84,7 @@ $clay-range-input: map-deep-merge((
 	data-label-after-right: 0,
 	hover-cursor: $link-cursor,
 	focus-outline: 0,
-	focus-thumb-box-shadow: inset 0 0 0 0.2rem rgba(0, 123, 255, 0.25),
+	focus-thumb-box-shadow: $component-focus-inset-box-shadow,
 	disabled-color: $clay-range-disabled-color,
 	disabled-cursor: $disabled-cursor,
 	disabled-progress-bg: $primary-l2,