@clayui/css 3.38.0 → 3.41.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);
 		}
 	}
 
@@ -605,8 +603,8 @@
 }
 
 .card-page-item-header {
-	padding-left: $cadmin-grid-gutter-width / 2;
-	padding-right: $cadmin-grid-gutter-width / 2;
+	padding-left: $cadmin-grid-gutter-width * 0.5;
+	padding-right: $cadmin-grid-gutter-width * 0.5;
 	width: 100%;
 }
 
@@ -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/_custom-forms.scss

@@ -66,14 +66,15 @@
 	@include clay-css($cadmin-custom-control);
 
 	&:only-child {
-		margin-bottom: 0;
+		$only-child: setter(map-get($cadmin-custom-control, only-child), ());
+
+		@include clay-css($only-child);
 	}
 
 	label {
-		cursor: map-get($cadmin-custom-control-label, cursor);
-		display: inline;
-		font-size: $cadmin-font-size-base;
-		margin-bottom: 0;
+		$label: setter(map-get($cadmin-custom-control, label), ());
+
+		@include clay-css($label);
 	}
 }
 
@@ -82,7 +83,7 @@
 }
 
 label.custom-control-label {
-	font-size: map-get($cadmin-custom-control-label, font-size);
+	@include clay-css($cadmin-label-custom-control-label);
 }
 
 .custom-control-label-text {
@@ -105,182 +106,31 @@ label.custom-control-label {
 // Custom Control Indicator
 
 .custom-control-label::before {
-	background-color: $cadmin-custom-control-indicator-bg;
-	border-color: $cadmin-custom-control-indicator-border-color;
-	border-style: $cadmin-custom-control-indicator-border-style;
-	border-width: $cadmin-custom-control-indicator-border-width;
-
-	@include box-shadow($cadmin-custom-control-indicator-box-shadow);
-
-	content: '';
-	display: block;
-	float: left;
-	font-size: $cadmin-custom-control-indicator-size;
-	height: $cadmin-custom-control-indicator-size;
-	left: 0;
-	position: relative;
-	top: $cadmin-custom-control-indicator-position-top;
-
-	@include transition($cadmin-custom-forms-transition);
+	$before: setter(map-get($cadmin-custom-control-label, before), ());
 
-	width: $cadmin-custom-control-indicator-size;
+	@include clay-css($before);
 }
 
 .custom-control-label::after {
-	background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size};
-	content: '';
-	display: block;
-	height: $cadmin-custom-control-indicator-size;
-	left: 0;
-	position: absolute;
-	top: $cadmin-custom-control-indicator-position-top;
-	width: $cadmin-custom-control-indicator-size;
-}
-
-.custom-control-input {
-	cursor: $cadmin-form-check-input-cursor;
-	height: $cadmin-custom-control-indicator-size;
-	left: 0;
-	opacity: 0;
-	position: absolute;
-	top: $cadmin-custom-control-indicator-position-top;
-	width: $cadmin-custom-control-indicator-size;
-	z-index: 1;
-
-	&:focus ~ .custom-control-label::before {
-		@if $cadmin-enable-shadows {
-			box-shadow: $cadmin-input-box-shadow, $cadmin-input-focus-box-shadow;
-		} @else {
-			box-shadow: $cadmin-custom-control-indicator-focus-box-shadow;
-		}
-	}
-
-	&:focus:not(:checked) ~ .custom-control-label::before {
-		border-color: $cadmin-custom-control-indicator-focus-border-color;
-	}
-
-	&:active ~ .custom-control-label::before {
-		background-color: $cadmin-custom-control-indicator-active-bg;
-		border-color: $cadmin-custom-control-indicator-active-border-color;
+	$after: setter(map-get($cadmin-custom-control-label, after), ());
 
-		@include box-shadow($cadmin-custom-control-indicator-active-box-shadow);
-
-		color: $cadmin-custom-control-indicator-active-color;
-	}
-
-	&:active:checked ~ .custom-control-label::before {
-		background-color: $cadmin-custom-control-indicator-checked-active-bg;
-		border-color: $cadmin-custom-control-indicator-checked-active-border-color;
-	}
-
-	&:checked ~ .custom-control-label::before {
-		@include gradient-bg($cadmin-custom-control-indicator-checked-bg);
-
-		border-color: $cadmin-custom-control-indicator-checked-border-color;
-
-		@include box-shadow(
-			$cadmin-custom-control-indicator-checked-box-shadow
-		);
-
-		color: $cadmin-custom-control-indicator-checked-color;
-	}
-
-	// Use [disabled] and :disabled to work around https://github.com/twbs/bootstrap/issues/28247
-
-	&[disabled],
-	&:disabled {
-		cursor: $cadmin-custom-control-indicator-disabled-cursor;
-
-		~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-disabled-bg;
-			border-color: $cadmin-custom-control-indicator-disabled-border-color;
-			box-shadow: none;
-		}
-
-		~ .custom-control-label {
-			@include clay-container($cadmin-custom-control-label-disabled);
-		}
-	}
-
-	&:disabled:checked ~ .custom-control-label::before {
-		background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-		border-color: $cadmin-custom-control-indicator-checked-disabled-border-color;
-	}
+	@include clay-css($after);
 }
 
