150 lines
4.3 KiB
SCSS
150 lines
4.3 KiB
SCSS
.main{
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: $color_bg_one;
|
|
.search{
|
|
padding: 20px;
|
|
}
|
|
.filter{
|
|
.filter_all {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px 50px;
|
|
font-size: $font_size_medium;
|
|
color: $color_font_three;
|
|
.text_one{
|
|
color: $color_main;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.text_two{
|
|
position: relative;
|
|
.miconfont{
|
|
font-size: 20px;
|
|
margin-left: 10px;
|
|
}
|
|
&::before{
|
|
content: '';
|
|
width: 2px;
|
|
height: 32px;
|
|
background-color: #C2C2C2;
|
|
position: absolute;
|
|
top: 0;
|
|
left: -50px;
|
|
}
|
|
}
|
|
}
|
|
.filter_btns{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 20px;
|
|
|
|
.selected{
|
|
background-color: #ecf5ff;
|
|
border: 2px solid #cde5ff;
|
|
color: $color_main;
|
|
width: 122px;
|
|
height: 42.93px;
|
|
}
|
|
}
|
|
}
|
|
.list{
|
|
flex:1;
|
|
height: 0;
|
|
}
|
|
.popup_main{
|
|
width: 608px;
|
|
height: 100vh;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
.popup_title{
|
|
font-size: $font_size;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
}
|
|
.scroll{
|
|
flex:1;
|
|
height: 0;
|
|
}
|
|
.popup_filter{
|
|
|
|
}
|
|
.popup_filter_item{
|
|
margin-bottom: 20px;
|
|
.title{
|
|
font-size: $font_size;
|
|
color: $color_font_one;
|
|
font-weight: 700;
|
|
padding: 20px 0;
|
|
}
|
|
.btn_list{
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 165.75px);
|
|
justify-content: space-between;
|
|
.btn_item{
|
|
width: 165.75px;
|
|
height: 69.2px;
|
|
background: #f0f0f0;
|
|
border-radius: 34px;
|
|
text-align: center;
|
|
line-height: 69.2px;
|
|
font-size: $font_size_medium;
|
|
color: $color_font_one;
|
|
margin-bottom: 20px;
|
|
}
|
|
.select_btn_item{
|
|
color: $color_main;
|
|
background: #ecf5ff;
|
|
border: 2px solid #007aff;
|
|
width: 161.75px;
|
|
height: 65.2px;
|
|
}
|
|
}
|
|
.btn_list_input{
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
align-items: center;
|
|
.btn_width {
|
|
width: 220px;
|
|
height: 70px;
|
|
background: #f0f0f0;
|
|
border-radius: 50px;
|
|
padding: 10px 20px;
|
|
box-sizing: border-box;
|
|
input{
|
|
width: 100%;
|
|
height: 100%;
|
|
font-size: $font_size_medium;
|
|
}
|
|
}
|
|
.unit{
|
|
color: $color_font_one;
|
|
font-size: $font_size;
|
|
margin-left: 20px;
|
|
}
|
|
text{
|
|
color: #ccc;
|
|
padding: 0 20px;
|
|
}
|
|
.width_main{
|
|
|
|
}
|
|
}
|
|
.btn_list_element{
|
|
background-color: #F0F0F0;
|
|
border-radius: 30px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
textarea{
|
|
width: 100%;
|
|
height: 126px;
|
|
font-size: $font_size_medium;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |