@clayui/css 3.160.0 → 3.162.0

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

@@ -0,0 +1,262 @@
+$clay-range-disabled-color: var(
+	--clay-range-disabled-color,
+	$gray-500
+) !default;
+
+$clay-range-input-group: () !default;
+$clay-range-input-group: map-merge(
+	(
+		align-items: center,
+	),
+	$clay-range-input-group
+);
+
+$clay-range-input-group-item: () !default;
+$clay-range-input-group-item: map-merge(
+	(
+		flex-direction: column,
+	),
+	$clay-range-input-group-item
+);
+
+$clay-range-input-group-text: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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 @@
+$clay-reorder: () !default;
+$clay-reorder: map-deep-merge(
+	(
+		padding: var(--clay-reorder-padding, 2px),
+		position: relative,
+		z-index: 0,
+	),
+	$clay-reorder
+);
+
+$clay-reorder-input-inset: () !default;
+$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: () !default;
+$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: () !default;
+$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
+			),
+		box-shadow:
+			var(
+				--clay-reorder-underlay-focus-box-shadow,
+				$input-focus-box-shadow
+			),
+	),
+	$clay-reorder-underlay-focus
+);
+
+$clay-reorder-footer: () !default;
+$clay-reorder-footer: map-deep-merge(
+	(
+		padding: var(--clay-reoder-footer-padding, 8px),
+	),
+	$clay-reorder-footer
+);
+
+$clay-reorder-footer-invisible: () !default;
+$clay-reorder-footer-invisible: map-deep-merge(
+	(
+		visibility: hidden,
+	),
+	$clay-reorder-footer-invisible
+);
+
+$clay-reorder-footer-center: () !default;
+$clay-reorder-footer-center: map-deep-merge(
+	(
+		text-align: center,
+	),
+	$clay-reorder-footer-center
+);
+
+$clay-reorder-footer-end: () !default;
+$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,37 @@
+$c-horizontal-resizer: () !default;
+$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.75rem,
+		z-index: 10,
+
+		before: (
+			bottom: 0rem,
+			content: '',
+			left: 0.25rem,
+			position: absolute,
+			right: 0.25rem,
+			top: 0rem,
+		),
+
+		hover: (
+			before: (
+				background-color: $primary-l0,
+			),
+		),
+
+		focus: (
+			before: (
+				background-color: $primary-l0,
+			),
+		),
+	),
+	$c-horizontal-resizer
+);

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

