src/Web/WebMVC/wwwroot/css/catalog/catalog.component.scss

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

@import '../variables';

.esh-catalog {
    $banner-height: 260px;

    &-hero {
        background-image: url($image-main_banner);
        background-size: cover;
        height: $banner-height;
        width: 100%;
    }

    &-title {
        position: relative;
        top: $banner-height / 3.5;
    }

    $filter-height: 65px;

    &-filters {
        background-color: $color-brand;
        height: $filter-height;
    }

    $filter-padding: .5rem;

    &-filter {
        -webkit-appearance: none;
        background-color: transparent;
        border-color: $color-brand-bright;
        color: $color-foreground-brighter;
        cursor: pointer;
        margin-right: 1rem;
        margin-top: .5rem;
        min-width: 140px;
        outline-color: $color-secondary;
        padding-bottom: 0;
        padding-left: $filter-padding;
        padding-right: $filter-padding;
        padding-top: $filter-padding * 3;

        option {
            background-color: $color-brand;
        }
    }

    &-label {
        display: inline-block;
        position: relative;
        z-index: 0;

        &::before {
            color: rgba($color-foreground-brighter, .5);
            content: attr(data-title);
            font-size: $font-size-xs;
            margin-left: $filter-padding;
            margin-top: $font-size-xs;
            position: absolute;
            text-transform: uppercase;
            z-index: 1;