@clayui/css 3.41.0 → 3.42.0

package/src/scss/mixins/_tooltip.scss

@@ -0,0 +1,70 @@
+////
+/// @group tooltip
+////
+
+/// A mixin to help create `.tooltip` variants.
+/// @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
+/// 	// .tooltip
+/// 	show: (
+/// 		// .tooltip.show
+/// 	),
+/// 	arrow: (
+/// 		// .tooltip .arrow
+/// 		before: (
+/// 			// .tooltip .arrow::before
+/// 		),
+/// 		after: (
+/// 			// .tooltip .arrow::after
+/// 		),
+/// 	),
+/// 	tooltip-inner: (
+/// 		// .tooltip .tooltip-inner
+/// 	),
+/// )
+
+@mixin clay-tooltip-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			&.show {
+				@include clay-css(map-get($map, show));
+			}
+
+			.arrow {
+				@include clay-css(map-get($map, arrow));
+
+				&::before {
+					@include clay-css(map-deep-get($map, arrow, before));
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, arrow, after));
+				}
+			}
+
+			.tooltip-arrow {
+				@include clay-css(map-get($map, tooltip-arrow));
+
+				&::before {
+					@include clay-css(
+						map-deep-get($map, tooltip-arrow, before)
+					);
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, tooltip-arrow, after));
+				}
+			}
+
+			.tooltip-inner {
+				@include clay-css(map-get($map, tooltip-inner));
+			}
+		}
+	}
+}

package/src/scss/variables/_application-bar.scss

