@clayui/css 3.38.0 → 3.41.0

package/src/scss/mixins/_links.scss

@@ -5,18 +5,205 @@
 /// A mixin for creating a link component. This generally should be used with the `a` or `button` element.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
-/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
-/// See Mixin `clay-css` for available keys to pass into the base selector
-/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
-/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active: {Map | Null}, // See Mixin `clay-css` for available keys
-/// active-class: {Map | Null}, // See Mixin `clay-css` for available keys, inherits:
-/// // background-color, border-color, color, font-weight, z-index from active
-/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
-/// disabled-active: {Map | Null}, // See Mixin `clay-css` for available keys
-/// btn-focus: {Map | Null}, // See Mixin `clay-css` for available keys
-/// lexicon-icon: {Map | Null}, // See Mixin `clay-css` for available keys
-/// c-inner: {Map | Null}, // See Mixin `clay-css` for available keys
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
+/// 	before: (
+/// 		// .link::before
+/// 	),
+/// 	after: (
+/// 		// .link::after
+/// 	),
+/// 	link: (
+/// 		// .link:link
+/// 		before: (
+/// 			// .link:link::before
+/// 		),
+/// 		after: (
+/// 			// .link:link::after
+/// 		),
+/// 		inline-item: (
+/// 			// .link:link .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link:link .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link:link .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link:link .inline-item-after
+/// 		),
+/// 	),
+/// 	visited: (
+/// 		// .link:visited
+/// 		before: (
+/// 			// .link:visited::before
+/// 		),
+/// 		after: (
+/// 			// .link:visited::after
+/// 		),
+/// 		inline-item: (
+/// 			// .link:visited .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link:visited .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link:visited .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link:visited .inline-item-after
+/// 		),
+/// 	),
+/// 	hover: (
+/// 		// .link:hover
+/// 		before: (
+/// 			// .link:hover::before
+/// 		),
+/// 		after: (
+/// 			// .link:hover::after
+/// 		),
+/// 		inline-item: (
+/// 			// .link:hover .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link:hover .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link:hover .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link:hover .inline-item-after
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// .link:focus
+/// 		before: (
+/// 			// .link:focus::before
+/// 		),
+/// 		after: (
+/// 			// .link:focus::after
+/// 		),
+/// 		inline-item: (
+/// 			// .link:focus .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link:focus .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link:focus .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link:focus .inline-item-after
+/// 		),
+/// 	),
+/// 	active: (
+/// 		// .link:active
+/// 		before: (
+/// 			// .link:active::before
+/// 		),
+/// 		after: (
+/// 			// .link:active::after
+/// 		),
+/// 		inline-item: (
+/// 			// .link:active .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link:active .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link:active .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link:active .inline-item-after
+/// 		),
+/// 	),
+/// 	active-class: (
+/// 		// .link.active
+/// 		before: (
+/// 			// .link.active::before
+/// 		),
+/// 		after: (
+/// 			// .link.active::after
+/// 		),
+/// 		inline-item: (
+/// 			// .link.active .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link.active .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link.active .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link.active .inline-item-after
+/// 		),
+/// 	),
+/// 	disabled: (
+/// 		// .link:disabled, .link.disabled
+/// 		before: (
+/// 			// .link:disabled::before, .link.disabled::before
+/// 		),
+/// 		after: (
+/// 			// .link:disabled::after, .link.disabled::after
+/// 		),
+/// 		active: (
+/// 			// .link:disabled:active, .link.disabled:active
+/// 			before: (
+/// 				// .link:disabled:active::before, .link.disabled:active::before
+/// 			),
+/// 			after: (
+/// 				// .link:disabled:active::after, .link.disabled:active::after
+/// 			),
+/// 		),
+/// 		inline-item: (
+/// 			// .link:disabled .inline-item
+/// 		),
+/// 		inline-item:-before (
+/// 			// .link:disabled .inline-item-before
+/// 		),
+/// 		inline-item-middle: (
+/// 			// .link:disabled .inline-item-middle
+/// 		),
+/// 		inline-item-after: (
+/// 			// .link:disabled .inline-item-after
+/// 		),
+/// 	),
+/// 	btn-focus: (
+/// 		// .link[type]:focus
+/// 	),
+/// 	show: (
+/// 		// .link[aria-expanded='true'], .link.show, .show .link
+/// 		before: (
+/// 			// .link.show::before
+/// 		),
+/// 		after: (
+/// 			// .link.show::after, .link.disabled::after
+/// 		),
+/// 	),
+/// 	c-inner: (
+/// 		enabled: {Bool}, // Set to false to prevent .dropdown-item styles from being output. Default: true
+/// 		// .link > .c-inner
+/// 	),
+/// 	inline-item: (
+/// 		// .link .inline-item
+/// 	),
+/// 	inline-item-before: (
+/// 		// .link .inline-item-before
+/// 	),
+/// 	inline-item-middle: (
+/// 		// .link .inline-item-middle
+/// 		inline-item-middle: (
+/// 			// .link .inline-item-middle + .inline-item-middle
+/// 		),
+/// 	),
+/// 	inline-item-after: (
+/// 		// .link .inline-item-after
+/// 	),
+/// 	lexicon-icon: (
+/// 		// .link .lexicon-icon
+/// 	),
+/// )
 /// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// hover-bg: {Color | String | Null}, // deprecated after 3.9.0
