File: /var/www/html/CW-techs/wp-content/themes/cw-techs/scss/modal.scss
@import "partials";
.btn-orange {
background-color: #E88B25;
color: #fff;
border-radius: 25px;
padding: 10px 30px;
font-weight: 600;
}
.success-modal{
.success-icon {
height: 200px;
width: 400px;
margin: auto;
margin-bottom: 50px;
@media($sm-1679){
width: 380px;
height: 200px;
margin-bottom: 40px;
}
@media($sm-1441){
width: 300px;
height: 180px;
margin-bottom: 30px;
}
@media($sm-1199){
width: 260px;
height: 160px;
margin-bottom: 20px;
}
img{
height: 100%;
width: 100%;
object-fit: contain;
}
}
.modal-dialog{
max-width: 983px;
}
.modal-inner{
text-align: center;
}
.modal-content{
background: #18181A;
border-radius: 38px;
padding: 60px 0px;
@media($sm-1679){
padding: 40px 0px;
}
@media($sm-1441){
padding: 30px 0px;
}
@media($sm-1199){
padding: 20px 0px;
}
}
.modal-title{
font-family: $primary-font;
font-weight: 600;
font-size: 32px;
line-height: 48px;
letter-spacing: 0%;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 28px;
line-height: 38px;
}
@media($sm-1441){
font-size: 26px;
line-height: 36px;
}
@media($sm-1199){
font-size: 24px;
line-height: 34px;
}
@media($sm-991){
font-size: 22px;
line-height: 32px;
}
@media($sm-767){
font-size: 20px;
line-height: 30px;
}
}
.content{
font-family: $primary-font;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
text-transform: capitalize;
color: #797993;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
.continue-btn{
padding-top: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 30px;
@media($sm-1679){
padding-top: 40px;
padding-bottom: 20px;
}
@media($sm-1441){
padding-top: 30px;
padding-bottom: 20px;
}
@media($sm-1199){
padding: 20px 0px;
}
.continue-btn1{
width: 538px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: $primary;
border: 1px solid $primary;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
color: $white;
font-family: Schibsted Grotesk;
font-weight: 500;
font-size: 16px;
letter-spacing: 0%;
border-radius: 50px;
@media ($sm-1679){
height: 50px;
font-size: 15px;
}
@media ($sm-1441){
height: 46px;
font-size: 14px;
}
@media ($sm-1199){
font-size: 13px;
height: 42px;
width: 190px;
}
&:hover{
background-color: transparent;
color: $primary;
border: 1px solid $primary;
}
}
}
.cart-inner-sec{
overflow-y: auto;
max-height: 400px;
}
.cart-item{
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #26262A;
padding: 30px 60px;
@media($sm-1679){
padding: 20px 40px;
}
@media($sm-1441){
padding: 30px;
}
@media($sm-1199){
padding: 20px;
}
.product-inner{
display: flex;
align-items: center;
}
.quatity{
&.qulity-txt{
color: #fff;
font-family: $primary-font;
font-weight: 700;
font-size: 20px;
line-height: 32px;
letter-spacing: 0%;
text-align: right;
vertical-align: middle;
text-transform: capitalize;
@media($sm-1679){
font-size: 18px;
}
@media($sm-1441){
font-size: 16px;
}
@media($sm-1199){
font-size: 14px;
}
@media($sm-991){
font-size: 12px;
}
}
}
.product{
width: 87px;
height: 87px;
border-radius: 11px;
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
@media($sm-1679){
width: 77px;
height: 77px;
}
@media($sm-1441){
width: 67px;
height: 67px;
}
@media($sm-1199){
width: 57px;
height: 57px;
}
img{
width: 100%;
height: 100%;
object-fit: contain;
}
}
.product-details{
margin-left: 23px;
.product-name{
font-family: $primary-font;
font-weight: 600;
font-size: 18px;
line-height: 32px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 16px;
}
@media($sm-1441){
font-size: 14px;
}
}
.tags{
display: flex;
align-items: center;
flex-wrap: wrap;
.badge{
height: 34px;
padding: 7px 12px;
background-color: #28282B;
font-family: $primary-font;
font-weight: 400;
font-size: 14px;
line-height: 32px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
display: flex;
align-items: center;
border-radius: 50px;
margin-right: 10px;
margin-bottom: 10px;
word-break: break-all;
@media($sm-1679){
height: 30px;
font-size: 12px;
}
@media($sm-1441){
height: 28px;
}
&.txt-sec{
justify-content: space-between;
span{
margin: 0px 5px;
}
.txt{
color: #61616F;
text-decoration: line-through;
}
.txt-col{
color: #CD6429;
}
}
}
}
}
}
.total-amount{
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 28px;
padding-left: 60px;
padding-right: 60px;
@media($sm-1679){
padding: 20px 40px 0px 40px;
}
@media($sm-1441){
padding: 30px 30px 0px 30px;
}
@media($sm-1199){
padding: 20px 20px 0px 20px;
}
.amunt-txt{
font-family: $primary-font;
font-weight: 400;
font-size: 20px;
line-height: 32px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color: #fff;
@media($sm-1679){
font-size: 18px;
}
@media($sm-1441){
font-size: 16px;
}
@media($sm-1199){
font-size: 14px;
}
@media($sm-991){
font-size: 12px;
}
&.price-txt{
font-weight: 700;
}
}
}
}
.remove-modal{
.modal-dialog{
max-width: 548px;
.modal-body{
padding: 0px;
}
.modal-header{
border: none;
padding: 0px;
}
.modal-content{
background-color: #222225;
border-radius: 41px;
padding: 47px 36px;
@media($sm-1679){
padding: 37px 26px;
}
@media($sm-1481){
padding: 30px 20px;
}
@media($sm-1199){
padding: 20px;
}
.icon-circle{
width: 170px;
height: 170px;
border-radius: 100px;
background-color: #36363B;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 53px;
@media($sm-1679){
width: 120px;
height: 120px;
margin-bottom: 43px;
}
@media($sm-1481){
width: 100px;
height: 100px;
margin-bottom: 33px;
}
@media($sm-1199){
width: 80px;
height: 80px;
margin-bottom: 20px;
}
img{
width: 70px;
object-fit: contain;
@media($sm-1679){
width: 50px;
}
@media($sm-1441){
width: 40px;
}
}
}
.modal-title{
font-family: $primary-font;
font-weight: 600;
font-size: 32px;
line-height: 42px;
letter-spacing: 0%;
color: #fff;
padding-bottom: 10px;
text-align: center;
@media($sm-1679){
font-size: 28px;
line-height: 38px;
}
@media($sm-1441){
font-size: 26px;
line-height: 36px;
}
@media($sm-1199){
font-size: 24px;
line-height: 34px;
}
@media($sm-991){
font-size: 22px;
line-height: 32px;
}
@media($sm-767){
font-size: 20px;
line-height: 30px;
}
@media($sm-579){
font-size: 18px;
line-height: 28px;
}
}
.modal-subtext{
font-family: $primary-font;
font-weight: 500;
font-size: 18px;
line-height: 24px;
letter-spacing: 0%;
text-align: center;
color: #fff;
margin-bottom: 53px;
padding: 0px 50px;
@media($sm-1679){
font-size: 16px;
line-height: 24px;
margin-bottom: 43px;
}
@media($sm-1441){
font-size: 14px;
line-height: 22px;
margin-bottom: 33px;
}
@media($sm-1199){
font-size: 12px;
line-height: 18px;
margin-bottom: 20px;
}
}
}
}
}
.btn-close{
background-image: url(../img/modal-close-new.svg);
padding: 0px;
width: 42px;
height: 42px;
background-size: cover;
@media($sm-1679){
width: 38px;
height: 38px;
}
@media($sm-1481){
width: 32px;
height: 32px;
}
@media($sm-1199){
width: 28px;
height: 28px;
}
@media($sm-991){
width: 26px;
height: 26px;
}
@media($sm-767){
width: 24px;
height: 24px;
}
}
.modal-footer{
display: flex;
align-items: center;
justify-content: center;
border: none;
padding-top: 0px;
@media(max-width:540px){
flex-wrap: wrap;
}
.btn{
height: 62px;
width: 48%;
display: flex;
align-items: center;
justify-content: center;
background-color: #3B3B3F;
color: #fff !important;
border-radius: 60px;
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
@media($sm-1679){
height: 58px;
font-size: 14px;
}
@media($sm-1441){
height: 52px;
font-size: 12px;
}
@media($sm-1199){
height: 48px;
}
@media($sm-991){
height: 42px;
}
@media(max-width:540px){
width: 100%;
margin-bottom: 10px;
}
&.remove{
background-color: #CD6429;
}
&:active{
color: #fff !important;
}
}
}
.edit-profile{
.btn-close{
top: 32px;
position: absolute;
right: 35px;
}
.modal-dialog{
max-width: 717px;
.modal-body{
padding: 0px;
}
.modal-header{
border: 0px;
padding: 0px;
padding-bottom: 10px;
}
.modal-content{
background-color: #222225;
border-radius: 41px;
padding: 70px 100px;
@media($sm-1679){
padding: 50px 80px;
}
@media($sm-1481){
padding: 30px 60px;
}
@media($sm-1199){
padding: 30px;
}
@media($sm-991){
padding: 20px;
}
.modal-title{
font-family: Schibsted Grotesk;
font-weight: 600;
font-size: 42px;
line-height: 28px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: uppercase;
color: #fff;
@media($sm-1679){
font-size: 38px;
}
@media($sm-1441){
font-size: 32px;
}
@media($sm-1199){
font-size: 28px;
}
@media($sm-991){
font-size: 26px;
}
@media($sm-767){
font-size: 24px;
}
@media($sm-579){
font-size: 22px;
}
.txt{
color: #CD6429;
}
}
.sub-text{
font-family: Schibsted Grotesk;
font-weight: 400;
font-size: 16px;
line-height: 24px;
letter-spacing: 0%;
color: #A8A8A8;
padding-bottom: 20px;
@media($sm-1679){
font-size: 14px;
padding-bottom: 10px;
}
@media($sm-1481){
font-size: 12px;
}
}
}
.form-control , .form-select{
border: 1px solid #2E2E34;
height: 62px;
display: flex;
align-items: center;
padding-left: 55px;
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
background-color: transparent;
letter-spacing: 0%;
color: #fff;
border-radius: 50px;
&::placeholder{
color: #404046;
}
&:focus{
box-shadow: none;
border: 1px solid $primary;
}
@media($sm-1679){
font-size: 14px;
height: 58px;
}
@media($sm-1441){
height: 52px;
font-size: 12px;
}
@media($sm-1199){
height: 48px;
}
}
.form-select{
appearance: none; /* Remove default arrow */
-webkit-appearance: none;
-moz-appearance: none;
padding-right: 0px !important;
background-image: url('../img/Polygon.svg') !important;
background-repeat: no-repeat !important;
background-position: right 10px center !important;
background-size: 12px !important;
position: relative;
}
.invalid-feedback{
font-family: $primary-font;
display: block;
position: absolute;
color: #dc3545;
font-size: 14px;
bottom: -21px;
padding-left: 20px;
@media($sm-1679){
font-size: 13px;
}
@media($sm-1441){
font-size: 12px;
}
}
.form-group{
margin-bottom: 40px;
position: relative;
@media($sm-1679){
margin-bottom: 30px;
}
@media($sm-1481){
margin-bottom: 20px;
}
@media($sm-767){
// margin-bottom: 10px;
}
.input-grp{
display: flex;
.form-select{
border-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
color: #fff;
padding-left: 15px;
background: #222225;
&:focus{
box-shadow: none;
border: 1px solid #2E2E34;
}
}
.form-control{
border-left: 0px;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
padding-left: 10px;
&:focus{
box-shadow: none;
border: 1px solid #2E2E34;
}
}
}
}
.form-icon {
position: absolute;
left: 29px;
top: 58%;
transform: translateY(-50%);
color: #888;
width: 20px;
height: 18px;
&.eye-icon{
right: 20px;
left: unset;
}
}
.form-label{
font-family: $primary-font;
font-weight: 500;
font-size: 16px;
line-height: 100%;
letter-spacing: 0%;
color: #fff;
@media($sm-1679){
font-size: 14px;
}
@media($sm-1441){
font-size: 12px;
}
}
}
.modal-footer{
padding-top: 40px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
@media($sm-1679){
padding-top: 30px;
}
@media($sm-1481){
padding-top: 20px;
}
}
}
.address-modal{
.modal-dialog{
max-width: 900px;
}
.modal-header{
padding-bottom: 40px !important;
}
.modal-content{
padding: 70px 80px;
@media($sm-1679){
padding: 50px 60px;
}
@media($sm-1481){
padding: 30px 40px;
}
@media($sm-1199){
padding: 30px;
}
@media($sm-579){
padding: 20px;
}
}
.btn-close{
width: 17px;
height: 17px;
}
.form-control,.form-select{
padding-left: 30px !important;
}
}