@clayui/css 3.39.0 → 3.42.0

package/src/scss/atlas/variables/_tables.scss

@@ -17,9 +17,13 @@ $table-head-link: map-deep-merge(
 		border-radius: 1px,
 		color: $gray-600,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$table-head-link
 );
@@ -67,8 +71,10 @@ $table-title-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$table-title-link
 );
@@ -90,13 +96,19 @@ $table-action-link: map-deep-merge(
 		color: $gray-600,
 		font-size: 1rem,
 		transition: $btn-transition,
-		hover-bg: rgba(0, 0, 0, 0.02),
-		hover-color: $gray-900,
-		focus-bg: rgba(0, 0, 0, 0.02),
-		focus-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
-		active-bg: rgba(0, 0, 0, 0.04),
+		hover: (
+			background-color: rgba(0, 0, 0, 0.02),
+			color: $gray-900,
+		),
+		focus: (
+			background-color: rgba(0, 0, 0, 0.02),
+			color: $gray-900,
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+		active: (
+			background-color: rgba(0, 0, 0, 0.04),
+		),
 	),
 	$table-action-link
 );
@@ -111,9 +123,13 @@ $table-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$table-link
 );
@@ -154,9 +170,13 @@ $table-list-title-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$table-list-title-link
 );
@@ -171,9 +191,13 @@ $table-list-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $gray-900,
+		),
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$table-list-link
 );
@@ -186,13 +210,19 @@ $table-list-action-link: map-deep-merge(
 		color: $gray-600,
 		font-size: 1rem,
 		transition: $btn-transition,
-		hover-bg: rgba(0, 0, 0, 0.02),
-		hover-color: $gray-900,
-		focus-bg: rgba(0, 0, 0, 0.02),
-		focus-color: $gray-900,
-		focus-box-shadow: $component-focus-box-shadow,
-		focus-outline: 0,
-		active-bg: rgba(0, 0, 0, 0.04),
+		hover: (
+			background-color: rgba(0, 0, 0, 0.02),
+			color: $gray-900,
+		),
+		focus: (
+			background-color: rgba(0, 0, 0, 0.02),
+			color: $gray-900,
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+		active: (
+			background-color: rgba(0, 0, 0, 0.04),
+		),
 	),
 	$table-list-action-link
 );

package/src/scss/cadmin/components/_alerts.scss

@@ -35,23 +35,7 @@
 // Alert Fluid
 
 .alert-fluid {
-	@include clay-css($cadmin-alert-fluid);
-
-	&.alert-dismissible {
-		.container,
-		.container-fluid {
-			@include clay-css($cadmin-alert-fluid-dismissible-container);
-		}
-	}
-
-	.container,
-	.container-fluid {
-		@include clay-css($cadmin-alert-fluid-container);
-	}
-
-	.close {
-		@include clay-close($cadmin-alert-fluid-close);
-	}
+	@include clay-alert-variant($cadmin-alert-fluid);
 }
 
 // Alert Notifications

package/src/scss/cadmin/components/_cards.scss

@@ -18,15 +18,13 @@
 	position: relative;
 	word-wrap: break-word;
 
