@clayui/css 3.38.0 → 3.41.0

package/src/scss/variables/_labels.scss

@@ -2,11 +2,13 @@
 /// @group labels
 ////
 
-$label-color: null !default;
-
-$label-link-color: inherit !default;
-$label-link-hover-color: inherit !default;
+// .label
 
+$label-border-color: $gray-900 !default;
+$label-border-radius: $border-radius !default;
+$label-border-style: solid !default;
+$label-border-width: 0.0625rem !default;
+$label-color: null !default;
 $label-font-size: 75% !default;
 $label-font-weight: $font-weight-bold !default;
 $label-height: null !default;
@@ -17,30 +19,108 @@ $label-spacer-x: 0.25rem !default; // 4px
 $label-spacer-y: 0.125rem !default; // 2px
 $label-text-transform: null !default;
 
-$label-lexicon-icon-height: null !default;
-$label-lexicon-icon-margin-top: 0 !default;
-$label-lexicon-icon-width: null !default;
+// .label .sticker
 
 $label-sticker-border-radius: 100px !default;
 $label-sticker-size: 0.875em !default;
 
-$label-dismissible-text-transform: null !default;
-
-$label-item-spacer-x: 0.5em !default;
-$label-item-spacer-y: null !default;
+// .label[href], .label[type], .label[tabindex='0']
 
 $label-anchor-text-decoration: none !default;
+
 $label-anchor-hover-text-decoration: null !default;
 
+// .label a, .label .btn-unstyled
+
+$label-link-color: inherit !default;
 $label-link-text-decoration: underline !default;
+
+$label-link-hover-color: inherit !default;
 $label-link-hover-text-decoration: none !default;
 
-$label-border-color: $gray-900 !default;
-$label-border-radius: $border-radius !default;
-$label-border-style: solid !default;
-$label-border-width: 0.0625rem !default;
+$label-base: () !default;
 
