@clayui/css 3.46.0 → 3.49.0

package/src/scss/mixins/_cards.scss

@@ -5,33 +5,30 @@
 /// A mixin that styles a Card Section (e.g., `.card-header`, `.card-body`, `.card-footer` or `.card-row`). This mixin is used by `clay-card-variant`.
 /// @param {Map} $map - A map of key-value pairs. The keys are defined in the mixin. Example below:
 /// @example
-/// enabled: {Bool},  // Set to false to prevent mixin styles from being output. Default: true
-/// bg: {Color | String | Null},
-/// border-color: {Color | String | List | Null},
-/// border-radius: {Number | String | List | Null},
-/// border-style: {String | List | Null},
-/// border-width: {Number | String | List | Null},
-/// display: {String | Null},
-/// flex-basis: {Number | String | Null},
-/// flex-direction: {String | Null},
-/// flex-grow: {Number | String | Null},
-/// flex-shrink: {Number | String | Null},
-/// flex-wrap: {String | Null},
-/// margin-bottom: {Number | String | Null},
-/// margin-left: {Number | String | Null},
-/// margin-right: {Number | String | Null},
-/// margin-top: {Number | String | Null},
-/// padding-bottom: {Number | String | Null},
-/// padding-left: {Number | String | Null},
-/// padding-right: {Number | String | Null},
-/// padding-top: {Number | String | Null},
-/// text-align: {String | Null},
-/// width: {Number | String | Null},
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .card-section
+/// 	before: (
+/// 		// .card-section::before
+/// 	),
+/// 	after: (
+/// 		// .card-section::after
+/// 	),
+/// 	first-child: (
+/// 		// .card-section:first-child
+/// 	),
+/// 	last-child: (
+/// 		// .card-section:last-child
+/// 	),
+/// 	autofit-col: (
+/// 		// .card-section .autofit-col
+/// 	),
+///
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
+/// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// autofit-col-padding-left: {Number | String | Null},
 /// autofit-col-padding-right: {Number | String | Null},
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-card-section-variant($map) {
 	@if (type-of($map) == 'map') {
@@ -65,6 +62,22 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
 			.autofit-col {
 				@include clay-css($autofit-col);
 			}
@@ -187,6 +200,15 @@
 /// 	aspect-ratio-item-bottom-left: (
 /// 		// .card .aspect-ratio-item-bottom-left
 /// 	),
+/// 	hr: (
+/// 		// .card > hr
+/// 		before: (
+/// 			// .card > hr::before
+/// 		),
+/// 		after: (
+/// 			// .card > hr::after
+/// 		),
+/// 	),
 /// 	sticker: (
 /// 		// .card .sticker
 /// 	),
@@ -844,6 +866,18 @@
 				@include clay-css(map-get($map, aspect-ratio-item-bottom-left));
 			}
 
+			> hr {
+				@include clay-css(map-get($map, hr));
+
+				&::before {
+					@include clay-css(map-deep-get($map, hr, before));
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, hr, after));
+				}
+			}
+
 			.sticker {
 				@include clay-sticker-variant(
 					setter(map-get($map, sticker), ())

package/src/scss/mixins/_dropdown-menu.scss

@@ -20,6 +20,15 @@
 /// 	show: (
 /// 		// .dropdown-menu.show
 /// 	),
+/// 	dropdown-item: (
+/// 		// .dropdown-menu .dropdown-item
+/// 	),
+/// 	alert: (
+/// 		// .dropdown-menu .alert
+/// 	),
+/// 	alert-fluid: (
+/// 		// .dropdown-menu .alert-fluid
+/// 	),
 /// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
@@ -95,6 +104,14 @@
 					map-deep-get($map, dropdown-item)
 				);
 			}
+
+			.alert {
+				@include clay-alert-variant(map-get($map, alert));
+			}
+
+			.alert-fluid {
+				@include clay-alert-variant(map-get($map, alert-fluid));
+			}
 		}
 	}
 }

package/src/scss/mixins/_links.scss

