@clayui/css 3.160.0 → 3.161.0

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

@@ -0,0 +1,142 @@
+@if ($enable-atlas-custom-properties) {
+	$clay-time-btn: ();
+	$clay-time-btn: map-deep-merge(
+		(
+			align-items: center,
+			color: $secondary,
+			display: inline-flex,
+			font-size: var(--clay-time-btn-font-size, 12px),
+			height: var(--clay-time-btn-height, 24px),
+			justify-content: center,
+			padding-bottom: 0,
+			padding-left: 0,
+			padding-right: 0,
+			padding-top: 0,
+			width: var(--clay-time-btn-width, 24px),
+			focus: (
+				box-shadow:
+					var(
+						--clay-time-btn-focus-box-shadow,
+						0 0 0 1px $primary-l0
+					),
+			),
+		),
+		$clay-time-btn
+	);
+
+	$clay-time-form-control: ();
+	$clay-time-form-control: map-deep-merge(
+		(
+			align-items: center,
+			display: inline-flex,
+			flex-wrap: wrap,
+			padding-bottom: 2px,
+			padding-top: 2px,
+		),
+		$clay-time-form-control
+	);
+
+	$clay-time-form-control-inset: ();
+	$clay-time-form-control-inset: map-deep-merge(
+		(
+			margin-bottom: 0,
+			margin-left: 0,
+			margin-top: 0,
+			text-align: center,
+			width: 20px,
+			selection-bg: transparent,
+
+			focus: (
+				background-color:
+					var(
+						--clay-time-form-control-inset-focus-background-color,
+						#b3d8fd
+					),
+			),
+		),
+		$clay-time-form-control-inset
+	);
+
+	$clay-time-ampm: ();
+	$clay-time-ampm: map-deep-merge(
+		(
+			font-weight: var(--clay-time-ampm-font-weight, 500),
+			margin-left: var(--clay-time-ampm-margin-left, 4px),
+			text-transform: var(--clay-time-ampm-text-transform, uppercase),
+			width: var(--clay-time-ampm-width, 24px),
+		),
+		$clay-time-ampm
+	);
+
+	$clay-time-input-group-text: ();
+	$clay-time-input-group-text: map-merge(
+		(
+			background-color:
+				var(
+					--clay-time-input-group-text-background-color,
+					setter(
+						map-get($clay-time-input-group-text, bg),
+						transparent
+					)
+				),
+			border-color:
+				var(--clay-time-input-group-text-border-color, transparent),
+			padding-bottom: var(--clay-time-input-group-text-padding-bottom, 0),
+			padding-left: var(--clay-time-input-group-text-padding-left, 0),
+			padding-right: var(--clay-time-input-group-text-padding-right, 0),
+			padding-top: var(--clay-time-input-group-text-padding-top, 0),
+		),
+		$clay-time-input-group-text
+	);
+
+	$clay-time-divider-margin-left: null;
+	$clay-time-divider-margin-right: null;
+
+	$clay-time-edit: ();
+	$clay-time-edit: map-merge(
+		(
+			display: flex,
+			flex-wrap: wrap,
+			margin-right: auto,
+			padding-left: var(--clay-time-edit-padding-left, 8px),
+			padding-right: var(--clay-time-edit-padding-right, 8px),
+		),
+		$clay-time-edit
+	);
+
+	$clay-time-inner-spin: ();
+	$clay-time-inner-spin: map-merge(
+		(
+			border-color:
+				var(--clay-time-inner-spin-border-color, $secondary-l2),
+			border-radius: var(--clay-time-inner-spin-border-radius, 8px),
+			border-style: var(--clay-time-inner-spin-border-style, solid),
+			border-width:
+				var(--clay-time-inner-spin-border-width, $btn-border-width),
+		),
+		$clay-time-inner-spin
+	);
+
+	$clay-time-inner-spin-btn: ();
+	$clay-time-inner-spin-btn: map-deep-merge(
+		(
+			align-items: center,
+			border-radius:
+				var(
+					--clay-time-inner-spin-btn-border-radius,
+					map-get($clay-time-inner-spin, border-radius)
+				),
+			border-width: var(--clay-time-inner-spin-btn-border-width, 0),
+			display: inline-flex,
+			font-size: var(--clay-time-inner-spin-btn-font-size, 8px),
+			height: var(--clay-time-inner-spin-btn-height, auto),
+			justify-content: center,
+			padding-bottom: var(--clay-time-inner-spin-btn-padding-bottom, 2px),
+			padding-left: var(--clay-time-inner-spin-btn-padding-left, 2px),
+			padding-right: var(--clay-time-inner-spin-btn-padding-right, 2px),
+			padding-top: var(--clay-time-inner-spin-btn-padding-top, 2px),
+			width: var(--clay-time-inner-spin-btn-width, auto),
+		),
+		$clay-time-inner-spin-btn
+	);
+}

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

@@ -0,0 +1,43 @@
+@if ($enable-atlas-custom-properties) {
+	$timeline-border-color: var(--timeline-border-color, $gray-900);
+	$timeline-border-width: var(--timeline-border-width, 2px);
+
+	$timeline-border-modifier: calc(
+		#{$timeline-border-width} * 0.5 - #{$panel-border-left-width}
+	);
+
+	$timeline-icon-active-bg: var(
+		--timeline-icon-active-background-color,
+		$component-active-bg
+	);
+	$timeline-icon-active-border-color: var(
+		--timeline-icon-active-border-color,
+		$timeline-icon-active-bg
+	);
+
+	$timeline-icon-bg: var(--timeline-icon-background-color, $body-bg);
+	$timeline-icon-border-color: var(--timeline-icon-border-color, $gray-600);
+	$timeline-icon-border-radius: var(--timeline-icon-border-radius, 50%);
+	$timeline-icon-border-width: var(--timeline-icon-border-width, 2px);
+	$timeline-icon-size: var(--timeline-icon-size, 10px);
+
+	$timeline-increment-bg: var(
+		--timeline-increment-background-color,
+		$body-bg
+	);
+
+	$timeline-item-label-color: var(--timeline-item-label-color, $body-color);
+
+	// Sizes
+
+	$timeline-inner-spacing: var(--timeline-inner-spacing, 40px);
+	$timeline-outer-spacing: var(--timeline-outer-spacing, 25px);
+
+	$timeline-item-padding-bottom: var(--timeline-item-padding-bottom, 5px);
+	$timeline-item-padding-top: var(--timeline-item-padding-top, 5px);
+
+	$timeline-inner-spacing-xl: var(--timeline-inner-spacing-xl, 50px);
+	$timeline-outer-spacing-xl: var(--timeline-outer-spacing-xl, 25px);
+
+	$timeline-item-padding-y-xl: var(--timeline-item-padding-y-xl, 15px);
+}