@clayui/css 3.59.0 → 3.60.2

package/src/scss/cadmin/variables/_loaders.scss

@@ -1,37 +1,148 @@
+// Loading Animation
+
+/// @deprecated as of v3.x with no replacement
+
 $cadmin-loading-icon-font-size: 40px !default; // 40px
 
-$cadmin-loading-icon-font-size-sm: 20px !default; // 20px
+/// @deprecated as of v3.x with no replacement
+
+$cadmin-loading-icon-font-size-sm: 16px !default; // 16px
 
-// Loading Icon Dotted
+// Loading Animation
 
 $cadmin-loading-animation: () !default;
 $cadmin-loading-animation: map-deep-merge(
 	(
+		display: block,
+		height: 1em,
+		margin-left: auto,
+		margin-right: auto,
+		overflow: hidden,
+		position: relative,
+		text-align: left,
+		vertical-align: middle,
+		width: 1em,
+		before: (
+			animation: cadmin-loading-animation-circle 1s linear infinite,
+			border-radius: 50%,
+			box-shadow: -0.03125em -0.375em 0 0 currentColor,
+			content: '',
+			height: 0.25em,
+			left: 50%,
+			margin-left: -0.125em,
+			margin-top: -0.125em,
+			position: absolute,
+			top: 50%,
+			width: 0.25em,
+		),
 		after: (
-			animation: 1.2s ease-out infinite,
-			animation-name: loading-animation,
+			animation: cadmin-loading-animation-circle 1s linear infinite,
+			background-color: currentColor,
 			border-radius: 50%,
-			color: $cadmin-gray-600,
 			content: '',
 			display: block,
 			height: 1em,
+			-webkit-mask: #{conic-gradient(transparent 10%, #000),
+			linear-gradient(#000 0 0) content-box},
+			-webkit-mask-composite: source-out,
+			mask-composite: subtract,
+			padding: 0.25em,
+			width: 1em,
+		),
+	),
+	$cadmin-loading-animation
+);
+
+// .loading-animation-squares
+
+$cadmin-loading-animation-squares: () !default;
+$cadmin-loading-animation-squares: map-deep-merge(
+	(
+		display: block,
+		height: 1em,
+		margin-left: auto,
+		margin-right: auto,
+		position: relative,
+		text-align: left,
+		vertical-align: middle,
+		width: 1em,
+		before: (
+			animation: cadmin-loading-animation-squares-box-1 2.4s ease-in-out
+				infinite,
+			background-color: currentColor,
+			border-radius: 0.2em,
+			content: '',
+			display: block,
+			font-size: 0.3125em,
+			height: 1em,
 			left: 0,
+			opacity: 0.4,
 			position: absolute,
 			top: 0,
-			transform: scale(0.33334),
+			transform: scale(1),
+			width: 1em,
+		),
+		after: (
+			animation: cadmin-loading-animation-squares-box-2 2.4s ease-in-out
+				infinite,
+			background-color: currentColor,
+			border-radius: 0.2em,
+			content: '',
+			display: block,
+			font-size: 0.3125em,
+			height: 1em,
+			left: calc(100% - 1.5em),
+			opacity: 1,
+			position: absolute,
+			top: calc(100% - 1.5em),
+			transform: scale(2),
 			width: 1em,
 		),
 	),
-	$cadmin-loading-animation
+	$cadmin-loading-animation-squares
+);
+
+// Loading Animation Sizes
+
+$cadmin-loading-animation-sizes: () !default;
+$cadmin-loading-animation-sizes: map-deep-merge(
+	(
+		loading-animation-xs: (
+			font-size: 10px,
+		),
+		loading-animation-sm: (
+			font-size: $cadmin-loading-icon-font-size-sm,
+		),
+		loading-animation-md: (
+			font-size: 32px,
+		),
+		loading-animation-lg: (
+			font-size: 64px,
+		),
+	),
+	$cadmin-loading-animation-sizes
 );
 
+// Loading Animation Variants
+
 $cadmin-loading-animation-light: () !default;
 $cadmin-loading-animation-light: map-deep-merge(
 	(
-		after: (
-			animation-name: loading-animation-light,
-			color: $cadmin-white,
-		),
+		color: $cadmin-white,
 	),
 	$cadmin-loading-animation-light
 );
+
+$cadmin-loading-animation-palette: () !default;
+$cadmin-loading-animation-palette: map-deep-merge(
+	(
+		loading-animation-primary: (
+			color: $cadmin-primary,
+		),
+		loading-animation-secondary: (
+			color: $cadmin-secondary,
+		),
+		loading-animation-light: $cadmin-loading-animation-light,
+	),
+	$cadmin-loading-animation-palette
+);

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,158 @@ $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,
+		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/_utilities.scss

@@ -125,7 +125,28 @@ $cadmin-heading-text-margin-top: auto !default;
 $cadmin-inline-item-lexicon-icon-margin-top: -0.1em !default;
 $cadmin-inline-item-spacer-x: 8px !default; // 8px
 
-$cadmin-inline-item-loading-animation-font-size: 1.25em !default;
+$cadmin-inline-item-loading-animation-font-size: null !default;
+
+$cadmin-inline-item: () !default;
+$cadmin-inline-item: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		vertical-align: middle,
+		inline-item: (
+			display: inline,
+		),
+		lexicon-icon: (
+			margin-top: $cadmin-inline-item-lexicon-icon-margin-top,
+		),
+		loading-animation: (
+			font-size: $cadmin-inline-item-loading-animation-font-size,
+		),
+	),
+	$cadmin-inline-item
+);
+
+// Page Header
 
 $cadmin-page-header-bg: $cadmin-white !default;
 

