devextreme/less/sources/widgets/generic/common.generic.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/generic/common.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-theme-marker {
    font-family: "dx.generic@{GENERIC_COLOR_POSTFIX}@{GENERIC_SIZE_POSTFIX}";
}

// stylelint-disable declaration-no-important
.dx-theme-accent-as-text-color {
    color: @base-accent !important;
}

.dx-theme-text-color {
    color: @base-text-color !important;
}

.dx-theme-background-color-as-text-color {
    color: @base-bg !important;
}

.dx-theme-border-color-as-text-color {
    color: @base-border-color !important;
}

.dx-theme-accent-as-background-color {
    background-color: @base-accent !important;
    fill: @base-accent !important;
}

.dx-theme-text-color-as-background-color {
    background-color: @base-text-color !important;
    fill: @base-text-color !important;
}

.dx-theme-background-color {
    background-color: @base-bg !important;
    fill: @base-bg !important;
}

.dx-theme-border-color-as-background-color {
    background-color: @base-border-color !important;
    fill: @base-border-color !important;
}

.dx-theme-accent-as-border-color {
    border-color: @base-accent !important;
}

.dx-theme-text-color-as-border-color {
    border-color: @base-text-color !important;
}

.dx-theme-background-color-as-border-color {
    border-color: @base-bg !important;
}

.dx-theme-border-color {
    border-color: @base-border-color !important;
}
// stylelint-enable declaration-no-important

.dx-base-typography() {
    color: @typography-color;
    font-weight: normal;
    font-size: @GENERIC_BASE_FONT_SIZE;
    font-family: @base-font-family;
    line-height: @GENERIC_BASE_LINE_HEIGHT;

    input,
    textarea {
        font-family: @base-font-family;
        line-height: @GENERIC_BASE_LINE_HEIGHT;
    }
}

.disabled-widget(@opacity: @base-disabled-opacity) { // stylelint-disable-line selector-class-pattern
    opacity: @opacity;
    .user-select(none);

    cursor: default;
}


.dx-size-default() {
    @GENERIC_INVALID_BADGE_SIZE: @GENERIC_BASE_ICON_SIZE;
    @GENERIC_PENDING_INDICATOR_SIZE: @GENERIC_INVALID_BADGE_SIZE + 4px;
    @GENERIC_DROPDOWNLIST_MIN_HEIGHT: @GENERIC_BASE_FONT_SIZE * @GENERIC_BASE_LINE_HEIGHT + 2 * @GENERIC_LIST_ITEM_VERTICAL_PADDING;
}
.dx-size-compact() {
    @GENERIC_INVALID_BADGE_SIZE: @GENERIC_BASE_ICON_SIZE + 2px;
    @GENERIC_PENDING_INDICATOR_SIZE: @GENERIC_INVALID_BADGE_SIZE + 4px;
    @GENERIC_DROPDOWNLIST_MIN_HEIGHT: @GENERIC_BASE_FONT_SIZE * @GENERIC_BASE_LINE_HEIGHT + 2 * @GENERIC_LIST_ITEM_VERTICAL_PADDING;
}
@GENERIC_INVALID_BADGE_HORIZONTAL_PADDING: (@GENERIC_BASE_INLINE_BORDEREDWIDGET_INNER_SIZE - @GENERIC_INVALID_BADGE_SIZE) / 2;
@GENERIC_INVALID_BADGE_HALFHORIZONTAL_PADDING: @GENERIC_INVALID_BADGE_HORIZONTAL_PADDING / 2;
@badge-invalid-bg: @base-invalid-color;


.badge-settings() {
    pointer-events: none;
    font-weight: bold;
    position: absolute;
    top: 50%;
    margin-top: -@GENERIC_INVALID_BADGE_SIZE/2;
    width: @GENERIC_INVALID_BADGE_SIZE;
    height: @GENERIC_INVALID_BADGE_SIZE;
    text-align: center;
    line-height: @GENERIC_INVALID_BADGE_SIZE;
    font-size: @GENERIC_BASE_FONT_SIZE - 1px;
}

.dx-invalid-generic-badge() {
    .badge-settings();

    background-color: @badge-invalid-bg;
    color: @base-inverted-text-color;
    content: '!';
    border-radius: 50%;
}

.dx-valid-generic-badge() {
    .badge-settings();

    font-family: 'DXIcons', sans-serif;
    color: @base-success;
    content: '\f005';
    .validation-badge-animation();
}

.dx-pending-indicator-generic() {
    pointer-events: none;
    position: absolute;
    top: 50%;
    margin-top: -@GENERIC_PENDING_INDICATOR_SIZE/2;
    width: @GENERIC_PENDING_INDICATOR_SIZE;
    height: @GENERIC_PENDING_INDICATOR_SIZE;
}

.dx-dropdownlist-list-appearance() {
    height: 100%;

    &.dx-popup-wrapper .dx-overlay-content {
        border-top-width: 0;
        border-bottom-width: 1px;

        &.dx-dropdowneditor-overlay-flipped {
            border-top-width: 1px;
            border-bottom-width: 0;
        }
    }

    .dx-popup-content {
        height: 100%;
        padding: 1px;
    }

    .dx-list {
        height: 100%;
        min-height: @GENERIC_DROPDOWNLIST_MIN_HEIGHT;

        &:not(.dx-list-select-decorator-enabled) {
            min-height: @GENERIC_DROPDOWNLIST_MIN_HEIGHT - (3px * 2);

            .dx-list-item-content {
                padding: @GENERIC_LIST_ITEM_VERTICAL_PADDING - 3px @GENERIC_LIST_ITEM_HORIZONTAL_PADDING - 1px;
            }
        }
    }

    .dx-list-select-all {
        padding: @GENERIC_LIST_ITEM_VERTICAL_PADDING + 2px 0 @GENERIC_LIST_ITEM_VERTICAL_PADDING - 2px;
    }

    .dx-list-item,
    .dx-empty-message {
        border-top: 0;

        &:last-of-type {
            border-bottom: none;
        }
    }
}