@volverjs/style 0.1.5 → 0.1.6

package/package.json

@@ -24,7 +24,7 @@
   "bugs": {
     "url": "https://github.com/volverjs/style/issues"
   },
-  "version": "0.1.5",
+  "version": "0.1.6",
   "engines": {
     "node": ">= 12.x"
   },

package/src/_preflight.scss

@@ -365,6 +365,7 @@
 			@extend %vv-select !optional;
 			@extend %vv-select__wrapper !optional;
 			@extend %vv-select__input !optional;
+			@extend %vv-select-modifier-dirty__input !optional;
 
 			&:disabled {
 				@extend %vv-select--disabled !optional;

package/src/settings/_input.scss

@@ -15,7 +15,8 @@ $input: (
 	min-width: 0,
 	label: (
 		color: var(--color-word-2),
-		display: block,
+		display: flex,
+		align-items: center,
 		font-size: var(--text-xs),
 		gap: var(--spacing-xs),
 		white-space: nowrap,
@@ -50,4 +51,12 @@ $input: (
 	invalid: (
 		color: var(--color-danger),
 	),
+	floating: (
+		padding-top: calc(var(--input-spacing-top) + 0.55em),
+		padding-bottom: calc(var(--input-spacing-bottom) - 0.55em),
+		label: (
+			font-size: var(--text-12),
+			transform: translateY(-0.8em),
+		),
+	),
 ) !default;

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

@@ -10,6 +10,7 @@ $vv-input-text: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -27,7 +28,6 @@ $vv-input-text: (
 			background-color: var(--input-background-color),
 			will-change: background-color,
 			transition: var(--transition-colors),
-			min-height: var(--input-min-height),
 			pseudo: (
 				before: (
 					position: absolute,
@@ -65,14 +65,17 @@ $vv-input-text: (
 			display: block,
 			flex: 1,
 			color: var(--input-color),
-			[margin-block]: var(--input-spacing-top) var(--input-spacing-bottom),
+			line-height: var(--leading-none),
+			[padding-block]: var(--input-spacing-top)
+				var(--input-spacing-bottom),
 			[padding-inline]: var(--input-spacing-left)
 				var(--input-spacing-right),
 			min-width: 0,
-			block-size: calc(var(--input-line-height) * var(--input-font-size)),
+			min-height: var(--input-min-height),
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
+					text-overlow: ellipsis,
 				),
 				calendar-picker-indicator: (
 					position: absolute,
@@ -306,11 +309,13 @@ $vv-input-text: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),
@@ -322,11 +327,13 @@ $vv-input-text: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),

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

@@ -11,6 +11,7 @@ $vv-select: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -94,6 +95,9 @@ $vv-select: (
 					),
 			),
 		),
+		option: (
+			_alias: 'select > option',
+		),
 		icon: (
 			_alias: ':where(svg, [data-icon])',
 			margin: var(--input-spacing-top) var(--input-spacing-right)
@@ -129,6 +133,36 @@ $vv-select: (
 				),
 			),
 		),
+		multiple: (
+			element: (
+				wrapper: (
+					align-items: flex-start,
+				),
+				input: (
+					overflow: auto,
+					background-image: none,
+					padding: 0,
+				),
+				option: (
+					[padding]: var(--input-spacing-top)
+						var(--input-spacing-right) var(--input-spacing-bottom)
+						var(--input-spacing-left),
+					min-height: var(--input-min-height),
+					display: flex,
+					align-items: center,
+					color: var(--input-color),
+					state: (
+						checked: (
+							color: var(--color-brand),
+							background-color: var(--color-surface-brand),
+						),
+						disabled: (
+							color: var(--input-placeholder-color),
+						),
+					),
+				),
+			),
+		),
 		icon-left: (
 			--input-spacing-left: calc(var(--spacing-sm) * 2 + 1em),
 		),
@@ -213,30 +247,37 @@ $vv-select: (
 					transition: var(--transition-all),
 				),
 				input: (
-					pseudo: (
-						placeholder: (
-							opacity: var(--opacity-0),
+					opacity: var(--opacity-0),
+				),
+			),
+			state: (
+				focus-within: (
+					element: (
+						label: (
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
+						),
+						input: (
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
+							opacity: var(--opacity-100),
 						),
 					),
 				),
 			),
-			state: (
+			modifier: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							[padding-top]:
-								calc(var(--input-spacing-top) + 0.55em),
+							[padding-top]: var(--input-floating-padding-top),
 							[padding-bottom]:
-								calc(var(--input-spacing-bottom) - 0.55em),
-							pseudo: (
-								placeholder: (
-									opacity: var(--opacity-100),
-								),
-							),
+								var(--input-floating-padding-bottom),
+							opacity: var(--opacity-100),
 						),
 					),
 				),

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

@@ -10,6 +10,7 @@ $vv-textarea: (
 		label: (
 			_alias: '> label',
 			display: var(--input-label-display),
+			align-items: var(--input-label-align-items),
 			font-size: var(--input-label-font-size),
 			color: var(--input-label-color),
 			margin: 0 0 var(--input-label-gap) 0,
@@ -78,6 +79,7 @@ $vv-textarea: (
 			pseudo: (
 				placeholder: (
 					color: var(--input-placeholder-color),
+					text-overlow: ellipsis,
 				),
 			),
 			state: (
@@ -236,11 +238,13 @@ $vv-textarea: (
 				focus-within: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),
@@ -252,11 +256,13 @@ $vv-textarea: (
 				dirty: (
 					element: (
 						label: (
-							transform: translateY(-0.8em),
-							font-size: var(--text-12),
+							transform: var(--input-floating-label-transform),
+							font-size: var(--input-floating-label-font-size),
 						),
 						input: (
-							transform: translateY(0.55em),
+							[padding-top]: var(--input-floating-padding-top),
+							[padding-bottom]:
+								var(--input-floating-padding-bottom),
 							pseudo: (
 								placeholder: (
 									opacity: var(--opacity-100),

package/src/tools/_mixins.scss

@@ -173,34 +173,40 @@
 
 // Transform a map into a list of modifiers
 @mixin spread-map-into-modifiers(
+	$original: null,
 	$map: (),
 	$prefix: '',
 	$key: 'modifier',
 	$block: null,
+	$modifier: '',
 	$props: true,
 	$zero-specificity: true,
 	$bps: (
 		xxs: 0,
 	)
 ) {
+	@if not $original {
+		$original: $map;
+	}
 	@if not $block {
 		$block: &;
 	}
 	@if type-of(map.get($map, $key)) == 'map' {
-		@each $modifier, $value in map.get($map, $key) {
-			$selector: $block + '--' + $modifier;
+		@each $item, $value in map.get($map, $key) {
+			$selector: $block + '--' + $item;
 
-			%#{$prefix + '--' + $modifier} {
+			%#{$prefix + '--' + $item} {
 				@include spread-map-into-attrs(
-					$original: $map,
+					$original: $original,
 					$map: $value,
 					$prefix: $prefix,
-					$variant: #{$key}-#{$modifier},
+					$variant: #{$key}-#{$item},
 					$deep: true,
 					$ignore: (
 						'state',
 						'breakpoint',
 						'element',
+						'modifier',
 					),
 					$props: $props
 				);
@@ -208,21 +214,21 @@
 
 			// map props and attributes
 			@include wrap-with-where(
-				$selector: $selector + $block,
+				$selector: $modifier + $selector + $block,
 				$enabled: $zero-specificity
 			) {
-				@extend %#{$prefix + '--' + $modifier};
+				@extend %#{$prefix + '--' + $item};
 			}
 
 			// map elements
 			@if map.get($value, 'element') {
 				@include spread-map-into-elements(
-					$original: $map,
+					$original: $original,
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'element',
 					$block: $block,
-					$modifier: $selector,
+					$modifier: $modifier + $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
@@ -231,12 +237,12 @@
 			// map states
 			@if map.get($value, 'state') {
 				@include spread-map-into-states(
-					$original: $map,
+					$original: $original,
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'state',
 					$block: $block,
-					$modifier: $selector,
+					$modifier: $modifier + $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
@@ -246,13 +252,28 @@
 			@if map.get($value, 'breakpoint') {
 				@include spread-map-into-breakpoints(
 					$map: $value,
-					$prefix: #{$prefix}-#{$key}-#{$modifier},
+					$prefix: #{$prefix}-#{$key}-#{$item},
 					$key: 'breakpoint',
 					$block: $selector,
 					$props: $props,
 					$zero-specificity: $zero-specificity
 				);
 			}
+
+			// map modifiers
+			@if map.get($value, 'modifier') {
+				@include spread-map-into-modifiers(
+					$original: $original,
+					$map: $value,
+					$prefix: #{$prefix}-#{$key}-#{$item},
+					$key: 'modifier',
+					$block: $block,
+					$modifier: $modifier + $selector,
+					$props: $props,
+					$zero-specificity: $zero-specificity,
+					$bps: $bps
+				);
+			}
 		}
 	}
 }