@clayui/css 3.103.1 → 3.104.0

package/src/scss/components/_date-picker.scss

@@ -1,7 +1,15 @@
 .date-picker {
+	.input-group-item {
+		@include clay-input-group-item-variant($date-picker-input-group-item);
+	}
+
 	.input-group-text {
 		@include clay-input-group-text-variant($date-picker-input-group-text);
 	}
+
+	.clay-time .form-control {
+		@include clay-form-control-variant($date-picker-input-form-control);
+	}
 }
 
 // Date Picker Dropdown Menu
@@ -35,8 +43,8 @@
 .date-picker-nav-item {
 	align-items: center;
 	display: flex;
-	padding-left: 0.25rem;
-	padding-right: 0.25rem;
+	padding-left: 0.125rem;
+	padding-right: 0.125rem;
 }
 
 .date-picker-nav-item-expand {
@@ -56,14 +64,62 @@
 
 .date-picker-calendar-header {
 	@include clay-css($date-picker-calendar-header-container);
+
+	$_media-breakpoint-down: map-get(
+		$date-picker-calendar-header-container,
+		media-breakpoint-down
+	);
+	$_media-breakpoint-up: map-get(
+		$date-picker-calendar-header-container,
+		media-breakpoint-up
+	);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints(
+			$date-picker-calendar-header-container,
+			'clay-css'
+		);
+	}
 }
 
 .date-picker-calendar-body {
 	@include clay-css($date-picker-calendar-body-container);
+
+	$_media-breakpoint-down: map-get(
+		$date-picker-calendar-body-container,
+		media-breakpoint-down
+	);
+	$_media-breakpoint-up: map-get(
+		$date-picker-calendar-body-container,
+		media-breakpoint-up
+	);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints(
+			$date-picker-calendar-body-container,
+			'clay-css'
+		);
+	}
 }
 
 .date-picker-calendar-footer {
 	@include clay-css($date-picker-calendar-footer-container);
+
+	$_media-breakpoint-down: map-get(
+		$date-picker-calendar-footer-container,
+		media-breakpoint-down
+	);
+	$_media-breakpoint-up: map-get(
+		$date-picker-calendar-footer-container,
+		media-breakpoint-up
+	);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints(
+			$date-picker-calendar-footer-container,
+			'clay-css'
+		);
+	}
 }
 
 .date-picker-calendar-item {
@@ -100,6 +156,13 @@
 	&.c-selected-end {
 		@include clay-css(map-get($date-picker-col, c-selected-end));
 	}
+
+	$_media-breakpoint-down: map-get($date-picker-col, media-breakpoint-down);
+	$_media-breakpoint-up: map-get($date-picker-col, media-breakpoint-up);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints($date-picker-col);
+	}
 }
 
 .date-picker-days-row {

package/src/scss/mixins/_buttons.scss

@@ -991,6 +991,16 @@
 			.loading-animation {
 				@extend %#{$loading-animation} !optional;
 			}
+
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-button-variant'
+				);
+			}
 		}
 	}
 }

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

@@ -206,6 +206,16 @@
 			.inline-scroller {
 				@include clay-css(map-get($map, inline-scroller));
 			}
+
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-dropdown-menu-variant'
+				);
+			}
 		}
 	}
 }

package/src/scss/mixins/_forms.scss

@@ -919,9 +919,21 @@
 			)
 		);
 
