From be3cde92319ed071d9c81d6c4c8038fbf9833396 Mon Sep 17 00:00:00 2001
From: xaralis <filip.varecha@fragaria.cz>
Date: Tue, 5 Jan 2021 12:13:46 +0100
Subject: [PATCH] feat: add tooltips
---
.../16-tooltips/tooltip-colors.mustache | 10 +
.../16-tooltips/tooltip-positioning.mustache | 86 ++++++
.../16-tooltips/tooltip-semantic.mustache | 11 +
.../00-atoms/16-tooltips/tooltip.mustache | 1 +
source/css/atoms/tooltip.pcss | 262 ++++++++++++++++++
source/css/style.pcss | 1 +
6 files changed, 371 insertions(+)
create mode 100644 source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache
create mode 100644 source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache
create mode 100644 source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache
create mode 100644 source/_patterns/00-atoms/16-tooltips/tooltip.mustache
create mode 100644 source/css/atoms/tooltip.pcss
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache
new file mode 100644
index 0000000..9a9524c
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache
@@ -0,0 +1,10 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> atoms-tooltip(classes: "tooltip--black") }}
+ {{> atoms-tooltip(classes: "tooltip--grey-125") }}
+ {{> atoms-tooltip(classes: "tooltip--red-600") }}
+ {{> atoms-tooltip(classes: "tooltip--yellow-400") }}
+ {{> atoms-tooltip(classes: "tooltip--green-400") }}
+ {{> atoms-tooltip(classes: "tooltip--blue-300") }}
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache
new file mode 100644
index 0000000..9ad569a
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache
@@ -0,0 +1,86 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--black tooltip--top") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--black tooltip--bottom") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--black tooltip--left") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--black tooltip--right") }}
+ </div>
+ </div>
+ <div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--top") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--bottom") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--left") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--right") }}
+ </div>
+ </div>
+ <div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--top") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--bottom") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--left") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--right") }}
+ </div>
+ </div>
+ <div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--top") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--bottom") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--left") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--right") }}
+ </div>
+ </div>
+ <div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--top") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--bottom") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--left") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--right") }}
+ </div>
+ </div>
+ <div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--top") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--bottom") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--left") }}
+ </div>
+ <div class="p-8">
+ {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--right") }}
+ </div>
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache
new file mode 100644
index 0000000..3952ace
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache
@@ -0,0 +1,11 @@
+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+ <div class="inline-flex flex-col space-y-2">
+ {{> atoms-tooltip(classes: "tooltip--dark") }}
+ {{> atoms-tooltip(classes: "tooltip--light") }}
+ {{> atoms-tooltip(classes: "tooltip--default") }}
+ {{> atoms-tooltip(classes: "tooltip--error") }}
+ {{> atoms-tooltip(classes: "tooltip--warning") }}
+ {{> atoms-tooltip(classes: "tooltip--success") }}
+ {{> atoms-tooltip(classes: "tooltip--info") }}
+ </div>
+</div>
diff --git a/source/_patterns/00-atoms/16-tooltips/tooltip.mustache b/source/_patterns/00-atoms/16-tooltips/tooltip.mustache
new file mode 100644
index 0000000..10e38df
--- /dev/null
+++ b/source/_patterns/00-atoms/16-tooltips/tooltip.mustache
@@ -0,0 +1 @@
+<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>
diff --git a/source/css/atoms/tooltip.pcss b/source/css/atoms/tooltip.pcss
new file mode 100644
index 0000000..93ae46a
--- /dev/null
+++ b/source/css/atoms/tooltip.pcss
@@ -0,0 +1,262 @@
+.tooltip {
+ --bg-opacity: 0.9 !important;
+ z-index: 999;
+
+ @apply inline-block relative pointer-events-none;
+
+ &::before,
+ &::after {
+ content: "";
+ width: 0;
+ height: 0;
+ position: absolute;
+ opacity: 0.9;
+ }
+
+ &,
+ &.tooltip--default {
+ @apply text-xs py-2 px-4 rounded-none;
+ }
+
+ &--top,
+ &.tooltip--top
+ &.place-top {
+ margin-top: -10px;
+
+ &::before {
+ border-top: 8px solid transparent;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ bottom: -8px;
+ left: 50%;
+ margin-left: -10px;
+ }
+
+ &::after {
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ bottom: -6px;
+ left: 50%;
+ margin-left: -8px;
+ border-top-style: solid;
+ border-top-width: 6px;
+ }
+ }
+
+ &--bottom,
+ &.tooltip--bottom,
+ &.place-bottom {
+ margin-top: 10px;
+
+ &::before {
+ border-bottom: 8px solid transparent;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ top: -8px;
+ left: 50%;
+ margin-left: -10px;
+ }
+
+ &::after {
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ top: -6px;
+ left: 50%;
+ margin-left: -8px;
+ border-bottom-style: solid;
+ border-bottom-width: 6px;
+ }
+ }
+
+ &--left,
+ &.tooltip--left,
+ &.place-left {
+ margin-left: -10px;
+ margin-top: 0;
+
+ &::before {
+ border-left: 8px solid transparent;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ right: -8px;
+ top: 50%;
+ margin-top: -5px;
+ }
+
+ &::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ right: -6px;
+ top: 50%;
+ margin-top: -4px;
+ border-left-style: solid;
+ border-left-width: 6px;
+ }
+ }
+
+ &--right,
+ &.tooltip--right,
+ &.place-right {
+ margin-left: 10px;
+ margin-top: 0;
+
+ &::before {
+ border-right: 8px solid transparent;
+ border-top: 6px solid transparent;
+ border-bottom: 6px solid transparent;
+ left: -8px;
+ top: 50%;
+ margin-top: -5px;
+ }
+
+ &::after {
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ left: -6px;
+ top: 50%;
+ margin-top: -4px;
+ border-right-style: solid;
+ border-right-width: 6px;
+ }
+ }
+
+ &,
+ &--default,
+ &--dark,
+ &.type-dark,
+ &--black {
+ @apply bg-black text-white;
+
+ &.place-top::after,
+ &.tooltip--top::after {
+ border-top-color: theme("colors.black");
+ }
+ &.place-bottom::after,
+ &.tooltip--bottom::after {
+ border-bottom-color: theme("colors.black");
+ }
+ &.place-left::after,
+ &.tooltip--left::after {
+ border-left-color: theme("colors.black");
+ }
+ &.place-right::after,
+ &.tooltip--right::after {
+ border-right-color: theme("colors.black");
+ }
+ }
+
+ &--error,
+ &.type-error,
+ &--red-600 {
+ @apply bg-red-600 text-white;
+
+ &.place-top::after,
+ &.tooltip--top::after {
+ border-top-color: theme("colors.red.600");
+ }
+ &.place-bottom::after,
+ &.tooltip--bottom::after {
+ border-bottom-color: theme("colors.red.600");
+ }
+ &.place-left::after,
+ &.tooltip--left::after {
+ border-left-color: theme("colors.red.600");
+ }
+ &.place-right::after,
+ &.tooltip--right::after {
+ border-right-color: theme("colors.red.600");
+ }
+ }
+
+ &--warning,
+ &.type-warning,
+ &--yellow-400 {
+ @apply bg-yellow-400 text-black;
+
+ &.place-top::after,
+ &.tooltip--top::after {
+ border-top-color: theme("colors.yellow.400");
+ }
+ &.place-bottom::after,
+ &.tooltip--bottom::after {
+ border-bottom-color: theme("colors.yellow.400");
+ }
+ &.place-left::after,
+ &.tooltip--left::after {
+ border-left-color: theme("colors.yellow.400");
+ }
+ &.place-right::after,
+ &.tooltip--right::after {
+ border-right-color: theme("colors.yellow.400");
+ }
+ }
+
+ &--info,
+ &.type-info,
+ &--blue-300 {
+ @apply bg-blue-300 text-white;
+
+ &.place-top::after,
+ &.tooltip--top::after {
+ border-top-color: theme("colors.blue.300");
+ }
+ &.place-bottom::after,
+ &.tooltip--bottom::after {
+ border-bottom-color: theme("colors.blue.300");
+ }
+ &.place-left::after,
+ &.tooltip--left::after {
+ border-left-color: theme("colors.blue.300");
+ }
+ &.place-right::after,
+ &.tooltip--right::after {
+ border-right-color: theme("colors.blue.300");
+ }
+ }
+
+ &--grey-125,
+ &--light,
+ &.type-light {
+ @apply bg-grey-125 text-grey-300;
+
+ &.place-top::after,
+ &.tooltip--top::after {
+ border-top-color: theme("colors.grey.125");
+ }
+ &.place-bottom::after,
+ &.tooltip--bottom::after {
+ border-bottom-color: theme("colors.grey.125");
+ }
+ &.place-left::after,
+ &.tooltip--left::after {
+ border-left-color: theme("colors.grey.125");
+ }
+ &.place-right::after,
+ &.tooltip--right::after {
+ border-right-color: theme("colors.grey.125");
+ }
+ }
+
+ &--green-400,
+ &--success,
+ &.type-success {
+ @apply bg-green-400 text-white;
+
+ &.place-top::after,
+ &.tooltip--top::after {
+ border-top-color: theme("colors.green.400");
+ }
+ &.place-bottom::after,
+ &.tooltip--bottom::after {
+ border-bottom-color: theme("colors.green.400");
+ }
+ &.place-left::after,
+ &.tooltip--left::after {
+ border-left-color: theme("colors.green.400");
+ }
+ &.place-right::after,
+ &.tooltip--right::after {
+ border-right-color: theme("colors.green.400");
+ }
+ }
+}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index fab7d9a..18db66f 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -35,6 +35,7 @@
@import "./atoms/social-icon.pcss";
@import "./atoms/super-button.pcss";
@import "./atoms/table.pcss";
+@import "./atoms/tooltip.pcss";
@import "./molecules/article-card.pcss";
@import "./molecules/badge.pcss";
--
GitLab