devextreme/less/sources/widgets/ios7/fieldset.ios7.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/ios7/fieldset.ios7.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/
*/
@IOS7_FIELDSET_HEADER_LINE_HEIGHT: 33px;
@IOS7_FIELDSET_HEADER_FONT_SIZE: 9pt;
@IOS7_FIELDSET_HEADER_FONT_WEIGHT: 600;


.dx-fieldset {
    margin: 35px 0 15px;
    padding-left: 15px;
    border-top: 1px solid @IOS7_FIELDSET_BORDER;
    border-bottom: 1px solid @IOS7_FIELDSET_BORDER;
    background: @IOS7_FIELDSET_BACKGROUND;

    .dx-hairlines & {
        border-top: 0.5px solid @IOS7_FIELDSET_BORDER;
        border-bottom: 0.5px solid @IOS7_FIELDSET_BORDER;
    }

    &:last-child {
        margin-bottom: 35px;
    }
}

.dx-fieldset-header {
    margin-top: -33px;
    text-transform: uppercase;
    line-height: @IOS7_FIELDSET_HEADER_LINE_HEIGHT;
    font-size: @IOS7_FIELDSET_HEADER_FONT_SIZE;
    color: @IOS7_FONT_LIGHTEN;
    font-weight: @IOS7_FIELDSET_HEADER_FONT_WEIGHT;
}

.dx-field {
    padding: 3px 10px 2px 0;
    min-height: 27px;
    border-bottom: 1px solid @IOS7_FIELDSET_BORDER;

    .dx-hairlines & {
        border-bottom-width: 0.5px;
    }

    &:last-child {
        border-bottom-color: transparent;
    }
}

.dx-field-label {
    padding-top: 8px;
    padding-bottom: 8px;
    color: @IOS7_FIELDSET_LABEL;
}

