@clayui/css 3.160.0 → 3.161.0

package/src/scss/atlas-custom-properties/variables/_application-bar.scss

@@ -0,0 +1,62 @@
+@if ($enable-atlas-custom-properties) {
+	$application-bar-size: ();
+	$application-bar-size: map-deep-merge(
+		(
+			title-font-size: 1.125rem,
+		),
+		$application-bar-size
+	);
+
+	$application-bar-base: ();
+	$application-bar-base: map-deep-merge(
+		(
+			navbar-nav: (
+				nav-link: (
+					border-radius: $border-radius,
+					outline: 0,
+					transition: box-shadow 0.15s ease-in-out,
+
+					focus: (
+						box-shadow: $component-focus-box-shadow,
+					),
+
+					disabled: (
+						box-shadow: none,
+					),
+				),
+			),
+		),
+		$application-bar-base
+	);
+
+	$application-bar-dark: ();
+	$application-bar-dark: map-deep-merge(
+		(
+			background-color: $dark-l1,
+
+			navbar-nav: (
+				nav-link: (
+					font-weight: $font-weight-semi-bold,
+
+					hover: (
+						background-color: rgba(255, 255, 255, 0.03),
+					),
+
+					focus: (
+						background-color: rgba(255, 255, 255, 0.03),
+					),
+
+					active: (
+						background-color: rgba(255, 255, 255, 0.06),
+					),
+
+					disabled: (
+						background-color: transparent,
+						opacity: 0.5,
+					),
+				),
+			),
+		),
+		$application-bar-dark
+	);
+}

package/src/scss/atlas-custom-properties/variables/_aspect-ratio.scss

@@ -0,0 +1,28 @@
+@if ($enable-atlas-custom-properties) {
+	$aspect-ratio-sizes: ();
+	$aspect-ratio-sizes: map-deep-merge(
+		(
+			aspect-ratio-3-to-2: (
+				height: 2,
+				width: 3,
+			),
+			aspect-ratio-4-to-3: (
+				height: 3,
+				width: 4,
+			),
+			aspect-ratio-8-to-3: (
+				height: 3,
+				width: 8,
+			),
+			aspect-ratio-8-to-5: (
+				height: 5,
+				width: 8,
+			),
+			aspect-ratio-16-to-9: (
+				height: 9,
+				width: 16,
+			),
+		),
+		$aspect-ratio-sizes
+	);
+}

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

