@clayui/css 3.41.0 → 3.44.1

package/src/scss/cadmin/variables/_tooltip.scss

@@ -20,3 +20,302 @@ $cadmin-form-feedback-tooltip-line-height: $cadmin-line-height-base !default;
 $cadmin-form-feedback-tooltip-opacity: $cadmin-tooltip-opacity !default;
 $cadmin-form-feedback-tooltip-padding-x: $cadmin-tooltip-padding-x !default;
 $cadmin-form-feedback-tooltip-padding-y: $cadmin-tooltip-padding-y !default;
+
+// .tooltip
+
+$cadmin-tooltip: () !default;
+$cadmin-tooltip: map-deep-merge(
+	(
+		display: block,
+		font-family: $cadmin-font-family-base,
+		font-size: $cadmin-tooltip-font-size,
+		font-style: normal,
+		font-weight: $cadmin-font-weight-normal,
+		letter-spacing: normal,
+		line-break: auto,
+		line-height: $cadmin-line-height-base,
+		margin: $cadmin-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: $cadmin-zindex-tooltip,
+		show: (
+			opacity: $cadmin-tooltip-opacity,
+		),
+		arrow: (
+			display: block,
+			height: $cadmin-tooltip-arrow-height,
+			position: absolute,
+			width: $cadmin-tooltip-arrow-width,
+			before: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
+				position: absolute,
+			),
+		),
+	),
+	$cadmin-tooltip
+);
+
+// .tooltip-inner
+
+$cadmin-tooltip-inner: () !default;
+$cadmin-tooltip-inner: map-merge(
+	(
+		background-color: $cadmin-tooltip-bg,
+		border-radius: clay-enable-rounded($cadmin-tooltip-border-radius),
+		box-shadow: clay-enable-shadows([$cadmin-tooltip-box-shadow]),
+		color: $cadmin-tooltip-color,
+		max-width: $cadmin-tooltip-max-width,
+		padding: $cadmin-tooltip-padding-y $cadmin-tooltip-padding-x,
+		text-align: center,
+		white-space: pre-line,
+	),
+	$cadmin-tooltip-inner
+);
+
+// .clay-tooltip-bottom, .clay-tooltip-bottom-left, .clay-tooltip-bottom-right
+
+$cadmin-clay-tooltip-bottom: () !default;
+$cadmin-clay-tooltip-bottom: map-deep-merge(
+	(
+		padding-top: $cadmin-tooltip-arrow-height,
+		arrow: (
+			left: 50%,
+			margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			top: 0,
+			before: (
+				border-bottom-color: $cadmin-tooltip-arrow-color,
+				border-width: 0
+					(
+						$cadmin-tooltip-arrow-width * 0.5,
+					)
+					$cadmin-tooltip-arrow-height,
+				bottom: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-bottom-color: transparent,
+			border-right-color: transparent,
+			left: 50%,
+			top: 0,
+		),
+	),
+	$cadmin-clay-tooltip-bottom
+);
+
+// .clay-tooltip-bottom-left
+
+$cadmin-clay-tooltip-bottom-left: () !default;
+$cadmin-clay-tooltip-bottom-left: map-deep-merge(
+	(
+		arrow: (
+			left: $cadmin-tooltip-arrow-offset,
+			margin-left: 0,
+		),
+	),
+	$cadmin-clay-tooltip-bottom-left
+);
+
+// .clay-tooltip-bottom-right
+
+$cadmin-clay-tooltip-bottom-right: () !default;
+$cadmin-clay-tooltip-bottom-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin-left: 0,
+			right: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-clay-tooltip-bottom-right
+);
+
+// .clay-tooltip-left, .clay-tooltip-left-bottom, .clay-tooltip-left-top
+
+$cadmin-clay-tooltip-left: () !default;
+$cadmin-clay-tooltip-left: map-deep-merge(
+	(
+		padding-right: $cadmin-tooltip-arrow-height,
+		arrow: (
+			height: $cadmin-tooltip-arrow-width,
+			margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			right: 0,
+			top: 50%,
+			width: $cadmin-tooltip-arrow-height,
+			before: (
+				border-left-color: $cadmin-tooltip-arrow-color,
+				border-width: (
+					$cadmin-tooltip-arrow-width * 0.5,
+				)
+				0
+				(
+					$cadmin-tooltip-arrow-width * 0.5,
+				)
+				$cadmin-tooltip-arrow-height,
+				left: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-bottom-color: transparent,
+			border-left-color: transparent,
+			right: 0,
+			top: 50%,
+		),
+	),
+	$cadmin-clay-tooltip-left
+);
+
+// .clay-tooltip-left-bottom
+
+$cadmin-clay-tooltip-left-bottom: () !default;
+$cadmin-clay-tooltip-left-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $cadmin-tooltip-arrow-offset,
+			margin-top: 0,
+			top: auto,
+		),
+	),
+	$cadmin-clay-tooltip-left-bottom
+);
+
+// .clay-tooltip-left-top
+
+$cadmin-clay-tooltip-left-top: () !default;
+$cadmin-clay-tooltip-left-top: map-deep-merge(
+	(
+		arrow: (
+			margin-top: 0,
+			top: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-clay-tooltip-left-top
+);
+
+// .clay-tooltip-right, .clay-tooltip-right-bottom, .clay-tooltip-right-top
+
+$cadmin-clay-tooltip-right: () !default;
+$cadmin-clay-tooltip-right: map-deep-merge(
+	(
+		padding-left: $cadmin-tooltip-arrow-height,
+		arrow: (
+			height: $cadmin-tooltip-arrow-width,
+			left: 0,
+			margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			top: 50%,
+			width: $cadmin-tooltip-arrow-height,
+			before: (
+				border-right-color: $cadmin-tooltip-arrow-color,
+				border-width: (
+					$cadmin-tooltip-arrow-width * 0.5,
+				)
+				$cadmin-tooltip-arrow-height
+				(
+					$cadmin-tooltip-arrow-width * 0.5,
+				)
+				0,
+				right: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-right-color: transparent,
+			border-top-color: transparent,
+			left: 0,
+			top: 50%,
+		),
+	),
+	$cadmin-clay-tooltip-right
+);
+
+// .clay-tooltip-right-bottom
+
+$cadmin-clay-tooltip-right-bottom: () !default;
+$cadmin-clay-tooltip-right-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $cadmin-tooltip-arrow-offset,
+			margin-top: 0,
+			top: auto,
+		),
+	),
+	$cadmin-clay-tooltip-right-bottom
+);
+
+// .clay-tooltip-right-top
+
+$cadmin-clay-tooltip-right-top: () !default;
+$cadmin-clay-tooltip-right-top: map-deep-merge(
+	(
+		arrow: (
+			margin-top: 0,
+			top: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-clay-tooltip-right-top
+);
+
+// .clay-tooltip-top, .clay-tooltip-top-left, .clay-tooltip-top-right
+
+$cadmin-tooltip-top: () !default;
+$cadmin-tooltip-top: map-deep-merge(
+	(
+		padding-bottom: $cadmin-tooltip-arrow-height,
+		arrow: (
+			bottom: 0,
+			left: 50%,
+			margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5),
+			before: (
+				border-top-color: $cadmin-tooltip-arrow-color,
+				border-width: $cadmin-tooltip-arrow-height
+					(
+						$cadmin-tooltip-arrow-width * 0.5,
+					)
+					0,
+				top: 0,
+			),
+		),
+		tooltip-arrow: (
+			border-left-color: transparent,
+			border-top-color: transparent,
+			bottom: 0,
+			left: 50%,
+		),
+	),
+	$cadmin-tooltip-top
+);
+
+// .clay-tooltip-top-left
+
+$cadmin-tooltip-top-left: () !default;
+$cadmin-tooltip-top-left: map-deep-merge(
+	(
+		arrow: (
+			left: $cadmin-tooltip-arrow-offset,
+			margin-left: 0,
+		),
+	),
+	$cadmin-tooltip-top-left
+);
+
+// .clay-tooltip-top-right
+
+$cadmin-tooltip-top-right: () !default;
+$cadmin-tooltip-top-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin-left: 0,
+			right: $cadmin-tooltip-arrow-offset,
+		),
+	),
+	$cadmin-tooltip-top-right
+);

