Fixes: #1270 - (ClayCSS) Deprecated $clay-unset and don't use varia…

…ble resets because it isn't in the Sass spec Fixes: #1270 - (ClayCSS) Add missing semi colon in Sheet variable Fixes: #1270 - (ClayCSS) Mixin `clay-custom-grid-columns` base Sass map is being overwritten in Ruby/Dart Sass Fixes: #1270 - (ClayCSS) Dart Sass no longer supports extending compound selectors e.g. `.primary.focus` added placeholders `%btn-*-focus` and `%btn-outline-*-focus`
liferay · Nov 19, 2018 · 56e5082 · 56e5082
1 parent 53c87a8
commit 56e5082
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 24 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_alerts.scss b/packages/clay-css/src/scss/atlas/variables/_alerts.scss
@@ -15,7 +15,7 @@ $alert-link-decoration: underline !default;
 $alert-link-hover-decoration: none !default;
 $alert-link-font-weight: $font-weight-semi-bold !default;
 
-$alert-indicator-font-size: !default;
+$alert-indicator-font-size: inherit !default;
 
 $alert-title: () !default;
 $alert-title: map-merge((

diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -1,4 +1,8 @@
-$clay-unset: !default;
+// $clay-unset is deprecated as of v2.4.1 we will not support unsetting
+// variables in version 2 because it violates the Sass spec. If you
+// are using libsass you can still unset variables with the syntax
+// `$my-var: !default;`.
+$clay-unset: clay-unset !default;
 $clay-unset-placeholder: clay-unset-placeholder !default;
 
 $atlas-theme: true !default;

diff --git a/packages/clay-css/src/scss/atlas/variables/_list-group.scss b/packages/clay-css/src/scss/atlas/variables/_list-group.scss
@@ -3,7 +3,7 @@ $list-group-color: $secondary !default;
 $list-group-hover-bg: lighten($component-active-bg, 44.90) !default;
 $list-group-active-bg: $list-group-hover-bg !default;
 $list-group-active-border-color: $list-group-border-color !default;
-$list-group-active-color: !default;
+$list-group-active-color: #272833 !default;
 
 $list-group-font-size: 0.875rem !default; // 14px
 $list-group-item-padding-x: 1rem !default; // 16px
@@ -25,7 +25,7 @@ $list-group-header-title: map-merge((
 
 $list-group-title-link: () !default;
 $list-group-title-link: map-merge((
-	hover-color: $clay-unset
+	hover-color: #272833
 ), $list-group-title-link);
 
 $list-group-title: () !default;
@@ -66,6 +66,8 @@ $list-group-subtext: map-merge((
 	line-height: 1.45
 ), $list-group-subtext);
 
+$list-group-subtext-active-color: $secondary !default;
+
 // List Group Link
 
 $list-group-link-color: $body-color !default;

diff --git a/packages/clay-css/src/scss/atlas/variables/_sheets.scss b/packages/clay-css/src/scss/atlas/variables/_sheets.scss
@@ -24,7 +24,7 @@ $sheet-title-margin-bottom-mobile: 1rem !default; // 16px
 
 $sheet-subtitle-color: $body-color !default;
 $sheet-subtitle-border-color: lighten(saturate(adjust-hue($secondary, -3), 5.39), 23.92) !default;
-$sheet-subtitle-font-size: 0.875rem !default // 14px
+$sheet-subtitle-font-size: 0.875rem !default; // 14px
 $sheet-subtitle-padding-y: 0.5rem !default; // 8px
 $sheet-subtitle-margin-bottom-mobile: 1rem !default; // 16px
 

diff --git a/packages/clay-css/src/scss/atlas/variables/_sidebar.scss b/packages/clay-css/src/scss/atlas/variables/_sidebar.scss
@@ -44,12 +44,8 @@ $sidebar-light: map-merge((
 	),
 	dd: (
 		clay-link: (
-			color: $body-color,
-			hover-color: $clay-unset
+			color: $body-color
 		)
-	),
-	sidebar-list-group-title: (
-		font-size: $clay-unset
 	)
 ), $sidebar-light);
 

diff --git a/packages/clay-css/src/scss/components/_buttons.scss b/packages/clay-css/src/scss/components/_buttons.scss
@@ -191,6 +191,13 @@
 	.btn-#{$color} {
 		@include clay-button-variant($value);
 	}
+
+	%btn-#{$color}-focus {
+		background-color: map-get($value, focus-bg);
+		border-color: map-get($value, focus-border-color);
+		box-shadow: map-get($value, focus-box-shadow);
+		color: map-get($value, focus-color);
+	}
 }
 
 // Button Outline Variants
