File: /var/www/html/TBbargain/wp-content/themes/Tbbargain/scss/style.scss
@import "partials";
@import "common";
.listing{
padding: 38px 0 100px;
.title {
color: $lightBlue;
font-size: 52px;
font-weight: 700;
margin: 0 0 10px 0;
line-height: 1.2;
@media($sm-1679)
{
font-size:38px;
line-height: 48px;
}
@media($sm-1481)
{
font-size:32px;
line-height: 42px;
}
@media($sm-1199)
{
font-size:28px;
line-height: 38px;
}
@media($sm-991)
{
font-size:26px;
line-height: 36px;
}
@media($sm-767)
{
font-size:24px;
line-height: 34px;
}
}
.showing-blk{
font-size: 14px;
line-height: 1.2;
color: #5A6277;
margin-bottom: 12px;
@media ($sm-1441){
font-size: 13px;
}
}
.listing-wrapper{
display: flex;
flex-wrap: wrap;
@media ($sm-767){
flex-direction: column;
}
}
.sidebar{
width: 25%;
@media ($sm-991){
width: 30%;
}
@media ($sm-767){
width: 100%;
margin-bottom: 20px;
}
.box-blks{
border: 1px solid #E2E4EF;
border-radius: 17px;
padding: 22px 25px;
margin-top: 24px;
@media ($sm-1441){
padding: 20px;
}
@media ($sm-991){
padding: 15px;
}
.box-title{
font-size: 18px;
color: #223158;
font-weight: 600;
@media ($sm-1441){
font-size: 16px;
}
@media ($sm-991){
font-size: 15px;
}
}
.filter-listing{
list-style: none;
padding-left: 0px;
margin: 0px;
display: flex;
flex-direction: column;
li{
margin-top: 26px;
color: #5A6277;
font-weight: 500;
font-size: 14px;
line-height: 22px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@media ($sm-1679){
margin-top: 22px;
}
@media ($sm-1441){
margin-top: 18px;
}
@media ($sm-1199){
margin-top: 14px;
}
@media ($sm-991){
margin-top: 10px;
font-size: 13px;
}
.f-link{
text-decoration: none;
color: #5A6277;
&:hover{
color: #6DADED;
}
&::before{
content: "";
width: 8px;
height: 12px;
background:url(../img/arrow-sign-crumbs.svg);
background-size: contain;
display: inline-block;
margin-right: 12px;
@media ($sm-1679){
margin-right: 10px;
}
@media ($sm-1441){
margin-right: 8px;
}
@media ($sm-1199){
margin-right: 5px;
width: 6px;
height: 10px;
}
}
}
}
}
}
}
.right-listing{
display: flex;
flex: 1;
flex-direction: column;
margin-left: 15px;
width: calc(75% - 15px);
@media ($sm-991){
margin-left: 10px;
width: calc(70% - 10px);
}
@media ($sm-767){
width: 100%;
margin-left: 0px;
}
.select-blk{
max-width: 273px;
width: 100%;
margin-left: auto;
margin-right: 15px;
margin-bottom: 50px;
display: flex;
border-radius: 26px;
border: 1px solid #C5C9D9;
align-items: center;
@media ($sm-1441){
margin-bottom: 40px;
margin-top: 15px;
}
@media ($sm-1441){
margin-bottom: 35px;
margin-top: 30px;
}
@media ($sm-767){
margin-top: 10px;
margin-bottom: 20px;
}
.sort{
color: #223158;
font-size: 16px;
min-width: 70px;
display: flex;
align-items: center;
margin-left: 19px;
@media ($sm-1679){
font-size: 15px;
margin-left: 15px;
}
@media ($sm-1441){
font-size: 14px;
}
}
.form-select{
font-size: 16px;
font-weight: 500;
color: #223158;
border: none;
box-shadow: none;
background-color: transparent;
padding-left: 0;
@media ($sm-1679){
font-size: 15px;
}
@media ($sm-1441){
font-size: 14px;
}
}
}
.card-wrp{
display: flex;
flex-wrap: wrap;
@media ($sm-579){
flex-direction: column;
}
}
.card-row-wrap{
margin: 0 15px 24px;
width: calc((100% / 3) - 30px);
padding-bottom: 23px;
@media ($sm-1199){
margin: 0 10px 24px;
width: calc((100% / 3) - 20px);
}
@media ($sm-991){
margin: 0 10px 24px;
width: calc((100% / 2) - 20px);
}
@media ($sm-579){
margin: 0 0 20px;
width: 100%;
max-width: 100%;
}
.content-wrap{
padding-left: 7px;
padding-right: 7px;
}
}
.btn-link{
width: 100%;
height: 42px;
border-radius: 21px;
color: #223158;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 14px;
background-color: #DAECFF;
text-decoration: none;
margin-top: 25px;
}
}
}
.btn-blk{
display: flex;
align-items: center;
justify-content: center;
margin-top: 70px;
@media ($sm-1679){
margin-top: 50px;
}
@media ($sm-1441){
margin-top: 40px;
}
}
.view-all{
width: 174px;
height: 52px;
color: #223158;
display: flex;
font-weight: 500;
font-size: 20px;
background: #F0F3FD;
border: 1px solid #C5C9D9;
border-radius: 26px;
text-decoration: none;
font-weight: 500;
align-items: center;
justify-content: center;
@media ($sm-1679){
height: 50px;
}
@media ($sm-1441){
height: 48px;
}
&::after{
content: "";
width: 6px;
height: 12px;
background: url(../img/arrow-rt-btn.svg) no-repeat center;
background-size: contain;
margin-left: 20px;
}
}
.dtl-blk{
display: flex;
flex-direction: column;
.dtl-pro-wrp{
display: flex;
flex-wrap: wrap;
@media ($sm-579){
flex-direction: column;
}
.lft{
background: transparent linear-gradient(180deg, #6DADED 0%, #0151A1 100%);
border-radius: 15px;
max-width: 585px;
// height: 585px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
@media ($sm-1679){
max-width: 55%;
height: auto;
}
@media ($sm-1441){
max-width: 45%;
}
@media ($sm-579){
max-width: calc(100% - 10px);
margin-bottom: 10px;
margin-left: 5px;
margin-right: 5px;
height: 250px;
}
@media ($sm-479){
margin: 0px;
margin-bottom: 10px;
max-width: 100%;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
max-height: 450px;
@media ($sm-1679){
max-height: 300px;
}
@media ($sm-1441){
max-height: 250px;
}
@media ($sm-1199){
max-height: 200px;
}
}
}
.rt-blks{
display: flex;
flex: 1;
flex-wrap: wrap;
margin-left: 12px;
@media ($sm-579){
margin-left: 0px;
}
@media ($sm-479){
flex-direction: column;
margin: 0px;
margin-bottom: 10px;
}
.rt-col{
width: calc((100% / 2) - 24px);
background: transparent linear-gradient(180deg, #6DADED 0%, #0151A1 100%);
border-radius: 15px;
margin: 0 12px 20px 12px;
height: 283px;
display: flex;
align-items: flex-end;
&.center{
align-items: center;
}
@media ($sm-1679){
width: calc((100% / 2) - 20px);
height: 240px;
margin: 0 10px 15px 10px;
}
@media ($sm-1441){
width: calc((100% / 2) - 16px);
height: 200px;
margin: 0 8px 15px 8px;
}
@media ($sm-1199){
width: calc((100% / 2) - 10px);
height: 160px;
margin: 0 5px 15px 5px;
}
@media ($sm-479){
width: 100%;
margin: 0;
margin-bottom: 10px;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
max-height: 195px;
@media ($sm-1679){
max-height: 140px;
}
@media ($sm-1441){
max-height: 120px;
}
@media ($sm-1199){
max-height: 100px;
}
@media ($sm-991){
max-height: 90px;
}
}
}
}
}
.dtl-info-wrp{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 14px 0;
@media ($sm-579){
flex-direction: column;
}
.info-rt{
max-width: 490px;
width: 100%;
display: flex;
@media ($sm-1441){
max-width: 400px;
}
@media ($sm-1199){
max-width: 400px;
}
@media ($sm-991){
max-width: 330px;
}
@media ($sm-579){
max-width: 100%;
margin-bottom: 10px;
}
.offer{
@media ($sm-579){
margin-left: auto;
}
}
}
.offer-btn{
max-width: 428px;
width: 100%;
height: 62px;
border-radius: 290px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 20px;
background-color: #6DADED;
text-decoration: none;
@media ($sm-1679){
height: 50px;
font-size: 18px;
max-width: 380px;
}
@media ($sm-1441){
height: 46px;
font-size:16px;
max-width: 340px;
}
@media ($sm-1199){
height: 42px;
font-size:15px;
max-width: 300px;
}
@media ($sm-767){
height: 40px;
font-size:14px;
max-width:200px
}
@media ($sm-579){
margin: 0 auto;
}
}
.pro-logo {
max-width: 90px;
margin: 0;
margin-right: 35px;
display: flex;
align-items: center;
@media ($sm-1679){
margin-right: 30px;
max-width: 70px;
}
@media ($sm-1441){
margin-right: 25px;
max-width: 60px;
}
@media ($sm-1199){
margin-right: 20px;
max-width: 50px;
}
}
.price {
@extend .display-flex;
align-items: center;
gap: 15px;
margin: 0;
margin-right: 44px;
@media ($sm-1679){
margin-right: 35px;
}
@media ($sm-1441){
margin-right: 30px;
}
@media ($sm-1199){
margin-right: 25px;
}
@media ($sm-991){
margin-right: 20px;
}
.large {
color: $primary;
font-size: 24px;
font-weight: 700;
line-height: 1;
@media($sm-1679)
{
font-size: 20px;
}
}
.cross {
color: $lightGrey;
font-size: 13px;
font-weight: 600;
text-decoration: line-through;
}
}
.offer {
display: flex;
gap: 10px;
align-items: center;
.off {
background: $primary;
border-radius: 30px;
display: inline-flex;
@extend .align-center;
padding: 5px 10px;
gap: 10px;
color: $white;
font-size: 13px;
font-weight: 600;
max-height: 26px;
@media($sm-1679)
{
font-size: 12px;
}
img
{
height: 13px;
}
}
.end {
color: #e70036;
font-size: 13px;
font-weight: 600;
line-height: 1;
@media($sm-1679)
{
font-size: 12px;
}
}
}
}
.dtls-content{
padding-top: 30px;
@media ($sm-1679){
padding-top: 25px;
}
@media ($sm-1441){
padding-top: 20px;
}
.title{
color: $lightBlue;
font-size: 42px;
font-weight: 700;
margin: 0 0 60px 0;
line-height: 1.2;
text-align: center;
@media($sm-1679)
{
font-size:38px;
line-height: 48px;
margin-bottom: 40px;
}
@media($sm-1481)
{
font-size:32px;
line-height: 42px;
margin-bottom: 35px;
}
@media($sm-1199)
{
font-size:28px;
line-height: 38px;
margin-bottom: 30px;
}
@media($sm-991)
{
font-size:26px;
line-height: 36px;
margin-bottom: 25px;
}
@media($sm-767)
{
font-size:24px;
line-height: 34px;
margin-bottom: 20px;
}
}
.dtl-content-list{
background: transparent linear-gradient(180deg, #ECF0FF 0%, #FEFEFF 100%);
border: 1px solid #BDCAFF;
border-radius: 26px;
padding: 70px 60px 24px;
@media ($sm-1679){
padding: 60px 50px 20px;
}
@media ($sm-1441){
padding: 50px 45px 20px;
}
@media ($sm-1199){
padding: 45px 40px 20px;
}
@media ($sm-991){
padding: 40px 40px 15px;
}
@media ($sm-991){
padding: 30px 30px 15px;
}
@media ($sm-579){
padding: 20px 20px 10px;
}
.listing-feature{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
@media ($sm-579){
flex-direction: column;
}
li{
color: #5A6277;
font-weight: 500;
font-size: 16px;
line-height: 24px;
display: flex;
width: calc(48% - 80px);
margin: 0 40px 36px;
align-items: flex-start;
@media ($sm-1679){
margin: 0 35px 30px;
width: calc(48% - 70px);
font-size: 15px;
line-height: 23px;
}
@media ($sm-1441){
margin: 0 30px 25px;
width: calc(48% - 60px);
}
@media ($sm-1199){
margin: 0 20px 20px;
width: calc(48% - 40px);
font-size: 14px;
line-height: 22px;
}
@media ($sm-991){
margin: 0 15px 15px;
width: calc(48% - 30px);
font-size: 13px;
line-height: 20px;
}
@media ($sm-579){
width: 100%;
margin: 0 0 10px;
}
&::before{
content: "";
width: 15px;
height: 12px;
background:url(../img/arrow-sign-crumbs.svg) no-repeat;
background-size: contain;
display: inline-block;
margin-right: 12px;
margin-top: 5px;
}
&:hover{
color: #6DADED;
}
.f-link{
text-decoration: none;
color: #5A6277;
}
}
}
}
}
}