.dx-field-value {
    position: relative;
    padding-top: 8px;
    padding-bottom: 8px;
    color: @IOS7_FIELDSET_VALUE;
    text-align: right;

    &.dx-attention {
        color: @IOS7_FIELD_ATTENTION_COLOR;
        text-align: left;

        &:before {
            display: inline-block;
            content: '';
            width: 15px;
            height: 12px;
            background: @IOS7_ATTENTION_IMAGE;
        }
    }

    &.dx-widget {
        margin-top: 0;
        margin-bottom: 0;
        padding-right: 0;
        padding-left: 0;
    }

    &.dx-texteditor,
    &.dx-switch,
    &.dx-checkbox,
    &.dx-slider,
    &.dx-radiogroup {
        padding-top: 0;
        padding-bottom: 0;
    }

    &.dx-radiogroup {
        .dx-radiobutton {
            line-height: 35px;
        }

        .dx-radio-value-container {
            vertical-align: middle;
        }
    }

    &.dx-selectbox {
        .dx-selectbox-arrow-container {
            background-color: transparent;
            background-image: none;

            .dx-selectbox-arrow {
                border-top-color: @IOS7_FIELDSET_TEXTEDITOR;
            }
        }

        &.dx-state-active {
            .dx-selectbox-arrow-container {
                background-color: transparent;
                background-image: none;
            }
        }
    }

    &.dx-switch {
        margin-top: 2px;
        margin-right: 0;
    }

    &.dx-checkbox {
        margin-top: 5px;
        margin-right: 0;
    }

    &.dx-textbox {
        padding-top: 2px;
    }

    &.dx-autocomplete {
        margin: 0;
    }

    &.dx-button {
        color: @IOS7_BUTTON_TEXT;
        margin-top: 3px;
        padding: 0;
    }

    &.dx-numberbox {
        padding-top: 2px;
    }

    .dx-datebox .dx-texteditor-input {
        padding-top: 5px;
    }

    &.dx-lookup {
        margin-right: -10px;
        padding-right: 10px;
        min-height: 34px;
        padding-top: 3px;
        margin-top: -3px;
        padding-bottom: 3px;
        margin-bottom: -3px;
        height: 100%;
        text-align: left;
        box-sizing: content-box;

        .dx-lookup-field {
            padding: 8px 40px 8px 8px;
        }
    }

    &.dx-slider {
        overflow: visible;
        padding-top: 5px;
    }

    .dx-texteditor-container,
    .dx-dropdowneditor-icon,
    &.dx-tagbox-single-line,
    .dx-tagbox-single-line,
    .dx-dropdowneditor-input-wrapper {
        border: none;
        box-shadow: none;
    }

    &.dx-textarea {
        padding-top: 2px;
    }

    &.dx-tagbox {
        text-align: left;
    }

    &:not(.dx-widget) {
        padding-left: 8px;
        min-height: 34px;

        & > .dx-texteditor:not(.dx-textarea):not(.dx-tagbox),
        & > .dx-checkbox,
        & > .dx-switch,
        & > .dx-lookup,
        & > .dx-slider {
            position: absolute;
            right: 0;
        }

        & > .dx-checkbox,
        & > .dx-switch {
            .dx-rtl & {
                left: 0;
                right: auto;
            }
        }

        & > .dx-switch {
            margin-top: -6px;
            margin-right: 0;
        }

        & > .dx-checkbox {
            margin-top: -3px;
            margin-right: 0;
        }

        & > .dx-texteditor:not(.dx-textarea):not(.dx-tagbox),
        & > .dx-lookup,
        & > .dx-slider {
            width: 100%;
        }

        & > .dx-texteditor:not(.dx-textarea):not(.dx-tagbox):not(.dx-lookup) {
            margin-right: 0;
            margin-left: -6px;
            padding-top: 2px;
            padding-bottom: 2px;
            color: @IOS7_FIELDSET_TEXTEDITOR;
        }

        & > .dx-textarea,
        & > .dx-tagbox {
            margin: -6px 0 -5px -8px;
        }

        & > .dx-texteditor:not(.dx-textarea):not(.dx-tagbox):not(.dx-lookup) { // stylelint-disable-line no-duplicate-selectors
            margin-top: -8px;
        }

        & > .dx-autocomplete {
            margin: -8px -7px 0 0;
            padding-left: 0;
        }

        & > .dx-selectbox {
            .dx-selectbox-arrow-container {
                background-color: transparent;
                background-image: none;

                .dx-selectbox-arrow {
                    border-top-color: @IOS7_FIELDSET_TEXTEDITOR;
                }
            }

            &.dx-state-active {
                .dx-selectbox-arrow-container {
                    background-color: transparent;
                    background-image: none;
                }
            }
        }

        & > .dx-lookup {
            box-sizing: content-box;
            padding-right: 10px;
            margin-right: -10px;
            min-height: 39px;
            top: -3px;
            margin-left: -8px;
            text-align: left;

            .dx-lookup-field {
                padding: 6px 40px 6px 8px;
            }
        }

        & > .dx-radiogroup {
            margin: -8px 0 -9px -2px;

            &.dx-radiogroup-horizontal {
                display: inline-block;
                margin-bottom: -12px;
                width: 100%;
            }

            .dx-radiobutton {
                line-height: 35px;
            }
        }

        & > .dx-texteditor.dx-numberbox {
            margin-right: 0;
            margin-left: -6px;
            padding-top: 2px;
            padding-bottom: 2px;
        }

        & > .dx-texteditor.dx-autocomplete {
            margin-top: -8px;
            padding-top: 0;
            padding-bottom: 0;
        }

        & > .dx-slider {
            margin-top: -3px;
            margin-right: 0;
            margin-left: -6px;

            .dx-radio-value-container {
                vertical-align: middle;
            }
        }

        & > .dx-slider-tooltip-position-top,
        & > .dx-slider-tooltip-position-bottom {
            position: static;
            margin: -8px 0;
        }

        & > .dx-button {
            margin-top: -12px;
            margin-bottom: -8px;
        }

        & > .dx-selectbox.dx-selectbox-multiselect {
            margin-bottom: -9px;
            margin-left: -8px;
        }

        & > .dx-tagbox {
            text-align: left;
        }
    }
}

.dx-rtl {
    .dx-fieldset {
        padding-right: 15px;
        padding-left: 0;
    }

    .dx-field {
        padding: 3px 0 2px 10px;
    }
}

.dx-rtl .dx-field-value,
.dx-rtl.dx-field-value {
    text-align: left;

    &.dx-lookup {
        text-align: right;

        .dx-lookup-field {
            padding-right: 8px;
            padding-left: 40px;

            &:before {
                right: auto;
                left: 18px;
            }
        }
    }

    &.dx-tagbox {
        text-align: right;
    }

    &:not(.dx-widget) {
        padding-right: 8px;
        padding-left: 0;

        & > .dx-lookup {
            margin-left: 0;
            text-align: right;

            .dx-lookup-field {
                padding-right: 8px;
                padding-left: 40px;

                &:before {
                    right: auto;
                    left: 18px;
                }
            }
        }

        & > .dx-tagbox {
            text-align: right;
        }
    }
}

.dx-field-value-static {
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    color: @IOS7_FIELDSET_VALUE;
    text-align: right;
}

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

@media (min-resolution: 192dpi) {

    .dx-field-value {
        &:not(.dx-widget) {
            & > .dx-lookup {
                box-sizing: content-box;
                padding-right: 10px;
                margin-right: -10px;
                min-height: 41px;
                top: -3px;
                margin-left: -8px;
                text-align: left;

                .dx-lookup-field {
                    padding: 6px 40px 6px 8px;

                    &:before {
                        right: 14px;
                    }
                }
            }
        }
    }
}