@clayui/css 3.38.0 → 3.41.0

package/src/scss/components/_custom-forms.scss

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

package/src/scss/components/_dropdowns.scss

@@ -6,60 +6,35 @@
 }
 
 .dropdown-toggle {
-	white-space: nowrap;
+	@include clay-button-variant($dropdown-toggle);
 
 	@include caret();
 }
 
 .dropdown-header {
-	color: $dropdown-header-color;
-	display: block;
-	font-size: $dropdown-header-font-size;
-	margin-bottom: $dropdown-header-margin-bottom;
-	margin-top: $dropdown-header-margin-top;
-	padding-bottom: $dropdown-header-padding-y;
-	padding-left: $dropdown-header-padding-x;
-	padding-right: $dropdown-header-padding-x;
-	padding-top: $dropdown-header-padding-y;
-	position: relative;
-	text-transform: $dropdown-header-text-transform;
-	word-wrap: break-word;
+	@include clay-css($dropdown-header);
 
-	@include clay-scale-component {
-		font-size: $dropdown-header-font-size-mobile;
+	@include media-breakpoint-down(map-get($dropdown-header, breakpoint-down)) {
+		@include clay-css(setter(map-get($dropdown-header, mobile), ()));
 	}
 
 	&:first-child {
-		margin-top: 0;
+		@include clay-css(setter(map-get($dropdown-header, first-child), ()));
 	}
 }
 
 .dropdown-subheader {
-	color: $dropdown-subheader-color;
-	font-size: $dropdown-subheader-font-size;
-	font-weight: $dropdown-subheader-font-weight;
-	margin-bottom: $dropdown-subheader-margin-bottom;
-	margin-top: $dropdown-subheader-margin-top;
-	padding-bottom: $dropdown-subheader-padding-y;
-	padding-left: $dropdown-subheader-padding-x;
-	padding-right: $dropdown-subheader-padding-x;
-	padding-top: $dropdown-subheader-padding-y;
-	text-transform: $dropdown-subheader-text-transform;
-	white-space: normal;
-	word-wrap: break-word;
+	@include clay-css($dropdown-subheader);
 
 	&:first-child {
-		margin-top: 0;
+		@include clay-css(
+			setter(map-get($dropdown-subheader, first-child), ())
+		);
 	}
 }
 
 .dropdown-caption {
-	color: $dropdown-caption-color;
-	font-size: $dropdown-caption-font-size;
-	font-weight: $dropdown-caption-font-weight;
-	padding: $dropdown-item-padding-y $dropdown-item-padding-x;
-	white-space: normal;
-	word-wrap: break-word;
+	@include clay-css($dropdown-caption);
 }
 
 .dropdown-item {
@@ -79,38 +54,50 @@
 // Dropdown Item Text
 
 .dropdown-item-text {
-	color: map-get($dropdown-item-base, color);
-	display: map-get($dropdown-item-base, display);
-	font-weight: map-get($dropdown-item-base, font-weight);
-	padding: map-get($dropdown-item-base, padding);
-	padding-bottom: map-get($dropdown-item-base, padding-bottom);
-	padding-left: map-get($dropdown-item-base, padding-left);
-	padding-right: map-get($dropdown-item-base, padding-right);
-	padding-top: map-get($dropdown-item-base, padding-top);
+	@include clay-css($dropdown-item-text);
 }
 
 .dropdown-section {
-	padding: $dropdown-item-padding-y $dropdown-item-padding-x;
+	@include clay-css($dropdown-section);
 
 	.form-group + .form-group {
-		margin-top: $dropdown-item-padding-y * 2;
+		@include clay-css(
+			setter(map-deep-get($dropdown-section, form-group, form-group), ())
+		);
 	}
 
 	.custom-control {
-		@include clay-css($dropdown-section-custom-control);
+		@include clay-css(
+			setter(map-get($dropdown-section, custom-control), ())
+		);
 	}
 
 	.custom-control-label {
-		@include clay-css($dropdown-section-custom-control-label);
+		@include clay-css(
+			setter(map-get($dropdown-section, custom-control-label), ())
+		);
 	}
 
 	.custom-control-label-text {
-		@include clay-css($dropdown-section-custom-control-label-text);
+		@include clay-css(
+			setter(map-get($dropdown-section, custom-control-label-text), ())
+		);
 	}
 
 	&.active {
+		@include clay-css(setter(map-get($dropdown-section, active), ()));
+
 		.custom-control-label {
-			@include clay-css($dropdown-section-active-custom-control-label);
+			@include clay-css(
+				setter(
+					map-deep-get(
+						$dropdown-section,
+						active,
+						custom-control-label
+					),
+					()
+				)
+			);
 		}
 	}
 }
@@ -124,50 +111,7 @@
 // Dropdown Menu
 
 .dropdown-menu {
-	background-clip: padding-box;
-	background-color: $dropdown-bg;
-	border-color: $dropdown-border-color;
-	border-style: $dropdown-border-style;
-	border-width: $dropdown-border-width;
-
-	@include border-radius($dropdown-border-radius);
-	@include box-shadow($dropdown-box-shadow);
-
-	color: $dropdown-color;
-	display: none;
-	float: left;
-	font-size: $dropdown-font-size;
-	left: 0;
-	list-style: none;
-	margin: $dropdown-spacer 0 0;
-	max-height: $dropdown-max-height;
-	max-width: $dropdown-max-width;
-	min-height: $dropdown-min-height;
-	min-width: $dropdown-min-width;
-	overflow: auto;
-
-	// Firefox clips overflowing content and doesn't respect `padding-bottom` on `.dropdown-menu`
-
-	padding: $dropdown-padding-y 0 0;
-	position: absolute;
-	text-align: left;
-	top: 100%;
-	z-index: $zindex-dropdown;
-
-	&::after {
-		content: '';
-		display: block;
-		padding-top: $dropdown-padding-y;
-	}
-
-	@include media-breakpoint-down(md) {
-		max-height: $dropdown-max-height-mobile;
-		max-width: $dropdown-max-width-mobile;
-	}
-
-	@include clay-scale-component {
-		font-size: $dropdown-font-size-mobile;
-	}
+	@include clay-dropdown-menu-variant($dropdown-menu);
 
 	.alert {
 		font-size: $dropdown-alert-font-size;
@@ -214,10 +158,6 @@
 	}
 }
 
-.dropdown-menu.show {
-	display: block;
-}
-
 // Dropdown Menu Alignment
 
 @each $breakpoint in map-keys($grid-breakpoints) {
@@ -303,47 +243,18 @@
 // Dropdown Divider
 
 .dropdown-divider {
-	border-top: 1px solid $dropdown-divider-bg;
-	height: 0;
-	margin: $dropdown-divider-margin-y 0;
-	overflow: hidden;
+	@include clay-css($dropdown-divider);
 }
 
 // Dropdown Action
 
 .dropdown-action {
-	display: inline-block;
-	font-size: $dropdown-action-toggle-font-size;
-	vertical-align: middle;
+	@include clay-css($dropdown-action);
 
 	> .dropdown-toggle {
-		align-items: center;
-
-		@include border-radius($dropdown-action-toggle-border-radius);
-
-		cursor: $btn-cursor;
-		display: flex;
-
-		@include clay-monospace($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: $dropdown-action-toggle-disabled-cursor;
-			opacity: $dropdown-action-toggle-disabled-opacity;
-		}
-
-		.inline-item .lexicon-icon,
-		.lexicon-icon {
-			margin-top: 0;
-		}
+		@include clay-button-variant(
+			setter(map-get($dropdown-action, dropdown-toggle), ())
+		);
 	}
 }
 
@@ -435,111 +346,43 @@
 // Dropdown Menu Positions
 
 .dropdown-menu-top {
-	bottom: 100% !important;
-	left: 0 !important;
-	margin-top: 0;
-	margin-bottom: $dropdown-spacer;
-	right: auto !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-top);
 }
 
 .dropdown-menu-top-right {
-	bottom: 100% !important;
-	left: auto !important;
-	margin-top: 0;
-	margin-bottom: $dropdown-spacer;
-	right: 0 !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-top-right);
 }
 
 .dropdown-menu-top-center {
-	bottom: 100% !important;
-	left: 50% !important;
-	margin-top: 0;
-	margin-bottom: $dropdown-spacer;
-	right: auto !important;
-	top: auto !important;
-	transform: translateX(-50%) !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-top-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($dropdown-menu-center);
 }
 
 .dropdown-menu-left-side {
-	bottom: auto !important;
-	left: auto !important;
-	margin-right: $dropdown-spacer;
-	margin-top: 0;
-	right: 100% !important;
-	top: 0 !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-left-side);
 }
 
 .dropdown-menu-left-side-bottom {
-	bottom: 0 !important;
-	left: auto !important;
-	margin-right: $dropdown-spacer;
-	margin-top: 0;
-	right: 100% !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-left-side-bottom);
 }
 
 .dropdown-menu-left-side-middle {
-	bottom: auto !important;
-	left: auto !important;
-	margin-right: $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($dropdown-menu-left-side-middle);
 }
 
 .dropdown-menu-right-side {
-	bottom: auto !important;
-	left: 100% !important;
-	margin-left: $dropdown-spacer;
-	margin-top: 0;
-	right: auto !important;
-	top: 0 !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-right-side);
 }
 
 .dropdown-menu-right-side-bottom {
-	bottom: 0 !important;
-	left: 100% !important;
-	margin-left: $dropdown-spacer;
-	margin-top: 0;
-	right: auto !important;
-	top: auto !important;
-	transform: none !important;
-	will-change: auto !important;
+	@include clay-dropdown-menu-variant($dropdown-menu-right-side-bottom);
 }
 
 .dropdown-menu-right-side-middle {
-	bottom: auto !important;
-	left: 100% !important;
-	margin-left: $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($dropdown-menu-right-side-middle);
 }
 
 // Dropdown wide / full