@clayui/css 3.60.2 → 3.62.1

package/src/scss/functions/_global-functions.scss

@@ -106,6 +106,28 @@
 	@return null;
 }
 
+/// A function that returns the direct parent selector (e.g., clay-parent('#wrapper .container .row')) will return `.row`.
+/// @param {String} $selector - The full selector
+
+@function clay-parent($selector) {
+	$selector-list: simple-selectors(clay-str-replace('#{$selector}', ' ', ''));
+
+	@return nth($selector-list, length($selector-list));
+}
+
+/// A function that inserts a CSS selector at a specific place (e.g., clay-insert-at('.container', '#content ', '#wrapper .container .row')) will return `#wrapper #content .container .row`.
+/// @param {String} $location - The string to target
+/// @param {String} $insert - The string to insert before the location
+/// @param {String} $selector - The full selector
+
+@function clay-insert-before($location, $insert, $selector: &) {
+	@return clay-str-replace(
+		'#{$selector}',
+		'#{$location}',
+		'#{$insert}#{$location}'
+	);
+}
+
 /// A helper function for displaying warning messages for required variables.
 /// @param {Any} $var - The variable to check
 /// @param {String} $msg['This value is required!'] - The error message to display
@@ -181,13 +203,14 @@
 /// @param {Bool} $custom-gradient[false] - Pass in `true` as the second parameter to this function if using a custom gradient.
 
 @function clay-enable-gradients($gradient, $custom-gradient: false) {
-	$enable: setter(
+	$enable: if(
+		variable-exists(enable-gradients),
+		$enable-gradients,
 		if(
-			variable-exists(enable-gradients),
-			$enable-gradients,
-			$cadmin-enable-gradients
-		),
-		false
+			variable-exists(cadmin-enable-gradients),
+			$cadmin-enable-gradients,
+			false
+		)
 	);
 
 	@if ($enable and $gradient) {
@@ -209,13 +232,10 @@
 /// @param {Number} $radius - The border radius.
 
 @function clay-enable-rounded($radius, $enable: null) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -234,13 +254,10 @@
 	$length: length($shadows);
 	$separator: list-separator($shadows);
 
-	$enable: setter(
-		if(
-			variable-exists(enable-shadows),
-			$enable-shadows,
-			$cadmin-enable-shadows
-		),
-		true
+	$enable: if(
+		variable-exists(enable-shadows),
+		$enable-shadows,
+		if(variable-exists(cadmin-enable-shadows), $cadmin-enable-shadows, true)
 	);
 
 	@if ($length == 2 and $separator == 'comma') {
@@ -262,13 +279,14 @@
 /// @param {List} $transitions - The transitions.
 
 @function clay-enable-transitions($transitions) {
-	$enable: setter(
+	$enable: if(
+		variable-exists(enable-transitions),
+		$enable-transitions,
 		if(
-			variable-exists(enable-transitions),
-			$enable-transitions,
-			$cadmin-enable-transitions
-		),
-		true
+			variable-exists(cadmin-enable-transitions),
+			$cadmin-enable-transitions,
+			true
+		)
 	);
 
 	@if ($enable) {
@@ -366,7 +384,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -396,7 +424,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -422,7 +460,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -445,7 +493,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 	$next: breakpoint-next($name, $breakpoints);
@@ -466,7 +524,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -501,7 +569,11 @@
 		if(
 			variable-exists(yiq-text-dark),
 			$yiq-text-dark,
-			$cadmin-yiq-text-dark
+			if(
+				variable-exists(cadmin-yiq-text-dark),
+				$cadmin-yiq-text-dark,
+				#000
+			)
 		)
 	);
 
@@ -510,7 +582,11 @@
 		if(
 			variable-exists(yiq-text-light),
 			$yiq-text-light,
-			$cadmin-yiq-text-light
+			if(
+				variable-exists(cadmin-yiq-text-light),
+				$cadmin-yiq-text-light,
+				#fff
+			)
 		)
 	);
 
@@ -519,7 +595,11 @@
 		if(
 			variable-exists(yiq-contrasted-threshold),
 			$yiq-contrasted-threshold,
-			$cadmin-yiq-contrasted-threshold
+			if(
+				variable-exists(cadmin-yiq-contrasted-threshold),
+				$cadmin-yiq-contrasted-threshold,
+				150
+			)
 		)
 	);
 
@@ -547,7 +627,7 @@
 		$colors: if(
 			variable-exists(theme-colors),
 			$theme-colors,
-			$cadmin-theme-colors
+			if(variable-exists(cadmin-theme-colors), $cadmin-theme-colors, ())
 		);
 	}
 
@@ -572,21 +652,33 @@
 	$level: 0,
 	$color-interval: null
 ) {
-	$black: setter(if(variable-exists('black'), $black, $cadmin-black), #000);
+	$black: if(
+		variable-exists('black'),
+		$black,
+		if(variable-exists(cadmin-black), $cadmin-black, #000)
+	);
 
-	$white: setter(if(variable-exists('white'), $white, $cadmin-white), #fff);
+	$white: if(
+		variable-exists('white'),
+		$white,
+		if(variable-exists(cadmin-white), $cadmin-white, #fff)
+	);
 
 	$color: theme-color($color-name);
 	$color-base: if($level > 0, $black, $white);
 	$level: abs($level);
 
 	$color-interval: setter(
+		$color-interval,
 		if(
 			variable-exists(theme-color-interval),
 			$theme-color-interval,
-			$cadmin-theme-color-interval
-		),
-		$color-interval
+			if(
+				variable-exists(cadmin-theme-color-interval),
+				$cadmin-theme-color-interval,
+				8%
+			)
+		)
 	);
 
 	@return clay-mix($color-base, $color, $level * $color-interval);
@@ -805,7 +897,11 @@
 		$escaped: if(
 			variable-exists(escaped-characters),
 			$escaped-characters,
-			$cadmin-escaped-characters
+			if(
+				variable-exists(cadmin-escaped-characters),
+				$cadmin-escaped-characters,
+				(('<', '%3c'), ('>', '%3e'), ('#', '%23'))
+			)
 		);
 	}
 

package/src/scss/mixins/_alerts.scss

@@ -80,6 +80,18 @@
 /// 	component-subtitle: (
 /// 		// .alert .component-subtitle
 /// 	),
+/// 	custom-selectors: (
+/// 		// add custom selectors here, see examples below
+/// 		btn-primary: (
+/// 			// .alert .btn-primary
+/// 		),
+/// 		btn-secondary: (
+/// 			// .alert .btn-secondary
+/// 		),
+/// 		'#custom-alert-btn': (
+/// 			// .alert #custom-alert-btn
+/// 		),
+/// 	),
 /// )
 
 @mixin clay-alert-variant($map) {
@@ -236,6 +248,20 @@
 			.component-subtitle {
 				@include clay-text-typography($component-subtitle);
 			}
+
+			@each $key, $properties in map-get($map, custom-selectors) {
+				@if ($key) {
+					$selector: if(
+						starts-with($key, '.') or starts-with($key, '#'),
+						$key,
+						str-insert($key, '.', 1)
+					);
+
+					#{$selector} {
+						@include clay-button-variant($properties);
+					}
+				}
+			}
 		}
 	}
 }

package/src/scss/mixins/_badges.scss

@@ -149,13 +149,14 @@
 	$c-inner: map-merge(
 		(
 			enabled:
-				setter(
+				if(
+					variable-exists(enable-c-inner),
+					$enable-c-inner,
 					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
+						variable-exists(cadmin-enable-c-inner),
+						$cadmin-enable-c-inner,
+						true
+					)
 				),
 		),
 		$c-inner

package/src/scss/mixins/_border-radius.scss

@@ -3,17 +3,18 @@
 		if(
 			variable-exists(border-radius),
 			$border-radius,
-			$cadmin-border-radius
+			if(
+				variable-exists(cadmin-border-radius),
+				$cadmin-border-radius,
+				0.25rem
+			)
 		),
 	$fallback-border-radius: false
 ) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -24,13 +25,10 @@
 }
 
 @mixin border-top-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -40,13 +38,10 @@
 }
 
 @mixin border-right-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -56,13 +51,10 @@
 }
 
 @mixin border-bottom-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -72,13 +64,10 @@
 }
 
 @mixin border-left-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -88,13 +77,10 @@
 }
 
 @mixin border-top-left-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -118,13 +104,10 @@
 }
 
 @mixin border-bottom-right-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {
@@ -133,13 +116,10 @@
 }
 
 @mixin border-bottom-left-radius($radius) {
-	$enable: setter(
-		if(
-			variable-exists(enable-rounded),
-			$enable-rounded,
-			$cadmin-enable-rounded
-		),
-		true
+	$enable: if(
+		variable-exists(enable-rounded),
+		$enable-rounded,
+		if(variable-exists(cadmin-enable-rounded), $cadmin-enable-rounded, true)
 	);
 
 	@if ($enable) {

package/src/scss/mixins/_box-shadow.scss

@@ -6,13 +6,10 @@
 /// @param {Arglist} $shadow
 
 @mixin box-shadow($shadow...) {
-	$enable: setter(
-		if(
-			variable-exists(enable-shadows),
-			$enable-shadows,
-			$cadmin-enable-shadows
-		),
-		true
+	$enable: if(
+		variable-exists(enable-shadows),
+		$enable-shadows,
+		if(variable-exists(cadmin-enable-shadows), $cadmin-enable-shadows, true)
 	);
 
 	@if ($enable) {

package/src/scss/mixins/_breakpoints.scss

@@ -12,7 +12,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -37,7 +47,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -63,7 +83,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 
@@ -95,7 +125,17 @@
 		if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		)
 	);
 

package/src/scss/mixins/_buttons.scss

@@ -553,13 +553,15 @@
 		$mobile-c-inner: map-merge(
 			(
 				enabled:
-					setter(
-						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
+					if(
+						variable-exists(enable-c-inner),
+						$enable-c-inner,
+						$cadmin-enable-c-inner
+							if(
+								variable-exists(cadmin-enable-c-inner),
+								$cadmin-enable-c-inner,
+								true
+							)
 					),
 				margin-bottom: math-sign(map-get($mobile, padding-bottom)),
 				margin-left: math-sign(map-get($mobile, padding-left)),
@@ -569,28 +571,23 @@
 			$mobile-c-inner
 		);
 
-		$unset: setter(
-			if(
-				variable-exists(clay-unset-placeholder),
-				$clay-unset-placeholder,
-				$cadmin-clay-unset-placeholder
-			),
+		$loading-animation: setter(
+			map-get($map, loading-animation),
 			clay-unset-placeholder
 		);
 
-		$loading-animation: setter(map-get($map, loading-animation), $unset);
-
 		$c-inner: setter(map-get($map, c-inner), ());
 		$c-inner: map-merge(
 			(
 				enabled:
-					setter(
+					if(
+						variable-exists(enable-c-inner),
+						$enable-c-inner,
 						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
+							variable-exists(cadmin-enable-c-inner),
+							$cadmin-enable-c-inner,
+							true
+						)
 					),
 				margin-bottom: math-sign(map-get($map, padding-bottom)),
 				margin-left: math-sign(map-get($map, padding-left)),

package/src/scss/mixins/_cards.scss

@@ -1059,7 +1059,11 @@
 					if(
 						variable-exists(card-border-color),
 						$card-border-color,
-						$cadmin-card-border-color
+						if(
+							variable-exists(cadmin-card-border-color),
+							$cadmin-card-border-color,
+							null
+						)
 					)
 				),
 			border-style:
@@ -1144,7 +1148,11 @@
 					if(
 						variable-exists(link-cursor),
 						$link-cursor,
-						$cadmin-link-cursor
+						if(
+							variable-exists(cadmin-link-cursor),
+							$cadmin-link-cursor,
+							null
+						)
 					)
 				),
 		)

package/src/scss/mixins/_close.scss

@@ -330,13 +330,14 @@
 		$c-inner: map-merge(
 			(
 				enabled:
-					setter(
+					if(
+						variable-exists(enable-c-inner),
+						$enable-c-inner,
 						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
+							variable-exists(cadmin-enable-c-inner),
+							$cadmin-enable-c-inner,
+							true
+						)
 					),
 				margin-bottom: math-sign(map-get($map, padding-bottom)),
 				margin-left: math-sign(map-get($map, padding-left)),