-// Label Close
+$label: () !default;
+$label: map-deep-merge(
+	(
+		border-color: $label-border-color,
+		border-radius: clay-enable-rounded($label-border-radius),
+		border-style: $label-border-style,
+		border-width: $label-border-width,
+		color: $label-color,
+		display: inline-flex,
+		font-size: $label-font-size,
+		font-weight: $label-font-weight,
+		height: $label-height,
+		line-height: $label-line-height,
+		margin-bottom: $label-spacer-y,
+		margin-right: $label-spacer-x,
+		margin-top: $label-spacer-y,
+		max-width: 100%,
+		padding-bottom: $label-padding-y,
+		padding-left: $label-padding-x,
+		padding-right: $label-padding-x,
+		padding-top: $label-padding-y,
+		text-transform: $label-text-transform,
+		white-space: inherit,
+		word-wrap: break-word,
+		href: (
+			cursor: $link-cursor,
+			text-decoration: $label-anchor-text-decoration,
+			hover: (
+				text-decoration: $label-anchor-hover-text-decoration,
+			),
+			focus: (
+				text-decoration: $label-anchor-hover-text-decoration,
+			),
+		),
+		link: (
+			color: $label-link-color,
+			display: inline-block,
+			text-decoration: $label-link-text-decoration,
+			hover: (
+				color: $label-link-hover-color,
+				text-decoration: $label-link-hover-text-decoration,
+			),
+			focus: (
+				color: $label-link-hover-color,
+				text-decoration: $label-link-hover-text-decoration,
+			),
+		),
+		c-inner: (
+			margin-bottom: math-sign($label-padding-y),
+			margin-left: math-sign($label-padding-x),
+			margin-right: math-sign($label-padding-x),
+			margin-top: math-sign($label-padding-y),
+			max-width: none,
+		),
+		sticker: (
+			border-radius: $label-sticker-border-radius,
+			height: $label-sticker-size,
+			line-height: $label-sticker-size,
+			width: $label-sticker-size,
+		),
+		sticker-overlay: (
+			border-radius: $label-sticker-border-radius,
+		),
+	),
+	$label
+);
+$label: map-deep-merge($label, $label-base);
+
+// .label-dismissible
+
+$label-dismissible-text-transform: null !default;
+
+$label-dismissible: () !default;
+$label-dismissible: map-merge(
+	(
+		text-transform: $label-dismissible-text-transform,
+	),
+	$label-dismissible
+);
+
+// .label-item .close
 
 $label-close: () !default;
 $label-close: map-deep-merge(
@@ -68,7 +148,83 @@ $label-close: map-deep-merge(
 	$label-close
 );
 
-// Label Sizes
+// .label-item
+
+$label-item-spacer-x: 0.5em !default;
+$label-item-spacer-y: null !default;
+
+$label-lexicon-icon-height: null !default;
+$label-lexicon-icon-margin-top: 0 !default;
+$label-lexicon-icon-width: null !default;
+
+$label-item: () !default;
+$label-item: map-deep-merge(
+	(
+		display: flex,
+		flex-direction: column,
+		flex-shrink: 0,
+		justify-content: center,
+		margin-bottom: $label-item-spacer-y,
+		margin-top: $label-item-spacer-y,
+		min-height: 0,
+		position: relative,
+		link: (
+			display: inline-flex,
+		),
+		btn-unstyled: (
+			color: inherit,
+			display: inline-flex,
+		),
+		close: $label-close,
+		lexicon-icon: (
+			height: $label-lexicon-icon-height,
+			margin-top: $label-lexicon-icon-margin-top,
+			width: $label-lexicon-icon-width,
+		),
+		text-truncate-inline: (
+			display: inline-flex,
+		),
+	),
+	$label-item
+);
+
+// .label-item-expand
+
+$label-item-expand: () !default;
+$label-item-expand: map-deep-merge(
+	(
+		flex-grow: 1,
+		flex-shrink: 1,
+		min-width: 1rem,
+		word-wrap: break-word,
+		link: (
+			flex-direction: column,
+		),
+	),
+	$label-item-expand
+);
+
+// .label-item-before
+
+$label-item-before: () !default;
+$label-item-before: map-merge(
+	(
+		margin-right: $label-item-spacer-x,
+	),
+	$label-item-before
+);
+
+// .label-item-after
+
+$label-item-after: () !default;
+$label-item-after: map-merge(
+	(
+		margin-left: $label-item-spacer-x,
+	),
+	$label-item-after
+);
+
+// .label-lg
 
 $label-lg: () !default;
 $label-lg: map-deep-merge(
@@ -84,9 +240,17 @@ $label-lg: map-deep-merge(
 	$label-lg
 );
 
-// Label Variants
+// Label Sizes
 
-$label-base: () !default;
+$label-sizes: () !default;
+$label-sizes: map-deep-merge(
+	(
+		label-lg: $label-lg,
+	),
+	$label-sizes
+);
+
+// Label Variants
 
 /// @deprecated as of v2.4.1 use the Sass map `$label-primary` instead
 
@@ -139,13 +303,15 @@ $label-primary: map-deep-merge(
 		background-color: $label-primary-bg,
 		border-color: $label-primary-border-color,
 		color: $label-primary-color,
-		hover: (
-			background-color: $label-primary-hover-bg,
-			border-color: $label-primary-hover-border-color,
-			color: $label-primary-hover-color,
-		),
-		focus: (
-			color: $label-primary-hover-color,
+		href: (
+			hover: (
+				background-color: $label-primary-hover-bg,
+				border-color: $label-primary-hover-border-color,
+				color: $label-primary-hover-color,
+			),
+			focus: (
+				color: $label-primary-hover-color,
+			),
 		),
 		link: (
 			color: $label-primary-link-color,
@@ -209,13 +375,15 @@ $label-secondary: map-deep-merge(
 		background-color: $label-secondary-bg,
 		border-color: $label-secondary-border-color,
 		color: $label-secondary-color,
-		hover: (
-			background-color: $label-secondary-hover-bg,
-			border-color: $label-secondary-hover-border-color,
-			color: $label-secondary-hover-color,
-		),
-		focus: (
-			color: $label-secondary-hover-color,
+		href: (
+			hover: (
+				background-color: $label-secondary-hover-bg,
+				border-color: $label-secondary-hover-border-color,
+				color: $label-secondary-hover-color,
+			),
+			focus: (
+				color: $label-secondary-hover-color,
+			),
 		),
 		link: (
 			color: $label-secondary-link-color,
@@ -279,13 +447,15 @@ $label-success: map-deep-merge(
 		background-color: $label-success-bg,
 		border-color: $label-success-border-color,
 		color: $label-success-color,
-		hover: (
-			background-color: $label-success-hover-bg,
-			border-color: $label-success-hover-border-color,
-			color: $label-success-hover-color,
-		),
-		focus: (
-			color: $label-success-hover-color,
+		href: (
+			hover: (
+				background-color: $label-success-hover-bg,
+				border-color: $label-success-hover-border-color,
+				color: $label-success-hover-color,
+			),
+			focus: (
+				color: $label-success-hover-color,
+			),
 		),
 		link: (
 			color: $label-success-link-color,
@@ -349,13 +519,15 @@ $label-info: map-deep-merge(
 		background-color: $label-info-bg,
 		border-color: $label-info-border-color,
 		color: $label-info-color,
-		hover: (
-			background-color: $label-info-hover-bg,
-			border-color: $label-info-hover-border-color,
-			color: $label-info-hover-color,
-		),
-		focus: (
-			color: $label-info-hover-color,
+		href: (
+			hover: (
+				background-color: $label-info-hover-bg,
+				border-color: $label-info-hover-border-color,
+				color: $label-info-hover-color,
+			),
+			focus: (
+				color: $label-info-hover-color,
+			),
 		),
 		link: (
 			color: $label-info-link-color,
@@ -419,13 +591,15 @@ $label-warning: map-deep-merge(
 		background-color: $label-warning-bg,
 		border-color: $label-warning-border-color,
 		color: $label-warning-color,
-		hover: (
-			background-color: $label-warning-hover-bg,
-			border-color: $label-warning-hover-border-color,
-			color: $label-warning-hover-color,
-		),
-		focus: (
-			color: $label-warning-hover-color,
+		href: (
+			hover: (
+				background-color: $label-warning-hover-bg,
+				border-color: $label-warning-hover-border-color,
+				color: $label-warning-hover-color,
+			),
+			focus: (
+				color: $label-warning-hover-color,
+			),
 		),
 		link: (
 			color: $label-warning-link-color,
@@ -489,13 +663,15 @@ $label-danger: map-deep-merge(
 		background-color: $label-danger-bg,
 		border-color: $label-danger-border-color,
 		color: $label-danger-color,
-		hover: (
-			background-color: $label-danger-hover-bg,
-			border-color: $label-danger-hover-border-color,
-			color: $label-danger-hover-color,
-		),
-		focus: (
-			color: $label-danger-hover-color,
+		href: (
+			hover: (
+				background-color: $label-danger-hover-bg,
+				border-color: $label-danger-hover-border-color,
+				color: $label-danger-hover-color,
+			),
+			focus: (
+				color: $label-danger-hover-color,
+			),
 		),
 		link: (
 			color: $label-danger-link-color,
@@ -559,13 +735,15 @@ $label-light: map-deep-merge(
 		background-color: $label-light-bg,
 		border-color: $label-light-border-color,
 		color: $label-light-color,
-		hover: (
-			background-color: $label-light-hover-bg,
-			border-color: $label-light-hover-border-color,
-			color: $label-light-hover-color,
-		),
-		focus: (
-			color: $label-light-hover-color,
+		href: (
+			hover: (
+				background-color: $label-light-hover-bg,
+				border-color: $label-light-hover-border-color,
+				color: $label-light-hover-color,
+			),
+			focus: (
+				color: $label-light-hover-color,
+			),
 		),
 		link: (
 			color: $label-light-link-color,
@@ -629,13 +807,15 @@ $label-dark: map-deep-merge(
 		background-color: $label-dark-bg,
 		border-color: $label-dark-border-color,
 		color: $label-dark-color,
-		hover: (
-			background-color: $label-dark-hover-bg,
-			border-color: $label-dark-hover-border-color,
-			color: $label-dark-hover-color,
-		),
-		focus: (
-			color: $label-dark-hover-color,
+		href: (
+			hover: (
+				background-color: $label-dark-hover-bg,
+				border-color: $label-dark-hover-border-color,
+				color: $label-dark-hover-color,
+			),
+			focus: (
+				color: $label-dark-hover-color,
+			),
 		),
 		link: (
 			color: $label-dark-link-color,
@@ -656,10 +836,12 @@ $label-inverse-primary: map-deep-merge(
 		background-color: $primary,
 		border-color: $primary,
 		color: color-yiq($primary),
-		hover: (
-			background-color: clay-darken($primary, 10%),
-			border-color: clay-darken($primary, 10%),
-			color: color-yiq(clay-darken($primary, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($primary, 10%),
+				border-color: clay-darken($primary, 10%),
+				color: color-yiq(clay-darken($primary, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -681,10 +863,12 @@ $label-inverse-secondary: map-deep-merge(
 		background-color: $secondary,
 		border-color: $secondary,
 		color: color-yiq($secondary),
-		hover: (
-			background-color: clay-darken($secondary, 10%),
-			border-color: clay-darken($secondary, 10%),
-			color: color-yiq(clay-darken($secondary, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($secondary, 10%),
+				border-color: clay-darken($secondary, 10%),
+				color: color-yiq(clay-darken($secondary, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -706,10 +890,12 @@ $label-inverse-success: map-deep-merge(
 		background-color: $success,
 		border-color: $success,
 		color: color-yiq($success),
-		hover: (
-			background-color: clay-darken($success, 10%),
-			border-color: clay-darken($success, 10%),
-			color: color-yiq(clay-darken($success, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($success, 10%),
+				border-color: clay-darken($success, 10%),
+				color: color-yiq(clay-darken($success, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -731,10 +917,12 @@ $label-inverse-info: map-deep-merge(
 		background-color: $info,
 		border-color: $info,
 		color: color-yiq($info),
-		hover: (
-			background-color: clay-darken($info, 10%),
-			border-color: clay-darken($info, 10%),
-			color: color-yiq(clay-darken($info, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($info, 10%),
+				border-color: clay-darken($info, 10%),
+				color: color-yiq(clay-darken($info, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -756,10 +944,12 @@ $label-inverse-warning: map-deep-merge(
 		background-color: $warning,
 		border-color: $warning,
 		color: color-yiq($warning),
-		hover: (
-			background-color: clay-darken($warning, 10%),
-			border-color: clay-darken($warning, 10%),
-			color: color-yiq(clay-darken($warning, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($warning, 10%),
+				border-color: clay-darken($warning, 10%),
+				color: color-yiq(clay-darken($warning, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -781,10 +971,12 @@ $label-inverse-danger: map-deep-merge(
 		background-color: $danger,
 		border-color: $danger,
 		color: color-yiq($danger),
-		hover: (
-			background-color: clay-darken($danger, 10%),
-			border-color: clay-darken($danger, 10%),
-			color: color-yiq(clay-darken($danger, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($danger, 10%),
+				border-color: clay-darken($danger, 10%),
+				color: color-yiq(clay-darken($danger, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -806,10 +998,12 @@ $label-inverse-light: map-deep-merge(
 		background-color: $light,
 		border-color: $light,
 		color: color-yiq($light),
-		hover: (
-			background-color: clay-darken($light, 10%),
-			border-color: clay-darken($light, 10%),
-			color: color-yiq(clay-darken($light, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($light, 10%),
+				border-color: clay-darken($light, 10%),
+				color: color-yiq(clay-darken($light, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -831,10 +1025,12 @@ $label-inverse-dark: map-deep-merge(
 		background-color: $dark,
 		border-color: $dark,
 		color: color-yiq($dark),
-		hover: (
-			background-color: clay-darken($dark, 10%),
-			border-color: clay-darken($dark, 10%),
-			color: color-yiq(clay-darken($dark, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($dark, 10%),
+				border-color: clay-darken($dark, 10%),
+				color: color-yiq(clay-darken($dark, 10%)),
+			),
 		),
 		link: (
 			hover: (

package/src/scss/variables/_links.scss

@@ -94,8 +94,10 @@ $link-outline: map-deep-merge(
 		hover: (
 			text-decoration: none,
 		),
-		disabled-active: (
-			pointer-events: none,
+		disabled: (
+			active: (
+				pointer-events: none,
+			),
 		),
 		lexicon-icon: (
 			margin-top: 0,
@@ -115,16 +117,16 @@ $link-outline-primary: map-deep-merge(
 		),
 		btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba($primary, 0.5),
 		btn-focus-outline: 0,
+		active: (
+			background-color: $primary,
+			color: $white,
+		),
 		disabled: (
 			background-color: transparent,
 			color: $primary,
 			cursor: $btn-disabled-cursor,
 			opacity: $btn-disabled-opacity,
 		),
-		active: (
-			background-color: $primary,
-			color: $white,
-		),
 	),
 	$link-outline-primary
 );
@@ -140,16 +142,16 @@ $link-outline-secondary: map-deep-merge(
 		),
 		btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba($secondary, 0.5),
 		btn-focus-outline: 0,
+		active: (
+			background-color: $secondary,
+			color: $white,
+		),
 		disabled: (
 			background-color: transparent,
 			color: $secondary,
 			cursor: $btn-disabled-cursor,
 			opacity: $btn-disabled-opacity,
 		),
-		active: (
-			background-color: $secondary,
-			color: $white,
-		),
 	),
 	$link-outline-secondary
 );
@@ -273,9 +275,9 @@ $component-action: map-deep-merge(
 			color: $secondary,
 			cursor: $disabled-cursor,
 			opacity: $btn-disabled-opacity,
-		),
-		disabled-active: (
-			pointer-events: none,
+			active: (
+				pointer-events: none,
+			),
 		),
 		lexicon-icon: (
 			margin-top: 0,

package/src/scss/variables/_menubar.scss

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

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

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

package/src/scss/variables/_navbar.scss

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