@@ -21,13 +21,25 @@ $application-bar-base: () !default;
 $application-bar-dark: () !default;
 $application-bar-dark: map-deep-merge(
 	(
-		bg: $dark,
+		background-color: $dark,
 		color: $navbar-dark-color,
-		link-color: $navbar-dark-color,
-		link-hover-color: $navbar-dark-hover-color,
-		link-active-color: $navbar-dark-active-color,
-		link-disabled-color: $navbar-dark-disabled-color,
-		link-disabled-opacity: 1,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-dark-color,
+				hover: (
+					color: $navbar-dark-hover-color,
+				),
+				active: (
+					color: $navbar-dark-active-color,
+				),
+				disabled: (
+					color: $navbar-dark-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$application-bar-dark
 );

package/src/scss/variables/_management-bar.scss

@@ -1,4 +1,13 @@
 $management-bar-base: () !default;
+$management-bar-base: map-deep-merge(
+	(
+		border-color: transparent,
+		border-style: solid,
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
+	),
+	$management-bar-base
+);
 
 $management-bar-size: () !default;
 $management-bar-size: map-deep-merge(
@@ -29,12 +38,24 @@ $management-bar-size: map-deep-merge(
 $management-bar-light: () !default;
 $management-bar-light: map-deep-merge(
 	(
-		bg: $light,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		background-color: $light,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					color: $navbar-light-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$management-bar-light
 );
@@ -42,14 +63,26 @@ $management-bar-light: map-deep-merge(
 $management-bar-primary: () !default;
 $management-bar-primary: map-deep-merge(
 	(
-		bg: $primary-l3,
+		background-color: $primary-l3,
 		border-color: $primary,
 		color: $navbar-light-color,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					disabled-color: $navbar-light-disabled-color,
+					disabled-opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$management-bar-primary
 );

package/src/scss/variables/_navigation-bar.scss

@@ -17,16 +17,59 @@ $navigation-bar-size: map-deep-merge(
 );
 
 $navigation-bar-base: () !default;
+$navigation-bar-base: map-deep-merge(
+	(
+		border-color: transparent,
+		border-style: solid,
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
+	),
+	$navigation-bar-base
+);
 
 $navigation-bar-light: () !default;
 $navigation-bar-light: map-deep-merge(
 	(
-		bg: $light,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		background-color: $light,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					color: $navbar-light-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $navbar-light-color,
+								hover: (
+									color: $navbar-light-hover-color,
+								),
+								active: (
+									color: $navbar-light-active-color,
+								),
+								disabled: (
+									color: $navbar-light-disabled-color,
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$navigation-bar-light
 );
@@ -34,15 +77,53 @@ $navigation-bar-light: map-deep-merge(
 $navigation-bar-secondary: () !default;
 $navigation-bar-secondary: map-deep-merge(
 	(
-		bg: $secondary,
+		background-color: $secondary,
 		color: $white,
-		link-color: rgba(255, 255, 255, 0.65),
-		link-hover-color: rgba(255, 255, 255, 0.9),
-		link-active-color: rgba(255, 255, 255, 0.9),
-		link-disabled-color: rgba(255, 255, 255, 0.25),
-		link-disabled-opacity: 1,
-		brand-color: rgba(255, 255, 255, 0.9),
-		brand-hover-color: rgba(255, 255, 255, 0.9),
+		navbar-nav: (
+			nav-link: (
+				color: rgba(255, 255, 255, 0.65),
+				hover: (
+					color: rgba(255, 255, 255, 0.9),
+				),
+				active: (
+					color: rgba(255, 255, 255, 0.9),
+				),
+				disabled: (
+					color: rgba(255, 255, 255, 0.25),
+					opacity: 1,
+				),
+			),
+		),
+		navbar-brand: (
+			color: rgba(255, 255, 255, 0.9),
+			hover: (
+				color: rgba(255, 255, 255, 0.9),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: rgba(255, 255, 255, 0.65),
+								hover: (
+									color: rgba(255, 255, 255, 0.9),
+								),
+								active: (
+									color: rgba(255, 255, 255, 0.9),
+								),
+								disabled: (
+									color: rgba(255, 255, 255, 0.25),
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$navigation-bar-secondary
 );

package/src/scss/variables/_pagination.scss

@@ -82,36 +82,7 @@ $pagination-disabled-opacity: 1 !default;
 
 $pagination-disabled-pointer-events: auto !default;
 
-// Pagination Link
-
-$pagination-link: () !default;
-$pagination-link: map-deep-merge(
-	(
-		align-items: center,
-		background-color: $pagination-bg,
-		border-radius: $pagination-link-border-radius,
-		border-color: $pagination-border-color,
-		border-style: solid,
-		border-width: $pagination-border-width,
-		color: $pagination-color,
-		cursor: $pagination-link-cursor,
-		display: inline-flex,
-		height: $pagination-item-height,
-		justify-content: center,
-		line-height: $pagination-line-height,
-		margin-left: 0,
-		padding-bottom: $pagination-padding-y,
-		padding-left: $pagination-padding-x,
-		padding-right: $pagination-padding-x,
-		padding-top: $pagination-padding-y,
-		position: relative,
-		transition: $pagination-link-transition,
-		lexicon-icon: (
-			margin-top: 0,
-		),
-	),
-	$pagination-link
-);
+// .page-link
 
 $pagination-link-hover: () !default;
 $pagination-link-hover: map-deep-merge(
@@ -158,10 +129,103 @@ $pagination-link-disabled: map-deep-merge(
 		opacity: $pagination-disabled-opacity,
 		pointer-events: $pagination-disabled-pointer-events,
 		z-index: $zindex-pagination-link-disabled,
+		active: (
+			pointer-events: none,
+		),
 	),
 	$pagination-link-disabled
 );
 
+$pagination-link: () !default;
+$pagination-link: map-deep-merge(
+	(
+		align-items: center,
+		background-color: $pagination-bg,
+		border-radius: $pagination-link-border-radius,
+		border-color: $pagination-border-color,
+		border-style: solid,
+		border-width: $pagination-border-width,
+		color: $pagination-color,
+		cursor: $pagination-link-cursor,
+		display: inline-flex,
+		height: $pagination-item-height,
+		justify-content: center,
+		line-height: $pagination-line-height,
+		margin-left: 0,
+		padding-bottom: $pagination-padding-y,
+		padding-left: $pagination-padding-x,
+		padding-right: $pagination-padding-x,
+		padding-top: $pagination-padding-y,
+		position: relative,
+		transition: $pagination-link-transition,
+		hover: $pagination-link-hover,
+		focus: $pagination-link-focus,
+		active: $pagination-link-active,
+		disabled: $pagination-link-disabled,
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$pagination-link
+);
+
+// .page-link-first
+
+$pagination-link-first: () !default;
+$pagination-link-first: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($pagination-link-first-border-radius),
+	),
+	$pagination-link-first
+);
+
+// .page-link-last
+
+$pagination-link-last: () !default;
+$pagination-link-last: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($pagination-link-last-border-radius),
+	),
+	$pagination-link-last
+);
+
+// .pagination
+
+$pagination: () !default;
+$pagination: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($border-radius),
+		display: flex,
+		flex-wrap: wrap,
+		font-size: $pagination-font-size,
+		list-style: none,
+		margin-bottom: $pagination-margin-bottom,
+		padding-left: 0,
+	),
+	$pagination
+);
+
+// .pagination-bar
+
+$pagination-bar: () !default;
+$pagination-bar: map-deep-merge(
+	(
+		align-items: center,
+		display: flex,
+		flex-wrap: wrap,
+		media-breakpoint-down: (
+			sm: (
+				flex-direction: column,
+				justify-content: center,
+				pagination: (
+					margin-top: $pagination-margin-top-mobile,
+				),
+			),
+		),
+	),
+	$pagination-bar
+);
+
 // Pagination Dropdown Menu
 
 $pagination-dropdown-menu-spacer-y: null !default;
@@ -219,34 +283,6 @@ $pagination-items-per-page-lexicon-icon-margin-top: 0.125rem !default; // 2px
 
 // Pagination Items Per Page Link
 
-$pagination-items-per-page-link: () !default;
-$pagination-items-per-page-link: map-deep-merge(
-	(
-		align-items: center,
-		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,
-		border-width: $pagination-border-width,
-		color: $pagination-items-per-page-color,
-		display: inline-flex,
-		height: $pagination-item-height,
-		justify-content: center,
-		line-height: $pagination-line-height,
-		padding-bottom: $pagination-padding-y,
-		padding-left: $pagination-padding-x,
-		padding-right: $pagination-padding-x,
-		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,
-			margin-top: $pagination-items-per-page-lexicon-icon-margin-top,
-		),
-	),
-	$pagination-items-per-page-link
-);
-
 $pagination-items-per-page-link-hover: () !default;
 $pagination-items-per-page-link-hover: map-deep-merge(
 	(
@@ -290,11 +326,82 @@ $pagination-items-per-page-link-disabled: map-deep-merge(
 	$pagination-items-per-page-link-disabled
 );
 
-// Pagination Results
+// .pagination-items-per-page > a, .pagination-items-per-page > button
+
+$pagination-items-per-page-link: () !default;
+$pagination-items-per-page-link: map-deep-merge(
+	(
+		align-items: center,
+		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,
+		border-width: $pagination-border-width,
+		color: $pagination-items-per-page-color,
+		display: inline-flex,
+		height: $pagination-item-height,
+		justify-content: center,
+		line-height: $pagination-line-height,
+		padding-bottom: $pagination-padding-y,
+		padding-left: $pagination-padding-x,
+		padding-right: $pagination-padding-x,
+		padding-top: $pagination-padding-y,
+		text-decoration: none,
+		transition: $pagination-items-per-page-transition,
+		hover: $pagination-items-per-page-link-hover,
+		focus: $pagination-items-per-page-link-focus,
+		active: $pagination-items-per-page-link-active,
+		disabled: $pagination-items-per-page-link-disabled,
+		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
+);
+
+// .pagination-items-per-page
+
+$pagination-items-per-page: () !default;
+$pagination-items-per-page: map-deep-merge(
+	(
+		font-size: $pagination-items-per-page-font-size,
+		margin-bottom: $pagination-margin-bottom,
+		link: $pagination-items-per-page-link,
+		media-breakpoint-down: (
+			sm: (
+				pagination-results: (
+					margin-left: auto,
+				),
+			),
+		),
+	),
+	$pagination-items-per-page
+);
+
+// .pagination-results
 
 $pagination-results-color: null !default;
 
-// Pagination Sm
+$pagination-results: () !default;
+$pagination-results: map-merge(
+	(
+		border-color: transparent,
+		border-style: solid,
+		border-width: $pagination-border-width,
+		color: $pagination-results-color,
+		font-size: $pagination-font-size,
+		line-height: $pagination-line-height,
+		margin-bottom: $pagination-margin-bottom,
+		margin-right: auto,
+		max-width: 100%,
+		padding: $pagination-padding-y $pagination-padding-x,
+		word-wrap: break-word,
+	),
+	$pagination-results
+);
+
+// .pagination-sm
 
 $pagination-font-size-sm: $font-size-sm !default;
 $pagination-line-height-sm: 1 !default;
@@ -308,7 +415,55 @@ $pagination-link-border-radius-sm: $border-radius-sm !default;
 $pagination-items-per-page-lexicon-icon-margin-left-sm: null !default;
 $pagination-items-per-page-lexicon-icon-margin-top-sm: null !default;
 
-// Pagination Lg
+$pagination-sm: () !default;
+$pagination-sm: map-deep-merge(
+	(
+		page-link: (
+			font-size: $pagination-font-size-sm,
+			height: $pagination-item-height-sm,
+			line-height: $pagination-line-height-sm,
+			padding-bottom: $pagination-padding-y-sm,
+			padding-right: $pagination-padding-x-sm,
+			padding-left: $pagination-padding-x-sm,
+			padding-top: $pagination-padding-y-sm,
+		),
+		page-link-first: (
+			border-bottom-left-radius: $pagination-link-border-radius-sm,
+			border-top-left-radius: $pagination-link-border-radius-sm,
+		),
+		page-link-last: (
+			border-bottom-right-radius: $pagination-link-border-radius-sm,
+			border-top-right-radius: $pagination-link-border-radius-sm,
+		),
+		pagination-items-per-page: (
+			border-radius:
+				clay-enable-rounded($pagination-link-border-radius-sm),
+			link: (
+				font-size: $pagination-font-size-sm,
+				height: $pagination-item-height-sm,
+				line-height: $pagination-line-height-sm,
+				padding-bottom: $pagination-padding-y-sm,
+				padding-left: $pagination-padding-x,
+				padding-right: $pagination-padding-x,
+				padding-top: $pagination-padding-y-sm,
+			),
+			lexicon-icon: (
+				margin-left:
+					$pagination-items-per-page-lexicon-icon-margin-left-sm,
+				margin-right:
+					$pagination-items-per-page-lexicon-icon-margin-top-sm,
+			),
+			pagination-results: (
+				font-size: $pagination-font-size-sm,
+				line-height: $pagination-line-height-sm,
+				padding: $pagination-padding-y-sm $pagination-padding-x,
+			),
+		),
+	),
+	$pagination-sm
+);
+
+// .pagination-lg
 
 $pagination-font-size-lg: $font-size-lg !default;
 $pagination-line-height-lg: 1 !default;
@@ -321,3 +476,48 @@ $pagination-link-border-radius-lg: $border-radius-lg !default;
 
 $pagination-items-per-page-lexicon-icon-margin-left-lg: null !default;
 $pagination-items-per-page-lexicon-icon-margin-top-lg: null !default;
+
+$pagination-lg: () !default;
+$pagination-lg: map-deep-merge(
+	(
+		page-link: (
+			font-size: $pagination-font-size-lg,
+			height: $pagination-item-height-lg,
+			line-height: $pagination-line-height-lg,
+			padding-bottom: $pagination-padding-y-lg,
+			padding-left: $pagination-padding-x-lg,
+			padding-right: $pagination-padding-x-lg,
+			padding-top: $pagination-padding-y-lg,
+		),
+		page-link-first: (
+			border-bottom-left-radius: $pagination-link-border-radius-lg,
+			border-top-left-radius: $pagination-link-border-radius-lg,
+		),
+		page-link-last: (
+			border-bottom-right-radius: $pagination-link-border-radius-lg,
+			border-top-right-radius: $pagination-link-border-radius-lg,
+		),
+		pagination-items-per-page: (
+			border-radius:
+				clay-enable-rounded($pagination-link-border-radius-lg),
+			link: (
+				font-size: $pagination-font-size-lg,
+				height: $pagination-item-height-lg,
+				line-height: $pagination-line-height-lg,
+				padding: $pagination-padding-y-lg $pagination-padding-x,
+			),
+			lexicon-icon: (
+				margin-left:
+					$pagination-items-per-page-lexicon-icon-margin-left-lg,
+				margin-right:
+					$pagination-items-per-page-lexicon-icon-margin-top-lg,
+			),
+			pagination-results: (
+				font-size: $pagination-font-size-lg,
+				line-height: $pagination-line-height-lg,
+				padding: $pagination-padding-y-lg $pagination-padding-x,
+			),
+		),
+	),
+	$pagination-lg
+);