@clayui/css 3.103.1 → 3.105.0

package/src/scss/cadmin/components/_input-groups.scss

@@ -82,6 +82,10 @@
 	@include clay-input-group-item-variant($cadmin-input-group-item-shrink);
 }
 
+.input-group-item-focusable {
+	@include clay-input-group-item-variant($cadmin-input-group-item-focusable);
+}
+
 // Input Group Text
 
 .input-group-text {

package/src/scss/cadmin/variables/_breadcrumbs.scss

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

package/src/scss/cadmin/variables/_buttons.scss

@@ -105,9 +105,6 @@ $cadmin-btn: map-deep-merge(
 			font-weight: $cadmin-btn-section-font-weight,
 			line-height: $cadmin-btn-section-line-height,
 		),
-		lexicon-icon: (
-			font-size: 16px,
-		),
 	),
 	$cadmin-btn
 );

package/src/scss/cadmin/variables/_clay-color.scss

@@ -37,7 +37,7 @@ $cadmin-clay-color-input-group-inset-item-before: map-merge(
 $cadmin-clay-color-dropdown-menu: () !default;
 $cadmin-clay-color-dropdown-menu: map-deep-merge(
 	(
-		max-height: 400px,
+		max-height: 500px,
 		max-width: none,
 		padding-bottom: 0,
 		padding-left: 16px,
@@ -333,6 +333,162 @@ $cadmin-clay-color-range-pointer: map-deep-merge(
 	$cadmin-clay-color-range-pointer
 );
 
+// Clay Color Form Group
+
+$cadmin-clay-color-form-group: () !default;
+$cadmin-clay-color-form-group: map-deep-merge(
+	(
+		display: flex,
+		align-items: center,
+		margin-top: 4px,
+		margin-bottom: 16px,
+		clay-range: (
+			flex-grow: 1,
+			flex-shrink: 0,
+			margin-right: 16px,
+			width: 144px,
+		),
+		form-control: (
+			padding-left: 0,
+			padding-right: 10%,
+			text-align: right,
+		),
+		input-group: (
+			input-group-inset-item-before: (
+				font-weight: $cadmin-font-weight-semi-bold,
+				padding-left: 10%,
+				padding-right: 0,
+				min-width: 18px,
+			),
+		),
+	),
+	$cadmin-clay-color-form-group
+);
+
+// Clay Color Slider
+
+$cadmin-clay-color-slider: () !default;
+$cadmin-clay-color-slider: map-deep-merge(
+	(
+		clay-range-input: (
+			border-radius: 100px,
+			clay-range-track: (
+				border-radius: inherit,
+				height: 8px,
+				margin-top: -4px,
+			),
+			clay-range-progress: (
+				background-color: transparent,
+				border-radius: inherit,
+				height: 8px,
+				margin-top: -4px,
+				width: 100%,
+			),
+			ms-thumb: (
+				visibility: visible,
+			),
+			moz-range-thumb: (
+				visibility: visible,
+			),
+			webkit-slider-thumb: (
+				visibility: visible,
+			),
+			clay-range-thumb: (
+				background-color: currentColor,
+				border-width: 0,
+				box-shadow: 0 0 0 2px $cadmin-white,
+				height: 10px,
+				margin-top: -5px,
+				transition:
+					clay-enable-transitions(box-shadow 0.15s ease-in-out),
+				visibility: hidden,
+				width: 10px,
+			),
+			form-control-range: (
+				background-color: inherit,
+				border-radius: inherit,
+				color: inherit,
+				height: 8px,
+				webkit-slider-runnable-track: (
+					-webkit-appearance: none,
+					appearance: none,
+				),
+			),
+			focus: (
+				clay-range-thumb: (
+					box-shadow: #{0 0 0 2px $cadmin-white,
+					0 0 0 4px $cadmin-primary-l1},
+				),
+			),
+		),
+	),
+	$cadmin-clay-color-slider
+);
+
+$cadmin-clay-color-slider-hue: () !default;
+$cadmin-clay-color-slider-hue: map-deep-merge(
+	(
+		clay-range-input: (
+			color: #26affd,
+			clay-range-track: (
+				background-image:
+					linear-gradient(
+						270deg,
+						#fc0d1b 0%,
+						#fc22d6 18.23%,
+						#1824fb 34.25%,
+						#2bf6fd 50.28%,
+						#2bfd2e 67.58%,
+						#fcfd37 81.22%,
+						#fc121b 100%
+					),
+			),
+		),
+	),
+	$cadmin-clay-color-slider-hue
+);
+
+$cadmin-clay-color-slider-alpha: () !default;
+$cadmin-clay-color-slider-alpha: map-deep-merge(
+	(
+		clay-range-input: (
+			color: $cadmin-black,
+			clay-range-track: (
+				background-color: $cadmin-white,
+				background-image: #{linear-gradient(
+						45deg,
+						#e7e7ed 25%,
+						transparent 25%
+					),
+				linear-gradient(
+					-45deg,
+					#e7e7ed 25%,
+					transparent 25%,
+				),
+				linear-gradient(
+					45deg,
+					transparent 75%,
+					#e7e7ed 75%,
+				),
+				linear-gradient(-45deg, transparent 75%, #e7e7ed 75%)},
+				background-position: #{0 0,
+				0 4px,
+				4px -4px,
+				-4px 0px},
+				background-size: 8px 8px,
+			),
+			form-control-range: (
+				color: inherit,
+			),
+			clay-range-progress: (
+				background-image:
+					linear-gradient(90deg, transparent 0%, currentcolor 100%),
+			),
+		),
+	),
+	$cadmin-clay-color-slider-alpha
+);
+
 // Clay Color Sm
 
 $cadmin-clay-color-sm-input-group-inset-item-before: () !default;

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

@@ -1,6 +1,25 @@
 $cadmin-custom-forms-transition: background-color 0.15s ease-in-out,
 	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
 
+// Form File
+
+$cadmin-form-file: () !default;
+$cadmin-form-file: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-input-border-radius),
+		display: flex,
+		position: relative,
+		transition: clay-enable-transitions($cadmin-input-transition),
+		focus-within: (
+			background-color: $cadmin-input-focus-bg,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			outline: 0,
+			z-index: 1,
+		),
+	),
+	$cadmin-form-file
+);
+
 // Custom Control Indicator
 
 $cadmin-custom-control-indicator-size: 16px !default;

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

