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 0000000000000000000000000000000000000000..9a9524c9500f234ee1137514ade12f15f98d28cd --- /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 0000000000000000000000000000000000000000..9ad569a4f435fbf6ae815e183103b2e4db6f4e92 --- /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 0000000000000000000000000000000000000000..3952ace2f8c6a4a640b415a5b4614536ab5370f4 --- /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 0000000000000000000000000000000000000000..10e38dfdab7c73025251c48c431990dab3ad70db --- /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 0000000000000000000000000000000000000000..93ae46a69972a2a109811c10b649e1279780ebd6 --- /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 fab7d9a8decb1864b3d6084509a793ce3762988c..18db66fbcf208f412e0c5b64c4165654f8fca975 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";