@@ -870,10 +870,30 @@
 			$link: setter(map-get($map, link), ());
 			$link: map-merge($link, $clay-link);
 
+			$href: setter(map-get($map, href), ());
+			$href: map-deep-merge($href, $link);
+
 			@include clay-css($map);
 
-			a {
-				@include clay-link($link);
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
+			&[href],
+			[href] {
+				@include clay-link($href);
 			}
 		}
 	}

package/src/scss/variables/_cards.scss

@@ -19,11 +19,35 @@ $card-spacer-y: 0.75rem !default;
 $card-cap-bg: rgba($black, 0.03) !default;
 $card-cap-color: null !default;
 
+// .card-body
+
 $card-body-padding-bottom: $card-spacer-x !default;
 $card-body-padding-left: $card-spacer-x !default;
 $card-body-padding-right: $card-spacer-x !default;
 $card-body-padding-top: $card-spacer-x !default;
 
+// Enable `flex-grow: 1` for decks and groups so that card blocks take up
+// as much space as possible, ensuring footers are aligned to the bottom.
+
+// `min-height` workaround for the image size bug in IE
+// See: https://github.com/twbs/bootstrap/pull/28855
+
+$card-body: () !default;
+$card-body: map-deep-merge(
+	(
+		color: $card-color,
+		flex: 1 1 auto,
+		min-height: 1px,
+		padding-bottom: $card-body-padding-bottom,
+		padding-left: $card-body-padding-left,
+		padding-right: $card-body-padding-right,
+		padding-top: $card-body-padding-top,
+	),
+	$card-body
+);
+
+// .card-section-header
+
 $card-section-header-color: $gray-600 !default;
 $card-section-header-font-size: 0.75rem !default;
 $card-section-header-font-weight: $font-weight-semi-bold !default;
@@ -32,6 +56,20 @@ $card-section-header-margin-bottom: 1.5rem !default;
 $card-section-header-padding: 0 ($grid-gutter-width * 0.5) !default;
 $card-section-header-text-transform: uppercase !default;
 
+$card-section-header: () !default;
+$card-section-header: map-deep-merge(
+	(
+		color: $card-section-header-color,
+		font-size: $card-section-header-font-size,
+		font-weight: $card-section-header-font-weight,
+		line-height: $card-section-header-line-height,
+		margin-bottom: $card-section-header-margin-bottom,
+		padding: $card-section-header-padding,
+		text-transform: $card-section-header-text-transform,
+	),
+	$card-section-header
+);
+
 /// @deprecated as of v3.x with no replacement
 
 $card-img-overlay-padding: 1.25rem !default;
@@ -130,7 +168,42 @@ $card-aspect-ratio-item-bottom-left: map-deep-merge(
 	$card-aspect-ratio-item-bottom-left
 );
 
