@clayui/css 3.160.0 → 3.161.0

package/src/scss/atlas-custom-properties/variables/_panels.scss

@@ -0,0 +1,567 @@
+@if ($enable-atlas-custom-properties) {
+	$panel-bg: var(--panel-background-color, $white);
+	$panel-border-color: var(--panel-border-color, transparent);
+	$panel-border-radius: var(--panel-border-radius, $border-radius);
+	$panel-border-style: var(--panel-border-style, solid);
+
+	$panel-border-bottom-width: var(--panel-border-bottom-width, 1px);
+	$panel-border-left-width: var(--panel-border-left-width, 1px);
+	$panel-border-right-width: var(--panel-border-right-width, 1px);
+	$panel-border-top-width: var(--panel-border-top-width, 1px);
+
+	$panel-border-width: $panel-border-top-width
+		$panel-border-right-width
+		$panel-border-bottom-width
+		$panel-border-left-width;
+
+	$panel-box-shadow: var(--panel-box-shadow, none);
+	$panel-margin-bottom: var(--panel-margin-bottom, $spacer);
+
+	// Panel Header
+
+	$panel-header-border-bottom-width: var(
+		--panel-header-border-bottom-width,
+		0
+	);
+
+	$panel-header-offset-border-radius: var(
+		--panel-header-offset-border-radius,
+		calc(#{$panel-border-radius} - #{$panel-border-top-width})
+	);
+
+	$panel-header-font-size: var(--panel-header-font-size, 14px);
+	$panel-header-line-height: var(
+		--panel-header-line-height,
+		$headings-line-height
+	);
+	$panel-header-padding-x: var(--panel-header-padding-x, 20px);
+	$panel-header-padding-y: var(--panel-header-padding-y, 12px);
+
+	$panel-header-collapse-icon-font-size: var(
+		--panel-header-collapse-icon-font-size,
+		12px
+	);
+
+	$panel-header-collapse-icon-bottom: var(
+		--panel-header-collapse-icon-bottom,
+		auto
+	);
+	$panel-header-collapse-icon-left: var(
+		--panel-header-collapse-icon-left,
+		auto
+	);
+	$panel-header-collapse-icon-right: var(
+		--panel-header-collapse-icon-right,
+		auto
+	);
+	$panel-header-collapse-icon-top: var(
+		--panel-header-collapse-icon-top,
+		clay-collapse-icon-align(
+			$panel-header-padding-y,
+			0,
+			1em,
+			$panel-header-line-height
+		)
+	);
+
+	$panel-header-collapse-icon-padding-left: var(
+		--panel-header-collapse-icon-padding-left,
+		20px
+	);
+	$panel-header-collapse-icon-padding-right: var(
+		--panel-header-collapse-icon-padding-right,
+		45px
+	);
+
+	$panel-header-link-text-decoration: none;
+
+	$panel-header-link-hover-text-decoration: none;
+
+	$panel-header-link: ();
+	$panel-header-link: map-deep-merge(
+		(
+			color: var(--panel-header-link-color, inherit),
+			display: block,
+			text-decoration:
+				var(
+					--panel-header-link-text-decoration,
+					$panel-header-link-text-decoration
+				),
+			transition: box-shadow 0.15s ease-in-out,
+
+			hover: (
+				color: var(--panel-header-link-hover-color, inherit),
+				text-decoration:
+					var(
+						--panel-header-link-hover-text-decoration,
+						$panel-header-link-hover-text-decoration
+					),
+			),
+
+			focus: (
+				box-shadow: $component-focus-box-shadow,
+				outline: 0,
+				z-index: $zindex-panel-header-link-focus,
+			),
+		),
+		$panel-header-link
+	);
+
+	$panel-header-collapsed-link: ();
+	$panel-header-collapsed-link: map-deep-merge(
+		(
+			border-color: transparent,
+			transition: border-color 0.75s ease,
+		),
+		$panel-header-collapsed-link
+	);
+
+	// Panel Body
+	$panel-body-padding-x: var(--panel-body-panel-body-padding-x, 20px);
+	$panel-body-padding-y: var(--panel-body-panel-body-padding-y, 12px);
+
+	// Panel Footer
+
+	$panel-footer-border-top-width: var(
+		--panel-footer-panel-footer-border-top-width,
+		0
+	);
+	$panel-footer-offset-border-radius: var(
+		--panel-footer-offset-border-radius,
+		calc(#{$panel-border-radius} - #{$panel-border-bottom-width})
+	);
+	$panel-footer-padding-x: var(
+		--panel-footer-padding-x,
+		$panel-header-padding-x
+	);
+	$panel-footer-padding-y: var(
+		--panel-footer-padding-y,
+		$panel-header-padding-y
+	);
+
+	// Panel Title
+
+	$panel-title-font-size: var(--panel-title-font-size, 14px);
+	$panel-title-font-weight: var(
+		--panel-title-font-weight,
+		$font-weight-semi-bold
+	);
+	$panel-title-text-transform: var(--panel-title-text-transform, uppercase);
+
+	// Panel Title Small Element
+
+	$panel-title-small-font-size: var(--panel-title-small-font-size, 100%);
+	$panel-title-small-margin-left: var(--panel-title-small-margin-left, 6px);
+
+	$panel: ();
+	$panel: map-deep-merge(
+		(
+			background-color: $panel-bg,
+			border-color: $panel-border-color,
+			border-radius: clay-enable-rounded($panel-border-radius),
+			border-style: $panel-border-style,
+			border-width: $panel-border-width,
+			box-shadow: clay-enable-shadows($panel-box-shadow),
+			margin-bottom: $panel-margin-bottom,
+			word-wrap: break-word,
+
+			collapse-icon-middle: (
+				collapse-icon: (
+					font-size: inherit,
+				),
+			),
+
+			panel-header: (
+				border-bottom:
+					$panel-header-border-bottom-width
+					solid
+					transparent,
+				border-top-left-radius:
+					clay-enable-rounded($panel-header-offset-border-radius),
+				border-top-right-radius:
+					clay-enable-rounded($panel-header-offset-border-radius),
+				display: block,
+				font-size: $panel-header-font-size,
+				line-height: $panel-header-line-height,
+				padding: $panel-header-padding-y $panel-header-padding-x,
+				position: relative,
+				width: 100%,
+
+				collapsed: (
+					border-bottom-left-radius:
+						clay-enable-rounded($panel-header-offset-border-radius),
+					border-bottom-right-radius:
+						clay-enable-rounded($panel-header-offset-border-radius),
+					link: $panel-header-collapsed-link,
+				),
+
+				collapse-icon: (
+					padding-left: $panel-header-collapse-icon-padding-left,
+					padding-right: $panel-header-collapse-icon-padding-right,
+				),
+
+				link: $panel-header-link,
+			),
+
+			panel-body: (
+				padding: $panel-body-padding-y $panel-body-padding-x,
+			),
+
+			panel-footer: (
+				border-bottom-left-radius:
+					clay-enable-rounded($panel-footer-offset-border-radius),
+				border-bottom-right-radius:
+					clay-enable-rounded($panel-footer-offset-border-radius),
+				border-top: $panel-footer-border-top-width solid transparent,
+				padding: $panel-footer-padding-y $panel-footer-padding-x,
+			),
+
+			panel-title: (
+				font-size: $panel-title-font-size,
+				font-weight: $panel-title-font-weight,
+				text-transform: $panel-title-text-transform,
+
+				small: (
+					font-size: $panel-title-small-font-size,
+					margin-left: $panel-title-small-margin-left,
+				),
+			),
+		),
+		$panel
+	);
+
+	// Panel Group
+
+	$panel-group-panel-margin-bottom: var(
+		--panel-group-panel-margin-bottom,
+		calc(#{$panel-border-bottom-width} * -1)
+	);
+
+	$panel-group-panel-unstyled: ();
+	$panel-group-panel-unstyled: map-deep-merge(
+		(
+			margin-bottom:
+				var(--panel-group-panel-unstyled-margin-bottom, 24px),
+		),
+		$panel-group-panel-unstyled
+	);
+
+	// Panel Group Sm
+
+	$panel-group-sm: ();
+	$panel-group-sm: map-deep-merge(
+		(
+			font-size: var(--panel-group-sm-font-size, 0.875rem),
+			panel-header: (
+				padding-bottom:
+					var(--panel-group-sm-panel-header-padding-bottom, 0.5rem),
+				padding-top:
+					var(--panel-group-sm-panel-header-padding-top, 0.5rem),
+			),
+
+			panel-title: (
+				font-size:
+					var(--panel-group-sm-panel-title-font-size, 0.875rem),
+			),
+
+			collapse-icon: (
+				top:
+					var(
+						--panel-group-sm-panel-header-collapse-icon-top,
+						0.6875rem
+					),
+			),
+		),
+		$panel-group-sm
+	);
+
+	$panel-group-sm-panel-unstyled: ();
+	$panel-group-sm-panel-unstyled: map-deep-merge(
+		(
+			margin-bottom:
+				var(--panel-group-sm-panel-unstyled-margin-bottom, 1rem),
+		),
+		$panel-group-sm-panel-unstyled
+	);
+
+	// Panel Group Flush
+
+	$panel-group-flush-body-margin-bottom: var(
+		--panel-group-flush-body-margin-bottom,
+		24px
+	);
+	$panel-group-flush-body-padding: var(--panel-group-flush-body-padding, 0px);
+
+	$panel-group-flush-collapse-icon-left: var(
+		--panel-group-flush-collapse-icon-left,
+		auto
+	);
+	$panel-group-flush-collapse-icon-right: var(
+		--panel-group-flush-collapse-icon-right,
+		0px
+	);
+
+	$panel-group-flush-collapse-icon-padding-left: var(
+		--panel-group-flush-collapse-icon-padding-left,
+		0px
+	);
+	$panel-group-flush-collapse-icon-padding-right: var(
+		--panel-group-flush-collapse-icon-padding-right,
+		24px
+	);
+
+	$panel-group-flush-panel-unstyled: ();
+	$panel-group-flush-panel-unstyled: map-deep-merge(
+		(
+			margin-bottom: 1.5rem,
+
+			panel-body: (
+				margin-bottom: 0rem,
+			),
+		),
+		$panel-group-flush-panel-unstyled
+	);
+
+	// Panel Variants
+
+	$panel-secondary-header-link: ();
+
+	$panel-secondary: ();
+	$panel-secondary: map-deep-merge(
+		(
+			border-color: var(--panel-secondary-border-color, $gray-300),
+			color: var(--panel-secondary-color, $gray-600),
+			panel-header: (
+				border-color:
+					var(--panel-secondary-panel-header-border-color, $gray-300),
+				link: $panel-secondary-header-link,
+			),
+
+			panel-footer: (
+				border-color:
+					var(--panel-secondary-panel-footer-border-color, $gray-300),
+			),
+		),
+		$panel-secondary
+	);
+
+	// Panel Unstyled
+
+	$panel-unstyled-header-link: ();
+	$panel-unstyled-header-link: map-deep-merge(
+		(
+			border-radius: 1px,
+
+			focus: (
+				box-shadow: #{0 0 0 4px $body-bg,
+				0 0 0 6px $primary-l0},
+			),
+		),
+		$panel-unstyled-header-link
+	);
+
+	$panel-unstyled: ();
+	$panel-unstyled: map-deep-merge(
+		(
+			background-color:
+				var(--panel-unstyled-background-color, transparent),
+			border-radius: var(--panel-unstyled-border-radius, 0),
+			border-width: var(--panel-unstyled-border-width, 0),
+			margin-bottom: var(--panel-unstyled-margin-bottom, 24px),
+			panel-header: (
+				border-color:
+					var(--panel-unstyled-panel-header-border-color, $gray-500),
+				border-radius:
+					var(--panel-unstyled-panel-header-border-radius, 0),
+				border-style:
+					var(--panel-unstyled-panel-header-border-style, solid),
+				border-width:
+					var(--panel-unstyled-panel-header-border-width, 0 0 1px 0),
+				padding-left:
+					var(--panel-unstyled-panel-header-padding-left, 0),
+				collapsed: (
+					border-color:
+						var(
+							--panel-unstyled-panel-header-collapsed-border-color,
+							$gray-500
+						),
+				),
+
+				link: $panel-unstyled-header-link,
+			),
+
+			collapse-icon: (
+				right:
+					var(--panel-unstyled-panel-header-collapse-icon-right, 0),
+			),
+
+			panel-body: (
+				padding:
+					var(--panel-unstyled-panel-body-padding, 16px 0 0.1px 0),
+			),
+
+			panel-footer: (
+				padding:
+					var(--panel-unstyled-panel-footer-padding, 16px 0 0.1px 0),
+			),
+		),
+		$panel-unstyled
+	);
+
+	$panel-palette: ();
+	$panel-palette: map-deep-merge(
+		(
+			panel-block: (
+				border-color: $gray-400,
+
+				collapse-icon: (
+					font-size: inherit,
+					top: 1.3125rem,
+				),
+
+				panel-header: (
+					font-size: 1.25rem,
+					line-height: 1.25,
+					padding: 1.15625rem 1.25rem,
+
+					'&.collapse-icon': (
+						padding-right: 3rem,
+					),
+				),
+
+				panel-title: (
+					font-size: inherit,
+					text-transform: none,
+				),
+
+				panel-body: (
+					padding: 0rem 1.25rem 1.25rem,
+				),
+
+				panel-footer: (
+					padding: 0rem 1.25rem 1.25rem,
+				),
+			),
+
+			panel-default: (
+				border-width: 0px,
+
+				panel-header: (
+					border-radius: clay-enable-rounded(0),
+					color: $gray-600,
+					font-size: 0.875rem,
+					line-height: 1.125rem,
+					padding-bottom: 0.40625rem,
+					padding-left: 0rem,
+					padding-right: 0rem,
+					padding-top: 0.40625rem,
+					text-transform: uppercase,
+
+					'&.collapse-icon': (
+						padding-right: 1.75rem,
+					),
+
+					link: (
+						border-bottom: 1px solid $gray-400,
+					),
+				),
+
+				collapse-icon: (
+					font-size: inherit,
+					right: 0rem,
+					top: 0.5rem,
+				),
+
+				collapse-icon-middle: (
+					collapse-icon: (
+						right: 0rem,
+					),
+				),
+
+				panel-body: (
+					padding: 1.25rem 0rem,
+				),
+
+				panel-title: (
+					font-size: inherit,
+				),
+
+				panel-footer: (
+					padding: 1.25rem 0rem,
+				),
+			),
+		),
+		$panel-palette
+	);
+
+	// Panel Sizes
+
+	$panel-sizes: ();
+	$panel-sizes: map-deep-merge(
+		(
+			'.panel-lg.panel-block': (
+				collapse-icon: (
+					top: 1.75rem,
+				),
+
+				panel-header: (
+					font-size: 1.5rem,
+					padding: 1.5rem 1.5rem,
+
+					'&.collapse-icon': (
+						padding-right: calc(1.5rem * 3),
+					),
+				),
+
+				panel-body: (
+					padding: 0rem 1.5rem 1.5rem,
+				),
+
+				panel-footer: (
+					padding: 0rem 1.5rem 1.5rem,
+				),
+			),
+
+			'.panel-sm.panel-block': (
+				collapse-icon: (
+					top: 0.9375rem,
+				),
+
+				panel-header: (
+					font-size: 1rem,
+					padding: 0.8125rem 1rem,
+
+					'&.collapse-icon': (
+						padding-right: calc(1rem * 3),
+					),
+				),
+
+				panel-body: (
+					padding: 0rem 1rem 1rem,
+				),
+
+				panel-footer: (
+					padding: 0rem 1rem 1rem,
+				),
+			),
+
+			'.panel-sm.panel-default': (
+				collapse-icon: (
+					top: 0.375rem,
+				),
+
+				panel-header: (
+					font-size: 0.75rem,
+					line-height: 1,
+					padding-bottom: 0.34375rem,
+					padding-top: 0.34375rem,
+
+					'&.collapse-icon': (
+						padding-right: 1.75rem,
+					),
+				),
+			),
+		),
+		$panel-sizes
+	);
+}