@@ -0,0 +1,352 @@
+@if ($enable-atlas-custom-properties) {
+	// .badge
+
+	$badge-border-color: var(--badge-border-color, transparent);
+	$badge-border-radius: var(--badge-border-radius, $rounded-pill);
+	$badge-border-style: solid;
+	$badge-border-width: var(--badge-border-width, 1px);
+	$badge-font-size: var(--badge-font-size, 0.625rem);
+	$badge-font-weight: var(--badge-font-weight, $font-weight-semi-bold);
+	$badge-line-height: var(--badge-line-height, 1.1);
+	$badge-padding-x: var(--badge-padding-x, 0.25rem);
+	$badge-padding-y: var(--badge-padding-y, 0.09375rem);
+	$badge-transition: $component-transition;
+
+	$badge-spacer-x: var(--badge-spacer-x, 0.25rem);
+	$badge-spacer-y: var(--badge-spacer-y, 0.125rem);
+
+	$badge-focus-width: $input-btn-focus-width;
+
+	// .badge a
+
+	$badge-link-color: var(--badge-link-color, $white);
+	$badge-link-text-decoration: var(--badge-link-text-decoration, underline);
+
+	$badge-link-hover-color: var(--badge-link-hover-color, $white);
+	$badge-link-hover-text-decoration: var(
+		--badge-link-hover-text-decoration,
+		none
+	);
+
+	$badge: ();
+	$badge: map-deep-merge(
+		(
+			border-color: $badge-border-color,
+			border-radius: clay-enable-rounded($badge-border-radius),
+			border-style: $badge-border-style,
+			border-width: $badge-border-width,
+			display: inline-flex,
+			font-size: $badge-font-size,
+			font-weight: $badge-font-weight,
+			line-height: $badge-line-height,
+			margin-bottom: $badge-spacer-y,
+			margin-right: $badge-spacer-x,
+			margin-top: $badge-spacer-y,
+			max-width: 100%,
+			padding-bottom: $badge-padding-y,
+			padding-left: $badge-padding-x,
+			padding-right: $badge-padding-x,
+			padding-top: $badge-padding-y,
+			text-align: center,
+			transition: clay-enable-transitions($badge-transition),
+			white-space: inherit,
+			word-wrap: break-word,
+
+			empty: (
+				display: none,
+			),
+
+			href: (
+				hover: (
+					text-decoration: none,
+				),
+
+				focus: (
+					box-shadow: $component-focus-box-shadow,
+					outline: 0,
+				),
+			),
+
+			link: (
+				color: $badge-link-color,
+				text-decoration: $badge-link-text-decoration,
+
+				hover: (
+					color: $badge-link-hover-color,
+					text-decoration: $badge-link-hover-text-decoration,
+				),
+
+				focus: (
+					color: $badge-link-hover-color,
+					text-decoration: $badge-link-hover-text-decoration,
+				),
+			),
+
+			c-inner: (
+				margin:
+					calc(#{$badge-padding-y} * -1)
+					calc(#{$badge-padding-x} * -1),
+				max-width: none,
+			),
+		),
+		$badge
+	);
+
+	// .badge-item .lexicon-icon
+
+	$badge-lexicon-icon-height: var(--badge-lexicon-icon-height, 0.875em);
+	$badge-lexicon-icon-margin-top: var(--badge-lexicon-icon-margin-top, 0px);
+	$badge-lexicon-icon-width: var(--badge-lexicon-icon-width, 0.875em);
+
+	// .badge-item-expand
+
+	$badge-item-expand-min-width: 6px;
+
+	// .badge-item-before, .badge-item-after
+
+	$badge-item-spacer-x: var(--badge-item-spacer-x, 0.85714em);
+
+	// .badge-item .close
+
+	$badge-close: ();
+	$badge-close: map-deep-merge(
+		(
+			color: inherit,
+			opacity: 1,
+			border-radius: 1px,
+			display: inline-flex,
+			font-size: inherit,
+			height: auto,
+			width: auto,
+
+			hover: (
+				color: inherit,
+				opacity: 1,
+			),
+
+			focus: (
+				opacity: 1,
+			),
+		),
+		$badge-close
+	);
+
+	// .badge-pill
+
+	$badge-pill-border-radius: 10rem;
+	$badge-pill-padding-x: 0.6em;
+
+	$badge-pill: ();
+	$badge-pill: map-deep-merge(
+		(
+			border-radius: clay-enable-rounded($badge-pill-border-radius),
+			padding-left: $badge-pill-padding-x,
+			padding-right: $badge-pill-padding-x,
+		),
+		$badge-pill
+	);
+
+	// .badge-primary
+
+	$badge-primary: ();
+	$badge-primary: map-deep-merge(
+		(
+			background-color: var(--badge-primary-background-color, $primary),
+			border-color: var(--badge-primary-border-color, transparent),
+			color: var(--badge-primary-color, $white),
+			href: (
+				hover: (
+					background-color:
+						var(
+							--badge-primary-hover-background-color,
+							$primary-d1
+						),
+					border-color:
+						var(--badge-primary-hover-border-color, transparent),
+					color: var(--badge-primary-hover-color, $white),
+				),
+
+				focus: (),
+			),
+
+			link: (),
+		),
+		$badge-primary
+	);
+
+	// .badge-secondary
+
+	$badge-secondary: ();
+	$badge-secondary: map-deep-merge(
+		(
+			background-color:
+				var(--badge-secondary-background-color, $secondary-l3),
+			border-color: var(--badge-secondary-border-color, transparent),
+			color: var(--badge-secondary-color, $gray-900),
+			href: (
+				hover: (
+					background-color:
+						var(
+							--badge-secondary-hover-background-color,
+							$secondary-l2
+						),
+					border-color:
+						var(--badge-secondary-hover-border-color, transparent),
+					color: var(--badge-secondary-hover-color, $gray-900),
+				),
+
+				focus: (),
+			),
+
+			link: (),
+		),
+		$badge-secondary
+	);
+
+	// .badge-success
+
+	$badge-success: ();
+	$badge-success: map-deep-merge(
+		(
+			background-color: var(--badge-success-background-color, $success),
+			border-color: var(--badge-success-border-color, transparent),
+			color: var(--badge-success-color, $white),
+			href: (
+				hover: (
+					background-color:
+						var(
+							--badge-success-hover-background-color,
+							$success-d1
+						),
+					border-color:
+						var(--badge-success-hover-border-color, transparent),
+					color: var(--badge-success-hover-color, $white),
+				),
+
+				focus: (),
+			),
+
+			link: (),
+		),
+		$badge-success
+	);
+
+	// .badge-info
+
+	$badge-info: ();
+	$badge-info: map-deep-merge(
+		(
+			background-color: var(--badge-info-background-color, $info),
+			border-color: var(--badge-info-border-color, transparent),
+			color: var(--badge-info-color, $white),
+			href: (
+				hover: (
+					background-color:
+						var(--badge-info-hover-background-color, $info-d1),
+					border-color:
+						var(--badge-info-hover-border-color, transparent),
+					color: var(--badge-info-hover-color, $white),
+				),
+
+				focus: (),
+			),
+
+			link: (),
+		),
+		$badge-info
+	);
+
+	// .badge-warning
+
+	$badge-warning: ();
+	$badge-warning: map-deep-merge(
+		(
+			background-color: var(--badge-warning-background-color, $warning),
+			border-color: var(--badge-warning-border-color, transparent),
+			color: var(--badge-warning-color, $white),
+			href: (
+				hover: (
+					background-color:
+						var(
+							--badge-warning-hover-background-color,
+							$warning-d1
+						),
+					border-color:
+						var(--badge-warning-hover-border-color, transparent),
+					color: var(--badge-warning-hover-color, $white),
+				),
+
+				focus: (),
+			),
+
+			link: (),
+		),
+		$badge-warning
+	);
+
+	// .badge-danger
+
+	$badge-danger: ();
+	$badge-danger: map-deep-merge(
+		(
+			background-color: var(--badge-danger-background-color, $danger),
+			border-color: var(--badge-danger-border-color, transparent),
+			color: var(--badge-danger-color, $white),
+			href: (
+				hover: (
+					background-color:
+						var(--badge-danger-hover-background-color, $danger-d1),
+					border-color:
+						var(--badge-danger-hover-border-color, transparent),
+					color: var(--badge-danger-hover-color, $white),
+				),
+
+				focus: (),
+			),
+
+			link: (),
+		),
+		$badge-danger
+	);
+
+	$badge-palette: ();
+	$badge-palette: map-deep-merge(
+		(
+			primary: $badge-primary,
+
+			secondary: $badge-secondary,
+
+			success: $badge-success,
+
+			info: $badge-info,
+
+			warning: $badge-warning,
+
+			danger: $badge-danger,
+
+			light: (),
+			dark: (),
+			'.badge-translucent.badge-primary': (),
+			'.badge-translucent.badge-info, .badge-beta': (),
+			'.badge-translucent.badge-success': (),
+			'.badge-translucent.badge-warning': (),
+			'.badge-translucent.badge-danger': (),
+			'%clay-dark-badge-translucent-primary': (),
+			'.clay-dark .badge-translucent.badge-primary': (),
+			'.clay-dark.badge-translucent.badge-primary': (),
+			'%clay-dark-badge-translucent-info': (),
+			'.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (),
+			'.clay-dark.badge-translucent.badge-info': (),
+			'%clay-dark-badge-translucent-success': (),
+			'.clay-dark .badge-translucent.badge-success': (),
+			'.clay-dark.badge-translucent.badge-success': (),
+			'%clay-dark-badge-translucent-warning': (),
+			'.clay-dark .badge-translucent.badge-warning': (),
+			'.clay-dark.badge-translucent.badge-warning': (),
+			'%clay-dark-badge-translucent-danger': (),
+			'.clay-dark .badge-translucent.badge-danger': (),
+			'.clay-dark.badge-translucent.badge-danger': (),
+		),
+		$badge-palette
+	);
+}

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

@@ -0,0 +1,205 @@
+@if ($enable-atlas-custom-properties) {
+	// .breadcrumb
+
+	$breadcrumb-bg: transparent;
+	$breadcrumb-border-radius: clay-enable-rounded($border-radius);
+	$breadcrumb-font-size: 0.875rem;
+	$breadcrumb-font-weight: $font-weight-normal;
+	$breadcrumb-margin-bottom: 0;
+	$breadcrumb-padding-x: 0.125rem;
+	$breadcrumb-padding-y: 0.59375rem;
+	$breadcrumb-text-transform: none;
+
+	$breadcrumb-link-color: $gray-600;
+	$breadcrumb-link-text-decoration: $link-decoration;
+
+	$breadcrumb-link-hover-color: $breadcrumb-link-color;
+	$breadcrumb-link-hover-text-decoration: $link-hover-decoration;
+
+	$breadcrumb: ();
+	$breadcrumb: map-merge(
+		(
+			background-color:
+				var(--breadcrumb-background-color, $breadcrumb-bg),
+			border-radius:
+				var(--breadcrumb-border-radius, $breadcrumb-border-radius),
+			display: flex,
+			flex-wrap: wrap,
+			font-size: var(--breadcrumb-font-size, $breadcrumb-font-size),
+			font-weight: var(--breadcrumb-font-weight, $breadcrumb-font-weight),
+			list-style: none,
+			margin-bottom:
+				var(--breadcrumb-margin-bottom, $breadcrumb-margin-bottom),
+			padding:
+				var(--breadcrumb-padding-y, $breadcrumb-padding-y)
+				var(--breadcrumb-padding-x, $breadcrumb-padding-x),
+		),
+		$breadcrumb
+	);
+
+	// .breadcrumb-item + .breadcrumb-item::before
+
+	$breadcrumb-divider: quote('/');
+
+	$breadcrumb-divider-color: $breadcrumb-link-color;
+	$breadcrumb-divider-font-family: null;
+	$breadcrumb-divider-font-weight: null;
+
+	$breadcrumb-divider-svg-icon: clay-icon(angle-right, #6b6c7e);
+	$breadcrumb-divider-svg-icon-height: 0.6em;
+	$breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height;
+
+	// Breadcrumb Item
+
+	$breadcrumb-active-color: $gray-900;
+	$breadcrumb-active-font-weight: $font-weight-semi-bold;
+
+	$breadcrumb-item: ();
+	$breadcrumb-item: map-merge(
+		(
+			font-size: var(--breadcrumb-font-size, $breadcrumb-font-size),
+			font-weight: var(--breadcrumb-font-weight, $breadcrumb-font-weight),
+			margin-right: 0.5em,
+			position: relative,
+
+			active: (
+				color: var(--breadcrumb-active-color, $breadcrumb-active-color),
+				font-weight:
+					var(
+						--breadcrumb-active-font-weight,
+						$breadcrumb-active-font-weight
+					),
+			),
+
+			breadcrumb-item: (
+				padding-left: 1em,
+
+				before: (
+					color:
+						var(
+							--breadcrumb-divider-color,
+							$breadcrumb-divider-color
+						),
+					display: block,
+					float: left,
+					background-image:
+						var(
+							--breadcrumb-divider-svg-icon,
+							$breadcrumb-divider-svg-icon
+						),
+					background-repeat: no-repeat,
+					background-size: 100%,
+					content: '',
+					height:
+						var(
+							--breadcrumb-divider-svg-icon-height,
+							$breadcrumb-divider-svg-icon-height
+						),
+					left: 0,
+					margin-top:
+						calc(#{$breadcrumb-divider-svg-icon-height} / -2),
+					padding: 0,
+					position: absolute,
+					top: 50%,
+					width:
+						var(
+							--breadcrumb-divider-svg-icon-width,
+							$breadcrumb-divider-svg-icon-width
+						),
+				),
+			),
+
+			dropdown-toggle: (
+				text-decoration: none,
+
+				hover: (
+					text-decoration: none,
+				),
+
+				focus: (
+					text-decoration: none,
+				),
+			),
+		),
+		$breadcrumb-item
+	);
+
+	// Breadcrumb Text Truncate
+
+	$breadcrumb-text-truncate-icon-spacer-x: 0.875rem;
+	$breadcrumb-text-truncate-max-width: 18.75rem -
+		$breadcrumb-text-truncate-icon-spacer-x;
+	$breadcrumb-text-truncate-max-width-mobile: 9.375rem -
+		$breadcrumb-text-truncate-icon-spacer-x;
+
+	$breadcrumb-text-truncate: ();
+	$breadcrumb-text-truncate: map-merge(
+		(
+			display: inline-block,
+			max-width: $breadcrumb-text-truncate-max-width,
+			overflow: hidden,
+			text-decoration: inherit,
+			text-overflow: ellipsis,
+			vertical-align: bottom,
+			white-space: nowrap,
+		),
+		$breadcrumb-text-truncate
+	);
+
+	// Breadcrumb Link
+
+	$breadcrumb-link: ();
+	$breadcrumb-link: map-deep-merge(
+		(
+			border-radius: 1px,
+			color: var(--breadcrumb-link-color, $breadcrumb-link-color),
+			display: block,
+			text-decoration:
+				var(
+					--breadcrumb-link-text-decoration,
+					$breadcrumb-link-text-decoration
+				),
+			text-transform:
+				var(
+					--breadcrumb-link-text-transform,
+					$breadcrumb-text-transform
+				),
+			transition: box-shadow 0.15s ease-in-out,
+
+			hover: (
+				color:
+					var(
+						--breadcrumb-link-hover-color,
+						$breadcrumb-link-hover-color
+					),
+				text-decoration:
+					var(
+						--breadcrumb-link-hover-text-decoration,
+						$breadcrumb-link-hover-text-decoration
+					),
+			),
+
+			focus: (),
+		),
+		$breadcrumb-link
+	);
+
+	// Breadcrumb Item Expand
+
+	$breadcrumb-toggle: ();
+	$breadcrumb-toggle: map-merge(
+		(
+			color: $breadcrumb-link-color,
+		),
+		$breadcrumb-toggle
+	);
+
+	$breadcrumb-bar: ();
+	$breadcrumb-bar: map-deep-merge(
+		(
+			align-items: center,
+			display: flex,
+		),
+		$breadcrumb-bar
+	);
+}