+		$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+		$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+		$mobile: setter(map-get($map, mobile), ());
+
 		@if ($enabled) {
 			@include clay-css($base);
 
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-select-variant'
+				);
+			}
+
 			&:hover,
 			&.hover {
 				@include clay-css($hover);

package/src/scss/mixins/_grid.scss

@@ -119,6 +119,13 @@
 
 @mixin clay-row($map) {
 	@include clay-css($map);
+
+	$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+	$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+	@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+		@include clay-generate-media-breakpoints($map, 'clay-css');
+	}
 }
 
 @mixin clay-custom-grid-columns($map) {
@@ -193,7 +200,7 @@
 /// A mixin that generates media-breakpoint-{up|down} styles from a Sass map.
 /// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin
 
-@mixin clay-generate-media-breakpoints($map) {
+@mixin clay-generate-media-breakpoints($map, $mixin: 'clay-css') {
 	@if (type-of($map) == 'map') {
 		@if (map-get($map, media-breakpoint-up)) {
 			$media-breakpoint-up: map-get($map, media-breakpoint-up);
@@ -202,7 +209,21 @@
 				$breakpoint-up: map-get($media-breakpoint-up, $breakpoint);
 
 				@include media-breakpoint-up($breakpoint) {
-					@include clay-css($breakpoint-up);
+					@if ($mixin == 'clay-css') {
+						@include clay-css($breakpoint-up);
+					} @else if ($mixin == 'clay-button-variant') {
+						@include clay-button-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-input-group-variant') {
+						@include clay-input-group-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-input-group-text-variant') {
+						@include clay-input-group-text-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-dropdown-menu-variant') {
+						@include clay-dropdown-menu-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-menubar-vertical-variant') {
+						@include clay-menubar-vertical-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-select-variant') {
+						@include clay-select-variant($breakpoint-up);
+					}
 				}
 			}
 		}
@@ -214,7 +235,25 @@
 				$breakpoint-down: map-get($media-breakpoint-down, $breakpoint);
 
 				@include media-breakpoint-down($breakpoint) {
-					@include clay-css($breakpoint-down);
+					@if ($mixin == 'clay-css') {
+						@include clay-css($breakpoint-down);
+					} @else if ($mixin == 'clay-button-variant') {
+						@include clay-button-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-input-group-variant') {
+						@include clay-input-group-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-input-group-text-variant') {
+						@include clay-input-group-text-variant(
+							$breakpoint-down
+						);
+					} @else if ($mixin == 'clay-dropdown-menu-variant') {
+						@include clay-dropdown-menu-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-menubar-vertical-variant') {
+						@include clay-menubar-vertical-variant(
+							$breakpoint-down
+						);
+					} @else if ($mixin == 'clay-select-variant') {
+						@include clay-select-variant($breakpoint-down);
+					}
 				}
 			}
 		}

package/src/scss/mixins/_input-groups.scss

@@ -189,24 +189,14 @@
 				@include clay-css(map-deep-get($map, lexicon-icon));
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
-						$breakpoint
-					);
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-					@if ($breakpoint) {
-						@include media-breakpoint-down($breakpoint) {
-							@include clay-input-group-text-variant(
-								$media-breakpoint-down
-							);
-						}
-					}
-				}
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-input-group-text-variant'
+				);
 			}
 		}
 	}
@@ -495,24 +485,14 @@
 				@include clay-button-variant(map-deep-get($map, btn-unstyled));
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
-						$breakpoint
-					);
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-					@if ($breakpoint) {
-						@include media-breakpoint-down($breakpoint) {
-							@include clay-input-group-variant(
-								$media-breakpoint-down
-							);
-						}
-					}
-				}
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-input-group-variant'
+				);
 			}
 		}
 	}

package/src/scss/mixins/_menubar.scss

@@ -379,44 +379,14 @@
 				}
 			}
 
-			@if (map-get($map, media-breakpoint-down)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-down))
-				{
-					$media-breakpoint-down: map-deep-get(
-						$map,
-						media-breakpoint-down,
-						$breakpoint
-					);
-
-					@if ($breakpoint) {
-						@include media-breakpoint-down($breakpoint) {
-							@include clay-menubar-vertical-variant(
-								$media-breakpoint-down
-							);
-						}
-					}
-				}
-			}
-
-			@if (map-get($map, media-breakpoint-up)) {
-				@each $breakpoint
-					in map-keys(map-get($map, media-breakpoint-up))
-				{
-					$media-breakpoint-up: map-deep-get(
-						$map,
-						media-breakpoint-up,
-						$breakpoint
-					);
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-					@if ($breakpoint) {
-						@include media-breakpoint-up($breakpoint) {
-							@include clay-menubar-vertical-variant(
-								$media-breakpoint-up
-							);
-						}
-					}
-				}
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-menubar-vertical-variant'
+				);
 			}
 		} @else {
 			.menubar-collapse {
@@ -972,41 +942,14 @@
 			}
 		}
 
