artistry/src/styl/popover/popover.styl

A powerful and configurable stylesheet

@require "popover-settings.styl";
// Added a 1px offset to cover in Firefox
$popover-arrow-cover-offset = 1;

$popover-diagonal = $popover-spacing * math(2, 'sqrt');
$popover-diagonal-cover = ($popover-spacing + $popover-arrow-cover-offset) * math(2, 'sqrt');
$quarter-pi = 3.141592653589793 / 4;
$popover-box-shadow-x-prime = $popover-box-shadow-x * cos($quarter-pi) + $popover-box-shadow-y * sin($quarter-pi);
$popover-box-shadow-y-prime = -1 * $popover-box-shadow-x * sin($quarter-pi) + $popover-box-shadow-y * cos($quarter-pi);

$popover-arrow-cover = ($popover-diagonal-cover / 2);
$popover-arrow-cover-position = ($popover-diagonal-cover / 2) - ($popover-arrow-cover-offset * math(2, 'sqrt'));

.popover {
    --math-sqrt-2: math(2, 'sqrt');
    --math-pi: 3.141592653589793;
    --math-quarter-pi: 3.141592653589793 / 4;
    --math-cos-quarter-pi: cos(3.141592653589793 / 4);
    --math-sin-quarter-pi: sin(3.141592653589793 / 4);
}

// TODO: Prevent mouse-down on trigger when popover is open
.popover-trigger {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.popover {
    display: block;
    position: absolute;
    min-width: 30vw;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    text-transform: none;
    transition: visibility 0s 0.3s, opacity 0.3s;
    -webkit-backface-visibility: hidden;
    -webkit-filter: unquote("blur(0)");
    cursor: default;
    &.popover-top {
        bottom: 100%;
        padding-bottom: $popover-spacing;
        left: 50%;
        transform: translateX(-50%);
    }
    &.popover-right {
        left: 100%;
        padding-left: $popover-spacing;
        top: 50%;
        transform: translateY(-50%);
    }
    &.popover-bottom {
        top: 100%;
        padding-top: $popover-spacing;
        left: 50%;
        transform: translateX(-50%);
    }
    &.popover-left {
        right: 100%;
        padding-right: $popover-spacing;
        top: 50%;
        transform: translateY(-50%);
    }
    .popover-top.popover-align-left&,
    .popover-bottom.popover-align-left& {
        left: 0;
        transform: none;
    }
    .popover-top.popover-align-right&,
    .popover-bottom.popover-align-right& {
        right: 0;
        left: auto;
        transform: none;
    }
    .popover-right.popover-align-top&,
    .popover-left.popover-align-top& {
        top: 0;
        transform: none;
    }
    .popover-right.popover-align-bottom&,
    .popover-left.popover-align-bottom& {
        top: auto;
        bottom: 0;
        transform: none;
    }
    &.popover-fill {
        &.popover-top,
        &.popover-bottom {
            min-width: auto;
            left: 0;
            right: 0;
            transform: none;
        }
    }
    &:before {
        content: '';
        display: block;
        position: absolute;
        height: $popover-diagonal;
        width: $popover-diagonal;
        border: $popover-border-width solid $popover-border-color;
        background-color: $popover-border-color;
        z-index: -1;
        box-shadow: $popover-box-shadow-x-prime $popover-box-shadow-y-prime $popover-box-shadow-additional;
        -webkit-backface-visibility: hidden;
        -webkit-filter: unquote("blur(0)");
        .popover-top& {
            transform: translateY($popover-diagonal / 2) translateX(-50%) rotate(45deg);
            left: 50%;
            bottom: $popover-spacing;
        }
        .popover-right& {
            transform: translateX(-1 * $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
        }
        .popover-bottom& {
            transform: translateX(-1 * $popover-diagonal / 2) translateY(-50%) rotate(45deg);
            left: 50%;
        }
        .popover-left& {
            transform: translateX($popover-diagonal / 2) translateY(-50%) rotate(45deg);
            top: 50%;
            right: $popover-spacing;
        }
        .popover-top.popover-align-left&,
        .popover-bottom.popover-align-left& {
            left: $popover-padding + $popover-spacing;
        }
        .popover-top.popover-align-right&,
        .popover-bottom.popover-align-right& {
            left: auto;
            right: $popover-padding;
        }
        .popover-right.popover-align-top&,
        .popover-left.popover-align-top& {
            top: $popover-padding + $popover-spacing + $popover-border-width;
        }
        .popover-right.popover-align-bottom&,
        .popover-left.popover-align-bottom& {
            top: auto;
            bottom: $popover-padding - $popover-border-width;
        }
    }
    &:after {
        content: '';
        display: block;
        position: absolute;
        border: $popover-arrow-cover solid $popover-background-color;
        z-index: 1;
        -webkit-backface-visibility: hidden;
        -webkit-filter: unquote("blur(0)");
        .popover-top& {
            border-top-color: transparent;
            border-left-color: transparent;
            transform: translateY($popover-arrow-cover-position - $popover-border-width) translateX(-50%) rotate(45deg);
            left: 50%;
            bottom: $popover-spacing;
        }
        .popover-right& {
            border-top-color: transparent;
            border-right-color: transparent;
            transform: translateX($popover-border-width - $popover-arrow-cover-position) translateY(-50%) rotate(45deg);
            top: 50%;
        }
        .popover-bottom& {
            border-right-color: transparent;
            border-bottom-color: transparent;
            transform: translateY($popover-border-width - $popover-arrow-cover-position) translateX(-50%) rotate(45deg);
            left: 50%;
            top: $popover-spacing;
        }
        .popover-left& {
            border-left-color: transparent;
            border-bottom-color: transparent;
            transform: translateX($popover-arrow-cover-position - $popover-border-width) translateY(-50%) rotate(45deg);
            top: 50%;
            right: $popover-spacing;
        }
        .popover-top.popover-align-left&,
        .popover-bottom.popover-align-left& {
            left: $popover-padding + $popover-spacing;
        }
        .popover-top.popover-align-right&,
        .popover-bottom.popover-align-right& {
            left: auto;
            right: $popover-padding - ($popover-arrow-cover-offset * math(2, 'sqrt'));
        }
        .popover-right.popover-align-top&,
        .popover-left.popover-align-top& {
            top: $popover-padding + $popover-spacing + $popover-border-width;
        }
        .popover-right.popover-align-bottom&,
        .popover-left.popover-align-bottom& {
            top: auto;
            bottom: $popover-padding - $popover-border-width - ($popover-arrow-cover-offset * math(2, 'sqrt'));
        }
    }
    & .popover-content {
        padding: 0;
        background-color: $popover-background-color;
        color: $popover-color;
        border: $popover-border-width solid $popover-border-color;
        border-radius: $popover-border-radius;
        box-shadow: $popover-box-shadow-x $popover-box-shadow-y $popover-box-shadow-additional;
    }
    *:hover:not(.popover-closed) > &:not(.popover-closed),
    *.popover-open > &:not(.popover-closed),
    &.popover-open {
        opacity: 1;
        visibility: visible;
        transition: visibility 0.3s, opacity 0.3s;
    }

    &.popover-space {
        .popover-content {
            padding: $popover-padding;
        }
    }
}

.popover-mask {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    cursor: default;
    user-select: none;
    *.popover-open > &:not(.popover-closed),
    &.popover-open {
        display: block;
    }
}