@clayui/css 3.38.0 → 3.41.0

package/src/scss/variables/_navs.scss

@@ -20,11 +20,15 @@ $nav-link: map-deep-merge(
 		),
 		focus: (
 			text-decoration: none,
+			z-index: 1,
+		),
+		disabled: (
+			color: $nav-link-disabled-color,
+			cursor: $nav-link-disabled-cursor,
+			active: (
+				pointer-events: none,
+			),
 		),
-		focus-z-index: 1,
-		disabled-color: $nav-link-disabled-color,
-		disabled-cursor: $nav-link-disabled-cursor,
-		disabled-active-pointer-events: none,
 	),
 	$nav-link
 );
@@ -52,7 +56,7 @@ $nav-btn-margin-x: 0.25rem !default; // 4px
 $nav-btn-margin-y: (
 		($line-height-base * $font-size-base) + ($nav-link-padding-y * 2) -
 			$nav-item-monospaced-size
-	) / 2 !default;
+	) * 0.5 !default;
 
 /// @deprecated after v3.4.0 use the Sass map `$nav-btn` instead
 
@@ -76,15 +80,21 @@ $nav-btn: map-deep-merge(
 		position: relative,
 		text-align: center,
 		width: auto,
-		focus-z-index: 1,
-		disabled-opacity: 1,
+		focus: (
+			z-index: 1,
+		),
+		disabled: (
+			opacity: 1,
+		),
 		c-inner: (
 			margin-bottom: 0,
 			margin-left: math-sign($nav-btn-padding-x),
 			margin-right: math-sign($nav-btn-padding-x),
 			margin-top: math-sign($btn-border-width),
 		),
-		lexicon-icon-margin-top: 0,
+		lexicon-icon: (
+			margin-top: 0,
+		),
 	),
 	$nav-btn
 );
@@ -111,13 +121,15 @@ $nav-link-monospaced: map-deep-merge(
 		margin: $nav-btn-margin-y $nav-btn-margin-x,
 		min-width: $nav-item-monospaced-size,
 		padding: 0,
-		lexicon-icon-margin-top: 0,
+		lexicon-icon: (
+			margin-top: 0,
+		),
 	),
 	$nav-link-monospaced
 );
 
 $nav-divider-color: $gray-200 !default;
-$nav-divider-margin-y: $spacer / 2 !default;
+$nav-divider-margin-y: $spacer * 0.5 !default;
 
 $nav-form-padding-bottom: 0 !default;
 $nav-form-padding-left: $nav-link-padding-x !default;
@@ -198,7 +210,7 @@ $nav-tabs-link-show-border-color: $nav-tabs-link-active-border-color !default;
 $nav-tabs-link-show: () !default;
 $nav-tabs-link-show: map-deep-merge(
 	(
-		bg: $nav-tabs-link-show-bg,
+		background-color: $nav-tabs-link-show-bg,
 		border-color: $nav-tabs-link-show-border-color,
 		color: $nav-tabs-link-show-color,
 	),
@@ -249,10 +261,18 @@ $nav-underline-link: map-deep-merge(
 		padding-left: $nav-underline-link-padding-x,
 		padding-right: $nav-underline-link-padding-x,
 		padding-top: $nav-underline-link-padding-y,
-		hover-color: $nav-underline-link-hover-color,
-		focus-color: $nav-underline-link-hover-color,
-		active-class-color: $nav-underline-link-active-color,
-		disabled-color: $nav-underline-link-disabled-color,
+		hover: (
+			color: $nav-underline-link-hover-color,
+		),
+		focus: (
+			color: $nav-underline-link-hover-color,
+		),
+		active-class: (
+			color: $nav-underline-link-active-color,
+		),
+		disabled: (
+			color: $nav-underline-link-disabled-color,
+		),
 	),
 	$nav-underline-link
 );
