482 lines
12 KiB
SCSS
482 lines
12 KiB
SCSS
|
|
||
|
|
|
||
|
|
.profile{
|
||
|
|
&__basic{
|
||
|
|
&-inner{
|
||
|
|
border-bottom: 1px solid #eceaea;
|
||
|
|
padding: 15px 30px;
|
||
|
|
padding-right: 40px;
|
||
|
|
}
|
||
|
|
&-thumb{
|
||
|
|
@media #{$sm, $xs}{
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
& img{
|
||
|
|
width: 70px;
|
||
|
|
height: 70px;
|
||
|
|
@include border-radius(50%);
|
||
|
|
border: 1px solid #e4e4e4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-title{
|
||
|
|
font-size: 22px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 400;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
& span{
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-content{
|
||
|
|
& p{
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 0;
|
||
|
|
& a{
|
||
|
|
font-weight: 500;
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-cart{
|
||
|
|
@media #{$sm, $xs}{
|
||
|
|
margin-top: 25px;
|
||
|
|
}
|
||
|
|
& .cart-info{
|
||
|
|
& a{
|
||
|
|
font-size: 16px;
|
||
|
|
color: #000;
|
||
|
|
text-transform: capitalize;
|
||
|
|
font-weight: 500;
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .cart-item{
|
||
|
|
& a{
|
||
|
|
position: relative;
|
||
|
|
font-size: 18px;
|
||
|
|
color: #000;
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .cart-quantity{
|
||
|
|
position: absolute;
|
||
|
|
bottom: -4px;
|
||
|
|
right: -7px;
|
||
|
|
font-size: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
width: 17px;
|
||
|
|
height: 17px;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 17px;
|
||
|
|
background-color: #bc8246;
|
||
|
|
color: #fff;
|
||
|
|
font-weight: 500;
|
||
|
|
@include border-radius(50%);
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__menu{
|
||
|
|
&-left{
|
||
|
|
padding: 26px 20px 5px;
|
||
|
|
border: 1px solid #eceaea;
|
||
|
|
}
|
||
|
|
&-title{
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #bc8246;
|
||
|
|
border-bottom: 1px solid #eceaea;
|
||
|
|
margin-bottom: 0;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
& i{
|
||
|
|
width: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
&-tab{
|
||
|
|
& .nav-tabs{
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
border: 0;
|
||
|
|
& .nav-link{
|
||
|
|
padding: 0;
|
||
|
|
margin: 0;
|
||
|
|
border: 0;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #000;
|
||
|
|
text-align: left;
|
||
|
|
padding: 15px 0;
|
||
|
|
background-color: transparent;
|
||
|
|
transition: all 0.3s ease-out 0s;
|
||
|
|
&:not(:last-child){
|
||
|
|
border-bottom: 1px solid #e4e4e4;
|
||
|
|
}
|
||
|
|
&.active{
|
||
|
|
transition: all 0.3s ease-out 0s;
|
||
|
|
}
|
||
|
|
&.active,
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
& i{
|
||
|
|
margin-right: 10px;
|
||
|
|
width: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__info{
|
||
|
|
&-top{
|
||
|
|
padding: 20px 70px;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-btn{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 500;
|
||
|
|
background-color: transparent;
|
||
|
|
& i{
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-title{
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 0;
|
||
|
|
& i{
|
||
|
|
width: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
&-wrapper{
|
||
|
|
padding: 0 70px;
|
||
|
|
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-item{
|
||
|
|
padding: 30px 0;
|
||
|
|
&:not(:last-child){
|
||
|
|
border-bottom: 1px solid #eceaea;
|
||
|
|
}
|
||
|
|
& p{
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: capitalize;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
& h4{
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__edit{
|
||
|
|
&-wrapper{
|
||
|
|
padding: 40px 60px;
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-input{
|
||
|
|
margin-bottom: 25px;
|
||
|
|
& p{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 0;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
& input{
|
||
|
|
width: 100%;
|
||
|
|
height: 60px;
|
||
|
|
line-height: 56px;
|
||
|
|
background: var(--tp-grey-2);
|
||
|
|
border: 1px solid #ececec;
|
||
|
|
@include border-radius(4px);
|
||
|
|
padding-left: 30px;
|
||
|
|
padding-right: 45px;
|
||
|
|
&::placeholder{
|
||
|
|
color: #8d8e9a;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
&:focus{
|
||
|
|
border-color: #bc8246;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-close{
|
||
|
|
position: absolute;
|
||
|
|
top: 15px;
|
||
|
|
right: 15px;
|
||
|
|
&-btn{
|
||
|
|
font-size: 15px;
|
||
|
|
color: #6f7172;
|
||
|
|
height: 30px;
|
||
|
|
width: 30px;
|
||
|
|
line-height: 30px;
|
||
|
|
text-align: center;
|
||
|
|
border: 1px solid #e4e4e4;
|
||
|
|
|
||
|
|
&:hover{
|
||
|
|
color: #fff;
|
||
|
|
background-color: #bc8246;
|
||
|
|
border-color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.order{
|
||
|
|
&__info{
|
||
|
|
&-top{
|
||
|
|
padding: 20px 70px;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-btn{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 500;
|
||
|
|
background-color: transparent;
|
||
|
|
& i{
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-title{
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 0;
|
||
|
|
& i{
|
||
|
|
width: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
&-wrapper{
|
||
|
|
padding: 0 70px;
|
||
|
|
}
|
||
|
|
&-item{
|
||
|
|
padding: 30px 0;
|
||
|
|
&:not(:last-child){
|
||
|
|
border-bottom: 1px solid #eceaea;
|
||
|
|
}
|
||
|
|
& p{
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: capitalize;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
& h4{
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__list{
|
||
|
|
padding: 35px 70px 5px;
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
& .table{
|
||
|
|
@media #{$md, $sm, $xs}{
|
||
|
|
width: 600px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& table{
|
||
|
|
border: 0;
|
||
|
|
|
||
|
|
& th{
|
||
|
|
border-bottom: 1px solid #e4e4e4;
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-weight: 600;
|
||
|
|
& td{
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& tr{
|
||
|
|
&:not(:last-child){
|
||
|
|
border-bottom: 1px solid #e4e4e4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& > :not(:first-child){
|
||
|
|
border-top: 1px solid #e4e4e4;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
& .table > :not(caption) > * > *{
|
||
|
|
border: 0;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
& tbody{
|
||
|
|
& tr{
|
||
|
|
& td{
|
||
|
|
padding: 20px 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__id{
|
||
|
|
color: #bc8246;
|
||
|
|
font-weight: 500;
|
||
|
|
|
||
|
|
}
|
||
|
|
&__view{
|
||
|
|
&-btn{
|
||
|
|
font-weight: 500;
|
||
|
|
color: #000;
|
||
|
|
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__title{
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.password{
|
||
|
|
&__change{
|
||
|
|
&-top{
|
||
|
|
padding: 20px 70px;
|
||
|
|
background-color: #fff;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-btn{
|
||
|
|
font-size: 14px;
|
||
|
|
color: #000;
|
||
|
|
font-weight: 500;
|
||
|
|
& i{
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
color: #bc8246;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-title{
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 0;
|
||
|
|
& i{
|
||
|
|
width: 10px;
|
||
|
|
margin-right: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
&-wrapper{
|
||
|
|
padding: 0 70px;
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&-item{
|
||
|
|
padding: 30px 0;
|
||
|
|
&:not(:last-child){
|
||
|
|
border-bottom: 1px solid #eceaea;
|
||
|
|
}
|
||
|
|
& p{
|
||
|
|
font-size: 14px;
|
||
|
|
text-transform: capitalize;
|
||
|
|
color: #000;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
& h4{
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 1;
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__form{
|
||
|
|
padding: 35px 70px;
|
||
|
|
@media #{$xs}{
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&__input{
|
||
|
|
margin-bottom: 25px;
|
||
|
|
& p{
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
margin-bottom: 0;
|
||
|
|
color: #000;
|
||
|
|
}
|
||
|
|
& input{
|
||
|
|
width: 100%;
|
||
|
|
height: 60px;
|
||
|
|
line-height: 56px;
|
||
|
|
background: var(--tp-grey-2);
|
||
|
|
border: 1px solid #ececec;
|
||
|
|
@include border-radius(4px);
|
||
|
|
padding-left: 30px;
|
||
|
|
padding-right: 45px;
|
||
|
|
&::placeholder{
|
||
|
|
color: #8d8e9a;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
&:focus{
|
||
|
|
border-color: #bc8246;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|