devextreme/less/sources/widgets/generic/fieldset.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/fieldset.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/
*/
.dx-size-default() {
    @GENERIC_FIELDSET_VERTICAL_MARGIN: 30px;
    @GENERIC_FIELDSET_HORIZONTAL_MARGIN: 20px;
    @GENERIC_FIELDSET_HEADER_VERTICAL_MARGIN: 20px;
    @GENERIC_FIELD_VERTICAL_MARGIN: 10px;
    @GENERIC_FIELD_LABELVALUE_SPACING: 15px;
}

.dx-size-compact() {
    @GENERIC_FIELDSET_VERTICAL_MARGIN: 15px;
    @GENERIC_FIELDSET_HORIZONTAL_MARGIN: 10px;
    @GENERIC_FIELDSET_HEADER_VERTICAL_MARGIN: 10px;
    @GENERIC_FIELD_VERTICAL_MARGIN: 5px;
    @GENERIC_FIELD_LABELVALUE_SPACING: 8px;
}

@GENERIC_FIELD_MIN_HEIGHT: @GENERIC_BASE_INLINE_WIDGET_HEIGHT;
@GENERIC_FIELD_VALUE_TOP_PADDING: @GENERIC_BASE_INLINE_WIDGET_TOP_PADDING;
@GENERIC_FIELD_VALUE_HORIZONTAL_PADDING: @GENERIC_BASE_INLINE_HORIZONTAL_PADDING;
@GENERIC_FIELD_VALUE_BOTTOM_PADDING: @GENERIC_BASE_INLINE_WIDGET_BOTTOM_PADDING;
@GENERIC_FIELDSET_ATTENTION_ICON_OFFSET: @GENERIC_BASE_INLINE_HORIZONTAL_PADDING + @GENERIC_INVALID_BADGE_SIZE;

@GENERIC_MOBILE_FIELDSET_VERTICAL_MARGIN: 20px;
@GENERIC_MOBILE_FIELDSET_HORIZONTAL_MARGIN: 15px;
@GENERIC_MOBILE_FIELDSET_HEADER_VERTICAL_MARGIN: 20px;
@GENERIC_MOBILE_FIELD_VERTICAL_MARGIN: 10px;


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

    .dx-field-label {
        color: @fieldset-field-label-color;
        cursor: default;
    }

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

            &:before {
                .dx-invalid-generic-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: (@GENERIC_FIELD_MIN_HEIGHT - @size)/2 0;
    }
}

// TODO: merge with .dx-fieldset-sizing after removing scope .dx-device-phone
.dx-fieldset-sizing-base() {
    .dx-field-label {
        padding: @GENERIC_FIELD_VALUE_TOP_PADDING @GENERIC_FIELD_LABELVALUE_SPACING @GENERIC_FIELD_VALUE_BOTTOM_PADDING 0;
    }

    .dx-field {
        min-height: @GENERIC_FIELD_MIN_HEIGHT;
        padding: 0;
    }

    .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, @GENERIC_CHECKBOX_SIZE);
        .dx-field-value-widget-position(dx-switch, @GENERIC_SWITCH_HEIGHT);
        .dx-field-value-widget-position(dx-slider, @GENERIC_SLIDER_HEIGHT);
        .dx-field-value-widget-position(dx-radiogroup, @GENERIC_RADIOGROUP_MIN_HEIGHT);

        &.dx-attention {
            padding: @GENERIC_FIELD_VALUE_TOP_PADDING @GENERIC_FIELD_VALUE_HORIZONTAL_PADDING @GENERIC_FIELD_VALUE_BOTTOM_PADDING;
            position: relative;
            padding-left: @GENERIC_FIELDSET_ATTENTION_ICON_OFFSET;

            &:before {
                left: 0;
            }
        }
    }

    .dx-field-value-static {
        padding: @GENERIC_FIELD_VALUE_TOP_PADDING @GENERIC_FIELD_VALUE_HORIZONTAL_PADDING @GENERIC_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(
    @GENERIC_FIELDSET_VERTICAL_MARGIN,
    @GENERIC_FIELDSET_HORIZONTAL_MARGIN,
    @GENERIC_FIELDSET_HEADER_VERTICAL_MARGIN,
    @GENERIC_FIELD_VERTICAL_MARGIN
);

.dx-device-mobile {
    .dx-fieldset-sizing(
        @GENERIC_MOBILE_FIELDSET_VERTICAL_MARGIN,
        @GENERIC_MOBILE_FIELDSET_HORIZONTAL_MARGIN,
        @GENERIC_MOBILE_FIELDSET_HEADER_VERTICAL_MARGIN,
        @GENERIC_MOBILE_FIELD_VERTICAL_MARGIN
    );
}