Skip to content
Snippets Groups Projects
Commit be3cde92 authored by xaralis's avatar xaralis
Browse files

feat: add tooltips

parent 8b351ecc
No related branches found
No related tags found
No related merge requests found
Pipeline #2021 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
Showing
with 371 additions and 0 deletions
source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache 0 → 100644
+ 10
− 0
View file @ be3cde92
<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>
source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache 0 → 100644
+ 86
− 0
View file @ be3cde92
<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>
source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache 0 → 100644
+ 11
− 0
View file @ be3cde92
<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>
source/_patterns/00-atoms/16-tooltips/tooltip.mustache 0 → 100644
+ 1
− 0
View file @ be3cde92
<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>
source/css/atoms/tooltip.pcss 0 → 100644
+ 262
− 0
View file @ be3cde92
.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");
}
}
}
source/css/style.pcss
+ 1
− 0
View file @ be3cde92
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
@import "./atoms/social-icon.pcss"; @import "./atoms/social-icon.pcss";
@import "./atoms/super-button.pcss"; @import "./atoms/super-button.pcss";
@import "./atoms/table.pcss"; @import "./atoms/table.pcss";
@import "./atoms/tooltip.pcss";
@import "./molecules/article-card.pcss"; @import "./molecules/article-card.pcss";
@import "./molecules/badge.pcss"; @import "./molecules/badge.pcss";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Pirátský GitLab - Home of the CopyLeft