@@ -4,12 +4,20 @@ $cadmin-date-picker-dropdown-menu: () !default;
 $cadmin-date-picker-dropdown-menu: map-deep-merge(
 	(
 		max-height: none,
-		max-width: 368px,
+		max-width: 352px,
 		padding-bottom: 0,
 		padding-left: 0,
 		padding-right: 0,
 		padding-top: 0,
 		width: 100%,
+		media-breakpoint-down: (
+			xs: (
+				font-size: 12px,
+				margin: 0,
+				max-height: 255px,
+				max-width: 264px,
+			),
+		),
 	),
 	$cadmin-date-picker-dropdown-menu
 );
@@ -20,8 +28,8 @@ $cadmin-date-picker-nav-row: () !default;
 $cadmin-date-picker-nav-row: map-deep-merge(
 	(
 		display: flex,
-		margin-left: -4px,
-		margin-right: -4px,
+		margin-left: -2px,
+		margin-right: -2px,
 	),
 	$cadmin-date-picker-nav-row
 );
@@ -56,7 +64,18 @@ $cadmin-date-picker-nav-btn-monospaced: () !default;
 $cadmin-date-picker-nav-btn-monospaced: map-deep-merge(
 	(
 		margin-bottom: 0,
+		margin-left: 2px,
+		margin-right: 2px,
 		margin-top: 0,
+		media-breakpoint-down: (
+			xs: (
+				font-size: 12px,
+				height: 24px,
+				max-height: 24px,
+				max-width: 24px,
+				min-width: 24px,
+			),
+		),
 	),
 	$cadmin-date-picker-nav-btn-monospaced
 );
@@ -85,6 +104,12 @@ $cadmin-date-picker-nav-select: map-deep-merge(
 			background-color: transparent,
 			color: $cadmin-input-disabled-color,
 		),
+		media-breakpoint-down: (
+			xs: (
+				font-size: 12px,
+				height: 24px,
+			),
+		),
 	),
 	$cadmin-date-picker-nav-select
 );
@@ -100,6 +125,12 @@ $cadmin-date-picker-row: map-deep-merge(
 		margin-bottom: 8px,
 		margin-top: 8px,
 		padding: 0,
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: 4px,
+				margin-top: 4px,
+			),
+		),
 	),
 	$cadmin-date-picker-row
 );