-	@if ($cadmin-card-border-radius > 0) {
-		.autofit-col {
-			&:first-child {
-				@include border-left-radius($cadmin-card-inner-border-radius);
-			}
-
-			&:last-child {
-				@include border-right-radius($cadmin-card-inner-border-radius);
-			}
+	.autofit-col {
+		&:first-child {
+			@include border-left-radius($cadmin-card-inner-border-radius);
+		}
+
+		&:last-child {
+			@include border-right-radius($cadmin-card-inner-border-radius);
 		}
 	}
 
@@ -643,15 +641,15 @@
 // Card Type Asset
 
 .card-type-asset {
-	@include clay-card-type-asset($cadmin-card-type-asset);
+	@include clay-card-variant($cadmin-card-type-asset);
 }
 
 .image-card {
-	@include clay-card-type-asset-variant($cadmin-image-card);
+	@include clay-card-variant($cadmin-image-card);
 }
 
 .file-card {
-	@include clay-card-type-asset-variant($cadmin-file-card);
+	@include clay-card-variant($cadmin-file-card);
 }
 
 .product-card {
@@ -659,13 +657,13 @@
 }
 
 .user-card {
-	@include clay-card-type-asset-variant($cadmin-user-card);
+	@include clay-card-variant($cadmin-user-card);
 }
 
 // Card Type Directory
 
 .card-type-directory {
-	@include clay-card-type-directory($cadmin-card-type-directory);
+	@include clay-card-variant($cadmin-card-type-directory);
 }
 
 // Card Type Template

package/src/scss/cadmin/components/_dropdowns.scss

@@ -3,58 +3,37 @@
 }
 
 .dropdown-toggle {
-	white-space: nowrap;
+	@include clay-button-variant($cadmin-dropdown-toggle);
 }
 
 .dropdown-header {
-	color: $cadmin-dropdown-header-color;
-	display: block;
-	font-size: $cadmin-dropdown-header-font-size;
-	margin-bottom: $cadmin-dropdown-header-margin-bottom;
-	margin-top: $cadmin-dropdown-header-margin-top;
-	padding-bottom: $cadmin-dropdown-header-padding-y;
-	padding-left: $cadmin-dropdown-header-padding-x;
-	padding-right: $cadmin-dropdown-header-padding-x;
-	padding-top: $cadmin-dropdown-header-padding-y;
-	position: relative;
-	text-transform: $cadmin-dropdown-header-text-transform;
-	word-wrap: break-word;
+	@include clay-css($cadmin-dropdown-header);
 
-	@include clay-scale-component {
-		font-size: $cadmin-dropdown-header-font-size-mobile;
+	@include media-breakpoint-down(
+		map-get($cadmin-dropdown-header, breakpoint-down)
+	) {
+		@include clay-css(setter(map-get($cadmin-dropdown-header, mobile), ()));
 	}
 
 	&:first-child {
-		margin-top: 0;
+		@include clay-css(
+			setter(map-get($cadmin-dropdown-header, first-child), ())
+		);
 	}
 }
 
 .dropdown-subheader {
-	color: $cadmin-dropdown-subheader-color;
-	font-size: $cadmin-dropdown-subheader-font-size;
-	font-weight: $cadmin-dropdown-subheader-font-weight;
-	margin-bottom: $cadmin-dropdown-subheader-margin-bottom;
-	margin-top: $cadmin-dropdown-subheader-margin-top;
-	padding-bottom: $cadmin-dropdown-subheader-padding-y;
-	padding-left: $cadmin-dropdown-subheader-padding-x;
-	padding-right: $cadmin-dropdown-subheader-padding-x;
-	padding-top: $cadmin-dropdown-subheader-padding-y;
-	text-transform: $cadmin-dropdown-subheader-text-transform;
-	white-space: normal;
-	word-wrap: break-word;
+	@include clay-css($cadmin-dropdown-subheader);
 
 	&:first-child {
-		margin-top: 0;
+		@include clay-css(
+			setter(map-get($cadmin-dropdown-subheader, first-child), ())
+		);
 	}
 }
 
 .dropdown-caption {
-	color: $cadmin-dropdown-caption-color;
-	font-size: $cadmin-dropdown-caption-font-size;
-	font-weight: $cadmin-dropdown-caption-font-weight;
-	padding: $cadmin-dropdown-item-padding-y $cadmin-dropdown-item-padding-x;
-	white-space: normal;
-	word-wrap: break-word;
+	@include clay-css($cadmin-dropdown-caption);
 }
 
 .dropdown-item {
@@ -74,39 +53,57 @@
 // Dropdown Item Text
 
 .dropdown-item-text {
-	color: map-get($cadmin-dropdown-item-base, color);
-	display: map-get($cadmin-dropdown-item-base, display);
-	font-weight: map-get($cadmin-dropdown-item-base, font-weight);
-	padding: map-get($cadmin-dropdown-item-base, padding);
-	padding-bottom: map-get($cadmin-dropdown-item-base, padding-bottom);
-	padding-left: map-get($cadmin-dropdown-item-base, padding-left);
-	padding-right: map-get($cadmin-dropdown-item-base, padding-right);
-	padding-top: map-get($cadmin-dropdown-item-base, padding-top);
+	@include clay-css($cadmin-dropdown-item-text);
 }
 
 .dropdown-section {
-	padding: $cadmin-dropdown-item-padding-y $cadmin-dropdown-item-padding-x;
+	@include clay-css($cadmin-dropdown-section);
 
 	.form-group + .form-group {
-		margin-top: $cadmin-dropdown-item-padding-y * 2;
+		@include clay-css(
+			setter(
+				map-deep-get($cadmin-dropdown-section, form-group, form-group),
+				()
+			)
+		);
 	}
 
 	.custom-control {
-		@include clay-css($cadmin-dropdown-section-custom-control);
+		@include clay-css(
+			setter(map-get($cadmin-dropdown-section, custom-control), ())
+		);
 	}
 
 	.custom-control-label {
-		@include clay-css($cadmin-dropdown-section-custom-control-label);
+		@include clay-css(
+			setter(map-get($cadmin-dropdown-section, custom-control-label), ())
+		);
 	}
 
 	.custom-control-label-text {
-		@include clay-css($cadmin-dropdown-section-custom-control-label-text);
+		@include clay-css(
+			setter(
+				map-get($cadmin-dropdown-section, custom-control-label-text),
+				()
+			)
+		);
 	}
 
 	&.active {
+		@include clay-css(
+			setter(map-get($cadmin-dropdown-section, active), ())
+		);
+
 		.custom-control-label {
 			@include clay-css(
-				$cadmin-dropdown-section-active-custom-control-label
+				setter(
+					map-deep-get(
+						$cadmin-dropdown-section,
+						active,
+						custom-control-label
+					),
+					()
+				)
 			);
 		}
 	}
@@ -122,41 +119,7 @@
 
 .dropdown-menu,
 &.dropdown-menu {
-	background-clip: padding-box;
-	background-color: $cadmin-dropdown-bg;
-	border-color: $cadmin-dropdown-border-color;
-	border-style: $cadmin-dropdown-border-style;
-	border-width: $cadmin-dropdown-border-width;
-
-	@include border-radius($cadmin-dropdown-border-radius);
-	@include box-shadow($cadmin-dropdown-box-shadow);
-
-	color: $cadmin-dropdown-color;
-	display: none;
-	float: left;
-	font-size: $cadmin-dropdown-font-size;
-	left: 0;
-	list-style: none;
-	margin: $cadmin-dropdown-spacer 0 0;
-	max-height: $cadmin-dropdown-max-height;
-	max-width: $cadmin-dropdown-max-width;
-	min-height: $cadmin-dropdown-min-height;
-	min-width: $cadmin-dropdown-min-width;
-	overflow: auto;
-	padding: $cadmin-dropdown-padding-y 0;
-	position: absolute;
-	text-align: left;
-	top: 100%;
-	z-index: $cadmin-zindex-dropdown;
-
-	@include media-breakpoint-down(md, $cadmin-grid-breakpoints) {
-		max-height: $cadmin-dropdown-max-height-mobile;
-		max-width: $cadmin-dropdown-max-width-mobile;
-	}
-
-	@include clay-scale-component {
-		font-size: $cadmin-dropdown-font-size-mobile;
-	}
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu);
 
 	.alert {
 		font-size: $cadmin-dropdown-alert-font-size;
@@ -248,47 +211,18 @@
 // Dropdown Divider
 
 .dropdown-divider {
-	border-top: 1px solid $cadmin-dropdown-divider-bg;
-	height: 0;
-	margin: $cadmin-dropdown-divider-margin-y 0;
-	overflow: hidden;
+	@include clay-css($cadmin-dropdown-divider);
 }
 
 // Dropdown Action
 
 .dropdown-action {
-	display: inline-block;
-	font-size: $cadmin-dropdown-action-toggle-font-size;
-	vertical-align: middle;
+	@include clay-css($cadmin-dropdown-action);
 
 	> .dropdown-toggle {
-		align-items: center;
-
-		@include border-radius($cadmin-dropdown-action-toggle-border-radius);
-
-		cursor: $cadmin-btn-cursor;
-		display: flex;
-
-		@include clay-monospace($cadmin-dropdown-action-toggle-size);
-
-		font-size: inherit;
-		font-weight: inherit;
-		justify-content: center;
-		line-height: inherit;
-		padding: 0;
-		text-transform: inherit;
-		vertical-align: baseline;
-
-		&:disabled,
-		&.disabled {
-			cursor: $cadmin-dropdown-action-toggle-disabled-cursor;
-			opacity: $cadmin-dropdown-action-toggle-disabled-opacity;
-		}
-
-		.inline-item .lexicon-icon,
-		.lexicon-icon {
-			margin-top: 0;
-		}
+		@include clay-button-variant(
+			setter(map-get($cadmin-dropdown-action, dropdown-toggle), ())
+		);
 	}
 }
 
@@ -385,120 +319,56 @@
 
 .dropdown-menu-top,
 &.dropdown-menu-top {
-	bottom: 100% !important;
-	left: 0 !important;
-	margin-top: 0;
-	margin-bottom: $cadmin-dropdown-spacer;
-	right: auto !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-top);
 }
 
 .dropdown-menu-top-right,
 &.dropdown-menu-top-right {
-	bottom: 100% !important;
-	left: auto !important;
-	margin-top: 0;
-	margin-bottom: $cadmin-dropdown-spacer;
-	right: 0 !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-top-right);
 }
 
 .dropdown-menu-top-center,
 &.dropdown-menu-top-center {
-	bottom: 100% !important;
-	left: 50% !important;
-	margin-top: 0;
-	margin-bottom: $cadmin-dropdown-spacer;
-	right: auto !important;
-	top: auto !important;
-	transform: translateX(-50%) !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-top-center);
 }
 
 .dropdown-menu-center,
 &.dropdown-menu-center {
-	bottom: auto !important;
-	left: 50% !important;
-	right: auto !important;
-	top: 100% !important;
-	transform: translateX(-50%) !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-center);
 }
 
 .dropdown-menu-left-side,
 &.dropdown-menu-left-side {
-	bottom: auto !important;
-	left: auto !important;
-	margin-right: $cadmin-dropdown-spacer;
-	margin-top: 0;
-	right: 100% !important;
-	top: 0 !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-left-side);
 }
 
 .dropdown-menu-left-side-bottom,
 &.dropdown-menu-left-side-bottom {
-	bottom: 0 !important;
-	left: auto !important;
-	margin-right: $cadmin-dropdown-spacer;
-	margin-top: 0;
-	right: 100% !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-left-side-bottom);
 }
 
 .dropdown-menu-left-side-middle,
 &.dropdown-menu-left-side-middle {
-	bottom: auto !important;
-	left: auto !important;
-	margin-right: $cadmin-dropdown-spacer;
-	margin-top: 0;
-	right: 100% !important;
-	top: 50% !important;
-	transform: translate(0, -50%) !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-left-side-middle);
 }
 
 .dropdown-menu-right-side,
 &.dropdown-menu-right-side {
-	bottom: auto !important;
-	left: 100% !important;
-	margin-left: $cadmin-dropdown-spacer;
-	margin-top: 0;
-	right: auto !important;
-	top: 0 !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-right-side);
 }
 
 .dropdown-menu-right-side-bottom,
 &.dropdown-menu-right-side-bottom {
-	bottom: 0 !important;
-	left: 100% !important;
-	margin-left: $cadmin-dropdown-spacer;
-	margin-top: 0;
-	right: auto !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant(
+		$cadmin-dropdown-menu-right-side-bottom
+	);
 }
 
 .dropdown-menu-right-side-middle,
 &.dropdown-menu-right-side-middle {
-	bottom: auto !important;
-	left: 100% !important;
-	margin-left: $cadmin-dropdown-spacer;
-	margin-top: 0;
-	right: auto !important;
-	top: 50% !important;
-	transform: translate(0, -50%) !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant(
+		$cadmin-dropdown-menu-right-side-middle
+	);
 }
 
 // Dropdown wide / full