@clayui/css 3.159.0 → 3.161.0

package/src/scss/cadmin/variables/_links.scss

@@ -6,23 +6,29 @@ $cadmin-c-link: map-deep-merge(
 		hover: (
 			text-decoration: none,
 		),
+
 		focus: (
 			border-radius: 1px,
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
+
 		c-link-variants: (
 			text-secondary: (
 				color: $cadmin-gray-900 !important,
+
 				hover: (
 					color: $cadmin-black !important,
 				),
+
 				focus: (
 					color: $cadmin-black !important,
 				),
 			),
+
 			text-tertiary: (
 				color: $cadmin-gray-900 !important,
+
 				hover: (
 					color: $cadmin-black !important,
 				),
@@ -38,9 +44,11 @@ $cadmin-component-link: map-deep-merge(
 		border-radius: 1px,
 		color: $cadmin-gray-600,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: clay-darken($cadmin-gray-600, 15%),
 		),
+
 		focus: (
 			color: clay-darken($cadmin-gray-600, 15%),
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -56,9 +64,11 @@ $cadmin-link-primary: map-deep-merge(
 		border-radius: 1px,
 		color: $cadmin-primary,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: clay-darken($cadmin-primary, 15%),
 		),
+
 		focus: (
 			color: clay-darken($cadmin-primary, 15%),
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -74,9 +84,11 @@ $cadmin-link-secondary: map-deep-merge(
 		border-radius: 1px,
 		color: $cadmin-secondary,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			color: $cadmin-gray-900,
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -142,21 +154,26 @@ $cadmin-link-outline: map-deep-merge(
 		padding-top: $cadmin-link-outline-padding-y,
 		transition: $cadmin-link-outline-transition,
 		vertical-align: middle,
+
 		hover: (
 			text-decoration: none,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
+
 		disabled: (
 			box-shadow: none,
+
 			active: (
 				pointer-events: none,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-link-outline
@@ -167,19 +184,23 @@ $cadmin-link-outline-primary: map-deep-merge(
 	(
 		border-color: $cadmin-primary,
 		color: $cadmin-primary,
+
 		hover: (
 			background-color: $cadmin-primary-l3,
 			color: $cadmin-primary,
 		),
+
 		focus: (
 			background-color: $cadmin-primary-l3,
 			color: $cadmin-primary,
 		),
+
 		active: (
 			background-color:
 				clay-lighten(clay-desaturate($cadmin-primary, 42.05), 41.76),
 			color: $cadmin-primary,
 		),
+
 		disabled: (
 			background-color: transparent,
 			color: $cadmin-primary,
@@ -195,18 +216,22 @@ $cadmin-link-outline-secondary: map-deep-merge(
 	(
 		border-color: $cadmin-secondary-l2,
 		color: $cadmin-secondary,
+
 		hover: (
 			background-color: rgba($cadmin-gray-900, 0.03),
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			background-color: rgba($cadmin-gray-900, 0.03),
 			color: $cadmin-gray-900,
 		),
+
 		active: (
 			background-color: rgba($cadmin-gray-900, 0.06),
 			color: $cadmin-gray-900,
 		),
+
 		disabled: (
 			background-color: transparent,
 			color: $cadmin-secondary,
@@ -231,14 +256,15 @@ $cadmin-link-monospaced: map-deep-merge(
 		height: $cadmin-link-monospaced-size,
 		justify-content: center,
 		overflow: hidden,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0px,
+		padding-left: 0px,
+		padding-right: 0px,
+		padding-top: 0px,
 		vertical-align: middle,
 		width: $cadmin-link-monospaced-size,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-link-monospaced
@@ -267,9 +293,11 @@ $cadmin-component-title-link: map-deep-merge(
 		border-radius: 1px,
 		color: $cadmin-gray-900,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: clay-darken($cadmin-gray-900, 15%),
 		),
+
 		focus: (
 			color: clay-darken($cadmin-gray-900, 15%),
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -294,7 +322,7 @@ $cadmin-component-subtitle: map-deep-merge(
 		color: $cadmin-gray-600,
 		font-weight: $cadmin-font-weight-semi-bold,
 		line-height: 1.45,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 	),
 	$cadmin-component-subtitle
 );
@@ -305,9 +333,11 @@ $cadmin-component-subtitle-link: map-deep-merge(
 		border-radius: 1px,
 		color: $cadmin-gray-600,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			color: $cadmin-gray-900,
 			box-shadow: $cadmin-component-focus-box-shadow,
@@ -333,14 +363,14 @@ $cadmin-component-action: map-deep-merge(
 		background-color: transparent,
 		border-color: transparent,
 		border-radius: $cadmin-border-radius,
-		border-width: 0,
+		border-width: 0px,
 		color: $cadmin-secondary,
 		display: inline-flex,
 		font-size: 16px,
 		height: map-get($cadmin-link-monospaced, height),
 		justify-content: center,
 		overflow: hidden,
-		padding: 0,
+		padding: 0px,
 		transition: $cadmin-component-transition,
 		vertical-align: middle,
 		width: map-get($cadmin-link-monospaced, width),
@@ -348,28 +378,33 @@ $cadmin-component-action: map-deep-merge(
 			background-color: rgba($cadmin-gray-900, 0.03),
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			background-color: rgba($cadmin-gray-900, 0.03),
 			box-shadow: $cadmin-component-focus-box-shadow,
 			color: $cadmin-gray-900,
 			outline: 0,
 		),
+
 		active: (
 			background-color: rgba($cadmin-gray-900, 0.06),
 			color: $cadmin-gray-900,
 		),
+
 		disabled: (
 			background-color: transparent,
 			box-shadow: none,
 			color: $cadmin-secondary,
 			cursor: $cadmin-disabled-cursor,
 			opacity: $cadmin-component-disabled-opacity,
+
 			active: (
 				pointer-events: none,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-component-action
@@ -385,8 +420,9 @@ $cadmin-component-icon: map-deep-merge(
 		height: 32px,
 		justify-content: center,
 		width: 32px,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0px,
 		),
 	),
 	$cadmin-component-icon

package/src/scss/cadmin/variables/_list-group.scss

@@ -41,7 +41,7 @@ $cadmin-list-group-item-flex: () !default;
 $cadmin-list-group-item-flex: map-deep-merge(
 	(
 		display: flex,
-		margin-bottom: math-sign($cadmin-list-group-border-width),
+		margin-bottom: calc(#{$cadmin-list-group-border-width} * -1),
 		padding-left: calc(#{$cadmin-list-group-item-padding-x} * 0.5),
 		padding-right: calc(#{$cadmin-list-group-item-padding-x} * 0.5),
 		autofit-col: (
@@ -73,7 +73,7 @@ $cadmin-list-group-header-title: map-deep-merge(
 		font-size: 12px,
 		font-weight: $cadmin-font-weight-semi-bold,
 		line-height: $cadmin-headings-line-height,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 		text-transform: uppercase,
 	),
 	$cadmin-list-group-header-title
@@ -90,9 +90,11 @@ $cadmin-list-group-title-link: map-deep-merge(
 		text-decoration: underline,
 		transition: box-shadow 0.15s ease-in-out,
 		max-width: 100%,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
@@ -108,8 +110,9 @@ $cadmin-list-group-title: map-deep-merge(
 		font-size: 14px,
 		font-weight: $cadmin-font-weight-semi-bold,
 		line-height: 1.45,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 		margin-top: $cadmin-list-group-item-flex-list-group-title-offset-top,
+
 		href: $cadmin-list-group-title-link,
 	),
 	$cadmin-list-group-title
@@ -127,9 +130,11 @@ $cadmin-list-group-subtitle-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
@@ -142,7 +147,8 @@ $cadmin-list-group-subtitle: () !default;
 $cadmin-list-group-subtitle: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
-		margin-bottom: 0,
+		margin-bottom: 0px,
+
 		href: $cadmin-list-group-subtitle-link,
 	),
 	$cadmin-list-group-subtitle
@@ -158,9 +164,11 @@ $cadmin-list-group-text-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
@@ -173,7 +181,8 @@ $cadmin-list-group-text: () !default;
 $cadmin-list-group-text: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
-		margin-bottom: 0,
+		margin-bottom: 0px,
+
 		href: $cadmin-list-group-text-link,
 	),
 	$cadmin-list-group-text
@@ -191,9 +200,11 @@ $cadmin-list-group-subtext-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $cadmin-gray-900,
 		),
+
 		focus: (
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
@@ -206,8 +217,9 @@ $cadmin-list-group-subtext: () !default;
 $cadmin-list-group-subtext: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 		margin-top: 8px,
+
 		href: $cadmin-list-group-subtext-link,
 	),
 	$cadmin-list-group-subtext
@@ -221,7 +233,9 @@ $cadmin-list-group-detail-margin-bottom: null !default;
 $cadmin-list-group-detail-margin-top: null !default;
 
 $cadmin-list-group-link-color: $cadmin-gray-900 !default;
+
 $cadmin-list-group-link-hover-color: $cadmin-list-group-link-color !default;
+
 $cadmin-list-group-link-active-color: $cadmin-list-group-link-color !default;
 
 $cadmin-list-group: () !default;
@@ -235,7 +249,8 @@ $cadmin-list-group: map-deep-merge(
 		font-size: $cadmin-list-group-font-size,
 		margin-bottom: $cadmin-list-group-margin-bottom,
 		margin-top: $cadmin-list-group-margin-top,
-		padding-left: 0,
+		padding-left: 0px,
+
 		list-group: (
 			box-shadow: if($cadmin-list-group-box-shadow != null, none, null),
 		),
@@ -267,8 +282,9 @@ $cadmin-list-group-notification-item-primary: map-deep-merge(
 	(
 		border-left-color: clay-lighten($cadmin-component-active-bg, 22.94),
 		border-left-width: 8px,
-		border-bottom-left-radius: 0,
-		border-top-left-radius: 0,
+		border-bottom-left-radius: 0px,
+		border-top-left-radius: 0px,
+
 		active-border-left-color:
 			clay-lighten($cadmin-component-active-bg, 22.94),
 	),

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

@@ -22,6 +22,7 @@ $cadmin-loading-animation: map-deep-merge(
 		text-align: left,
 		vertical-align: middle,
 		width: 1em,
+
 		before: (
 			animation: cadmin-loading-animation-circle 1s linear infinite,
 			border-radius: 50%,
@@ -35,6 +36,7 @@ $cadmin-loading-animation: map-deep-merge(
 			top: 50%,
 			width: 0.25em,
 		),
+
 		after: (
 			animation: cadmin-loading-animation-circle 1s linear infinite,
 			background-color: currentColor,
@@ -42,9 +44,11 @@ $cadmin-loading-animation: map-deep-merge(
 			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,
@@ -66,6 +70,7 @@ $cadmin-loading-animation-squares: map-deep-merge(
 		text-align: left,
 		vertical-align: middle,
 		width: 1em,
+
 		before: (
 			animation: cadmin-loading-animation-squares-box-1 2.4s ease-in-out
 				infinite,
@@ -75,13 +80,14 @@ $cadmin-loading-animation-squares: map-deep-merge(
 			display: block,
 			font-size: 0.3125em,
 			height: 1em,
-			left: 0,
+			left: 0px,
 			opacity: 0.4,
 			position: absolute,
-			top: 0,
+			top: 0px,
 			transform: scale(1),
 			width: 1em,
 		),
+
 		after: (
 			animation: cadmin-loading-animation-squares-box-2 2.4s ease-in-out
 				infinite,
@@ -98,6 +104,7 @@ $cadmin-loading-animation-squares: map-deep-merge(
 			transform: scale(2),
 			width: 1em,
 		),
+
 		'prefers-reduced-motion': (
 			display: block,
 			height: 1em,
@@ -108,6 +115,7 @@ $cadmin-loading-animation-squares: map-deep-merge(
 			text-align: left,
 			vertical-align: middle,
 			width: 1em,
+
 			'&::before': (
 				animation: loading-animation-circle 1s linear infinite,
 				background-color: transparent,
@@ -126,6 +134,7 @@ $cadmin-loading-animation-squares: map-deep-merge(
 				transform: none,
 				width: 0.25em,
 			),
+
 			'&::after': (
 				animation: loading-animation-circle 1s linear infinite,
 				background-color: currentColor,
@@ -135,9 +144,11 @@ $cadmin-loading-animation-squares: map-deep-merge(
 				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,
@@ -158,12 +169,15 @@ $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,
 		),
@@ -187,9 +201,11 @@ $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