package/src/scss/components/_button-groups.scss

@@ -106,8 +106,8 @@
 // Makes .btn narrower
 
 .dropdown-toggle-split {
-	padding-left: $btn-padding-x * 0.75;
-	padding-right: $btn-padding-x * 0.75;
+	padding-left: calc(#{$btn-padding-x} * 0.75);
+	padding-right: calc(#{$btn-padding-x} * 0.75);
 
 	@if ($enable-caret) {
 		&::after,
@@ -123,13 +123,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-	padding-right: $btn-padding-x-sm * 0.75;
-	padding-left: $btn-padding-x-sm * 0.75;
+	padding-right: calc(#{$btn-padding-x-sm} * 0.75);
+	padding-left: calc(#{$btn-padding-x-sm} * 0.75);
 }
 
 .btn-lg + .dropdown-toggle-split {
-	padding-right: $btn-padding-x-lg * 0.75;
-	padding-left: $btn-padding-x-lg * 0.75;
+	padding-right: calc(#{$btn-padding-x-lg} * 0.75);
+	padding-left: calc(#{$btn-padding-x-lg} * 0.75);
 }
 
 // Button Group Vertical

package/src/scss/components/_buttons.scss

@@ -18,20 +18,26 @@ fieldset:disabled a.btn {
 
 // Button Sizes
 
-%clay-btn-lg {
-	@include clay-button-variant($btn-lg);
-}
-
-.btn-lg {
-	@extend %clay-btn-lg !optional;
-}
-
-%clay-btn-sm {
-	@include clay-button-variant($btn-sm);
-}
+@each $size, $value in $btn-sizes {
+	$placeholder: if(
+		starts-with($size, 'btn-'),
+		'%clay-#{$size}',
+		'%#{str-slice($size, 2)}'
+	);
+
+	$selector: if(
+		starts-with($size, 'btn-'),
+		clay-str-replace($size, 'btn-', '.btn-'),
+		$size
+	);
+
+	#{$placeholder} {
+		@include clay-button-variant($value);
+	}
 
-.btn-sm {
-	@extend %clay-btn-sm !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Button Block
@@ -67,65 +73,97 @@ input[type='button'] {
 
 // Button Monospaced
 
-.btn-monospaced {
-	@include clay-button-variant($btn-monospaced);
-
-	&.btn .lexicon-icon {
-		margin-top: 0;
+@each $size, $value in $btn-monospaced-sizes {
+	$placeholder: if(
+		starts-with($size, 'btn-monospaced'),
+		'%clay-#{$size}',
+		'%#{str-slice($size, 2)}'
+	);
+
+	$selector: if(
+		starts-with($size, 'btn-monospaced-'),
+		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
+		if(
+			$size == 'btn-monospaced',
+			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
+			$size
+		)
+	);
+
+	#{$placeholder} {
+		@include clay-button-variant($value);
 	}
-}
 
-%clay-btn-monospaced-lg {
-	@include clay-button-variant($btn-monospaced-lg);
-}
-
-.btn-monospaced.btn-lg {
-	@extend %clay-btn-monospaced-lg !optional;
-}
-
-%clay-btn-monospaced-sm {
-	@include clay-button-variant($btn-monospaced-sm);
-}
-
-.btn-monospaced.btn-sm {
-	@extend %clay-btn-monospaced-sm !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Button Variants
 
 @each $color, $value in $btn-palette {
-	%btn-#{$color} {
+	$placeholder: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}',
+		'%btn-#{$color}'
+	);
+
+	$placeholder-focus: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}-focus',
+		'%btn-#{$color}-focus'
+	);
+
+	$selector: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		$color,
+		str-insert($color, '.btn-', 1)
+	);
+
+	#{$placeholder} {
 		@include clay-button-variant($value);
 	}
 
-	.btn-#{$color} {
-		@extend %btn-#{$color} !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
 	}
 
-	%btn-#{$color}-focus {
-		background-color: map-get($value, focus-bg);
-		border-color: map-get($value, focus-border-color);
-		box-shadow: map-get($value, focus-box-shadow);
-		color: map-get($value, focus-color);
+	#{$placeholder-focus} {
+		@include clay-button-variant(map-get($value, focus));
 	}
 }
 
 // Button Outline Variants
 
 @each $color, $value in $btn-outline-palette {
-	%btn-outline-#{$color} {
+	$placeholder: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}',
+		'%btn-outline-#{$color}'
+	);
+
+	$placeholder-focus: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}-focus',
+		'%btn-outline-#{$color}-focus'
+	);
+
+	$selector: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		$color,
+		str-insert($color, '.btn-outline-', 1)
+	);
+
+	#{$placeholder} {
 		@include clay-button-variant($value);
 	}
 
