@clayui/css 3.160.0 → 3.161.0

package/src/scss/atlas-custom-properties/variables/_range.scss

@@ -0,0 +1,267 @@
+@if ($enable-atlas-custom-properties) {
+	$clay-range-disabled-color: var(--clay-range-disabled-color, $gray-500);
+
+	$clay-range-input-group: ();
+	$clay-range-input-group: map-merge(
+		(
+			align-items: center,
+		),
+		$clay-range-input-group
+	);
+
+	$clay-range-input-group-item: ();
+	$clay-range-input-group-item: map-merge(
+		(
+			flex-direction: column,
+		),
+		$clay-range-input-group-item
+	);
+
+	$clay-range-input-group-text: ();
+	$clay-range-input-group-text: map-merge(
+		(
+			background-color:
+				var(
+					--clay-range-input-group-text-background-color,
+					setter(
+						map-get($clay-range-input-group-text, bg),
+						transparent
+					)
+				),
+			border-width: 0,
+			color: var(--clay-range-input-group-text-color, $gray-500),
+			font-size: var(--clay-range-input-group-text-font-size, 14px),
+			font-weight:
+				var(
+					--clay-range-input-group-text-font-weight,
+					$font-weight-semi-bold
+				),
+			min-width: var(--clay-range-input-group-text-min-width, 24px),
+			padding-bottom: 0,
+			padding-left: 0,
+			padding-right: 0,
+			padding-top: 0,
+		),
+		$clay-range-input-group-text
+	);
+
+	$clay-range-title: ();
+	$clay-range-title: map-deep-merge(
+		(
+			color: var(--clay-range-title-color),
+			display: block,
+			font-size: var(--clay-range-title-font-size),
+			font-weight:
+				var(--clay-range-title-font-weight, $font-weight-semi-bold),
+			line-height: var(--clay-range-title-line-height, 1),
+			margin-bottom: var(--clay-range-title-margin-bottom, 8px),
+			text-align: center,
+		),
+		$clay-range-title
+	);
+
+	$clay-range-input: ();
+	$clay-range-input: map-deep-merge(
+		(
+			color: var(--clay-range-input-color, $gray-500),
+			display: block,
+			padding-bottom: 0.1px,
+			position: relative,
+			vertical-align: middle,
+			width: 100%,
+
+			clay-range-thumb: (
+				background-color:
+					var(--clay-range-thumb-background-color, $white),
+				border: var(--clay-range-thumb-border),
+				border-radius: var(--clay-range-thumb-border-radius, 100px),
+				border-width: var(--clay-range-thumb-border-width, 0),
+				box-shadow:
+					var(
+						--clay-range-thumb-box-shadow,
+						0 1px 5px -1px rgba(0, 0, 0, 0.3)
+					),
+				height: var(--clay-range-thumb-height, 24px),
+				margin-top: var(--clay-range-thumb-margin-top, -0.75rem),
+				width: var(--clay-range-thumb-width, 24px),
+			),
+
+			clay-range-track: (
+				background-color:
+					var(--clay-range-track-background-color, $gray-200),
+				border-radius: var(--clay-range-track-border-radius, 100px),
+				height: var(--clay-range-track-height, 4px),
+				position: absolute,
+				top: 50%,
+				width: 100%,
+			),
+
+			clay-range-progress: (
+				background-color:
+					var(--clay-range-progress-background-color, $primary),
+				border-radius:
+					var(--clay-range-progress-border-radius, 100px 0 0 100px),
+				position: absolute,
+				top: 50%,
+				width: 50%,
+			),
+
+			tooltip: (
+				margin-left: 13px,
+				transition: opacity 0.15s linear,
+				visibility: hidden,
+				white-space: nowrap,
+			),
+
+			tooltip-inner: (
+				padding: 8px 12px,
+			),
+
+			tooltip-arrow: (
+				height: 6px,
+				width: 6px,
+			),
+
+			clay-tooltip-bottom: (
+				margin-top: 4px,
+				padding-top: 3px,
+				top: 100%,
+				transform: translateX(-50%),
+				tooltip-arrow: (
+					margin-left: -4px,
+				),
+			),
+
+			clay-tooltip-top: (
+				bottom: 100%,
+				margin-bottom: 4px,
+				padding-bottom: 3px,
+				transform: translateX(-50%),
+				tooltip-arrow: (
+					margin-left: -4px,
+				),
+			),
+			form-control-range: (
+				appearance: none,
+				background-color: transparent,
+				height: var(--form-control-range-height, $input-height),
+				position: relative,
+
+				hover: (
+					cursor: $link-cursor,
+
+					clay-range-thumb: (
+						background-color:
+							var(
+								--clay-range-thumb-hover-background-color,
+								$primary-l3
+							),
+					),
+				),
+
+				focus: (
+					outline: 0,
+
+					clay-range-thumb: (
+						box-shadow:
+							var(
+								--clay-range-thumb-focus-box-shadow,
+								$component-focus-inset-box-shadow
+							),
+					),
+				),
+
+				disabled: (
+					color:
+						var(
+							--clay-range-input-disabled-color,
+							$clay-range-disabled-color
+						),
+					cursor: $disabled-cursor,
+
+					clay-range-thumb: (
+						background-color:
+							var(
+								--clay-range-thumb-disabled-background-color,
+								$gray-100
+							),
+					),
+
+					clay-range-progress: (
+						background-color:
+							var(
+								--clay-range-progress-disabled-clay-range-progress,
+								$primary-l2
+							),
+					),
+
+					clay-range-track: (
+						background-color:
+							var(
+								--clay-range-track-disabled-clay-range-track,
+								$gray-200
+							),
+					),
+				),
+			),
+
+			data-label-min-max: (
+				margin-bottom: var(--data-label-spacer, 16px),
+			),
+
+			before-after: (
+				font-size: var(--data-label-font-size, 14px),
+				font-weight:
+					var(--data-label-font-weight, $font-weight-semi-bold),
+				line-height: var(--data-label-line-height, 1),
+				margin-top: var(--data-label-margin-top, 40px),
+				position: absolute,
+				text-align: center,
+				top: var(--data-label-top, 0),
+				width: var(--data-label-width, 24px),
+			),
+
+			data-label-min: (
+				before: (
+					content: unquote("'\\FEFF' attr(data-label-min)"),
+				),
+			),
+
+			data-label-max: (
+				after: (
+					content: unquote("'\\FEFF' attr(data-label-max)"),
+					right: 0,
+				),
+			),
+		),
+		$clay-range-input
+	);
+
+	$clay-range-progress-none: ();
+	$clay-range-progress-none: map-deep-merge(
+		(
+			clay-range-input: (
+				ms-thumb: (
+					visibility: visible,
+				),
+
+				moz-range-thumb: (
+					visibility: visible,
+				),
+
+				webkit-slider-thumb: (
+					visibility: visible,
+				),
+
+				clay-range-thumb: (
+					visibility: hidden,
+				),
+
+				clay-range-progress: (
+					visibility: hidden,
+				),
+			),
+		),
+		$clay-range-progress-none
+	);
+}