@@ -0,0 +1,301 @@
+$sheet-bg: var(--sheet-background-color, $white) !default;
+$sheet-border-color: var(--sheet-border-color, $gray-300) !default;
+$sheet-border-radius: var(--sheet-border-radius, $border-radius) !default;
+$sheet-border-style: var(--sheet-border-style, solid) !default;
+$sheet-border-width: var(--sheet-border-width, 1px) !default;
+$sheet-padding-bottom: var(--sheet-padding-bottom, 1px) !default;
+$sheet-padding-left: var(--sheet-padding-left, 24px) !default;
+$sheet-padding-right: var(--sheet-padding-right, 24px) !default;
+$sheet-padding-top: var(--sheet-padding-top, 24px) !default;
+
+$sheet-padding-bottom-mobile: var(--sheet-padding-bottom-mobile, 1px) !default;
+$sheet-padding-left-mobile: var(--sheet-padding-left-mobile, 16px) !default;
+$sheet-padding-right-mobile: var(--sheet-padding-right-mobile, 16px) !default;
+$sheet-padding-top-mobile: var(--sheet-padding-top-mobile, 16px) !default;
+
+$sheet-plus-sheet: () !default;
+$sheet-plus-sheet: map-merge(
+	(
+		margin-top: var(--sheet-plus-sheet, 48px),
+	),
+	$sheet-plus-sheet
+);
+// Sheet Row
+
+$sheet-row: () !default;
+$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) !default;
+
+$sheet-header-margin-bottom-mobile: var(
+	--sheet-header-margin-bottom-mobile,
+	32px
+) !default;
+
+// Sheet Section
+
+$sheet-section-margin-bottom: var(--sheet-section-margin-bottom, 48px) !default;
+
+$sheet-section-margin-bottom-mobile: var(
+	--sheet-section-margin-bottom-mobile,
+	32px
+) !default;
+
+$sheet-panel-group-margin-bottom: var(
+	--sheet-panel-group-margin-bottom,
+	24px
+) !default;
+
+$sheet-panel-group-margin-bottom-mobile: var(
+	--sheet-panel-group-margin-bottom-mobile,
+	16px
+) !default;
+
+// Sheet Footer
+
+$sheet-footer-margin-bottom: var(--sheet-footer-margin-bottom, 24px) !default;
+$sheet-footer-margin-left: var(--sheet-footer-margin-left, 0px) !default;
+$sheet-footer-margin-right: var(--sheet-footer-margin-right, 0px) !default;
+$sheet-footer-margin-top: var(--sheet-footer-margin-top, 24px) !default;
+
+$sheet-footer-margin-bottom-mobile: var(
+	--sheet-footer-margin-bottom-mobile,
+	16px
+) !default;
+$sheet-footer-margin-left-mobile: var(
+	--sheet-footer-margin-left-mobile,
+	0px
+) !default;
+$sheet-footer-margin-right-mobile: var(
+	--sheet-footer-margin-right-mobile,
+	0px
+) !default;
+$sheet-footer-margin-top-mobile: var(
+	--sheet-footer-margin-top-mobile,
+	16px
+) !default;
+
+$sheet-footer-btn-block-sm-down: () !default;
+$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
+) !default;
+
+// Sheet Title
+
+$sheet-title-color: null !default;
+$sheet-title-font-size: 1.25rem !default;
+$sheet-title-font-weight: $font-weight-bold !default;
+$sheet-title-line-height: $headings-line-height !default; // 1.2
+$sheet-title-margin-bottom: 1.5rem !default; // 24px
+
+$sheet-title-autofit-padded-no-gutters-ext: 'autofit-padded-no-gutters-sm' !default;
+
+$sheet-title-font-size-mobile: 1.25rem !default; // 20px
+$sheet-title-margin-bottom-mobile: 1rem !default;
+
+// Sheet Subtitle
+
+$sheet-subtitle-border-color: $gray-500 !default;
+$sheet-subtitle-border-style: solid !default;
+$sheet-subtitle-border-width: 0 0 1px 0 !default;
+$sheet-subtitle-color: $body-color !default;
+$sheet-subtitle-font-size: 14px !default;
+$sheet-subtitle-font-weight: $font-weight-semi-bold !default;
+$sheet-subtitle-line-height: $headings-line-height !default; // 1.2
+$sheet-subtitle-margin-bottom: 1.5rem !default; // 24px
+$sheet-subtitle-padding-x: 0px !default;
+$sheet-subtitle-padding-y: 8px !default;
+$sheet-subtitle-text-transform: uppercase !default;
+
+$sheet-subtitle-font-size-mobile: null !default;
+$sheet-subtitle-margin-bottom-mobile: 1rem !default;
+
+$sheet-subtitle-heading-text-margin-bottom: 0rem !default;
+$sheet-subtitle-heading-text-margin-top: auto !default;
+
+// Sheet Subtitle as Panel Header
+
+$sheet-subtitle-link-color: $sheet-subtitle-color !default;
+$sheet-subtitle-link-text-decoration: null !default;
+
+$sheet-subtitle-link-hover-color: null !default;
+$sheet-subtitle-link-hover-text-decoration: none !default;
+
+$sheet-subtitle-link: () !default;
+$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 !default;
+
+$sheet-subtitle-collapse-icon-bottom: null !default;
+$sheet-subtitle-collapse-icon-left: null !default;
+$sheet-subtitle-collapse-icon-right: null !default;
+$sheet-subtitle-collapse-icon-top: clay-collapse-icon-align(
+	$sheet-subtitle-padding-y,
+	0,
+	1em,
+	$sheet-subtitle-line-height
+) !default;
+
+$sheet-subtitle-collapse-icon-padding-left: null !default;
+$sheet-subtitle-collapse-icon-padding-right: null !default;
+
+// Sheet Tertiary Title
+
+$sheet-tertiary-title-color: $sheet-subtitle-color !default;
+$sheet-tertiary-title-font-size: $sheet-subtitle-font-size !default;
+$sheet-tertiary-title-font-weight: $sheet-subtitle-font-weight !default;
+$sheet-tertiary-title-line-height: $sheet-subtitle-line-height !default;
+$sheet-tertiary-title-margin-bottom: $sheet-subtitle-margin-bottom !default;
+$sheet-tertiary-title-padding-x: $sheet-subtitle-padding-x !default;
+$sheet-tertiary-title-padding-y: $sheet-subtitle-padding-y !default;
+$sheet-tertiary-title-text-transform: $sheet-subtitle-text-transform !default;
+
+$sheet-tertiary-title-font-size-mobile: null !default;
+$sheet-tertiary-title-margin-bottom-mobile: 8px !default;
+
+// Sheet Text
+
+$sheet-text-color: $gray-600 !default;
+$sheet-text-font-size: null !default;
+$sheet-text-font-weight: null !default;
+$sheet-text-margin-bottom: 1.5rem !default; // 24px
+
+$sheet-text-font-size-mobile: null !default;
+$sheet-text-margin-bottom-mobile: 1rem !default;
+
+// Sheet Multiple Form Variant
+
+$sheet-multiple-form: () !default;
+
+$sheet-multiple-form-sheet-header: () !default;
+$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: () !default;
+$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: () !default;
+$sheet-multiple-form-sheet-title: map-merge(
+	(
+		margin-bottom: 0rem,
+	),
+	$sheet-multiple-form-sheet-title
+);
+
+// Sheet Dataset Content Variant
+
+$sheet-dataset-content: () !default;
+
+$sheet-dataset-content-sheet-header: () !default;
+$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: () !default;
+$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: () !default;
+$sheet-dataset-content-sheet-title: map-merge(
+	(
+		margin-bottom: 0rem,
+	),
+	$sheet-dataset-content-sheet-title
+);
+
+// Sheet in Card Page
+
+$card-page-item-sheet: () !default;
+$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,2 @@
+$sidenav-transition: all 0.5s ease !default;
+$sidenav-width: 320px !default;