Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into update-theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@mlmoravek
mlmoravek committed Nov 8, 2024
2 parents eb9dc72 + 5bd84ba commit 2b6c4d4
Showing 1 changed file with 145 additions and 145 deletions.
290 changes: 145 additions & 145 deletions src/assets/scss/components/_tooltip.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,14 @@ $tooltip-zindex: $zindex-tooltip;
position: relative;
display: inline-flex;

// Color variants
@each $name, $color in $theme-colors {
.variant-#{$name} {
--#{$prefix}tooltip-color: var(--#{$prefix}#{$name}-contrast);
--#{$prefix}tooltip-bg: var(--#{$prefix}#{$name});
}
}

.tooltip-trigger {
width: 100%;
}
Expand Down Expand Up @@ -79,183 +87,175 @@ $tooltip-zindex: $zindex-tooltip;
white-space: normal;
width: var(--#{$prefix}tooltip-content-multiline-width);
}
}

// Color variants
@each $name, $color in $theme-colors {
.variant-#{$name} {
--#{$prefix}tooltip-color: var(--#{$prefix}#{$name}-contrast);
--#{$prefix}tooltip-bg: var(--#{$prefix}#{$name});
}
}

// Positioning
.position {
&-top {
top: auto;
right: auto;
bottom: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
left: 50%;
transform: translateX(-50%);

&::before {
top: 100%;
// Positioning
&.position {
&-top {
top: auto;
right: auto;
bottom: auto;
bottom: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
left: 50%;
transform: translateX(-50%);
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-right: $tooltip-arrow-size solid transparent;
border-left: $tooltip-arrow-size solid transparent;
}
}

&-bottom {
top: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
&::before {
top: 100%;
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-right: $tooltip-arrow-size solid transparent;
border-left: $tooltip-arrow-size solid transparent;
}
}

&::before {
top: auto;
&-bottom {
top: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
right: auto;
bottom: 100%;
bottom: auto;
left: 50%;
transform: translateX(-50%);
border-right: $tooltip-arrow-size solid transparent;
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-left: $tooltip-arrow-size solid transparent;
}
}

&-right {
top: 50%;
right: auto;
bottom: auto;
left: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
transform: translateY(-50%);
&::before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-right: $tooltip-arrow-size solid transparent;
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-left: $tooltip-arrow-size solid transparent;
}
}

&::before {
&-right {
top: 50%;
right: 100%;
right: auto;
bottom: auto;
left: auto;
left: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
transform: translateY(-50%);
border-top: $tooltip-arrow-size solid transparent;
border-right: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-bottom: $tooltip-arrow-size solid transparent;
}
}

&-left {
top: 50%;
right: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
bottom: auto;
left: auto;
transform: translateY(-50%);
&::before {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translateY(-50%);
border-top: $tooltip-arrow-size solid transparent;
border-right: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-bottom: $tooltip-arrow-size solid transparent;
}
}

&::before {
&-left {
top: 50%;
right: auto;
right: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
bottom: auto;
left: 100%;
left: auto;
transform: translateY(-50%);
border-top: $tooltip-arrow-size solid transparent;
border-bottom: $tooltip-arrow-size solid transparent;
border-left: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
}
}

&-top-right {
top: auto;
right: 0;
bottom: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
left: auto;
transform: translateX(50%);

&::before {
top: 100%;
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-right: calc($tooltip-arrow-size * 2) solid transparent;
border-left: 0 solid transparent;
&::before {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translateY(-50%);
border-top: $tooltip-arrow-size solid transparent;
border-bottom: $tooltip-arrow-size solid transparent;
border-left: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
}
}
}

&-top-left {
top: auto;
right: auto;
bottom: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
left: 0;
transform: translateX(-50%);

&::before {
top: 100%;
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-right: 0 solid transparent;
border-left: calc($tooltip-arrow-size * 2) solid transparent;
&-top-right {
top: auto;
right: 0;
bottom: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
left: auto;
transform: translateX(50%);

&::before {
top: 100%;
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-right: calc($tooltip-arrow-size * 2) solid transparent;
border-left: 0 solid transparent;
}
}
}

&-bottom-right {
top: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
right: 0;
bottom: auto;
left: auto;
transform: translateX(50%);

&::before {
&-top-left {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
bottom: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
left: 0;
transform: translateX(-50%);
border-right: calc($tooltip-arrow-size * 2) solid transparent;
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-left: 0 solid transparent;

&::before {
top: 100%;
right: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%);
border-top: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-right: 0 solid transparent;
border-left: calc($tooltip-arrow-size * 2) solid transparent;
}
}
}

&-bottom-left {
top: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
right: auto;
bottom: auto;
left: 0;
transform: translateX(-50%);
&-bottom-right {
top: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
right: 0;
bottom: auto;
left: auto;
transform: translateX(50%);

&::before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-right: calc($tooltip-arrow-size * 2) solid transparent;
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
border-left: 0 solid transparent;
}
}

&::before {
top: auto;
&-bottom-left {
top: calc(
100% + $tooltip-arrow-size + var(--#{$prefix}tooltip-arrow-spacer)
);
right: auto;
bottom: 100%;
left: 50%;
bottom: auto;
left: 0;
transform: translateX(-50%);
border-right: 0 solid transparent;
border-left: calc($tooltip-arrow-size * 2) solid transparent;
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);

&::before {
top: auto;
right: auto;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-right: 0 solid transparent;
border-left: calc($tooltip-arrow-size * 2) solid transparent;
border-bottom: $tooltip-arrow-size solid var(--#{$prefix}tooltip-bg);
}
}
}
}
Expand Down

0 comments on commit 2b6c4d4

Please sign in to comment.