@clayui/css 3.35.0 → 3.36.0

package/src/scss/cadmin/variables/_buttons.scss

@@ -32,6 +32,79 @@ $cadmin-btn-section-font-size: 11px !default; // 11px
 $cadmin-btn-section-font-weight: $cadmin-font-weight-normal !default;
 $cadmin-btn-section-line-height: 1 !default;
 
+$cadmin-btn: () !default;
+$cadmin-btn: map-deep-merge(
+	(
+		background-color: transparent,
+		border-color: transparent,
+		border-style: solid,
+		border-width: $cadmin-btn-border-width,
+		border-radius: clay-enable-rounded($cadmin-btn-border-radius),
+		box-shadow: clay-enable-shadows([$cadmin-btn-box-shadow]),
+		color: $cadmin-body-color,
+		cursor: $cadmin-btn-cursor,
+		display: inline-block,
+		font-family: $cadmin-btn-font-family,
+		font-size: $cadmin-btn-font-size,
+		font-weight: $cadmin-btn-font-weight,
+		line-height: $cadmin-btn-line-height,
+		padding-bottom: $cadmin-btn-padding-y,
+		padding-left: $cadmin-btn-padding-x,
+		padding-right: $cadmin-btn-padding-x,
+		padding-top: $cadmin-btn-padding-y,
+		text-align: center,
+		text-transform: none,
+		transition: clay-enable-transitions($cadmin-btn-transition),
+		user-select: none,
+		vertical-align: middle,
+		white-space: $cadmin-btn-white-space,
+		mobile: (
+			font-size: $cadmin-btn-font-size-mobile,
+			padding-bottom: $cadmin-btn-padding-y-mobile,
+			padding-left: $cadmin-btn-padding-x-mobile,
+			padding-right: $cadmin-btn-padding-x-mobile,
+			padding-top: $cadmin-btn-padding-y-mobile,
+		),
+		hover: (
+			color: $cadmin-body-color,
+			text-decoration: none,
+		),
+		focus: (
+			box-shadow: $cadmin-btn-focus-box-shadow,
+			outline: 0,
+		),
+		active: (
+			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
+			focus: (
+				box-shadow: clay-enable-shadows([$cadmin-btn-focus-box-shadow]),
+			),
+		),
+		active-class: (
+			box-shadow: clay-enable-shadows([$cadmin-btn-active-box-shadow]),
+		),
+		disabled: (
+			cursor: $cadmin-btn-disabled-cursor,
+			opacity: $cadmin-btn-disabled-opacity,
+			focus: (
+				box-shadow: none,
+			),
+			active: (
+				pointer-events: none,
+			),
+		),
+		inline-item: (
+			font-size: $cadmin-btn-inline-item-font-size,
+		),
+		btn-section: (
+			display: block,
+			font-size: $cadmin-btn-section-font-size,
+			font-weight: $cadmin-btn-section-font-weight,
+			line-height: $cadmin-btn-section-line-height,
+		),
+	),
+	$cadmin-btn
+);
+
 // Button Lg
 
 $cadmin-btn-border-radius-lg: $cadmin-border-radius !default;
@@ -46,6 +119,33 @@ $cadmin-btn-font-size-lg-mobile: null !default;
 $cadmin-btn-padding-x-lg-mobile: null !default;
 $cadmin-btn-padding-y-lg-mobile: null !default;
 
+$cadmin-btn-lg: () !default;
+$cadmin-btn-lg: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-btn-border-radius-lg),
+		font-size: $cadmin-btn-font-size-lg,
+		line-height: $cadmin-btn-line-height-lg,
+		padding-bottom: $cadmin-btn-padding-y-lg,
+		padding-left: $cadmin-btn-padding-x-lg,
+		padding-right: $cadmin-btn-padding-x-lg,
+		padding-top: $cadmin-btn-padding-y-lg,
+		mobile: (
+			font-size: $cadmin-btn-font-size-lg-mobile,
+			padding-bottom: $cadmin-btn-padding-y-lg-mobile,
+			padding-left: $cadmin-btn-padding-x-lg-mobile,
+			padding-right: $cadmin-btn-padding-x-lg-mobile,
+			padding-top: $cadmin-btn-padding-y-lg-mobile,
+		),
+		inline-item: (
+			font-size: $cadmin-btn-inline-item-font-size-lg,
+		),
+		btn-section: (
+			font-size: $cadmin-btn-section-font-size-lg,
+		),
+	),
+	$cadmin-btn-lg
+);
+
 // Button Sm
 
 $cadmin-btn-border-radius-sm: $cadmin-border-radius-sm !default;
