laravelEcomm/public/sass/_shop.scss
2024-07-04 10:19:45 +05:45

336 lines
6.3 KiB
SCSS

/*---------------------
Shop
-----------------------*/
.shop__sidebar {
padding-right: 20px;
}
.shop__sidebar__search {
margin-bottom: 45px;
form {
position: relative;
input {
width: 100%;
font-size: 15px;
color: #b7b7b7;
padding-left: 20px;
border: 1px solid #e5e5e5;
height: 42px;
&::placeholder {
color: #b7b7b7;
}
}
button {
color: #b7b7b7;
font-size: 15px;
border: none;
background: transparent;
position: absolute;
right: 0;
padding: 0 15px;
top: 0;
height: 100%;
}
}
}
.shop__sidebar__accordion {
.card {
border: none;
border-radius: 0;
margin-bottom: 25px;
&:last-child {
margin-bottom: 0;
.card-body {
padding-bottom: 0;
border-bottom: none;
}
}
}
.card-body {
padding: 0;
padding-top: 10px;
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
.card-heading {
cursor: pointer;
a {
color: $heading-color;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
display: block;
}
}
}
.shop__sidebar__categories {
ul {
height: 225px;
li {
list-style: none;
a {
color: #b7b7b7;
font-size: 15px;
line-height: 32px;
@include transition(all, .3s);
&:hover {
color: $heading-color;
}
}
}
}
}
.shop__sidebar__brand {
@extend .shop__sidebar__categories;
ul {
height: auto;
}
}
.shop__sidebar__price {
@extend .shop__sidebar__categories;
ul {
height: auto;
}
}
.shop__sidebar__size {
padding-top: 15px;
label {
color: $heading-color;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
border: 1px solid #e5e5e5;
padding: 6px 25px;
margin-bottom: 10px;
margin-right: 5px;
cursor: pointer;
&.active {
background: $heading-color;
color: $white-color;
border-color: $heading-color;
}
input {
position: absolute;
visibility: hidden;
}
}
}
.shop__sidebar__color {
padding-top: 15px;
label {
height: 30px;
width: 30px;
border-radius: 50%;
position: relative;
margin-right: 10px;
display: inline-block;
margin-bottom: 10px;
cursor: pointer;
&.c-1 {
background: #0b090c;
}
&.c-2 {
background: #20315f;
}
&.c-3 {
background: #f1af4d;
}
&.c-4 {
background: #636068;
}
&.c-5 {
background: #57594d;
}
&.c-6 {
background: #e8bac4;
}
&.c-7 {
background: #d6c1d7;
}
&.c-8 {
background: #ed1c24;
}
&.c-9 {
background: #ffffff;
}
&:after {
position: absolute;
left: -3px;
top: -3px;
height: 36px;
width: 36px;
border: 1px solid #e5e5e5;
content: "";
border-radius: 50%;
}
input {
position: absolute;
visibility: hidden;
}
}
}
.shop__sidebar__tags {
padding-top: 15px;
a {
color: #404040;
font-size: 13px;
font-weight: 700;
background: #f1f5f8;
padding: 5px 18px;
display: inline-block;
text-transform: uppercase;
margin-right: 6px;
margin-bottom: 10px;
@include transition(all, .3s);
&:hover {
background: $heading-color;
color: $white-color;
}
}
}
.shop__sidebar__accordion .card-heading a:after,
.shop__sidebar__accordion .card-heading > a.active[aria-expanded=false]:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 24px;
font-weight: 700;
color: $heading-color;
position: absolute;
right: 0;
top: 2px;
line-height: 20px;
}
.shop__sidebar__accordion .card-heading.active a:after {
content: "\f107";
font-family: "FontAwesome";
font-size: 24px;
font-weight: 700;
color: $heading-color;
position: absolute;
right: 0;
top: 2px;
line-height: 20px;
}
.shop__product__option {
margin-bottom: 45px;
p {
color: $heading-color;
margin-bottom: 0;
}
}
.shop__product__option__right {
text-align: right;
p {
display: inline-block;
margin-bottom: 0;
}
.nice-select {
float: none;
display: inline-block;
padding: 0;
line-height: 26px;
height: auto;
border: none;
padding-right: 28px;
&:after {
border-bottom: 1.5px solid #111111;
border-right: 1.5px solid #111111;
height: 8px;
right: 12px;
width: 8px;
}
span {
color: $heading-color;
font-size: 15px;
font-weight: 700;
}
.list {
border-radius: 0;
}
}
}
.product__pagination {
padding-top: 25px;
text-align: center;
a {
display: inline-block;
font-size: 16px;
font-weight: 700;
color: $heading-color;
height: 30px;
width: 30px;
border: 1px solid transparent;
border-radius: 50%;
line-height: 30px;
text-align: center;
&.active {
border-color: $heading-color;
}
&:hover {
border-color: $heading-color;
}
}
span {
display: inline-block;
font-size: 16px;
font-weight: 700;
color: $heading-color;
padding-left: 10px;
padding-right: 15px;
}
}