From 5008674bbf39e4f158762a63df0db8a452074d41 Mon Sep 17 00:00:00 2001 From: Patrick Yeo Date: Wed, 26 Feb 2020 15:44:37 -0800 Subject: [PATCH] feat(clay-css): Global Variables add `$component-focus-inset-box-shadow` 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 --- packages/clay-css/src/scss/atlas/variables/_dropdowns.scss | 2 +- packages/clay-css/src/scss/atlas/variables/_globals.scss | 1 + packages/clay-css/src/scss/atlas/variables/_range.scss | 1 - .../clay-css/src/scss/variables/_bs4-variable-overwrites.scss | 1 + packages/clay-css/src/scss/variables/_range.scss | 2 +- 5 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/clay-css/src/scss/atlas/variables/_dropdowns.scss b/packages/clay-css/src/scss/atlas/variables/_dropdowns.scss index b200694ac1..da9a591fed 100644 --- 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 index 1c4cb51b89..cca21465d8 100644 --- 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 index c8df4e1cfe..23f7416b3e 100644 --- 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); \ No newline at end of file diff --git a/packages/clay-css/src/scss/variables/_bs4-variable-overwrites.scss b/packages/clay-css/src/scss/variables/_bs4-variable-overwrites.scss index 659bff8878..619d971e34 100644 --- 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 index 21755badc5..9cb4d12141 100644 --- 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,