winter/modules/system/assets/ui/less/popover.less

//
// Dependencies
// --------------------------------------------------

@import "global.less";
@import "dropdown.less";
@import "icon.close.less";

//
// Popover
// --------------------------------------------------

@color-popover-bg:                           #ffffff;
@color-popover-border:                       @dropdown-border;
@color-popover-head-bg:                      mix(black, saturate(@brand-secondary, 20%), 25%);
@color-popover-head-text:                    #ffffff;
@color-popover-danger-bg:                    #ab2a1c;

div.control-popover {
    position: absolute;
    background-clip: content-box;
    left: 0;
    top: 0;
    z-index: 570;
    visibility: hidden;

    &.in, &.fade {
        visibility: visible;
    }

    &.fade {
        & > div {
            .opacity(0);
            .transition(~'all 0.3s, width 0s');
            .transform(~'scale(0.7)');
        }
    }

    &.fade.in {
        & > div {
            .opacity(1);
            .transform( ~'scale(1)');
        }
    }

    & > div {
        position: relative;
        background: @color-popover-bg;
        .box-shadow(2px 2px 2px rgba(0,0,0,0.05));
        .border-top-radius(5px);
        .border-bottom-radius(2px);

        &:after, &:before {
            position: absolute;
        }

        &:after { z-index: 601; }
        &:before { z-index: 600; }
    }

    &.placement-bottom > div {
        border: 1px solid @color-popover-border;

        &:after {
            .triangle(up, 15px, 8px, @color-popover-bg);
            left: 15px;
            top: -8px;
        }

        &:before {
            .triangle(up, 17px, 9px, @color-popover-border);
            left: 14px;
            top: -9px;
        }
    }

    &.placement-top > div {
        &:after {
            .triangle(down, 15px, 8px, @color-popover-bg);
            left: 15px;
            bottom: -8px;
        }

        &:before {
            .triangle(down, 17px, 9px, @color-popover-border);
            left: 14px;
            bottom: -9px;
        }
    }

    &.placement-left > div {
        &:after {
            .triangle(right, 8px, 15px, @color-popover-bg);
            right: -8px;
            top: 7px;
        }

        &:before {
            .triangle(right, 9px, 17px, @color-popover-border);
            right: -9px;
            top: 6px;
        }
    }

    &.placement-right > div {
        &:after {
            .triangle(left, 8px, 15px, @color-popover-bg);
            left: -8px;
            top: 7px;
        }

        &:before {
            .triangle(left, 9px, 17px, @color-popover-border);
            left: -9px;
            top: 6px;
        }
    }

    div.popover-body {
        padding: 15px;

        &.form-container {
            padding-bottom: 0;
        }
    }

    div.popover-footer {
        padding: 0 20px 20px 20px;
    }

    .popover-head {
        background: @color-popover-head-bg;
        padding: 14px 16px;
        position: relative;
        color: @color-popover-head-text;
        .border-top-radius(2px);

        &:before {
            z-index: 602;
            position: absolute;
        }

        h3 {
            font-size: @font-size-base;
            font-weight: bold;
            margin-top: 0;
            margin-bottom: 0;
            padding-right: 15px;
            line-height: 130%;
        }

        p {
            font-size: @font-size-base - 2;
            font-weight: normal;
            margin: 5px 0 0 0;

            &:empty {
                display: none;
            }
        }

        .close {
            float: none;
            position: absolute;
            right: 11px;
            top: 12px;
            color: @color-popover-head-text;
            outline: none;
            .opacity(0.4);

            &:hover {
                .opacity(1);
            }
        }

        .inspector-move-to-container {
            .opacity(0.4);
            position: absolute;
            top: 14px;
            right: 26px;
            float: none;
            color: #ffffff;
            cursor: pointer;
            text-decoration: none;

            &:hover {
                .opacity(1);
                color: #ffffff;
            }

            &:before {
                .transform(~'rotate(270deg)');
            }
        }
    }

    &.placement-bottom .popover-head:before {
        .triangle(up, 15px, 8px, @color-popover-head-bg);
        left: 15px;
        top: -8px;
    }

    &.placement-left .popover-head:before {
        .triangle(right, 8px, 15px, @color-popover-head-bg);
        right: -8px;
        top: 7px;
    }

    &.placement-right .popover-head:before {
        .triangle(left, 8px, 15px, @color-popover-head-bg);
        left: -8px;
        top: 7px;
    }

    &.popover-danger {
        > div {
            color: #fff;
            background-color: @color-popover-danger-bg;
        }

        &.placement-bottom > div:after {
            .triangle(up, 15px, 8px, @color-popover-danger-bg);
        }

        &.placement-top > div:after {
            .triangle(down, 15px, 8px, @color-popover-danger-bg);
        }

        &.placement-left > div:after {
            .triangle(right, 8px, 15px, @color-popover-danger-bg);
        }

        &.placement-right > div:after {
            .triangle(left, 8px, 15px, @color-popover-danger-bg);
        }

        .popover-head {
            background-color: @color-popover-danger-bg;
        }
    }

    div.popover-fixed-height {
        height: 300px;
    }
}

.popover-highlight {
    position: relative;
    z-index: 562 !important;
    &:hover, &:active, &:focus {
        z-index: 562 !important;
    }
}

div.popover-overlay {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 560;
}

@media (max-width: @screen-xs) {
    body.popover-open {

        overflow: hidden;

        .control-popover {
            overflow: auto;
            overflow-y: scroll;
            position: fixed;
            margin: 0;
            padding: 10px;
            width: 100% !important;
            z-index: 609;
            top: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            left: 0 !important;

            > div {
                padding: 0;
                min-height: 100%;
                .box-shadow(none);

                &:before, &:after {
                    display: none;
                }
            }

            div.popover-fixed-height {
                height: 100%;
                min-height: 100%;
            }

            .popover-head:before {
                display: none;
            }
        }
    }
}