@clayui/css 3.160.0 → 3.162.0

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

@@ -0,0 +1,321 @@
+$tooltip-bg: var(--tooltip-background-color, $dark-d2) !default;
+$tooltip-border-radius: var(--tooltip-border-radius, $border-radius) !default;
+$tooltip-box-shadow: var(
+	--tooltip-box-shadow,
+	0 1px 4px 0px rgba(0, 0, 0, 0.4)
+) !default;
+$tooltip-color: var(--tooltip-color, $white) !default;
+$tooltip-font-size: var(--tooltip-font-size, 14px) !default;
+$tooltip-margin: var(--tooltip-margin, 0) !default;
+$tooltip-max-width: var(--tooltip-max-width, 230px) !default;
+$tooltip-opacity: var(--tooltip-opacity, 1) !default;
+$tooltip-padding-x: var(--tooltip-padding-x, 12px) !default;
+$tooltip-padding-y: var(--tooltip-padding-y, 12px) !default;
+
+$tooltip-arrow-color: var(--tooltip-arrow-color, $tooltip-bg) !default;
+$tooltip-arrow-height: var(--tooltip-arrow-height, 6.4px) !default;
+$tooltip-arrow-offset: var(--tooltip-arrow-offset, 8px) !default;
+$tooltip-arrow-width: var(--tooltip-arrow-width, 12.8px) !default;
+
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: $line-height-base !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+
+// .tooltip
+
+$tooltip: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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,367 @@
+$treeview: () !default;
+$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: () !default;
+$treeview-nested-margins: map-deep-merge(
+	(
+		treeview-group: (
+			treeview-item: (
+				margin-left: 24px,
+			),
+		),
+	),
+	$treeview-nested-margins
+);
+
+$treeview-show-component-expander-on-hover: () !default;
+$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: () !default;
+$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: () !default;
+$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
+);