@clayui/css 3.38.0 → 3.41.0

package/src/scss/cadmin/variables/_labels.scss

@@ -1,8 +1,10 @@
-$cadmin-label-color: null !default;
-
-$cadmin-label-link-color: inherit !default;
-$cadmin-label-link-hover-color: inherit !default;
+// .label
 
+$cadmin-label-border-color: $cadmin-gray-900 !default;
+$cadmin-label-border-radius: 2px !default; // 2px
+$cadmin-label-border-style: solid !default;
+$cadmin-label-border-width: 1px !default;
+$cadmin-label-color: null !default;
 $cadmin-label-font-size: 10px !default; // 10px
 $cadmin-label-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-label-height: null !default;
@@ -13,30 +15,114 @@ $cadmin-label-spacer-x: 4px !default; // 4px
 $cadmin-label-spacer-y: 2px !default; // 2px
 $cadmin-label-text-transform: uppercase !default;
 
-$cadmin-label-lexicon-icon-height: null !default;
-$cadmin-label-lexicon-icon-margin-top: 0 !default;
-$cadmin-label-lexicon-icon-width: null !default;
+// .label .sticker
 
 $cadmin-label-sticker-border-radius: 100px !default;
 $cadmin-label-sticker-size: 0.875em !default;
 
-$cadmin-label-dismissible-text-transform: null !default;
-
-$cadmin-label-item-spacer-x: 0.85714em !default;
-$cadmin-label-item-spacer-y: null !default;
+// .label[href], .label[type], .label[tabindex='0']
 
 $cadmin-label-anchor-text-decoration: none !default;
+
 $cadmin-label-anchor-hover-text-decoration: underline !default;
 
+// .label a, .label .btn-unstyled
+
+$cadmin-label-link-color: inherit !default;
 $cadmin-label-link-text-decoration: none !default;
+
+$cadmin-label-link-hover-color: inherit !default;
 $cadmin-label-link-hover-text-decoration: underline !default;
 
-$cadmin-label-border-color: $cadmin-gray-900 !default;
-$cadmin-label-border-radius: 2px !default; // 2px
-$cadmin-label-border-style: solid !default;
-$cadmin-label-border-width: 1px !default;
+$cadmin-label-base: () !default;
+
+$cadmin-label: () !default;
+$cadmin-label: map-deep-merge(
+	(
+		border-color: $cadmin-label-border-color,
+		border-radius: clay-enable-rounded($cadmin-label-border-radius),
+		border-style: $cadmin-label-border-style,
+		border-width: $cadmin-label-border-width,
+		color: $cadmin-label-color,
+		display: inline-flex,
+		font-size: $cadmin-label-font-size,
+		font-weight: $cadmin-label-font-weight,
+		height: $cadmin-label-height,
+		line-height: $cadmin-label-line-height,
+		margin-bottom: $cadmin-label-spacer-y,
+		margin-right: $cadmin-label-spacer-x,
+		margin-top: $cadmin-label-spacer-y,
+		max-width: 100%,
+		outline: 0,
+		padding-bottom: $cadmin-label-padding-y,
+		padding-left: $cadmin-label-padding-x,
+		padding-right: $cadmin-label-padding-x,
+		padding-top: $cadmin-label-padding-y,
+		text-transform: $cadmin-label-text-transform,
+		transition: box-shadow 0.15s ease-in-out,
+		white-space: inherit,
+		word-wrap: break-word,
+		disabled: (
+			box-shadow: none,
+		),
+		href: (
+			cursor: $cadmin-link-cursor,
+			text-decoration: $cadmin-label-anchor-text-decoration,
+			hover: (
+				text-decoration: $cadmin-label-anchor-hover-text-decoration,
+			),
+			focus: (
+				box-shadow: $cadmin-btn-focus-box-shadow,
+				text-decoration: $cadmin-label-anchor-hover-text-decoration,
+			),
+		),
+		link: (
+			color: $cadmin-label-link-color,
+			display: inline-block,
+			text-decoration: $cadmin-label-link-text-decoration,
+			hover: (
+				color: $cadmin-label-link-hover-color,
+				text-decoration: $cadmin-label-link-hover-text-decoration,
+			),
+			focus: (
+				color: $cadmin-label-link-hover-color,
+				text-decoration: $cadmin-label-link-hover-text-decoration,
+			),
+		),
+		sticker: (
+			border-radius: $cadmin-label-sticker-border-radius,
+			height: $cadmin-label-sticker-size,
+			line-height: $cadmin-label-sticker-size,
+			width: $cadmin-label-sticker-size,
+		),
+		sticker-overlay: (
+			border-radius: $cadmin-label-sticker-border-radius,
+		),
+		c-inner: (
+			margin-bottom: math-sign($cadmin-label-padding-y),
+			margin-left: math-sign($cadmin-label-padding-x),
+			margin-right: math-sign($cadmin-label-padding-x),
+			margin-top: math-sign($cadmin-label-padding-y),
+			max-width: none,
+		),
+	),
+	$cadmin-label
+);
+$cadmin-label: map-deep-merge($cadmin-label, $cadmin-label-base);
+
+// .label-dismissible
+
+$cadmin-label-dismissible-text-transform: null !default;
+
+$cadmin-label-dismissible: () !default;
+$cadmin-label-dismissible: map-merge(
+	(
+		text-transform: $cadmin-label-dismissible-text-transform,
+	),
+	$cadmin-label-dismissible
+);
 
