Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/old/app/design/frontend/Cnc/default/web/scss/modules/catalog/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

// ==============================================
// TOOLBAR
// ==============================================

// Configuration
$toolbar-mode-icon-color:           lighten($c-black, 30%);
$toolbar-mode-bg-color:             lighten($c-black, 90%);
$toolbar-mode-active-bg-color:      lighten($c-black, 80%);
$toolbar-mode-radius:               4px;

//
//  Magento native reset
//  _____________________________________________

.page-products .toolbar .limiter,
.toolbar-products .pages {
    display: none;
}

.products.wrapper ~ .toolbar-products {
    display: none;

    .pages {
        display: block;
    }

    .modes,
    .toolbar-amount {
        display: none;
    }
}

//
//  Listing products toolbar
//  _____________________________________________

.toolbar-products {
    color: $c-blue-dark;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row-reverse;

    // Grid or list buttons
    .modes {
        .modes-label {
            @extend .visually-hidden;
        }

        .modes-mode {
            color: $toolbar-mode-icon-color;
            background-color: $toolbar-mode-bg-color;
            padding: 10px;

            span {
                @extend .visually-hidden;
            }

            &::before {
                content: "";
                font-family: "jade-icons";
                @extend %icon-jade;
            }

            &.mode-grid {
                border-radius: $toolbar-mode-radius 0 0 $toolbar-mode-radius;

                &::before {
                    content: "\e60d";
                }
            }

            &.mode-list {
                border-radius: 0 $toolbar-mode-radius $toolbar-mode-radius 0;

                &::before {
                    content: "\e60b";
                }
            }

            &.active {
                background-color: $toolbar-mode-active-bg-color;
            }
        }
    }

    // Page items info
    .toolbar-amount {
        font-size: 1.4rem;
        margin-bottom: 0;
        margin-left: auto;
        padding: 5px 0;

        @include breakpoint(md) {
            font-size: 1.8rem;
        }

        .toolbar-number {
            font-weight: $fw-roboto-bold;
        }
    }

    // Sort by filter
    .toolbar-sorter {
        display: flex;
        align-items: center;

        // Sort by label
        .sorter-label {
            margin-right: 10px;
            font-weight: $fw-roboto-bold;
            white-space: nowrap;
            font-size: 1.4rem;

            &:after {
                content: ":";
                margin-left: 5px;
            }
        }

        .sorter-action {
            display: none;

            // Arrow bottom
            &::before {
                font-size: 20px;
            }

            &.sort-asc {
                transform: scaleY(-1);
            }

            // Hide label
            span {
                @extend .visually-hidden;
            }
        }

        .sorter-options {
            padding: 10px 35px 10px 5px;
            border: none;
            color: $c-blue;
            background: $input-background url('../images/icon/arrow_down_blue.svg') no-repeat calc(100% - 16px) center;
            background-size: auto 12px;
        }
    }
}