mirror of
https://github.com/Hopiu/wagtail.git
synced 2026-05-23 22:35:50 +00:00
91 lines
1.8 KiB
SCSS
91 lines
1.8 KiB
SCSS
$tooltip-spacing: 0.625rem;
|
|
$tooltip-arrow-height: 15px;
|
|
$tooltip-arrow-spacing: 25px;
|
|
$tooltip-radius: $draftail-tooltip-radius;
|
|
|
|
$tooltip-chrome: $draftail-tooltip-chrome;
|
|
$tooltip-chrome-text: $draftail-tooltip-chrome-text;
|
|
|
|
$tooltip-z-index: $draftail-tooltip-z-index;
|
|
|
|
@mixin arrow--top {
|
|
margin-top: $tooltip-arrow-spacing;
|
|
transform: translateX(-50%);
|
|
|
|
&::before {
|
|
bottom: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border-bottom-color: $tooltip-chrome;
|
|
}
|
|
}
|
|
|
|
@mixin arrow--left {
|
|
margin-left: $tooltip-arrow-spacing;
|
|
transform: translateY(-50%);
|
|
|
|
&::before {
|
|
top: 50%;
|
|
right: 100%;
|
|
transform: translateY(-50%);
|
|
border-right-color: $tooltip-chrome;
|
|
}
|
|
}
|
|
|
|
@mixin arrow--top-left {
|
|
margin-top: $tooltip-arrow-spacing;
|
|
|
|
&::before {
|
|
bottom: 100%;
|
|
left: $tooltip-arrow-spacing;
|
|
border-bottom-color: $tooltip-chrome;
|
|
}
|
|
}
|
|
|
|
.Tooltip {
|
|
position: absolute;
|
|
padding: $tooltip-spacing;
|
|
background-color: $tooltip-chrome;
|
|
color: $tooltip-chrome-text;
|
|
z-index: $tooltip-z-index;
|
|
border-radius: $tooltip-radius;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
border: $tooltip-arrow-height solid transparent;
|
|
}
|
|
|
|
&--top {
|
|
@include arrow--top;
|
|
}
|
|
|
|
&--left {
|
|
@include arrow--left;
|
|
}
|
|
|
|
&--top-left {
|
|
@include arrow--top-left;
|
|
}
|
|
}
|
|
|
|
.Tooltip__link {
|
|
@include font-smoothing;
|
|
font-size: 0.875rem;
|
|
margin-right: $controls-spacing * 4;
|
|
display: inline-block;
|
|
|
|
&,
|
|
&:hover {
|
|
color: $color-white;
|
|
}
|
|
}
|
|
|
|
.Tooltip__button {
|
|
padding: $button-spacing $controls-spacing;
|
|
|
|
+ .Tooltip__button {
|
|
margin-left: $button-spacing;
|
|
}
|
|
}
|