package/src/scss/atlas-custom-properties/variables/_reorder.scss

@@ -0,0 +1,91 @@
+@if ($enable-atlas-custom-properties) {
+	$clay-reorder: ();
+	$clay-reorder: map-deep-merge(
+		(
+			padding: var(--clay-reorder-padding, 2px),
+			position: relative,
+			z-index: 0,
+		),
+		$clay-reorder
+	);
+
+	$clay-reorder-input-inset: ();
+	$clay-reorder-input-inset: map-deep-merge(
+		(
+			margin-bottom: 0,
+			margin-top: 0,
+			overflow: auto,
+			padding-bottom: $input-padding-y,
+			padding-top: $input-padding-y,
+			width: 100%,
+
+			focus: (
+				background-color: transparent,
+				box-shadow: none,
+			),
+		),
+		$clay-reorder-input-inset
+	);
+
+	$clay-reorder-underlay: ();
+	$clay-reorder-underlay: map-deep-merge(
+		(
+			bottom: 0,
+			left: 0,
+			position: absolute,
+			right: 0,
+			top: 0,
+			z-index: -1,
+		),
+		$clay-reorder-underlay
+	);
+
+	$clay-reorder-underlay-focus: ();
+	$clay-reorder-underlay-focus: map-deep-merge(
+		(
+			background-color:
+				var(
+					--clay-reorder-underlay-focus-background-color,
+					$input-focus-bg
+				),
+			border-color:
+				var(
+					--clay-reorder-underlay-focus-border-color,
+					$input-focus-border-color
+				),
+		),
+		$clay-reorder-underlay-focus
+	);
+
+	$clay-reorder-footer: ();
+	$clay-reorder-footer: map-deep-merge(
+		(
+			padding: var(--clay-reoder-footer-padding, 8px),
+		),
+		$clay-reorder-footer
+	);
+
+	$clay-reorder-footer-invisible: ();
+	$clay-reorder-footer-invisible: map-deep-merge(
+		(
+			visibility: hidden,
+		),
+		$clay-reorder-footer-invisible
+	);
+
+	$clay-reorder-footer-center: ();
+	$clay-reorder-footer-center: map-deep-merge(
+		(
+			text-align: center,
+		),
+		$clay-reorder-footer-center
+	);
+
+	$clay-reorder-footer-end: ();
+	$clay-reorder-footer-end: map-deep-merge(
+		(
+			text-align: right,
+		),
+		$clay-reorder-footer-end
+	);
+}

