@clayui/css 3.160.0 → 3.161.0

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

@@ -0,0 +1,332 @@
+@if ($enable-atlas-custom-properties) {
+	$tooltip-bg: var(--tooltip-background-color, $dark-d2);
+	$tooltip-border-radius: var(--tooltip-border-radius, $border-radius);
+	$tooltip-box-shadow: var(
+		--tooltip-box-shadow,
+		0 1px 4px 0px rgba(0, 0, 0, 0.4)
+	);
+	$tooltip-color: var(--tooltip-color, $white);
+	$tooltip-font-size: var(--tooltip-font-size, 14px);
+	$tooltip-margin: var(--tooltip-margin, 0);
+	$tooltip-max-width: var(--tooltip-max-width, 230px);
+	$tooltip-opacity: var(--tooltip-opacity, 1);
+	$tooltip-padding-x: var(--tooltip-padding-x, 12px);
+	$tooltip-padding-y: var(--tooltip-padding-y, 12px);
+
+	$tooltip-arrow-color: var(--tooltip-arrow-color, $tooltip-bg);
+	$tooltip-arrow-height: var(--tooltip-arrow-height, 6.4px);
+	$tooltip-arrow-offset: var(--tooltip-arrow-offset, 8px);
+	$tooltip-arrow-width: var(--tooltip-arrow-width, 12.8px);
+
+	$form-feedback-tooltip-border-radius: $tooltip-border-radius;
+	$form-feedback-tooltip-font-size: $tooltip-font-size;
+	$form-feedback-tooltip-line-height: $line-height-base;
+	$form-feedback-tooltip-opacity: $tooltip-opacity;
+	$form-feedback-tooltip-padding-x: $tooltip-padding-x;
+	$form-feedback-tooltip-padding-y: $tooltip-padding-y;
+
+	// .tooltip
+
+	$tooltip: ();
+	$tooltip: map-deep-merge(
+		(
+			display: block,
+			font-family: $font-family-base,
+			font-size: $tooltip-font-size,
+			font-style: normal,
+			font-weight: var(--tooltip-font-weight, $font-weight-normal),
+			letter-spacing: normal,
+			line-break: auto,
+			line-height: $line-height-base,
+			margin: $tooltip-margin,
+			opacity: 0,
+			position: absolute,
+			text-align: left,
+			text-decoration: none,
+			text-shadow: none,
+			text-transform: none,
+			white-space: normal,
+			word-break: normal,
+			word-spacing: normal,
+			word-wrap: break-word,
+			z-index: $zindex-tooltip,
+
+			show: (
+				opacity: $tooltip-opacity,
+			),
+
+			arrow: (
+				display: block,
+				height: $tooltip-arrow-height,
+				position: absolute,
+				width: $tooltip-arrow-width,
+
+				before: (
+					border-color: transparent,
+					border-style: solid,
+					content: '',
+					position: absolute,
+				),
+			),
+		),
+		$tooltip
+	);
+
+	// .tooltip-inner
+
+	$tooltip-inner: ();
+	$tooltip-inner: map-merge(
+		(
+			background-color: $tooltip-bg,
+			border-radius: clay-enable-rounded($tooltip-border-radius),
+			box-shadow: clay-enable-shadows($tooltip-box-shadow),
+			color: $tooltip-color,
+			max-width: $tooltip-max-width,
+			padding: $tooltip-padding-y $tooltip-padding-x,
+			text-align: center,
+			white-space: pre-line,
+		),
+		$tooltip-inner
+	);
+
+	// .clay-tooltip-bottom, .clay-tooltip-bottom-left, .clay-tooltip-bottom-right
+
+	$clay-tooltip-bottom: ();
+	$clay-tooltip-bottom: map-deep-merge(
+		(
+			padding-top: $tooltip-arrow-height,
+
+			arrow: (
+				left: 50%,
+				margin-left: calc(#{$tooltip-arrow-width} * -0.5),
+				top: 0rem,
+
+				before: (
+					border-bottom-color: $tooltip-arrow-color,
+					border-width:
+						0rem
+						calc(#{$tooltip-arrow-width} * 0.5)
+						$tooltip-arrow-height,
+					bottom: 0rem,
+				),
+			),
+
+			tooltip-arrow: (
+				border-bottom-color: transparent,
+				border-right-color: transparent,
+				left: 50%,
+				top: 0rem,
+			),
+		),
+		$clay-tooltip-bottom
+	);
+
+	// .clay-tooltip-bottom-left
+
+	$clay-tooltip-bottom-left: ();
+	$clay-tooltip-bottom-left: map-deep-merge(
+		(
+			arrow: (
+				left: $tooltip-arrow-offset,
+				margin-left: 0rem,
+			),
+		),
+		$clay-tooltip-bottom-left
+	);
+
+	// .clay-tooltip-bottom-right
+
+	$clay-tooltip-bottom-right: ();
+	$clay-tooltip-bottom-right: map-deep-merge(
+		(
+			arrow: (
+				left: auto,
+				margin-left: 0rem,
+				right: $tooltip-arrow-offset,
+			),
+		),
+		$clay-tooltip-bottom-right
+	);
+
+	// .clay-tooltip-left, .clay-tooltip-left-bottom, .clay-tooltip-left-top
+
+	$clay-tooltip-left: ();
+	$clay-tooltip-left: map-deep-merge(
+		(
+			padding-right: $tooltip-arrow-height,
+
+			arrow: (
+				height: $tooltip-arrow-width,
+				margin-top: calc(#{$tooltip-arrow-width} * -0.5),
+				right: 0rem,
+				top: 50%,
+				width: $tooltip-arrow-height,
+
+				before: (
+					border-left-color: $tooltip-arrow-color,
+					border-width:
+						calc(#{$tooltip-arrow-width} * 0.5)
+						0
+						calc(#{$tooltip-arrow-width} * 0.5)
+						$tooltip-arrow-height,
+					left: 0rem,
+				),
+			),
+
+			tooltip-arrow: (
+				border-bottom-color: transparent,
+				border-left-color: transparent,
+				right: 0rem,
+				top: 50%,
+			),
+		),
+		$clay-tooltip-left
+	);
+
+	// .clay-tooltip-left-bottom
+
+	$clay-tooltip-left-bottom: ();
+	$clay-tooltip-left-bottom: map-deep-merge(
+		(
+			arrow: (
+				bottom: $tooltip-arrow-offset,
+				margin-top: 0rem,
+				top: auto,
+			),
+		),
+		$clay-tooltip-left-bottom
+	);
+
+	// .clay-tooltip-left-top
+
+	$clay-tooltip-left-top: ();
+	$clay-tooltip-left-top: map-deep-merge(
+		(
+			arrow: (
+				margin-top: 0rem,
+				top: $tooltip-arrow-offset,
+			),
+		),
+		$clay-tooltip-left-top
+	);
+
+	// .clay-tooltip-right, .clay-tooltip-right-bottom, .clay-tooltip-right-top
+
+	$clay-tooltip-right: ();
+	$clay-tooltip-right: map-deep-merge(
+		(
+			padding-left: $tooltip-arrow-height,
+
+			arrow: (
+				height: $tooltip-arrow-width,
+				left: 0rem,
+				margin-top: calc(#{$tooltip-arrow-width} * -0.5),
+				top: 50%,
+				width: $tooltip-arrow-height,
+
+				before: (
+					border-right-color: $tooltip-arrow-color,
+					border-width:
+						calc(#{$tooltip-arrow-width} * 0.5)
+						$tooltip-arrow-height
+						calc(#{$tooltip-arrow-width} * 0.5)
+						0rem,
+					right: 0rem,
+				),
+			),
+
+			tooltip-arrow: (
+				border-right-color: transparent,
+				border-top-color: transparent,
+				left: 0rem,
+				top: 50%,
+			),
+		),
+		$clay-tooltip-right
+	);
+
+	// .clay-tooltip-right-bottom
+
+	$clay-tooltip-right-bottom: ();
+	$clay-tooltip-right-bottom: map-deep-merge(
+		(
+			arrow: (
+				bottom: $tooltip-arrow-offset,
+				margin-top: 0rem,
+				top: auto,
+			),
+		),
+		$clay-tooltip-right-bottom
+	);
+
+	// .clay-tooltip-right-top
+
+	$clay-tooltip-right-top: ();
+	$clay-tooltip-right-top: map-deep-merge(
+		(
+			arrow: (
+				margin-top: 0rem,
+				top: $tooltip-arrow-offset,
+			),
+		),
+		$clay-tooltip-right-top
+	);
+
+	// .clay-tooltip-top, .clay-tooltip-top-left, .clay-tooltip-top-right
+
+	$clay-tooltip-top: ();
+	$clay-tooltip-top: map-deep-merge(
+		(
+			padding-bottom: $tooltip-arrow-height,
+
+			arrow: (
+				bottom: 0rem,
+				left: 50%,
+				margin-left: calc(#{$tooltip-arrow-width} * -0.5),
+				before: (
+					border-top-color: $tooltip-arrow-color,
+					border-width:
+						$tooltip-arrow-height
+						calc(#{$tooltip-arrow-width} * 0.5)
+						0rem,
+					top: 0rem,
+				),
+			),
+
+			tooltip-arrow: (
+				border-left-color: transparent,
+				border-top-color: transparent,
+				bottom: 0rem,
+				left: 50%,
+			),
+		),
+		$clay-tooltip-top
+	);
+
+	// .clay-tooltip-top-left
+
+	$clay-tooltip-top-left: ();
+	$clay-tooltip-top-left: map-deep-merge(
+		(
+			arrow: (
+				left: $tooltip-arrow-offset,
+				margin-left: 0rem,
+			),
+		),
+		$clay-tooltip-top-left
+	);
+
+	// .clay-tooltip-top-right
+
+	$clay-tooltip-top-right: ();
+	$clay-tooltip-top-right: map-deep-merge(
+		(
+			arrow: (
+				left: auto,
+				margin-left: 0rem,
+				right: $tooltip-arrow-offset,
+			),
+		),
+		$clay-tooltip-top-right
+	);
+}

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

@@ -0,0 +1,369 @@
+@if ($enable-atlas-custom-properties) {
+	$treeview: ();
+	$treeview: map-merge(
+		(
+			display: flex,
+			flex-direction: column,
+			font-size: 14px,
+			list-style: none,
+			margin-bottom: 0rem,
+			padding: 2px 0rem,
+
+			btn: (
+				color: inherit,
+				font-size: 12px,
+				line-height: 1,
+				padding: 6px 8px,
+
+				c-inner: (
+					margin: -7px -8px,
+				),
+			),
+
+			btn-monospaced: (
+				font-size: inherit,
+				height: 24px,
+				padding: 0rem,
+				width: 24px,
+
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
+			),
+
+			custom-control: (
+				margin-left: 4px,
+				margin-right: 4px,
+				margin-top: 1.5px,
+			),
+
+			treeview-dragging: (
+				background-color: $white,
+				border-color: $primary-l0,
+				border-radius: $border-radius-sm,
+				border-style: solid,
+				border-width: 1px,
+				display: inline-block,
+				font-size: 10px,
+				font-weight: $font-weight-semi-bold,
+				padding: 4px 12px,
+				text-transform: uppercase,
+			),
+
+			treeview-group: (
+				display: flex,
+				flex-direction: column,
+				list-style: none,
+				margin-bottom: 0rem,
+				padding-left: 0rem,
+			),
+
+			treeview-item: (
+				word-wrap: break-word,
+			),
+
+			treeview-item-dragging: (
+				cursor: $disabled-cursor,
+				opacity: 0.4,
+
+				treeview-link: (
+					background-color: transparent,
+					border-color: transparent,
+					box-shadow: none,
+				),
+			),
+
+			treeview-dropping-indicator-top: (
+				background-color: transparent,
+				display: block,
+				height: 2px,
+				margin-top: -2px,
+				outline: none,
+				width: 100%,
+			),
+
+			treeview-dropping-indicator-bottom: (
+				background-color: transparent,
+				display: block,
+				height: 2px,
+				margin-bottom: -2px,
+				outline: none,
+				width: 100%,
+			),
+
+			treeview-dropping-indicator-over: (
+				background-color: $primary-l0,
+			),
+
+			treeview-link: (
+				background-color: transparent,
+				cursor: pointer,
+				display: block,
+				border-color: transparent,
+				border-style: solid,
+				border-width: 1px,
+				margin-bottom: 2px,
+				margin-top: 2px,
+				min-width: 100%,
+				padding: 0rem,
+				position: relative,
+				text-align: left,
+				user-select: none,
+
+				treeview-dropping-middle: (
+					background-color: $primary-l3,
+					border-color: $primary-l0,
+				),
+
+				hover: (
+					text-decoration: none,
+				),
+
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+					outline: 0,
+				),
+
+				disabled: (
+					cursor: $disabled-cursor,
+				),
+			),
+
+			component-expander: (
+				font-size: 10px,
+			),
+
+			component-action: (
+				font-size: 16px,
+				margin-left: 2px,
+				margin-right: 2px,
+
+				hover: (
+					background-color: transparent,
+					color: $secondary,
+				),
+
+				focus: (
+					color: $secondary,
+				),
+
+				active: (
+					background-color: transparent,
+				),
+			),
+
+			component-icon: (
+				color: $secondary,
+				display: inline-block,
+				font-size: 16px,
+				height: auto,
+				margin: 4px,
+				vertical-align: middle,
+				width: auto,
+
+				lexicon-icon: (
+					display: block,
+				),
+			),
+
+			component-text: (
+				line-height: 24px,
+				padding-left: 4px,
+				user-select: auto,
+			),
+
+			quick-action-item: (
+				margin: 0px 2px,
+				min-height: 0rem,
+				min-width: 0rem,
+			),
+
+			autofit-row: (
+				align-items: center,
+			),
+		),
+		$treeview
+	);
+
+	$treeview-nested-margins: ();
+	$treeview-nested-margins: map-deep-merge(
+		(
+			treeview-group: (
+				treeview-item: (
+					margin-left: 24px,
+				),
+			),
+		),
+		$treeview-nested-margins
+	);
+
+	$treeview-show-component-expander-on-hover: ();
+	$treeview-show-component-expander-on-hover: map-deep-merge(
+		(
+			hover: (
+				component-expander: (
+					opacity: 1,
+					transition: opacity ease-in-out 600ms,
+				),
+			),
+
+			component-expander: (
+				opacity: 0,
+				transition: opacity ease-in-out 450ms,
+			),
+
+			treeview-link: (
+				focus: (
+					component-expander: (
+						opacity: 1,
+						transition: none,
+					),
+				),
+			),
+		),
+		$treeview-show-component-expander-on-hover
+	);
+
+	// Variants
+
+	$treeview-light: ();
+	$treeview-light: map-deep-merge(
+		(
+			component-expander: (
+				color: $secondary,
+
+				disabled: (
+					color: $secondary,
+					opacity: 0.5,
+				),
+
+				btn-secondary: (
+					background-color: $white,
+				),
+			),
+
+			treeview-link: (
+				color: $gray-600,
+
+				treeview-no-hover: (
+					hover: (
+						background-color: transparent,
+						color: $secondary,
+					),
+				),
+
+				hover: (
+					box-shadow: inset 0 0 0 1px $secondary-l0,
+				),
+
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
+
+				active: (
+					background-color: $primary-l3,
+					box-shadow: inset 0 0 0 1px $primary,
+					color: $dark-l2,
+					focus: (
+						box-shadow: $component-focus-inset-box-shadow,
+					),
+				),
+
+				active-class: (
+					background-color: $primary-l3,
+					box-shadow: inset 0 0 0 1px $primary,
+					color: $dark-l2,
+
+					focus: (
+						box-shadow: $component-focus-inset-box-shadow,
+					),
+				),
+
+				disabled: (
+					background-color: transparent,
+					color: unquote('hsl(from #{$gray-600} h s l / 0.5)'),
+				),
+
+				show: (
+					background-color: c-unset,
+					box-shadow: c-unset,
+					color: c-unset,
+				),
+			),
+		),
+		$treeview-light
+	);
+
+	$treeview-dark: ();
+	$treeview-dark: map-deep-merge(
+		(
+			component-expander: (
+				color: $secondary-l1,
+
+				disabled: (
+					color: $secondary-l1,
+					opacity: 0.5,
+				),
+			),
+
+			treeview-link: (
+				color: $secondary-l1,
+
+				treeview-no-hover: (
+					hover: (
+						background-color: transparent,
+						color: $secondary-l1,
+					),
+				),
+
+				hover: (
+					box-shadow: inset 0 0 0 1px $secondary-l0,
+				),
+
+				focus: (
+					box-shadow: $component-focus-inset-box-shadow,
+				),
+
+				active: (
+					background-color: $dark-l2,
+					box-shadow: inset 0 0 0 1px $primary,
+					color: $primary-l3,
+
+					focus: (
+						box-shadow: $component-focus-inset-box-shadow,
+					),
+				),
+
+				active-class: (
+					background-color: $dark-l2,
+					box-shadow: inset 0 0 0 1px $primary,
+					color: $primary-l3,
+
+					focus: (
+						box-shadow: $component-focus-inset-box-shadow,
+					),
+				),
+
+				disabled: (
+					background-color: transparent,
+					color: unquote('hsl(from #{$secondary-l1} h s l / 0.5)'),
+				),
+
+				show: (
+					background-color: c-unset,
+					box-shadow: c-unset,
+					color: c-unset,
+				),
+			),
+
+			component-action: (
+				color: $secondary-l1,
+
+				disabled: (
+					color: $secondary-l1,
+				),
+			),
+		),
+		$treeview-dark
+	);
+}