-		@if (map-get($map, media-breakpoint-down)) {
-			@each $breakpoint in map-keys(map-get($map, media-breakpoint-down))
-			{
-				$media-breakpoint-down: map-deep-get(
-					$map,
-					media-breakpoint-down,
-					$breakpoint
-				);
+		$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+		$_media-breakpoint-up: map-get($map, media-breakpoint-up);
 
-				@if ($breakpoint) {
-					@include media-breakpoint-down($breakpoint) {
-						@include clay-menubar-vertical-variant(
-							$media-breakpoint-down
-						);
-					}
-				}
-			}
-		}
-
-		@if (map-get($map, media-breakpoint-up)) {
-			@each $breakpoint in map-keys(map-get($map, media-breakpoint-up)) {
-				$media-breakpoint-up: map-deep-get(
-					$map,
-					media-breakpoint-up,
-					$breakpoint
-				);
-
-				@if ($breakpoint) {
-					@include media-breakpoint-up($breakpoint) {
-						@include clay-menubar-vertical-variant(
-							$media-breakpoint-up
-						);
-					}
-				}
-			}
+		@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+			@include clay-generate-media-breakpoints(
+				$map,
+				'clay-menubar-vertical-variant'
+			);
 		}
 	}
 }

package/src/scss/variables/_breadcrumbs.scss

@@ -138,3 +138,13 @@ $breadcrumb-link: map-deep-merge(
 	),
 	$breadcrumb-link
 );
+
+// Breadcrumb Item Expand
+
+$breadcrumb-toggle: () !default;
+$breadcrumb-toggle: map-merge(
+	(
+		color: $breadcrumb-link-color,
+	),
+	$breadcrumb-toggle
+);

package/src/scss/variables/_date-picker.scss

@@ -10,6 +10,14 @@ $date-picker-dropdown-menu: map-deep-merge(
 		padding-right: 0,
 		padding-top: 0,
 		width: 100%,
+		media-breakpoint-down: (
+			xs: (
+				font-size: 0.75rem,
+				margin: 0,
+				max-height: 255px,
+				max-width: 264px,
+			),
+		),
 	),
 	$date-picker-dropdown-menu
 );
@@ -20,8 +28,8 @@ $date-picker-nav-row: () !default;
 $date-picker-nav-row: map-deep-merge(
 	(
 		display: flex,
-		margin-left: -0.25rem,
-		margin-right: -0.25rem,
+		margin-left: -0.125rem,
+		margin-right: -0.125rem,
 	),
 	$date-picker-nav-row
 );
@@ -51,12 +59,34 @@ $date-picker-nav-btn-monospaced: () !default;
 $date-picker-nav-btn-monospaced: map-deep-merge(
 	(
 		margin-bottom: 0,
+		margin-left: 0.125rem,
+		margin-right: 0.125rem,
 		margin-top: 0,
+		media-breakpoint-down: (
+			xs: (
+				font-size: 0.75rem,
+				height: 1.5rem,
+				max-height: 1.5rem,
+				max-width: 1.5rem,
+				min-width: 1.5rem,
+			),
+		),
 	),
 	$date-picker-nav-btn-monospaced
 );
 
 $date-picker-nav-select: () !default;
+$date-picker-nav-select: map-deep-merge(
+	(
+		media-breakpoint-down: (
+			xs: (
+				font-size: 0.75rem,
+				height: 1.5rem,
+			),
+		),
+	),
+	$date-picker-nav-select
+);
 
 // Date Picker Row
 
@@ -69,6 +99,12 @@ $date-picker-row: map-deep-merge(
 		margin-bottom: 0.5rem,
 		margin-top: 0.5rem,
 		padding: 0,
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: 0.25rem,
+				margin-top: 0.25rem,
+			),
+		),
 	),
 	$date-picker-row
 );