-.custom-control .custom-control-input:focus ~ .custom-control-label::before {
-	box-shadow: $cadmin-custom-control-indicator-focus-box-shadow;
+.custom-control-input {
+	@include clay-custom-control-input-variant($cadmin-custom-control-input);
 }
 
 // Custom Checkbox
 
 .custom-checkbox {
-	.custom-control-input {
-		&:checked ~ .custom-control-label::after {
-			background-image: escape-svg(
-				$cadmin-custom-checkbox-indicator-icon-checked
-			);
-			background-size: $cadmin-custom-checkbox-indicator-icon-checked-bg-size;
-		}
-
-		&:indeterminate ~ .custom-control-label::before {
-			@include gradient-bg(
-				$cadmin-custom-checkbox-indicator-indeterminate-bg
-			);
-
-			border-color: $cadmin-custom-control-indicator-indeterminate-border-color;
-
-			@include box-shadow(
-				$cadmin-custom-checkbox-indicator-indeterminate-box-shadow
-			);
-		}
-
-		&:indeterminate ~ .custom-control-label::after {
-			background-image: escape-svg(
-				$cadmin-custom-checkbox-indicator-icon-indeterminate
-			);
-			background-size: $cadmin-custom-checkbox-indicator-icon-indeterminate-bg-size;
-		}
-
-		&:disabled:checked ~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-		}
-
-		&:disabled:indeterminate ~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-			border-color: $cadmin-custom-control-indicator-checked-disabled-border-color;
-		}
-	}
-
-	.custom-control-label::before {
-		@include border-radius($cadmin-custom-checkbox-indicator-border-radius);
-	}
+	@include clay-custom-control-variant($cadmin-custom-checkbox);
 }
 
 // Custom Radio
 
 .custom-radio {
-	.custom-control-input {
-		&:checked ~ .custom-control-label::after {
-			background-image: escape-svg(
-				$cadmin-custom-radio-indicator-icon-checked
-			);
-			background-size: $cadmin-custom-radio-indicator-icon-checked-bg-size;
-		}
-
-		&:disabled ~ .custom-control-label::before {
-			border-color: $cadmin-custom-radio-indicator-disabled-border-color;
-		}
-
-		&:disabled:checked ~ .custom-control-label::before {
-			background-color: $cadmin-custom-control-indicator-checked-disabled-bg;
-			border-color: $cadmin-custom-radio-indicator-checked-disabled-border-color;
-		}
-	}
-
-	.custom-control-label::before {
-		border-radius: $cadmin-custom-radio-indicator-border-radius;
-	}
+	@include clay-custom-control-variant($cadmin-custom-radio);
 }
 
 // Custom Control Inline