@clayui/css 3.160.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_multi-step-nav.scss

@@ -0,0 +1,354 @@
+$multi-step-nav-margin-bottom: var(
+	--multi-step-nav-margin-bottom,
+	15px
+) !default;
+$multi-step-nav-padding-x: var(--multi-step-nav-padding-x, 15px) !default;
+$multi-step-nav-padding-y: var(--multi-step-nav-padding-y, 0) !default;
+
+$multi-step-icon-bg: var(--multi-step-icon-bg, $gray-200) !default;
+$multi-step-icon-border-color: var(
+	--multi-step-icon-border-color,
+	transparent
+) !default;
+$multi-step-icon-border-radius: var(
+	--multi-step-icon-border-radius,
+	100px
+) !default;
+$multi-step-icon-border-style: var(
+	--multi-step-icon-border-style,
+	solid
+) !default;
+$multi-step-icon-border-width: var(--multi-step-icon-border-width, 0) !default;
+$multi-step-icon-color: var(--multi-step-icon-color, $gray-600) !default;
+$multi-step-icon-cursor: var(--multi-step-icon-cursor, $link-cursor) !default;
+$multi-step-icon-font-size: var(--multi-step-icon-font-size, 14px) !default;
+$multi-step-icon-font-weight: var(
+	--multi-step-icon-font-weight,
+	$font-weight-semi-bold
+) !default;
+$multi-step-icon-padding-bottom: var(
+	--multi-step-icon-padding-bottom,
+	0
+) !default;
+$multi-step-icon-padding-left: var(--multi-step-icon-padding-left, 0) !default;
+$multi-step-icon-padding-right: var(
+	--multi-step-icon-padding-right,
+	0
+) !default;
+$multi-step-icon-padding-top: var(--multi-step-icon-padding-top, 0) !default;
+$multi-step-icon-size: var(--multi-step-icon-size, 32px) !default;
+$multi-step-icon-transition: var(
+	--multi-step-icon-transition,
+	box-shadow 0.15s ease-in-out
+) !default;
+
+$multi-step-icon-hover-bg: var(
+	--multi-step-icon-hover-bg,
+	$multi-step-icon-bg
+) !default;
+$multi-step-icon-hover-color: var(
+	--multi-step-icon-hover-color,
+	$multi-step-icon-color
+) !default;
+$multi-step-icon-hover-text-decoration: var(
+	--multi-step-icon-hover-text-decoration,
+	none
+) !default;
+
+$multi-step-icon-focus-bg: var(
+	--multi-step-icon-focus-bg,
+	transparent
+) !default;
+$multi-step-icon-focus-box-shadow: var(
+	--multi-step-icon-focus-box-shadow,
+	$component-focus-box-shadow
+) !default;
+$multi-step-icon-focus-color: var(
+	--multi-step-icon-focus-color,
+	inherit
+) !default;
+$multi-step-icon-focus-outline: var(
+	--multi-step-icon-focus-outline,
+	0
+) !default;
+$multi-step-icon-focus-text-decoration: var(
+	--multi-step-icon-focus-text-decoration,
+	$multi-step-icon-hover-text-decoration
+) !default;
+
+// See https://issues.liferay.com/browse/LPS-147457.
+
+$data-multi-step-icon-before-content: unquote(
+	"'\\FEFF' attr(data-multi-step-icon)"
+) !default;
+
+$multi-step-divider-bg: var(--multi-step-divider-bg, $gray-200) !default;
+$multi-step-divider-height: var(--multi-step-divider-height, 4px) !default;
+$multi-step-divider-spacer-x: var(--multi-step-divider-spacer-x, 0) !default;
+$multi-step-divider-top: var(
+	--multi-step-divider-top,
+	calc(#{$multi-step-divider-height} * 0.5 + #{$multi-step-icon-size} * 0.5)
+) !default;
+
+$multi-step-indicator-width: var(
+	--multi-step-indicator-width,
+	calc(#{$multi-step-icon-size} + #{$multi-step-divider-spacer-x} * 2)
+) !default;
+
+$multi-step-indicator-label-color: var(
+	--multi-step-indicator-label-color,
+	$gray-600
+) !default;
+$multi-step-indicator-label-font-size: var(
+	--multi-step-indicator-label-font-size,
+	14px
+) !default;
+$multi-step-indicator-label-font-weight: var(
+	--multi-step-indicator-label-font-weight,
+	$font-weight-semi-bold
+) !default;
+$multi-step-indicator-label-max-width: var(
+	--multi-step-indicator-label-max-width,
+	100px
+) !default;
+
+$multi-step-indicator: () !default;
+$multi-step-indicator: map-deep-merge(
+	(
+		position: relative,
+		width: $multi-step-indicator-width,
+
+		multi-step-indicator-label: (
+			color: $multi-step-indicator-label-color,
+			font-size: $multi-step-indicator-label-font-size,
+			font-weight: $multi-step-indicator-label-font-weight,
+			left: 50%,
+			max-width: $multi-step-indicator-label-max-width,
+			overflow: hidden,
+			position: absolute,
+			text-overflow: ellipsis,
+			transform: translateX(-50%),
+			white-space: nowrap,
+		),
+	),
+	$multi-step-indicator
+);
+
+$multi-step-title-color: var(--multi-step-title-color, $gray-600) !default;
+$multi-step-title-font-size: var(--multi-step-title-font-size, 14px) !default;
+$multi-step-title-font-weight: var(
+	--multi-step-title-font-weight,
+	$font-weight-semi-bold
+) !default;
+$multi-step-title-margin-bottom: var(
+	--multi-step-title-margin-bottom,
+	10px
+) !default;
+$multi-step-title-max-width: var(--multi-step-title-max-width, 100px) !default;
+
+$multi-step-title: () !default;
+$multi-step-title: map-deep-merge(
+	(
+		color: $multi-step-title-color,
+		font-size: $multi-step-title-font-size,
+		font-weight: $multi-step-title-font-weight,
+		line-height: normal,
+		margin-bottom: $multi-step-title-margin-bottom,
+		word-wrap: break-word,
+	),
+	$multi-step-title
+);
+
+$multi-step-title-center: () !default;
+$multi-step-title-center: map-deep-merge(
+	(
+		multi-step-title: (
+			margin-left: calc(#{$multi-step-icon-size} * 0.5),
+			max-width: $multi-step-title-max-width,
+			overflow: hidden,
+			position: relative,
+			text-align: center,
+			text-overflow: ellipsis,
+			transform: translateX(-50%),
+			white-space: nowrap,
+			width: auto,
+		),
+	),
+	$multi-step-title-center
+);
+
+$multi-step-item-margin-bottom: var(
+	--multi-step-item-margin-bottom,
+	10px
+) !default;
+$multi-step-item-width: var(--multi-step-item-width, 75px) !default;
+
+$multi-step-item-fixed-width: var(
+	--multi-step-item-fixed-width,
+	150px
+) !default;
+
+$multi-step-nav-center: () !default;
+$multi-step-nav-center: map-deep-merge(
+	(
+		padding: 0,
+		text-align: center,
+
+		multi-step-item: (
+			flex-grow: 1,
+			width: $multi-step-item-width,
+		),
+
+		multi-step-divider: (
+			left: 50%,
+			margin-left: 1rem,
+			width: calc(100% - #{$multi-step-icon-size}),
+		),
+
+		multi-step-indicator: (
+			left: 50%,
+			transform: translateX(-50%),
+		),
+
+		multi-step-title: (
+			margin-left: 12.5%,
+			max-width: 75%,
+		),
+	),
+	$multi-step-nav-center
+);
+
+// data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
+
+$multi-step-item-error: () !default;
+$multi-step-item-error: map-deep-merge(
+	(
+		multi-step-icon: (
+			background-color:
+				var(
+					--multi-step-item-error-multi-step-icon-background-color,
+					$danger
+				),
+			background-image:
+				var(
+					--multi-step-item-error-multi-step-icon-background-image,
+					clay-icon(times, #fff)
+				),
+			color: var(--multi-step-item-error-multi-step-icon-color, $white),
+			text-indent: -100px,
+
+			data-multi-step-icon: (
+				before: (
+					content: none,
+				),
+			),
+
+			lexicon-icon: (
+				display: none,
+			),
+		),
+	),
+	$multi-step-item-error
+);
+
+$multi-step-icon-complete-color: var(
+	--multi-step-icon-complete-color,
+	$white
+) !default;
+
+$multi-step-icon-complete-bg: var(
+	--multi-step-icon-complete-bg,
+	$gray-600
+) !default;
+$multi-step-icon-complete-bg-image: var(
+	--multi-step-icon-complete-bg-image,
+	clay-icon(check, #fff)
+) !default;
+$multi-step-icon-complete-bg-position: var(
+	--multi-step-icon-complete-bg-position,
+	center
+) !default;
+$multi-step-icon-complete-bg-size: var(
+	--multi-step-icon-complete-bg-size,
+	$multi-step-icon-font-size
+) !default;
+
+$multi-step-divider-complete-bg: var(
+	--multi-step-divider-complete-bg,
+	$multi-step-icon-complete-bg
+) !default;
+
+$multi-step-dropdown-indicator-complete-icon: var(
+	--multi-step-dropdown-indicator-complete-icon,
+	clay-icon(check, #272833)
+) !default;
+$multi-step-dropdown-indicator-complete-width: var(
+	--multi-step-dropdown-indicator-complete-width,
+	14px
+) !default;
+
+$multi-step-icon-active-color: var(
+	--multi-step-icon-active-color,
+	$component-active-color
+) !default;
+
+$multi-step-icon-active-bg: var(
+	--multi-step-icon-active-bg,
+	$component-active-bg
+) !default;
+$multi-step-icon-active-bg-image: null !default;
+$multi-step-icon-active-bg-position: null !default;
+$multi-step-icon-active-bg-size: var(
+	--multi-step-icon-active-bg-size,
+	$multi-step-icon-font-size
+) !default;
+
+$multi-step-divider-active-bg: $multi-step-divider-bg !default;
+
+$multi-step-icon-disabled-color: $gray-500 !default;
+
+$multi-step-icon-disabled-bg: var(
+	--multi-step-icon-disabled-bg,
+	$multi-step-icon-bg
+) !default;
+$multi-step-icon-disabled-bg-image: null !default;
+$multi-step-icon-disabled-bg-position: null !default;
+$multi-step-icon-disabled-bg-size: var(
+	--multi-step-icon-disabled-bg-size
+) !default;
+$multi-step-icon-disabled-cursor: var(
+	--multi-step-icon-disabled-cursor,
+	$disabled-cursor
+) !default;
+$multi-step-icon-disabled-opacity: var(
+	--multi-step-icon-disabled-opacity,
+	1
+) !default;
+
+$multi-step-icon-disabled-focus-box-shadow: var(
+	--multi-step-icon-disabled-focus-box-shadow,
+	none
+) !default;
+
+$multi-step-divider-disabled-bg: var(
+	--multi-step-divider-disabled-bg,
+	$multi-step-icon-disabled-bg
+) !default;
+
+$multi-step-title-disabled-color: var(
+	--multi-step-title-disabled-color,
+	$multi-step-icon-disabled-color
+) !default;
+
+$multi-step-indicator-label-disabled-color: var(
+	--multi-step-indicator-label-disabled-color,
+	$multi-step-title-disabled-color
+) !default;
+
+$multi-step-title-disabled: () !default;
+$multi-step-title-disabled: map-deep-merge(
+	(
+		color: $multi-step-title-disabled-color,
+	),
+	$multi-step-title-disabled
+);

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

@@ -0,0 +1,198 @@
+$enable-scaling-navbar: $enable-scaling-components !default;
+
+$navbar-border-radius: var(--navbar-border-radius, 0px) !default;
+$navbar-font-size: var(--navbar-font-size, 14px) !default;
+$navbar-padding-x: var(--navbar-padding-x, $spacer) !default;
+$navbar-padding-y: var(--navbar-padding-y, calc(#{$spacer} * 0.5)) !default;
+
+$navbar-nav-link-padding-x: var(--navbar-nav-link-padding-x, 8px) !default;
+
+$navbar-title-font-size: var(--navbar-title-font-size, 20px) !default;
+$navbar-title-font-weight: var(
+	--navbar-title-font-weight,
+	$font-weight-semi-bold
+) !default;
+$navbar-title-margin-bottom: var(--navbar-title-margin-bottom, 0) !default;
+$navbar-title-text-transform: var(--navbar-title-text-transform, none) !default;
+
+$navbar-text-truncate-spacer-right: var(
+	--navbar-text-truncate-spacer-right,
+	25px
+) !default;
+$navbar-text-truncate-max-width: var(
+	--navbar-text-truncate-max-width,
+	200px
+) !default;
+
+$navbar-text-truncate: () !default;
+$navbar-text-truncate: map-deep-merge(
+	(
+		display: inline-block,
+		max-width: 100%,
+		overflow: hidden,
+		text-overflow: ellipsis,
+		vertical-align: bottom,
+		white-space: nowrap,
+	),
+	$navbar-text-truncate
+);
+
+// Navbar Brand
+
+$navbar-brand-font-size: var(--navbar-brand-font-size, $font-size-lg) !default;
+
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+
+$nav-link-height: var(
+	--nav-link-height,
+	calc(#{$font-size-base} * #{$line-height-base} + #{$nav-link-padding-y} * 2)
+) !default;
+
+$navbar-brand-height: var(
+	--navbar-brand-height,
+	calc(#{$navbar-brand-font-size} * #{$line-height-base})
+) !default;
+
+$navbar-brand-padding-y: var(
+	--navbar-brand-padding-y,
+	calc((#{$nav-link-height} - #{$navbar-brand-height}) * 0.5)
+) !default;
+
+// Navbar Toggler
+
+$navbar-toggler-border-radius: var(
+	--navbar-toggler-border-radius,
+	$border-radius
+) !default;
+$navbar-toggler-cursor: null !default;
+$navbar-toggler-font-size: var(
+	--navbar-toggler-font-size,
+	$font-size-lg
+) !default;
+$navbar-toggler-padding-x: var(--navbar-toggler-padding-x, 12px) !default;
+$navbar-toggler-padding-y: var(--navbar-toggler-padding-y, 4px) !default;
+
+// Navbar Underline
+
+$navbar-underline-active-bg: unquote(
+	'hsl(from #{$component-active-bg} h s calc(l + 22.94))'
+) !default;
+
+$navbar-underline: () !default;
+$navbar-underline: map-deep-merge(
+	(
+		navbar-toggler-link: (
+			after: (
+				background-color: $navbar-underline-active-bg,
+				bottom: calc(#{$navbar-padding-y} * -1),
+				content: '',
+				display: block,
+				height: 0.25rem,
+				left: 0,
+				position: absolute,
+				right: 0,
+				width: auto,
+			),
+		),
+
+		media-breakpoint-up: (
+			md: (
+				navbar-expand-md: (
+					navbar-underline: (
+						navbar-nav: (
+							nav-link: (
+								active-class: (
+									after: (
+										background-color:
+											$navbar-underline-active-bg,
+										bottom: calc(#{$navbar-padding-y} * -1),
+										content: '',
+										display: block,
+										height: 0.25rem,
+										left: 0,
+										position: absolute,
+										right: 0,
+										width: auto,
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	$navbar-underline
+);
+
+// Navbar Dark
+
+$navbar-dark-color: var(--navbar-dark-color, $white) !default;
+
+$navbar-dark-hover-color: var(
+	--navbar-dark-hover-color,
+	$navbar-dark-color
+) !default;
+
+$navbar-dark-active-color: var(
+	--navbar-dark-active-color,
+	$navbar-dark-color
+) !default;
+
+$navbar-dark-disabled-color: var(
+	--navbar-dark-disabled-color,
+	$nav-link-disabled-color
+) !default;
+
+$navbar-dark-brand-color: var(
+	--navbar-dark-brand-color,
+	$navbar-dark-active-color
+) !default;
+
+$navbar-dark-brand-hover-color: var(
+	--navbar-dark-brand-hover-color,
+	$navbar-dark-active-color
+) !default;
+
+$navbar-dark-toggler-border-color: var(
+	--navbar-dark-toggler-border-color,
+	unquote('hsl(from #{$white} h s l / 0.1)')
+) !default;
+
+$navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
+
+// Navbar Light
+
+$navbar-light-color: var(--navbar-light-color, $gray-600) !default;
+
+$navbar-light-hover-color: var(
+	--navbar-light-hover-color,
+	$navbar-light-color
+) !default;
+
+$navbar-light-active-color: var(
+	--navbar-light-active-color,
+	$gray-900
+) !default;
+
+$navbar-light-disabled-color: var(
+	--navbar-light-disabled-color,
+	$nav-link-disabled-color
+) !default;
+
+$navbar-light-brand-color: var(
+	--navbar-light-brand-color,
+	$navbar-light-active-color
+) !default;
+
+$navbar-light-brand-hover-color: var(
+	--navbar-light-brand-hover-color,
+	$navbar-light-active-color
+) !default;
+
+$navbar-light-toggler-border-color: var(
+	--navbar-light-toggler-border-color,
+	unquote('hsl(from #{$black} h s l / 0.1)')
+) !default;
+
+$navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#272833' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;