devextreme/less/sources/widgets/material/form.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/form.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) "./responsiveBox.material.less";
@import (once) "./tabPanel.material.less";
@import (once) "./validation.material.less";
@import (once) "./scrollable.material.less";
@import (once) "./textBox.material.less";
@import (once) "./numberBox.material.less";
@import (once) "./dateBox.material.less";
@import (once) "./button.material.less";

.dx-size-default() {
    @MATERIAL_FORM_GROUP_CAPTION_BOTTOM_MARGIN: 6px;
    @MATERIAL_FORM_GROUP_CAPTION_BOTTOM_PADDING: 19px;
    @MATERIAL_FORM_TOP_LABEL_PADDING: 16px 0 3px;
}

.dx-size-compact() {
    @MATERIAL_FORM_GROUP_CAPTION_BOTTOM_MARGIN: 4px;
    @MATERIAL_FORM_GROUP_CAPTION_BOTTOM_PADDING: 10px;
    @MATERIAL_FORM_TOP_LABEL_PADDING: 4px 0 2px;
}

.dx-form-group-caption {
    font-size: @MATERIAL_FORM_GROUP_CAPTION_FONT_SIZE;
}

.dx-form-group-with-caption { // stylelint-disable-line no-duplicate-selectors
    & > .dx-form-group-content {
        border-top: 1px solid @form-group-border-color;
        padding-bottom: @MATERIAL_FORM_GROUP_CONTENT_PADDING_BOTTOM;
        padding-top: @MATERIAL_FORM_GROUP_CAPTION_BOTTOM_PADDING;
        margin-top: @MATERIAL_FORM_GROUP_CAPTION_BOTTOM_MARGIN;
    }
}

.dx-form > .dx-scrollable-wrapper > .dx-scrollable-container {
    margin-left: -10px;
    padding-left: 10px;
}

.dx-scrollable-content > .dx-layout-manager {
    padding-right: 5px;
}

.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    padding-right: 20px;
}

.dx-layout-manager .dx-field-item:not(.dx-first-col) {
    padding-left: 20px;
}

.dx-field-item {
    padding-bottom: 10px;
    font-size: @MATERIAL_FORM_LABEL_FONT_SIZE;

    .dx-field-item {
        &.dx-last-row {
            padding-bottom: 0;
        }
    }
}

.dx-field-item-content {
    .dx-switch {
        vertical-align: middle;
    }

    .dx-label-v-align & {
        .dx-textarea {
            margin-top: 6px;
        }

        .dx-invalid-message > .dx-overlay-wrapper,
        .dx-invalid-message > .dx-overlay-content {
            transform: translate(0, 0) !important; // stylelint-disable-line declaration-no-important
        }
    }
}

.dx-field-item-content-wrapper.dx-invalid {
    .dx-field-item-help-text {
        color: transparent;
    }
}

.dx-field-item-label-location-top {
    padding: @MATERIAL_FORM_TOP_LABEL_PADDING;
}

.dx-field-item-label-text {
    color: @form-field-item-color;
}

.dx-field-item-help-text {
    color: @form-field-item-color;
    padding: 6px 0 2px;
    font-style: normal;
}

.dx-field-item-required-mark {
    color: @form-field-required-color;
}

.dx-field-item-optional-mark {
    color: @form-field-mark-color;
}