package/src/scss/components/_loaders.scss

@@ -1,35 +1,115 @@
-.loading-animation {
-	display: block;
-	font-size: $loading-icon-font-size;
-	height: 1em;
-	margin-left: auto;
-	margin-right: auto;
-	position: relative;
-	text-align: left;
-	vertical-align: middle;
-	width: 1em;
+// Loading Animation Circle
+
+@keyframes loading-animation-circle {
+	100% {
+		transform: rotate(360deg);
+	}
 }
 
-// Loading Icon Dotted
+// Loading Animation
 
 %loading-animation {
-	@include clay-loading-animation-variant($loading-animation);
-}
-
-%loading-animation-light {
-	@include clay-loading-animation-variant($loading-animation-light);
+	@include clay-spinner-variant($loading-animation);
 }
 
 .loading-animation {
 	@extend %loading-animation !optional;
 }
 
-.loading-animation-light {
-	@extend %loading-animation-light !optional;
+// Loading Animation Squares
+
+@keyframes loading-animation-squares-box-1 {
+	0% {
+		left: 0;
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+	25% {
+		left: calc(100% - 1em);
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+	50% {
+		left: calc(100% - 1.5em);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+	75% {
+		left: calc(1em / 2);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+}
+
+@keyframes loading-animation-squares-box-2 {
+	0% {
+		left: calc(100% - 1.5em);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+	25% {
+		left: calc(1em / 2);
+		opacity: 1;
+		top: calc(100% - 1.5em);
+		transform: scale(2);
+	}
+	50% {
+		left: 0;
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+	75% {
+		left: calc(100% - 1em);
+		opacity: 0.4;
+		top: 0;
+		transform: scale(1);
+	}
+}
+
+.loading-animation-squares {
+	@include clay-spinner-variant($loading-animation-squares);
+}
+
+// Loading Animation Sizes
+
+@each $selector, $value in $loading-animation-sizes {
+	$_selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$_selector} {
+		@include clay-spinner-variant($value);
+	}
 }
 
-// Loading Icon Sizes
+// Loading Animation Variants
+
+@each $selector, $value in $loading-animation-palette {
+	$placeholder: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		'%#{str-slice($selector, 2)}',
+		'%#{$selector}'
+	);
+
+	$_selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$placeholder} {
+		@include clay-spinner-variant($value);
+	}
 
-.loading-animation.loading-animation-sm {
-	font-size: $loading-icon-font-size-sm;
+	#{$_selector} {
+		@extend #{$placeholder} !optional;
+	}
 }

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/_utilities.scss

@@ -285,20 +285,18 @@
 // Inline Item
 
 .inline-item {
-	align-items: center;
-	display: inline-flex;
-	vertical-align: middle;
+	@include clay-css($inline-item);
 
 	.inline-item {
-		display: inline;
+		@include clay-css(map-get($inline-item, inline-item));
 	}
 
 	.lexicon-icon {
-		margin-top: $inline-item-lexicon-icon-margin-top;
+		@include clay-css(map-get($inline-item, lexicon-icon));
 	}
 
 	.loading-animation {
-		font-size: $inline-item-loading-animation-font-size;
+		@include clay-css(map-get($inline-item, loading-animation));
 	}
 }
 

package/src/scss/mixins/_globals.scss

@@ -81,6 +81,8 @@
 			'caption-side',
 			'clear',
 			'clip',
+			'-webkit-clip-path',
+			'clip-path',
 			'color',
 			'column-count',
 			'column-fill',
@@ -149,6 +151,24 @@
 			'margin-left',
 			'margin-right',
 			'margin-top',
+			'-webkit-mask',
+			'-webkit-mask-clip',
+			'-webkit-mask-composite',
+			'-webkit-mask-image',
+			'-webkit-mask-mode',
+			'-webkit-mask-origin',
+			'-webkit-mask-position',
+			'-webkit-mask-repeat',
+			'-webkit-mask-size',
+			'mask',
+			'mask-clip',
+			'mask-composite',
+			'mask-image',
+			'mask-mode',
+			'mask-origin',
+			'mask-position',
+			'mask-repeat',
+			'mask-size',
 			'max-height',
 			'max-width',
 			'min-height',