devextreme/less/sources/widgets/material/common.material.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/material/common.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-theme-marker {
    font-family: "dx.material.@{MATERIAL_COLOR_ACCENT_MODIFICATOR}.@{MATERIAL_COLOR_THEME_MODIFICATOR}@{MATERIAL_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: @MATERIAL_BASE_FONT_SIZE;
    font-family: @base-font-family;
    line-height: @MATERIAL_BASE_LINE_HEIGHT;

    input,
    textarea {
        font-family: @base-font-family;
        line-height: @MATERIAL_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() {
    @MATERIAL_INVALID_BADGE_SIZE: @MATERIAL_BASE_ICON_SIZE - 2px;
}
.dx-size-compact() {
    @MATERIAL_INVALID_BADGE_SIZE: @MATERIAL_BASE_ICON_SIZE - 2px;
}
@MATERIAL_INVALID_BADGE_HORIZONTAL_PADDING: (@MATERIAL_BASE_INLINE_BORDEREDWIDGET_INNER_SIZE - @MATERIAL_INVALID_BADGE_SIZE) / 2;
@MATERIAL_INVALID_BADGE_HALFHORIZONTAL_PADDING: @MATERIAL_INVALID_BADGE_HORIZONTAL_PADDING / 2;

@MATERIAL_VALID_BADGE_FONT_SIZE: @MATERIAL_BASE_FONT_SIZE + 6px;
@badge-invalid-bg: @base-invalid-color;

.badge-settings() {
    pointer-events: none;
    position: absolute;
    top: 50%;
    margin-top: -@MATERIAL_INVALID_BADGE_SIZE/2;
    width: @MATERIAL_INVALID_BADGE_SIZE;
    height: @MATERIAL_INVALID_BADGE_SIZE;
    text-align: center;
    line-height: @MATERIAL_INVALID_BADGE_SIZE + 1;
    font-size: @MATERIAL_BASE_FONT_SIZE;
}

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

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

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

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

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

.dx-inkripple {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.dx-inkripple-wave {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    pointer-events: none;
}

.dx-inkripple-showing {
    transition: transform 0.1s linear;
    opacity: 1;
    transform: scale(1);
}

.dx-inkripple-hiding {
    transition: transform 0.1s linear, opacity 0.1s linear;
    transform: scale(1.01);
    opacity: 0;
}

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

    &.dx-popup-wrapper .dx-overlay-content {
        box-shadow: @dropdown-widgets-shadow;
        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: @MATERIAL_LIST_ITEM_HEIGHT;

        &:not(.dx-list-select-decorator-enabled) .dx-list-item-content {
            padding: @MATERIAL_LIST_ITEM_VERTICAL_PADDING @MATERIAL_LIST_ITEM_HORIZONTAL_PADDING - 1px;
        }
    }

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

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

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