src/styles/filter.module.css - gh-pages - Julic/simpleFilter

src/styles/filter.module.css
224 строки4 KB
4erepashka
modified
11 мар 2024, 15:04
11 мар 2024, 15:04f301679
@value filterWrapperColor: #d4fffe;
@value gray: #34495e;


@value darkgray: #2c3e50;

.baseSelect {
    grid-column-start: 1;
    grid-column-end: 3;
    position: relative;
    display: flex;
    width: 10rem;
    height: 2em;
    border-radius: .25em;
    overflow: hidden;
    margin-top: 5px;
}

.baseSelectTitle{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

select {
    appearance: none;
    outline: 10px red;
    border: 0;
    box-shadow: none;
    flex: 1;
    padding: 0 1em;
    color: #fff;
    background-color: darkgray;
    background-image: none;
    cursor: pointer;
}

select::-ms-expand {
    display: none;
}

.select_01 {
    composes: baseSelect;
}
.select_02 {
    composes: baseSelect;
    grid-column-start: 4;
    grid-column-end: 6;
}
.select_03 {
    composes: baseSelect;
    grid-column-start: 7;
    grid-column-end: 9;
}


.select_01::after, .select_02::after, .select_03::after {
    content: '\25BC';
    position: absolute;
    top: 0;
    right: 0;
    padding: .4em;
    background-color: #34495e;
    transition: .25s all ease;
    pointer-events: none;
}
  
.select_01:hover::after, .select_02:hover::after,.select_03:hover::after {
    color: #d4fffe;
}
  

.filterWrapper{
    margin: 0 auto;
    display: grid;
    border-radius: 20px;
    grid-template-columns: repeat(9, 65px);
    justify-content: center;
    column-gap: 30px;
    width: 1000px;
    height: 85px;
    background-color: filterWrapperColor;
}

.selectTitle_01{
    composes: baseSelectTitle;
    grid-column-start: 1;
    grid-column-end: 3;
}
.selectTitle_02{
    composes: baseSelectTitle;
    grid-column-start: 4;
    grid-column-end: 6;
    grid-row-start: 1;
}
.selectTitle_03{
    composes: baseSelectTitle;
    grid-column-start: 7;
    grid-column-end: 9;
    grid-row-start: 1;
}



@media (max-width: 576px) and (min-width: 375px){

    .baseSelect {
        position: relative;
        display: flex;
        width: 10rem;
        height: 2em;
        border-radius: .25em;
        overflow: hidden;
        margin-top: 5px;
    }
    
    .baseSelectTitle{
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }
    
    select {
        appearance: none;
        outline: 10px red;
        border: 0;
        box-shadow: none;
        flex: 1;
        padding: 0 1em;
        color: #fff;
        background-color: darkgray;
        background-image: none;
        cursor: pointer;
    }
    
    select::-ms-expand {
        display: none;
    }
    
    .select_01 {
        composes: baseSelect;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        margin-top: 40px;
        justify-self: center;
 
    }
    .select_02 {
        composes: baseSelect;
         grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        margin-top: 40px;
        justify-self: center;

       
    }
    .select_03 {
        composes: baseSelect;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        margin-top: 40px;
        justify-self: center;

    }
    
    
    .select_01::after,   .select_02::after,  .select_03::after{
        content: '\25BC';
        position: absolute;
        top: 0;
        right: 0;
        padding: .5em;
        background-color: #34495e;
        transition: .25s all ease;
        pointer-events: none;
    }
      
    .select_01:hover::after, .select_02:hover::after, .select_03:hover::after  {
        color: #f39c12;
    }
      
    
    .filterWrapper{
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        border-radius: 20px;
        justify-content: center;
        column-gap: 30px;
        width: 350px;
        height: auto;
        padding:  0 40px 40px 40px;
        background-color: filterWrapperColor;
    }
    
    .selectTitle_01{
        composes: baseSelectTitle;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;

    }
    .selectTitle_02{
        composes: baseSelectTitle;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;

    }
    .selectTitle_03{
        composes: baseSelectTitle;
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;


    }
    
    
}