155 lines
3.3 KiB
SCSS
155 lines
3.3 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 - .5px);
|
|
@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); }
|
|
|
|
.ui-popup {
|
|
$arrow-base: 8px;
|
|
$arrow-color: white;
|
|
$arrow-border: rgba(black, 0.2);
|
|
|
|
$popper-padding: .75rem;
|
|
|
|
padding: $popper-padding;
|
|
background: white;
|
|
//border: 1px solid black;
|
|
z-index: 1000;
|
|
box-shadow: rgba(black, .7) 0 1px 3px;
|
|
position: relative;
|
|
box-sizing: content-box;
|
|
|
|
max-width: 500px;
|
|
min-width: 200px;
|
|
|
|
border-radius: 2px;
|
|
|
|
.ui-popup__arrow {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
&.ui-popup--no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
.ui-popup__heading {
|
|
font-size: $font-size-sm;
|
|
font-weight: bold;
|
|
margin-bottom: .5rem;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
@mixin placement($placement) {
|
|
$opposite: (
|
|
left: right,
|
|
right: left,
|
|
top: bottom,
|
|
bottom: top
|
|
);
|
|
|
|
&[x-placement*="#{$placement}"] {
|
|
margin-#{map-get($opposite, $placement)}: $arrow-base;
|
|
|
|
.ui-popup__arrow {
|
|
#{map-get($opposite, $placement)}: 0;
|
|
@include triangle(map-get($opposite, $placement), $arrow-base, $arrow-color, $arrow-border);
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin arrows {
|
|
@include placement("left");
|
|
@include placement("right");
|
|
@include placement("top");
|
|
@include placement("bottom");
|
|
}
|
|
|
|
&.ui-popup--arrow {
|
|
@include arrows;
|
|
}
|
|
|
|
&.ui-popup--tooltip {
|
|
background: $dark;
|
|
color: white;
|
|
padding: .5rem .75rem;
|
|
font-size: $small-font-size;
|
|
font-weight: bold;
|
|
min-width: 0;
|
|
box-shadow: none;
|
|
|
|
&.ui-popup--arrow {
|
|
$arrow-color: $dark;
|
|
$arrow-border: none;
|
|
$arrow-base: 6px;
|
|
|
|
@include arrows;
|
|
|
|
.ui-popup__arrow::before {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@include media-breakpoint-down('sm') {
|
|
.ui-popup {
|
|
margin-left: $spacer;
|
|
margin-right: $spacer;
|
|
}
|
|
}
|