@clayui/css 3.160.0 → 3.161.0

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

@@ -0,0 +1,565 @@
+@if ($enable-atlas-custom-properties) {
+	$popover-bg: var(--popover-background-color, $white);
+	$popover-border-color: var(--popover-border-color, transparent);
+	$popover-border-width: var(--popover-border-width, $border-width);
+
+	$popover-border-radius: var(--popover-border-radius, $border-radius);
+	$popover-inner-border-radius: var(
+		--popover-inner-border-radius,
+		calc(#{$popover-border-radius} - #{$popover-border-width})
+	);
+
+	$popover-box-shadow: var(
+		--popover-box-shadow,
+		0 1px 15px -2px rgba(0, 0, 0, 0.2)
+	);
+	$popover-font-size: var(--popover-font-size, $font-size-sm);
+	$popover-max-width: var(--popover-max-width, 232px);
+
+	$popover-inline-scroller-max-height: var(
+		--popover-inline-scroller-max-height,
+		238px
+	);
+
+	$popover-header-bg: var(--popover-header-background-color, $white);
+	$popover-header-border-color: var(--popover-header-border-color, $gray-300);
+	$popover-header-color: var(--popover-header-color, $gray-900);
+	$popover-header-font-size: var(--popover-header-font-size, 14px);
+	$popover-header-font-weight: var(
+		--popover-header-font-weight,
+		$font-weight-semi-bold
+	);
+	$popover-header-margin-x: var(--popover-header-margin-x, 16px);
+	$popover-header-margin-y: var(--popover-header-margin-y, 0);
+	$popover-header-padding-x: var(--popover-header-padding-x, 0);
+	$popover-header-padding-y: var(--popover-header-padding-y, 12px);
+
+	$popover-body-color: var(--popover-body-color, $gray-600);
+	$popover-body-padding-x: var(--popover-body-padding-x, 16px);
+	$popover-body-padding-y: var(--popover-body-padding-y, 12px);
+
+	$popover-offset-border-width: var(
+		--popover-offset-border-width,
+		$popover-inner-border-radius
+	);
+
+	$popover-arrow-color: var(--popover-arrow-color, $popover-bg);
+	$popover-arrow-height: var(--popover-arrow-height, 4.8px);
+	$popover-arrow-offset: var(--popover-arrow-offset, 10px);
+	$popover-arrow-width: var(
+		--popover-arrow-width,
+		calc(#{$popover-arrow-height} * 2)
+	);
+
+	$popover-arrow-outer-color: var(--popover-arrow-outer-color, transparent);
+
+	$popover-bottom-arrow-color: var(
+		--popover-bottom-arrow-color,
+		$popover-header-bg
+	);
+	$popover-bottom-left-arrow-color: var(
+		--popover-bottom-left-arrow-color,
+		$popover-header-bg
+	);
+	$popover-bottom-right-arrow-color: var(
+		--popover-bottom-right-arrow-color,
+		$popover-header-bg
+	);
+	$popover-left-arrow-color: var(
+		--popover-left-arrow-color,
+		$popover-arrow-color
+	);
+	$popover-left-bottom-arrow-color: var(
+		--popover-left-bottom-arrow-color,
+		$popover-arrow-color
+	);
+	$popover-left-top-arrow-color: var(
+		--popover-left-top-arrow-color,
+		$popover-header-bg
+	);
+	$popover-right-arrow-color: var(
+		--popover-right-arrow-color,
+		$popover-arrow-color
+	);
+	$popover-right-bottom-arrow-color: var(
+		--popover-right-bottom-arrow-color,
+		$popover-arrow-color
+	);
+	$popover-right-top-arrow-color: var(
+		--popover-right-top-arrow-color,
+		$popover-header-bg
+	);
+	$popover-top-arrow-color: var(
+		--popover-top-arrow-color,
+		$popover-arrow-color
+	);
+	$popover-top-left-arrow-color: var(
+		--popover-top-left-arrow-color,
+		$popover-arrow-color
+	);
+	$popover-top-right-arrow-color: var(
+		--popover-top-right-arrow-color,
+		$popover-arrow-color
+	);
+
+	// .popover
+
+	$popover: ();
+	$popover: map-deep-merge(
+		(
+			background-clip: padding-box,
+			background-color: $popover-bg,
+			border:
+				var(
+					--popover-border,
+					$popover-border-width solid $popover-border-color
+				),
+			border-radius: clay-enable-rounded($popover-border-radius),
+			box-shadow: clay-enable-shadows($popover-box-shadow),
+			display: block,
+			font-family: var(--popover-font-family, $font-family-base),
+			font-size: $popover-font-size,
+			font-style: normal,
+			font-weight: var(--popover-font-weight, $font-weight-normal),
+			left: var(--left, 0),
+			letter-spacing: var(--popover-letter-spacing, normal),
+			line-break: auto,
+			line-height: var(--popover-line-height, $line-height-base),
+			max-width: $popover-max-width,
+			position: absolute,
+			text-align: left,
+			text-decoration: none,
+			text-shadow: none,
+			text-transform: none,
+			top: 0,
+			white-space: normal,
+			word-break: normal,
+			word-spacing: normal,
+			word-wrap: break-word,
+
+			focus: (
+				box-shadow: $component-focus-box-shadow,
+				outline: 0,
+			),
+
+			arrow: (
+				display: block,
+				height: $popover-arrow-height,
+				margin: 0 $popover-border-radius,
+				position: absolute,
+				width: $popover-arrow-width,
+
+				before: (
+					border-color: transparent,
+					border-style: solid,
+					content: '',
+					display: block,
+					position: absolute,
+				),
+
+				after: (
+					border-color: transparent,
+					border-style: solid,
+					content: '',
+					display: block,
+					position: absolute,
+				),
+			),
+
+			inline-scroller: (
+				max-height: $popover-inline-scroller-max-height,
+			),
+		),
+		$popover
+	);
+
+	// Popovers
+
+	$popovers: ();
+	$popovers: map-deep-merge(
+		(
+			popover: $popover,
+		),
+		$popovers
+	);
+
+	// .popover-header
+
+	$popover-header: ();
+	$popover-header: map-deep-merge(
+		(
+			color: $popover-header-color,
+			background-color: $popover-header-bg,
+			border-bottom:
+				$popover-border-width
+				solid
+				unquote('hsl(from #{$popover-header-bg} h s calc(l - 5))'),
+			border-color: $popover-header-border-color,
+			border-top-left-radius:
+				clay-enable-rounded($popover-offset-border-width),
+			border-top-right-radius:
+				clay-enable-rounded($popover-offset-border-width),
+			font-size: $popover-header-font-size,
+			font-weight: $popover-header-font-weight,
+			margin-bottom: $popover-header-margin-y,
+			margin-left: $popover-header-margin-x,
+			margin-right: $popover-header-margin-x,
+			margin-top: $popover-header-margin-y,
+			padding: $popover-header-padding-y $popover-header-padding-x,
+
+			empty: (
+				display: none,
+			),
+		),
+		$popover-header
+	);
+
+	// Popover Headers
+
+	$popover-headers: ();
+	$popover-headers: map-deep-merge(
+		(
+			popover-header: $popover-header,
+		),
+		$popover-headers
+	);
+
+	// .popover-body
+
+	$popover-body: ();
+	$popover-body: map-merge(
+		(
+			border-bottom-left-radius:
+				clay-enable-rounded($popover-offset-border-width),
+			border-bottom-right-radius:
+				clay-enable-rounded($popover-offset-border-width),
+			color: $popover-body-color,
+			padding: $popover-body-padding-y $popover-body-padding-x,
+		),
+		$popover-body
+	);
+
+	// Popover Bodies
+
+	$popover-bodies: ();
+	$popover-bodies: map-deep-merge(
+		(
+			popover-body: $popover-body,
+		),
+		$popover-bodies
+	);
+
+	// Popover Widths
+
+	$popover-widths: ();
+	$popover-widths: map-deep-merge(
+		(
+			popover-width-lg: (
+				max-width: var(--popover-width-lg-max-width, 421px),
+			),
+		),
+		$popover-widths
+	);
+
+	// .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
+
+	$clay-popover-top: ();
+	$clay-popover-top: map-deep-merge(
+		(
+			margin-bottom: $popover-arrow-height,
+
+			arrow: (
+				left: 50%,
+				margin-left: calc(#{$popover-arrow-width} * -0.5),
+				bottom:
+					calc(
+						(#{$popover-arrow-height} + #{$popover-border-width}) *
+							-1
+					),
+				margin: 0,
+
+				before: (
+					border-top-color: $popover-arrow-outer-color,
+					border-width:
+						$popover-arrow-height
+						calc(#{$popover-arrow-width} * 0.5)
+						0,
+					bottom: 0,
+				),
+
+				after: (
+					border-top-color: $popover-top-arrow-color,
+					border-width:
+						$popover-arrow-height
+						calc(#{$popover-arrow-width} * 0.5)
+						0,
+					bottom: $popover-border-width,
+				),
+			),
+		),
+		$clay-popover-top
+	);
+
+	// .clay-popover-top-left
+
+	$clay-popover-top-left: ();
+	$clay-popover-top-left: map-deep-merge(
+		(
+			arrow: (
+				left: $popover-arrow-offset,
+				margin: 0,
+
+				after: (
+					border-top-color: $popover-top-left-arrow-color,
+				),
+			),
+		),
+		$clay-popover-top-left
+	);
+
+	// .clay-popover-top-right
+
+	$clay-popover-top-right: ();
+	$clay-popover-top-right: map-deep-merge(
+		(
+			arrow: (
+				left: auto,
+				margin: 0,
+				right: $popover-arrow-offset,
+
+				after: (
+					border-top-color: $popover-top-right-arrow-color,
+				),
+			),
+		),
+		$clay-popover-top-right
+	);
+
+	// .clay-popover-right, .clay-popover-right-bottom, .clay-popover-right-top
+
+	$clay-popover-right: ();
+	$clay-popover-right: map-deep-merge(
+		(
+			margin-left: $popover-arrow-height,
+
+			arrow: (
+				height: $popover-arrow-width,
+				left:
+					calc(
+						(#{$popover-arrow-height} + #{$popover-border-width}) *
+							-1
+					),
+				margin: calc(#{$popover-arrow-height} * -0.5) 0 0,
+				top: 50%,
+				width: $popover-arrow-height,
+
+				before: (
+					border-right-color: $popover-arrow-outer-color,
+					border-width:
+						calc(#{$popover-arrow-width} * 0.5)
+						$popover-arrow-height
+						calc(#{$popover-arrow-width} * 0.5)
+						0,
+					left: 0,
+				),
+
+				after: (
+					border-right-color: $popover-right-arrow-color,
+					border-width:
+						calc(#{$popover-arrow-width} * 0.5)
+						$popover-arrow-height
+						calc(#{$popover-arrow-width} * 0.5)
+						0,
+					left: $popover-border-width,
+				),
+			),
+		),
+		$clay-popover-right
+	);
+
+	// .clay-popover-right-bottom
+
+	$clay-popover-right-bottom: ();
+	$clay-popover-right-bottom: map-deep-merge(
+		(
+			arrow: (
+				bottom: $popover-arrow-offset,
+				margin: 0,
+				top: auto,
+
+				after: (
+					border-right-color: $popover-right-bottom-arrow-color,
+				),
+			),
+		),
+		$clay-popover-right-bottom
+	);
+
+	// .clay-popover-right-top
+
+	$clay-popover-right-top: ();
+	$clay-popover-right-top: map-deep-merge(
+		(
+			arrow: (
+				margin: 0,
+				top: $popover-arrow-offset,
+
+				after: (
+					border-right-color: $popover-right-top-arrow-color,
+				),
+			),
+		),
+		$clay-popover-right-top
+	);
+
+	// .clay-popover-bottom, .clay-popover-bottom-left, .clay-popover-bottom-right
+
+	$clay-popover-bottom: ();
+	$clay-popover-bottom: map-deep-merge(
+		(
+			margin-top: $popover-arrow-height,
+
+			arrow: (
+				left: 50%,
+				margin: 0 0 0 calc(#{$popover-arrow-width} * -0.5),
+				top:
+					calc(
+						(#{$popover-arrow-height} + #{$popover-border-width}) *
+							-1
+					),
+				before: (
+					border-bottom-color: $popover-arrow-outer-color,
+					border-width:
+						0
+						calc(#{$popover-arrow-width} * 0.5)
+						$popover-arrow-height
+						calc(#{$popover-arrow-width} * 0.5),
+					top: 0,
+				),
+
+				after: (
+					border-bottom-color: $popover-bottom-arrow-color,
+					border-width:
+						0
+						calc(#{$popover-arrow-width} * 0.5)
+						$popover-arrow-height
+						calc(#{$popover-arrow-width} * 0.5),
+					top: $popover-border-width,
+				),
+			),
+		),
+		$clay-popover-bottom
+	);
+
+	// .clay-popover-bottom-left
+
+	$clay-popover-bottom-left: ();
+	$clay-popover-bottom-left: map-deep-merge(
+		(
+			arrow: (
+				left: $popover-arrow-offset,
+				margin: 0,
+
+				after: (
+					border-bottom-color: $popover-bottom-left-arrow-color,
+				),
+			),
+		),
+		$clay-popover-bottom-left
+	);
+
+	// .clay-popover-bottom-right
+
+	$clay-popover-bottom-right: ();
+	$clay-popover-bottom-right: map-deep-merge(
+		(
+			arrow: (
+				left: auto,
+				margin: 0,
+				right: $popover-arrow-offset,
+
+				after: (
+					border-bottom-color: $popover-bottom-right-arrow-color,
+				),
+			),
+		),
+		$clay-popover-bottom-right
+	);
+
+	// .clay-popover-left, .clay-popover-left-bottom, .clay-popover-left-top
+
+	$clay-popover-left: ();
+	$clay-popover-left: map-deep-merge(
+		(
+			margin-right: $popover-arrow-height,
+
+			arrow: (
+				height: $popover-arrow-width,
+				margin: calc(#{$popover-arrow-height} * -0.5) 0 0,
+				right:
+					calc(
+						(#{$popover-arrow-height} + #{$popover-border-width}) *
+							-1
+					),
+				top: 50%,
+				width: $popover-arrow-height,
+
+				before: (
+					border-left-color: $popover-arrow-outer-color,
+					border-width:
+						calc(#{$popover-arrow-width} * 0.5)
+						0
+						calc(#{$popover-arrow-width} * 0.5)
+						$popover-arrow-height,
+					right: 0,
+				),
+
+				after: (
+					border-left-color: $popover-left-arrow-color,
+					border-width:
+						calc(#{$popover-arrow-width} * 0.5)
+						0
+						calc(#{$popover-arrow-width} * 0.5)
+						$popover-arrow-height,
+					right: $popover-border-width,
+				),
+			),
+		),
+		$clay-popover-left
+	);
+
+	// .clay-popover-left-bottom
+
+	$clay-popover-left-bottom: ();
+	$clay-popover-left-bottom: map-deep-merge(
+		(
+			arrow: (
+				bottom: $popover-arrow-offset,
+				margin: 0,
+				top: auto,
+
+				after: (
+					border-left-color: $popover-left-bottom-arrow-color,
+				),
+			),
+		),
+		$clay-popover-left-bottom
+	);
+
+	// .clay-popover-left-top
+
+	$clay-popover-left-top: ();
+	$clay-popover-left-top: map-deep-merge(
+		(
+			arrow: (
+				margin: 0,
+				top: $popover-arrow-offset,
+
+				after: (
+					border-left-color: $popover-left-top-arrow-color,
+				),
+			),
+		),
+		$clay-popover-left-top
+	);
+}

package/src/scss/atlas-custom-properties/variables/_progress-bars.scss

@@ -0,0 +1,142 @@
+@if ($enable-atlas-custom-properties) {
+	$progress-bg: var(--progress-background-color, $gray-200);
+	$progress-border-radius: var(--progress-border-radius, 100px);
+	$progress-box-shadow: var(--progress-box-shadow, none);
+	$progress-font-size: var(--progress-font-size, 9px);
+	$progress-height: var(--progress-height, 8px);
+	$progress-min-width: var(--progress-min-width, 100px);
+
+	$progress-bar-animation-timing: var(
+		--progress-bar-animation-timing,
+		1s linear infinite
+	);
+	$progress-bar-bg: var(--progress-bar-background-color, $primary);
+	$progress-bar-box-shadow: var(--progress-bar-box-shadow, null);
+	$progress-bar-color: var(--progress-bar-color, $white);
+	$progress-bar-transition: var(--progress-bar-transition, width 0.6s ease);
+
+	// Progress Sizes
+
+	$progress-border-radius-lg: var(--progress-border-radius-lg, 100px);
+	$progress-font-size-lg: var(--progress-font-size-lg, $font-size-lg);
+	$progress-height-lg: var(
+		--progress-height-lg,
+		calc(#{$progress-height} * 2)
+	);
+
+	// Progress Group
+
+	$progress-group-subtitle: ();
+	$progress-group-subtitle: map-deep-merge(
+		(
+			font-size: var(--progress-group-subtitle-font-size, 12px),
+			font-weight:
+				var(--progress-group-subtitle-font-weight, $font-weight-normal),
+		),
+		$progress-group-subtitle
+	);
+
+	$progress-group-addon-font-size: var(
+		--progress-group-addon-font-size,
+		14px
+	);
+	$progress-group-addon-font-weight: var(
+		--progress-group-addon-font-weight,
+		$font-weight-semi-bold
+	);
+	$progress-group-addon-spacer-x: var(--progress-group-addon-spacer-x, 16px);
+
+	$progress-group-addon: ();
+	$progress-group-addon: map-deep-merge(
+		(
+			font-size: $progress-group-addon-font-size,
+			font-weight: $progress-group-addon-font-weight,
+			margin-right: $progress-group-addon-spacer-x,
+			min-width: var(--progress-group-addon-min-width, 32px),
+			text-align: var(--progress-group-addon-text-align, center),
+			first-child: (
+				padding-left: 0,
+			),
+
+			last-child: (
+				padding-right: 0,
+			),
+		),
+		$progress-group-addon
+	);
+
+	$progress-group-stacked-progress-margin-bottom: var(
+		--progress-group-stacked-progress-margin-bottom,
+		4px
+	);
+	$progress-group-stacked-progress-margin-top: var(
+		--progress-group-stacked-progress-margin-top,
+		4px
+	);
+
+	// Progress Variants
+
+	$progress-group-feedback-color: var(
+		--progress-group-feedback-color,
+		$primary
+	);
+
+	$progress-bar-danger-bg: var(
+		--progress-bar-danger-background-color,
+		$danger
+	);
+	$progress-group-feedback-danger-color: var(
+		--progress-group-feedback-danger-color,
+		$progress-bar-danger-bg
+	);
+
+	$progress-bar-info-bg: var(--progress-bar-info-background-color, $info);
+	$progress-group-feedback-info-color: var(
+		--progress-group-feedback-info-color,
+		$progress-bar-info-bg
+	);
+
+	$progress-bar-success-bg: var(
+		--progress-bar-success-background-color,
+		$success
+	);
+	$progress-group-feedback-success-color: var(
+		--progress-group-feedback-success-color,
+		$progress-bar-success-bg
+	);
+
+	$progress-bar-warning-bg: var(
+		--progress-bar-warning-background-color,
+		$warning
+	);
+	$progress-group-feedback-warning-color: var(
+		--progress-group-feedback-warning-color,
+		$progress-bar-warning-bg
+	);
+
+	$progress-palette: ();
+	$progress-palette: map-deep-merge(
+		(
+			success: (
+				bar-bg: $progress-bar-success-bg,
+				group-feedback-color: $progress-group-feedback-success-color,
+			),
+
+			info: (
+				bar-bg: $progress-bar-info-bg,
+				group-feedback-color: $progress-group-feedback-info-color,
+			),
+
+			warning: (
+				bar-bg: $progress-bar-warning-bg,
+				group-feedback-color: $progress-group-feedback-warning-color,
+			),
+
+			danger: (
+				bar-bg: $progress-bar-danger-bg,
+				group-feedback-color: $progress-group-feedback-danger-color,
+			),
+		),
+		$progress-palette
+	);
+}

package/src/scss/atlas-custom-properties/variables/_quick-action.scss

@@ -0,0 +1,27 @@
+@if ($enable-atlas-custom-properties) {
+	$quick-action-font-size: var(--quick-action-font-size, 16px);
+	$quick-action-padding-x: var(--quick-action-padding-x, 0px);
+	$quick-action-padding-y: var(--quick-action-padding-y, 0px);
+
+	$quick-action-item-margin-x: var(--quick-action-item-margin-x, 8px);
+	$quick-action-item-margin-y: var(--quick-action-item-margin-y, 0px);
+	$quick-action-item-padding-x: var(--quick-action-item-padding-x, 0px);
+	$quick-action-item-padding-y: var(--quick-action-item-padding-y, 0px);
+
+	$quick-action-item-min-height: var(--quick-action-item-min-height, 32px);
+	$quick-action-item-min-width: var(--quick-action-item-min-width, 32px);
+
+	$quick-action-item-border-radius: var(
+		--quick-action-item-border-radius,
+		$border-radius
+	);
+
+	$quick-action-item-disabled-cursor: var(
+		--quick-action-item-disabled-cursor,
+		$disabled-cursor
+	);
+	$quick-action-item-disabled-opacity: var(
+		--quick-action-item-disabled-opacity,
+		$component-disabled-opacity
+	);
+}