@@ -39,11 +226,11 @@
 /// active-color: {Color | String | Null}, // deprecated after 3.9.0
 /// active-font-weight: {Number | String | Null}, // deprecated after 3.9.0
 /// active-z-index: {Number | String | Null}, // deprecated after 3.9.0
-/// active-class-bg: {Color | String | Null}, // deprecated after 3.9.0 Default: active-bg
-/// active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0 Default: active-border-color
-/// active-class-color: {Color | String | Null}, // deprecated after 3.9.0 Default: active-color
-/// active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0 Default: active-font-weight
-/// active-class-z-index: {Number | String | Null}, // deprecated after 3.9.0 Default: active-z-index
+/// active-class-bg: {Color | String | Null}, // deprecated after 3.9.0
+/// active-class-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
+/// active-class-color: {Color | String | Null}, // deprecated after 3.9.0
+/// active-class-font-weight: {Number | String | Null}, // deprecated after 3.9.0
+/// active-class-z-index: {Number | String | Null}, // deprecated after 3.9.0
 /// disabled-bg: {Color | String | Null}, // deprecated after 3.9.0
 /// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.9.0
 /// disabled-box-shadow: {String | List | Null}, // deprecated after 3.9.0
@@ -52,16 +239,15 @@
 /// disabled-opacity: {Number | String | Null}, // deprecated after 3.9.0
 /// disabled-pointer-events: {String | Null}, // deprecated after 3.9.0
 /// disabled-text-decoration: {String | Null}, // deprecated after 3.9.0
+/// disabled-active: {Map | Null}, // deprecated after 3.39.0
 /// btn-focus-box-shadow: {String | List | Null}, // deprecated after 3.9.0
 /// btn-focus-outline: {Number | String | Null}, // deprecated after 3.9.0
+/// btn-focus: {Map | Null}, // deprecated after 3.39.0
 /// lexicon-icon-font-size: {Number | String | Null}, // deprecated after 3.9.0
 /// lexicon-icon-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
 /// lexicon-icon-margin-left: {Number | String | Null}, // deprecated after 3.9.0
 /// lexicon-icon-margin-right: {Number | String | Null}, // deprecated after 3.9.0
 /// lexicon-icon-margin-top: {Number | String | Null}, // deprecated after 3.9.0
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-link($map) {
 	$enabled: setter(map-get($map, enabled), true);
@@ -246,8 +432,12 @@
 		)
 	);
 
