@clayui/css 3.60.1 → 3.62.0

package/src/scss/mixins/_stickers.scss

@@ -113,176 +113,185 @@
 /// - Add @link to documentation
 
 @mixin clay-sticker-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
-
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-			height: setter(map-get($map, size), map-get($map, height)),
-			line-height: setter(map-get($map, size), map-get($map, line-height)),
-			width: setter(map-get($map, size), map-get($map, width)),
-		)
-	);
-
-	$inline-item: setter(map-get($map, inline-item), ());
-	$inline-item: map-merge(
-		$inline-item,
-		(
-			font-size:
-				setter(
-					map-get($map, inline-item-font-size),
-					map-get($inline-item, font-size)
-				),
-		)
-	);
-
-	$outside-offset: setter(
-		map-get($map, outside-offset),
-		if(
-			map-get($map, size),
-			calc(#{math-sign(map-get($map, size))} / 2),
-			null
-		)
-	);
-
-	$sticker-outside: setter(map-get($map, sticker-outside), ());
-
-	$sticker-outside-bottom-left: setter(
-		map-get($sticker-outside, sticker-bottom-left),
-		()
-	);
-	$sticker-outside-bottom-left: map-merge(
-		$sticker-outside-bottom-left,
-		setter(map-get($map, sticker-outside-bottom-left), ())
-	);
-
-	$sticker-outside-bottom-right: setter(
-		map-get($sticker-outside, sticker-bottom-right),
-		()
-	);
-	$sticker-outside-bottom-right: map-merge(
-		$sticker-outside-bottom-right,
-		setter(map-get($map, sticker-outside-bottom-right), ())
-	);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$sticker-outside-top-right: setter(
-		map-get($sticker-outside, sticker-top-right),
-		()
-	);
-	$sticker-outside-top-right: map-merge(
-		$sticker-outside-top-right,
-		setter(map-get($map, sticker-outside-top-right), ())
-	);
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+				height: setter(map-get($map, size), map-get($map, height)),
+				line-height:
+					setter(map-get($map, size), map-get($map, line-height)),
+				width: setter(map-get($map, size), map-get($map, width)),
+			)
+		);
 
