feat(clay-css): Mixins clay-css adds option to pass in `scrollbar-w…

…idth` for future proofing this property. It's available in Firefox 64+ fix(clay-css) Forms `select[multiple]` and `select[size]` should use `scrollbar-width: thin;` issue #2896
liferay · Mar 6, 2020 · 4fbe1df · 4fbe1df
1 parent 27241af
commit 4fbe1df
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/mixins/_globals.scss b/packages/clay-css/src/scss/mixins/_globals.scss
@@ -204,6 +204,7 @@
 		resize: map-get($map, resize);
 		right: map-get($map, right);
 		scroll-behavior: map-get($map, scroll-behavior);
+		scrollbar-width: map-get($map, scrollbar-width);
 		table-layout: map-get($map, table-layout);
 		text-align: map-get($map, text-align);
 		text-decoration: map-get($map, text-decoration);

diff --git a/packages/clay-css/src/scss/variables/_forms.scss b/packages/clay-css/src/scss/variables/_forms.scss
@@ -348,6 +348,8 @@ $input-select-size: map-deep-merge((
 	background-image: none,
 	padding-left: 0.5rem,
 	padding-right: 0.5rem,
+	// Future proof: if https://github.com/w3c/csswg-drafts/issues/1958 ever gets added
+	scrollbar-width: thin,
 	focus: (
 		background-image: none,
 	),