@@ -270,8 +290,8 @@ $nav-underline-link-show: map-deep-merge(
 $nav-underline-link-highlight-content: null !default;
 $nav-underline-link-highlight-height: null !default;
 $nav-underline-link-highlight-bottom: 0 !default;
-$nav-underline-link-highlight-left: $nav-link-padding-x / 2 !default;
-$nav-underline-link-highlight-right: $nav-link-padding-x / 2 !default;
+$nav-underline-link-highlight-left: $nav-link-padding-x * 0.5 !default;
+$nav-underline-link-highlight-right: $nav-link-padding-x * 0.5 !default;
 $nav-underline-link-highlight-top: null !default;
 
 $nav-underline-link-active-highlight: $component-active-bg !default;

package/src/scss/variables/_pagination.scss

@@ -88,7 +88,7 @@ $pagination-link: () !default;
 $pagination-link: map-deep-merge(
 	(
 		align-items: center,
-		bg: $pagination-bg,
+		background-color: $pagination-bg,
 		border-radius: $pagination-link-border-radius,
 		border-color: $pagination-border-color,
 		border-style: solid,
@@ -106,7 +106,9 @@ $pagination-link: map-deep-merge(
 		padding-top: $pagination-padding-y,
 		position: relative,
 		transition: $pagination-link-transition,
-		lexicon-icon-margin-top: 0,
+		lexicon-icon: (
+			margin-top: 0,
+		),
 	),
 	$pagination-link
 );
@@ -114,7 +116,7 @@ $pagination-link: map-deep-merge(
 $pagination-link-hover: () !default;
 $pagination-link-hover: map-deep-merge(
 	(
-		bg: $pagination-hover-bg,
+		background-color: $pagination-hover-bg,
 		border-color: $pagination-hover-border-color,
 		color: $pagination-hover-color,
 		text-decoration: none,
@@ -136,7 +138,7 @@ $pagination-link-focus: map-deep-merge(
 $pagination-link-active: () !default;
 $pagination-link-active: map-deep-merge(
 	(
-		bg: $pagination-active-bg,
+		background-color: $pagination-active-bg,
 		border-color: $pagination-active-border-color,
 		color: $pagination-active-color,
 		cursor: default,
@@ -148,7 +150,7 @@ $pagination-link-active: map-deep-merge(
 $pagination-link-disabled: () !default;
 $pagination-link-disabled: map-deep-merge(
 	(
-		bg: $pagination-disabled-bg,
+		background-color: $pagination-disabled-bg,
 		border-color: $pagination-disabled-border-color,
 		box-shadow: none,
 		color: $pagination-disabled-color,
@@ -221,7 +223,7 @@ $pagination-items-per-page-link: () !default;
 $pagination-items-per-page-link: map-deep-merge(
 	(
 		align-items: center,
-		bg: $pagination-items-per-page-bg,
+		background-color: $pagination-items-per-page-bg,
 		border-color: $pagination-items-per-page-border-color,
 		border-radius: $pagination-items-per-page-border-radius,
 		border-style: solid,
@@ -237,10 +239,10 @@ $pagination-items-per-page-link: map-deep-merge(
 		padding-top: $pagination-padding-y,
 		text-decoration: none,
 		transition: $pagination-items-per-page-transition,
-		lexicon-icon-margin-left:
-			$pagination-items-per-page-lexicon-icon-margin-left,
-		lexicon-icon-margin-top:
-			$pagination-items-per-page-lexicon-icon-margin-top,
+		lexicon-icon: (
+			margin-left: $pagination-items-per-page-lexicon-icon-margin-left,
+			margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
+		),
 	),
 	$pagination-items-per-page-link
 );
@@ -248,7 +250,7 @@ $pagination-items-per-page-link: map-deep-merge(
 $pagination-items-per-page-link-hover: () !default;
 $pagination-items-per-page-link-hover: map-deep-merge(
 	(
-		bg: $pagination-items-per-page-hover-bg,
+		background-color: $pagination-items-per-page-hover-bg,
 		border-color: $pagination-items-per-page-hover-border-color,
 		color: $pagination-items-per-page-hover-color,
 	),
@@ -267,7 +269,7 @@ $pagination-items-per-page-link-focus: map-deep-merge(
 $pagination-items-per-page-link-active: () !default;
 $pagination-items-per-page-link-active: map-deep-merge(
 	(
-		bg: $pagination-active-bg,
+		background-color: $pagination-active-bg,
 		border-color: $pagination-active-border-color,
 		color: $pagination-active-color,
 	),
@@ -277,7 +279,7 @@ $pagination-items-per-page-link-active: map-deep-merge(
 $pagination-items-per-page-link-disabled: () !default;
 $pagination-items-per-page-link-disabled: map-deep-merge(
 	(
-		bg: $pagination-disabled-bg,
+		background-color: $pagination-disabled-bg,
 		border-color: $pagination-disabled-border-color,
 		box-shadow: none,
 		color: $pagination-disabled-color,

package/src/scss/variables/_sheets.scss

@@ -126,8 +126,10 @@ $sheet-subtitle-link: map-deep-merge(
 	(
 		color: $sheet-subtitle-link-color,
 		text-decoration: $sheet-subtitle-link-text-decoration,
-		hover-color: $sheet-subtitle-link-hover-color,
-		hover-text-decoration: $sheet-subtitle-link-hover-text-decoration,
+		hover: (
+			color: $sheet-subtitle-link-hover-color,
+			text-decoration: $sheet-subtitle-link-hover-text-decoration,
+		),
 	),
 	$sheet-subtitle-link
 );

package/src/scss/variables/_stickers.scss

@@ -1,3 +1,5 @@
+// .sticker
+
 $sticker-border-color: null !default;
 $sticker-border-radius: $border-radius !default;
 $sticker-border-style: null !default;
@@ -9,133 +11,408 @@ $sticker-size: 2rem !default; // 32px
 
 $sticker-inline-item-font-size: null !default;
 
-// Sticker Sizes
+$sticker: () !default;
+$sticker: map-deep-merge(
+	(
+		align-items: center,
+		border-color: $sticker-border-color,
+		border-radius: clay-enable-rounded($sticker-border-radius),
+		border-style: $sticker-border-style,
+		border-width: $sticker-border-width,
+		color: $sticker-color,
+		height: $sticker-size,
+		line-height: $sticker-size,
+		display: inline-flex,
+		font-size: $sticker-font-size,
+		font-weight: $sticker-font-weight,
+		justify-content: center,
+		position: relative,
+		text-align: center,
+		vertical-align: middle,
+		width: $sticker-size,
+		inline-item: (
+			font-size: $sticker-inline-item-font-size,
+			justify-content: center,
+			lexicon-icon: (
+				margin-top: 0,
+			),
+		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$sticker
+);
+
+// .sticker-overlay
+
+$sticker-overlay: () !default;
+$sticker-overlay: map-merge(
+	(
+		align-items: center,
+		border-radius: inherit,
+		bottom: 0,
+		display: flex,
+		justify-content: center,
+		left: 0,
+		overflow: hidden,
+		position: absolute,
+		right: 0,
+		top: 0,
+	),
+	$sticker-overlay
+);
+
+// .sticker-sm
 
 $sticker-sm: () !default;
 $sticker-sm: map-deep-merge(
 	(
 		font-size: 0.75rem,
-		size: 1.5rem,
+		height: 1.5rem,
+		line-height: 1.5rem,
+		width: 1.5rem,
+		sticker-outside: (
+			left: -0.75rem,
+			top: -0.75rem,
+			sticker-bottom-left: (
+				bottom: -0.75rem,
+				top: auto,
+			),
+			sticker-bottomr-right: (
+				bottom: -0.75rem,
+				left: auto,
+				right: -0.75rem,
+				top: auto,
+			),
+			sticker-top-right: (
+				left: auto,
+				right: -0.75rem,
+			),
+		),
 	),
 	$sticker-sm
 );
 
+// .sticker-lg
+
 $sticker-lg: () !default;
 $sticker-lg: map-deep-merge(
 	(
 		font-size: 1.125rem,
-		size: 2.5rem,
+		height: 2.5rem,
+		line-height: 2.5rem,
+		width: 2.5rem,
+		sticker-outside: (
+			left: -1.25rem,
+			top: -1.25rem,
+			sticker-bottom-left: (
+				bottom: -1.25rem,
+				top: auto,
+			),
+			sticker-bottomr-right: (
+				bottom: -1.25rem,
+				left: auto,
+				right: -1.25rem,
+				top: auto,
+			),
+			sticker-top-right: (
+				left: auto,
+				right: -1.25rem,
+			),
+		),
 	),
 	$sticker-lg
 );
 
+// .sticker-xl
+
 $sticker-xl: () !default;
 $sticker-xl: map-deep-merge(
 	(
 		font-size: 1.25rem,
-		size: 3rem,
+		height: 3rem,
+		line-height: 3rem,
+		width: 3rem,
+		sticker-outside: (
+			left: -1.5rem,
+			top: -1.5rem,
+			sticker-bottom-left: (
+				bottom: -1.5rem,
+				top: auto,
+			),
+			sticker-bottomr-right: (
+				bottom: -1.5rem,
+				left: auto,
+				right: -1.5rem,
+				top: auto,
+			),
+			sticker-top-right: (
+				left: auto,
+				right: -1.5rem,
+			),
+		),
 	),
 	$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: $grid-gutter-width / 2 !default;
-$sticker-outside-offset: -($sticker-size / 2) !default;
+$sticker-inside-offset: $grid-gutter-width * 0.5 !default;
+
+// .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 Circle
+// .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-outside
+
+$sticker-outside-offset: math-sign($sticker-size * 0.5) !default;
+
+$sticker-outside: () !default;
+$sticker-outside: map-deep-merge(
+	(
+		left: $sticker-outside-offset,
+		top: $sticker-outside-offset,
+		sticker-bottom-left: (
+			bottom: $sticker-outside-offset,
+			top: auto,
+		),
+		sticker-bottom-right: (
+			bottom: $sticker-outside-offset,
+			left: auto,
+			right: $sticker-outside-offset,
+			top: auto,
+		),
+		sticker-top-right: (
+			left: auto,
+			right: $sticker-outside-offset,
+		),
+	),
+	$sticker-outside
+);
+
+// .sticker-circle
 
 $sticker-circle-border-radius: $rounded-circle-border-radius !default;
 
-// Sticker User Icon
+$sticker-circle: () !default;
+$sticker-circle: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($sticker-circle-border-radius),
+	),
+	$sticker-circle
+);
+
+// .sticker-user-icon
 
 $sticker-user-icon: () !default;
 $sticker-user-icon: map-deep-merge(
 	(
-		bg: $white,
+		background-color: $white,
 		border-radius: $rounded-circle-border-radius,
 		box-shadow: 0 0 0 1px rgba($black, 0.125),
 	),
 	$sticker-user-icon
 );
 
-// Sticker Variants
+// .sticker-primary
 
 $sticker-primary-bg: $primary !default;
 $sticker-primary-border-color: null !default;
 $sticker-primary-color: color-yiq($sticker-primary-bg) !default;
 
+$sticker-primary: () !default;
+$sticker-primary: map-deep-merge(
+	(
+		background-color: $sticker-primary-bg,
+		border-color: $sticker-primary-border-color,
+		color: $sticker-primary-color,
+	),
+	$sticker-primary
+);
+
+// .sticker-secondary
+
 $sticker-secondary-bg: $secondary !default;
 $sticker-secondary-border-color: null !default;
 $sticker-secondary-color: color-yiq($sticker-secondary-bg) !default;
 
+$sticker-secondary: () !default;
+$sticker-secondary: map-deep-merge(
+	(
+		background-color: $sticker-secondary-bg,
+		border-color: $sticker-secondary-border-color,
+		color: $sticker-secondary-color,
+	),
+	$sticker-secondary
+);
+
+// .sticker-info
+
 $sticker-info-bg: $info !default;
 $sticker-info-border-color: null !default;
 $sticker-info-color: color-yiq($sticker-info-bg) !default;
 
+$sticker-info: () !default;
+$sticker-info: map-deep-merge(
+	(
+		background-color: $sticker-info-bg,
+		border-color: $sticker-info-border-color,
+		color: $sticker-info-color,
+	),
+	$sticker-info
+);
+
+// .sticker-success
+
 $sticker-success-bg: $success !default;
 $sticker-success-border-color: null !default;
 $sticker-success-color: color-yiq($sticker-success-bg) !default;
 
+$sticker-success: () !default;
+$sticker-success: map-deep-merge(
+	(
+		background-color: $sticker-success-bg,
+		border-color: $sticker-success-border-color,
+		color: $sticker-success-color,
+	),
+	$sticker-success
+);
+
+// .sticker-warning
+
 $sticker-warning-bg: $warning !default;
 $sticker-warning-border-color: null !default;
 $sticker-warning-color: color-yiq($sticker-warning-bg) !default;
 
+$sticker-warning: () !default;
+$sticker-warning: map-deep-merge(
+	(
+		background-color: $sticker-warning-bg,
+		border-color: $sticker-warning-border-color,
+		color: $sticker-warning-color,
+	),
+	$sticker-warning
+);
+
+// .sticker-danger
+
 $sticker-danger-bg: $danger !default;
 $sticker-danger-border-color: null !default;
 $sticker-danger-color: color-yiq($sticker-danger-bg) !default;
 
+$sticker-danger: () !default;
+$sticker-danger: map-deep-merge(
+	(
+		background-color: $sticker-danger-bg,
+		border-color: $sticker-danger-border-color,
+		color: $sticker-danger-color,
+	),
+	$sticker-danger
+);
+
+// .sticker-light
+
 $sticker-light-bg: $light !default;
 $sticker-light-border-color: null !default;
 $sticker-light-color: color-yiq($sticker-light-bg) !default;
 
+$sticker-light: () !default;
+$sticker-light: map-deep-merge(
+	(
+		background-color: $sticker-light-bg,
+		border-color: $sticker-light-border-color,
+		color: $sticker-light-color,
+	),
+	$sticker-light
+);
+
+// .sticker-dark
+
 $sticker-dark-bg: $dark !default;
 $sticker-dark-border-color: null !default;
 $sticker-dark-color: color-yiq($sticker-dark-bg) !default;
 
+$sticker-dark: () !default;
+$sticker-dark: map-deep-merge(
+	(
+		background-color: $sticker-dark-bg,
+		border-color: $sticker-dark-border-color,
+		color: $sticker-dark-color,
+	),
+	$sticker-dark
+);
+
 $sticker-palette: () !default;
 $sticker-palette: map-deep-merge(
 	(
-		primary: (
-			bg: $sticker-primary-bg,
-			border-color: $sticker-primary-border-color,
-			color: $sticker-primary-color,
-		),
-		secondary: (
-			bg: $sticker-secondary-bg,
-			border-color: $sticker-secondary-border-color,
-			color: $sticker-secondary-color,
-		),
-		success: (
-			bg: $sticker-success-bg,
-			border-color: $sticker-success-border-color,
-			color: $sticker-success-color,
-		),
-		info: (
-			bg: $sticker-info-bg,
-			border-color: $sticker-info-border-color,
-			color: $sticker-info-color,
-		),
-		warning: (
-			bg: $sticker-warning-bg,
-			border-color: $sticker-warning-border-color,
-			color: $sticker-warning-color,
-		),
-		danger: (
-			bg: $sticker-danger-bg,
-			border-color: $sticker-danger-border-color,
-			color: $sticker-danger-color,
-		),
-		light: (
-			bg: $sticker-light-bg,
-			border-color: $sticker-light-border-color,
-			color: $sticker-light-color,
-		),
-		dark: (
-			bg: $sticker-dark-bg,
-			border-color: $sticker-dark-border-color,
-			color: $sticker-dark-color,
-		),
+		primary: $sticker-primary,
+		secondary: $sticker-secondary,
+		success: $sticker-success,
+		info: $sticker-info,
+		warning: $sticker-warning,
+		danger: $sticker-danger,
+		light: $sticker-light,
+		dark: $sticker-dark,
 	),
 	$sticker-palette
 );