@clayui/css 3.43.0 → 3.45.0

package/src/scss/mixins/_navbar.scss

@@ -1459,6 +1459,38 @@
 						);
 					}
 				}
+
+				.nav-divider {
+					@include clay-css(map-deep-get($map, nav-divider));
+
+					&::before {
+						@include clay-css(
+							map-deep-get($map, nav-divider, before)
+						);
+					}
+
+					&::after {
+						@include clay-css(
+							map-deep-get($map, nav-divider, after)
+						);
+					}
+				}
+
+				.nav-divider-end {
+					@include clay-css(map-deep-get($map, nav-divider-end));
+
+					&::before {
+						@include clay-css(
+							map-deep-get($map, nav-divider-end, before)
+						);
+					}
+
+					&::after {
+						@include clay-css(
+							map-deep-get($map, nav-divider-end, after)
+						);
+					}
+				}
 			}
 
 			.navbar-form {

package/src/scss/variables/_cards.scss

@@ -207,12 +207,284 @@ $card-rounded-circle-inner-border-radius: calc(
 	#{$rounded-circle-border-radius} - #{$card-border-width}
 ) !default;
 
+// .form-check-card
+
+$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow !default;
+
+$form-check-card: () !default;
+$form-check-card: map-deep-merge(
+	(
+		margin-bottom: $card-margin-bottom,
+		margin-top: 0,
+		padding-left: 0,
+		hover: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
+			),
+		),
+		active: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
+			),
+		),
+		checked: (
+			card: (
+				box-shadow: $form-check-card-checked-box-shadow,
+			),
+		),
+		card: (
+			margin-bottom: 0,
+		),
+		form-check-input: (
+			margin-left: 0,
+			margin-top: 0,
+			opacity: 0,
+			position: absolute,
+			z-index: 1,
+		),
+		form-check-label: (
+			color: $body-color,
+			display: inline,
+			font-weight: $font-weight-normal,
+			padding-left: 0,
+			position: static,
+		),
+		custom-control: (
+			display: inline,
+			margin-right: 0,
+			position: static,
+			label: (
+				font-weight: $font-weight-normal,
+				padding-left: 0,
+			),
+			custom-control-label: (
+				opacity: 0,
+				position: absolute,
+				z-index: 1,
+				before: (
+					top: 0,
+				),
+				after: (
+					top: 0,
+				),
+			),
+			custom-control-input: (
+				z-index: 2,
+				checked: (
+					card: (
+						box-shadow: $form-check-card-checked-box-shadow,
+					),
+				),
+			),
+		),
+	),
+	$form-check-card
+);
+
+// .form-check-bottom-left .card-horizontal > .card-body,
+// .form-check-middle-left .card-horizontal > .card-body,
+// .form-check-top-left .card-horizontal > .card-body
+
 $checkbox-left-card-padding: 40px !default;
+
+// .form-check-bottom-right .card-horizontal > .card-body,
+// .form-check-middle-right .card-horizontal > .card-body,
+// .form-check-top-right .card-horizontal > .card-body
+
 $checkbox-right-card-padding: $checkbox-left-card-padding !default;
 
+// Form Check Positions
+
 $checkbox-position: 1rem !default;
 
