@clayui/css 3.160.0 → 3.161.0

package/src/scss/atlas-custom-properties/variables/_loaders.scss

@@ -0,0 +1,243 @@
+@if ($enable-atlas-custom-properties) {
+	// Loading Animation
+
+	// @deprecated as of v3.x with no replacement
+
+	$loading-icon-font-size: 40px; // 40px
+
+	// @deprecated as of v3.x with no replacement
+
+	$loading-icon-font-size-sm: 16px; // 16px
+
+	// Loading Animation
+
+	$loading-animation: ();
+	$loading-animation: map-deep-merge(
+		(
+			display: var(--loading-animation-display, block),
+			height: var(--loading-animation-height, 1em),
+			margin-left: var(--loading-animation-margin-left, auto),
+			margin-right: var(--loading-animation-margin-right, auto),
+			overflow: var(--loading-animation-overflow, hidden),
+			position: var(--loading-animation-position, relative),
+			text-align: var(--loading-animation-text-align, left),
+			vertical-align: var(--loading-animation-vertical-align, middle),
+			width: var(--loading-animation-width, 1em),
+			before: (
+				animation:
+					var(
+						--loading-animation-before-animation,
+						loading-animation-circle 1s linear infinite
+					),
+				border-radius:
+					var(--loading-animation-before-border-radius, 50%),
+				box-shadow:
+					var(
+						--loading-animation-before-box-shadow,
+						-0.03125em -0.375em 0 0 currentColor
+					),
+				content: var(--loading-animation-before-content, ''),
+				height: var(--loading-animation-before-height, 0.25em),
+				left: var(--loading-animation-before-left, 50%),
+				margin-left:
+					var(--loading-animation-before-margin-left, -0.125em),
+				margin-top:
+					var(--loading-animation-before-margin-top, -0.125em),
+				position: var(--loading-animation-before-position, absolute),
+				top: var(--loading-animation-before-top, 50%),
+				width: var(--loading-animation-before-width, 0.25em),
+			),
+
+			after: (
+				animation:
+					var(
+						--loading-animation-animation,
+						loading-animation-circle 1s linear infinite
+					),
+				background-color:
+					var(--loading-animation-background-color, currentColor),
+				border-radius: var(--loading-animation-border-radius, 50%),
+				content: var(--loading-animation-content, ''),
+				display: var(--loading-animation-display, block),
+				height: var(--loading-animation-height, 1em),
+				-webkit-mask:
+					var(
+						--loading-animation--webkit-mask,
+						#{conic-gradient(transparent 10%, #000),
+						linear-gradient(#000 0 0) content-box}
+					),
+				-webkit-mask-composite:
+					var(--loading-animation--webkit-mask-composite, source-out),
+				mask-composite:
+					var(--loading-animation-mask-composite, subtract),
+				padding: var(--loading-animation-padding, 0.25em),
+				width: var(--loading-animation-width, 1em),
+			),
+		),
+		$loading-animation
+	);
+
+	// .loading-animation-squares
+
+	$loading-animation-squares: ();
+	$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:
+					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(1),
+				width: 1em,
+			),
+
+			after: (
+				animation:
+					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,
+			),
+
+			'prefers-reduced-motion': (
+				display: block,
+				height: 1em,
+				margin-left: auto,
+				margin-right: auto,
+				overflow: hidden,
+				position: relative,
+				text-align: left,
+				vertical-align: middle,
+				width: 1em,
+
+				'&::before': (
+					animation: loading-animation-circle 1s linear infinite,
+					background-color: transparent,
+					border-radius: 50%,
+					box-shadow: -0.03125em -0.375em 0 0 currentColor,
+					content: '',
+					display: block,
+					font-size: inherit,
+					height: 0.25em,
+					left: 50%,
+					margin-left: -0.125em,
+					margin-top: -0.125em,
+					opacity: inherit,
+					position: absolute,
+					top: 50%,
+					transform: none,
+					width: 0.25em,
+				),
+
+				'&::after': (
+					animation: loading-animation-circle 1s linear infinite,
+					background-color: currentColor,
+					border-radius: 50%,
+					content: '',
+					display: block,
+					font-size: inherit,
+					height: 1em,
+					left: auto,
+
+					-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,
+					position: relative,
+					top: auto,
+					transform: none,
+					width: 1em,
+				),
+			),
+		),
+		$loading-animation-squares
+	);
+
+	// Loading Animation Sizes
+
+	$loading-animation-sizes: ();
+	$loading-animation-sizes: map-deep-merge(
+		(
+			loading-animation-xs: (
+				font-size: var(--loading-animation-xs-font-size, 10px),
+			),
+
+			loading-animation-sm: (
+				font-size:
+					var(
+						--loading-animation-sm-font-size,
+						$loading-icon-font-size-sm
+					),
+			),
+
+			loading-animation-md: (
+				font-size: var(--loading-animation-md-font-size, 32px),
+			),
+
+			loading-animation-lg: (
+				font-size: var(--loading-animation-lg-font-size, 64px),
+			),
+		),
+		$loading-animation-sizes
+	);
+
+	// Loading Animation Variants
+
+	$loading-animation-light: ();
+	$loading-animation-light: map-deep-merge(
+		(
+			color: var(--loading-animation-light-color, $white),
+		),
+		$loading-animation-light
+	);
+
+	$loading-animation-palette: ();
+	$loading-animation-palette: map-deep-merge(
+		(
+			loading-animation-primary: (
+				color: var(--loading-animation-primary-color, $primary),
+			),
+
+			loading-animation-secondary: (
+				color: var(--loading-animation-secondary-color, $secondary),
+			),
+
+			loading-animation-light: $loading-animation-light,
+		),
+		$loading-animation-palette
+	);
+}