@@ -76,8 +112,9 @@ $date-picker-row: map-deep-merge(
 $date-picker-col: () !default;
 $date-picker-col: map-deep-merge(
 	(
-		padding-left: 0.5rem,
-		padding-right: 0.5rem,
+		display: flex,
+		flex-grow: 1,
+		justify-content: center,
 		c-selected: (
 			background-image: linear-gradient($primary-l3, $primary-l3),
 			background-repeat: no-repeat,
@@ -107,6 +144,11 @@ $date-picker-days-row: map-deep-merge(
 	(
 		margin-bottom: 1rem,
 		margin-top: 0,
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: 0.25rem,
+			),
+		),
 	),
 	$date-picker-days-row
 );
@@ -141,6 +183,14 @@ $date-picker-calendar-header-container: map-merge(
 		padding-left: 1rem,
 		padding-right: 1rem,
 		padding-top: 1rem,
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom: 0.25rem,
+				padding-left: 0.375rem,
+				padding-right: 0.375rem,
+				padding-top: 0.5rem,
+			),
+		),
 	),
 	$date-picker-calendar-header-container
 );
@@ -148,9 +198,16 @@ $date-picker-calendar-header-container: map-merge(
 $date-picker-calendar-body-container: () !default;
 $date-picker-calendar-body-container: map-merge(
 	(
-		padding-left: 1rem,
-		padding-right: 1rem,
+		padding-left: 0.5rem,
+		padding-right: 0.5rem,
 		padding-bottom: 0.5rem,
+		media-breakpoint-down: (
+			xs: (
+				padding-left: 0.375rem,
+				padding-right: 0.375rem,
+				padding-bottom: 0.25rem,
+			),
+		),
 	),
 	$date-picker-calendar-body-container
 );
@@ -161,10 +218,17 @@ $date-picker-calendar-footer-container: map-merge(
 		border-color: $gray-400,
 		border-style: solid,
 		border-width: 1px 0 0 0,
-		padding-bottom: 1rem,
-		padding-left: 1.5rem,
-		padding-right: 1.5rem,
-		padding-top: 1rem,
+		padding-bottom: 0.5rem,
+		padding-left: 0.875rem,
+		padding-right: 0.875rem,
+		padding-top: 0.5rem,
+		media-breakpoint-down: (
+			xs: (
+				padding-left: 0.375rem,
+				padding-right: 0.375rem,
+				padding-top: 0.4375rem,
+			),
+		),
 	),
 	$date-picker-calendar-footer-container
 );
@@ -196,6 +260,12 @@ $date-picker-calendar-item: map-deep-merge(
 		vertical-align: middle,
 		white-space: nowrap,
 		width: 2rem,
+		media-breakpoint-down: (
+			xs: (
+				height: 1.5rem,
+				width: 1.5rem,
+			),
+		),
 	),
 	$date-picker-calendar-item
 );
@@ -259,6 +329,14 @@ $date-picker-next-month-date: map-deep-merge(
 
 // Date Picker Input Group
 
+$date-picker-input-group-item: () !default;
+$date-picker-input-group-item: map-deep-merge(
+	(
+		margin-left: 0.125rem,
+	),
+	$date-picker-input-group-item
+);
+
 $date-picker-input-group-text: () !default;
 $date-picker-input-group-text: map-deep-merge(
 	(
@@ -268,6 +346,33 @@ $date-picker-input-group-text: map-deep-merge(
 		min-width: 2rem,
 		padding-left: 0.25rem,
 		padding-right: 0.25rem,
+		media-breakpoint-down: (
+			xs: (
+				font-size: inherit,
+				height: $input-height-sm,
+				min-width: 1.5rem,
+			),
+		),
 	),
 	$date-picker-input-group-text
 );
+
+$date-picker-input-form-control: () !default;
+$date-picker-input-form-control: map-deep-merge(
+	(
+		media-breakpoint-down: (
+			xs: (
+				border-radius: clay-enable-rounded($input-border-radius-sm),
+				font-size: $input-font-size-sm,
+				height: $input-height-sm,
+				line-height: $input-line-height-sm,
+				min-height: $input-height-sm,
+				padding-bottom: $input-padding-y-sm,
+				padding-left: $input-padding-x-sm,
+				padding-right: $input-padding-x-sm,
+				padding-top: $input-padding-y-sm,
+			),
+		),
+	),
+	$date-picker-input-form-control
+);

package/src/scss/variables/_time.scss

@@ -31,6 +31,7 @@ $clay-time-form-control-inset: () !default;
 $clay-time-form-control-inset: map-deep-merge(
 	(
 		margin-bottom: 0,
+		margin-left: 0,
 		margin-top: 0,
 		text-align: center,
 		width: 1.25rem,