devextreme/less/sources/widgets/material/fieldset.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/fieldset.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/
*/
.dx-size-default() {
    @MATERIAL_FIELDSET_VERTICAL_MARGIN: 30px;
    @MATERIAL_FIELDSET_HORIZONTAL_MARGIN: 20px;
    @MATERIAL_FIELDSET_HEADER_VERTICAL_MARGIN: 20px;
    @MATERIAL_FIELD_VERTICAL_MARGIN: 30px;
    @MATERIAL_FIELD_LABELVALUE_SPACING: 15px;
}

.dx-size-compact() {
    @MATERIAL_FIELDSET_VERTICAL_MARGIN: 20px;
    @MATERIAL_FIELDSET_HORIZONTAL_MARGIN: 16px;
    @MATERIAL_FIELDSET_HEADER_VERTICAL_MARGIN: 16px;
    @MATERIAL_FIELD_VERTICAL_MARGIN: 20px;
    @MATERIAL_FIELD_LABELVALUE_SPACING: 12px;
}

@MATERIAL_FIELD_MIN_HEIGHT: @MATERIAL_BASE_INLINE_WIDGET_HEIGHT;
@MATERIAL_FIELD_VALUE_TOP_PADDING: 21px;
@MATERIAL_FIELD_VALUE_HORIZONTAL_PADDING: @MATERIAL_BASE_INLINE_HORIZONTAL_PADDING;
@MATERIAL_FIELD_VALUE_BOTTOM_PADDING: 20px;
@MATERIAL_FIELDSET_ATTENTION_ICON_OFFSET: @MATERIAL_BASE_INLINE_HORIZONTAL_PADDING + @MATERIAL_INVALID_BADGE_SIZE;

@MATERIAL_MOBILE_FIELDSET_VERTICAL_MARGIN: 20px;
@MATERIAL_MOBILE_FIELDSET_HORIZONTAL_MARGIN: 15px;
@MATERIAL_MOBILE_FIELDSET_HEADER_VERTICAL_MARGIN: 20px;
@MATERIAL_MOBILE_FIELD_VERTICAL_MARGIN: 10px;


.dx-fieldset-styling() {
    .dx-field {
        .dx-base-typography();
    }

    .dx-field-label {
        color: @fieldset-field-label-color;
        font-size: @MATERIAL_FORM_LABEL_FONT_SIZE;
        cursor: default;

        i {
            font-style: normal;
        }
    }

    .dx-field-value {
        &.dx-attention {
            color: @fieldset-field-value-invalid-color;
            padding-left: @MATERIAL_FIELDSET_ATTENTION_ICON_OFFSET;

            &:before {
                .dx-invalid-material-badge();
            }
        }
    }

    .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
    .dx-field-value-static {
        width: 60%;
    }
}

.dx-field-value-widget-position(@name, @size) {
    &.@{name},
    &:not(.dx-widget) > .@{name} {
        margin: (@MATERIAL_FIELD_MIN_HEIGHT - @size)/2 0;
    }
}

// TODO: merge with .dx-fieldset-sizing after removing scope .dx-device-phone
.dx-fieldset-sizing-base() {
    .dx-field {
        padding: 0;
        display: flex;
    }

    .dx-field-label {
        align-self: center;
        padding-right: @MATERIAL_FIELD_LABELVALUE_SPACING;
    }

    .dx-field-value {
        &.dx-widget,
        &:not(.dx-widget) > .dx-widget {
            margin: 0;
        }

        &:not(.dx-widget) {
            & > .dx-button,
            & > .dx-checkbox,
            & > .dx-switch {
                float: right;
            }
        }

        .dx-field-value-widget-position(dx-checkbox, @MATERIAL_CHECKBOX_SIZE);
        .dx-field-value-widget-position(dx-switch, @MATERIAL_SWITCH_HEIGHT);
        .dx-field-value-widget-position(dx-slider, @MATERIAL_SLIDER_HEIGHT);
        .dx-field-value-widget-position(dx-radiogroup, @MATERIAL_RADIOGROUP_MIN_HEIGHT);

        &.dx-attention {
            padding: @MATERIAL_FIELD_VALUE_TOP_PADDING @MATERIAL_FIELD_VALUE_HORIZONTAL_PADDING @MATERIAL_FIELD_VALUE_BOTTOM_PADDING;
            position: relative;
            padding-left: @MATERIAL_FIELDSET_ATTENTION_ICON_OFFSET;

            &:before {
                left: 0;
            }
        }
    }

    .dx-field-value-static {
        padding: @MATERIAL_FIELD_VALUE_TOP_PADDING @MATERIAL_FIELD_VALUE_HORIZONTAL_PADDING @MATERIAL_FIELD_VALUE_BOTTOM_PADDING;
    }
}

.dx-fieldset-sizing(@vertical-margin, @horizontal_margin, @header-vertical-margin, @field-vertical_margin) {
    .dx-fieldset {
        margin: @vertical-margin @horizontal_margin;
        padding: 0;

        .dx-rtl&,
        .dx-rtl & {
            .dx-field-value {
                &:not(.dx-widget) {
                    & > .dx-button,
                    & > .dx-checkbox,
                    & > .dx-switch {
                        float: left;
                    }
                }
            }
        }
    }

    .dx-fieldset-header {
        margin: 0 0 @header-vertical-margin 0;
        .dx-s-font-mixin();
    }

    .dx-field {
        margin: 0 0 @field-vertical_margin 0;
    }

    .dx-field:last-of-type {
        margin: 0;
    }
}

.dx-fieldset-styling();

.dx-fieldset-sizing-base();

.dx-fieldset-sizing(
    @MATERIAL_FIELDSET_VERTICAL_MARGIN,
    @MATERIAL_FIELDSET_HORIZONTAL_MARGIN,
    @MATERIAL_FIELDSET_HEADER_VERTICAL_MARGIN,
    @MATERIAL_FIELD_VERTICAL_MARGIN
);

.dx-device-mobile {
    .dx-fieldset-sizing(
        @MATERIAL_MOBILE_FIELDSET_VERTICAL_MARGIN,
        @MATERIAL_MOBILE_FIELDSET_HORIZONTAL_MARGIN,
        @MATERIAL_MOBILE_FIELDSET_HEADER_VERTICAL_MARGIN,
        @MATERIAL_MOBILE_FIELD_VERTICAL_MARGIN
    );
}