devextreme/less/sources/widgets/generic/popup.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/popup.generic.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@import (once) "./button.generic.less";
@import (once) "./overlay.generic.less";
@import (once) "./toolbar.generic.less";

.dx-size-default() {
    @GENERIC_POPUP_CLOSEBUTTON_SIZE: 23px;
    @GENERIC_POPUP_CLOSEBUTTON_ICON_SIZE: 15px;

    @GENERIC_POPUP_CONTENT_PADDING: 20px;
    @GENERIC_POPUP_BUTTON_MARGIN: 0 10px;

    @GENERIC_POPUP_TOOLBAR_ITEM_SPACING: 10px;
    @GENERIC_POPUP_TOOLBARTOP_PADDING: 6px 20px;
    @GENERIC_POPUP_TOOLBARBOTTOM_PADDING: 20px;
}
.dx-size-compact() {
    @GENERIC_POPUP_CLOSEBUTTON_SIZE: 19px;
    @GENERIC_POPUP_CLOSEBUTTON_ICON_SIZE: 11px;

    @GENERIC_POPUP_CONTENT_PADDING: 10px;
    @GENERIC_POPUP_BUTTON_MARGIN: 0 5px;

    @GENERIC_POPUP_TOOLBAR_ITEM_SPACING: 5px;
    @GENERIC_POPUP_TOOLBARTOP_PADDING: 2px 10px;
    @GENERIC_POPUP_TOOLBARBOTTOM_PADDING: 10px;
}
@GENERIC_POPUP_CLOSEBUTTON_OFFSET: (@GENERIC_POPUP_CLOSEBUTTON_SIZE - @GENERIC_POPUP_CLOSEBUTTON_ICON_SIZE) / 2;

@GENERIC_POPUP_TOOLBAR_HEIGHT: @GENERIC_BASE_INLINE_WIDGET_HEIGHT;
@GENERIC_POPUP_TOOLBAR_LABEL_FONT_SIZE: @GENERIC_M_FONT_SIZE;

@GENERIC_POPUP_CLOSEBUTTON_BORDER_WEIGHT: @GENERIC_BASE_BORDER_WIDTH;
@GENERIC_POPUP_CLOSEBUTTON_ICON_CONTAINER_SIZE: @GENERIC_POPUP_CLOSEBUTTON_SIZE - @GENERIC_POPUP_CLOSEBUTTON_BORDER_WEIGHT * 2;

@GENERIC_MOBILE_POPUP_CLOSEBUTTON_SIZE: 37px;
@GENERIC_MOBILE_POPUP_CLOSEBUTTON_ICON_SIZE: 15px;
@GENERIC_MOBILE_POPUP_CLOSEBUTTON_OFFSET: (@GENERIC_MOBILE_POPUP_CLOSEBUTTON_SIZE - @GENERIC_MOBILE_POPUP_CLOSEBUTTON_ICON_SIZE) / 2;
@GENERIC_MOBILE_POPUP_CLOSEBUTTON_ICON_CONTAINER_SIZE: @GENERIC_MOBILE_POPUP_CLOSEBUTTON_SIZE - @GENERIC_POPUP_CLOSEBUTTON_BORDER_WEIGHT * 2;

.dx-popup-wrapper {
    & > .dx-overlay-content {
        border: 1px solid @overlay-border-color;
        background: @overlay-content-bg;
        box-shadow: 0 6px 12px @overlay-content-shadow-color;
        border-radius: @popup-border-radius;
    }

    & > .dx-popup-fullscreen {
        border-radius: 0;
    }
}

.dx-popup-title {
    position: relative;
    padding: @GENERIC_POPUP_TOOLBARTOP_PADDING;
    min-height: 28px;
    border-bottom: 1px solid @popup-title-border-color;
    background: @popup-title-bg;
    color: @popup-title-color;

    &.dx-toolbar {
        .dx-toolbar-sizing(@GENERIC_POPUP_TOOLBAR_HEIGHT, @GENERIC_POPUP_TOOLBARTOP_PADDING, @GENERIC_POPUP_TOOLBAR_LABEL_FONT_SIZE, @GENERIC_POPUP_TOOLBAR_ITEM_SPACING );

        box-shadow: none;
    }

    .dx-closebutton {
        display: block;

        .dx-button-content {
            padding: 0;
        }

        .dx-icon {
            box-sizing: border-box;
        }

        .dx-button-styling();
        .dx-button-styling-clear();

        .dx-closebutton-sizing(@size, @offset, @iconSize, @iconContainerSize) {
            width: @size;
            height: @size;
            margin: 0 (-@offset) 0 @offset;

            .dx-rtl & {
                margin: 0 @offset 0 (-@offset);
            }

            .dx-icon {
                .dx-icon-sizing(@iconSize, @iconContainerSize);
            }
        }

        .dx-closebutton-sizing(
            @GENERIC_POPUP_CLOSEBUTTON_SIZE,
            @GENERIC_POPUP_CLOSEBUTTON_OFFSET,
            @GENERIC_POPUP_CLOSEBUTTON_ICON_SIZE,
            @GENERIC_POPUP_CLOSEBUTTON_ICON_CONTAINER_SIZE);

        .dx-device-mobile & {
            .dx-closebutton-sizing(
                @GENERIC_MOBILE_POPUP_CLOSEBUTTON_SIZE,
                @GENERIC_MOBILE_POPUP_CLOSEBUTTON_OFFSET,
                @GENERIC_MOBILE_POPUP_CLOSEBUTTON_ICON_SIZE,
                @GENERIC_MOBILE_POPUP_CLOSEBUTTON_ICON_CONTAINER_SIZE);
        }
    }
}

.dx-popup-content {
    padding: @GENERIC_POPUP_CONTENT_PADDING;

    & > .dx-button {
        margin: @GENERIC_POPUP_BUTTON_MARGIN;
    }
}

.dx-popup-bottom {
    background: @popup-bottom-bg;
    color: @popup-bottom-color;

    &.dx-toolbar {
        .dx-toolbar-sizing(
            @GENERIC_POPUP_TOOLBAR_HEIGHT,
            @GENERIC_POPUP_TOOLBARBOTTOM_PADDING,
            @GENERIC_POPUP_TOOLBAR_LABEL_FONT_SIZE,
            @GENERIC_POPUP_TOOLBAR_ITEM_SPACING
        );

        .dx-device-mobile & {
            .dx-toolbar-sizing(
                @GENERIC_POPUP_TOOLBAR_HEIGHT,
                @GENERIC_POPUP_TOOLBARBOTTOM_PADDING,
                @GENERIC_POPUP_TOOLBAR_LABEL_FONT_SIZE,
                @GENERIC_POPUP_TOOLBAR_ITEM_SPACING
            );
        }
    }

    .dx-button {
        min-width: 100px;
    }
}

.dx-popup-content.dx-dialog-content {
    min-width: 220px - 2 * @GENERIC_POPUP_CONTENT_PADDING;
    padding: @GENERIC_POPUP_CONTENT_PADDING;
}

.dx-dialog-message {
    padding: 0;
}