@@ -60,28 +160,154 @@ $cadmin-btn-font-size-sm-mobile: null !default;
 $cadmin-btn-padding-x-sm-mobile: null !default;
 $cadmin-btn-padding-y-sm-mobile: null !default;
 
+$cadmin-btn-sm: () !default;
+$cadmin-btn-sm: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($cadmin-btn-border-radius-sm),
+		font-size: $cadmin-btn-font-size-sm,
+		line-height: $cadmin-btn-line-height-sm,
+		padding-bottom: $cadmin-btn-padding-y-sm,
+		padding-left: $cadmin-btn-padding-x-sm,
+		padding-right: $cadmin-btn-padding-x-sm,
+		padding-top: $cadmin-btn-padding-y-sm,
+		mobile: (
+			font-size: $cadmin-btn-font-size-sm-mobile,
+			padding-bottom: $cadmin-btn-padding-y-sm-mobile,
+			padding-left: $cadmin-btn-padding-x-sm-mobile,
+			padding-right: $cadmin-btn-padding-x-sm-mobile,
+			padding-top: $cadmin-btn-padding-y-sm-mobile,
+		),
+		inline-item: (
+			font-size: $cadmin-btn-inline-item-font-size-sm,
+		),
+		btn-section: (
+			font-size: $cadmin-btn-section-font-size-sm,
+		),
+	),
+	$cadmin-btn-sm
+);
+
 // Button Monospaced
 
 $cadmin-btn-monospaced-padding-x: 0 !default;
-$cadmin-btn-monospaced-padding-y: 4px !default; // 4px
+$cadmin-btn-monospaced-padding-y: 0 !default;
 $cadmin-btn-monospaced-size: 40px !default; // 40px
 
-$cadmin-btn-monospaced-padding-x-lg: 0 !default;
-$cadmin-btn-monospaced-padding-y-lg: 6px !default; // 6px
+$cadmin-btn-monospaced-size-mobile: null !default;
+
+$cadmin-btn-monospaced: () !default;
+$cadmin-btn-monospaced: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		flex-direction: column,
+		height: $cadmin-btn-monospaced-size,
+		justify-content: center,
+		line-height: 1,
+		overflow: hidden,
+		padding-bottom: $cadmin-btn-monospaced-padding-y,
+		padding-left: $cadmin-btn-monospaced-padding-x,
+		padding-right: $cadmin-btn-monospaced-padding-x,
+		padding-top: $cadmin-btn-monospaced-padding-y,
+		text-align: center,
+		white-space: normal,
+		width: $cadmin-btn-monospaced-size,
+		word-wrap: break-word,
+		mobile: (
+			height: $cadmin-btn-monospaced-size-mobile,
+			width: $cadmin-btn-monospaced-size-mobile,
+		),
+		c-inner: (
+			align-items: center,
+			display: flex,
+			flex-direction: column,
+			height: 100%,
+			justify-content: center,
+			padding: 0,
+			width: 100%,
+		),
+	),
+	$cadmin-btn-monospaced
+);
+
+// Button Monospaced Lg
+
+$cadmin-btn-monospaced-padding-x-lg: null !default;
+$cadmin-btn-monospaced-padding-y-lg: null !default;
 $cadmin-btn-monospaced-size-lg: 48px !default; // 48px
 
+$cadmin-btn-monospaced-size-lg-mobile: null !default;
+
+$cadmin-btn-monospaced-lg: () !default;
+$cadmin-btn-monospaced-lg: map-deep-merge(
+	(
+		height: $cadmin-btn-monospaced-size-lg,
+		padding-bottom: $cadmin-btn-monospaced-padding-y-lg,
+		padding-left: $cadmin-btn-monospaced-padding-x-lg,
+		padding-right: $cadmin-btn-monospaced-padding-x-lg,
+		padding-top: $cadmin-btn-monospaced-padding-y-lg,
+		width: $cadmin-btn-monospaced-size-lg,
+		mobile: (
+			height: $cadmin-btn-monospaced-size-lg-mobile,
+			width: $cadmin-btn-monospaced-size-lg-mobile,
+		),
+	),
+	$cadmin-btn-monospaced-lg
+);
+
+// Button Monospaced Sm
+
 $cadmin-btn-monospaced-padding-x-sm: null !default;
-$cadmin-btn-monospaced-padding-y-sm: 3px !default; // 3px
+$cadmin-btn-monospaced-padding-y-sm: null !default;
 $cadmin-btn-monospaced-size-sm: 32px !default; // 32px
 