@@ -107,8 +138,9 @@ $cadmin-date-picker-row: map-deep-merge(
 $cadmin-date-picker-col: () !default;
 $cadmin-date-picker-col: map-deep-merge(
 	(
-		padding-left: 8px,
-		padding-right: 8px,
+		display: flex,
+		flex-grow: 1,
+		justify-content: center,
 		c-selected: (
 			background-image:
 				linear-gradient($cadmin-primary-l3, $cadmin-primary-l3),
@@ -139,6 +171,11 @@ $cadmin-date-picker-days-row: map-deep-merge(
 	(
 		margin-bottom: 16px,
 		margin-top: 0,
+		media-breakpoint-down: (
+			xs: (
+				margin-bottom: 4px,
+			),
+		),
 	),
 	$cadmin-date-picker-days-row
 );
@@ -173,6 +210,14 @@ $cadmin-date-picker-calendar-header-container: map-merge(
 		padding-left: 16px,
 		padding-right: 16px,
 		padding-top: 16px,
+		media-breakpoint-down: (
+			xs: (
+				padding-bottom: 4px,
+				padding-left: 6px,
+				padding-right: 6px,
+				padding-top: 8px,
+			),
+		),
 	),
 	$cadmin-date-picker-calendar-header-container
 );
@@ -180,9 +225,16 @@ $cadmin-date-picker-calendar-header-container: map-merge(
 $cadmin-date-picker-calendar-body-container: () !default;
 $cadmin-date-picker-calendar-body-container: map-merge(
 	(
-		padding-left: 16px,
-		padding-right: 16px,
+		padding-left: 8px,
+		padding-right: 8px,
 		padding-bottom: 8px,
+		media-breakpoint-down: (
+			xs: (
+				padding-left: 6px,
+				padding-right: 6px,
+				padding-bottom: 4px,
+			),
+		),
 	),
 	$cadmin-date-picker-calendar-body-container
 );
@@ -193,10 +245,17 @@ $cadmin-date-picker-calendar-footer-container: map-merge(
 		border-color: $cadmin-gray-400,
 		border-style: solid,
 		border-width: 1px 0 0 0,
-		padding-bottom: 16px,
-		padding-left: 24px,
-		padding-right: 24px,
-		padding-top: 16px,
+		padding-bottom: 8px,
+		padding-left: 14px,
+		padding-right: 14px,
+		padding-top: 8px,
+		media-breakpoint-down: (
+			xs: (
+				padding-left: 6px,
+				padding-right: 6px,
+				padding-top: 7px,
+			),
+		),
 	),
 	$cadmin-date-picker-calendar-footer-container
 );
@@ -228,6 +287,12 @@ $cadmin-date-picker-calendar-item: map-deep-merge(
 		vertical-align: middle,
 		white-space: nowrap,
 		width: 32px,
+		media-breakpoint-down: (
+			xs: (
+				height: 24px,
+				width: 24px,
+			),
+		),
 	),
 	$cadmin-date-picker-calendar-item
 );
@@ -288,6 +353,14 @@ $cadmin-date-picker-next-month-date: map-deep-merge(
 
 // Date Picker Input Group
 
+$cadmin-date-picker-input-group-item: () !default;
+$cadmin-date-picker-input-group-item: map-deep-merge(
+	(
+		margin-left: 2px,
+	),
+	$cadmin-date-picker-input-group-item
+);
+
 $cadmin-date-picker-input-group-text: () !default;
 $cadmin-date-picker-input-group-text: map-deep-merge(
 	(
@@ -299,6 +372,34 @@ $cadmin-date-picker-input-group-text: map-deep-merge(
 		min-width: 32px,
 		padding-left: 4px,
 		padding-right: 4px,
+		media-breakpoint-down: (
+			xs: (
+				font-size: inherit,
+				height: $cadmin-input-height-sm,
+				min-width: 24px,
+			),
+		),
 	),
 	$cadmin-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($cadmin-input-border-radius-sm),
+				font-size: $cadmin-input-font-size-sm,
+				height: $cadmin-input-height-sm,
+				line-height: $cadmin-input-line-height-sm,
+				min-height: $cadmin-input-height-sm,
+				padding-bottom: $cadmin-input-padding-y-sm,
+				padding-left: $cadmin-input-padding-x-sm,
+				padding-right: $cadmin-input-padding-x-sm,
+				padding-top: $cadmin-input-padding-y-sm,
+			),
+		),
+	),
+	$date-picker-input-form-control
+);

package/src/scss/cadmin/variables/_forms.scss

@@ -99,6 +99,12 @@ $cadmin-input: map-deep-merge(
 				color: $cadmin-input-placeholder-focus-color,
 			),
 		),
