@clayui/css 3.160.0 → 3.162.0

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

@@ -0,0 +1,72 @@
+$clay-dual-listbox: () !default;
+$clay-dual-listbox: map-deep-merge(
+	(
+		display: flex,
+		flex-direction: row,
+	),
+	$clay-dual-listbox
+);
+
+$clay-dual-listbox-label: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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,102 @@
+$c-empty-state: () !default;
+
+$c-empty-state-animation: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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
+);