@clayui/css 3.160.0 → 3.162.0

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

@@ -0,0 +1,533 @@
+$popover-bg: var(--popover-background-color, $white) !default;
+$popover-border-color: var(--popover-border-color, transparent) !default;
+$popover-border-width: var(--popover-border-width, $border-width) !default;
+
+$popover-border-radius: var(--popover-border-radius, $border-radius) !default;
+$popover-inner-border-radius: var(
+	--popover-inner-border-radius,
+	calc(#{$popover-border-radius} - #{$popover-border-width})
+) !default;
+
+$popover-box-shadow: var(
+	--popover-box-shadow,
+	0 1px 15px -2px rgba(0, 0, 0, 0.2)
+) !default;
+$popover-font-size: var(--popover-font-size, $font-size-sm) !default;
+$popover-max-width: var(--popover-max-width, 232px) !default;
+
+$popover-inline-scroller-max-height: var(
+	--popover-inline-scroller-max-height,
+	238px
+) !default;
+
+$popover-header-bg: var(--popover-header-background-color, $white) !default;
+$popover-header-border-color: var(
+	--popover-header-border-color,
+	$gray-300
+) !default;
+$popover-header-color: var(--popover-header-color, $gray-900) !default;
+$popover-header-font-size: var(--popover-header-font-size, 14px) !default;
+$popover-header-font-weight: var(
+	--popover-header-font-weight,
+	$font-weight-semi-bold
+) !default;
+$popover-header-margin-x: var(--popover-header-margin-x, 16px) !default;
+$popover-header-margin-y: var(--popover-header-margin-y, 0) !default;
+$popover-header-padding-x: var(--popover-header-padding-x, 0) !default;
+$popover-header-padding-y: var(--popover-header-padding-y, 12px) !default;
+
+$popover-body-color: var(--popover-body-color, $gray-600) !default;
+$popover-body-padding-x: var(--popover-body-padding-x, 16px) !default;
+$popover-body-padding-y: var(--popover-body-padding-y, 12px) !default;
+
+$popover-offset-border-width: var(
+	--popover-offset-border-width,
+	$popover-inner-border-radius
+) !default;
+
+$popover-arrow-color: var(--popover-arrow-color, $popover-bg) !default;
+$popover-arrow-height: var(--popover-arrow-height, 4.8px) !default;
+$popover-arrow-offset: var(--popover-arrow-offset, 10px) !default;
+$popover-arrow-width: var(
+	--popover-arrow-width,
+	calc(#{$popover-arrow-height} * 2)
+) !default;
+
+$popover-arrow-outer-color: var(
+	--popover-arrow-outer-color,
+	transparent
+) !default;
+
+$popover-bottom-arrow-color: var(
+	--popover-bottom-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-bottom-left-arrow-color: var(
+	--popover-bottom-left-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-bottom-right-arrow-color: var(
+	--popover-bottom-right-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-left-arrow-color: var(
+	--popover-left-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-left-bottom-arrow-color: var(
+	--popover-left-bottom-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-left-top-arrow-color: var(
+	--popover-left-top-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-right-arrow-color: var(
+	--popover-right-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-right-bottom-arrow-color: var(
+	--popover-right-bottom-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-right-top-arrow-color: var(
+	--popover-right-top-arrow-color,
+	$popover-header-bg
+) !default;
+$popover-top-arrow-color: var(
+	--popover-top-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-top-left-arrow-color: var(
+	--popover-top-left-arrow-color,
+	$popover-arrow-color
+) !default;
+$popover-top-right-arrow-color: var(
+	--popover-top-right-arrow-color,
+	$popover-arrow-color
+) !default;
+
+// .popover
+
+$popover: () !default;
+$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: () !default;
+$popovers: map-deep-merge(
+	(
+		popover: $popover,
+	),
+	$popovers
+);
+
+// .popover-header
+
+$popover-header: () !default;
+$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: () !default;
+$popover-headers: map-deep-merge(
+	(
+		popover-header: $popover-header,
+	),
+	$popover-headers
+);
+
+// .popover-body
+
+$popover-body: () !default;
+$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: () !default;
+$popover-bodies: map-deep-merge(
+	(
+		popover-body: $popover-body,
+	),
+	$popover-bodies
+);
+
+// Popover Widths
+
+$popover-widths: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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,149 @@
+$progress-bg: var(--progress-background-color, $gray-200) !default;
+$progress-border-radius: var(--progress-border-radius, 100px) !default;
+$progress-box-shadow: var(--progress-box-shadow, none) !default;
+$progress-font-size: var(--progress-font-size, 9px) !default;
+$progress-height: var(--progress-height, 8px) !default;
+$progress-min-width: var(--progress-min-width, 100px) !default;
+
+$progress-bar-animation-timing: var(
+	--progress-bar-animation-timing,
+	1s linear infinite
+) !default;
+$progress-bar-bg: var(--progress-bar-background-color, $primary) !default;
+$progress-bar-box-shadow: var(--progress-bar-box-shadow, null) !default;
+$progress-bar-color: var(--progress-bar-color, $white) !default;
+$progress-bar-transition: var(
+	--progress-bar-transition,
+	width 0.6s ease
+) !default;
+
+// Progress Sizes
+
+$progress-border-radius-lg: var(--progress-border-radius-lg, 100px) !default;
+$progress-font-size-lg: var(--progress-font-size-lg, $font-size-lg) !default;
+$progress-height-lg: var(
+	--progress-height-lg,
+	calc(#{$progress-height} * 2)
+) !default;
+
+// Progress Group
+
+$progress-group-subtitle: () !default;
+$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
+) !default;
+$progress-group-addon-font-weight: var(
+	--progress-group-addon-font-weight,
+	$font-weight-semi-bold
+) !default;
+$progress-group-addon-spacer-x: var(
+	--progress-group-addon-spacer-x,
+	16px
+) !default;
+
+$progress-group-addon: () !default;
+$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
+) !default;
+$progress-group-stacked-progress-margin-top: var(
+	--progress-group-stacked-progress-margin-top,
+	4px
+) !default;
+
+// Progress Variants
+
+$progress-group-feedback-color: var(
+	--progress-group-feedback-color,
+	$primary
+) !default;
+
+$progress-bar-danger-bg: var(
+	--progress-bar-danger-background-color,
+	$danger
+) !default;
+$progress-group-feedback-danger-color: var(
+	--progress-group-feedback-danger-color,
+	$progress-bar-danger-bg
+) !default;
+
+$progress-bar-info-bg: var(
+	--progress-bar-info-background-color,
+	$info
+) !default;
+$progress-group-feedback-info-color: var(
+	--progress-group-feedback-info-color,
+	$progress-bar-info-bg
+) !default;
+
+$progress-bar-success-bg: var(
+	--progress-bar-success-background-color,
+	$success
+) !default;
+$progress-group-feedback-success-color: var(
+	--progress-group-feedback-success-color,
+	$progress-bar-success-bg
+) !default;
+
+$progress-bar-warning-bg: var(
+	--progress-bar-warning-background-color,
+	$warning
+) !default;
+$progress-group-feedback-warning-color: var(
+	--progress-group-feedback-warning-color,
+	$progress-bar-warning-bg
+) !default;
+
+$progress-palette: () !default;
+$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,28 @@
+$quick-action-font-size: var(--quick-action-font-size, 16px) !default;
+$quick-action-padding-x: var(--quick-action-padding-x, 0px) !default;
+$quick-action-padding-y: var(--quick-action-padding-y, 0px) !default;
+
+$quick-action-item-margin-x: var(--quick-action-item-margin-x, 8px) !default;
+$quick-action-item-margin-y: var(--quick-action-item-margin-y, 0px) !default;
+$quick-action-item-padding-x: var(--quick-action-item-padding-x, 0px) !default;
+$quick-action-item-padding-y: var(--quick-action-item-padding-y, 0px) !default;
+
+$quick-action-item-min-height: var(
+	--quick-action-item-min-height,
+	32px
+) !default;
+$quick-action-item-min-width: var(--quick-action-item-min-width, 32px) !default;
+
+$quick-action-item-border-radius: var(
+	--quick-action-item-border-radius,
+	$border-radius
+) !default;
+
+$quick-action-item-disabled-cursor: var(
+	--quick-action-item-disabled-cursor,
+	$disabled-cursor
+) !default;
+$quick-action-item-disabled-opacity: var(
+	--quick-action-item-disabled-opacity,
+	$component-disabled-opacity
+) !default;