-// Label Close
+// .label-item .close
 
 $cadmin-label-close: () !default;
 $cadmin-label-close: map-deep-merge(
@@ -65,6 +151,82 @@ $cadmin-label-close: map-deep-merge(
 	$cadmin-label-close
 );
 
+// .label-item
+
+$cadmin-label-item-spacer-x: 0.85714em !default;
+$cadmin-label-item-spacer-y: null !default;
+
+$cadmin-label-lexicon-icon-height: null !default;
+$cadmin-label-lexicon-icon-margin-top: 0 !default;
+$cadmin-label-lexicon-icon-width: null !default;
+
+$cadmin-label-item: () !default;
+$cadmin-label-item: map-deep-merge(
+	(
+		display: flex,
+		flex-direction: column,
+		flex-shrink: 0,
+		justify-content: center,
+		margin-bottom: $cadmin-label-item-spacer-y,
+		margin-top: $cadmin-label-item-spacer-y,
+		min-height: 0,
+		position: relative,
+		link: (
+			display: inline-flex,
+		),
+		btn-unstyled: (
+			color: inherit,
+			display: inline-flex,
+		),
+		close: $cadmin-label-close,
+		lexicon-icon: (
+			height: $cadmin-label-lexicon-icon-height,
+			margin-top: $cadmin-label-lexicon-icon-margin-top,
+			width: $cadmin-label-lexicon-icon-width,
+		),
+		text-truncate-inline: (
+			display: inline-flex,
+		),
+	),
+	$cadmin-label-item
+);
+
+// .label-item-expand
+
+$cadmin-label-item-expand: () !default;
+$cadmin-label-item-expand: map-deep-merge(
+	(
+		flex-grow: 1,
+		flex-shrink: 1,
+		min-width: 16px,
+		word-wrap: break-word,
+		link: (
+			flex-direction: column,
+		),
+	),
+	$cadmin-label-item-expand
+);
+
+// .label-item-before
+
+$cadmin-label-item-before: () !default;
+$cadmin-label-item-before: map-merge(
+	(
+		margin-right: $cadmin-label-item-spacer-x,
+	),
+	$cadmin-label-item-before
+);
+
+// .label-item-after
+
+$cadmin-label-item-after: () !default;
+$cadmin-label-item-after: map-merge(
+	(
+		margin-left: $cadmin-label-item-spacer-x,
+	),
+	$cadmin-label-item-after
+);
+
 // Label Sizes
 
 $cadmin-label-lg: () !default;
@@ -95,23 +257,16 @@ $cadmin-label-lg: map-deep-merge(
 	$cadmin-label-lg
 );
 
-// Label Variants
-
-$cadmin-label-base: () !default;
-$cadmin-label-base: map-deep-merge(
+$cadmin-label-sizes: () !default;
+$cadmin-label-sizes: map-deep-merge(
 	(
-		outline: 0,
-		transition: box-shadow 0.15s ease-in-out,
-		focus: (
-			box-shadow: $cadmin-btn-focus-box-shadow,
-		),
-		disabled: (
-			box-shadow: none,
-		),
+		label-lg: $cadmin-label-lg,
 	),
-	$cadmin-label-base
+	$cadmin-label-sizes
 );
 
+// Label Variants
+
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-primary` instead
 
 $cadmin-label-primary-color: $cadmin-primary !default;
@@ -163,13 +318,15 @@ $cadmin-label-primary: map-deep-merge(
 		background-color: $cadmin-label-primary-bg,
 		border-color: $cadmin-label-primary-border-color,
 		color: $cadmin-label-primary-color,
-		hover: (
-			background-color: $cadmin-label-primary-hover-bg,
-			border-color: $cadmin-label-primary-hover-border-color,
-			color: $cadmin-label-primary-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-primary-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-primary-hover-bg,
+				border-color: $cadmin-label-primary-hover-border-color,
+				color: $cadmin-label-primary-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-primary-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-primary-link-color,
@@ -233,13 +390,15 @@ $cadmin-label-secondary: map-deep-merge(
 		background-color: $cadmin-label-secondary-bg,
 		border-color: $cadmin-label-secondary-border-color,
 		color: $cadmin-label-secondary-color,
-		hover: (
-			background-color: $cadmin-label-secondary-hover-bg,
-			border-color: $cadmin-label-secondary-hover-border-color,
-			color: $cadmin-label-secondary-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-secondary-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-secondary-hover-bg,
+				border-color: $cadmin-label-secondary-hover-border-color,
+				color: $cadmin-label-secondary-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-secondary-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-secondary-link-color,
@@ -303,13 +462,15 @@ $cadmin-label-success: map-deep-merge(
 		background-color: $cadmin-label-success-bg,
 		border-color: $cadmin-label-success-border-color,
 		color: $cadmin-label-success-color,
-		hover: (
-			background-color: $cadmin-label-success-hover-bg,
-			border-color: $cadmin-label-success-hover-border-color,
-			color: $cadmin-label-success-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-success-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-success-hover-bg,
+				border-color: $cadmin-label-success-hover-border-color,
+				color: $cadmin-label-success-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-success-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-success-link-color,
@@ -373,13 +534,15 @@ $cadmin-label-info: map-deep-merge(
 		background-color: $cadmin-label-info-bg,
 		border-color: $cadmin-label-info-border-color,
 		color: $cadmin-label-info-color,
-		hover: (
-			background-color: $cadmin-label-info-hover-bg,
-			border-color: $cadmin-label-info-hover-border-color,
-			color: $cadmin-label-info-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-info-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-info-hover-bg,
+				border-color: $cadmin-label-info-hover-border-color,
+				color: $cadmin-label-info-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-info-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-info-link-color,
@@ -443,13 +606,15 @@ $cadmin-label-warning: map-deep-merge(
 		background-color: $cadmin-label-warning-bg,
 		border-color: $cadmin-label-warning-border-color,
 		color: $cadmin-label-warning-color,
-		hover: (
-			background-color: $cadmin-label-warning-hover-bg,
-			border-color: $cadmin-label-warning-hover-border-color,
-			color: $cadmin-label-warning-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-warning-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-warning-hover-bg,
+				border-color: $cadmin-label-warning-hover-border-color,
+				color: $cadmin-label-warning-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-warning-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-warning-link-color,
@@ -513,13 +678,15 @@ $cadmin-label-danger: map-deep-merge(
 		background-color: $cadmin-label-danger-bg,
 		border-color: $cadmin-label-danger-border-color,
 		color: $cadmin-label-danger-color,
-		hover: (
-			background-color: $cadmin-label-danger-hover-bg,
-			border-color: $cadmin-label-danger-hover-border-color,
-			color: $cadmin-label-danger-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-danger-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-danger-hover-bg,
+				border-color: $cadmin-label-danger-hover-border-color,
+				color: $cadmin-label-danger-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-danger-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-danger-link-color,
@@ -583,13 +750,15 @@ $cadmin-label-light: map-deep-merge(
 		background-color: $cadmin-label-light-bg,
 		border-color: $cadmin-label-light-border-color,
 		color: $cadmin-label-light-color,
-		hover: (
-			background-color: $cadmin-label-light-hover-bg,
-			border-color: $cadmin-label-light-hover-border-color,
-			color: $cadmin-label-light-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-light-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-light-hover-bg,
+				border-color: $cadmin-label-light-hover-border-color,
+				color: $cadmin-label-light-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-light-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-light-link-color,
@@ -653,13 +822,15 @@ $cadmin-label-dark: map-deep-merge(
 		background-color: $cadmin-label-dark-bg,
 		border-color: $cadmin-label-dark-border-color,
 		color: $cadmin-label-dark-color,
-		hover: (
-			background-color: $cadmin-label-dark-hover-bg,
-			border-color: $cadmin-label-dark-hover-border-color,
-			color: $cadmin-label-dark-hover-color,
-		),
-		focus: (
-			color: $cadmin-label-dark-hover-color,
+		href: (
+			hover: (
+				background-color: $cadmin-label-dark-hover-bg,
+				border-color: $cadmin-label-dark-hover-border-color,
+				color: $cadmin-label-dark-hover-color,
+			),
+			focus: (
+				color: $cadmin-label-dark-hover-color,
+			),
 		),
 		link: (
 			color: $cadmin-label-dark-link-color,
@@ -680,8 +851,10 @@ $cadmin-label-inverse-primary: map-deep-merge(
 		background-color: $cadmin-primary,
 		border-color: $cadmin-primary,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-primary
@@ -693,8 +866,10 @@ $cadmin-label-inverse-secondary: map-deep-merge(
 		background-color: $cadmin-secondary,
 		border-color: $cadmin-secondary,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-secondary
@@ -706,8 +881,10 @@ $cadmin-label-inverse-success: map-deep-merge(
 		background-color: $cadmin-success,
 		border-color: $cadmin-success,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-success
@@ -719,8 +896,10 @@ $cadmin-label-inverse-info: map-deep-merge(
 		background-color: $cadmin-info,
 		border-color: $cadmin-info,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-info
@@ -732,8 +911,10 @@ $cadmin-label-inverse-warning: map-deep-merge(
 		background-color: $cadmin-warning,
 		border-color: $cadmin-warning,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-warning
@@ -745,8 +926,10 @@ $cadmin-label-inverse-danger: map-deep-merge(
 		background-color: $cadmin-danger,
 		border-color: $cadmin-danger,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-danger
@@ -758,8 +941,10 @@ $cadmin-label-inverse-light: map-deep-merge(
 		background-color: $cadmin-light,
 		border-color: $cadmin-light,
 		color: $cadmin-dark,
-		hover: (
-			color: $cadmin-dark,
+		href: (
+			hover: (
+				color: $cadmin-dark,
+			),
 		),
 	),
 	$cadmin-label-inverse-light
@@ -771,8 +956,10 @@ $cadmin-label-inverse-dark: map-deep-merge(
 		background-color: $cadmin-dark,
 		border-color: $cadmin-dark,
 		color: $cadmin-white,
-		hover: (
-			color: $cadmin-white,
+		href: (
+			hover: (
+				color: $cadmin-white,
+			),
 		),
 	),
 	$cadmin-label-inverse-dark

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

@@ -111,8 +111,10 @@ $cadmin-link-outline: map-deep-merge(
 		hover: (
 			text-decoration: none,
 		),
-		disabled-active: (
-			pointer-events: none,
+		disabled: (
+			active: (
+				pointer-events: none,
+			),
 		),
 		lexicon-icon: (
 			margin-top: 0,
@@ -208,8 +210,8 @@ $cadmin-link-monospaced: map-deep-merge(
 		padding-top: 0,
 		vertical-align: middle,
 		width: $cadmin-link-monospaced-size,
-		lexicon: (
-			icon-margin-top: 0,
+		lexicon-icon: (
+			margin-top: 0,
 		),
 	),
 	$cadmin-link-monospaced
@@ -321,9 +323,9 @@ $cadmin-component-action: map-deep-merge(
 			color: $cadmin-secondary,
 			cursor: $cadmin-disabled-cursor,
 			opacity: $cadmin-btn-disabled-opacity,
-		),
-		disabled-active: (
-			pointer-events: none,
+			active: (
+				pointer-events: none,
+			),
 		),
 		btn-focus-box-shadow: map-get($cadmin-btn-secondary, focus-box-shadow),
 		btn-focus-outline: 0,

package/src/scss/cadmin/variables/_menubar.scss

@@ -10,8 +10,8 @@ $cadmin-menubar-vertical-expand-md: map-deep-merge(
 			flex-wrap: wrap,
 			justify-content: space-between,
 			margin-bottom: 24px,
-			margin-left: math-sign($cadmin-grid-gutter-width / 2),
-			margin-right: math-sign($cadmin-grid-gutter-width / 2),
+			margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
+			margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
 		),
 		collapse: (
 			display: block,
@@ -223,8 +223,8 @@ $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 			flex-wrap: wrap,
 			justify-content: space-between,
 			margin-bottom: 24px,
-			margin-left: math-sign($cadmin-grid-gutter-width / 2),
-			margin-right: math-sign($cadmin-grid-gutter-width / 2),
+			margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
+			margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
 		),
 		collapse: (
 			display: block,

package/src/scss/cadmin/variables/_multi-step-nav.scss

@@ -31,8 +31,8 @@ $cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-tex
 $cadmin-multi-step-divider-bg: $cadmin-gray-200 !default;
 $cadmin-multi-step-divider-height: 4px !default;
 $cadmin-multi-step-divider-spacer-x: 0 !default;
-$cadmin-multi-step-divider-top: ($cadmin-multi-step-divider-height / 2) +
-	($cadmin-multi-step-icon-size / 2) !default;
+$cadmin-multi-step-divider-top: ($cadmin-multi-step-divider-height * 0.5) +
+	($cadmin-multi-step-icon-size * 0.5) !default;
 
 $cadmin-multi-step-indicator-width: $cadmin-multi-step-icon-size +
 	($cadmin-multi-step-divider-spacer-x * 2) !default;

package/src/scss/cadmin/variables/_navbar.scss

@@ -3,7 +3,7 @@ $cadmin-enable-scaling-navbar: $cadmin-enable-scaling-components !default;
 $cadmin-navbar-border-radius: null !default;
 $cadmin-navbar-font-size: 14px !default; // 14px
 $cadmin-navbar-padding-x: $cadmin-spacer !default;
-$cadmin-navbar-padding-y: $cadmin-spacer / 2 !default;
+$cadmin-navbar-padding-y: $cadmin-spacer * 0.5 !default;
 
 $cadmin-navbar-nav-link-padding-x: 8px !default;
 
@@ -27,7 +27,7 @@ $cadmin-navbar-brand-height: $cadmin-navbar-brand-font-size *
 	$cadmin-line-height-base !default;
 $cadmin-navbar-brand-padding-y: (
 		$cadmin-nav-link-height - $cadmin-navbar-brand-height
-	) / 2 !default;
+	) * 0.5 !default;
 
 // Navbar Toggler
 

package/src/scss/cadmin/variables/_navs.scss

@@ -55,7 +55,7 @@ $cadmin-nav-btn-margin-x: 4px !default; // 4px
 $cadmin-nav-btn-margin-y: (
 		($cadmin-line-height-base * $cadmin-font-size-base) +
 			($cadmin-nav-link-padding-y * 2) - $cadmin-nav-item-monospaced-size
-	) / 2 !default;
+	) * 0.5 !default;
 
 // @deprecated after v3.4.0 use the Sass map `$cadmin-nav-btn` instead
 
@@ -120,7 +120,7 @@ $cadmin-nav-link-monospaced: map-deep-merge(
 );
 
 $cadmin-nav-divider-color: $cadmin-gray-200 !default;
-$cadmin-nav-divider-margin-y: $cadmin-spacer / 2 !default;
+$cadmin-nav-divider-margin-y: $cadmin-spacer * 0.5 !default;
 
 $cadmin-nav-form-padding-bottom: 0 !default;
 $cadmin-nav-form-padding-left: $cadmin-nav-link-padding-x !default;