@clayui/css 3.159.0 → 3.160.0

package/src/scss/cadmin/variables/_sheets.scss

@@ -1,10 +1,9 @@
 $cadmin-sheet-bg: $cadmin-white !default;
 $cadmin-sheet-border-color: $cadmin-gray-300 !default;
+$cadmin-sheet-border-radius: $cadmin-border-radius !default;
 $cadmin-sheet-border-style: solid !default;
 $cadmin-sheet-border-width: 1px !default; // 1px
 
-$cadmin-sheet-border-radius: $cadmin-border-radius !default;
-
 $cadmin-sheet-padding-bottom: 1px !default; // 1px
 $cadmin-sheet-padding-left: 24px !default; // 24px
 $cadmin-sheet-padding-right: 24px !default; // 24px
@@ -26,14 +25,17 @@ $cadmin-sheet-plus-sheet: map-merge(
 // Sheet Header
 
 $cadmin-sheet-header-margin-bottom: 48px !default; // 48px
+
 $cadmin-sheet-header-margin-bottom-mobile: 32px !default; // 32px
 
 // Sheet Section
 
 $cadmin-sheet-section-margin-bottom: 48px !default; // 48px
+
 $cadmin-sheet-section-margin-bottom-mobile: 32px !default; // 32px
 
 $cadmin-sheet-panel-group-margin-bottom: 24px !default; // 24px
+
 $cadmin-sheet-panel-group-margin-bottom-mobile: 16px !default; // 16px
 
 // Sheet Footer
@@ -51,19 +53,23 @@ $cadmin-sheet-footer-btn-block-sm-down: () !default;
 $cadmin-sheet-footer-btn-block-sm-down: map-deep-merge(
 	(
 		breakpoint-down: sm,
+
 		mobile: (
 			display: block,
+
 			btn: (
 				display: block,
 				margin-bottom: 16px,
 				width: 100%,
 			),
+
 			btn-group: (
 				display: block,
 			),
+
 			btn-group-item: (
 				display: block,
-				margin-right: 0,
+				margin-right: 0px,
 			),
 		),
 	),
@@ -74,8 +80,8 @@ $cadmin-sheet-footer-btn-block-sm-down: map-deep-merge(
 
 // @deprecated as of 3.x.
 
-$cadmin-sheet-lg-max-width: ceil(
-	map-get($cadmin-container-max-widths, lg) * 0.83333
+$cadmin-sheet-lg-max-width: calc(
+	#{map-get($cadmin-container-max-widths, lg)} * 0.83333
 ) !default; // 800px
 
 // Sheet Title
@@ -95,7 +101,7 @@ $cadmin-sheet-title-margin-bottom-mobile: 16px !default; // 16px
 
 $cadmin-sheet-subtitle-border-color: $cadmin-gray-500 !default;
 $cadmin-sheet-subtitle-border-style: solid !default;
-$cadmin-sheet-subtitle-border-width: 0 0 1px 0 !default;
+$cadmin-sheet-subtitle-border-width: 0px 0px 1px 0px !default;
 $cadmin-sheet-subtitle-color: $cadmin-body-color !default;
 $cadmin-sheet-subtitle-font-size: 14px !default; // 14px
 $cadmin-sheet-subtitle-font-weight: $cadmin-font-weight-semi-bold !default;
@@ -108,13 +114,14 @@ $cadmin-sheet-subtitle-text-transform: uppercase !default;
 $cadmin-sheet-subtitle-font-size-mobile: null !default;
 $cadmin-sheet-subtitle-margin-bottom-mobile: 16px !default; // 16px
 
-$cadmin-sheet-subtitle-heading-text-margin-bottom: 0 !default;
+$cadmin-sheet-subtitle-heading-text-margin-bottom: 0px !default;
 $cadmin-sheet-subtitle-heading-text-margin-top: auto !default;
 
 // Sheet Subtitle as Panel Header
 
 $cadmin-sheet-subtitle-link-color: $cadmin-sheet-subtitle-color !default;
 $cadmin-sheet-subtitle-link-text-decoration: null !default;
+
 $cadmin-sheet-subtitle-link-hover-color: null !default;
 $cadmin-sheet-subtitle-link-hover-text-decoration: none !default;
 
@@ -125,10 +132,12 @@ $cadmin-sheet-subtitle-link: map-deep-merge(
 		color: $cadmin-sheet-subtitle-link-color,
 		text-decoration: $cadmin-sheet-subtitle-link-text-decoration,
 		transition: box-shadow 0.15s ease-in-out,
+
 		hover: (
 			color: $cadmin-sheet-subtitle-link-hover-color,
 			text-decoration: $cadmin-sheet-subtitle-link-hover-text-decoration,
 		),
+
 		focus: (
 			box-shadow: #{0 0 0 4px $cadmin-white,
 			0 0 0 6px $cadmin-primary-l0},
@@ -138,8 +147,8 @@ $cadmin-sheet-subtitle-link: map-deep-merge(
 	$cadmin-sheet-subtitle-link
 );
 
-$cadmin-sheet-subtitle-collapse-icon-font-size: 12px !default;
 $cadmin-sheet-subtitle-collapse-icon-bottom: null !default;
+$cadmin-sheet-subtitle-collapse-icon-font-size: 12px !default;
 $cadmin-sheet-subtitle-collapse-icon-left: null !default;
 $cadmin-sheet-subtitle-collapse-icon-right: null !default;
 $cadmin-sheet-subtitle-collapse-icon-top: clay-collapse-icon-align(
@@ -185,7 +194,7 @@ $cadmin-sheet-multiple-form-sheet-header: map-merge(
 	(
 		border-color: $cadmin-gray-300,
 		border-style: solid,
-		border-width: 0 0 1px,
+		border-width: 0px 0px 1px,
 		margin: -24px -24px 24px,
 		padding: 16px 24px,
 	),
@@ -204,7 +213,7 @@ $cadmin-sheet-multiple-form-sheet-header-mobile: map-merge(
 $cadmin-sheet-multiple-form-sheet-title: () !default;
 $cadmin-sheet-multiple-form-sheet-title: map-merge(
 	(
-		margin-bottom: 0,
+		margin-bottom: 0px,
 	),
 	$cadmin-sheet-multiple-form-sheet-title
 );
@@ -216,7 +225,7 @@ $cadmin-sheet-dataset-content: () !default;
 $cadmin-sheet-dataset-content-sheet-header: () !default;
 $cadmin-sheet-dataset-content-sheet-header: map-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		margin: -24px -24px 24px,
 		padding: 16px 24px,
 	),
@@ -235,7 +244,7 @@ $cadmin-sheet-dataset-content-sheet-header-mobile: map-merge(
 $cadmin-sheet-dataset-content-sheet-title: () !default;
 $cadmin-sheet-dataset-content-sheet-title: map-merge(
 	(
-		margin-bottom: 0,
+		margin-bottom: 0px,
 	),
 	$cadmin-sheet-dataset-content-sheet-title
 );

package/src/scss/cadmin/variables/_sidebar.scss

@@ -9,6 +9,7 @@ $cadmin-sidebar-header-component-title: () !default;
 $cadmin-sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 16px,
+
 		href: (
 			color: $cadmin-gray-900,
 		),
@@ -23,7 +24,7 @@ $cadmin-sidebar-header-component-subtitle: map-deep-merge(
 	(
 		font-size: 14px,
 		font-weight: $cadmin-font-weight-normal,
-		margin-bottom: 0,
+		margin-bottom: 0px,
 	),
 	$cadmin-sidebar-header-component-subtitle
 );
@@ -63,7 +64,7 @@ $cadmin-sidebar-list-group-border-color: $cadmin-gray-300 !default;
 $cadmin-sidebar-list-group-font-size: 14px !default; // 14px
 $cadmin-sidebar-list-group-type: list-group-flush !default;
 
-$cadmin-sidebar-list-group-item-padding: 0 !default;
+$cadmin-sidebar-list-group-item-padding: 0px !default;
 
 $cadmin-sidebar-list-group-autofit-col-padding-x: 8px !default; // 8px
 $cadmin-sidebar-list-group-autofit-col-padding-y: 16px !default; // 16px
@@ -79,35 +80,44 @@ $cadmin-sidebar: map-deep-merge(
 	(
 		height: 100%,
 		overflow: auto,
+
 		-webkit-overflow-scrolling: touch,
+
 		focus: (
 			box-shadow: $cadmin-component-focus-inset-box-shadow,
 		),
+
 		close: (
 			color: $cadmin-secondary,
+
 			hover: (
 				background-color: rgba($cadmin-gray-900, 0.03),
 				color: $cadmin-gray-900,
 			),
+
 			focus: (
 				background-color: rgba($cadmin-gray-900, 0.03),
 				color: $cadmin-gray-900,
 			),
+
 			active: (
 				background-color: rgba($cadmin-gray-900, 0.06),
 				color: $cadmin-gray-900,
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				color: $cadmin-secondary,
 				cursor: $cadmin-disabled-cursor,
 				opacity: $cadmin-component-disabled-opacity,
+
 				active: (
 					pointer-events: none,
 				),
 			),
 		),
+
 		sidebar-header: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
 			padding-left: $cadmin-sidebar-padding-left,
@@ -115,48 +125,60 @@ $cadmin-sidebar: map-deep-merge(
 			padding-top: $cadmin-sidebar-padding-top,
 			component-title: $cadmin-sidebar-header-component-title,
 			component-subtitle: $cadmin-sidebar-header-component-subtitle,
+
 			autofit-row: (
 				margin-left: -4px,
 				margin-right: -4px,
 				width: auto,
+
 				autofit-col: (
 					padding-left: 4px,
 					padding-right: 4px,
 				),
 			),
 		),
+
 		sidebar-footer: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
 			padding-left: $cadmin-sidebar-padding-left,
 			padding-right: $cadmin-sidebar-padding-right,
 			padding-top: $cadmin-sidebar-padding-top,
 		),
+
 		sidebar-body: (
 			overflow: auto,
+
 			-webkit-overflow-scrolling: touch,
+
 			padding-bottom: $cadmin-sidebar-padding-bottom,
 			padding-left: $cadmin-sidebar-padding-left,
 			padding-right: $cadmin-sidebar-padding-right,
 			padding-top: $cadmin-sidebar-padding-top,
 		),
+
 		sidebar-list-group: (
 			display: flex,
 			flex-direction: column,
 			font-size: $cadmin-sidebar-list-group-font-size,
-			margin-bottom: 0,
-			padding-left: 0,
+			margin-bottom: 0px,
+			padding-left: 0px,
+
 			list-group-item: (
 				background-color: $cadmin-sidebar-list-group-bg,
 				border-color: $cadmin-sidebar-list-group-border-color,
 				padding: $cadmin-sidebar-list-group-item-padding,
 			),
+
 			sticker: $cadmin-sidebar-list-group-sticker-size,
 		),
+
 		sidebar-panel: (
 			margin-bottom: $cadmin-sidebar-panel-margin-bottom,
 			position: relative,
 		),
+
 		sidebar-dt: $cadmin-sidebar-dt,
+
 		sidebar-dd: $cadmin-sidebar-dd,
 	),
 	$cadmin-sidebar
@@ -168,30 +190,39 @@ $cadmin-sidebar-sm: () !default;
 $cadmin-sidebar-sm: map-deep-merge(
 	(
 		font-size: 0.875rem,
+
 		panel-group: (
 			extend: '%clay-panel-group-sm',
 		),
+
 		btn: (
 			extend: '%clay-btn-sm',
+
 			'&.btn-xs': (
 				extend: '%clay-btn-xs',
 			),
+
 			'&.btn-monospaced': (
 				extend: '%clay-btn-monospaced-sm',
 			),
+
 			'&.btn-monospaced.btn-xs': (
 				extend: '%clay-btn-monospaced-xs',
 			),
 		),
+
 		form-control: (
 			extend: '%clay-form-control-sm',
 		),
+
 		form-control-select: (
 			extend: '%clay-select-form-control-sm',
 		),
+
 		form-control-tag-group: (
 			extend: '%clay-form-control-tag-group-sm',
 		),
+
 		input-group: (
 			extend: '%clay-input-group-sm',
 		),
@@ -206,20 +237,25 @@ $cadmin-sidebar-light-navigation-bar: map-deep-merge(
 	(
 		background-color: $cadmin-white,
 		border-color: $cadmin-secondary-l2,
+
 		navbar-nav: (
 			nav-link: (
 				color: $cadmin-navbar-light-color,
+
 				hover: (
 					color: $cadmin-navbar-light-hover-color,
 				),
+
 				active: (
 					color: $cadmin-navbar-light-active-color,
 				),
+
 				disabled: (
 					color: $cadmin-navbar-light-disabled-color,
 				),
 			),
 		),
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -231,31 +267,38 @@ $cadmin-sidebar-light: map-deep-merge(
 	(
 		background-color: $cadmin-white,
 		border-color: $cadmin-gray-300,
-		border-left-width: 0,
+		border-left-width: 0px,
 		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		color: $cadmin-gray-900,
+
 		sidebar-header: (
 			background-color: $cadmin-white,
 			border: 0px solid $cadmin-gray-300,
 		),
+
 		sidebar-footer: (
 			background-color: $cadmin-white,
 			border: 0px solid $cadmin-gray-300,
 		),
+
 		sidenav-start: (
 			box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		),
+
 		sidebar-dt: (
 			color: $cadmin-gray-600,
 		),
+
 		sidebar-dd: (
 			href: (
 				color: $cadmin-gray-900,
 			),
 		),
+
 		sidebar-panel: (
 			background-color: $cadmin-gray-200,
 		),
+
 		panel-unstyled: (
 			header: (
 				link: (
@@ -266,14 +309,17 @@ $cadmin-sidebar-light: map-deep-merge(
 				),
 			),
 		),
+
 		sidebar-list-group: (
 			component-title: (
 				font-size: 16px,
+
 				href: (
 					color: $cadmin-gray-900,
 				),
 			),
 		),
+
 		component-navigation-bar: $cadmin-sidebar-light-navigation-bar,
 	),
 	$cadmin-sidebar-light
@@ -286,6 +332,7 @@ $cadmin-sidebar-dark: map-deep-merge(
 	(
 		background-color: $cadmin-dark,
 		color: $cadmin-white,
+
 		sidebar-header: (
 			component-title: (
 				color: inherit,
@@ -293,38 +340,48 @@ $cadmin-sidebar-dark: map-deep-merge(
 					color: inherit,
 				),
 			),
+
 			component-subtitle: (
 				color: inherit,
+
 				href: (
 					color: inherit,
 				),
 			),
 		),
+
 		close: (
 			color: $cadmin-secondary-l1,
+
 			hover: (
 				color: $cadmin-white,
 			),
 		),
+
 		nav-nested: (
 			nav-link: (
 				border-radius: $cadmin-border-radius,
 				color: $cadmin-secondary-l1,
 				transition: box-shadow 0.15s ease-in-out,
+
 				hover: (
 					color: $cadmin-white,
 				),
+
 				focus: (
 					box-shadow: $cadmin-component-focus-box-shadow,
 					outline: 0,
 				),
+
 				active: (
 					color: $cadmin-white,
 				),
+
 				disabled: (
 					box-shadow: none,
 					color: $cadmin-secondary-l1,
 					opacity: 0.65,
+
 					active: (
 						pointer-events: none,
 					),
@@ -351,11 +408,15 @@ $cadmin-sidebar-palette: () !default;
 $cadmin-sidebar-palette: map-deep-merge(
 	(
 		sidebar-sm: $cadmin-sidebar-sm,
+
 		sidebar-light: $cadmin-sidebar-light,
+
 		sidebar-dark: $cadmin-sidebar-dark,
+
 		sidebar-dark-l2: (
 			background-color: $cadmin-dark-l2,
 			color: $cadmin-white,
+
 			sidebar-header: (
 				component-title: (
 					color: inherit,
@@ -363,38 +424,48 @@ $cadmin-sidebar-palette: map-deep-merge(
 						color: inherit,
 					),
 				),
+
 				component-subtitle: (
 					color: inherit,
+
 					href: (
 						color: inherit,
 					),
 				),
 			),
+
 			close: (
 				color: $cadmin-secondary-l1,
+
 				hover: (
 					color: $cadmin-white,
 				),
 			),
+
 			nav-nested: (
 				nav-link: (
 					border-radius: $cadmin-border-radius,
 					color: $cadmin-secondary-l1,
 					transition: box-shadow 0.15s ease-in-out,
+
 					hover: (
 						color: $cadmin-white,
 					),
+
 					focus: (
 						box-shadow: $cadmin-component-focus-box-shadow,
 						outline: 0,
 					),
+
 					active: (
 						color: $cadmin-white,
 					),
+
 					disabled: (
 						box-shadow: none,
 						color: $cadmin-secondary-l1,
 						opacity: 0.65,
+
 						active: (
 							pointer-events: none,
 						),