package/src/scss/atlas-custom-properties/variables/_management-bar.scss

@@ -0,0 +1,153 @@
+@if ($enable-atlas-custom-properties) {
+	$management-bar-base: ();
+	$management-bar-base: map-deep-merge(
+		(
+			border-color: transparent,
+			border-style: solid,
+
+			media-breakpoint-down: (),
+			media-breakpoint-up: (),
+		),
+		$management-bar-base
+	);
+
+	$management-bar-size: ();
+	$management-bar-size: map-deep-merge(
+		(
+			scaling-navbar: true,
+
+			border-bottom-width: 0.0625rem,
+			font-size:
+				if(variable-exists(navbar-font-size), $navbar-font-size, null),
+			height: 4rem,
+			min-height: 4rem,
+			padding-x: 0rem,
+			padding-y: 0rem,
+
+			active-border-bottom-width: 0.25rem,
+
+			height-mobile: 3rem,
+			min-height-mobile: 3rem,
+
+			btn-monospaced-font-size: 1rem,
+
+			link-height: 2rem,
+			link-margin-x: 0.5rem,
+
+			toggler-margin-x: 0.875rem,
+
+			nav-item-dropdown-margin-top: 0rem,
+
+			link-height-mobile: 2rem,
+			link-margin-x-mobile: 0.25rem,
+			link-padding-x-mobile: 0.25rem,
+
+			form-control-height-mobile: 2rem,
+		),
+		$management-bar-size
+	);
+
+	$management-bar-light: ();
+	$management-bar-light: map-deep-merge(
+		(
+			background-color: $light,
+
+			navbar-nav: (
+				nav-link: (
+					color:
+						if(
+							variable-exists(navbar-light-color),
+							$navbar-light-color,
+							unquote('hsl(from #{$black} h s l / 0.5)')
+						),
+					hover: (
+						color:
+							if(
+								variable-exists(navbar-light-hover-color),
+								$navbar-light-hover-color,
+								unquote('hsl(from #{$black} h s l / 0.7)')
+							),
+					),
+
+					active: (
+						color:
+							if(
+								variable-exists(navbar-light-active-color),
+								$navbar-light-active-color,
+								unquote('hsl(from #{$black} h s l / 0.9)')
+							),
+					),
+
+					disabled: (
+						color:
+							if(
+								variable-exists(navbar-light-disabled-color),
+								$navbar-light-disabled-color,
+								unquote('hsl(from #{$black} h s l / 0.3)')
+							),
+						opacity: 1,
+					),
+				),
+			),
+
+			media-breakpoint-down: (),
+			media-breakpoint-up: (),
+		),
+		$management-bar-light
+	);
+
+	$management-bar-primary: ();
+	$management-bar-primary: map-deep-merge(
+		(
+			background-color: $primary-l3,
+			border-color: $primary,
+			color:
+				if(
+					variable-exists(navbar-light-color),
+					$navbar-light-color,
+					unquote('hsl(from #{$black} h s l / 0.5)')
+				),
+			navbar-nav: (
+				nav-link: (
+					color:
+						if(
+							variable-exists(navbar-light-color),
+							$navbar-light-color,
+							unquote('hsl(from #{$black} h s l / 0.5)')
+						),
+					hover: (
+						color:
+							if(
+								variable-exists(navbar-light-hover-color),
+								$navbar-light-hover-color,
+								unquote('hsl(from #{$black} h s l / 0.7)')
+							),
+					),
+
+					active: (
+						color:
+							if(
+								variable-exists(navbar-light-active-color),
+								$navbar-light-active-color,
+								unquote('hsl(from #{$black} h s l / 0.9)')
+							),
+					),
+
+					disabled: (
+						color:
+							if(
+								variable-exists(navbar-light-disabled-color),
+								$navbar-light-disabled-color,
+								unquote('hsl(from #{$black} h s l / 0.3)')
+							),
+						opacity: 1,
+					),
+				),
+			),
+
+			media-breakpoint-down: (),
+			media-breakpoint-up: (),
+		),
+		$management-bar-primary
+	);
+}