boundless-popover/style.styl

A non-blocking container positioned to a specific anchor element.

@require "variables"

unless flat-build {
    @require "node_modules/boundless-dialog/style"
}

// Skin-specific styles go here. Demo-specific styles go in demo/style.styl.

caret-size = 16px
caret-adjustment = -3px

.b-popover {
    align-items: flex-start;
    display: flex;
    flex-direction: column;

    .b-dialog {
        background: Popover-backgroundColor;
        border: 1px solid Popover-borderColor;
        box-shadow: 1px 2px 3px Popover-boxShadowColor;
        color: Popover-color;
    }
}

.b-popover-caret {
    position: relative;
    transform-origin: center;
    height: Popover-caret-height;
    width: Popover-caret-width;
}

.b-popover-caret-border {
    fill: Popover-caret-borderColor;
}

.b-popover-caret-fill {
    fill: Popover-caret-backgroundColor;
}

// above the anchor
.b-popover-anchor-y-start.b-popover-self-y-end {
    .b-popover-caret {
        margin-top: caret-adjustment;
        order: 2;
        transform: rotate(180deg);
    }
}

// below the anchor
.b-popover-anchor-y-end.b-popover-self-y-start {
    .b-popover-caret {
        margin-bottom: caret-adjustment;
    }
}

// left of the anchor
.b-popover-anchor-x-start.b-popover-self-x-end {
    flex-direction: row;

    .b-popover-caret {
        margin-left: caret-adjustment;
        order: 2;
        transform: rotate(90deg);
    }
}

// right of the anchor
.b-popover-anchor-x-end.b-popover-self-x-start {
    flex-direction: row;

    .b-popover-caret {
        margin-right: caret-adjustment;
        transform: rotate(-90deg);
    }
}