-	$disabled-active: setter(map-get($map, disabled-active), ());
-	$disabled-active: map-merge(
+	$disabled-active: setter(map-get($disabled, active), ());
+	$disabled-active: map-deep-merge(
+		$disabled-active,
+		map-get($map, disabled-active)
+	);
+	$disabled-active: map-deep-merge(
 		$disabled-active,
 		(
 			pointer-events:
@@ -333,42 +523,250 @@
 	@if ($enabled) {
 		@include clay-css($base);
 
+		&::before {
+			@include clay-css(map-get($map, before));
+		}
+
+		&::after {
+			@include clay-css(map-get($map, after));
+		}
+
+		&:link {
+			@include clay-css(map-get($map, link));
+
+			&::before {
+				@include clay-css(map-deep-get($map, link, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, link, after));
+			}
+
+			.inline-item {
+				@include clay-css(map-deep-get($map, link, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(map-deep-get($map, link, inline-item-before));
+			}
+
+			.inline-item-middle {
+				@include clay-css(map-deep-get($map, link, inline-item-middle));
+			}
+
+			.inline-item-after {
+				@include clay-css(map-deep-get($map, link, inline-item-after));
+			}
+		}
+
+		&:visited {
+			@include clay-css(map-get($map, visited));
+
+			&::before {
+				@include clay-css(map-deep-get($map, visited, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, visited, after));
+			}
+
+			.inline-item {
+				@include clay-css(map-deep-get($map, visited, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(
+					map-deep-get($map, visited, inline-item-before)
+				);
+			}
+
+			.inline-item-middle {
+				@include clay-css(
+					map-deep-get($map, visited, inline-item-middle)
+				);
+			}
+
+			.inline-item-after {
+				@include clay-css(
+					map-deep-get($map, visited, inline-item-after)
+				);
+			}
+		}
+
 		&:hover {
 			@include clay-css($hover);
-		}
 
-		@at-root {
-			button#{&} {
-				&:focus {
-					@include clay-css($btn-focus);
-				}
+			&::before {
+				@include clay-css(map-deep-get($map, hover, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, hover, after));
+			}
+
+			.inline-item {
+				@include clay-css(map-get($hover, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(map-get($hover, inline-item-before));
+			}
+
+			.inline-item-middle {
+				@include clay-css(map-get($hover, inline-item-middle));
+			}
+
+			.inline-item-after {
+				@include clay-css(map-get($hover, inline-item-after));
 			}
 		}
 
 		&:focus {
 			@include clay-css($focus);
+
+			&::before {
+				@include clay-css(map-deep-get($map, focus, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, focus, after));
+			}
+
+			.inline-item {
+				@include clay-css(map-get($focus, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(map-get($focus, inline-item-before));
+			}
+
+			.inline-item-middle {
+				@include clay-css(map-get($focus, inline-item-middle));
+			}
+
+			.inline-item-after {
+				@include clay-css(map-get($focus, inline-item-after));
+			}
 		}
 
 		&:active {
 			@include clay-css($active);
+
+			&::before {
+				@include clay-css(map-deep-get($map, active, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, active, after));
+			}
+
+			.inline-item {
+				@include clay-css(map-get($active, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(map-get($active, inline-item-before));
+			}
+
+			.inline-item-middle {
+				@include clay-css(map-get($active, inline-item-middle));
+			}
+
+			.inline-item-after {
+				@include clay-css(map-get($active, inline-item-after));
+			}
 		}
 
 		&.active {
 			@include clay-css($active-class);
-		}
 
-		&[aria-expanded='true'],
-		&.show,
-		.show > & {
-			@include clay-css($show);
+			&::before {
+				@include clay-css(map-deep-get($map, active-class, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, active-class, after));
+			}
+
+			.inline-item {
+				@include clay-css(map-get($active-class, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(map-get($active-class, inline-item-before));
+			}
+
+			.inline-item-middle {
+				@include clay-css(map-get($active-class, inline-item-middle));
+			}
+
+			.inline-item-after {
+				@include clay-css(map-get($active-class, inline-item-after));
+			}
 		}
 
 		&:disabled,
 		&.disabled {
 			@include clay-css($disabled);
 
+			&::before {
+				@include clay-css(map-deep-get($map, disabled, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, disabled, after));
+			}
+
 			&:active {
 				@include clay-css($disabled-active);
+
+				&::before {
+					@include clay-css(
+						map-deep-get($map, disabled, active, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(
+						map-deep-get($map, disabled, active, after)
+					);
+				}
+			}
+
+			.inline-item {
+				@include clay-css(map-get($disabled, inline-item));
+			}
+
+			.inline-item-before {
+				@include clay-css(map-get($disabled, inline-item-before));
+			}
+
+			.inline-item-middle {
+				@include clay-css(map-get($disabled, inline-item-middle));
+			}
+
+			.inline-item-after {
+				@include clay-css(map-get($disabled, inline-item-after));
+			}
+		}
+
+		&[type] {
+			&:focus {
+				@include clay-css($btn-focus);
+			}
+		}
+
+		&[aria-expanded='true'],
+		&.show,
+		.show > & {
+			@include clay-css($show);
+
+			&::before {
+				@include clay-css(map-deep-get($map, show, before));
+			}
+
+			&::after {
+				@include clay-css(map-deep-get($map, show, after));
 			}
 		}
 
@@ -378,6 +776,28 @@
 			}
 		}
 
+		.inline-item {
+			@include clay-css(map-get($map, inline-item));
+		}
+
+		.inline-item-before {
+			@include clay-css(map-get($map, inline-item-before));
+		}
+
+		.inline-item-middle {
+			@include clay-css(map-get($map, inline-item-middle));
+
+			+ .inline-item-middle {
+				@include clay-css(
+					map-deep-get($map, inline-item-middle, inline-item-middle)
+				);
+			}
+		}
+
+		.inline-item-after {
+			@include clay-css(map-get($map, inline-item-after));
+		}
+
 		.lexicon-icon {
 			@include clay-css($lexicon-icon);
 		}

package/src/scss/mixins/_navbar.scss

@@ -55,8 +55,8 @@
 	$link-margin-x: map-get($map, link-margin-x);
 	$link-margin-y: setter(
 		map-get($map, link-margin-y),
-		(($height - $border-bottom-width - $border-top-width) - $link-height) /
-			2
+		(($height - $border-bottom-width - $border-top-width) - $link-height) *
+			0.5
 	);
 	$link-padding-x: setter(
 		map-get($map, link-padding-x),
@@ -79,7 +79,7 @@
 									$cadmin-line-height-base
 								)
 						)
-				) / 2
+				) * 0.5
 		)
 	);
 	$btn-font-size: setter(map-get($map, btn-font-size), $font-size);
@@ -100,7 +100,7 @@
 							$cadmin-nav-item-monospaced-size
 						)
 					)
-			) / 2
+			) * 0.5
 	);
 	$btn-padding-x: setter(map-get($map, btn-padding-x), $link-padding-x);
 	$btn-padding-y: setter(map-get($map, btn-padding-y), $link-padding-y);
@@ -133,7 +133,7 @@
 									$cadmin-line-height-base
 								)
 						)
-				) / 2
+				) * 0.5
 		)
 	);
 	$title-font-size: map-get($map, title-font-size);
