devextreme/less/sources/widgets/material/popup.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/popup.material.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.material.less";
@import (once) "./overlay.material.less";
@import (once) "./toolbar.material.less";

.dx-size-default() {
    @MATERIAL_POPUP_CONTENT_PADDING: 24px;
    @MATERIAL_POPUP_CONTENT_WITHTITLE_TOP_PADDING: 20px;

    @MATERIAL_POPUP_BUTTON_MARGIN: 0 8px;

    @MATERIAL_POPUP_TOOLBAR_ITEM_SPACING: 8px;
    @MATERIAL_POPUP_TOOLBARTOP_PADDING: 0 8px 0 24px;
    @MATERIAL_POPUP_TOOLBARBOTTOM_PADDING: 0 8px 0 24px;
    @MATERIAL_POPUP_BOTTOM_TOOLBAR_HEIGHT: 52px;
}

.dx-size-compact() {
    @MATERIAL_POPUP_CONTENT_PADDING: 16px;
    @MATERIAL_POPUP_CONTENT_WITHTITLE_TOP_PADDING: 14px;

    @MATERIAL_POPUP_BUTTON_MARGIN: 0 8px;

    @MATERIAL_POPUP_TOOLBAR_ITEM_SPACING: 8px;
    @MATERIAL_POPUP_TOOLBARTOP_PADDING: 0 8px 0 16px;
    @MATERIAL_POPUP_TOOLBARBOTTOM_PADDING: 0 8px 0 16px;
    @MATERIAL_POPUP_BOTTOM_TOOLBAR_HEIGHT: 44px;
}

@MATERIAL_POPUP_TOOLBAR_LABEL_FONT_SIZE: @MATERIAL_M_FONT_SIZE;

@MATERIAL_POPUP_TITLE_BOTTOM_MARGIN: @MATERIAL_POPUP_CONTENT_WITHTITLE_TOP_PADDING - @MATERIAL_POPUP_CONTENT_PADDING;

.dx-popup-wrapper {
    & > .dx-overlay-content {
        background: @overlay-content-bg;
        box-shadow: 0 11px 15px -7px fade(@base-shadow-color, 20%), 0 24px 38px 3px fade(@base-shadow-color, 14%), 0 9px 46px 8px fade(@base-shadow-color, 12%);
        border-radius: @popup-border-radius;
    }

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

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

    &.dx-toolbar {
        .dx-toolbar-sizing(@MATERIAL_TOOLBAR_HEIGHT, @MATERIAL_POPUP_TOOLBARTOP_PADDING, @MATERIAL_POPUP_TOOLBAR_LABEL_FONT_SIZE, @MATERIAL_POPUP_TOOLBAR_ITEM_SPACING );

        box-shadow: none;

        .dx-button.dx-closebutton {
            display: block;
        }
    }
}

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

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

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

    &.dx-toolbar {
        .dx-toolbar-sizing(
            @MATERIAL_POPUP_BOTTOM_TOOLBAR_HEIGHT,
            @MATERIAL_POPUP_TOOLBARBOTTOM_PADDING,
            @MATERIAL_POPUP_TOOLBAR_LABEL_FONT_SIZE,
            @MATERIAL_POPUP_TOOLBAR_ITEM_SPACING
        );

        .dx-device-mobile & {
            .dx-toolbar-sizing(
                @MATERIAL_POPUP_BOTTOM_TOOLBAR_HEIGHT,
                @MATERIAL_POPUP_TOOLBARBOTTOM_PADDING,
                @MATERIAL_POPUP_TOOLBAR_LABEL_FONT_SIZE,
                @MATERIAL_POPUP_TOOLBAR_ITEM_SPACING
            );
        }
    }
}

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

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