@clayui/css 3.39.0 → 3.42.0

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/_icons.scss

@@ -1,10 +1,5 @@
 .lexicon-icon {
-	display: inline-block;
-	fill: currentColor;
-	height: $cadmin-lexicon-icon-size;
-	margin-top: -3px;
-	vertical-align: middle;
-	width: $cadmin-lexicon-icon-size;
+	@include clay-css(setter($cadmin-lexicon-icon, ()));
 }
 
 .order-arrow-down-active {

package/src/scss/cadmin/components/_input-groups.scss

@@ -47,19 +47,8 @@
 	> .input-group-text + .btn {
 		margin-left: math-sign($cadmin-input-border-width);
 	}
-}
-
-// Input Group
-
-.input-group {
-	align-items: stretch;
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-	width: 100%;
 
 	.btn {
-		position: relative;
 		z-index: 1;
 
 		&:hover {
@@ -67,10 +56,24 @@
 		}
 	}
 
-	.btn:focus,
-	.form-control:focus {
-		z-index: $cadmin-zindex-input-group-focus;
+	.btn,
+	.form-control {
+		position: relative;
+
+		&:focus {
+			z-index: $cadmin-zindex-input-group-focus;
+		}
 	}
+}
+
+// Input Group
+
+.input-group {
+	align-items: stretch;
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+	width: 100%;
 
 	.btn-unstyled {
 		color: inherit;

package/src/scss/cadmin/components/_pagination.scss

@@ -1,133 +1,51 @@
 .pagination {
-	@include border-radius();
-
-	display: flex;
-	flex-wrap: wrap;
-	font-size: $cadmin-pagination-font-size;
-	list-style: none;
-	margin-bottom: $cadmin-pagination-margin-bottom;
-	padding-left: 0;
+	@include clay-pagination-variant($cadmin-pagination);
 }
 
 .pagination-bar {
-	align-items: center;
-	display: flex;
-	flex-wrap: wrap;
-
-	@include clay-scale-component {
-		flex-direction: column;
-		justify-content: center;
-	}
-
-	.pagination {
-		@include clay-scale-component {
-			margin-top: $cadmin-pagination-margin-top-mobile;
-		}
-	}
+	@include clay-pagination-variant($cadmin-pagination-bar);
 }
 
 // Pagination Link
 
 .page-link {
 	@include clay-link($cadmin-pagination-link);
+}
 
-	&:hover {
-		@include clay-link($cadmin-pagination-link-hover);
-	}
+// Pagination Item
 
-	&:focus {
-		@include clay-link($cadmin-pagination-link-focus);
-	}
+.page-item {
+	@include clay-css($cadmin-pagination-item);
 
-	&:active,
 	&.active {
-		@include clay-link($cadmin-pagination-link-active);
+		.page-link {
+			@include clay-link(map-get($cadmin-pagination-link, active));
+		}
 	}
 
-	&:disabled,
 	&.disabled {
-		@include clay-link($cadmin-pagination-link-disabled);
-	}
-}
-
-.page-item.active,
-.page-item.show {
-	.page-link {
-		@include clay-link($cadmin-pagination-link-active);
-	}
-}
-
-.page-item.disabled {
-	.page-link {
-		@include clay-link($cadmin-pagination-link-disabled);
+		.page-link {
+			@include clay-link(map-get($cadmin-pagination-link, disabled));
+		}
 	}
 }
 
-// Pagination Item
-
-.page-item {
-	@include clay-container($cadmin-pagination-item);
-}
-
 .page-item:first-child .page-link,
 .page-link-first {
-	border-radius: $cadmin-pagination-link-first-border-radius;
+	@include clay-css($cadmin-pagination-link-first);
 }
 
 .page-item:last-child .page-link,
 .page-link-last {
-	border-radius: $cadmin-pagination-link-last-border-radius;
+	@include clay-css($cadmin-pagination-link-last);
 }
 
 // Pagination Items Per Page
 
 .pagination-items-per-page {
-	font-size: $cadmin-pagination-items-per-page-font-size;
-	margin-bottom: $cadmin-pagination-margin-bottom;
-
-	> a,
-	> button {
-		@include clay-link($cadmin-pagination-items-per-page-link);
-
-		&:hover {
-			@include clay-link($cadmin-pagination-items-per-page-link-hover);
-		}
-
-		&:focus {
-			@include clay-link($cadmin-pagination-items-per-page-link-focus);
-		}
-
-		&:active,
-		&.active {
-			@include clay-link($cadmin-pagination-items-per-page-link-active);
-		}
-
-		&:disabled,
-		&.disabled {
-			@include clay-link($cadmin-pagination-items-per-page-link-disabled);
-		}
-	}
-
-	&.active,
-	&.show {
-		> a,
-		> button {
-			@include clay-link($cadmin-pagination-items-per-page-link-active);
-		}
-	}
-
-	&.disabled {
-		> a,
-		> button {
-			@include clay-link($cadmin-pagination-items-per-page-link-disabled);
-		}
-	}
-
-	+ .pagination-results {
-		@include clay-scale-component {
-			margin-left: auto;
-		}
-	}
+	@include clay-pagination-items-per-page-variant(
+		$cadmin-pagination-items-per-page
+	);
 }
 
 .page-item .dropdown-menu,
@@ -137,149 +55,15 @@
 }
 
 .pagination-results {
-	border-color: transparent;
-	border-style: solid;
-	border-width: $cadmin-pagination-border-width;
-	color: $cadmin-pagination-results-color;
-	font-size: $cadmin-pagination-font-size;
-	line-height: $cadmin-pagination-line-height;
-	margin-bottom: $cadmin-pagination-margin-bottom;
-	margin-right: auto;
-	max-width: 100%;
-	padding: $cadmin-pagination-padding-y $cadmin-pagination-padding-x;
-	word-wrap: break-word;
+	@include clay-css($cadmin-pagination-results);
 }
 
 // Pagination Sizes
 
 .pagination-sm {
-	.pagination-items-per-page {
-		@include border-radius($cadmin-pagination-link-border-radius-sm);
-
-		.lexicon-icon {
-			margin-left: $cadmin-pagination-items-per-page-lexicon-icon-margin-left-sm;
-			margin-right: $cadmin-pagination-items-per-page-lexicon-icon-margin-top-sm;
-		}
-	}
-
-	.pagination-items-per-page > a,
-	.pagination-items-per-page > .btn-unstyled {
-		font-size: $cadmin-pagination-font-size-sm;
-		height: $cadmin-pagination-item-height-sm;
-		line-height: $cadmin-pagination-line-height-sm;
-		padding: $cadmin-pagination-padding-y-sm $cadmin-pagination-padding-x;
-
-		@if ($cadmin-enable-c-inner) {
-			.c-inner {
-				margin: math-sign($cadmin-pagination-padding-y-sm)
-					math-sign($cadmin-pagination-padding-x);
-			}
-		}
-	}
-
-	.pagination-results {
-		font-size: $cadmin-pagination-font-size-sm;
-		line-height: $cadmin-pagination-line-height-sm;
-		padding: $cadmin-pagination-padding-y-sm $cadmin-pagination-padding-x;
-	}
-
-	.page-link {
-		font-size: $cadmin-pagination-font-size-sm;
-		height: $cadmin-pagination-item-height-sm;
-		line-height: $cadmin-pagination-line-height-sm;
-		padding-bottom: $cadmin-pagination-padding-y-sm;
-		padding-right: $cadmin-pagination-padding-x-sm;
-		padding-left: $cadmin-pagination-padding-x-sm;
-		padding-top: $cadmin-pagination-padding-y-sm;
-
-		@if ($cadmin-enable-c-inner) {
-			.c-inner {
-				margin: math-sign($cadmin-pagination-padding-y-sm)
-					math-sign($cadmin-pagination-padding-x-sm);
-			}
-		}
-
-		&.btn-unstyled {
-			padding: $cadmin-pagination-padding-y-sm
-				$cadmin-pagination-padding-x-sm;
-		}
-	}
-
-	.page-item:first-child .page-link,
-	.page-link-first {
-		border-bottom-left-radius: $cadmin-pagination-link-border-radius-sm;
-		border-top-left-radius: $cadmin-pagination-link-border-radius-sm;
-	}
-
-	.page-item:last-child .page-link,
-	.page-link-last {
-		border-bottom-right-radius: $cadmin-pagination-link-border-radius-sm;
-		border-top-right-radius: $cadmin-pagination-link-border-radius-sm;
-	}
+	@include clay-pagination-variant($cadmin-pagination-sm);
 }
 
 .pagination-lg {
-	.pagination-items-per-page {
-		@include border-radius($cadmin-pagination-link-border-radius-lg);
-
-		.lexicon-icon {
-			margin-left: $cadmin-pagination-items-per-page-lexicon-icon-margin-left-lg;
-			margin-right: $cadmin-pagination-items-per-page-lexicon-icon-margin-top-lg;
-		}
-	}
-
-	.pagination-items-per-page > a,
-	.pagination-items-per-page > .btn-unstyled {
-		font-size: $cadmin-pagination-font-size-lg;
-		height: $cadmin-pagination-item-height-lg;
-		line-height: $cadmin-pagination-line-height-lg;
-		padding: $cadmin-pagination-padding-y-lg $cadmin-pagination-padding-x;
-
-		@if ($cadmin-enable-c-inner) {
-			.c-inner {
-				margin: math-sign($cadmin-pagination-padding-y-lg)
-					math-sign($cadmin-pagination-padding-x);
-			}
-		}
-	}
-
-	.pagination-results {
-		font-size: $cadmin-pagination-font-size-lg;
-		line-height: $cadmin-pagination-line-height-lg;
-		padding: $cadmin-pagination-padding-y-lg $cadmin-pagination-padding-x;
-	}
-
-	.page-link {
-		font-size: $cadmin-pagination-font-size-lg;
-		height: $cadmin-pagination-item-height-lg;
-		line-height: $cadmin-pagination-line-height-lg;
-		padding-bottom: $cadmin-pagination-padding-y-lg;
-		padding-left: $cadmin-pagination-padding-x-lg;
-		padding-right: $cadmin-pagination-padding-x-lg;
-		padding-top: $cadmin-pagination-padding-y-lg;
-
-		@if ($cadmin-enable-c-inner) {
-			.c-inner {
-				margin: math-sign($cadmin-pagination-padding-y-lg)
-					math-sign($cadmin-pagination-padding-x-lg);
-			}
-		}
-
-		&.btn-unstyled {
-			padding: $cadmin-pagination-padding-y-lg
-				$cadmin-pagination-padding-x-lg;
-		}
-	}
-
-	.page-item:first-child .page-link,
-	.page-link-first {
-		border-bottom-left-radius: $cadmin-pagination-link-border-radius-lg;
-		border-top-left-radius: $cadmin-pagination-link-border-radius-lg;
-	}
-
-	.page-item:last-child .page-link,
-	.page-link-last {
-		border-bottom-right-radius: $cadmin-pagination-link-border-radius-lg;
-		border-top-right-radius: $cadmin-pagination-link-border-radius-lg;
-	}
+	@include clay-pagination-variant($cadmin-pagination-lg);
 }