-$cadmin-btn-monospaced-size-mobile: null !default;
-$cadmin-btn-monospaced-size-lg-mobile: null !default;
 $cadmin-btn-monospaced-size-sm-mobile: null !default;
 
+$cadmin-btn-monospaced-sm: () !default;
+$cadmin-btn-monospaced-sm: map-deep-merge(
+	(
+		height: $cadmin-btn-monospaced-size-sm,
+		padding-bottom: $cadmin-btn-monospaced-padding-y-sm,
+		padding-left: $cadmin-btn-monospaced-padding-x-sm,
+		padding-right: $cadmin-btn-monospaced-padding-x-sm,
+		padding-top: $cadmin-btn-monospaced-padding-y-sm,
+		width: $cadmin-btn-monospaced-size-sm,
+		mobile: (
+			height: $cadmin-btn-monospaced-size-sm-mobile,
+			width: $cadmin-btn-monospaced-size-sm-mobile,
+		),
+	),
+	$cadmin-btn-monospaced-sm
+);
+
 // Button Block
 
 $cadmin-btn-block-spacing-y: 8px !default;
 
+// Button Unstyled
+
+$cadmin-btn-unstyled: () !default;
+$cadmin-btn-unstyled: map-deep-merge(
+	(
+		background-color: rgba(0, 0, 0, 0.001),
+		border-width: 0,
+		cursor: $cadmin-btn-cursor,
+		font-size: inherit,
+		font-weight: inherit,
+		line-height: inherit,
+		max-width: 100%,
+		padding: 0,
+		text-align: left,
+		text-transform: inherit,
+		vertical-align: baseline,
+		c-inner: (
+			margin: 0,
+			max-width: none,
+		),
+	),
+	$cadmin-btn-unstyled
+);
+
 // Button Group
 
 $cadmin-btn-group-item-margin-right: 16px !default;
@@ -702,6 +928,23 @@ $cadmin-btn-outline-dark: map-deep-merge(
 	$cadmin-btn-outline-dark
 );
 
