mnr-table/src/styles/filter.less

Render table by using class decorator, includes several filter options.

@import '~rc-calendar/assets/index.css';
@rcCalendarClass: rc-calendar;
@filterClass: tbl-filter;
@filterInputClass: tbl-filter-input;

.@{rcCalendarClass} {
    width: inherit;
    .@{rcCalendarClass}-body {
        height: inherit;
    }
}

.@{filterClass} {
    display: inline-block;
    cursor: pointer;
    z-index: 2;
}

.@{filterInputClass} {
    position: absolute;
    top: 100%;
    left: 0;
    width: 215px;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
    display: block;
    opacity: 0;
    transform: perspective(0) rotateX(-90deg);
    transition: transform 0.5s ease, opacity 0.6s ease, max-height 0.6s step-end, max-width 0.6s step-end,
        padding 0.6s step-end;
    transform-origin: 0% 0%;
    &.date {
        width: inherit;
    }
    &.show {
        overflow: visible;
        transition: transform 0.5s ease, opacity 0.2s ease, max-height 0s step-end, max-width 0s step-end,
            padding 0s step-end;
        overflow: visible;
        opacity: 1;
        transform: perspective(0) rotateX(0deg);
    }
    .checked-list-box {
        margin: 0;
        padding: 0;
    }
}