-	@if ($outside-offset) {
-		$sticker-outside: map-merge(
-			$sticker-outside,
+		$inline-item: setter(map-get($map, inline-item), ());
+		$inline-item: map-merge(
+			$inline-item,
 			(
-				left: $outside-offset,
-				top: $outside-offset,
+				font-size:
+					setter(
+						map-get($map, inline-item-font-size),
+						map-get($inline-item, font-size)
+					),
+			)
+		);
+
+		$outside-offset: setter(
+			map-get($map, outside-offset),
+			if(
+				map-get($map, size),
+				calc(#{math-sign(map-get($map, size))} / 2),
+				null
 			)
 		);
 
+		$sticker-outside: setter(map-get($map, sticker-outside), ());
+
+		$sticker-outside-bottom-left: setter(
+			map-get($sticker-outside, sticker-bottom-left),
+			()
+		);
 		$sticker-outside-bottom-left: map-merge(
 			$sticker-outside-bottom-left,
-			(
-				bottom: $outside-offset,
-				top: auto,
-			)
+			setter(map-get($map, sticker-outside-bottom-left), ())
 		);
 
+		$sticker-outside-bottom-right: setter(
+			map-get($sticker-outside, sticker-bottom-right),
+			()
+		);
 		$sticker-outside-bottom-right: map-merge(
 			$sticker-outside-bottom-right,
-			(
-				bottom: $outside-offset,
-				left: auto,
-				right: $outside-offset,
-				top: auto,
-			)
+			setter(map-get($map, sticker-outside-bottom-right), ())
 		);
 
+		$sticker-outside-top-right: setter(
+			map-get($sticker-outside, sticker-top-right),
+			()
+		);
 		$sticker-outside-top-right: map-merge(
 			$sticker-outside-top-right,
-			(
-				left: auto,
-				right: $outside-offset,
-			)
+			setter(map-get($map, sticker-outside-top-right), ())
 		);
-	}
-
-	@if ($enabled) {
-		@include clay-css($base);
 
-		> .inline-item {
-			@include clay-css($inline-item);
-
-			.lexicon-icon {
-				@include clay-css(
-					setter(map-deep-get($map, inline-item, lexicon-icon), ())
-				);
-			}
+		@if ($outside-offset) {
+			$sticker-outside: map-merge(
+				$sticker-outside,
+				(
+					left: $outside-offset,
+					top: $outside-offset,
+				)
+			);
+
+			$sticker-outside-bottom-left: map-merge(
+				$sticker-outside-bottom-left,
+				(
+					bottom: $outside-offset,
+					top: auto,
+				)
+			);
+
+			$sticker-outside-bottom-right: map-merge(
+				$sticker-outside-bottom-right,
+				(
+					bottom: $outside-offset,
+					left: auto,
+					right: $outside-offset,
+					top: auto,
+				)
+			);
+
+			$sticker-outside-top-right: map-merge(
+				$sticker-outside-top-right,
+				(
+					left: auto,
+					right: $outside-offset,
+				)
+			);
 		}
 
-		.lexicon-icon {
-			@include clay-css(setter(map-get($map, lexicon-icon), ()));
-		}
+		@if ($enabled) {
+			@include clay-css($base);
 
-		.sticker-img {
-			@include clay-css(setter(map-get($map, sticker-img), ()));
-		}
-
-		.sticker-overlay {
-			@include clay-css(setter(map-get($map, sticker-overlay), ()));
-		}
+			> .inline-item {
+				@include clay-css($inline-item);
 
-		&.rounded {
-			@include clay-css(setter(map-get($map, rounded), ()));
+				.lexicon-icon {
+					@include clay-css(
+						setter(
+							map-deep-get($map, inline-item, lexicon-icon),
+							()
+						)
+					);
+				}
+			}
 
-			.sticker-overlay {
-				@include clay-css(
-					setter(map-deep-get($map, rounded, sticker-overlay), ())
-				);
+			.lexicon-icon {
+				@include clay-css(setter(map-get($map, lexicon-icon), ()));
 			}
-		}
 
-		&.rounded-circle {
-			@include clay-css(setter(map-get($map, rounded-circle), ()));
+			.sticker-img {
+				@include clay-css(setter(map-get($map, sticker-img), ()));
+			}
 
 			.sticker-overlay {
-				@include clay-css(
-					setter(
-						map-deep-get($map, rounded-circle, sticker-overlay),
-						()
-					)
-				);
+				@include clay-css(setter(map-get($map, sticker-overlay), ()));
 			}
-		}
 
-		&.rounded-0 {
-			@include clay-css(setter(map-get($map, rounded-0), ()));
+			&.rounded {
+				@include clay-css(setter(map-get($map, rounded), ()));
 
-			.sticker-overlay {
-				@include clay-css(
-					setter(map-deep-get($map, rounded-0, sticker-overlay), ())
-				);
+				.sticker-overlay {
+					@include clay-css(
+						setter(map-deep-get($map, rounded, sticker-overlay), ())
+					);
+				}
 			}
-		}
-
-		&.sticker-outside {
-			@include clay-css($sticker-outside);
 
-			&.sticker-bottom-left {
-				@include clay-css($sticker-outside-bottom-left);
+			&.rounded-circle {
+				@include clay-css(setter(map-get($map, rounded-circle), ()));
+
+				.sticker-overlay {
+					@include clay-css(
+						setter(
+							map-deep-get($map, rounded-circle, sticker-overlay),
+							()
+						)
+					);
+				}
 			}
 
-			&.sticker-bottom-right {
-				@include clay-css($sticker-outside-bottom-right);
+			&.rounded-0 {
+				@include clay-css(setter(map-get($map, rounded-0), ()));
+
+				.sticker-overlay {
+					@include clay-css(
+						setter(
+							map-deep-get($map, rounded-0, sticker-overlay),
+							()
+						)
+					);
+				}
 			}
 
-			&.sticker-top-right {
-				@include clay-css($sticker-outside-top-right);
+			&.sticker-outside {
+				@include clay-css($sticker-outside);
+
+				&.sticker-bottom-left {
+					@include clay-css($sticker-outside-bottom-left);
+				}
+
+				&.sticker-bottom-right {
+					@include clay-css($sticker-outside-bottom-right);
+				}
+
+				&.sticker-top-right {
+					@include clay-css($sticker-outside-top-right);
+				}
 			}
 		}
 	}

package/src/scss/mixins/_tbar.scss

@@ -67,6 +67,17 @@
 /// - Add @link to documentation
 
 @mixin clay-tbar-variant($map) {
+	$enable-c-inner: if(
+		variable-exists(enable-c-inner),
+		$enable-c-inner,
+		if
+			(
+				variable-exists(cadmin-enable-c-inner),
+				$cadmin-enable-c-inner,
+				true
+			)
+	);
+
 	$base: map-merge(
 		$map,
 		(
@@ -190,15 +201,7 @@
 	$btn-c-inner: setter(map-get($map, btn-c-inner), ());
 	$btn-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin-bottom: math-sign(map-get($btn, padding-bottom)),
 			margin-left: math-sign(map-get($btn, padding-left)),
 			margin-right: math-sign(map-get($btn, padding-right)),
@@ -269,15 +272,7 @@
 	$btn-monospaced-c-inner: setter(map-get($map, btn-monospaced-c-inner), ());
 	$btn-monospaced-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin: math-sign(map-get($btn-monospaced, padding)),
 		),
 		$btn-monospaced-c-inner
@@ -330,15 +325,7 @@
 	$link-c-inner: setter(map-get($map, link-c-inner), ());
 	$link-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin-bottom: math-sign(map-get($link, padding-bottom)),
 			margin-left: math-sign(map-get($link, padding-left)),
 			margin-right: math-sign(map-get($link, padding-right)),
@@ -410,15 +397,7 @@
 	);
 	$link-monospaced-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin: math-sign(map-get($link-monospaced, padding)),
 		),
 		$link-monospaced-c-inner

package/src/scss/mixins/_timelines.scss

@@ -5,25 +5,41 @@
 $card-border-width: if(
 	variable-exists(card-border-width),
 	$card-border-width,
-	$cadmin-card-border-width
+	if(
+		variable-exists(cadmin-card-border-width),
+		$cadmin-card-border-width,
+		0px
+	)
 );
 
 $timeline-inner-spacing: if(
 	variable-exists(timeline-inner-spacing),
 	$timeline-inner-spacing,
-	$cadmin-timeline-inner-spacing
+	if(
+		variable-exists(cadmin-timeline-inner-spacing),
+		$cadmin-timeline-inner-spacing,
+		0px
+	)
 );
 
 $timeline-border-width: if(
 	variable-exists(timeline-border-width),
 	$timeline-border-width,
-	$cadmin-timeline-border-width
+	if(
+		variable-exists(cadmin-timeline-border-width),
+		$cadmin-timeline-border-width,
+		1px
+	)
 );
 
 $timeline-border-modifier: if(
 	variable-exists(timeline-border-modifier),
 	$timeline-border-modifier,
-	$cadmin-timeline-border-modifier
+	if(
+		variable-exists(cadmin-timeline-border-modifier),
+		$cadmin-timeline-border-modifier,
+		0px
+	)
 );
 
 /// A mixin that places the `.timeline-item::before` element on the right side. This mixin is used in `.timeline-right`.

package/src/scss/variables/_forms.scss

@@ -525,6 +525,37 @@ $form-control-tag-group-component-action: map-deep-merge(
 	$form-control-tag-group-component-action
 );
 
+// .form-control-tag-group-sm.form-control
+
+$form-control-tag-group-sm: () !default;
+$form-control-tag-group-sm: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius-sm),
+		font-size: $input-font-size-sm,
+		height: auto,
+		line-height: $input-line-height-sm,
+		min-height: $input-height-sm,
+		padding-bottom: 0,
+		padding-left: 0.25rem,
+		padding-right: 0.25rem,
+		padding-top: 0,
+		inline-item: (
+			margin-bottom: 0,
+			margin-top: 0,
+		),
+		label: (
+			margin-bottom: 0.1875rem,
+			margin-right: 0.25rem,
+			margin-top: 0.1875rem,
+		),
+		form-control-inset: (
+			margin-bottom: 0.125rem,
+			margin-top: 0.1875rem,
+		),
+	),
+	$form-control-tag-group-sm
+);
+
 // Form Grid
 
 /// @deprecated as of v3.x with no replacement
@@ -1730,25 +1761,6 @@ $input-group-sm: map-deep-merge(
 		input-group-item: (
 			btn: $input-group-sm-item-btn,
 			btn-monospaced: $input-group-sm-item-btn-monospaced,
-			form-control: (
-				border-radius: clay-enable-rounded($input-border-radius-sm),
-				font-size: $input-font-size-sm,
-				height: auto,
-				line-height: $input-line-height-sm,
-				min-height: $input-height-sm,
-				padding-bottom: 0,
-				padding-left: $input-padding-x-sm,
-				padding-right: $input-padding-x-sm,
-				padding-top: 0,
-				label: (
-					margin-bottom: 0.1875rem,
-					margin-top: 0.1875rem,
-				),
-			),
-			form-control-inset: (
-				margin-bottom: 0.125rem,
-				margin-top: 0.1875rem,
-			),
 			form-file: (
 				btn: (
 					border-radius: clay-enable-rounded($input-border-radius-sm),

package/src/scss/variables/_globals.scss

@@ -189,28 +189,14 @@ $spacers: () !default;
 $spacers: map-deep-merge(
 	(
 		0: 0,
-		1: (
-			$spacer * 0.25,
-		),
-		2: (
-			$spacer * 0.5,
-		),
+		1: $spacer * 0.25,
+		2: $spacer * 0.5,
 		3: $spacer,
-		4: (
-			$spacer * 1.5,
-		),
-		5: (
-			$spacer * 3,
-		),
-		6: (
-			$spacer * 4.5,
-		),
-		7: (
-			$spacer * 6,
-		),
-		8: (
-			$spacer * 7.5,
-		),
+		4: $spacer * 1.5,
+		5: $spacer * 3,
+		6: $spacer * 4.5,
+		7: $spacer * 6,
+		8: $spacer * 7.5,
 	),
 	$spacers
 );

package/src/scss/variables/_loaders.scss

@@ -17,6 +17,7 @@ $loading-animation: map-deep-merge(
 		height: 1em,
 		margin-left: auto,
 		margin-right: auto,
+		overflow: hidden,
 		position: relative,
 		text-align: left,
 		vertical-align: middle,