+$cadmin-btn-outline-borderless: () !default;
+$cadmin-btn-outline-borderless: map-deep-merge(
+	(
+		border-color: transparent,
+		hover: (
+			border-color: transparent,
+		),
+		focus: (
+			border-color: transparent,
+		),
+		disabled: (
+			border-color: transparent,
+		),
+	),
+	$cadmin-btn-outline-borderless
+);
+
 $cadmin-btn-outline-palette: () !default;
 $cadmin-btn-outline-palette: map-deep-merge(
 	(

package/src/scss/cadmin/variables/_forms.scss

@@ -2,14 +2,12 @@ $cadmin-input-bg: $cadmin-gray-200 !default;
 
 $cadmin-input-border-color: $cadmin-gray-300 !default;
 $cadmin-input-border-style: solid !default;
-$cadmin-input-border-top-width: 1px !default;
-$cadmin-input-border-right-width: 1px !default;
-$cadmin-input-border-bottom-width: 1px !default;
-$cadmin-input-border-left-width: 1px !default;
+$cadmin-input-border-width: 1px !default;
 
-$cadmin-input-border-width: $cadmin-input-border-top-width
-	$cadmin-input-border-right-width $cadmin-input-border-bottom-width
-	$cadmin-input-border-left-width !default;
+$cadmin-input-border-top-width: $cadmin-input-border-width !default;
+$cadmin-input-border-right-width: $cadmin-input-border-width !default;
+$cadmin-input-border-bottom-width: $cadmin-input-border-width !default;
+$cadmin-input-border-left-width: $cadmin-input-border-width !default;
 
 $cadmin-input-border-radius: $cadmin-border-radius !default;
 $cadmin-input-box-shadow: null !default;
@@ -52,6 +50,65 @@ $cadmin-input-placeholder-color: $cadmin-gray-600 !default;
 $cadmin-input-placeholder-focus-color: null !default;
 $cadmin-input-placeholder-disabled-color: $cadmin-input-disabled-color !default;
 
+$cadmin-input: () !default;
+$cadmin-input: map-deep-merge(
+	(
+		background-color: $cadmin-input-bg,
+		border-color: $cadmin-input-border-color,
+		border-style: $cadmin-input-border-style,
+		border-width: $cadmin-input-border-width,
+		border-bottom-width: $cadmin-input-border-bottom-width,
+		border-left-width: $cadmin-input-border-left-width,
+		border-right-width: $cadmin-input-border-right-width,
+		border-top-width: $cadmin-input-border-top-width,
+		border-radius: clay-enable-rounded($cadmin-input-border-radius),
+		box-shadow: clay-enable-shadows([$cadmin-input-box-shadow]),
+		color: $cadmin-input-color,
+		display: block,
+		font-family: $cadmin-input-font-family,
+		font-size: $cadmin-input-font-size,
+		font-weight: $cadmin-input-font-weight,
+		height: $cadmin-input-height,
+		line-height: $cadmin-input-line-height,
+		min-width: 0,
+		padding-bottom: $cadmin-input-padding-y,
+		padding-left: $cadmin-input-padding-x,
+		padding-right: $cadmin-input-padding-x,
+		padding-top: $cadmin-input-padding-y,
+		transition: $cadmin-input-transition,
+		width: 100%,
+		mobile: (
+			font-size: $cadmin-input-font-size-mobile,
+			height: $cadmin-input-height-mobile,
+		),
+		placeholder: (
+			color: $cadmin-input-placeholder-color,
+			opacity: 1,
+		),
+		focus: (
+			background-color: $cadmin-input-focus-bg,
+			border-color: $cadmin-input-focus-border-color,
+			box-shadow: $cadmin-input-focus-box-shadow,
+			color: $cadmin-input-focus-color,
+			outline: 0,
+			placeholder: (
+				color: $cadmin-input-placeholder-focus-color,
+			),
+		),
+		disabled: (
+			background-color: $cadmin-input-disabled-bg,
+			border-color: $cadmin-input-disabled-border-color,
+			color: $cadmin-input-disabled-color,
+			cursor: $cadmin-input-disabled-cursor,
+			opacity: $cadmin-input-disabled-opacity,
+			placeholder: (
+				color: $cadmin-input-placeholder-disabled-color,
+			),
+		),
+	),
+	$cadmin-input
+);
+
 // Form Control Plaintext
 
 $cadmin-input-plaintext-color: $cadmin-body-color !default;
@@ -107,10 +164,11 @@ $cadmin-input-height-sm-mobile: null !default;
 
 $cadmin-input-label-color: $cadmin-gray-900 !default;
 $cadmin-input-label-font-size: 14px !default; // 14px
-$cadmin-input-label-font-size-mobile: null !default;
 $cadmin-input-label-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-input-label-margin-bottom: 4px !default; // 4px
 
+$cadmin-input-label-font-size-mobile: null !default;
+
 $cadmin-input-label-for-cursor: $cadmin-link-cursor !default;
 
 $cadmin-input-label-focus-color: null !default;
@@ -125,6 +183,64 @@ $cadmin-input-label-reference-mark-font-size: 6px !default;
 $cadmin-input-label-reference-mark-spacer: null !default;
 $cadmin-input-label-reference-mark-vertical-align: null !default;
 
+$cadmin-input-label: () !default;
+$cadmin-input-label: map-deep-merge(
+	(
+		color: $cadmin-input-label-color,
+		font-size: $cadmin-input-label-font-size,
+		font-weight: $cadmin-input-label-font-weight,
+		margin-bottom: $cadmin-input-label-margin-bottom,
+		max-width: 100%,
+		word-wrap: break-word,
+		mobile: (
+			font-size: $cadmin-input-label-font-size-mobile,
+		),
+		focus: (
+			color: $cadmin-input-label-focus-color,
+		),
+		for: (
+			cursor: $cadmin-input-label-for-cursor,
+		),
+		form-text: (
+			margin-bottom: $cadmin-input-label-margin-bottom,
+			margin-top: 0,
+		),
+		reference-mark: (
+			color: $cadmin-input-label-reference-mark-color,
+			font-size: $cadmin-input-label-reference-mark-font-size,
+			margin-left: $cadmin-input-label-reference-mark-spacer,
+			margin-right: $cadmin-input-label-reference-mark-spacer,
+			vertical-align: $cadmin-input-label-reference-mark-vertical-align,
+		),
+	),
+	$cadmin-input-label
+);
+
+// .form-control-label
+
+$cadmin-form-control-label: () !default;
+$cadmin-form-control-label: map-merge(
+	(
+		display: inline,
+		margin-bottom: 0,
+	),
+	$cadmin-form-control-label
+);
+
+// .form-control-label-text
+
+$cadmin-form-control-label-text: () !default;
+$cadmin-form-control-label-text: map-merge(
+	(
+		cursor: map-deep-get($cadmin-input-label, for, cursor),
+		display: inline-block,
+		margin-bottom: map-get($cadmin-input-label, margin-bottom),
+		max-width: 100%,
+		word-wrap: break-word,
+	),
+	$cadmin-form-control-label-text
+);
+
 // @deprecated after v2.18.0 use the Sass map `$cadmin-input-readonly` instead
 
 $cadmin-input-readonly-bg: $cadmin-white !default;