devextreme/less/sources/widgets/common/popover.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/popover.less)
* Version: 19.2.6
* Build date: Thu Jan 30 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./popup.less";

.dx-popover-arrow-size(@width) {
    @SQRT_2: 1.4142;
    @POPOVER_ARROW_WIDTH: @width;
    @POPOVER_ARROW_HEIHT: @POPOVER_ARROW_WIDTH / 2;

    .dx-popover-wrapper {
        .dx-popover-arrow:after {
            width: @POPOVER_ARROW_WIDTH / @SQRT_2;
            height: @POPOVER_ARROW_WIDTH / @SQRT_2;
        }

        &.dx-position-top,
        &.dx-position-bottom {
            .dx-popover-arrow {
                width: @POPOVER_ARROW_WIDTH;
                height: @POPOVER_ARROW_HEIHT;
            }
        }

        &.dx-position-right,
        &.dx-position-left {
            .dx-popover-arrow {
                width: @POPOVER_ARROW_HEIHT;
                height: @POPOVER_ARROW_WIDTH;
            }
        }
    }
}

.dx-popover-arrow-size(20px);

.dx-popover-arrow {
    position: absolute;
    z-index: 2000;
    overflow: hidden;

    &:after {
        position: absolute;
        display: block;
        overflow: hidden;
        content: " ";
        transform: rotate(-45deg);
    }
}

.dx-popover-wrapper {
    &.dx-position-top .dx-popover-arrow:after {
        top: 0;
        left: 0;
        transform-origin: top left;
    }

    &.dx-position-bottom .dx-popover-arrow:after {
        right: 0;
        bottom: 0;
        transform-origin: bottom right;
    }

    &.dx-position-left .dx-popover-arrow:after {
        bottom: 0;
        left: 0;
        transform-origin: bottom left;
    }

    &.dx-position-right .dx-popover-arrow:after {
        top: 0;
        right: 0;
        transform-origin: top right;
    }

    .dx-overlay-content {
        overflow: visible;
    }

    .dx-popup-content {
        overflow: hidden;
    }
}

.dx-device-ios {
    .dx-popover-arrow:after {
        // NOTE: fix arrow rendering on ios (T178931)
        // stylelint-disable-next-line property-no-vendor-prefix
        -webkit-transform: rotate(-45deg) translateZ(0);
    }
}