@@ -199,6 +206,13 @@
 	.btn-outline-#{$color} {
 		@include clay-button-variant($value);
 	}
+
+	%btn-outline-#{$color}-focus {
+		background-color: map-get($value, focus-bg);
+		border-color: map-get($value, focus-border-color);
+		box-shadow: map-get($value, focus-box-shadow);
+		color: map-get($value, focus-color);
+	}
 }
 
 .btn-outline-borderless {

diff --git a/packages/clay-css/src/scss/components/_custom-forms.scss b/packages/clay-css/src/scss/components/_custom-forms.scss
@@ -18,31 +18,31 @@
 
 	&:focus {
 		+ .btn-primary {
-			@extend .btn-primary.focus !optional;
+			@extend %btn-primary-focus !optional;
 		}
 
 		+ .btn-secondary {
-			@extend .btn-secondary.focus !optional;
+			@extend %btn-secondary-focus !optional;
 		}
 
 		+ .btn-success {
-			@extend .btn-success.focus !optional;
+			@extend %btn-success-focus !optional;
 		}
 
 		+ .btn-warning {
-			@extend .btn-warning.focus !optional;
+			@extend %btn-warning-focus !optional;
 		}
 
 		+ .btn-danger {
-			@extend .btn-danger.focus !optional;
+			@extend %btn-danger-focus !optional;
 		}
 
 		+ .btn-light {
-			@extend .btn-light.focus !optional;
+			@extend %btn-light-focus !optional;
 		}
 
 		+ .btn-dark {
-			@extend .btn-dark.focus !optional;
+			@extend %btn-dark-focus !optional;
 		}
 
 		+ .input-group {

diff --git a/packages/clay-css/src/scss/mixins/_grid.scss b/packages/clay-css/src/scss/mixins/_grid.scss
@@ -46,10 +46,7 @@
 
 @mixin clay-custom-grid-columns($map) {
 	$custom-grid-props: map-merge((
-		enabled: $enable-grid-classes,
-		base: (
-			breakpoint: 0
-		)
+		enabled: $enable-grid-classes
 	), $map);
 
 	$enabled: map-get($custom-grid-props, enabled);

diff --git a/packages/clay-css/src/scss/mixins/_loaders.scss b/packages/clay-css/src/scss/mixins/_loaders.scss
@@ -9,7 +9,7 @@
 	$animation: setter(map-get($map, animation), 1.2s ease-out infinite);
 	$animation-name: required(
 		map-get($map, animation-name),
-		'The property `animation-name` in `#{$mixin-name}` is required! #{$map}'
+		'The property `animation-name` in `#{$mixin-name}` is required!'
 	);
 
 	$ball-0-scale: setter(map-get($map, ball-0-scale), 0em);

diff --git a/packages/clay-css/src/scss/variables/_bs4-variable-overwrites.scss b/packages/clay-css/src/scss/variables/_bs4-variable-overwrites.scss
@@ -8,7 +8,7 @@ $input-height: 2.375rem !default; // 38px
 $input-height-lg: 3rem !default; // 48px
 $input-height-sm: 1.9375rem !default; // 31px
 
-$form-check-inline-input-margin-x: !default;
+$form-check-inline-input-margin-x: auto !default;
 
 $table-accent-bg: #F2F2F2 !default;
 $table-hover-bg: #ECECEC !default;

diff --git a/packages/clay-css/src/scss/variables/_cards.scss b/packages/clay-css/src/scss/variables/_cards.scss
@@ -93,6 +93,7 @@ $user-card: map-merge((
 $card-page-item-asset: () !default;
 $card-page-item-asset: map-merge((
 	base: (
+		breakpoint: 0,
 		min-width: 200px,
 		padding-left: $grid-gutter-width / 2,
 		padding-right: $grid-gutter-width / 2

diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
@@ -1,4 +1,8 @@
-$clay-unset: !default;
+// $clay-unset is deprecated as of v2.4.1 we will not support unsetting
+// variables in version 2 because it violates the Sass spec. If you
+// are using libsass you can still unset variables with the syntax
+// `$my-var: !default;`.
+$clay-unset: clay-unset !default;
 $clay-unset-placeholder: clay-unset-placeholder !default;
 
 $enable-scaling-components: false !default;