-// Card Title
+// min-width, see https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+
+$card: () !default;
+$card: map-deep-merge(
+	(
+		background-color: $card-bg,
+		border-color: $card-border-color,
+		border-radius: clay-enable-rounded($card-border-radius),
+		border-style: $card-border-style,
+		border-width: $card-border-width,
+		box-shadow: clay-enable-shadows($card-box-shadow),
+		display: block,
+		height: $card-height,
+		margin-bottom: $card-margin-bottom,
+		min-width: 0,
+		position: relative,
+		word-wrap: break-word,
+		aspect-ratio: (
+			label: $card-aspect-ratio-label,
+		),
+		aspect-ratio-item-top-left: $card-aspect-ratio-item-top-left,
+		aspect-ratio-item-top-center: $card-aspect-ratio-item-top-center,
+		aspect-ratio-item-top-right: $card-aspect-ratio-item-top-right,
+		aspect-ratio-item-right-middle: $card-aspect-ratio-item-right-middle,
+		aspect-ratio-item-bottom-right: $card-aspect-ratio-item-bottom-right,
+		aspect-ratio-item-bottom-center: $card-aspect-ratio-item-bottom-center,
+		aspect-ratio-item-bottom-left: $card-aspect-ratio-item-bottom-left,
+		hr: (
+			margin-left: 0,
+			margin-right: 0,
+		),
+	),
+	$card
+);
+
+// .card-title
 
 $card-title: () !default;
 $card-title: map-deep-merge(
@@ -151,7 +224,14 @@ $card-title-link: map-deep-merge(
 	$card-title-link
 );
 
-// Card Subtitle
+$card-title: map-deep-merge(
+	$card-title,
+	(
+		href: $card-title-link,
+	)
+);
+
+// .card-subtitle
 
 $card-subtitle: () !default;
 $card-subtitle: map-deep-merge(
@@ -176,7 +256,26 @@ $card-subtitle-link: map-deep-merge(
 	$card-subtitle-link
 );
 
-// Card Link
+$card-subtitle: map-deep-merge(
+	$card-subtitle,
+	(
+		href: $card-subtitle-link,
+	)
+);
+
+// .card-text
+
+$card-text: () !default;
+$card-text: map-deep-merge(
+	(
+		last-child: (
+			margin-bottom: 0,
+		),
+	),
+	$card-text
+);
+
+// .card-link
 
 $card-link: () !default;
 $card-link: map-deep-merge(
@@ -190,13 +289,68 @@ $card-link: map-deep-merge(
 	$card-link
 );
 
-// Card Divider
+// .card-divider
 
 $card-divider-bg: $card-border-color !default;
 $card-divider-height: 1px !default;
 $card-divider-spacer-x: null !default;
 $card-divider-spacer-y: 10px !default;
 
+$card-divider: () !default;
+$card-divider: map-merge(
+	(
+		background-color: $card-divider-bg,
+		height: $card-divider-height,
+		margin-bottom: $card-divider-spacer-y,
+		margin-left: $card-divider-spacer-x,
+		margin-right: $card-divider-spacer-x,
+		margin-top: $card-divider-spacer-y,
+	),
+	$card-divider
+);
+
+// .card-header
+
+// `margin-bottom`, removes the default margin-bottom of <hN> (h1 - h6)
+
+$card-header: () !default;
+$card-header: map-deep-merge(
+	(
+		background-color: $card-cap-bg,
+		border-bottom: $card-border-width solid $card-border-color,
+		color: $card-cap-color,
+		margin-bottom: 0,
+		padding: $card-spacer-y $card-spacer-x,
+		first-child: (
+			border-radius:
+				clay-enable-rounded(
+					$card-inner-border-radius $card-inner-border-radius 0 0
+				),
+		),
+	),
+	$card-header
+);
+
+// .card-footer
+
+$card-footer: () !default;
+$card-footer: map-deep-merge(
+	(
+		background-color: $card-cap-bg,
+		border-top: $card-border-width solid $card-border-color,
+		padding: $card-spacer-y $card-spacer-x,
+		last-child: (
+			border-radius:
+				clay-enable-rounded(
+					0 0 $card-inner-border-radius $card-inner-border-radius
+				),
+		),
+	),
+	$card-footer
+);
+
+// .card.rounded-*
+
 $card-rounded-inner-border-radius: calc(
 	#{$rounded-border-radius} - #{$card-border-width}
 ) !default;

package/src/scss/variables/_custom-forms.scss

@@ -761,8 +761,23 @@ $custom-file-button-bg: $input-group-addon-bg !default;
 
 $custom-file-button-color: $custom-file-color !default;
 
-/// @deprecated as of v3.x with no replacement
+// .custom-file-label::after
 
-$custom-file-text: (
-	en: 'Browse',
-) !default;
+/// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395
+
+$custom-file-label-after-content: unquote("'\\FEFF Browse'") !default;
+
+$custom-file-text: () !default;
+
+/// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457 and https://github.com/sass/sass/issues/1395
+
+$custom-file-text: map-deep-merge(
+	(
+		en: unquote("'\\FEFF Browse'"),
+	),
+	$custom-file-text
+);
+
+/// @deprecated as of v3.x with no replacement. See https://issues.liferay.com/browse/LPS-147457.
+
+$custom-file-text-data-browse: unquote("'\\FEFF' attr(data-browse)") !default;

package/src/scss/variables/_dropdowns.scss

@@ -888,3 +888,48 @@ $dropdown-alert-line-height: normal !default;
 $dropdown-alert-margin: $spacer * 0.5 !default;
 $dropdown-alert-padding-x: $dropdown-header-padding-x !default;
 $dropdown-alert-padding-y: $dropdown-header-padding-y !default;
+
+$dropdown-menu-alert: () !default;
+$dropdown-menu-alert: map-deep-merge(
+	(
+		font-size: $dropdown-alert-font-size,
+		line-height: $dropdown-alert-line-height,
+		margin: $dropdown-alert-margin,
+		padding: $dropdown-alert-padding-y $dropdown-alert-padding-x,
+		first-child: (
+			margin-top: 0,
+		),
+		last-child: (
+			margin-bottom: 0,
+		),
+	),
+	$dropdown-menu-alert
+);
+
+$dropdown-menu-alert-fluid: () !default;
+$dropdown-menu-alert-fluid: map-deep-merge(
+	(
+		margin-left: 0,
+		margin-right: 0,
+		first-child: (
+			margin-top: math-sign($dropdown-padding-y),
+		),
+		last-child: (
+			margin-bottom: math-sign($dropdown-padding-y),
+		),
+	),
+	$dropdown-menu-alert-fluid
+);
+
+$dropdown-menu: map-deep-merge(
+	(
+		alert:
+			map-deep-merge($dropdown-menu-alert, map-get($dropdown-menu, alert)),
+		alert-fluid:
+			map-deep-merge(
+				$dropdown-menu-alert-fluid,
+				map-get($dropdown-menu, alert-fluid)
+			),
+	),
+	$dropdown-menu
+);

package/src/scss/variables/_empty-state.scss

@@ -73,3 +73,26 @@ $c-empty-state-footer: map-deep-merge(
 	),
 	$c-empty-state-footer
 );
+
+// .c-empty-state-sm
+
+$c-empty-state-sm: () !default;
+$c-empty-state-sm: map-deep-merge(
+	(
+		c-empty-state-animation: (
+			margin: 2.5rem auto 2rem,
+			max-width: 268px,
+		),
+		c-empty-state-image: (
+			max-width: 120px,
+		),
+		c-empty-state-title: (
+			font-size: 1rem,
+			line-height: 1.5,
+		),
+		c-empty-state-text: (
+			font-size: 0.875rem,
+		),
+	),
+	$c-empty-state-sm
+);

package/src/scss/variables/_links.scss

@@ -183,7 +183,7 @@ $link-monospaced: map-deep-merge(
 	$link-monospaced
 );
 
-// Component Title
+// .component-title
 
 $component-title: () !default;
 $component-title: map-deep-merge(
@@ -219,7 +219,14 @@ $component-title-link: map-deep-merge(
 	$component-title-link
 );
 
-// Component Subtitle
+$component-title: map-deep-merge(
+	$component-title,
+	(
+		href: $component-title-link,
+	)
+);
+
+// .component-subtitle
 
 $component-subtitle: () !default;
 $component-subtitle: map-deep-merge(
@@ -241,7 +248,14 @@ $component-subtitle-link: map-deep-merge(
 	$component-subtitle-link
 );
 
-// Component Action
+$component-subtitle: map-deep-merge(
+	$component-subtitle,
+	(
+		href: $component-subtitle-link,
+	)
+);
+
+// .component-action
 
 $component-action: () !default;
 $component-action: map-deep-merge(
@@ -286,8 +300,12 @@ $component-action: map-deep-merge(
 	$component-action
 );
 
+// .component-text
+
 $component-text: () !default;
 
+// .component-icon
+
 $component-icon: () !default;
 $component-icon: map-deep-merge(
 	(

package/src/scss/variables/_list-group.scss

@@ -47,6 +47,8 @@ $list-group-header-bg: $list-group-bg !default;
 $list-group-header-padding-x: $list-group-item-padding-x !default;
 $list-group-header-padding-y: $list-group-item-padding-y !default;
 
+// .list-group-header-title
+
 $list-group-header-title: () !default;
 $list-group-header-title: map-deep-merge(
 	(
@@ -58,14 +60,16 @@ $list-group-header-title: map-deep-merge(
 	$list-group-header-title
 );
 
-// List Group Title
+// .list-group-title
 
 $list-group-title-link: () !default;
 $list-group-title-link: map-deep-merge(
 	(
 		color: $gray-900,
 		max-width: 100%,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-title-link
 );
@@ -79,20 +83,22 @@ $list-group-title: map-deep-merge(
 		line-height: $line-height-base,
 		margin-bottom: 0,
 		margin-top: $list-group-item-flex-list-group-title-offset-top,
-		clay-link: $list-group-title-link
+		href: $list-group-title-link
 	),
 	$list-group-title
 );
 
 $list-group-title-active-color: $list-group-active-color !default;
 
-// List Group Subtitle
+// .list-group-subtitle
 
 $list-group-subtitle-link: () !default;
 $list-group-subtitle-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtitle-link
 );
@@ -102,18 +108,20 @@ $list-group-subtitle: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtitle-link,
+		href: $list-group-subtitle-link,
 	),
 	$list-group-subtitle
 );
 
-// List Group Text
+// .list-group-text
 
 $list-group-text-link: () !default;
 $list-group-text-link: map-deep-merge(
 	(
 		color: $gray-900,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-text-link
 );
@@ -123,20 +131,22 @@ $list-group-text: map-deep-merge(
 	(
 		color: $gray-900,
 		margin-bottom: 0,
-		clay-link: $list-group-text-link,
+		href: $list-group-text-link,
 	),
 	$list-group-text
 );
 
 $list-group-text-active-color: $list-group-active-color !default;
 
-// List Group Subtext
+// .list-group-subtext
 
 $list-group-subtext-link: () !default;
 $list-group-subtext-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtext-link
 );
@@ -146,7 +156,7 @@ $list-group-subtext: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtext-link,
+		href: $list-group-subtext-link,
 	),
 	$list-group-subtext
 );

package/src/scss/variables/_multi-step-nav.scss

@@ -28,6 +28,12 @@ $multi-step-icon-focus-color: $multi-step-icon-hover-color !default;
 $multi-step-icon-focus-outline: 0 !default;
 $multi-step-icon-focus-text-decoration: $multi-step-icon-hover-text-decoration !default;
 
+// See https://issues.liferay.com/browse/LPS-147457.
+
+$data-multi-step-icon-before-content: unquote(
+	"'\\FEFF' attr(data-multi-step-icon)"
+) !default;
+
 $multi-step-divider-bg: $gray-200 !default;
 $multi-step-divider-height: 0.25rem !default;
 $multi-step-divider-spacer-x: 0 !default;

package/src/scss/variables/_range.scss

@@ -45,6 +45,8 @@ $clay-range-title: map-deep-merge(
 	$clay-range-title
 );
 
+// `data-label-before-content` and `data-label-after-content`, see https://issues.liferay.com/browse/LPS-147457
+
 $clay-range-input: () !default;
 $clay-range-input: map-deep-merge(
 	(
@@ -92,8 +94,8 @@ $clay-range-input: map-deep-merge(
 		data-label-text-align: center,
 		data-label-top: 0,
 		data-label-width: 1.5rem,
-		data-label-before-content: attr(data-label-min),
-		data-label-after-content: attr(data-label-max),
+		data-label-before-content: unquote("'\\FEFF' attr(data-label-min)"),
+		data-label-after-content: unquote("'\\FEFF' attr(data-label-max)"),
 		data-label-after-right: 0,
 		hover-cursor: $link-cursor,
 		focus-outline: 0,