package/src/scss/atlas-custom-properties/variables/_resizer.scss

@@ -0,0 +1,26 @@
+@if ($enable-atlas-custom-properties) {
+	$c-horizontal-resizer: ();
+	$c-horizontal-resizer: map-merge(
+		(
+			background-color: transparent,
+			bottom: 0rem,
+			cursor: ew-resize,
+			margin-right: -0.25rem,
+			position: absolute,
+			right: 0rem,
+			top: 0rem,
+			user-select: none,
+			width: 0.5rem,
+			z-index: 10,
+
+			hover: (
+				background-color: $primary-l0,
+			),
+
+			focus: (
+				background-color: $primary-l0,
+			),
+		),
+		$c-horizontal-resizer
+	);
+}

package/src/scss/atlas-custom-properties/variables/_sheets.scss

@@ -0,0 +1,301 @@
+@if ($enable-atlas-custom-properties) {
+	$sheet-bg: var(--sheet-background-color, $white);
+	$sheet-border-color: var(--sheet-border-color, $gray-300);
+	$sheet-border-radius: var(--sheet-border-radius, $border-radius);
+	$sheet-border-style: var(--sheet-border-style, solid);
+	$sheet-border-width: var(--sheet-border-width, 1px);
+	$sheet-padding-bottom: var(--sheet-padding-bottom, 1px);
+	$sheet-padding-left: var(--sheet-padding-left, 24px);
+	$sheet-padding-right: var(--sheet-padding-right, 24px);
+	$sheet-padding-top: var(--sheet-padding-top, 24px);
+
+	$sheet-padding-bottom-mobile: var(--sheet-padding-bottom-mobile, 1px);
+	$sheet-padding-left-mobile: var(--sheet-padding-left-mobile, 16px);
+	$sheet-padding-right-mobile: var(--sheet-padding-right-mobile, 16px);
+	$sheet-padding-top-mobile: var(--sheet-padding-top-mobile, 16px);
+
+	$sheet-plus-sheet: ();
+	$sheet-plus-sheet: map-merge(
+		(
+			margin-top: var(--sheet-plus-sheet, 48px),
+		),
+		$sheet-plus-sheet
+	);
+	// Sheet Row
+
+	$sheet-row: ();
+	$sheet-row: map-merge(
+		(
+			margin-left: calc(#{$sheet-padding-left} * -1),
+			margin-right: calc(#{$sheet-padding-right} * -1),
+			media-breakpoint-down: (
+				sm: (
+					margin-left: calc(#{$sheet-padding-left-mobile} * -1),
+					margin-right: calc(#{$sheet-padding-right-mobile} * -1),
+				),
+			),
+		),
+		$sheet-row
+	);
+
+	// Sheet Header
+
+	$sheet-header-margin-bottom: var(--sheet-header-margin-bottom, 48px);
+
+	$sheet-header-margin-bottom-mobile: var(
+		--sheet-header-margin-bottom-mobile,
+		32px
+	);
+
+	// Sheet Section
+
+	$sheet-section-margin-bottom: var(--sheet-section-margin-bottom, 48px);
+
+	$sheet-section-margin-bottom-mobile: var(
+		--sheet-section-margin-bottom-mobile,
+		32px
+	);
+
+	$sheet-panel-group-margin-bottom: var(
+		--sheet-panel-group-margin-bottom,
+		24px
+	);
+
+	$sheet-panel-group-margin-bottom-mobile: var(
+		--sheet-panel-group-margin-bottom-mobile,
+		16px
+	);
+
+	// Sheet Footer
+
+	$sheet-footer-margin-bottom: var(--sheet-footer-margin-bottom, 24px);
+	$sheet-footer-margin-left: var(--sheet-footer-margin-left, 0px);
+	$sheet-footer-margin-right: var(--sheet-footer-margin-right, 0px);
+	$sheet-footer-margin-top: var(--sheet-footer-margin-top, 24px);
+
+	$sheet-footer-margin-bottom-mobile: var(
+		--sheet-footer-margin-bottom-mobile,
+		16px
+	);
+	$sheet-footer-margin-left-mobile: var(
+		--sheet-footer-margin-left-mobile,
+		0px
+	);
+	$sheet-footer-margin-right-mobile: var(
+		--sheet-footer-margin-right-mobile,
+		0px
+	);
+	$sheet-footer-margin-top-mobile: var(
+		--sheet-footer-margin-top-mobile,
+		16px
+	);
+
+	$sheet-footer-btn-block-sm-down: ();
+	$sheet-footer-btn-block-sm-down: map-deep-merge(
+		(
+			breakpoint-down: sm,
+
+			mobile: (
+				display: block,
+
+				btn: (
+					display: block,
+					margin-bottom: 1rem,
+					width: 100%,
+				),
+
+				btn-group: (
+					display: block,
+				),
+
+				btn-group-item: (
+					display: block,
+					margin-right: 0rem,
+				),
+			),
+		),
+		$sheet-footer-btn-block-sm-down
+	);
+
+	// Sheet Sizes
+
+	// @deprecated as of 3.x.
+
+	$sheet-lg-max-width: calc(#{map-get($container-max-widths, lg)} * 0.83333);
+
+	// Sheet Title
+
+	$sheet-title-color: null;
+	$sheet-title-font-size: 1.25rem;
+	$sheet-title-font-weight: $font-weight-bold;
+	$sheet-title-line-height: $headings-line-height; // 1.2
+	$sheet-title-margin-bottom: 1.5rem; // 24px
+
+	$sheet-title-autofit-padded-no-gutters-ext: 'autofit-padded-no-gutters-sm';
+
+	$sheet-title-font-size-mobile: 1.25rem; // 20px
+	$sheet-title-margin-bottom-mobile: 1rem;
+
+	// Sheet Subtitle
+
+	$sheet-subtitle-border-color: $gray-500;
+	$sheet-subtitle-border-style: solid;
+	$sheet-subtitle-border-width: 0 0 1px 0;
+	$sheet-subtitle-color: $body-color;
+	$sheet-subtitle-font-size: 14px;
+	$sheet-subtitle-font-weight: $font-weight-semi-bold;
+	$sheet-subtitle-line-height: $headings-line-height; // 1.2
+	$sheet-subtitle-margin-bottom: 1.5rem; // 24px
+	$sheet-subtitle-padding-x: 0px;
+	$sheet-subtitle-padding-y: 8px;
+	$sheet-subtitle-text-transform: uppercase;
+
+	$sheet-subtitle-font-size-mobile: null;
+	$sheet-subtitle-margin-bottom-mobile: 1rem;
+
+	$sheet-subtitle-heading-text-margin-bottom: 0rem;
+	$sheet-subtitle-heading-text-margin-top: auto;
+
+	// Sheet Subtitle as Panel Header
+
+	$sheet-subtitle-link-color: $sheet-subtitle-color;
+	$sheet-subtitle-link-text-decoration: null;
+
+	$sheet-subtitle-link-hover-color: null;
+	$sheet-subtitle-link-hover-text-decoration: none;
+
+	$sheet-subtitle-link: ();
+	$sheet-subtitle-link: map-deep-merge(
+		(
+			border-radius: 1px,
+			color: $sheet-subtitle-link-color,
+			text-decoration: $sheet-subtitle-link-text-decoration,
+			transition: box-shadow 0.15s ease-in-out,
+
+			hover: (
+				color: $sheet-subtitle-link-hover-color,
+				text-decoration: $sheet-subtitle-link-hover-text-decoration,
+			),
+
+			focus: (
+				box-shadow: #{0 0 0 4px $white,
+				0 0 0 6px $primary-l0},
+				outline: 0,
+			),
+		),
+		$sheet-subtitle-link
+	);
+
+	$sheet-subtitle-collapse-icon-font-size: 12px;
+
+	$sheet-subtitle-collapse-icon-bottom: null;
+	$sheet-subtitle-collapse-icon-left: null;
+	$sheet-subtitle-collapse-icon-right: null;
+	$sheet-subtitle-collapse-icon-top: clay-collapse-icon-align(
+		$sheet-subtitle-padding-y,
+		0,
+		1em,
+		$sheet-subtitle-line-height
+	);
+
+	$sheet-subtitle-collapse-icon-padding-left: null;
+	$sheet-subtitle-collapse-icon-padding-right: null;
+
+	// Sheet Tertiary Title
+
+	$sheet-tertiary-title-color: $sheet-subtitle-color;
+	$sheet-tertiary-title-font-size: $sheet-subtitle-font-size;
+	$sheet-tertiary-title-font-weight: $sheet-subtitle-font-weight;
+	$sheet-tertiary-title-line-height: $sheet-subtitle-line-height;
+	$sheet-tertiary-title-margin-bottom: $sheet-subtitle-margin-bottom;
+	$sheet-tertiary-title-padding-x: $sheet-subtitle-padding-x;
+	$sheet-tertiary-title-padding-y: $sheet-subtitle-padding-y;
+	$sheet-tertiary-title-text-transform: $sheet-subtitle-text-transform;
+
+	$sheet-tertiary-title-font-size-mobile: null;
+	$sheet-tertiary-title-margin-bottom-mobile: 8px;
+
+	// Sheet Text
+
+	$sheet-text-color: $gray-600;
+	$sheet-text-font-size: null;
+	$sheet-text-font-weight: null;
+	$sheet-text-margin-bottom: 1.5rem; // 24px
+
+	$sheet-text-font-size-mobile: null;
+	$sheet-text-margin-bottom-mobile: 1rem;
+
+	// Sheet Multiple Form Variant
+
+	$sheet-multiple-form: ();
+
+	$sheet-multiple-form-sheet-header: ();
+	$sheet-multiple-form-sheet-header: map-merge(
+		(
+			border-color: $gray-300,
+			border-style: solid,
+			border-width: 0px 0px 1px,
+			margin: -1.5rem -1.5rem 1.5rem,
+			padding: 1rem 1.5rem,
+		),
+		$sheet-multiple-form-sheet-header
+	);
+
+	$sheet-multiple-form-sheet-header-mobile: ();
+	$sheet-multiple-form-sheet-header-mobile: map-merge(
+		(
+			margin: -1rem -1rem 1rem,
+			padding: 1rem,
+		),
+		$sheet-multiple-form-sheet-header-mobile
+	);
+
+	$sheet-multiple-form-sheet-title: ();
+	$sheet-multiple-form-sheet-title: map-merge(
+		(
+			margin-bottom: 0rem,
+		),
+		$sheet-multiple-form-sheet-title
+	);
+
+	// Sheet Dataset Content Variant
+
+	$sheet-dataset-content: ();
+
+	$sheet-dataset-content-sheet-header: ();
+	$sheet-dataset-content-sheet-header: map-merge(
+		(
+			border-width: 0px,
+			margin: -1.5rem -1.5rem 1.5rem,
+			padding: 1rem 1.5rem,
+		),
+		$sheet-dataset-content-sheet-header
+	);
+
+	$sheet-dataset-content-sheet-header-mobile: ();
+	$sheet-dataset-content-sheet-header-mobile: map-merge(
+		(
+			margin: -1rem -1rem 1rem,
+			padding: 1rem,
+		),
+		$sheet-dataset-content-sheet-header-mobile
+	);
+
+	$sheet-dataset-content-sheet-title: ();
+	$sheet-dataset-content-sheet-title: map-merge(
+		(
+			margin-bottom: 0rem,
+		),
+		$sheet-dataset-content-sheet-title
+	);
+
+	// Sheet in Card Page
+
+	$card-page-item-sheet: ();
+	$card-page-item-sheet: map-merge(
+		(
+			margin-bottom: $grid-gutter-width,
+		),
+		$card-page-item-sheet
+	);
+}

package/src/scss/atlas-custom-properties/variables/_side-navigation.scss

@@ -0,0 +1,4 @@
+@if ($enable-atlas-custom-properties) {
+	$sidenav-transition: all 0.5s ease;
+	$sidenav-width: 320px;
+}