@clayui/css 3.160.0 → 3.162.0

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

@@ -0,0 +1,554 @@
+$panel-bg: var(--panel-background-color, $white) !default;
+$panel-border-color: var(--panel-border-color, transparent) !default;
+$panel-border-radius: var(--panel-border-radius, $border-radius) !default;
+$panel-border-style: var(--panel-border-style, solid) !default;
+
+$panel-border-bottom-width: var(--panel-border-bottom-width, 1px) !default;
+$panel-border-left-width: var(--panel-border-left-width, 1px) !default;
+$panel-border-right-width: var(--panel-border-right-width, 1px) !default;
+$panel-border-top-width: var(--panel-border-top-width, 1px) !default;
+
+$panel-border-width: $panel-border-top-width $panel-border-right-width
+	$panel-border-bottom-width $panel-border-left-width !default;
+
+$panel-box-shadow: var(--panel-box-shadow, none) !default;
+$panel-margin-bottom: var(--panel-margin-bottom, $spacer) !default;
+
+// Panel Header
+
+$panel-header-border-bottom-width: var(
+	--panel-header-border-bottom-width,
+	0
+) !default;
+
+$panel-header-offset-border-radius: var(
+	--panel-header-offset-border-radius,
+	calc(#{$panel-border-radius} - #{$panel-border-top-width})
+) !default;
+
+$panel-header-font-size: var(--panel-header-font-size, 14px) !default;
+$panel-header-line-height: var(
+	--panel-header-line-height,
+	$headings-line-height
+) !default;
+$panel-header-padding-x: var(--panel-header-padding-x, 20px) !default;
+$panel-header-padding-y: var(--panel-header-padding-y, 12px) !default;
+
+$panel-header-collapse-icon-font-size: var(
+	--panel-header-collapse-icon-font-size,
+	12px
+) !default;
+
+$panel-header-collapse-icon-bottom: var(
+	--panel-header-collapse-icon-bottom,
+	auto
+) !default;
+$panel-header-collapse-icon-left: var(
+	--panel-header-collapse-icon-left,
+	auto
+) !default;
+$panel-header-collapse-icon-right: var(
+	--panel-header-collapse-icon-right,
+	auto
+) !default;
+$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
+	)
+) !default;
+
+$panel-header-collapse-icon-padding-left: var(
+	--panel-header-collapse-icon-padding-left,
+	20px
+) !default;
+$panel-header-collapse-icon-padding-right: var(
+	--panel-header-collapse-icon-padding-right,
+	45px
+) !default;
+
+$panel-header-link-text-decoration: none !default;
+
+$panel-header-link-hover-text-decoration: none !default;
+
+$panel-header-link: () !default;
+$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: () !default;
+$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) !default;
+$panel-body-padding-y: var(--panel-body-panel-body-padding-y, 12px) !default;
+
+// Panel Footer
+
+$panel-footer-border-top-width: var(
+	--panel-footer-panel-footer-border-top-width,
+	0
+) !default;
+$panel-footer-offset-border-radius: var(
+	--panel-footer-offset-border-radius,
+	calc(#{$panel-border-radius} - #{$panel-border-bottom-width})
+) !default;
+$panel-footer-padding-x: var(
+	--panel-footer-padding-x,
+	$panel-header-padding-x
+) !default;
+$panel-footer-padding-y: var(
+	--panel-footer-padding-y,
+	$panel-header-padding-y
+) !default;
+
+// Panel Title
+
+$panel-title-font-size: var(--panel-title-font-size, 14px) !default;
+$panel-title-font-weight: var(
+	--panel-title-font-weight,
+	$font-weight-semi-bold
+) !default;
+$panel-title-text-transform: var(
+	--panel-title-text-transform,
+	uppercase
+) !default;
+
+// Panel Title Small Element
+
+$panel-title-small-font-size: var(--panel-title-small-font-size, 100%) !default;
+$panel-title-small-margin-left: var(
+	--panel-title-small-margin-left,
+	6px
+) !default;
+
+$panel: () !default;
+$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)
+) !default;
+
+$panel-group-panel-unstyled: () !default;
+$panel-group-panel-unstyled: map-deep-merge(
+	(
+		margin-bottom: var(--panel-group-panel-unstyled-margin-bottom, 24px),
+	),
+	$panel-group-panel-unstyled
+) !default;
+
+// Panel Group Sm
+
+$panel-group-sm: () !default;
+$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: () !default;
+$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
+) !default;
+$panel-group-flush-body-padding: var(
+	--panel-group-flush-body-padding,
+	0px
+) !default;
+
+$panel-group-flush-collapse-icon-left: var(
+	--panel-group-flush-collapse-icon-left,
+	auto
+) !default;
+$panel-group-flush-collapse-icon-right: var(
+	--panel-group-flush-collapse-icon-right,
+	0px
+) !default;
+
+$panel-group-flush-collapse-icon-padding-left: var(
+	--panel-group-flush-collapse-icon-padding-left,
+	0px
+) !default;
+$panel-group-flush-collapse-icon-padding-right: var(
+	--panel-group-flush-collapse-icon-padding-right,
+	24px
+) !default;
+
+$panel-group-flush-panel-unstyled: () !default;
+$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: () !default;
+
+$panel-secondary: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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: () !default;
+$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
+);