@dolanske/vui 1.0.4 → 1.1.0

package/src/style/theme.scss

@@ -1,195 +1,195 @@
-// Light theme
-:root {
-  --light-color-bg: rgb(246, 246, 246);
-  --light-color-bg-medium: rgb(236, 236, 236);
-  --light-color-bg-raised: rgb(222, 222, 222);
-  --light-color-bg-lowered: rgb(255, 255, 255);
-
-  --light-color-text: rgb(8, 8, 8);
-  --light-color-text-light: rgb(64, 64, 64);
-  --light-color-text-lighter: rgb(92, 92, 92);
-  --light-color-text-lightest: rgb(128, 128, 128);
-  --light-color-text-invert: rgb(248, 248, 248);
-
-  --light-color-button-gray: rgb(224, 224, 224);
-  --light-color-button-gray-hover: rgb(198, 198, 198);
-
-  --light-color-button-fill: rgb(12, 12, 12);
-  --light-color-button-fill-hover: rgb(52, 52, 52);
-
-  --light-color-text-red: rgb(209, 60, 52);
-  --light-color-bg-red-lowered: rgb(172, 45, 45);
-  --light-color-bg-red-raised: rgb(220, 38, 38);
-
-  --light-color-text-green: rgb(77, 160, 29);
-  --light-color-bg-green-lowered: rgb(42, 114, 19);
-  --light-color-bg-green-raised: rgb(61, 146, 35);
-
-  --light-color-text-yellow: rgb(176, 129, 15);
-  --light-color-bg-yellow-lowered: rgb(230, 205, 137);
-  --light-color-bg-yellow-raised: rgb(253, 200, 86);
-
-  --light-color-text-blue: rgb(85, 141, 245);
-  --light-color-bg-blue-lowered: rgb(196, 214, 255);
-  --light-color-bg-blue-raised: rgb(136, 178, 255);
-
-  --light-color-border: rgb(200, 200, 200);
-  --light-color-border-strong: rgb(152, 152, 152);
-  --light-color-border-weak: rgb(224, 224, 224);
-
-  --light-color-accent: rgb(193, 118, 255);
-  --light-color-bg-accent-lowered: hsla(from var(--light-color-accent) h s l / 0.6);
-  --light-color-bg-accent-raised: hsla(from var(--light-color-accent) h s l / 0.75);
-
-  --light-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.075);
-  --light-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.2);
-}
-
-// Dark theme
-:root {
-  --dark-color-bg: rgb(17, 17, 17);
-  --dark-color-bg-medium: rgb(22, 22, 22);
-  --dark-color-bg-raised: rgb(28, 28, 28);
-  --dark-color-bg-lowered: rgb(12, 12, 12);
-
-  --dark-color-text: rgb(231, 231, 231);
-  --dark-color-text-light: rgb(180, 180, 180);
-  --dark-color-text-lighter: rgb(90, 90, 90);
-  --dark-color-text-lightest: rgb(65, 65, 65);
-  --dark-color-text-invert: rgb(17, 17, 17);
-
-  --dark-color-button-gray: rgb(46, 46, 46);
-  --dark-color-button-gray-hover: rgb(38, 38, 38);
-
-  --dark-color-button-fill: rgb(250, 250, 250);
-  --dark-color-button-fill-hover: rgb(210, 210, 210);
-
-  --dark-color-text-red: rgb(243, 78, 70);
-  --dark-color-bg-red-lowered: rgb(104, 24, 24);
-  --dark-color-bg-red-raised: rgb(127, 29, 29);
-
-  --dark-color-text-green: rgb(106, 207, 48);
-  --dark-color-bg-green-lowered: rgb(40, 95, 8);
-  --dark-color-bg-green-raised: rgb(26, 122, 13);
-
-  --dark-color-text-yellow: rgb(255, 193, 7);
-  --dark-color-bg-yellow-lowered: rgb(78, 52, 0);
-  --dark-color-bg-yellow-raised: rgb(152, 104, 0);
-
-  --dark-color-text-blue: rgb(85, 141, 245);
-  --dark-color-bg-blue-lowered: rgb(13, 32, 74);
-  --dark-color-bg-blue-raised: rgb(26, 59, 119);
-
-  --dark-color-border: rgb(40, 40, 40);
-  --dark-color-border-strong: rgb(54, 54, 54);
-  --dark-color-border-weak: rgb(36, 36, 36);
-
-  --dark-color-accent: rgb(193, 118, 255);
-  --dark-color-bg-accent-lowered: hsla(from var(--dark-color-accent) h s l / 0.45);
-  --dark-color-bg-accent-raised: hsla(from var(--dark-color-accent) h s l / 0.6);
-
-  --dark-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
-  --dark-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
-}
-
-:root.light {
-  color-scheme: light;
-
-  --color-bg: var(--light-color-bg);
-  --color-bg-medium: var(--light-color-bg-medium);
-  --color-bg-raised: var(--light-color-bg-raised);
-  --color-bg-lowered: var(--light-color-bg-lowered);
-
-  --color-text: var(--light-color-text);
-  --color-text-light: var(--light-color-text-light);
-  --color-text-lighter: var(--light-color-text-lighter);
-  --color-text-lightest: var(--light-color-text-lightest);
-  --color-text-invert: var(--light-color-text-invert);
-
-  --color-button-gray: var(--light-color-button-gray);
-  --color-button-gray-hover: var(--light-color-button-gray-hover);
-
-  --color-button-fill: var(--light-color-button-fill);
-  --color-button-fill-hover: var(--light-color-button-fill-hover);
-
-  --color-text-red: var(--light-color-text-red);
-  --color-bg-red-lowered: var(--light-color-bg-red-lowered);
-  --color-bg-red-raised: var(--light-color-bg-red-raised);
-  --color-border-red: var(--light-color-border-red);
-
-  --color-text-green: var(--light-color-text-green);
-  --color-bg-green-lowered: var(--light-color-bg-green-lowered);
-  --color-bg-green-raised: var(--light-color-bg-green-raised);
-
-  --color-text-yellow: var(--light-color-text-yellow);
-  --color-bg-yellow-lowered: var(--light-color-bg-yellow-lowered);
-  --color-bg-yellow-raised: var(--light-color-bg-yellow-raised);
-  --color-border-yellow: var(--light-color-border-yellow);
-
-  --color-text-blue: var(--light-color-text-blue);
-  --color-bg-blue-lowered: var(--light-color-bg-blue-lowered);
-  --color-bg-blue-raised: var(--light-color-bg-blue-raised);
-  --color-border-blue: var(--light-color-border-blue);
-
-  --color-border: var(--light-color-border);
-  --color-border-strong: var(--light-color-border-strong);
-  --color-border-weak: var(--light-color-border-weak);
-
-  --color-accent: var(--light-color-accent);
-  --color-bg-accent-lowered: var(--light-color-bg-accent-lowered);
-  --color-bg-accent-raised: var(--light-color-bg-accent-raised);
-
-  --box-shadow: var(--light-box-shadow);
-  --box-shadow-strong: var(--light-box-shadow-strong);
-}
-
-:root.dark {
-  color-scheme: dark;
-
-  --color-bg: var(--dark-color-bg);
-  --color-bg-medium: var(--dark-color-bg-medium);
-  --color-bg-raised: var(--dark-color-bg-raised);
-  --color-bg-lowered: var(--dark-color-bg-lowered);
-
-  --color-text: var(--dark-color-text);
-  --color-text-light: var(--dark-color-text-light);
-  --color-text-lighter: var(--dark-color-text-lighter);
-  --color-text-lightest: var(--dark-color-text-lightest);
-  --color-text-invert: var(--dark-color-text-invert);
-
-  --color-button-gray: var(--dark-color-button-gray);
-  --color-button-gray-hover: var(--dark-color-button-gray-hover);
-
-  --color-button-fill: var(--dark-color-button-fill);
-  --color-button-fill-hover: var(--dark-color-button-fill-hover);
-
-  --color-text-red: var(--dark-color-text-red);
-  --color-bg-red-lowered: var(--dark-color-bg-red-lowered);
-  --color-bg-red-raised: var(--dark-color-bg-red-raised);
-  --color-border-red: var(--dark-color-border-red);
-
-  --color-text-green: var(--dark-color-text-green);
-  --color-bg-green-lowered: var(--dark-color-bg-green-lowered);
-  --color-bg-green-raised: var(--dark-color-bg-green-raised);
-
-  --color-text-yellow: var(--dark-color-text-yellow);
-  --color-bg-yellow-lowered: var(--dark-color-bg-yellow-lowered);
-  --color-bg-yellow-raised: var(--dark-color-bg-yellow-raised);
-  --color-border-yellow: var(--dark-color-border-yellow);
-
-  --color-text-blue: var(--dark-color-text-blue);
-  --color-bg-blue-lowered: var(--dark-color-bg-blue-lowered);
-  --color-bg-blue-raised: var(--dark-color-bg-blue-raised);
-  --color-border-blue: var(--dark-color-border-blue);
-
-  --color-border: var(--dark-color-border);
-  --color-border-strong: var(--dark-color-border-strong);
-  --color-border-weak: var(--dark-color-border-weak);
-
-  --color-accent: var(--dark-color-accent);
-  --color-bg-accent-lowered: var(--dark-color-bg-accent-lowered);
-  --color-bg-accent-raised: var(--dark-color-bg-accent-raised);
-
-  --box-shadow: var(--dark-box-shadow);
-  --box-shadow-strong: var(--dark-box-shadow-strong);
-}
+// Light theme
+:root {
+  --light-color-bg: rgb(246, 246, 246);
+  --light-color-bg-medium: rgb(236, 236, 236);
+  --light-color-bg-raised: rgb(222, 222, 222);
+  --light-color-bg-lowered: rgb(255, 255, 255);
+
+  --light-color-text: rgb(8, 8, 8);
+  --light-color-text-light: rgb(64, 64, 64);
+  --light-color-text-lighter: rgb(92, 92, 92);
+  --light-color-text-lightest: rgb(128, 128, 128);
+  --light-color-text-invert: rgb(248, 248, 248);
+
+  --light-color-button-gray: rgb(224, 224, 224);
+  --light-color-button-gray-hover: rgb(198, 198, 198);
+
+  --light-color-button-fill: rgb(12, 12, 12);
+  --light-color-button-fill-hover: rgb(52, 52, 52);
+
+  --light-color-text-red: rgb(209, 60, 52);
+  --light-color-bg-red-lowered: rgb(172, 45, 45);
+  --light-color-bg-red-raised: rgb(220, 38, 38);
+
+  --light-color-text-green: rgb(77, 160, 29);
+  --light-color-bg-green-lowered: rgb(42, 114, 19);
+  --light-color-bg-green-raised: rgb(61, 146, 35);
+
+  --light-color-text-yellow: rgb(176, 129, 15);
+  --light-color-bg-yellow-lowered: rgb(230, 205, 137);
+  --light-color-bg-yellow-raised: rgb(253, 200, 86);
+
+  --light-color-text-blue: rgb(85, 141, 245);
+  --light-color-bg-blue-lowered: rgb(196, 214, 255);
+  --light-color-bg-blue-raised: rgb(136, 178, 255);
+
+  --light-color-border: rgb(200, 200, 200);
+  --light-color-border-strong: rgb(152, 152, 152);
+  --light-color-border-weak: rgb(224, 224, 224);
+
+  --light-color-accent: rgb(193, 118, 255);
+  --light-color-bg-accent-lowered: hsla(from var(--light-color-accent) h s l / 0.6);
+  --light-color-bg-accent-raised: hsla(from var(--light-color-accent) h s l / 0.75);
+
+  --light-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.075);
+  --light-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.2);
+}
+
+// Dark theme
+:root {
+  --dark-color-bg: rgb(17, 17, 17);
+  --dark-color-bg-medium: rgb(22, 22, 22);
+  --dark-color-bg-raised: rgb(28, 28, 28);
+  --dark-color-bg-lowered: rgb(12, 12, 12);
+
+  --dark-color-text: rgb(231, 231, 231);
+  --dark-color-text-light: rgb(180, 180, 180);
+  --dark-color-text-lighter: rgb(90, 90, 90);
+  --dark-color-text-lightest: rgb(65, 65, 65);
+  --dark-color-text-invert: rgb(17, 17, 17);
+
+  --dark-color-button-gray: rgb(46, 46, 46);
+  --dark-color-button-gray-hover: rgb(38, 38, 38);
+
+  --dark-color-button-fill: rgb(250, 250, 250);
+  --dark-color-button-fill-hover: rgb(210, 210, 210);
+
+  --dark-color-text-red: rgb(243, 78, 70);
+  --dark-color-bg-red-lowered: rgb(104, 24, 24);
+  --dark-color-bg-red-raised: rgb(127, 29, 29);
+
+  --dark-color-text-green: rgb(106, 207, 48);
+  --dark-color-bg-green-lowered: rgb(40, 95, 8);
+  --dark-color-bg-green-raised: rgb(26, 122, 13);
+
+  --dark-color-text-yellow: rgb(255, 193, 7);
+  --dark-color-bg-yellow-lowered: rgb(78, 52, 0);
+  --dark-color-bg-yellow-raised: rgb(152, 104, 0);
+
+  --dark-color-text-blue: rgb(85, 141, 245);
+  --dark-color-bg-blue-lowered: rgb(13, 32, 74);
+  --dark-color-bg-blue-raised: rgb(26, 59, 119);
+
+  --dark-color-border: rgb(40, 40, 40);
+  --dark-color-border-strong: rgb(54, 54, 54);
+  --dark-color-border-weak: rgb(36, 36, 36);
+
+  --dark-color-accent: rgb(193, 118, 255);
+  --dark-color-bg-accent-lowered: hsla(from var(--dark-color-accent) h s l / 0.45);
+  --dark-color-bg-accent-raised: hsla(from var(--dark-color-accent) h s l / 0.6);
+
+  --dark-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
+  --dark-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
+}
+
+:root.light {
+  color-scheme: light;
+
+  --color-bg: var(--light-color-bg);
+  --color-bg-medium: var(--light-color-bg-medium);
+  --color-bg-raised: var(--light-color-bg-raised);
+  --color-bg-lowered: var(--light-color-bg-lowered);
+
+  --color-text: var(--light-color-text);
+  --color-text-light: var(--light-color-text-light);
+  --color-text-lighter: var(--light-color-text-lighter);
+  --color-text-lightest: var(--light-color-text-lightest);
+  --color-text-invert: var(--light-color-text-invert);
+
+  --color-button-gray: var(--light-color-button-gray);
+  --color-button-gray-hover: var(--light-color-button-gray-hover);
+
+  --color-button-fill: var(--light-color-button-fill);
+  --color-button-fill-hover: var(--light-color-button-fill-hover);
+
+  --color-text-red: var(--light-color-text-red);
+  --color-bg-red-lowered: var(--light-color-bg-red-lowered);
+  --color-bg-red-raised: var(--light-color-bg-red-raised);
+  --color-border-red: var(--light-color-border-red);
+
+  --color-text-green: var(--light-color-text-green);
+  --color-bg-green-lowered: var(--light-color-bg-green-lowered);
+  --color-bg-green-raised: var(--light-color-bg-green-raised);
+
+  --color-text-yellow: var(--light-color-text-yellow);
+  --color-bg-yellow-lowered: var(--light-color-bg-yellow-lowered);
+  --color-bg-yellow-raised: var(--light-color-bg-yellow-raised);
+  --color-border-yellow: var(--light-color-border-yellow);
+
+  --color-text-blue: var(--light-color-text-blue);
+  --color-bg-blue-lowered: var(--light-color-bg-blue-lowered);
+  --color-bg-blue-raised: var(--light-color-bg-blue-raised);
+  --color-border-blue: var(--light-color-border-blue);
+
+  --color-border: var(--light-color-border);
+  --color-border-strong: var(--light-color-border-strong);
+  --color-border-weak: var(--light-color-border-weak);
+
+  --color-accent: var(--light-color-accent);
+  --color-bg-accent-lowered: var(--light-color-bg-accent-lowered);
+  --color-bg-accent-raised: var(--light-color-bg-accent-raised);
+
+  --box-shadow: var(--light-box-shadow);
+  --box-shadow-strong: var(--light-box-shadow-strong);
+}
+
+:root.dark {
+  color-scheme: dark;
+
+  --color-bg: var(--dark-color-bg);
+  --color-bg-medium: var(--dark-color-bg-medium);
+  --color-bg-raised: var(--dark-color-bg-raised);
+  --color-bg-lowered: var(--dark-color-bg-lowered);
+
+  --color-text: var(--dark-color-text);
+  --color-text-light: var(--dark-color-text-light);
+  --color-text-lighter: var(--dark-color-text-lighter);
+  --color-text-lightest: var(--dark-color-text-lightest);
+  --color-text-invert: var(--dark-color-text-invert);
+
+  --color-button-gray: var(--dark-color-button-gray);
+  --color-button-gray-hover: var(--dark-color-button-gray-hover);
+
+  --color-button-fill: var(--dark-color-button-fill);
+  --color-button-fill-hover: var(--dark-color-button-fill-hover);
+
+  --color-text-red: var(--dark-color-text-red);
+  --color-bg-red-lowered: var(--dark-color-bg-red-lowered);
+  --color-bg-red-raised: var(--dark-color-bg-red-raised);
+  --color-border-red: var(--dark-color-border-red);
+
+  --color-text-green: var(--dark-color-text-green);
+  --color-bg-green-lowered: var(--dark-color-bg-green-lowered);
+  --color-bg-green-raised: var(--dark-color-bg-green-raised);
+
+  --color-text-yellow: var(--dark-color-text-yellow);
+  --color-bg-yellow-lowered: var(--dark-color-bg-yellow-lowered);
+  --color-bg-yellow-raised: var(--dark-color-bg-yellow-raised);
+  --color-border-yellow: var(--dark-color-border-yellow);
+
+  --color-text-blue: var(--dark-color-text-blue);
+  --color-bg-blue-lowered: var(--dark-color-bg-blue-lowered);
+  --color-bg-blue-raised: var(--dark-color-bg-blue-raised);
+  --color-border-blue: var(--dark-color-border-blue);
+
+  --color-border: var(--dark-color-border);
+  --color-border-strong: var(--dark-color-border-strong);
+  --color-border-weak: var(--dark-color-border-weak);
+
+  --color-accent: var(--dark-color-accent);
+  --color-bg-accent-lowered: var(--dark-color-bg-accent-lowered);
+  --color-bg-accent-raised: var(--dark-color-bg-accent-raised);
+
+  --box-shadow: var(--dark-box-shadow);
+  --box-shadow-strong: var(--dark-box-shadow-strong);
+}

