devextreme/less/sources/widgets/base/recurrenceEditor.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/base/recurrenceEditor.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/
*/
@RECURRENCE_EDITOR_NUMBERBOX_WIDTH: 70px;
@RECURRENCE_EDITOR_SELECTBOX_WIDTH: 120px;

@GENERIC_SCHEDULER_RECURRENCE_REPEAT_END_CONTAINER_PADDING_TOP: 10px;

@BUTTON_CONTENT_PADDING: 8px;

@SCHEDULER_RECURRENCE_REPEAT_ON_WEEK_PADDING: 7px;
@SCHEDULER_RECURRENCE_BORDER_COLOR: @base-border-color;
@RECURRENCE_NUMBER_BOX_MARGIN_RIGHT: 11px;

.dx-recurrence-numberbox-interval,
.dx-recurrence-numberbox-day-of-month,
.dx-recurrence-selectbox-month-of-year,
.dx-recurrence-numberbox-repeat-count,
.dx-recurrence-datebox-until-date {
    float: left;
    position: relative !important; // stylelint-disable-line declaration-no-important

    &.dx-rtl {
        float: right;
    }
}

.dx-recurrence-button-group {
    width: 100%;

    .dx-button-content {
        padding: @BUTTON_CONTENT_PADDING;
    }

    .dx-buttongroup-wrapper > div {
        flex: 1;
    }
}


.dx-recurrence-numberbox-interval,
.dx-recurrence-numberbox-day-of-month,
.dx-recurrence-numberbox-repeat-count {
    width: @RECURRENCE_EDITOR_NUMBERBOX_WIDTH !important; // stylelint-disable-line declaration-no-important
}

.dx-recurrence-radiogroup-repeat-type-label,
.dx-recurrence-repeat-end-label {
    display: inline-block;
    vertical-align: top;
    line-height: 36px;
}

.dx-recurrence-repeat-end-label {
    float: left;
    width: auto;
    white-space: nowrap;
}

.dx-recurrence-selectbox-month-of-year {
    width: @RECURRENCE_EDITOR_SELECTBOX_WIDTH !important; // stylelint-disable-line declaration-no-important
    top: 0 !important; // stylelint-disable-line declaration-no-important
}

.dx-recurrence-radiogroup-repeat-type {
    margin: 0;

    .dx-item {
        padding-bottom: 10px;
    }

    &.dx-rtl .dx-recurrence-repeat-end-label {
        float: right;
    }
}


.dx-recurrence-editor-container {
    .dx-field-value:not(.dx-switch):not(.dx-checkbox):not(.dx-button),
    .dx-field-value-static {
        width: 100%;
    }

    .dx-field-value:not(.dx-widget) > .dx-checkbox {
        float: left;

        &.dx-rtl {
            float: right;
        }
    }

    .dx-field-label {
        width: auto;
        float: none;
        padding: 0;
    }
}

.dx-scheduler-appointment-popup {
    .dx-scheduler-recurrence-rule-item.dx-field-item {
        .dx-recurrence-selectbox-freq.dx-field-value {
            width: 100%;
        }
    }

    .dx-scheduler-recurrence-rule-item.dx-field-item.dx-label-v-align {
        .dx-recurrence-interval-field {
            display: block;
            margin-bottom: 2px;
        }

        .dx-recurrence-repeat-on {
            display: block;
            padding-top: 5px;

            .dx-recurrence-repeat-on-label {
                padding-top: 10px;
            }
        }

        .dx-recurrence-numberbox-interval-label,
        .dx-recurrence-repeat-on-label {
            padding-bottom: 0;
        }

        .dx-recurrence-numberbox-interval-label,
        .dx-recurrence-repeat-on-label,
        .dx-recurrence-repeat-end-container-label,
        .dx-recurrence-radiogroup-repeat-type {
            left: 0;
            position: inherit;
        }

        .dx-recurrence-numberbox-interval-label {
            padding-top: 0;
        }

        .dx-recurrence-repeat-end-container-label {
            padding-bottom: 2px;
            padding-top: 0;
        }

        .dx-recurrence-freq-field {
            margin-bottom: 0;
        }

        .dx-recurrence-repeat-end-container.dx-field {
            padding-top: 0;
            position: static;

            .dx-recurrence-radiogroup-repeat-type {
                margin-top: 0;
            }
        }
    }
}

.dx-scheduler-recurrence-rule-item.dx-field-item {
    border-top: 1px solid @SCHEDULER_RECURRENCE_BORDER_COLOR;

    .dx-recurrence-numberbox-interval-label,
    .dx-recurrence-repeat-on-label,
    .dx-recurrence-repeat-end-container-label {
        // NOTE: labels allignment in recurrence editor with the base offset
        left: @SCHEDULER_RECURRENCE_EDITOR_ITEM_OFFSET - 2px;
    }

    .dx-recurrence-radiogroup-repeat-type {
        left: @SCHEDULER_RECURRENCE_EDITOR_ITEM_OFFSET;
    }

    .dx-field-item-label:first-child {
        padding-top: @SCHEDULER_RECURRENCE_REPEAT_LABEL_OFFSET;
    }

    &.dx-label-h-align {
        .dx-recurrence-repeat-end-container.dx-field {
            padding-top: @GENERIC_SCHEDULER_RECURRENCE_REPEAT_END_CONTAINER_PADDING_TOP;
        }
    }
}

.dx-recurrence-repeat-end-wrapper {
    .dx-field-value {
        &.dx-recurrence-datebox-until-date {
            margin-left: 23px;
        }

        &.dx-recurrence-numberbox-repeat-count {
            margin-left: 11px;
            margin-right: @RECURRENCE_NUMBER_BOX_MARGIN_RIGHT;
        }
    }
}