feat(@clayui/css): Globals adds transition and disabled opacity compo…

…nent variables for easier reuse - `$component-transition` and `$component-disabled-opacity`
liferay · Oct 7, 2022 · 33e7cef · 33e7cef
1 parent 1ac770c
commit 33e7cef
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -264,13 +264,19 @@ $embed-responsive-aspect-ratios: join(
 	$embed-responsive-aspect-ratios
 );
 
+$component-transition: color 0.15s ease-in-out,
+	background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+	box-shadow 0.15s ease-in-out !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;
 
 $component-active-color: #fff !default;
 $component-active-bg: #0b5fff !default;
 
+$component-disabled-opacity: 0.4 !default;
+
 // Cursors
 
 $link-cursor: pointer !default;

diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
@@ -258,12 +258,18 @@ $embed-responsive-aspect-ratios: join(
 	$embed-responsive-aspect-ratios
 );
 
+$component-transition: color 0.15s ease-in-out,
+	background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+	box-shadow 0.15s ease-in-out !default;
+
 $component-focus-box-shadow: 0 0 0 0.2rem rgba($primary, 0.25) !default;
 $component-focus-inset-box-shadow: inset 0 0 0 0.2rem rgba($primary, 0.25) !default;
 
 $component-active-color: $white !default;
 $component-active-bg: $primary !default;
 
+$component-disabled-opacity: 0.65 !default;
+
 // Cursors
 
 $link-cursor: pointer !default;