@volverjs/style 0.1.2-beta-12 → 0.1.2-beta-13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@volverjs/style",
-  "version": "0.1.2-beta-12",
+  "version": "0.1.2-beta-13",
   "description": "@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui and static webpages as well.",
   "main": "dist/style.css",
   "style": "dist/style.css",
@@ -63,6 +63,8 @@
     "./scss/components/vv-text": "./src/components/vv-text.scss",
     "./components/vv-textarea": "./dist/components/vv-textarea.css",
     "./scss/components/vv-textarea": "./src/components/vv-textarea.scss",
+    "./components/vv-tooltip": "./dist/components/vv-tooltip.css",
+    "./scss/components/vv-tooltip": "./src/components/vv-tooltip.scss",
     "./export": "./dist/export.css",
     "./scss/export": "./src/export.scss",
     "./props/animation": "./dist/props/animation.css",

package/src/_config.scss

@@ -32,4 +32,5 @@ $components-names: (
 	vv-table: $components-prefix + -table,
 	vv-text: $components-prefix + -text,
 	vv-textarea: $components-prefix + -textarea,
+	vv-tooltip: $components-prefix + -tooltip,
 ) !default;

package/src/components/index.scss

@@ -18,3 +18,4 @@
 @import 'vv-table';
 @import 'vv-text';
 @import 'vv-textarea';
+@import 'vv-tooltip';

package/src/components/vv-tooltip.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@import '../context';
+
+$component-name: map.get($components-names, vv-tooltip);
+$component-map: $vv-tooltip;
+
+@include spread-map-into-bem(
+	$map: $component-map,
+	$block: $component-name,
+	$props: $use-custom-props-for-components,
+	$zero-specificity: $zero-specificity-for-compoenents
+);

package/src/settings/_index.scss

@@ -35,3 +35,4 @@
 @import 'components/vv-table';
 @import 'components/vv-text';
 @import 'components/vv-textarea';
+@import 'components/vv-tooltip';

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

@@ -0,0 +1,77 @@
+$vv-tooltip: (
+	position: relative,
+	display: inline-flex,
+	align-items: center,
+	element: (
+		content: (
+			opacity: 0,
+			position: absolute,
+			z-index: var(--z-tooltip),
+			display: block,
+			min-width: var(--spacing-160),
+			border-radius: var(--rounded-md),
+			border-width: 2px,
+			border-style: solid,
+			border-color: var(--color-gray-darken-4),
+			padding: var(--spacing-4) var(--spacing-sm),
+			margin: 0 0 0 var(--spacing-xs),
+			background: var(--color-gray-darken-4),
+			font-size: var(--text-12),
+			font-weight: var(--font-normal),
+			color: var(--color-gray-lighten-5),
+			text-align: center,
+			inset-inline: 100% auto,
+			inset-block: auto,
+			filter: drop-shadow(0 0 0.2rem var(--color-gray-darken-4)),
+		),
+	),
+	modifier: (
+		top: (
+			element: (
+				content: (
+					margin: 0 0 var(--spacing-xs) 0,
+					inset-inline: auto,
+					inset-block: auto 100%,
+				),
+			),
+		),
+		right: (
+			element: (
+				content: (
+					margin: 0 0 0 var(--spacing-xs),
+					inset-inline: 100% auto,
+					inset-block: auto,
+				),
+			),
+		),
+		bottom: (
+			element: (
+				content: (
+					margin: var(--spacing-xs) 0 0 0,
+					inset-inline: auto,
+					inset-block: 100% auto,
+				),
+			),
+		),
+		left: (
+			element: (
+				content: (
+					margin: 0 var(--spacing-xs) 0 0,
+					inset-inline: auto 100%,
+					inset-block: auto,
+				),
+			),
+		),
+	),
+	state: (
+		hover: (
+			element: (
+				content: (
+					opacity: 1,
+					will-change: opacity,
+					transition: opacity 0.3s ease-in-out,
+				),
+			),
+		),
+	),
+) !default;