-	.btn-outline-#{$color} {
-		@extend %btn-outline-#{$color} !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
 	}
 
-	%btn-outline-#{$color}-focus {
-		background-color: map-get($value, focus-bg);
-		border-color: map-get($value, focus-border-color);
-		box-shadow: map-get($value, focus-box-shadow);
-		color: map-get($value, focus-color);
+	#{$placeholder-focus} {
+		@include clay-button-variant(map-get($value, focus));
 	}
 }
 

package/src/scss/components/_cards.scss

@@ -567,75 +567,18 @@
 // Checkbox and Radio Cards
 
 .form-check-card {
-	margin-bottom: $card-margin-bottom;
-	margin-top: 0;
-	padding-left: 0;
-
-	.card {
-		margin-bottom: 0;
-	}
-
-	.custom-control {
-		display: inline;
-		margin-right: 0;
-		position: static;
-
-		> label {
-			font-weight: $font-weight-normal;
-			padding-left: 0;
-		}
-	}
-
-	.custom-control-input {
-		z-index: 2;
-	}
+	@include clay-form-check-card-variant($form-check-card);
 
-	.custom-control-label {
-		position: absolute;
-		z-index: 1;
-
-		&::before,
-		&::after {
-			top: 0;
-		}
-	}
-
-	.form-check-input {
-		margin-left: 0;
-		margin-top: 0;
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-label {
-		color: $body-color;
-		display: inline;
-		font-weight: $font-weight-normal;
-		padding-left: 0;
-		position: static;
-	}
-
-	&.active .card,
-	.custom-control-input:checked ~ .card,
 	.form-check-input:checked ~ .card {
-		box-shadow: $form-check-card-checked-box-shadow;
-	}
-}
-
-.form-check-card {
-	&:hover {
-		.card {
-			box-shadow: $form-check-card-checked-box-shadow;
-		}
-	}
-}
-
-.custom-control-input,
-.form-check-input {
-	&:hover {
-		~ .card {
-			box-shadow: $form-check-card-checked-box-shadow;
-		}
+		@include clay-card-variant(
+			map-deep-get(
+				$form-check-card,
+				custom-control,
+				custom-control-input,
+				checked,
+				card
+			)
+		);
 	}
 }
 
@@ -660,70 +603,27 @@
 }
 
 .form-check-bottom-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		bottom: $checkbox-position;
-		left: $checkbox-position;
-		top: auto;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-bottom-left);
 }
 
 .form-check-bottom-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		bottom: $checkbox-position;
-		left: auto;
-		right: $checkbox-position;
-		top: auto;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-bottom-right);
 }
 
 .form-check-middle-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: $checkbox-position;
-		margin-top: 0;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+	@include clay-form-check-card-variant($form-check-middle-left);
 }
 
 .form-check-middle-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: auto;
-		margin-top: 0;
-		right: $checkbox-position;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+	@include clay-form-check-card-variant($form-check-middle-right);
 }
 
 .form-check-top-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: $checkbox-position;
-		top: $checkbox-position;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-top-left);
 }
 
 .form-check-top-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: auto;
-		right: $checkbox-position;
-		top: $checkbox-position;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-top-right);
 }
 
 // Card Page

package/src/scss/components/_dropdowns.scss

@@ -424,6 +424,10 @@
 
 // Dropdown Menu Width
 
+.dropdown-menu-width-shrink {
+	@include clay-dropdown-menu-variant($dropdown-menu-width-shrink);
+}
+
 .dropdown-menu-width-full {
 	@include clay-css($dropdown-menu-width-full);
 }