File: modules/system/assets/ui/less/filter.less

//
// Dependencies
// --------------------------------------------------

@import "global.less";
@import "popover.less";
@import "loader.less";

//
// Filters
// --------------------------------------------------

@color-filter-bg:                            #ECF0F1;
@color-filter-bg-active:                     #6AAB55;
@color-filter-border:                        #D7DBDD;
@color-filter-text:                          rgba(0,0,0,.6);
@color-filter-text-active:                   #000000;
@color-filter-items-bg:                      #fafafa;
@color-filter-items-bg-hover:                @brand-secondary;

//
// Filters
// --------------------------------------------------

.control-filter {
    padding: 0 (@padding-standard / 2);
    color: @color-filter-text;
    background-color: @color-filter-bg;
    border-top: 1px solid @color-filter-border;
    border-bottom: 1px solid @color-filter-border;

    font-size: @font-size-base - 1;

    .custom-checkbox label {
        font-size: @font-size-base - 1;
        color: @color-filter-text;
    }

    a {
        text-decoration: none;
        color: @color-filter-text;
    }

    > .filter-scope {
        display: inline-block;
        padding: (@padding-standard / 2);

        .filter-label {
            margin-right: 5px;
        }

        .filter-setting {
            display: inline-block;
            margin-right: 5px;
            .transition(color 0.6s);
        }

        &.loading-indicator-container.in-progress {
            pointer-events: none;
            cursor: default;

            .loading-indicator {
                background: transparent;

                > span {
                    left: unset;
                    right: 0;
                    top: 10px;
                    background-color: @color-filter-bg;
                    border-radius: 50%;
                    margin-top: 0;
                    width: 20px;
                    height: 20px;
                    background-size: 15px 15px;
                }
            }
        }

        &:after {
            font-size: 14px;
            .icon(@angle-down);
        }

        &.active {
            .filter-setting {
                padding-left: 5px;
                padding-right: 5px;
                color: #FFF;
                background-color: @color-filter-bg-active;
                .border-radius(4px);
                .transition(~'color 1s, background-color 1s');
            }
        }

        &.checkbox {
            padding-left: 35px;
            &, label {
                margin-bottom: 0;
            }

            label {
                padding-left: 25px;
            }

            &:after {
                content: '';
            }
        }

        &.text {
            padding: 0 10px;

            &, label {
                margin: 0;
            }

            .form-control {
                display: inline;
                width: auto;
                height: 30px;
                margin-left: 10px;
            }

            &:after {
                content: '';
            }

            .loading-indicator {
                top: -2px;
                right: 7px;
                left: auto;
            }
        }

        &.button-group {
            display: inline-flex;
            border: 2px solid @brand-primary;
            border-radius: 4px;
            overflow: hidden;
            padding: 0;
            margin: 5px 0;
            vertical-align: baseline;

            &:after {
                content: "";
            }

            button {
                flex: 1;
                margin: 0;
                border: none;
                border-right: 2px solid @brand-primary;
                border-radius: 0;
                background: @color-filter-bg;
                color: @color-filter-text;
                font-size: @font-size-base - 1;
                font-weight: 600;
                padding: 3px 10px;
                line-height: 1.5;
                transition: background-color 0.2s ease, color 0.2s ease;

                &:last-child {
                    border-right: none;
                }

                &.btn-primary {
                    background: @brand-primary;
                    color: #fff;
                }

                &:hover:not(.btn-primary) {
                    background: lighten(@brand-primary, 5%);
                    color: #fff;
                }
            }
        }

        &.dropdown {
            padding: 0 0 0 10px;
            vertical-align: middle;

            &:after {
                content: "";
            }

            .select2-container--default {
                display: inline-block;
                vertical-align: text-bottom;

                .select2-selection__clear {
                    float: none;
                    margin-right: 3px;
                }

                .select2-selection--single {
                    height: 1em;
                    line-height: 1;
                    box-sizing: content-box;

                    .select2-selection__placeholder {
                        margin-right: 5px;
                    }

                    .select2-selection__arrow {
                        right: 10px;
                    }
                }
            }
        }

        &:hover, &.active {
            &, &.custom-checkbox label {
                color: @color-filter-text-active;
            }

            .filter-label {
                color: @color-filter-text-active;
            }

            &.active .filter-setting {
                background-color: darken(@color-filter-bg-active, 5%);
            }
        }
    }

    > .filter-has-popover {
        display: inline-block;
        padding: (@padding-standard / 2);
        .filter-label {}
        .filter-setting {
            display: inline-block;
            .transition(color 0.6s);
        }

        &:after {
            font-size: 14px;
            .icon(@angle-down);
        }

        &.active {
            .filter-setting {
                padding-left: 5px;
                padding-right: 5px;
                color: #FFF;
                background-color: @color-filter-bg-active;
                .border-radius(4px);
                .transition(~'color 1s, background-color 1s');
            }
        }

        &:hover {
            color: #000;
            .filter-label { color: @color-filter-text; }
            &.active .filter-setting { background-color: darken(@color-filter-bg-active, 5%); }
        }
    }
}

.control-filter-popover {
    min-width: 275px;

    .filter-search {
        min-height: 36px;
        input {
            min-height: 36px;
            border: none;
            border-bottom: 1px solid @color-filter-border;
            .border-bottom-radius(0);
            .box-shadow(none);
            background-color: transparent;
        }

        .form-control.icon.search {
            background-position: right -81px;
        }

        .close {
            display: none;
        }
    }

    .filter-items, .filter-active-items {
        color: @color-filter-text;
        font-size: @font-size-base - 1;
        ul, li {
            list-style-type: none;
            margin:0;
            padding:0;
        }
        li {
            .transition(~'color 0.6s, background-color 0.3s');
        }
        a {
            text-decoration: none;
            color: @color-filter-text;
            display: block;
            padding: 7px 15px;

            &:before {
                margin-right: 8px;
                display: inline-block;
                vertical-align: baseline;
            }

            &:hover {
                background-color: @color-filter-items-bg-hover;
                color: #FFFFFF;
            }
        }
    }

    .filter-items {
        max-height: 135px;
        overflow: auto;

        background-color: @color-filter-items-bg;
        border-bottom: 1px solid @color-filter-border;
        a:before { .icon(@plus); }

        li.loading {
            padding: 7px;
            > span {
                display: block;
                height: 20px;
                width: 20px;
                background-image: url('@{loader-image-path}/loader-transparent.svg');
                background-size: 20px 20px;
                background-position: 50% 50%;
                .animation(spin 1s linear infinite);
            }
        }

        li.animate-enter { .animation(fadeInUp .5s); }
    }

    .filter-active-items {
        a:before { .icon(@times); }
        li.animate-enter { .animation(fadeInDown .5s); }
    }

    &.control-filter-box-popover {
        min-width: 190px;

        .filter-buttons {
            margin: 0;
            padding: 0;

            &:after {
                content: "";
                display: block;
                clear: both;
            }

            .btn {
                float: left;
                width: 100%;
                margin: 0;
                border-radius: 0;
                text-align: center;
            }
        }

        &.--range {
            .filter-buttons .btn {
                width: 50%;
            }
        }
    }
}

@media (max-width: @screen-xs) {
    .control-filter-popover {
        .filter-items {
            max-height: 200px;
        }
        .filter-search {
            input {
                padding-left: 36px;
                padding-right: 36px;
            }
            .form-control.icon.search {
                background-position: 0 -81px;
            }
            .close {
                width: 30px;
                display: block;
                position: absolute;
                top: 5px;
                right: 5px;
                font-size: 28px;
                z-index: @zindex-filter;
            }
        }
    }
}