@volverjs/style 0.1.9-beta.6 → 0.1.9-beta.8

package/src/settings/components/_vv-alert.scss

@@ -1,22 +1,38 @@
 $vv-alert: (
-	display: flex,
-	min-width: 0,
-	overflow: hidden,
-	align-items: center,
-	padding: var(--spacing-sm) var(--spacing-md),
+	--alert-pie-animation-duration: 3s,
 	background-color: var(--color-surface-2),
+	box-shadow: var(--shadow-lg),
 	border-color: var(--color-gray-lighten-4),
-	border-width: var(--border),
-	border-style: solid,
 	border-radius: var(--rounded),
-	position: relative,
+	border-style: solid,
+	border-width: var(--border),
+	display: flex,
+	flex-wrap: wrap,
+	align-items: center,
+	gap: var(--spacing-sm),
+	min-width: 0,
+	overflow: hidden,
+	font-size: var(--text-sm),
+	padding: var(--spacing-sm),
 	element: (
-		icon: (
-			_alias: '> :where(svg, [data-icon])',
-			position: absolute,
-			left: var(--spacing-md),
-			inline-size: 1.2em,
-			block-size: 1.2em,
+		header: (
+			display: flex,
+			align-items: center,
+			gap: var(--spacing-sm),
+			line-height: var(--leading-none),
+			color: var(--color-word),
+		),
+		title: (
+			font-weight: var(--font-bold),
+		),
+		content: (
+			line-height: var(--leading-normal),
+			color: var(--color-word-1),
+			text-overflow: ellipsis,
+			overflow: hidden,
+		),
+		footer: (
+			display: flex,
 		),
 		close: (
 			position: absolute,
@@ -28,41 +44,63 @@ $vv-alert: (
 			background-position: center,
 			background-size: 100% auto,
 			background-repeat: no-repeat,
+			align-self: center,
 		),
-		title: (
-			display: flex,
-			margin-right: 1ch,
-			line-height: var(--leading-normal),
-			font-weight: var(--font-bold),
-			color: var(--color-word),
+		icon: (
+			flex-shrink: 0,
 		),
-		content: (
-			line-height: var(--leading-normal),
-			color: var(--color-word-1),
-			text-overflow: ellipsis,
-			white-space: nowrap,
+		pie: (
+			position: absolute,
+			display: block,
+			right: var(--spacing-10),
+			width: 1.1em,
+			height: 1.1em,
+			background-color: var(--color-white),
+			border: 1px solid var(--color-white),
+			border-radius: 50%,
 			overflow: hidden,
+			opacity: var(--opacity-80),
+			cursor: pointer,
+			pseudo: (
+				before: (
+					position: absolute,
+					top: 0,
+					width: 50%,
+					height: 100%,
+					transform-origin: 100% 50%,
+					background-color: var(--color-gray),
+					border-radius: 100% 0 0 100% / 50% 0 0 50%,
+					will-change: transform,
+					[animation]: spin var(--alert-pie-animation-duration) linear,
+				),
+				after: (
+					position: absolute,
+					top: 0,
+					width: 50%,
+					height: 100%,
+					background-color: var(--color-white),
+					will-change: opacity,
+					border-radius: 100% 0 0 100% / 50% 0 0 50%,
+					[animation]: pie-masks var(--alert-pie-animation-duration)
+						steps(1, end),
+					opacity: var(--opacity-0),
+				),
+			),
 		),
-		separator: (
-			_alias: '> hr',
-			height: var(--border),
-			background-color: var(--color-alpha-2),
-			margin-block: var(--spacing-sm),
+		pie-mask: (
+			position: absolute,
+			top: 0,
+			width: 50%,
+			height: 100%,
+			left: 50%,
+			background-color: var(--color-gray),
+			will-change: opacity,
+			[animation]: pie-masks var(--alert-pie-animation-duration)
+				steps(1, end) reverse,
+			z-index: 1,
 		),
 	),
 	modifier: (
-		fixed: (
-			position: fixed,
-			z-index: var(--z-notification-alert),
-		),
-		top: (
-			inset-inline: var(--spacing-lg),
-			inset-block: var(--spacing-lg) auto,
-		),
-		bottom: (
-			inset-inline: var(--spacing-lg),
-			inset-block: auto var(--spacing-lg),
-		),
 		success: (
 			border-color: var(--color-success-lighten-5),
 			background-color: var(--color-surface-success),
@@ -70,7 +108,7 @@ $vv-alert: (
 				icon: (
 					color: var(--color-success),
 				),
-				title: (
+				header: (
 					color: var(--color-success),
 				),
 			),
@@ -82,31 +120,31 @@ $vv-alert: (
 				icon: (
 					color: var(--color-danger),
 				),
-				title: (
+				header: (
 					color: var(--color-danger),
 				),
 			),
 		),
 		warning: (
-			border-color: var(--color-warning-lighten-5),
+			border-color: var(--color-warning-lighten-1),
 			background-color: var(--color-surface-warning),
 			element: (
 				icon: (
 					color: var(--color-warning-darken-2),
 				),
-				title: (
+				header: (
 					color: var(--color-warning-darken-2),
 				),
 			),
 		),
 		info: (
-			border-color: var(--color-info-lighten-5),
+			border-color: var(--color-info-lighten-1),
 			background-color: var(--color-surface-info),
 			element: (
 				icon: (
 					color: var(--color-info-darken-2),
 				),
-				title: (
+				header: (
 					color: var(--color-info-darken-2),
 				),
 			),
@@ -118,7 +156,7 @@ $vv-alert: (
 				icon: (
 					color: var(--color-accent),
 				),
-				title: (
+				header: (
 					color: var(--color-accent),
 				),
 			),
@@ -130,32 +168,190 @@ $vv-alert: (
 				icon: (
 					color: var(--color-brand),
 				),
-				title: (
+				header: (
 					color: var(--color-brand),
 				),
 			),
 		),
+		dismissable: (
+			position: relative,
+			padding-right: calc(var(--spacing-md) * 2 + 1em),
+		),
+		notification: (
+			padding: var(--spacing-0),
+			width: clamp(15vw, 20rem, 80vw),
+			border-color: var(--color-gray),
+			flex-direction: column,
+			align-items: none,
+			gap: var(--spacing-0),
+			element: (
+				header: (
+					padding: var(--spacing-sm),
+					background-color: var(--color-gray),
+					color: var(--color-white),
+				),
+				title: (
+					font-weight: var(--font-normal),
+					margin-right: auto,
+				),
+				icon: (
+					color: var(--color-white),
+				),
+				content: (
+					padding: var(--spacing-sm),
+					font-size: var(--text-xs),
+				),
+				footer: (
+					padding: 0 var(--spacing-sm) var(--spacing-sm)
+						var(--spacing-sm),
+				),
+				close: (
+					background-color: var(--color-surface-2),
+					border-radius: var(--rounded),
+					background-size: 70% auto,
+					inline-size: 1.1em,
+					block-size: 1.1em,
+				),
+			),
+			modifier: (
+				dismissable: (
+					padding-right: 0,
+					element: (
+						header: (
+							position: relative,
+							padding-right: calc(var(--spacing-md) * 2 + 1em),
+						),
+					),
+				),
+				success: (
+					border-color: var(--color-success),
+					element: (
+						header: (
+							background-color: var(--color-success),
+						),
+					),
+				),
+				danger: (
+					border-color: var(--color-danger),
+					element: (
+						header: (
+							background-color: var(--color-danger),
+						),
+					),
+				),
+				warning: (
+					border-color: var(--color-warning),
+					element: (
+						header: (
+							background-color: var(--color-warning),
+						),
+					),
+				),
+				info: (
+					border-color: var(--color-info),
+					element: (
+						header: (
+							background-color: var(--color-info),
+						),
+					),
+				),
+				accent: (
+					border-color: var(--color-accent),
+					element: (
+						header: (
+							background-color: var(--color-accent),
+						),
+					),
+				),
+				brand: (
+					border-color: var(--color-brand),
+					element: (
+						header: (
+							background-color: var(--color-brand),
+						),
+					),
+				),
+			),
+		),
 		callout: (
-			display: block,
+			box-shadow: none,
 			border-radius: var(--rounded-none),
 			border-width: 0 0 0 var(--spacing-4),
+			flex-direction: column,
+			align-items: none,
 			element: (
 				title: (
-					margin-bottom: var(--spacing-sm),
-					margin-right: 0,
 					text-transform: uppercase,
 				),
 				content: (
 					line-height: var(--leading-normal),
-					white-space: wrap,
 				),
 			),
 		),
-		icon: (
-			padding-left: calc(var(--spacing-md) * 2 + 1em),
+	),
+	transition: (
+		fade-inline-end: (
+			active: (
+				transition: var(--transition-transform),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateX(100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateX(100%),
+			),
 		),
-		close: (
-			padding-right: calc(var(--spacing-md) * 2 + 1em),
+		fade-inline-start: (
+			active: (
+				transition: var(--transition-transform),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateX(-100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateX(-100%),
+			),
+		),
+		fade-block-top: (
+			active: (
+				transition: var(--transition-transform),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateY(-100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateY(-100%),
+			),
+		),
+		fade-block-bottom: (
+			active: (
+				transition: var(--transition-transform),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+				transform: translateY(100%),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+				transform: translateY(100%),
+			),
+		),
+		fade: (
+			active: (
+				transition: var(--transition-opacity),
+			),
+			enter-from: (
+				opacity: var(--opacity-0),
+			),
+			leave-to: (
+				opacity: var(--opacity-0),
+			),
 		),
 	),
 ) !default;

package/src/settings/components/_vv-dropdown-optgroup.scss

@@ -9,6 +9,5 @@ $vv-dropdown-optgroup: (
 	text-transform: uppercase,
 	font-size: var(--text-xs),
 	font-weight: var(--font-bold),
-	colot: var(--color-word-3),
 	background-color: var(--color-surface-2),
 );

package/src/settings/components/_vv-dropdown-option.scss

@@ -3,9 +3,8 @@ $vv-dropdown-option: (
 	min-width: 0,
 	overflow: hidden,
 	gap: var(--spacing-sm),
-	align-items: center,
+	align-items: flex-end,
 	padding: var(--spacing-sm),
-	white-space: nowrap,
 	state: (
 		disabled: (
 			opacity: var(--opacity-50),
@@ -60,5 +59,10 @@ $vv-dropdown-option: (
 			white-space: nowrap,
 			overflow: hidden,
 		),
+		label: (
+			text-overflow: ellipsis,
+			white-space: nowrap,
+			overflow: hidden,
+		),
 	),
 ) !default;

package/src/settings/components/_vv-input-text.scss

@@ -78,10 +78,10 @@ $vv-input-text: (
 				var(--input-spacing-right),
 			min-width: 0,
 			min-height: var(--input-min-height),
+			text-overflow: var(--input-text-overflow),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
-					text-overflow: ellipsis,
 				),
 				calendar-picker-indicator: (
 					position: absolute,
@@ -206,7 +206,6 @@ $vv-input-text: (
 			white-space: var(--input-hint-white-space),
 			text-overflow: var(--input-hint-text-overflow),
 			overflow: var(--input-hint-overflow),
-			max-width: var(--input-hint-max-width),
 		),
 		limit: (
 			[padding-right]: var(--input-spacing-right),
@@ -290,6 +289,7 @@ $vv-input-text: (
 			),
 		),
 		floating: (
+			position: relative,
 			[margin-left]: var(--input-spacing-left),
 			[margin-right]: var(--input-spacing-right),
 			element: (

package/src/settings/components/_vv-radio.scss

@@ -39,12 +39,14 @@ $vv-radio: (
 	element: (
 		input: (
 			_alias: "> input[type='radio']",
-			border: var(--spacing-2) solid var(--input-color),
+			border-width: var(--spacing-2),
+			border-style: solid,
+			border-color: var(--input-color),
 			min-width: var(--spacing-20),
 			height: var(--spacing-20),
 			border-radius: 50%,
 			margin: 0 var(--input-label-gap) 0 0,
-			background: transparent,
+			background-color: transparent,
 			cursor: pointer,
 			position: relative,
 			pseudo: (
@@ -52,7 +54,7 @@ $vv-radio: (
 					position: absolute,
 					width: 70%,
 					height: 70%,
-					background: var(--input-color),
+					background-color: var(--input-color),
 					inset: 50% 50%,
 					border-radius: 50%,
 					transform: translate(-50%, -50%) scale(0),

package/src/settings/components/_vv-select.scss

@@ -91,6 +91,8 @@ $vv-select: (
 			background-size: 1em,
 			min-height: var(--input-min-height),
 			gap: 0.5ch,
+			text-overflow: var(--input-text-overflow),
+			white-space: nowrap,
 			state: (
 				disabled: (
 					cursor: not-allowed,
@@ -138,7 +140,6 @@ $vv-select: (
 			white-space: var(--input-hint-white-space),
 			text-overflow: var(--input-hint-text-overflow),
 			overflow: var(--input-hint-overflow),
-			max-width: var(--input-hint-max-width),
 		),
 	),
 	modifier: (
@@ -234,6 +235,7 @@ $vv-select: (
 			),
 		),
 		floating: (
+			position: relative,
 			[margin-left]: var(--input-spacing-left),
 			[margin-right]: var(--input-spacing-right),
 			element: (

package/src/settings/components/_vv-table.scss

@@ -8,6 +8,11 @@ $vv-table: (
 			_alias: 'caption',
 			caption-side: bottom,
 			[padding]: var(--table-cell-padding),
+			state: (
+				empty: (
+					display: none,
+				),
+			),
 		),
 		tr: (
 			_alias: 'tr',

package/src/settings/components/_vv-textarea.scss

@@ -80,10 +80,10 @@ $vv-textarea: (
 			[padding]: var(--input-spacing-top) var(--input-spacing-right)
 				var(--input-spacing-bottom) var(--input-spacing-left),
 			overflow: auto,
+			text-overflow: var(--input-text-overflow),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
-					text-overflow: ellipsis,
 				),
 			),
 			state: (
@@ -138,7 +138,6 @@ $vv-textarea: (
 			white-space: var(--input-hint-white-space),
 			text-overflow: var(--input-hint-text-overflow),
 			overflow: var(--input-hint-overflow),
-			max-width: var(--input-hint-max-width),
 		),
 	),
 	modifier: (
@@ -210,6 +209,7 @@ $vv-textarea: (
 			),
 		),
 		floating: (
+			position: relative,
 			[margin-left]: var(--input-spacing-left),
 			[margin-right]: var(--input-spacing-right),
 			element: (

package/src/tools/_mixins.scss

@@ -230,7 +230,8 @@
 					$block: $block,
 					$modifier: $modifier + $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 
@@ -244,7 +245,8 @@
 					$block: $block,
 					$modifier: $modifier + $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 
@@ -254,9 +256,11 @@
 					$map: $value,
 					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'breakpoint',
-					$block: $selector,
+					$block: $block,
+					$modifier: $modifier + $selector,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 
@@ -366,7 +370,8 @@
 					$block: $selector,
 					$alias: $alias,
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 
@@ -378,7 +383,8 @@
 					$key: 'breakpoint',
 					$block: list-to-string(($selector, $alias)),
 					$props: $props,
-					$zero-specificity: $zero-specificity
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
 				);
 			}
 		}
@@ -630,7 +636,8 @@
 						$block: $block,
 						$modifier: $selector,
 						$props: $props,
-						$zero-specificity: $zero-specificity
+						$zero-specificity: $zero-specificity,
+						$bps: $bps
 					);
 				}
 			}
@@ -640,16 +647,21 @@
 
 // Transform a map into a list of breakpoints
 @mixin spread-map-into-breakpoints(
+	$original: null,
 	$map: (),
 	$prefix: '',
 	$key: 'breakpoint',
 	$block: null,
+	$modifier: '',
 	$props: true,
+	$zero-specificity: true,
 	$bps: (
 		xxs: 0,
-	),
-	$zero-specificity: true
+	)
 ) {
+	@if not $original {
+		$original: $map;
+	}
 	@if not $block {
 		$block: &;
 	}
@@ -657,12 +669,12 @@
 		@each $breakpoint, $value in map.get($map, $key) {
 			@if map.has-key($bps, $breakpoint) {
 				@include wrap-with-where(
-					$selector: $block,
+					$selector: '#{$modifier}#{$block}',
 					$enabled: $zero-specificity
 				) {
 					@include media-breakpoint-up($breakpoint, $bps) {
 						@include spread-map-into-attrs(
-							$original: $map,
+							$original: $original,
 							$map: $value,
 							$prefix: $prefix,
 							$variant: #{$key}-#{$breakpoint},
@@ -1036,7 +1048,7 @@
 			@each $state, $value in $states {
 				@if $state in [ 'enter-from', 'enter-active', 'enter-to',
 					'leave-from', 'leave-active', 'leave-to', 'active',
-					'inert' ] and type-of($value) == 'map'
+					'inert'] and type-of($value) == 'map'
 				{
 					$selector: '.#{$transition}';
 
@@ -1071,7 +1083,8 @@
 							$ignore: (
 								'element',
 							),
-							$props: $props
+							$props: $props,
+							$bps: $bps
 						);
 					}
 
@@ -1085,7 +1098,8 @@
 							$block: $block,
 							$modifier: $selector,
 							$props: $props,
-							$zero-specificity: $zero-specificity
+							$zero-specificity: $zero-specificity,
+							$bps: $bps
 						);
 					}
 				}