@clayui/css 3.38.0 → 3.41.0

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,50 +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;
-
-	// Firefox clips overflowing content and doesn't respect `padding-bottom` on `.dropdown-menu`
-
-	padding: $cadmin-dropdown-padding-y 0 0;
-	position: absolute;
-	text-align: left;
-	top: 100%;
-	z-index: $cadmin-zindex-dropdown;
-
-	&::after {
-		content: '';
-		display: block;
-		padding-top: $cadmin-dropdown-padding-y;
-	}
-
-	@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;
@@ -257,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), ())
+		);
 	}
 }
 
@@ -394,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

package/src/scss/cadmin/components/_form-validation.scss

@@ -1,264 +1,37 @@
 // Form Feedback
 
 .form-feedback-group {
-	width: 100%;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-feedback-group);
 }
 
 .form-feedback-item {
-	font-size: $cadmin-form-feedback-font-size;
-	font-weight: $cadmin-form-feedback-font-weight;
-	margin-top: $cadmin-form-feedback-margin-top;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-feedback-item);
 }
 
 .form-feedback-indicator {
-	margin-left: $cadmin-form-feedback-indicator-margin-x;
-	margin-right: $cadmin-form-feedback-indicator-margin-x;
+	@include clay-css($cadmin-form-feedback-indicator);
 
 	&:first-child {
-		margin-left: 0;
+		@include clay-css(
+			map-get($cadmin-form-feedback-indicator, first-child)
+		);
 	}
 }
 
 .form-text {
-	color: $cadmin-form-text-color;
-	display: block;
-	font-size: $cadmin-form-text-font-size;
-	font-weight: $cadmin-form-text-font-weight;
-	margin-top: $cadmin-form-text-margin-top;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-text);
 }
 
 // Non HTML5 Form Validator
 
 .has-error {
-	label {
-		color: $cadmin-input-danger-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $cadmin-input-danger-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($cadmin-input-danger);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($cadmin-input-danger-readonly);
-	}
-
-	.form-feedback-item {
-		color: $cadmin-form-feedback-invalid-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($cadmin-input-danger-select);
-
-		&[size] {
-			@include clay-select-variant($cadmin-input-danger-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($cadmin-input-danger-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$cadmin-input-danger-focus-box-shadow,
-				$cadmin-input-danger-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-danger-focus-bg,
-					$cadmin-input-danger-bg
-				);
-				border-color: setter(
-					$cadmin-input-danger-focus-border-color,
-					$cadmin-input-danger-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-danger-focus-bg,
-					$cadmin-input-danger-bg
-				);
-				border-color: setter(
-					$cadmin-input-danger-focus-border-color,
-					$cadmin-input-danger-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $cadmin-input-danger-bg;
-		border-color: $cadmin-input-danger-border-color;
-		box-shadow: $cadmin-input-danger-box-shadow;
-	}
+	@include clay-form-validation-variant($cadmin-has-error);
 }
 
 .has-warning {
-	label {
-		color: $cadmin-input-warning-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $cadmin-input-warning-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($cadmin-input-warning);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($cadmin-input-warning-readonly);
-	}
-
-	.form-feedback-item {
-		color: $cadmin-form-feedback-warning-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($cadmin-input-warning-select);
-
-		&[size] {
-			@include clay-select-variant($cadmin-input-warning-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($cadmin-input-warning-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$cadmin-input-warning-focus-box-shadow,
-				$cadmin-input-warning-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-warning-focus-bg,
-					$cadmin-input-warning-bg
-				);
-				border-color: setter(
-					$cadmin-input-warning-focus-border-color,
-					$cadmin-input-warning-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-warning-focus-bg,
-					$cadmin-input-warning-bg
-				);
-				border-color: setter(
-					$cadmin-input-warning-focus-border-color,
-					$cadmin-input-warning-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $cadmin-input-warning-bg;
-		border-color: $cadmin-input-warning-border-color;
-		box-shadow: $cadmin-input-warning-box-shadow;
-	}
+	@include clay-form-validation-variant($cadmin-has-warning);
 }
 
 .has-success {
-	label {
-		color: $cadmin-input-success-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $cadmin-input-success-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($cadmin-input-success);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($cadmin-input-success-readonly);
-	}
-
-	.form-feedback-item {
-		color: $cadmin-form-feedback-valid-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($cadmin-input-success-select);
-
-		&[size] {
-			@include clay-select-variant($cadmin-input-success-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($cadmin-input-success-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$cadmin-input-success-focus-box-shadow,
-				$cadmin-input-success-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-success-focus-bg,
-					$cadmin-input-success-bg
-				);
-				border-color: setter(
-					$cadmin-input-success-focus-border-color,
-					$cadmin-input-success-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-success-focus-bg,
-					$cadmin-input-success-bg
-				);
-				border-color: setter(
-					$cadmin-input-success-focus-border-color,
-					$cadmin-input-success-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $cadmin-input-success-bg;
-		border-color: $cadmin-input-success-border-color;
-		box-shadow: $cadmin-input-success-box-shadow;
-	}
+	@include clay-form-validation-variant($cadmin-has-success);
 }

package/src/scss/cadmin/components/_forms.scss

@@ -605,7 +605,7 @@ textarea.form-control-sm,
 	> .form-group-item:not(:last-child) {
 		@include media-breakpoint-up(sm, $cadmin-grid-breakpoints) {
 			margin-bottom: 0;
-			margin-right: $cadmin-grid-gutter-width / 2;
+			margin-right: $cadmin-grid-gutter-width * 0.5;
 		}
 	}