@clayui/css 3.38.0 → 3.41.0

package/src/scss/atlas/variables/_labels.scss

@@ -1,3 +1,5 @@
+// .label
+
 $label-border-radius: 0.125rem !default; // 2px
 $label-font-size: 0.625rem !default; // 10px
 $label-font-weight: $font-weight-semi-bold !default;
@@ -5,14 +7,58 @@ $label-padding-x: 0.25rem !default; // 4px
 $label-padding-y: 0.125rem !default; // 2px
 $label-text-transform: uppercase !default;
 
-$label-item-spacer-x: 0.85714em !default;
+// .label[href], .label[type], .label[tabindex='0']
 
 $label-anchor-hover-text-decoration: underline !default;
 
+// .label a, .label .btn-unstyled
+
 $label-link-text-decoration: none !default;
+
 $label-link-hover-text-decoration: underline !default;
 
-// Label Close
+$label-base: () !default;
+
+$label: () !default;
+$label: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($label-border-radius),
+		font-size: $label-font-size,
+		font-weight: $label-font-weight,
+		outline: 0,
+		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,
+		transition: box-shadow 0.15s ease-in-out,
+		disabled: (
+			box-shadow: none,
+		),
+		href: (
+			hover: (
+				text-decoration: $label-anchor-hover-text-decoration,
+			),
+			focus: (
+				box-shadow: $btn-focus-box-shadow,
+				text-decoration: $label-anchor-hover-text-decoration,
+			),
+		),
+		link: (
+			text-decoration: $label-link-text-decoration,
+			hover: (
+				text-decoration: $label-link-hover-text-decoration,
+			),
+			focus: (
+				text-decoration: $label-link-hover-text-decoration,
+			),
+		),
+	),
+	$label
+);
+$label: map-deep-merge($label, $label-base);
+
+// .label-item .close
 
 $label-close: () !default;
 $label-close: map-deep-merge(
@@ -24,7 +70,11 @@ $label-close: map-deep-merge(
 	$label-close
 );
 
-// Label Sizes
+// .label-item
+
+$label-item-spacer-x: 0.85714em !default;
+
+// .label-lg
 
 $label-lg: () !default;
 $label-lg: map-deep-merge(
@@ -52,23 +102,18 @@ $label-lg: map-deep-merge(
 	$label-lg
 );
 
-// Label Variants
+// Label Sizes
 
-$label-base: () !default;
-$label-base: map-deep-merge(
+$label-sizes: () !default;
+$label-sizes: map-deep-merge(
 	(
-		outline: 0,
-		transition: box-shadow 0.15s ease-in-out,
-		focus: (
-			box-shadow: $btn-focus-box-shadow,
-		),
-		disabled: (
-			box-shadow: none,
-		),
+		label-lg: $label-lg,
 	),
-	$label-base
+	$label-sizes
 );
 
+// Label Variants
+
 // @deprecated as of v2.4.1 use the Sass map `$label-primary` instead
 
 $label-primary-color: $primary !default;
@@ -90,9 +135,11 @@ $label-primary: map-deep-merge(
 	(
 		border-color: $label-primary-border-color,
 		color: $label-primary-color,
-		hover: (
-			border-color: $label-primary-hover-border-color,
-			color: $label-primary-hover-color,
+		href: (
+			hover: (
+				border-color: $label-primary-hover-border-color,
+				color: $label-primary-hover-color,
+			),
 		),
 	),
 	$label-primary
@@ -119,9 +166,11 @@ $label-secondary: map-deep-merge(
 	(
 		border-color: $label-secondary-border-color,
 		color: $label-secondary-color,
-		hover: (
-			border-color: $label-secondary-hover-border-color,
-			color: $label-secondary-hover-color,
+		href: (
+			hover: (
+				border-color: $label-secondary-hover-border-color,
+				color: $label-secondary-hover-color,
+			),
 		),
 	),
 	$label-secondary
@@ -148,9 +197,11 @@ $label-success: map-deep-merge(
 	(
 		border-color: $label-success-border-color,
 		color: $label-success-color,
-		hover: (
-			border-color: $label-success-hover-border-color,
-			color: $label-success-hover-color,
+		href: (
+			hover: (
+				border-color: $label-success-hover-border-color,
+				color: $label-success-hover-color,
+			),
 		),
 	),
 	$label-success
@@ -177,9 +228,11 @@ $label-info: map-deep-merge(
 	(
 		border-color: $label-info-border-color,
 		color: $label-info-color,
-		hover: (
-			border-color: $label-info-hover-border-color,
-			color: $label-info-hover-color,
+		href: (
+			hover: (
+				border-color: $label-info-hover-border-color,
+				color: $label-info-hover-color,
+			),
 		),
 	),
 	$label-info
@@ -206,9 +259,11 @@ $label-warning: map-deep-merge(
 	(
 		border-color: $label-warning-border-color,
 		color: $label-warning-color,
-		hover: (
-			border-color: $label-warning-hover-border-color,
-			color: $label-warning-hover-color,
+		href: (
+			hover: (
+				border-color: $label-warning-hover-border-color,
+				color: $label-warning-hover-color,
+			),
 		),
 	),
 	$label-warning
@@ -235,9 +290,11 @@ $label-danger: map-deep-merge(
 	(
 		border-color: $label-danger-border-color,
 		color: $label-danger-color,
-		hover: (
-			border-color: $label-danger-hover-border-color,
-			color: $label-danger-hover-color,
+		href: (
+			hover: (
+				border-color: $label-danger-hover-border-color,
+				color: $label-danger-hover-color,
+			),
 		),
 	),
 	$label-danger
@@ -269,9 +326,11 @@ $label-light: map-deep-merge(
 		background-color: $label-light-bg,
 		border-color: $label-light-border-color,
 		color: $label-light-color,
-		hover: (
-			border-color: $label-light-hover-border-color,
-			color: $label-light-hover-color,
+		href: (
+			hover: (
+				border-color: $label-light-hover-border-color,
+				color: $label-light-hover-color,
+			),
 		),
 	),
 	$label-light
@@ -298,9 +357,11 @@ $label-dark: map-deep-merge(
 	(
 		border-color: $label-dark-border-color,
 		color: $label-dark-color,
-		hover: (
-			border-color: $label-dark-hover-border-color,
-			color: $label-dark-hover-color,
+		href: (
+			hover: (
+				border-color: $label-dark-hover-border-color,
+				color: $label-dark-hover-color,
+			),
 		),
 	),
 	$label-dark
@@ -312,10 +373,12 @@ $label-inverse-primary: () !default;
 $label-inverse-primary: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -335,10 +398,12 @@ $label-inverse-secondary: () !default;
 $label-inverse-secondary: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -358,10 +423,12 @@ $label-inverse-success: () !default;
 $label-inverse-success: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -381,10 +448,12 @@ $label-inverse-info: () !default;
 $label-inverse-info: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -404,10 +473,12 @@ $label-inverse-warning: () !default;
 $label-inverse-warning: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -427,10 +498,12 @@ $label-inverse-danger: () !default;
 $label-inverse-danger: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -450,10 +523,12 @@ $label-inverse-light: () !default;
 $label-inverse-light: map-deep-merge(
 	(
 		color: $dark,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $dark,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $dark,
+			),
 		),
 		link: (
 			hover: (
@@ -473,10 +548,12 @@ $label-inverse-dark: () !default;
 $label-inverse-dark: map-deep-merge(
 	(
 		color: $white,
-		hover: (
-			background-color: null,
-			border-color: null,
-			color: $white,
+		href: (
+			hover: (
+				background-color: null,
+				border-color: null,
+				color: $white,
+			),
 		),
 		link: (
 			hover: (
@@ -491,3 +568,26 @@ $label-inverse-dark: map-deep-merge(
 	),
 	$label-inverse-dark
 );
+
+$label-palette: () !default;
+$label-palette: map-deep-merge(
+	(
+		primary: $label-primary,
+		secondary: $label-secondary,
+		success: $label-success,
+		info: $label-info,
+		warning: $label-warning,
+		danger: $label-danger,
+		dark: $label-dark,
+		light: $label-light,
+		inverse-primary: $label-inverse-primary,
+		inverse-secondary: $label-inverse-secondary,
+		inverse-success: $label-inverse-success,
+		inverse-info: $label-inverse-info,
+		inverse-warning: $label-inverse-warning,
+		inverse-danger: $label-inverse-danger,
+		inverse-light: $label-inverse-light,
+		inverse-dark: $label-inverse-dark,
+	),
+	$label-palette
+);

package/src/scss/atlas/variables/_navs.scss

@@ -8,7 +8,9 @@ $nav-link-padding-y: 0.625rem !default; // 10px
 $nav-link: () !default;
 $nav-link: map-deep-merge(
 	(
-		disabled-box-shadow: none,
+		disabled: (
+			box-shadow: none,
+		),
 	),
 	$nav-link
 );
@@ -16,7 +18,9 @@ $nav-link: map-deep-merge(
 $nav-link-btn-unstyled: () !default;
 $nav-link-btn-unstyled: map-deep-merge(
 	(
-		focus-box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1,
+		focus: (
+			box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1,
+		),
 	),
 	$nav-link-btn-unstyled
 );
@@ -46,9 +50,13 @@ $nav-tabs-link: map-deep-merge(
 	(
 		font-weight: $font-weight-semi-bold,
 		transition: box-shadow 0.15s ease-in-out,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
-		disabled-box-shadow: none,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+		disabled: (
+			box-shadow: none,
+		),
 	),
 	$nav-tabs-link
 );
@@ -83,9 +91,13 @@ $nav-underline-link: map-deep-merge(
 		padding-bottom: 0.5625rem,
 		padding-top: 0.5625rem,
 		transition: box-shadow 0.15s ease-in-out,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
-		disabled-box-shadow: none,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+		disabled: (
+			box-shadow: none,
+		),
 	),
 	$nav-underline-link
 );

package/src/scss/atlas/variables/_pagination.scss

@@ -48,7 +48,7 @@ $pagination-disabled-opacity: 0.5 !default;
 $pagination-link-focus: () !default;
 $pagination-link-focus: map-deep-merge(
 	(
-		bg: $pagination-hover-bg,
+		background-color: $pagination-hover-bg,
 		border-color: $pagination-hover-border-color,
 		color: $pagination-hover-color,
 	),
@@ -64,7 +64,7 @@ $pagination-dropdown-menu-spacer-y: 0.625rem !default; // 10px
 $pagination-items-per-page-link-focus: () !default;
 $pagination-items-per-page-link-focus: map-deep-merge(
 	(
-		bg: map-get($pagination-link-focus, bg),
+		background-color: map-get($pagination-link-focus, background-color),
 		border-color: map-get($pagination-link-focus, border-color),
 		color: map-get($pagination-link-focus, color),
 	),

package/src/scss/atlas/variables/_sheets.scss

@@ -36,8 +36,10 @@ $sheet-subtitle-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		transition: box-shadow 0.15s ease-in-out,
-		focus-box-shadow: 0 0 0 0.25rem $white#{','} 0 0 0 0.375rem $primary-l1,
-		focus-outline: 0,
+		focus: (
+			box-shadow: 0 0 0 0.25rem $white#{','} 0 0 0 0.375rem $primary-l1,
+			outline: 0,
+		),
 	),
 	$sheet-subtitle-link
 );

package/src/scss/atlas/variables/_stickers.scss

@@ -1,7 +1,18 @@
+// .sticker
+
 $sticker-font-size: 1rem !default; // 16px
 $sticker-font-weight: $font-weight-bold !default;
 
-// Sticker Sizes
+$sticker: () !default;
+$sticker: map-deep-merge(
+	(
+		font-size: $sticker-font-size,
+		font-weight: $sticker-font-weight,
+	),
+	$sticker
+);
+
+// .sticker-sm
 
 $sticker-sm: () !default;
 $sticker-sm: map-deep-merge(
@@ -11,6 +22,8 @@ $sticker-sm: map-deep-merge(
 	$sticker-sm
 );
 
+// .sticker-lg
+
 $sticker-lg: () !default;
 $sticker-lg: map-deep-merge(
 	(
@@ -19,6 +32,8 @@ $sticker-lg: map-deep-merge(
 	$sticker-lg
 );
 
+// .sticker-xl
+
 $sticker-xl: () !default;
 $sticker-xl: map-deep-merge(
 	(
@@ -27,11 +42,74 @@ $sticker-xl: map-deep-merge(
 	$sticker-xl
 );
 
+$sticker-sizes: () !default;
+$sticker-sizes: map-deep-merge(
+	(
+		sticker-sm: $sticker-sm,
+		sticker-lg: $sticker-lg,
+		sticker-xl: $sticker-xl,
+	),
+	$sticker-sizes
+);
+
 // Sticker Positions
 
 $sticker-inside-offset: 1rem !default; // 16px
 
-// Sticker User Icon
+// .sticker-bottom-left
+
+$sticker-bottom-left: () !default;
+$sticker-bottom-left: map-merge(
+	(
+		bottom: $sticker-inside-offset,
+		left: $sticker-inside-offset,
+		position: absolute,
+		right: auto,
+		top: auto,
+	),
+	$sticker-bottom-left
+);
+
+// .sticker-bottom-right
+
+$sticker-bottom-right: () !default;
+$sticker-bottom-right: map-merge(
+	(
+		bottom: $sticker-inside-offset,
+		left: auto,
+		position: absolute,
+		right: $sticker-inside-offset,
+		top: auto,
+	),
+	$sticker-bottom-right
+);
+
+// .sticker-top-left
+
+$sticker-top-left: () !default;
+$sticker-top-left: map-merge(
+	(
+		left: $sticker-inside-offset,
+		position: absolute,
+		top: $sticker-inside-offset,
+	),
+	$sticker-top-left
+);
+
+// .sticker-top-right
+
+$sticker-top-right: () !default;
+$sticker-top-right: map-merge(
+	(
+		left: auto,
+		position: absolute,
+		right: $sticker-inside-offset,
+		top: $sticker-inside-offset,
+	),
+	$sticker-top-right
+);
+
+// .sticker-user-icon
 
 $sticker-user-icon: () !default;
 $sticker-user-icon: map-deep-merge(
@@ -41,28 +119,114 @@ $sticker-user-icon: map-deep-merge(
 	$sticker-user-icon
 );
 
-// Sticker Variants
+// .sticker-primary
 
 $sticker-primary-bg: $white !default;
 $sticker-primary-color: $primary !default;
 
+$sticker-primary: () !default;
+$sticker-primary: map-deep-merge(
+	(
+		background-color: $sticker-primary-bg,
+		color: $sticker-primary-color,
+	),
+	$sticker-primary
+);
+
+// .sticker-secondary
+
 $sticker-secondary-bg: $white !default;
 $sticker-secondary-color: $secondary !default;
 
+$sticker-secondary: () !default;
+$sticker-secondary: map-deep-merge(
+	(
+		background-color: $sticker-secondary-bg,
+		color: $sticker-secondary-color,
+	),
+	$sticker-secondary
+);
+
+// .sticker-info
+
 $sticker-info-bg: $white !default;
 $sticker-info-color: $info !default;
 
+$sticker-info: () !default;
+$sticker-info: map-deep-merge(
+	(
+		background-color: $sticker-info-bg,
+		color: $sticker-info-color,
+	),
+	$sticker-info
+);
+
+// .sticker-success
+
 $sticker-success-bg: $white !default;
 $sticker-success-color: $success !default;
 
+$sticker-success: () !default;
+$sticker-success: map-deep-merge(
+	(
+		background-color: $sticker-success-bg,
+		color: $sticker-success-color,
+	),
+	$sticker-success
+);
+
+// .sticker-warning
+
 $sticker-warning-bg: $white !default;
 $sticker-warning-color: $warning !default;
 
+$sticker-warning: () !default;
+$sticker-warning: map-deep-merge(
+	(
+		background-color: $sticker-warning-bg,
+		color: $sticker-warning-color,
+	),
+	$sticker-warning
+);
+
+// .sticker-danger
+
 $sticker-danger-bg: $white !default;
 $sticker-danger-color: $danger !default;
 
+$sticker-danger: () !default;
+$sticker-danger: map-deep-merge(
+	(
+		background-color: $sticker-danger-bg,
+		color: $sticker-danger-color,
+	),
+	$sticker-danger
+);
+
+// .sticker-light
+
 $sticker-light-bg: color-yiq($white) !default;
 $sticker-light-color: $light !default;
 
+$sticker-light: () !default;
+$sticker-light: map-deep-merge(
+	(
+		background-color: $sticker-light-bg,
+		color: $sticker-light-color,
+	),
+	$sticker-light
+);
+
+// .sticker-dark
+
 $sticker-dark-bg: $white !default;
 $sticker-dark-color: $dark !default;
+
+$sticker-dark: () !default;
+$sticker-dark: map-deep-merge(
+	(
+		background-color: $sticker-dark-bg,
+		color: $sticker-dark-color,
+	),
+	$sticker-dark
+);