110 lines
2.6 KiB
SCSS
110 lines
2.6 KiB
SCSS
@mixin triangle-border($color, $orientation, $size) {
|
|
border-width:
|
|
if($orientation == top, 0, $size)
|
|
if($orientation == right, 0, $size)
|
|
if($orientation == bottom, 0, $size)
|
|
if($orientation == left, 0, $size)
|
|
;
|
|
|
|
border-color:
|
|
if($orientation == bottom, $color, transparent)
|
|
if($orientation == left, $color, transparent)
|
|
if($orientation == top, $color, transparent)
|
|
if($orientation == right, $color, transparent)
|
|
;
|
|
|
|
#{$orientation}: -$size;
|
|
@if ($orientation == top) or ($orientation == bottom) {
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
} @else {
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
|
|
@mixin triangle($orientation, $size, $color, $border: none) {
|
|
background: $color;
|
|
|
|
&::after {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
content: "";
|
|
position: absolute;
|
|
|
|
@include triangle-border($color, $orientation, $size);
|
|
}
|
|
|
|
@if $border != none {
|
|
&::before {
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
content: "";
|
|
position: absolute;
|
|
|
|
@include triangle-border($border, $orientation, $size + 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin triangle-top($size, $color, $border: none) { @include triangle(top, $size, $color, $border); }
|
|
@mixin triangle-bottom($size, $color, $border: none) { @include triangle(bottom, $size, $color, $border); }
|
|
@mixin triangle-left($size, $color, $border: none) { @include triangle(left, $size, $color, $border); }
|
|
@mixin triangle-right($size, $color, $border: none) { @include triangle(right, $size, $color, $border); }
|
|
|
|
.popper {
|
|
$arrow-base: 10px;
|
|
$arrow-color: white;
|
|
$arrow-border: black;
|
|
|
|
$popper-padding: 2px;
|
|
|
|
padding: $popper-padding;
|
|
background: white;
|
|
border: 1px solid black;
|
|
z-index: 1000;
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
|
|
max-width: 500px;
|
|
min-width: 200px;
|
|
|
|
border-radius: 2px;
|
|
|
|
.popper-arrow {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
@mixin placement($placement) {
|
|
$opposite: (
|
|
left: right,
|
|
right: left,
|
|
top: bottom,
|
|
bottom: top
|
|
);
|
|
|
|
&[x-placement*="#{$placement}"] {
|
|
margin-#{map-get($opposite, $placement)}: $arrow-base;
|
|
|
|
.popper-arrow {
|
|
#{map-get($opposite, $placement)}: 0;
|
|
@include triangle(map-get($opposite, $placement), $arrow-base, $arrow-color, $arrow-border);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.has-arrow {
|
|
@include placement("left");
|
|
@include placement("right");
|
|
@include placement("top");
|
|
@include placement("bottom");
|
|
}
|
|
|
|
animation: ease-in fade-in 150ms
|
|
}
|
|
|