@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_treeview.scss

@@ -5,31 +5,37 @@ $treeview: map-merge(
 		flex-direction: column,
 		font-size: 14px,
 		list-style: none,
-		margin-bottom: 0,
-		padding: 2px 0,
+		margin-bottom: 0rem,
+		padding: 2px 0rem,
+
 		btn: (
 			color: inherit,
 			font-size: 12px,
 			line-height: 1,
 			padding: 6px 8px,
+
 			c-inner: (
 				margin: -7px -8px,
 			),
 		),
+
 		btn-monospaced: (
 			font-size: inherit,
 			height: 24px,
-			padding: 0,
+			padding: 0rem,
 			width: 24px,
+
 			focus: (
 				box-shadow: $component-focus-inset-box-shadow,
 			),
 		),
+
 		custom-control: (
 			margin-left: 4px,
 			margin-right: 4px,
 			margin-top: 1.5px,
 		),
+
 		treeview-dragging: (
 			background-color: $white,
 			border-color: $primary-l0,
@@ -42,25 +48,30 @@ $treeview: map-merge(
 			padding: 4px 12px,
 			text-transform: uppercase,
 		),
+
 		treeview-group: (
 			display: flex,
 			flex-direction: column,
 			list-style: none,
-			margin-bottom: 0,
-			padding-left: 0,
+			margin-bottom: 0rem,
+			padding-left: 0rem,
 		),
+
 		treeview-item: (
 			word-wrap: break-word,
 		),
+
 		treeview-item-dragging: (
 			cursor: $disabled-cursor,
 			opacity: 0.4,
+
 			treeview-link: (
 				background-color: transparent,
 				border-color: transparent,
 				box-shadow: none,
 			),
 		),
+
 		treeview-dropping-indicator-top: (
 			background-color: transparent,
 			display: block,
@@ -69,6 +80,7 @@ $treeview: map-merge(
 			outline: none,
 			width: 100%,
 		),
+
 		treeview-dropping-indicator-bottom: (
 			background-color: transparent,
 			display: block,
@@ -77,9 +89,11 @@ $treeview: map-merge(
 			outline: none,
 			width: 100%,
 		),
+
 		treeview-dropping-indicator-over: (
 			background-color: $primary-l0,
 		),
+
 		treeview-link: (
 			background-color: transparent,
 			cursor: pointer,
@@ -90,44 +104,53 @@ $treeview: map-merge(
 			margin-bottom: 2px,
 			margin-top: 2px,
 			min-width: 100%,
-			padding: 0,
+			padding: 0rem,
 			position: relative,
 			text-align: left,
 			user-select: none,
+
 			treeview-dropping-middle: (
 				background-color: $primary-l3,
 				border-color: $primary-l0,
 			),
+
 			hover: (
 				text-decoration: none,
 			),
+
 			focus: (
 				box-shadow: $component-focus-inset-box-shadow,
 				outline: 0,
 			),
+
 			disabled: (
 				cursor: $disabled-cursor,
 			),
 		),
+
 		component-expander: (
 			font-size: 10px,
-			padding: 6px 8px,
 		),
+
 		component-action: (
 			font-size: 16px,
 			margin-left: 2px,
 			margin-right: 2px,
+
 			hover: (
 				background-color: transparent,
 				color: $secondary,
 			),
+
 			focus: (
 				color: $secondary,
 			),
+
 			active: (
 				background-color: transparent,
 			),
 		),
+
 		component-icon: (
 			color: $secondary,
 			display: inline-block,
@@ -136,20 +159,24 @@ $treeview: map-merge(
 			margin: 4px,
 			vertical-align: middle,
 			width: auto,
+
 			lexicon-icon: (
 				display: block,
 			),
 		),
+
 		component-text: (
 			line-height: 24px,
 			padding-left: 4px,
 			user-select: auto,
 		),
+
 		quick-action-item: (
-			margin: 0 2px,
-			min-height: 0,
-			min-width: 0,
+			margin: 0px 2px,
+			min-height: 0rem,
+			min-width: 0rem,
 		),
+
 		autofit-row: (
 			align-items: center,
 		),
@@ -178,10 +205,12 @@ $treeview-show-component-expander-on-hover: map-deep-merge(
 				transition: opacity ease-in-out 600ms,
 			),
 		),
+
 		component-expander: (
 			opacity: 0,
 			transition: opacity ease-in-out 450ms,
 		),
+
 		treeview-link: (
 			focus: (
 				component-expander: (
@@ -201,28 +230,35 @@ $treeview-light: map-deep-merge(
 	(
 		component-expander: (
 			color: $secondary,
+
 			disabled: (
 				color: $secondary,
 				opacity: 0.5,
 			),
+
 			btn-secondary: (
 				background-color: $white,
 			),
 		),
+
 		treeview-link: (
 			color: $gray-600,
+
 			treeview-no-hover: (
 				hover: (
 					background-color: transparent,
 					color: $secondary,
 				),
 			),
+
 			hover: (
 				box-shadow: inset 0 0 0 1px $secondary-l0,
 			),
+
 			focus: (
 				box-shadow: $component-focus-inset-box-shadow,
 			),
+
 			active: (
 				background-color: $primary-l3,
 				box-shadow: inset 0 0 0 1px $primary,
@@ -231,18 +267,22 @@ $treeview-light: map-deep-merge(
 					box-shadow: $component-focus-inset-box-shadow,
 				),
 			),
+
 			active-class: (
 				background-color: $primary-l3,
 				box-shadow: inset 0 0 0 1px $primary,
 				color: $dark-l2,
+
 				focus: (
 					box-shadow: $component-focus-inset-box-shadow,
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				color: rgba($gray-600, 0.5),
 			),
+
 			show: (
 				background-color: c-unset,
 				box-shadow: c-unset,
@@ -258,53 +298,66 @@ $treeview-dark: map-deep-merge(
 	(
 		component-expander: (
 			color: $secondary-l1,
+
 			disabled: (
 				color: $secondary-l1,
 				opacity: 0.5,
 			),
 		),
+
 		treeview-link: (
 			color: $secondary-l1,
+
 			treeview-no-hover: (
 				hover: (
 					background-color: transparent,
 					color: $secondary-l1,
 				),
 			),
+
 			hover: (
 				box-shadow: inset 0 0 0 1px $secondary-l0,
 			),
+
 			focus: (
 				box-shadow: $component-focus-inset-box-shadow,
 			),
+
 			active: (
 				background-color: $dark-l2,
 				box-shadow: inset 0 0 0 1px $primary,
 				color: $primary-l3,
+
 				focus: (
 					box-shadow: $component-focus-inset-box-shadow,
 				),
 			),
+
 			active-class: (
 				background-color: $dark-l2,
 				box-shadow: inset 0 0 0 1px $primary,
 				color: $primary-l3,
+
 				focus: (
 					box-shadow: $component-focus-inset-box-shadow,
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				color: rgba($secondary-l1, 0.5),
 			),
+
 			show: (
 				background-color: c-unset,
 				box-shadow: c-unset,
 				color: c-unset,
 			),
 		),
+
 		component-action: (
 			color: $secondary-l1,
+
 			disabled: (
 				color: $secondary-l1,
 			),

package/src/scss/variables/_type.scss

@@ -12,6 +12,7 @@ $reference-mark: map-deep-merge(
 		font-size: $reference-mark-font-size,
 		position: relative,
 		vertical-align: $reference-mark-vertical-align,
+
 		lexicon-icon: (
 			vertical-align: $reference-mark-vertical-align,
 		),
@@ -25,6 +26,7 @@ $c-kbd-group: () !default;
 $c-kbd-group: map-deep-merge(
 	(
 		font-size: 0.875rem,
+
 		c-kbd: (
 			font-size: inherit,
 		),
@@ -49,10 +51,10 @@ $c-kbd: map-deep-merge(
 		height: 1.5rem,
 		line-height: 1.375rem,
 		min-width: 1.5rem,
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.3125rem,
 		padding-right: 0.3125rem,
-		padding-top: 0,
+		padding-top: 0rem,
 		text-align: center,
 		text-transform: capitalize,
 	),
@@ -69,8 +71,8 @@ $c-kbd-c-kbd: map-merge(
 		font-weight: inherit,
 		height: auto,
 		line-height: inherit,
-		min-width: 0,
-		padding: 0,
+		min-width: 0rem,
+		padding: 0rem,
 	),
 	$c-kbd-c-kbd
 );
@@ -78,7 +80,7 @@ $c-kbd-c-kbd: map-merge(
 $c-kbd-monospaced: () !default;
 $c-kbd-monospaced: map-deep-merge(
 	(
-		padding: 0,
+		padding: 0rem,
 	),
 	$c-kbd-monospaced
 );
@@ -90,8 +92,8 @@ $c-kbd-inline: map-deep-merge(
 		font-weight: $font-weight-light,
 		height: auto,
 		line-height: inherit,
-		min-width: 0,
-		padding: 0,
+		min-width: 0rem,
+		padding: 0rem,
 	),
 	$c-kbd-inline
 );