@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_links.scss

@@ -10,23 +10,29 @@ $c-link: map-deep-merge(
 		hover: (
 			text-decoration: none,
 		),
+
 		focus: (
 			border-radius: 1px,
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		c-link-variants: (
 			text-secondary: (
 				color: $gray-900 !important,
+
 				hover: (
 					color: $black !important,
 				),
+
 				focus: (
 					color: $black !important,
 				),
 			),
+
 			text-tertiary: (
 				color: $gray-900 !important,
+
 				hover: (
 					color: $black !important,
 					text-decoration: underline,
@@ -41,6 +47,7 @@ $component-link: () !default;
 $component-link: map-deep-merge(
 	(
 		color: $gray-600,
+
 		hover: (
 			color: clay-darken($gray-600, 15%),
 		),
@@ -52,6 +59,7 @@ $link-primary: () !default;
 $link-primary: map-deep-merge(
 	(
 		color: $primary,
+
 		hover: (
 			color: clay-darken($primary, 15%),
 		),
@@ -63,6 +71,7 @@ $link-secondary: () !default;
 $link-secondary: map-deep-merge(
 	(
 		color: $secondary,
+
 		hover: (
 			color: clay-darken($secondary, 15%),
 		),
@@ -150,21 +159,26 @@ $link-outline: map-deep-merge(
 		padding-top: $link-outline-padding-y,
 		transition: $link-outline-transition,
 		vertical-align: middle,
+
 		hover: (
 			text-decoration: none,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		disabled: (
 			box-shadow: none,
+
 			active: (
 				pointer-events: none,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$link-outline
@@ -175,14 +189,17 @@ $link-outline-primary: map-deep-merge(
 	(
 		border-color: $primary,
 		color: $primary,
+
 		hover: (
 			background-color: $primary,
 			color: $white,
 		),
+
 		active: (
 			background-color: $primary,
 			color: $white,
 		),
+
 		disabled: (
 			background-color: transparent,
 			color: $primary,
@@ -198,14 +215,17 @@ $link-outline-secondary: map-deep-merge(
 	(
 		border-color: $secondary,
 		color: $secondary,
+
 		hover: (
 			background-color: $secondary,
 			color: $white,
 		),
+
 		active: (
 			background-color: $secondary,
 			color: $white,
 		),
+
 		disabled: (
 			background-color: transparent,
 			color: $secondary,
@@ -234,14 +254,15 @@ $link-monospaced: map-deep-merge(
 		height: $link-monospaced-size,
 		justify-content: center,
 		overflow: hidden,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 		vertical-align: middle,
 		width: $link-monospaced-size,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$link-monospaced
@@ -284,6 +305,7 @@ $component-title-link: () !default;
 $component-title-link: map-deep-merge(
 	(
 		color: $gray-900,
+
 		hover: (
 			color: clay-darken($gray-900, 15%),
 		),
@@ -304,7 +326,7 @@ $component-subtitle: () !default;
 $component-subtitle: map-deep-merge(
 	(
 		color: $gray-600,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 	),
 	$component-subtitle
 );
@@ -313,6 +335,7 @@ $component-subtitle-link: () !default;
 $component-subtitle-link: map-deep-merge(
 	(
 		color: $gray-600,
+
 		hover: (
 			color: clay-darken($gray-600, 15%),
 		),
@@ -342,7 +365,7 @@ $component-action: map-deep-merge(
 		height: map-get($link-monospaced, height),
 		justify-content: center,
 		overflow: hidden,
-		padding: 0,
+		padding: 0rem,
 		transition: $component-transition,
 		vertical-align: middle,
 		width: map-get($link-monospaced, width),
@@ -350,26 +373,31 @@ $component-action: map-deep-merge(
 			background-color: $secondary,
 			color: $white,
 		),
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		active: (
 			background-color: $secondary,
 			color: $white,
 		),
+
 		disabled: (
 			background-color: transparent,
 			box-shadow: none,
 			color: $secondary,
 			cursor: $disabled-cursor,
 			opacity: $component-disabled-opacity,
+
 			active: (
 				pointer-events: none,
 			),
 		),
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$component-action
@@ -389,8 +417,9 @@ $component-icon: map-deep-merge(
 		height: 32px,
 		justify-content: center,
 		width: 32px,
+
 		lexicon-icon: (
-			margin-top: 0,
+			margin-top: 0rem,
 		),
 	),
 	$component-icon

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

@@ -1,21 +1,19 @@
 $list-group-bg: $white !default;
 $list-group-border-color: rgba($black, 0.125) !default;
-$list-group-border-width: $border-width !default;
-
 $list-group-border-radius: $border-radius !default;
-
+$list-group-border-width: $border-width !default;
 $list-group-box-shadow: null !default;
 $list-group-color: null !default;
 $list-group-font-size: null !default;
 $list-group-margin-bottom: 1.5rem !default;
 $list-group-margin-top: null !default;
 
+$list-group-hover-bg: $gray-100 !default;
+
 // List Group Item Action
 
 $list-group-action-color: $gray-700 !default;
 
-$list-group-hover-bg: $gray-100 !default;
-
 $list-group-action-hover-color: $list-group-action-color !default;
 
 $list-group-action-active-bg: $gray-200 !default;
@@ -29,16 +27,17 @@ $list-group-item-padding-y: 0.75rem !default;
 // Use values flex-start, flex-end, or center
 
 $list-group-item-flex-align-items: flex-start !default;
+$list-group-item-flex-offset-top: 0.0625rem !default;
 
 $list-group-item-flex-checkbox-offset-top: 0.1875rem !default;
-$list-group-item-flex-offset-top: 0.0625rem !default;
+
 $list-group-item-flex-list-group-title-offset-top: -0.25rem !default;
 
 $list-group-item-flex: () !default;
 $list-group-item-flex: map-deep-merge(
 	(
 		display: flex,
-		margin-bottom: math-sign($list-group-border-width),
+		margin-bottom: calc(#{$list-group-border-width} * -1),
 		padding-left: calc(#{$list-group-item-padding-x} * 0.5),
 		padding-right: calc(#{$list-group-item-padding-x} * 0.5),
 		autofit-col: (
@@ -71,7 +70,7 @@ $list-group-header-title: map-deep-merge(
 		font-size: 1rem,
 		font-weight: $font-weight-semi-bold,
 		line-height: $headings-line-height,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 	),
 	$list-group-header-title
 );
@@ -83,6 +82,7 @@ $list-group-title-link: map-deep-merge(
 	(
 		color: $gray-900,
 		max-width: 100%,
+
 		hover: (
 			color: clay-darken($gray-900, 15%),
 		),
@@ -97,8 +97,9 @@ $list-group-title: map-deep-merge(
 		font-size: 1.125rem,
 		font-weight: $font-weight-semi-bold,
 		line-height: $line-height-base,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 		margin-top: $list-group-item-flex-list-group-title-offset-top,
+
 		href: $list-group-title-link
 	),
 	$list-group-title
@@ -112,6 +113,7 @@ $list-group-subtitle-link: () !default;
 $list-group-subtitle-link: map-deep-merge(
 	(
 		color: $gray-600,
+
 		hover: (
 			color: clay-darken($gray-600, 15%),
 		),
@@ -123,7 +125,8 @@ $list-group-subtitle: () !default;
 $list-group-subtitle: map-deep-merge(
 	(
 		color: $gray-600,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
+
 		href: $list-group-subtitle-link,
 	),
 	$list-group-subtitle
@@ -135,6 +138,7 @@ $list-group-text-link: () !default;
 $list-group-text-link: map-deep-merge(
 	(
 		color: $gray-900,
+
 		hover: (
 			color: clay-darken($gray-900, 15%),
 		),
@@ -146,7 +150,8 @@ $list-group-text: () !default;
 $list-group-text: map-deep-merge(
 	(
 		color: $gray-900,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
+
 		href: $list-group-text-link,
 	),
 	$list-group-text
@@ -160,6 +165,7 @@ $list-group-subtext-link: () !default;
 $list-group-subtext-link: map-deep-merge(
 	(
 		color: $gray-600,
+
 		hover: (
 			color: clay-darken($gray-600, 15%),
 		),
@@ -171,7 +177,8 @@ $list-group-subtext: () !default;
 $list-group-subtext: map-deep-merge(
 	(
 		color: $gray-600,
-		margin-bottom: 0,
+		margin-bottom: 0rem,
+
 		href: $list-group-subtext-link,
 	),
 	$list-group-subtext
@@ -185,7 +192,9 @@ $list-group-detail-margin-bottom: null !default;
 $list-group-detail-margin-top: null !default;
 
 $list-group-link-color: null !default;
+
 $list-group-link-hover-color: null !default;
+
 $list-group-link-active-color: $white !default;
 
 $list-group: () !default;
@@ -199,7 +208,8 @@ $list-group: map-deep-merge(
 		font-size: $list-group-font-size,
 		margin-bottom: $list-group-margin-bottom,
 		margin-top: $list-group-margin-top,
-		padding-left: 0,
+		padding-left: 0rem,
+
 		list-group: (
 			box-shadow: if($list-group-box-shadow != null, none, null),
 		),
@@ -222,12 +232,14 @@ $list-group-item-theme-colors: map-deep-merge(
 					clay-darken(theme-color-level(primary, -9), 5%),
 				color: theme-color-level(primary, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(primary, 6),
 				border-color: theme-color-level(primary, 6),
 				color: $white,
 			),
 		),
+
 		'secondary': (
 			background-color: theme-color-level(secondary, -9),
 			color: theme-color-level(secondary, 6),
@@ -236,12 +248,14 @@ $list-group-item-theme-colors: map-deep-merge(
 					clay-darken(theme-color-level(secondary, -9), 5%),
 				color: theme-color-level(secondary, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(secondary, 6),
 				border-color: theme-color-level(secondary, 6),
 				color: $white,
 			),
 		),
+
 		'success': (
 			background-color: theme-color-level(success, -9),
 			color: theme-color-level(success, 6),
@@ -250,12 +264,14 @@ $list-group-item-theme-colors: map-deep-merge(
 					clay-darken(theme-color-level(success, -9), 5%),
 				color: theme-color-level(success, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(success, 6),
 				border-color: theme-color-level(success, 6),
 				color: $white,
 			),
 		),
+
 		'info': (
 			background-color: theme-color-level(info, -9),
 			color: theme-color-level(info, 6),
@@ -263,12 +279,14 @@ $list-group-item-theme-colors: map-deep-merge(
 				background-color: clay-darken(theme-color-level(info, -9), 5%),
 				color: theme-color-level(info, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(info, 6),
 				border-color: theme-color-level(info, 6),
 				color: $white,
 			),
 		),
+
 		'warning': (
 			background-color: theme-color-level(warning, -9),
 			color: theme-color-level(warning, 6),
@@ -277,12 +295,14 @@ $list-group-item-theme-colors: map-deep-merge(
 					clay-darken(theme-color-level(warning, -9), 5%),
 				color: theme-color-level(warning, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(warning, 6),
 				border-color: theme-color-level(warning, 6),
 				color: $white,
 			),
 		),
+
 		'danger': (
 			background-color: theme-color-level(danger, -9),
 			color: theme-color-level(danger, 6),
@@ -290,12 +310,14 @@ $list-group-item-theme-colors: map-deep-merge(
 				background-color: clay-darken(theme-color-level(danger, -9), 5%),
 				color: theme-color-level(danger, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(danger, 6),
 				border-color: theme-color-level(danger, 6),
 				color: $white,
 			),
 		),
+
 		'light': (
 			background-color: theme-color-level(light, -9),
 			color: theme-color-level(light, 6),
@@ -303,12 +325,14 @@ $list-group-item-theme-colors: map-deep-merge(
 				background-color: clay-darken(theme-color-level(light, -9), 5%),
 				color: theme-color-level(light, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(light, 6),
 				border-color: theme-color-level(light, 6),
 				color: $white,
 			),
 		),
+
 		'dark': (
 			background-color: theme-color-level(dark, -9),
 			color: theme-color-level(dark, 6),
@@ -316,6 +340,7 @@ $list-group-item-theme-colors: map-deep-merge(
 				background-color: clay-darken(theme-color-level(dark, -9), 5%),
 				color: theme-color-level(dark, 6),
 			),
+
 			active: (
 				background-color: theme-color-level(dark, 6),
 				border-color: theme-color-level(dark, 6),
@@ -352,6 +377,7 @@ $list-group-notification-item-primary: map-deep-merge(
 		border-left-width: 0.5rem,
 		border-bottom-left-radius: 0px,
 		border-top-left-radius: 0px,
+
 		active-border-left-color: theme-color-level(primary, -9),
 	),
 	$list-group-notification-item-primary

package/src/scss/variables/_loaders.scss

@@ -22,6 +22,7 @@ $loading-animation: map-deep-merge(
 		text-align: left,
 		vertical-align: middle,
 		width: 1em,
+
 		before: (
 			animation: loading-animation-circle 1s linear infinite,
 			border-radius: 50%,
@@ -35,6 +36,7 @@ $loading-animation: map-deep-merge(
 			top: 50%,
 			width: 0.25em,
 		),
+
 		after: (
 			animation: loading-animation-circle 1s linear infinite,
 			background-color: currentColor,
@@ -42,9 +44,11 @@ $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 @@ $loading-animation-squares: map-deep-merge(
 		text-align: left,
 		vertical-align: middle,
 		width: 1em,
+
 		before: (
 			animation: loading-animation-squares-box-1 2.4s ease-in-out infinite,
 			background-color: currentColor,
@@ -74,13 +79,14 @@ $loading-animation-squares: map-deep-merge(
 			display: block,
 			font-size: 0.3125em,
 			height: 1em,
-			left: 0,
+			left: 0rem,
 			opacity: 0.4,
 			position: absolute,
-			top: 0,
+			top: 0rem,
 			transform: scale(1),
 			width: 1em,
 		),
+
 		after: (
 			animation: loading-animation-squares-box-2 2.4s ease-in-out infinite,
 			background-color: currentColor,
@@ -96,6 +102,7 @@ $loading-animation-squares: map-deep-merge(
 			transform: scale(2),
 			width: 1em,
 		),
+
 		'prefers-reduced-motion': (
 			display: block,
 			height: 1em,
@@ -106,6 +113,7 @@ $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,
@@ -124,6 +132,7 @@ $loading-animation-squares: map-deep-merge(
 				transform: none,
 				width: 0.25em,
 			),
+
 			'&::after': (
 				animation: loading-animation-circle 1s linear infinite,
 				background-color: currentColor,
@@ -133,9 +142,11 @@ $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,
@@ -156,12 +167,15 @@ $loading-animation-sizes: map-deep-merge(
 		loading-animation-xs: (
 			font-size: map-get($font-scale, 1),
 		),
+
 		loading-animation-sm: (
 			font-size: $loading-icon-font-size-sm,
 		),
+
 		loading-animation-md: (
 			font-size: 2rem,
 		),
+
 		loading-animation-lg: (
 			font-size: 4rem,
 		),
@@ -185,9 +199,11 @@ $loading-animation-palette: map-deep-merge(
 		loading-animation-primary: (
 			color: $primary,
 		),
+
 		loading-animation-secondary: (
 			color: $secondary,
 		),
+
 		loading-animation-light: $loading-animation-light,
 	),
 	$loading-animation-palette

package/src/scss/variables/_management-bar.scss

@@ -3,6 +3,7 @@ $management-bar-base: map-deep-merge(
 	(
 		border-color: transparent,
 		border-style: solid,
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -13,25 +14,34 @@ $management-bar-size: () !default;
 $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: 0,
-		padding-y: 0,
+		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-height-mobile: 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,
-		toggler-margin-x: 0.875rem,
-		active-border-bottom-width: 0.25rem,
-		nav-item-dropdown-margin-top: 0,
 	),
 	$management-bar-size
 );
@@ -40,6 +50,7 @@ $management-bar-light: () !default;
 $management-bar-light: map-deep-merge(
 	(
 		background-color: $light,
+
 		navbar-nav: (
 			nav-link: (
 				color:
@@ -56,6 +67,7 @@ $management-bar-light: map-deep-merge(
 							rgba($black, 0.7)
 						),
 				),
+
 				active: (
 					color:
 						if(
@@ -64,6 +76,7 @@ $management-bar-light: map-deep-merge(
 							rgba($black, 0.9)
 						),
 				),
+
 				disabled: (
 					color:
 						if(
@@ -75,6 +88,7 @@ $management-bar-light: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -108,6 +122,7 @@ $management-bar-primary: map-deep-merge(
 							rgba($black, 0.7)
 						),
 				),
+
 				active: (
 					color:
 						if(
@@ -116,6 +131,7 @@ $management-bar-primary: map-deep-merge(
 							rgba($black, 0.9)
 						),
 				),
+
 				disabled: (
 					color:
 						if(
@@ -127,6 +143,7 @@ $management-bar-primary: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),