@clayui/css 3.60.1 → 3.62.0

package/src/scss/cadmin/variables/_sidebar.scss

@@ -77,39 +77,6 @@ $cadmin-sidebar-list-group-sticker-size: map-deep-merge(
 
 // Sidebar Light
 
-$cadmin-sidebar-light: () !default;
-$cadmin-sidebar-light: map-deep-merge(
-	(
-		bg: $cadmin-white,
-		border-color: $cadmin-gray-300,
-		border-left-width: 0,
-		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
-		color: $cadmin-gray-900,
-		dt: (
-			color: $cadmin-gray-600,
-		),
-		dd: (
-			clay-link: (
-				color: $cadmin-gray-900,
-			),
-		),
-		panel-bg: $cadmin-gray-200,
-		panel-unstyled: (
-			header-link: (
-				focus-box-shadow: #{0 0 0 4px $cadmin-white,
-				0 0 0 6px $cadmin-primary-l1},
-			),
-		),
-		sidebar-list-group-title: (
-			font-size: 16px,
-			clay-link: (
-				color: $cadmin-gray-900,
-			),
-		),
-	),
-	$cadmin-sidebar-light
-);
-
 $cadmin-sidebar-light-navigation-bar: () !default;
 $cadmin-sidebar-light-navigation-bar: map-deep-merge(
 	(
@@ -135,42 +102,161 @@ $cadmin-sidebar-light-navigation-bar: map-deep-merge(
 	$cadmin-sidebar-light-navigation-bar
 );
 
+$cadmin-sidebar-light: () !default;
+$cadmin-sidebar-light: map-deep-merge(
+	(
+		background-color: $cadmin-white,
+		border-color: $cadmin-gray-300,
+		border-left-width: 0,
+		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
+		color: $cadmin-gray-900,
+		sidenav-start: (
+			box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1),
+		),
+		sidebar-dt: (
+			color: $cadmin-gray-600,
+		),
+		sidebar-dd: (
+			href: (
+				color: $cadmin-gray-900,
+			),
+		),
+		sidebar-panel: (
+			background-color: $cadmin-gray-200,
+		),
+		panel-unstyled: (
+			header: (
+				link: (
+					focus: (
+						box-shadow: #{0 0 0 4px $cadmin-white,
+						0 0 0 6px $cadmin-primary-l1},
+					),
+				),
+			),
+		),
+		sidebar-list-group: (
+			component-title: (
+				font-size: 16px,
+				href: (
+					color: $cadmin-gray-900,
+				),
+			),
+		),
+		component-navigation-bar: $cadmin-sidebar-light-navigation-bar,
+	),
+	$cadmin-sidebar-light
+);
+
 // Sidebar Dark
 
 $cadmin-sidebar-dark: () !default;
 $cadmin-sidebar-dark: map-deep-merge(
 	(
-		bg: $cadmin-dark,
+		background-color: $cadmin-dark,
 		color: $cadmin-white,
-		component-header-title: (
-			color: inherit,
-			clay-link: (
+		sidebar-header: (
+			component-title: (
 				color: inherit,
+				href: (
+					color: inherit,
+				),
 			),
-		),
-		component-header-subtitle: (
-			color: inherit,
-			clay-link: (
+			component-subtitle: (
 				color: inherit,
+				href: (
+					color: inherit,
+				),
 			),
 		),
 		close: (
 			color: $cadmin-secondary-l1,
-			hover-color: $cadmin-white,
+			hover: (
+				color: $cadmin-white,
+			),
 		),
-		nav-nested-link: (
-			border-radius: $cadmin-border-radius,
-			color: $cadmin-secondary-l1,
-			transition: box-shadow 0.15s ease-in-out,
-			hover-color: $cadmin-white,
-			focus-box-shadow: $cadmin-component-focus-box-shadow,
-			focus-outline: 0,
-			active-color: $cadmin-white,
-			disabled-box-shadow: none,
-			disabled-color: $cadmin-secondary-l1,
-			disabled-opacity: 0.65,
-			disabled-active-pointer-events: none,
+		nav-nested: (
+			nav-link: (
+				border-radius: $cadmin-border-radius,
+				color: $cadmin-secondary-l1,
+				transition: box-shadow 0.15s ease-in-out,
+				hover: (
+					color: $cadmin-white,
+				),
+				focus: (
+					box-shadow: $cadmin-component-focus-box-shadow,
+					outline: 0,
+				),
+				active: (
+					color: $cadmin-white,
+				),
+				disabled: (
+					box-shadow: none,
+					color: $cadmin-secondary-l1,
+					opacity: 0.65,
+					active: (
+						pointer-events: none,
+					),
+				),
+			),
 		),
 	),
 	$cadmin-sidebar-dark
 );
+
+$cadmin-sidebar-palette: () !default;
+$cadmin-sidebar-palette: map-deep-merge(
+	(
+		sidebar-light: $cadmin-sidebar-light,
+		sidebar-dark: $cadmin-sidebar-dark,
+		sidebar-dark-l2: (
+			background-color: $cadmin-dark-l2,
+			color: $cadmin-white,
+			sidebar-header: (
+				component-title: (
+					color: inherit,
+					href: (
+						color: inherit,
+					),
+				),
+				component-subtitle: (
+					color: inherit,
+					href: (
+						color: inherit,
+					),
+				),
+			),
+			close: (
+				color: $cadmin-secondary-l1,
+				hover: (
+					color: $cadmin-white,
+				),
+			),
+			nav-nested: (
+				nav-link: (
+					border-radius: $cadmin-border-radius,
+					color: $cadmin-secondary-l1,
+					transition: box-shadow 0.15s ease-in-out,
+					hover: (
+						color: $cadmin-white,
+					),
+					focus: (
+						box-shadow: $cadmin-component-focus-box-shadow,
+						outline: 0,
+					),
+					active: (
+						color: $cadmin-white,
+					),
+					disabled: (
+						box-shadow: none,
+						color: $cadmin-secondary-l1,
+						opacity: 0.65,
+						active: (
+							pointer-events: none,
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-sidebar-palette
+);

package/src/scss/cadmin/variables/_type.scss

@@ -5,6 +5,20 @@ $cadmin-strong-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-reference-mark-font-size: 12px !default;
 $cadmin-reference-mark-vertical-align: super !default;
 
+$cadmin-reference-mark: () !default;
+$cadmin-reference-mark: map-deep-merge(
+	(
+		display: inline-block,
+		font-size: $cadmin-reference-mark-font-size,
+		position: relative,
+		vertical-align: $cadmin-reference-mark-vertical-align,
+		lexicon-icon: (
+			vertical-align: $cadmin-reference-mark-vertical-align,
+		),
+	),
+	$cadmin-reference-mark
+);
+
 $cadmin-mark-color: null !default;
 
 // C Kbd

package/src/scss/components/_forms.scss

@@ -507,6 +507,16 @@ textarea.form-control-sm,
 	@extend %clay-textarea-form-control-sm !optional;
 }
 
+// .form-control-tag-group-sm
+
+%clay-form-control-tag-group-sm {
+	@include clay-form-control-variant($form-control-tag-group-sm);
+}
+
+.form-control-tag-group-sm.form-control {
+	@extend %clay-form-control-tag-group-sm;
+}
+
 // Fieldset
 
 .form-fieldset {

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

@@ -176,6 +176,15 @@
 			@extend %clay-color-sm-input-group-inset-item-before !optional;
 		}
 	}
+
+	.form-control {
+		@extend %clay-form-control-sm !optional;
+	}
+
+	.form-control-tag-group,
+	&.form-control-tag-group {
+		@extend %clay-form-control-tag-group-sm !optional;
+	}
 }
 
 .input-group-sm {

package/src/scss/components/_side-navigation.scss

@@ -63,6 +63,7 @@
 	z-index: $zindex-sidenav;
 }
 
+.sidenav-end,
 .sidenav-right {
 	> .sidenav-content {
 		left: auto;
@@ -125,6 +126,7 @@
 		width: $sidenav-width;
 	}
 
+	&.sidenav-end,
 	&.sidenav-right {
 		left: auto;
 		right: 0;

package/src/scss/components/_sidebar.scss

@@ -110,14 +110,14 @@
 
 // Sidebar Variants
 
-.sidebar-light {
-	@include clay-sidebar-variant($sidebar-light);
-}
-
-.sidebar-light .component-navigation-bar {
-	@include clay-navbar-variant($sidebar-light-navigation-bar);
-}
-
-.sidebar-dark {
-	@include clay-sidebar-variant($sidebar-dark);
+@each $color, $value in $sidebar-palette {
+	$selector: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		$color,
+		str-insert($color, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-sidebar-variant($value);
+	}
 }

package/src/scss/components/_type.scss

@@ -176,10 +176,11 @@ strong {
 // Reference Mark
 
 .reference-mark {
-	display: inline-block;
-	font-size: $reference-mark-font-size;
-	position: relative;
-	vertical-align: $reference-mark-vertical-align;
+	@include clay-css($reference-mark);
+
+	&.lexicon-icon {
+		@include clay-css(map-get($reference-mark, lexicon-icon));
+	}
 }
 
 // Kbd

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,15 @@
 	$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,
+					if
+						(
+							variable-exists(cadmin-enable-c-inner),
+							$cadmin-enable-c-inner,
+							true
+						)
 				),
 		),
 		$c-inner