+		focus-within: (
+			background-color: $cadmin-input-focus-bg,
+			border-color: $cadmin-input-focus-border-color,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			color: $cadmin-input-focus-color,
+		),
 		disabled: (
 			background-color: $cadmin-input-disabled-bg,
 			border-color: $cadmin-input-disabled-border-color,
@@ -1524,6 +1530,23 @@ $cadmin-input-group-item-shrink: map-deep-merge(
 	$cadmin-input-group-item-shrink
 );
 
+// .input-group-item-focusable
+
+$cadmin-input-group-item-focusable: () !default;
+$cadmin-input-group-item-focusable: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-input-border-radius),
+		transition: clay-enable-transitions($cadmin-input-transition),
+		focus-within: (
+			background-color: $cadmin-input-focus-bg,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			outline: 0,
+			z-index: 1,
+		),
+	),
+	$cadmin-input-group-item-focusable
+);
+
 // Input Group Inset
 
 $cadmin-input-group-inset-item-color: $cadmin-input-group-addon-color !default;

package/src/scss/cadmin/variables/_globals.scss

@@ -704,14 +704,20 @@ $cadmin-link-hover-decoration: underline !default;
 $cadmin-link: () !default;
 $cadmin-link: map-deep-merge(
 	(
+		border-radius: 1px,
 		color: $cadmin-link-color,
 		cursor: $cadmin-link-cursor,
 		text-decoration: $cadmin-link-decoration,
 		text-underline-offset: 0.23em,
+		transition: clay-enable-transitions($cadmin-component-transition),
 		hover: (
 			color: $cadmin-link-hover-color,
 			text-decoration: $cadmin-link-hover-decoration,
 		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-link
 );

package/src/scss/cadmin/variables/_time.scss

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

package/src/scss/components/_breadcrumbs.scss

@@ -6,12 +6,20 @@
 	@include clay-link($breadcrumb-link);
 }
 
+.breadcrumb-toggle {
+	@include clay-link($breadcrumb-toggle);
+}
+
 .breadcrumb-item {
 	@include clay-css($breadcrumb-item);
 
 	&.active,
 	.active {
 		@include clay-css(map-get($breadcrumb-item, active));
+
+		.breadcrumb-link {
+			color: inherit;
+		}
 	}
 
 	> span {

package/src/scss/components/_clay-color.scss

@@ -151,6 +151,48 @@
 	@include clay-button-variant($clay-color-range-pointer);
 }
 
+// Clay Color Slider
+
+.clay-color-slider {
+	@include clay-range-variant($clay-color-slider);
+}
+
+.clay-color-slider-hue {
+	@include clay-range-variant($clay-color-slider-hue);
+}
+
+.clay-color-slider-alpha {
+	@include clay-range-variant($clay-color-slider-alpha);
+}
+
+// Clay Color Form Group
+
+.clay-color-form-group {
+	@include clay-css($clay-color-form-group);
+
+	.clay-range {
+		@include clay-css(map-get($clay-color-form-group, clay-range));
+	}
+
+	.form-control {
+		@include clay-form-control-variant(
+			map-get($clay-color-form-group, form-control)
+		);
+	}
+
+	.input-group {
+		$input-group: map-get($clay-color-form-group, input-group);
+
+		@include clay-input-group-variant($input-group);
+
+		.input-group-inset-item-before {
+			@include clay-css(
+				map-get($input-group, input-group-inset-item-before)
+			);
+		}
+	}
+}
+
 // Clay Color Sm
 
 %clay-color-sm-input-group-inset-item-before {

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

@@ -1,6 +1,5 @@
 .form-file {
-	display: flex;
-	position: relative;
+	@include clay-form-control-variant($form-file);
 }
 
 .form-file-input {

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/components/_input-groups.scss

@@ -134,6 +134,10 @@
 	@include clay-input-group-item-variant($input-group-item-shrink);
 }
 
+.input-group-item-focusable {
+	@include clay-input-group-item-variant($input-group-item-focusable);
+}
+
 // Input Group Text
 
 .input-group-text {