@@ -159,7 +159,7 @@
 		(
 				($height-mobile - $border-bottom-width - $border-top-width) -
 					$link-height-mobile
-			) / 2
+			) * 0.5
 	);
 	$link-padding-x-mobile: setter(
 		map-get($map, link-padding-x-mobile),
@@ -177,7 +177,7 @@
 								$cadmin-line-height-base
 							)
 					)
-			) / 2
+			) * 0.5
 	);
 	$btn-font-size-mobile: setter(
 		map-get($map, btn-font-size-mobile),
@@ -209,7 +209,7 @@
 							$cadmin-nav-item-monospaced-size
 						)
 					)
-			) / 2
+			) * 0.5
 	);
 	$btn-padding-x-mobile: setter(
 		map-get($map, btn-padding-x-mobile),
@@ -250,7 +250,7 @@
 									$cadmin-line-height-base
 								)
 						)
-				) / 2
+				) * 0.5
 		)
 	);
 	$collapse-dropdown-item-padding-x-mobile: map-get(
@@ -321,7 +321,7 @@
 				$height-mobile - $border-bottom-width - $border-top-width -
 					($padding-y * 2) -
 					($toggler-link-font-size * $toggler-link-line-height)
-			) / 2
+			) * 0.5
 	);
 
 	$active-border-bottom-width: setter(

package/src/scss/mixins/_rfs.scss

@@ -51,10 +51,15 @@ $rfs-base-font-size-unit: unit($rfs-base-font-size);
 // Remove px-unit from $rfs-base-font-size for calculations
 
 @if $rfs-base-font-size-unit == 'px' {
-	$rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
+	$rfs-base-font-size: clay-div(
+		$rfs-base-font-size,
+		($rfs-base-font-size * 0 + 1)
+	);
 } @else if $rfs-base-font-size-unit == 'rem' {
-	$rfs-base-font-size: $rfs-base-font-size /
-		($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
+	$rfs-base-font-size: clay-div(
+		$rfs-base-font-size,
+		($rfs-base-font-size * 0 + clay-div(1, $rfs-rem-value))
+	);
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -64,7 +69,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 // Remove unit from $rfs-breakpoint for calculations
 
 @if $rfs-breakpoint-unit-cache == 'px' {
-	$rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+	$rfs-breakpoint: clay-div($rfs-breakpoint, ($rfs-breakpoint * 0 + 1));
 } @else if
 	$rfs-breakpoint-unit-cache ==
 	'rem' or
@@ -72,7 +77,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 	'em'
 {
 	$rfs-breakpoint: $rfs-breakpoint /
-		($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+		($rfs-breakpoint * 0 + clay-div(1, $rfs-rem-value));
 }
 
 // Responsive font-size mixin
@@ -109,15 +114,15 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 		// Remove px-unit from $fs for calculations
 
 		@if $fs-unit == 'px' {
-			$fs: $fs / ($fs * 0 + 1);
+			$fs: clay-div($fs, ($fs * 0 + 1));
 		} @else if $fs-unit == 'rem' {
-			$fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
+			$fs: clay-div($fs, ($fs * 0 + clay-div(1, $rfs-rem-value)));
 		}
 
 		// Set default font-size
 
 		@if $rfs-font-size-unit == rem {
-			$rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
+			$rfs-static: #{clay-div($fs, $rfs-rem-value)}rem#{$rfs-suffix};
 		} @else if $rfs-font-size-unit == px {
 			$rfs-static: #{$fs}px#{$rfs-suffix};
 		} @else {
@@ -146,7 +151,7 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
 			$min-width: if(
 				$rfs-font-size-unit == rem,
-				#{$fs-min / $rfs-rem-value}rem,
+				#{clay-div($fs-min, $rfs-rem-value)}rem,
 				#{$fs-min}px
 			);