package/src/style/tooltip.scss

@@ -1,146 +1,146 @@
-/*
-This is a trick in which you can add simply tooltips to an element without any additional html.
-Simple add data-title-_position_="Hello world" and hover the element.
-
-Available tooltip positions:
-*/
-
-[data-title-left],
-[data-title-right],
-[data-title-bottom],
-[data-title-bottom-left],
-[data-title-bottom-right],
-[data-title-top],
-[data-title-top-left],
-[data-title-top-right] {
-  position: relative;
-
-  &:before {
-    font-family: var(--global-font);
-    font-weight: var(--font-weight-regular);
-    background-color: var(--color-button-gray);
-    color: var(--color-text) !important;
-    box-shadow: var(--box-shadow-strong);
-
-    font-size: var(--font-size-m);
-    position: absolute;
-    padding: 4px 8px;
-    line-height: 1.3em;
-    border-radius: var(--border-radius-m);
-    transition: var(--transition);
-
-    max-width: 512px;
-    opacity: 0;
-    cursor: default;
-    z-index: -1;
-    visibility: hidden;
-    pointer-events: none;
-    max-width: 256px;
-    width: max-content;
-  }
-
-  &:hover {
-    &:before {
-      visibility: visible;
-      opacity: 1;
-      z-index: 99999;
-    }
-  }
-}
-
-:root.light {
-  [data-title-left],
-  [data-title-right],
-  [data-title-bottom],
-  [data-title-bottom-left],
-  [data-title-bottom-right],
-  [data-title-top],
-  [data-title-top-left],
-  [data-title-top-right] {
-    &:before {
-      background-color: var(--color-bg-lowered);
-    }
-  }
-}
-
-[data-title-left]:before {
-  content: attr(data-title-left);
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 99999;
-  right: calc(100% + 4px);
-}
-
-[data-title-right]:before {
-  content: attr(data-title-right);
-  top: 50%;
-  transform: translateY(-50%);
-  z-index: 99999;
-  left: calc(100% + 4px);
-}
-
-[data-title-bottom]:before,
-[data-title-bottom-left]:before,
-[data-title-bottom-right]:before {
-  content: attr(data-title-bottom);
-  top: calc(100% + 4px);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-[data-title-bottom-left]:before {
-  content: attr(data-title-bottom-left);
-  transform: unset;
-  left: 0;
-}
-
-[data-title-bottom-right]:before {
-  content: attr(data-title-bottom-right);
-  transform: unset;
-  left: unset;
-  right: 0;
-}
-
-[data-title-top]:before,
-[data-title-top-left]:before,
-[data-title-top-right]:before {
-  content: attr(data-title-top);
-  bottom: calc(100% + 4px);
-  transform: translateX(-50%);
-  left: 50%;
-}
-
-[data-title-top-left]:before {
-  content: attr(data-title-top-left);
-  transform: unset;
-  left: 0;
-}
-
-[data-title-top-right]:before {
-  content: attr(data-title-top-right);
-  transform: unset;
-  left: unset;
-  right: 0;
-}
-
-// Hover
-
-[data-title-left]:hover:before {
-  right: calc(100% + 10px);
-}
-
-[data-title-right]:hover:before {
-  left: calc(100% + 10px);
-}
-
-[data-title-top]:hover:before,
-[data-title-top-left]:hover:before,
-[data-title-top-right]:hover:before {
-  bottom: calc(100% + 10px);
-}
-
-[data-title-bottom]:hover:before,
-[data-title-bottom-left]:hover:before,
-[data-title-bottom-right]:hover:before {
-  top: calc(100% + 10px);
-}
+/*
+This is a trick in which you can add simply tooltips to an element without any additional html.
+Simple add data-title-_position_="Hello world" and hover the element.
+
+Available tooltip positions:
+*/
+
+[data-title-left],
+[data-title-right],
+[data-title-bottom],
+[data-title-bottom-left],
+[data-title-bottom-right],
+[data-title-top],
+[data-title-top-left],
+[data-title-top-right] {
+  position: relative;
+
+  &:before {
+    font-family: var(--global-font);
+    font-weight: var(--font-weight-regular);
+    background-color: var(--color-button-gray);
+    color: var(--color-text) !important;
+    box-shadow: var(--box-shadow-strong);
+
+    font-size: var(--font-size-m);
+    position: absolute;
+    padding: 4px 8px;
+    line-height: 1.3em;
+    border-radius: var(--border-radius-m);
+    transition: var(--transition);
+
+    max-width: 512px;
+    opacity: 0;
+    cursor: default;
+    z-index: -1;
+    visibility: hidden;
+    pointer-events: none;
+    max-width: 256px;
+    width: max-content;
+  }
+
+  &:hover {
+    &:before {
+      visibility: visible;
+      opacity: 1;
+      z-index: 99999;
+    }
+  }
+}
+
+:root.light {
+  [data-title-left],
+  [data-title-right],
+  [data-title-bottom],
+  [data-title-bottom-left],
+  [data-title-bottom-right],
+  [data-title-top],
+  [data-title-top-left],
+  [data-title-top-right] {
+    &:before {
+      background-color: var(--color-bg-lowered);
+    }
+  }
+}
+
+[data-title-left]:before {
+  content: attr(data-title-left);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+  right: calc(100% + 4px);
+}
+
+[data-title-right]:before {
+  content: attr(data-title-right);
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 99999;
+  left: calc(100% + 4px);
+}
+
+[data-title-bottom]:before,
+[data-title-bottom-left]:before,
+[data-title-bottom-right]:before {
+  content: attr(data-title-bottom);
+  top: calc(100% + 4px);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+[data-title-bottom-left]:before {
+  content: attr(data-title-bottom-left);
+  transform: unset;
+  left: 0;
+}
+
+[data-title-bottom-right]:before {
+  content: attr(data-title-bottom-right);
+  transform: unset;
+  left: unset;
+  right: 0;
+}
+
+[data-title-top]:before,
+[data-title-top-left]:before,
+[data-title-top-right]:before {
+  content: attr(data-title-top);
+  bottom: calc(100% + 4px);
+  transform: translateX(-50%);
+  left: 50%;
+}
+
+[data-title-top-left]:before {
+  content: attr(data-title-top-left);
+  transform: unset;
+  left: 0;
+}
+
+[data-title-top-right]:before {
+  content: attr(data-title-top-right);
+  transform: unset;
+  left: unset;
+  right: 0;
+}
+
+// Hover
+
+[data-title-left]:hover:before {
+  right: calc(100% + 10px);
+}
+
+[data-title-right]:hover:before {
+  left: calc(100% + 10px);
+}
+
+[data-title-top]:hover:before,
+[data-title-top-left]:hover:before,
+[data-title-top-right]:hover:before {
+  bottom: calc(100% + 10px);
+}
+
+[data-title-bottom]:hover:before,
+[data-title-bottom-left]:hover:before,
+[data-title-bottom-right]:hover:before {
+  top: calc(100% + 10px);
+}