@clayui/css 3.159.0 → 3.161.0

package/src/scss/atlas-custom-properties/variables/_dual-listbox.scss

@@ -0,0 +1,75 @@
+@if ($enable-atlas-custom-properties) {
+	$clay-dual-listbox: ();
+	$clay-dual-listbox: map-deep-merge(
+		(
+			display: flex,
+			flex-direction: row,
+		),
+		$clay-dual-listbox
+	);
+
+	$clay-dual-listbox-label: ();
+	$clay-dual-listbox-label: map-deep-merge(
+		(
+			margin-bottom: var(--dual-listbox-label-margin-bottom, 16px),
+		),
+		$clay-dual-listbox-label
+	);
+
+	$clay-dual-listbox-clay-reorder: ();
+	$clay-dual-listbox-clay-reorder: map-deep-merge(
+		(
+			display: flex,
+			flex-direction: column,
+			flex-grow: 1,
+		),
+		$clay-dual-listbox-clay-reorder
+	);
+
+	$clay-dual-listbox-item: ();
+	$clay-dual-listbox-item: map-deep-merge(
+		(
+			display: flex,
+			flex-direction: column,
+			margin-right: var(--dual-listbox-item-margin-right, 4px),
+		),
+		$clay-dual-listbox-item
+	);
+
+	$clay-dual-listbox-item-sm-up: ();
+	$clay-dual-listbox-item-sm-up: map-deep-merge(
+		(
+			margin-right: var(--dual-listbox-item-sm-up-margin-right, 24px),
+		),
+		$clay-dual-listbox-item-sm-up
+	);
+
+	$clay-dual-listbox-item-last-child: ();
+	$clay-dual-listbox-item-last-child: map-deep-merge(
+		(
+			margin-right:
+				var(--clay-dual-listbox-item-last-child-margin-right, 0),
+		),
+		$clay-dual-listbox-item-last-child
+	);
+
+	$clay-dual-listbox-item-expand: ();
+	$clay-dual-listbox-item-expand: map-deep-merge(
+		(
+			flex-grow: 1,
+			width: var(--clay-dual-listbox-item-expand-width, 48px),
+			word-wrap: break-word,
+		),
+		$clay-dual-listbox-item-expand
+	);
+
+	$clay-dual-listbox-actions: ();
+	$clay-dual-listbox-actions: map-deep-merge(
+		(
+			align-self: center,
+			margin-top:
+				var(--clay-dual-listbox-actions-margin-top, calc(21px + 16px)),
+		),
+		$clay-dual-listbox-actions
+	);
+}

package/src/scss/atlas-custom-properties/variables/_empty-state.scss

@@ -0,0 +1,104 @@
+@if ($enable-atlas-custom-properties) {
+	$c-empty-state: ();
+
+	$c-empty-state-animation: ();
+	$c-empty-state-animation: map-deep-merge(
+		(
+			align-items: center,
+			display: flex,
+			flex-direction: column,
+			flex-shrink: 0,
+			margin: 5rem auto 1.5rem,
+			max-width: 340px,
+			text-align: center,
+		),
+		$c-empty-state-animation
+	);
+
+	$c-empty-state-image: ();
+	$c-empty-state-image: map-deep-merge(
+		(
+			margin-bottom: -0.5rem,
+			max-width: 250px,
+			width: 100%,
+			word-wrap: break-word,
+		),
+		$c-empty-state-image
+	);
+
+	$c-empty-state-aspect-ratio: ();
+	$c-empty-state-aspect-ratio: map-deep-merge(
+		(
+			background-repeat: no-repeat,
+			background-position: center,
+			background-size: 100%,
+			display: block,
+			padding-bottom: 100%,
+			position: relative,
+			width: 100%,
+		),
+		$c-empty-state-aspect-ratio
+	);
+
+	$c-empty-state-title: ();
+	$c-empty-state-title: map-deep-merge(
+		(
+			font-size: 1.25rem,
+			font-weight: $font-weight-semi-bold,
+			line-height: $headings-line-height,
+			margin-bottom: 0rem,
+			margin-top: 2.5rem,
+			max-width: 100%,
+			word-wrap: break-word,
+		),
+		$c-empty-state-title
+	);
+
+	$c-empty-state-text: ();
+	$c-empty-state-text: map-deep-merge(
+		(
+			color: $secondary,
+			margin-bottom: 0rem,
+			margin-top: 0.5rem,
+			max-width: 100%,
+			word-wrap: break-word,
+		),
+		$c-empty-state-text
+	);
+
+	$c-empty-state-footer: ();
+	$c-empty-state-footer: map-deep-merge(
+		(
+			margin-top: 1rem,
+			max-width: 100%,
+			word-wrap: break-word,
+		),
+		$c-empty-state-footer
+	);
+
+	// .c-empty-state-sm
+
+	$c-empty-state-sm: ();
+	$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
+	);
+}