open-consul/ui/packages/consul-ui/app/components/tooltip/index.scss

75 lines
1.4 KiB
SCSS
Raw Normal View History

.tippy-box[data-theme~='tooltip'] {
2020-11-30 16:52:13 +00:00
& {
@extend %tooltip-bubble;
}
.tippy-content {
@extend %tooltip-content;
}
.tippy-arrow {
@extend %tooltip-tail;
}
&[data-placement^='bottom'] > .tippy-arrow {
2020-11-30 16:52:13 +00:00
@extend %tooltip-tail-bottom;
}
&[data-placement^='top'] > .tippy-arrow {
2020-11-30 16:52:13 +00:00
@extend %tooltip-tail-top;
}
&[data-placement^='left'] > .tippy-arrow {
2020-11-30 16:52:13 +00:00
@extend %tooltip-tail-left;
}
&[data-placement^='right'] > .tippy-arrow {
2020-11-30 16:52:13 +00:00
@extend %tooltip-tail-right;
}
}
%tooltip-content {
@extend %p3;
padding: 12px;
max-width: 224px;
position: relative;
z-index: 1;
2020-11-30 16:52:13 +00:00
}
2020-11-30 16:52:13 +00:00
%tooltip-bubble {
& {
background-color: rgb(var(--tone-gray-700));
color: rgb(var(--tone-gray-000));
2020-11-30 16:52:13 +00:00
}
}
%tooltip-tail {
--size: 5px;
& {
color: rgb(var(--tone-gray-700));
2020-11-30 16:52:13 +00:00
width: calc(var(--size) * 2);
height: calc(var(--size) * 2);
}
&::before {
border-color: var(--transparent);
2020-11-30 16:52:13 +00:00
border-style: solid;
}
}
2020-11-30 16:52:13 +00:00
%tooltip-tail-top {
&::before {
border-width: var(--size) var(--size) 0;
border-top-color: initial;
}
}
%tooltip-tail-bottom {
&::before {
border-width: 0 var(--size) var(--size);
border-bottom-color: initial;
}
}
%tooltip-tail-left {
&::before {
border-width: var(--size) 0 var(--size) var(--size);
border-left-color: initial;
}
}
%tooltip-tail-right {
&::before {
border-width: var(--size) var(--size) var(--size) 0;
border-right-color: initial;
}
}