-$form-check-card-checked-box-shadow: $input-btn-focus-box-shadow !default;
+// .form-check-bottom-left
+
+$form-check-bottom-left: () !default;
+$form-check-bottom-left: map-deep-merge(
+	(
+		form-check-input: (
+			bottom: $checkbox-position,
+			left: $checkbox-position,
+			opacity: 1,
+			top: auto,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				bottom: $checkbox-position,
+				left: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
+			custom-control-label: (
+				bottom: $checkbox-position,
+				left: $checkbox-position,
+				opacity: 1,
+				top: auto,
+				transform: none,
+			),
+		),
+	),
+	$form-check-bottom-left
+);
+
+// .form-check-bottom-right
+
+$form-check-bottom-right: () !default;
+$form-check-bottom-right: map-deep-merge(
+	(
+		form-check-input: (
+			bottom: $checkbox-position,
+			left: auto,
+			opacity: 1,
+			right: $checkbox-position,
+			top: auto,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				bottom: $checkbox-position,
+				left: auto,
+				right: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
+			custom-control-label: (
+				bottom: $checkbox-position,
+				left: auto,
+				opacity: 1,
+				right: $checkbox-position,
+				top: auto,
+				transform: none,
+			),
+		),
+	),
+	$form-check-bottom-right
+);
+
+// .form-check-middle-left
+
+$form-check-middle-left: () !default;
+$form-check-middle-left: map-deep-merge(
+	(
+		form-check-input: (
+			left: $checkbox-position,
+			margin-top: 0,
+			opacity: 1,
+			top: 50%,
+			transform: translateY(-50%),
+		),
+		custom-control: (
+			custom-control-input: (
+				left: $checkbox-position,
+				margin-top: 0,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+			custom-control-label: (
+				left: $checkbox-position,
+				margin-top: 0,
+				opacity: 1,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+		),
+	),
+	$form-check-middle-left
+);
+
+// .form-check-middle-right
+
+$form-check-middle-right: () !default;
+$form-check-middle-right: map-deep-merge(
+	(
+		form-check-input: (
+			left: auto,
+			margin-top: 0,
+			opacity: 1,
+			right: $checkbox-position,
+			top: 50%,
+			transform: translateY(-50%),
+		),
+		custom-control: (
+			custom-control-input: (
+				left: auto,
+				margin-top: 0,
+				right: $checkbox-position,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+			custom-control-label: (
+				left: auto,
+				margin-top: 0,
+				opacity: 1,
+				right: $checkbox-position,
+				top: 50%,
+				transform: translateY(-50%),
+			),
+		),
+	),
+	$form-check-middle-right
+);
+
+// .form-check-top-right
+
+$form-check-top-right: () !default;
+$form-check-top-right: map-deep-merge(
+	(
+		form-check-input: (
+			left: auto,
+			opacity: 1,
+			right: $checkbox-position,
+			top: $checkbox-position,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				left: auto,
+				right: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
+			),
+			custom-control-label: (
+				left: auto,
+				opacity: 1,
+				right: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
+			),
+		),
+	),
+	$form-check-top-right
+);
+
+// .form-check-top-left
+
+$form-check-top-left: () !default;
+$form-check-top-left: map-deep-merge(
+	(
+		form-check-input: (
+			left: $checkbox-position,
+			opacity: 1,
+			top: $checkbox-position,
+			transform: none,
+		),
+		custom-control: (
+			custom-control-input: (
+				left: $checkbox-position,
+				top: $checkbox-position,
+				transform: none,
+			),
+			custom-control-label: (
+				left: $checkbox-position,
+				opacity: 1,
+				top: $checkbox-position,
+				transform: none,
+			),
+		),
+	),
+	$form-check-top-left
+);
 
 // Card Interactive
 

package/src/scss/variables/_forms.scss

@@ -310,10 +310,11 @@ $form-control-label-size: () !default;
 $form-control-label-size: map-deep-merge(
 	(
 		border-width: 0.0625rem,
-		height: 1.25rem,
+		height: auto,
 		margin-bottom: 0.25rem,
 		margin-right: 0.5rem,
 		margin-top: 0.25rem,
+		min-height: 1.25rem,
 	),
 	$form-control-label-size
 );
@@ -322,7 +323,7 @@ $form-control-label-size: map-deep-merge(
 
 $form-control-tag-group-padding-y: (
 		$input-height - $input-border-bottom-width - $input-border-top-width -
-			map-get($form-control-label-size, height) -
+			map-get($form-control-label-size, min-height) -
 			(map-get($form-control-label-size, margin-bottom)) -
 			(map-get($form-control-label-size, margin-top))
 	) * 0.5 !default;

package/src/scss/variables/_links.scss

@@ -285,3 +285,20 @@ $component-action: map-deep-merge(
 	),
 	$component-action
 );
+
+$component-text: () !default;
+
+$component-icon: () !default;
+$component-icon: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		height: 32px,
+		justify-content: center,
+		width: 32px,
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$component-icon
+);

package/src/scss/variables/_navs.scss

@@ -154,10 +154,52 @@ $nav-item: map-deep-merge(
 
 // .nav-divider
 
-$nav-divider-color: $gray-200 !default;
+$nav-divider-color: $gray-600 !default;
 $nav-divider-margin-y: $spacer * 0.5 !default;
 
 $nav-divider: () !default;
+$nav-divider: map-deep-merge(
+	(
+		margin-left: 0.5rem,
+		padding-left: 0.5rem,
+		position: relative,
+		before: (
+			background-color: $nav-divider-color,
+			content: '',
+			display: block,
+			height: 1rem,
+			left: 0,
+			margin-top: -0.5rem,
+			position: absolute,
+			top: 50%,
+			width: 1px,
+			z-index: 2,
+		),
+	),
+	$nav-divider
+);
+
+$nav-divider-end: () !default;
+$nav-divider-end: map-deep-merge(
+	(
+		margin-right: 0.5rem,
+		padding-right: 0.5rem,
+		position: relative,
+		after: (
+			background-color: $nav-divider-color,
+			content: '',
+			display: block,
+			height: 1rem,
+			margin-top: -0.5rem,
+			position: absolute,
+			right: 0,
+			top: 50%,
+			width: 1px,
+			z-index: 2,
+		),
+	),
+	$nav-divider-end
+);
 
 // .nav-text-truncate
 

package/src/scss/variables/_treeview.scss

@@ -0,0 +1,222 @@
+$treeview: () !default;
+$treeview: map-merge(
+	(
+		display: flex,
+		flex-direction: column,
+		font-size: 14px,
+		list-style: none,
+		margin-bottom: 0,
+		padding: 2px 0,
+		btn-monospaced: (
+			font-size: 14px,
+			height: 24px,
+			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-l1,
+			border-radius: $border-radius-sm,
+			border-style: solid,
+			border-width: 1px,
+			display: inline-block,
+			font-size: 10px,
+			font-weight: $font-weight-semi-bold,
+			padding: 4px 12px,
+			text-transform: uppercase,
+		),
+		treeview-group: (
+			display: flex,
+			flex-direction: column,
+			list-style: none,
+			margin-bottom: 0,
+			padding-left: 0,
+		),
+		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-link: (
+			cursor: pointer,
+			display: block,
+			border-color: transparent,
+			border-style: solid,
+			border-width: 1px,
+			margin-bottom: 2px,
+			margin-top: 2px,
+			min-width: 100%,
+			padding: 0,
+			position: relative,
+			user-select: none,
+			treeview-dropping-bottom: (
+				box-shadow: 0 2px 0 0 $primary-l1,
+			),
+			treeview-dropping-middle: (
+				background-color: $primary-l3,
+				border-color: $primary-l1,
+			),
+			treeview-dropping-top: (
+				box-shadow: 0 -2px 0 0 $primary-l1,
+			),
+			hover: (
+				text-decoration: none,
+			),
+			focus: (
+				box-shadow: $component-focus-inset-box-shadow,
+				outline: 0,
+			),
+		),
+		component-action: (
+			display: none,
+			margin-left: 2px,
+			margin-right: 2px,
+			hover: (
+				background-color: transparent,
+				color: $secondary,
+			),
+			focus: (
+				color: $secondary,
+			),
+			active: (
+				background-color: transparent,
+			),
+		),
+		component-icon: (
+			display: inline,
+			height: auto,
+			margin-left: 4px,
+			margin-right: 4px,
+			width: auto,
+		),
+		component-text: (
+			padding-bottom: 1.5px,
+			padding-left: 4px,
+			padding-top: 1.5px,
+			user-select: auto,
+		),
+	),
+	$treeview
+);
+
+$treeview-nested-margins: () !default;
+$treeview-nested-margins: map-deep-merge(
+	(
+		treeview-group: (
+			treeview-item: (
+				margin-left: 24px,
+			),
+		),
+	),
+	$treeview-nested-margins
+);
+
+$treeview-show-component-expander-on-hover: () !default;
+$treeview-show-component-expander-on-hover: map-deep-merge(
+	(
+		hover: (
+			component-expander: (
+				opacity: 1,
+				transition: opacity ease-in-out 600ms,
+			),
+		),
+		component-expander: (
+			opacity: 0,
+			transition: opacity ease-in-out 450ms,
+		),
+		treeview-link: (
+			focus: (
+				component-expander: (
+					opacity: 1,
+					transition: none,
+				),
+			),
+		),
+	),
+	$treeview-show-component-expander-on-hover
+);
+
+// Variants
+
+$treeview-light: () !default;
+$treeview-light: map-deep-merge(
+	(
+		component-expander: (
+			color: $secondary,
+			hover: (
+				color: $primary,
+			),
+			btn-secondary: (
+				background-color: $white,
+			),
+		),
+		treeview-link: (
+			color: $gray-600,
+			hover: (
+				background-color: $gray-100,
+				color: $gray-900,
+			),
+			active: (
+				background-color: $gray-200,
+				color: $gray-900,
+			),
+			active-class: (
+				background-color: $gray-200,
+				color: $gray-900,
+			),
+			show: (
+				background-color: null,
+				color: null,
+			),
+		),
+	),
+	$treeview-light
+);
+
+$treeview-dark: () !default;
+$treeview-dark: map-deep-merge(
+	(
+		component-expander: (
+			color: $secondary-l1,
+			hover: (
+				color: $primary-l1,
+			),
+		),
+		treeview-link: (
+			color: $secondary-l1,
+			hover: (
+				background-color: rgba($white, 0.04),
+			),
+			active-class: (
+				background-color: rgba($white, 0.06),
+				color: $white,
+			),
+			disabled: (
+				background-color: transparent,
+				color: rgba($secondary-l1, 0.04),
+			),
+			show: (
+				background-color: null,
+				color: null,
+			),
+		),
+		component-action: (
+			color: $secondary-l1,
+		),
+	),
+	$treeview-dark
+);