admin/cartlog-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

inital commit

Browse Source
This commit is contained in:
Rohit Darekar
2026-01-01 15:25:19 +05:30
commit f0ae49465a
36361 changed files with 4894111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

931
public/assets/scss/pages/_checkout.scss Normal file
View File

@@ -0,0 +1,931 @@
/**=====================
Checkout CSS start
==========================**/
.checkout {
.checkout-details {
background-color: #f9f9f9;
border: 1px solid #dddddd;
padding: 40px;
.order-place {
margin-top: 15px;
}
}
}
.order-box {
.title-box {
padding-bottom: 20px;
color: #444444;
font-size: 22px;
border-bottom: 1px solid #ededed;
margin-bottom: 20px;
span {
width: 35%;
float: right;
font-weight: 600;
text-align: right;
}
h4 {
font-weight: 600;
}
.checkbox-title {
display: flex;
justify-content: space-between;
}
}
.sub-total {
li {
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 600;
color: #333333;
line-height: 20px;
margin-bottom: 20px;
width: 100%;
.count {
position: relative;
font-size: 18px;
line-height: 20px;
font-weight: 400;
width: 35%;
float: right;
text-align: right;
}
}
.shipping-class {
margin-bottom: 12px;
.shopping-checkout-option {
margin-top: -4px;
position: relative;
font-size: 18px;
line-height: 20px;
color: var(--theme-color);
font-weight: 400;
width: 35%;
float: right;
text-align: right;
}
}
}
.total {
position: relative;
margin-bottom: 30px;
li {
position: relative;
display: block;
font-weight: 400;
color: #333333;
line-height: 20px;
font-size: 18px;
}
}
.qty {
position: relative;
border-bottom: 1px solid #ededed;
margin-bottom: 30px;
li {
position: relative;
display: block;
font-size: 15px;
color: #444444;
line-height: 20px;
margin-bottom: 20px;
span {
float: right;
font-size: 18px;
line-height: 20px;
color: #232323;
font-weight: 400;
width: 35%;
text-align: right;
}
}
}
}
.radio-option {
position: relative;
}
.img-paypal {
width: 30%;
margin-left: 15px;
}
.checkout-section-2 {
.left-sidebar-checkout {
.checkout-detail-box {
>ul {
display: flex;
flex-wrap: wrap;
gap: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
>li {
position: relative;
width: 100%;
&:last-child {
.checkout-box {
&::before {
content: none;
}
}
}
.checkout-icon {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 6px;
background-color: $white;
display: flex;
align-items: center;
justify-content: center;
color: var(--theme-color);
box-shadow: 0 0 8px #eee;
z-index: 1;
svg {
width: 20px;
height: 20px;
fill: #4a5568;
}
[dir="rtl"] & {
left: unset;
right: 0;
}
@media (max-width: 576px) {
display: none;
}
}
.checkout-box {
padding: calc(14px + (29 - 14) * ((100vw - 320px) / (1920 - 320)));
background-color: $white;
border-radius: 8px;
box-shadow: 0 0 8px #eee;
margin-left: 66px;
position: relative;
.payment-method {
ul {
display: flex;
align-items: center;
gap: 15px;
li {
width: auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
background-color: #f9f9f6;
padding: 15px 40px;
border-radius: 20px;
text-align: center;
cursor: pointer;
i {
font-size: 28px;
color: #898989;
line-height: 1;
}
h5 {
color: #898989;
}
&.active {
border-color: var(--theme-color);
color: var(--theme-color);
i {
color: var(--theme-color);
}
}
}
}
}
.form-select {
background-color: #f9f9f6;
border-color: #eee;
line-height: 1.8;
}
[dir="rtl"] & {
margin-left: unset;
margin-right: 66px;
}
@media (max-width: 576px) {
margin-left: 0;
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
}
}
&::before {
content: "";
position: absolute;
top: 25px;
left: -42px;
width: 0;
height: 115%;
border-left: 1px dashed rgba($title-color, 0.18);
[dir="rtl"] & {
left: unset;
right: -42px;
}
@media (max-width: 576px) {
content: none;
}
}
.checkout-title {
margin-bottom: calc(9px + (17 - 9) * ((100vw - 320px) / (1920 - 320)));
display: flex;
align-items: center;
justify-content: space-between;
h4 {
font-weight: 600;
font-size: calc(16px + (19 - 16) * ((100vw - 320px) / (1920 - 320)));
}
}
.checkout-detail {
.delivery-address-box {
border-radius: 8px;
padding: calc(12px + (24 - 12) * ((100vw - 320px) / (1920 - 320)));
background-color: #f9f9f6;
height: 100%;
.form-check {
padding-left: 0;
[dir="rtl"] & {
padding-left: unset;
padding-right: 0;
}
.form-check-input {
float: unset;
margin: 0;
&:active {
filter: unset;
}
}
}
>div {
display: flex;
position: relative;
.label {
position: absolute;
top: 0;
right: 0;
background-color: var(--theme-color);
padding: 2px 8px;
border-radius: 4px;
color: $white;
font-size: 12px;
letter-spacing: 0.8px;
[dir="rtl"] & {
right: unset;
left: 0;
}
label {
margin-bottom: 0;
line-height: 1.7;
}
}
.form-check {
.form-check-input {
width: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
height: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
margin-top: 2px;
margin-left: 0;
&:checked {
background-color: var(--theme-color);
border-color: var(--theme-color);
}
&:checked[type="radio"] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
&:focus {
box-shadow: none;
border-color: var(--theme-color);
}
}
}
.delivery-address-detail {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-left: 0;
width: calc(85% + (75 - 85) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-left: unset;
margin-right: 0;
padding-right: 0;
}
li {
display: block;
width: 100%;
}
p,
h6 {
line-height: 1.4;
margin-bottom: 0;
font-weight: 400;
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
span {
margin-right: 4px;
font-weight: 600;
}
}
}
}
}
.add-address {
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
height: 100%;
text-align: center;
cursor: pointer;
background-color: $white;
box-shadow: 0 0 9px rgba($black, 0.07);
border-radius: 8px;
}
.delivery-option {
padding: calc(17px + (26 - 17) * ((100vw - 320px) / (1920 - 320)));
background-color: #f9f9f6;
border-radius: 5px;
.select-option {
@media (max-width: 1460px) {
margin-top: 6px;
}
}
.date-box {
position: relative;
i {
top: 50%;
transform: translateY(-50%);
position: absolute;
right: 17px;
font-size: 18px;
color: $content-color;
}
}
.delivery-category {
display: flex;
align-items: center;
height: 100%;
@media (max-width: 767px) {
display: block;
}
}
.custom-form-check {
display: flex;
align-items: center;
margin-bottom: 0;
min-height: auto;
[dir="rtl"] & {
padding-left: unset;
padding-right: 1.5rem;
}
.form-check-label {
font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
padding-left: 12px;
font-weight: 500;
margin-bottom: 0;
width: calc(100% - calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320))));
[dir="rtl"] & {
padding-left: unset;
padding-right: 12px;
}
}
}
.delivery-date {
font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
border: 1px solid $border-color;
background-color: $white;
display: flex;
align-items: center;
color: $content-color;
width: 100%;
padding: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320))) calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));
input {
font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
border: none;
background-color: $white;
display: flex;
align-items: center;
color: $content-color;
width: 100%;
}
}
.delivery-time {
display: flex;
align-items: center;
height: 100%;
.dropdown-toggle {
font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
border: 1px solid $border-color;
background-color: $white;
display: flex;
align-items: center;
color: $content-color;
i {
-webkit-text-stroke: 1px $content-color;
color: transparent;
font-size: 18px;
margin-right: 10px;
}
&::after {
content: none;
}
&::before {
position: absolute;
content: "\f107";
top: 50%;
transform: translateY(-50%);
right: 20px;
font-family: "Font Awesome 6 Free";
font-weight: 900;
}
}
.dropdown-menu {
border: 1px solid transparent;
box-shadow: 0 6px 5px rgba($black, 0.1);
li {
a {
&:active {
color: $black;
text-decoration: none;
background-color: $border-color;
}
}
+li {
margin-top: 5px;
}
}
}
}
}
.future-box {
display: none;
&.show {
display: block;
}
.future-option {
padding: calc(17px + (26 - 17) * ((100vw - 320px) / (1920 - 320)));
background-color: rgba(26, 164, 136, 0.05);
border-radius: 10px;
.delivery-items {
display: flex;
align-items: center;
height: 100%;
width: 100%;
>div {
width: 100%;
}
h4 {
margin-bottom: 16px;
color: $title-color;
font-weight: 500;
}
ul {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: -8px;
li {
width: 25%;
padding: 8px;
@media (max-width: 1500px) {
width: 33.33%;
}
@media (max-width: 1400px) {
width: 50%;
}
@media (max-width: 460px) {
width: 100%;
}
a {
background-color: $white;
display: block;
text-align: center;
color: $title-color;
padding: 12px 8px;
border: 1px solid var(--theme-color);
border-radius: 8px;
}
&.active {
a {
background-color: var(--theme-color);
color: $white;
}
}
}
}
}
}
}
.payment-button {
padding: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320))) calc(15px + (25 - 15) * ((100vw - 320px) / (1920 - 320)));
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
}
.payment-method {
.custom-form-check {
label {
font-weight: 500;
font-size: 17px;
}
}
}
.credit-card-box {
.credit-detail {
position: relative;
}
}
.credit-info {
label {
font-size: calc(14px + (15 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
}
}
.payment-option {
padding: 20px;
box-shadow: 0 0 5px rgba($black, 0.17);
border-radius: 8px;
position: relative;
.form-check {
.form-check-input {
margin-top: 4px;
}
label {
font-weight: 500;
font-size: 18px;
padding-left: 10px;
}
}
img {
top: 50%;
transform: translateY(-50%);
position: absolute;
right: 20px;
width: 60px;
}
}
.custom-accordion {
display: flex;
flex-wrap: wrap;
gap: calc(10px + (20 - 10) * ((100vw - 320px) / (1920 - 320)));
align-items: center;
.accordion-item {
border: none;
border-radius: 6px;
overflow: hidden;
display: block;
width: 100%;
background-color: #f8f8f8;
border-radius: 5px;
.accordion-header {
.accordion-button {
color: $content-color;
position: relative;
padding: 0;
background-color: #f8f8f8;
&::after {
content: none;
}
&::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
position: absolute;
content: "\f107";
top: 50%;
transform: translateY(-50%);
right: 30px;
transition: transform 0.2s ease-in-out;
[dir="rtl"] & {
right: unset;
left: 30px;
}
}
&:not(.collapsed) {
background-color: transparent;
box-shadow: none;
&::before {
top: 20%;
transform: rotate(-180deg) translateY(-50%);
}
}
.form-check {
display: flex;
align-items: center;
width: 100%;
.form-check-label {
font-weight: 500;
display: flex;
align-items: center;
width: 100%;
font-size: calc(15px + (18 - 15) * ((100vw - 320px) / (1920 - 320)));
padding: 16px 20px;
margin-bottom: 0;
[dir="rtl"] & {
padding-right: 0;
}
@media (max-width: 480px) {
margin-top: 5px;
}
.form-check-input {
margin-right: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
margin-left: calc(6px + (10 - 6) * ((100vw - 320px) / (1920 - 320)));
margin-right: unset;
}
}
}
}
}
}
.accordion-collapse {
.accordion-body {
padding-top: 0;
.cod-review {
margin: 0;
line-height: 1.5;
color: $content-color;
font-size: 16px;
a {
&:hover {
color: var(--theme-color);
}
}
}
.custom-form-check {
margin-bottom: calc(5px + (8 - 5) * ((100vw - 320px) / (1920 - 320)));
display: flex;
align-items: center;
[dir="rtl"] & {
padding-left: unset;
padding-right: 0;
}
label {
display: flex;
align-items: center;
font-size: calc(14px + (17 - 14) * ((100vw - 320px) / (1920 - 320)));
}
input {
margin-right: 10px;
[dir="rtl"] & {
margin-right: unset;
margin-left: 10px;
}
}
}
}
}
}
}
}
}
}
}
}
}
.pos-detail-card {
.product-details {
.cart-listing {
.text-theme {
color: var(--theme-color);
}
li {
padding-bottom: 15px;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
img {
width: 50px;
height: 50px;
}
.cart-content {
width: calc(100% - 65px);
h4 {
font-weight: 400;
color: $content-color;
width: 80%;
-webkit-line-clamp: 1;
margin-bottom: 4px;
}
.price {
position: absolute;
right: 0;
top: 0;
font-weight: 500;
color: $title-color;
[dir="rtl"] & {
right: unset;
left: 0;
}
}
}
}
}
}
}
}
.empty-box {
text-align: center;
img {
width: 40px;
opacity: 1;
}
h2 {
font-size: 22px;
color: #bfbfbf;
font-weight: 500;
text-align: center;
padding: 14px 0 30px;
}
}
.coupon-sec {
>div {
width: 100%;
}
.apply-sec {
display: flex;
align-items: flex-start;
justify-content: space-between;
background-color: rgba(26, 164, 136, 0.11);
border-radius: 7px;
padding: 12px 12px;
width: 100%;
border: 1px dashed rgba(26, 164, 136, 0.2);
a {
color: var(--theme-color);
}
h4 {
span {
font-size: 15px !important;
}
}
p {
margin-bottom: 0;
}
>div {
display: flex;
align-items: flex-start;
gap: 6px;
img {
width: 22px;
}
}
}
.coupon-box {
input {
padding: 10px 10px;
}
.coupon-error {
animation: shake 0.5s;
}
.btn-apply {
outline: 0;
box-shadow: none;
border: 1px solid #1aa387;
background-color: #1aa387;
color: white;
padding: 5px 16px;
border-radius: 0 5px 5px 0;
height: 100%;
}
}
}

363
public/assets/scss/pages/_dashboard.scss Normal file
View File

@@ -0,0 +1,363 @@
/**=====================
Dashboard CSS start
==========================**/
.dashboard-tiles {
margin-bottom: 30px;
.card-tiles {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
background-color: white;
padding: 22px 13px;
border-radius: 10px;
position: relative;
&:after {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 35px;
background-color: var(--theme-color);
border-radius: 5px;
}
h6 {
color: rgba($content-color, 0.8);
}
h3 {
color: $title-color;
margin-top: 8px;
font-weight: 700;
font-size: calc(20px + (24 - 20) * ((100vw - 320px) / (1920 - 320)));
}
.icon-box {
width: 52px;
height: 52px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
svg {
color: $white;
font-size: 22px;
}
}
}
.row {
>div {
&:first-child {
.card-tiles {
background: rgba(#0da487, 0.1);
&:after {
background-color: #0da487;
}
.icon-box {
background: #0da487;
}
}
}
&:nth-child(2) {
.card-tiles {
background: rgba(#ffa53b, 0.1);
&:after {
background-color: #ffa53b;
}
.icon-box {
background: #ffa53b;
}
}
}
&:nth-child(3) {
.card-tiles {
background: rgba(#a04aff, 0.1);
&:after {
background-color: #a04aff;
}
.icon-box {
background: #a04aff;
}
}
}
&:nth-child(4) {
.card-tiles {
background: rgba(#ff6161, 0.1);
&:after {
background-color: #ff6161;
}
.icon-box {
background: #ff6161;
}
}
}
}
}
}
.apexcharts-toolbar {
z-index: 1 !important;
}
.top-selling-table {
border: 1px solid #eee;
padding: 8px;
border-radius: 8px;
body[class="dark-only"] & {
border-color: #1d3436;
}
table {
border: none;
width: 100%;
tr {
+tr {
td {
border-top: 1px solid #eee;
border-color: #eee;
}
}
}
}
td {
padding: 10px;
border: none;
}
.img-info {
display: flex;
align-items: center;
gap: 10px;
.user-round {
width: auto;
height: auto;
margin: unset;
background-color: transparent;
}
img {
width: 60px;
height: 60px;
object-fit: cover;
}
}
h6 {
color: rgba($content-color, 0.7);
text-transform: capitalize;
body[class="dark-only"] & {
color: rgba(255, 255, 255, 0.6);
}
}
h5 {
color: $title-color;
margin-top: 5px;
font-weight: 600;
body[class="dark-only"] & {
color: rgba(255, 255, 255, 0.6);
}
}
}
.blog-box {
.blog-img {
img {
height: 180px;
border-radius: 8px;
margin-bottom: 10px;
object-fit: cover;
width: 100%;
}
}
.blog-content {
a {
color: $title-color;
font-size: 16px;
margin-bottom: 4px;
display: block;
font-weight: 500;
body[class="dark-only"] & {
color: rgba(255, 255, 255, 0.6);
}
}
h6 {
color: rgba($content-color, 0.7);
body[class="dark-only"] & {
color: rgba(255, 255, 255, 0.3)
}
}
}
}
.review-box {
border: 1px solid #eee;
border-radius: 8px;
body[class="dark-only"] & {
border-color: #1d3436;
}
table {
width: 100%;
border: none;
tr {
+tr {
border-top: 1px dashed #eee;
}
}
}
li {
display: flex;
align-items: center;
justify-content: space-between;
span {
font-size: 15px;
}
.rating-sec {
span {
font-size: 16px;
}
}
+li {
margin-top: 7px;
padding-top: 7px;
border-top: 1px dashed #eee;
}
>div {
display: flex;
align-items: center;
gap: 10px;
}
}
.review-content {
display: flex;
align-items: center;
gap: 10px;
span {
width: calc(100% - 5px - 40px);
}
}
td {
padding: 8px;
border: none;
}
tr {
td {
&:nth-child(2) {
width: auto;
min-width: 190px;
text-align: center;
}
&:nth-child(1) {
width: auto;
min-width: 250px;
}
}
}
.img-box {
width: 40px;
height: 40px;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: center;
background: #e9eaea;
padding: 2px;
img {
object-fit: contain;
height: 100%;
}
}
.rating-sec {
font-size: 17px;
gap: 0px;
}
}
@media (min-width: 576px) {
.dashboard-form {
>div {
>.container-fluid {
padding: 0;
>.row {
margin: 0;
>div {
padding: 0;
}
}
}
>form {
>.container-fluid {
padding: 0;
>.row {
margin: 0;
>div {
padding: 0;
}
}
>.container-fluid {
padding: 0;
>.row {
margin: 0;
>div {
padding: 0;
}
}
}
}
}
}
}
}

46
public/assets/scss/pages/_errorpage.scss Normal file
View File

@@ -0,0 +1,46 @@
/**=====================
Error-page CSS Start
==========================**/
.error-section {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
text-align: center;
position: relative;
z-index: 1;
&:after {
content: "";
position: absolute;
background-image: url("../../images/error-bg.png");
background-size: cover;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: -1;
}
img {
width: 42%;
@media (max-width: 480px) {
width: 80%;
}
}
h2 {
text-transform: uppercase;
margin-bottom: 18px;
display: block;
margin-top: 20px;
}
h3 {
width: 80%;
line-height: 1.6;
margin: 10px auto 0;
color: $light-text;
font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1920 - 320)));
@media (max-width: 480px) {
width: 100%;
}
}
}

274
public/assets/scss/pages/_login.scss Normal file
View File

@@ -0,0 +1,274 @@
/**=====================
Log In And Sign up CSS Start
==========================**/
.log-in-section {
overflow-x: hidden;
display: flex;
align-items: center;
position: relative;
z-index: 0;
min-height: 100vh;
overflow: auto;
padding: calc(25px + (60 - 25) * ((100vw - 320px) / (1920 - 320))) 0;
&::after {
@include pos;
@include pseudowh;
top: 0;
left: 0;
background-image: url(../../images/bg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
&.otp-section {
display: flex;
align-items: center;
}
.image-contain {
@include flex_common;
height: 100%;
}
.inputs {
margin: calc(-2px + (-8 - 2) * ((100vw - 320px) / (1920 - 320)));
input {
margin: calc(2px + (8 - 2) * ((100vw - 320px) / (1920 - 320)));
border: none;
}
}
.log-in-box {
background-color: $white;
padding: calc(16px + (50 - 16) * ((100vw - 320px) / (1920 - 320)));
border-radius: calc(8px + (12 - 8) * ((100vw - 320px) / (1920 - 320)));
.form-floating {
> label{
z-index: 0;
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
.logo-name {
margin-bottom: calc(20px + (30 - 20) * ((100vw - 320px) / (1920 - 320)));
margin-top: -10px;
a {
font-size: calc(28px + (35 - 28) * ((100vw - 320px) / (1920 - 320)));
font-weight: bold;
color: $title-color;
font-family: $public-sans;
display: block;
img {
width: calc(150px + (225 - 150) * ((100vw - 320px) / (1920 - 320)));
}
}
}
.log-in-title {
margin-bottom: calc(12px + (20 - 12) * ((100vw - 320px) / (1920 - 320)));
h3 {
margin-bottom: calc(1px + (6 - 1) * ((100vw - 320px) / (1920 - 320)));
font-size: calc(18px + (21 - 18) * ((100vw - 320px) / (1920 - 320)));
color: var(--theme-color);
font-weight: 600;
}
h4,
h5 {
color: $content-color;
margin-top: 8px;
}
}
.log-in-button {
margin-top: 20px;
padding: 1px 0;
ul {
@include flex_wrap($dis: flex, $wrap: wrap, $gap: 15px);
align-items: center;
[dir="rtl"] & {
padding-right: 0;
}
li {
display: block;
width: 100%;
background-color: $light-color;
a {
@include flex_common;
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
color: $title-color;
border-radius: 5px;
padding: calc(10px + (16 - 10) * ((100vw - 320px) / (1920 - 320))) calc(18px + (30 - 18) * ((100vw - 320px) / (1920 - 320)));
flex-wrap: wrap;
gap: calc(8px + (10 - 8) * ((100vw - 320px) / (1920 - 320)));
background-color: $light-color;
img {
width: calc(18px + (24 - 18) * ((100vw - 320px) / (1920 - 320)));
}
}
}
}
}
.forgot-box {
@include flex_common($dis: flex, $align: center, $justify: space-between);
@include mq-max(2xs) {
display: block;
}
}
.remember-box {
display: flex;
align-items: center;
.check-box {
display: block;
margin-top: -6px;
}
label {
font-size: 16px;
margin-bottom: 0;
span {
font-weight: 500;
color: var(--theme-color);
}
}
}
.forgot-password {
font-size: 16px;
font-weight: 500;
display: block;
&:hover {
color: var(--theme-color);
}
}
.other-log-in {
margin-top: 15px;
text-align: center;
position: relative;
&::before {
@include pos;
@include center(vertical);
@include pseudowh($width: 100%, $height: 1px);
left: 0;
background-color: #ddd;
z-index: 0;
}
h6 {
color: $content-color;
position: relative;
background-color: $white;
padding: 0 14px;
display: inline-block;
text-transform: uppercase;
}
}
.sign-up-box {
margin-top: 20px;
text-align: center;
h4 {
color: $content-color;
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: calc(0px + (3 - 0) * ((100vw - 320px) / (1920 - 320)));
}
a {
font-weight: 500;
font-size: calc(15px + (17 - 15) * ((100vw - 320px) / (1920 - 320)));
margin-bottom: -4px;
display: block;
&:hover {
color: var(--theme-color);
}
}
}
.contact-title {
margin-bottom: 30px;
h2 {
margin-bottom: 15px;
}
h5 {
width: 53%;
font-size: 18px;
line-height: 1.3;
color: $content-color;
}
}
.input-box {
.form-floating {
>label {
[dir="rtl"] & {
left: unset;
right: 0;
}
}
>.form-control {
&:not(:placeholder-shown) {
~label {
[dir="rtl"] & {
transform: scale(0.85) translateY(-0.5rem) translateX(4.55rem);
}
}
}
}
}
}
.country-input{
.custom-select-box{
height: calc(100% - 2px);
left: 1px;
border-left: unset;
border-block: unset;
.form-select{
border-left: unset;
border-block: unset;
height: 56px;
background-color: $white !important;
}
}
.form-floating{
> .form-control:not(:placeholder-shown){
padding-block: 1rem;
}
}
}
}
}

519
public/assets/scss/pages/_media.scss Normal file
View File

@@ -0,0 +1,519 @@
/**=====================
Media CSS Start
==========================**/
.media-library-sec {
.dropdown {
transform: translateY(-10px);
transition: all 0.5s ease;
opacity: 0;
visibility: hidden;
.dropdown-menu {
padding: 10px 5px;
li {
margin-bottom: 6px;
&:last-child {
margin-bottom: 0;
}
}
.dropdown-item {
border-top: none;
font-size: 15px;
&:hover {
color: var(--theme-color);
}
}
}
}
.library-box {
overflow: hidden;
position: relative;
.dropdown-toggle {
&:after {
display: none;
}
}
.dropdown {
position: absolute;
right: 10px;
top: 10px;
background-color: rgba(82, 82, 82, 0.72);
line-height: 1;
color: $white;
@include pseudowh($width: 26px, $height: 26px);
@include flex_common;
border-radius: 3px;
cursor: pointer;
z-index: 1;
.btn {
background-color: rgba(82, 82, 82, 0.72) !important;
line-height: 1;
color: #fff;
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
cursor: pointer;
z-index: 1;
padding: 0 !important;
}
> a {
i,
svg {
color: $white;
}
}
}
&:hover {
label {
&:before {
transform: translateY(0);
transition: all 0.5s ease;
opacity: 1;
visibility: visible;
}
}
.dropdown {
transform: translateY(0);
transition: all 0.5s ease;
opacity: 1;
visibility: visible;
}
}
}
input[type='checkbox'][class^='media-checkbox'],
input[type='radio'][class^='media-checkbox'],
.form-check-input {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 0;
cursor: pointer;
background-color: #f9f9f6;
border-radius: 10px;
img {
width: 100%;
object-fit: contain;
}
}
label:before {
background-color: #525252;
color: $white;
@include pos;
display: block;
border-radius: 4px;
border: 1px solid #c1c1c1;
top: 10px;
left: 10px;
@include pseudowh($width: 18px, $height: 18px);
text-align: center;
line-height: 16px;
transition-duration: 0.4s;
transform: translateY(-10px);
transition: all 0.5s ease;
opacity: 0;
visibility: hidden;
z-index: 1;
}
:checked + label {
border-color: var(--theme-color);
}
:checked + label:before {
content: '✓';
background-color: var(--theme-color);
border-color: var(--theme-color);
transform: translateY(0);
opacity: 1;
visibility: visible;
z-index: 1;
}
}
.media-modal {
h2 {
font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
}
.media-library-sec {
.dropdown {
.dropdown-menu {
right: 0 !important;
left: unset !important;
min-width: max-content;
}
}
}
.modal-header {
border-bottom: 1px solid #eee !important;
}
.nav-tabs {
border-color: $border-color;
.nav-link {
border-color: transparent;
cursor: pointer;
}
.nav-link.active {
background-color: #f2f2f2;
}
}
.select-top-panel {
margin-top: 20px;
padding-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: calc(9px + (25 - 9) * ((100vw - 320px) / (1920 - 320)));
justify-content: space-between;
> div {
width: 50%;
@include mq-max(md) {
width: 49%;
}
@include mq-max(sm) {
width: 100%;
}
}
select {
width: 25%;
@include mq-max(md) {
width: 48%;
}
@include mq-max(sm) {
width: 100%;
}
}
}
.content-section {
padding: calc(15px + (35 - 15) * ((100vw - 320px) / (1920 - 320))) 0;
min-height: 45vh;
[type='file'] {
height: 0;
overflow: hidden;
width: 0;
}
.loader-wrapper {
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: $white;
}
.card {
padding: 8px;
border: 1px solid $border-color;
border-radius: 3px;
.option-btn {
position: absolute;
right: 10px;
top: 10px;
background-color: #f5f5f5;
padding: 3px 0;
[dir='rtl'] & {
right: unset;
left: 10px;
}
img {
width: 16px;
}
}
.card-img-top {
height: 180px;
}
.card-body {
padding: 5px 0 0 0;
.card-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0;
font-size: 13px;
}
span {
font-size: 12px;
}
}
}
&.drop-files-sec {
text-align: center;
@include flex_common;
flex-wrap: wrap;
padding: 0;
border: 1px dashed var(--theme-color);
border-radius: calc(9px + (25 - 9) * ((100vw - 320px) / (1920 - 320)));
margin: calc(16px + (25 - 16) * ((100vw - 320px) / (1920 - 320))) 5px;
position: relative;
margin-bottom: calc(72px + (102 - 72) * ((100vw - 320px) / (1920 - 320)));
.modal-footer {
position: absolute;
width: calc(100% + 44px);
bottom: calc(-89px + (-118 - -89) * ((100vw - 320px) / (1920 - 320)));
left: -22px;
display: flex;
.btn {
background-color: var(--theme-color) !important;
}
}
> div {
width: 100%;
}
i {
display: block;
width: 100%;
}
svg {
height: 90px;
width: 60px;
margin: 0 auto;
display: block;
}
h2 {
font-size: calc(17px + (25 - 17) * ((100vw - 320px) / (1920 - 320)));
span {
display: block;
margin-top: calc(4px + (14 - 4) * ((100vw - 320px) / (1920 - 320)));
font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 400;
opacity: 0.55;
}
label {
display: block;
margin-top: -15px;
font-size: calc(14px + (20 - 14) * ((100vw - 320px) / (1920 - 320)));
color: var(--theme-color);
}
}
.browse-file {
position: relative;
input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
}
i {
font-size: calc(31px + (45 - 31) * ((100vw - 320px) / (1920 - 320)));
}
}
&.select-file-section {
height: 440px;
overflow-y: auto;
overflow-x: hidden;
position: relative;
}
}
.modal-footer {
justify-content: space-between;
display: flex;
border-top: 1px solid #eee !important;
.media-bottom-btn {
display: flex;
justify-content: space-between;
width: 100%;
}
.left-part {
display: flex;
align-items: center;
text-align: left;
.file-detail {
h6 {
margin-bottom: 6px;
}
}
}
}
.modal-body {
.tab-content {
.tab-pane {
.select-top-panel {
> div {
.form-control {
padding: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320))) calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
}
}
.form-select {
padding-top: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320)));
padding-bottom: calc(5px + (6 - 5) * ((100vw - 320px) / (1920 - 320)));
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
padding-left: calc(9px + (12 - 9) * ((100vw - 320px) / (1920 - 320)));
}
}
}
}
}
}
.overflow-section {
height: 100%;
position: absolute;
left: 0;
width: 100%;
top: 0;
overflow-y: auto;
overflow-x: hidden;
border-radius: 25px;
background-color: $white;
&::-webkit-scrollbar {
width: 6px;
}
&::-webkit-scrollbar-track {
background-color: #dfdfdf;
}
&::-webkit-scrollbar-thumb {
background-color: #1fa687;
border-radius: 10px;
}
}
.image-selection-list {
background-color: $white;
padding: 15px;
border-radius: 30px;
.img-box {
height: calc(110px + (139 - 110) * ((100vw - 320px) / (1920 - 320)));
position: relative;
display: flex;
align-items: center;
padding: 10px;
border: 1px solid #eee;
border-radius: 7px;
img {
width: 90%;
margin: 0 auto;
height: 90%;
object-fit: contain;
}
.remove-img {
position: absolute;
right: 2px;
top: 2px;
cursor: pointer;
svg {
height: 25px !important;
width: 20px !important;
}
}
}
}
.select-top-panel {
margin-top: 0;
padding-bottom: 20px;
display: flex;
gap: calc(9px + (25 - 9) * ((100vw - 320px) / (1920 - 320)));
justify-content: space-between;
flex-wrap: wrap;
> div {
width: 50%;
@include mq-max(md) {
width: 49%;
}
@include mq-max(sm) {
width: 100%;
}
}
select {
width: 25%;
@include mq-max(md) {
width: 48%;
}
@include mq-max(sm) {
width: 100%;
}
}
}
.select-file-loader {
position: relative;
.loader-wrapper {
position: absolute !important;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: $white;
}
}

441
public/assets/scss/pages/_order-tracking.scss Normal file
View File

@@ -0,0 +1,441 @@
/**=====================
Order tracking Page scss
==========================**/
.progtrckr {
margin: 15px 0 0;
padding: 0;
display: flex;
align-items: flex-start;
@include mq-max(sm) {
display: inline;
margin: 30px 0;
overflow: hidden;
}
li {
display: inline-block;
text-align: center;
margin: 10px 0;
position: relative;
@include mq-max(sm) {
margin: 0;
width: 50% !important;
}
h5 {
margin-top: 20px;
text-align: center;
width: 100%;
display: flex;
justify-content: center;
font-weight: 500;
@include mq-max(sm) {
display: block;
text-align: left;
margin-top: 0;
[dir="rtl"] & {
text-align: right;
}
}
}
&:before {
position: relative;
top: -2px;
float: left;
left: 50% !important;
line-height: 1;
transform: translate(-50%, -50%) !important;
@include mq-max(sm) {
position: relative;
top: 10px;
float: left;
left: -2px !important;
line-height: 1;
transform: translate(-50%, -50%) !important;
[dir="rtl"] & {
float: right;
right: -32px !important;
left: unset !important;
}
}
}
&.progtrckr-todo {
color: $content-color;
border-top: 4px solid #959595;
width: 100% !important;
@include mq-max(sm) {
position: relative;
text-align: left;
margin-left: 30px;
align-items: flex-start;
padding-bottom: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
padding-left: 30px;
border-top: unset;
border-left: 4px solid #959595;
[dir="rtl"] & {
border-left: none;
border-right: 4px solid $content-color;
margin-left: 0;
margin-right: 30px;
align-items: flex-end;
padding-left: 0;
padding-right: 30px;
text-align: right;
}
}
&:before {
@include flex_common;
@include pseudowh($width: 30px, $height: 30px);
padding-top: 2px;
content: "";
color: $white;
background: #959595;
line-height: 35px;
border: none;
border-radius: 35px;
font-size: 16px;
@include mq-max(sm) {
position: absolute;
top: 10px;
left: -17px;
line-height: 1;
transform: translateY(-50%);
[dir="rtl"] & {
left: unset;
right: -17px;
}
}
}
h6 {
font-size: 13px;
margin-top: 8px;
}
}
}
}
.progtrckr-done {
color: $title-color;
border-top: 4px solid var(--theme-color);
width: 100% !important;
&:first-of-type {
@include mq-max(sm) {
padding-top: 5px;
}
}
@include mq-max(sm) {
position: relative;
text-align: left;
margin-left: 30px;
align-items: self-start;
padding-bottom: calc(20px + (40 - 20) * ((100vw - 320px) / (1920 - 320)));
border-top: unset;
border-left: 4px solid var(--theme-color);
[dir="rtl"] & {
margin-left: 0;
margin-right: 30px;
text-align: right;
border-left: none;
border-right: 4px solid var(--theme-color);
align-items: flex-end;
}
}
&:before {
@include flex_common;
@include pseudowh($width: 30px, $height: 30px);
padding-top: 2px;
content: "\f00c";
color: $white;
background-color: var(--theme-color);
line-height: 35px;
border: none;
border-radius: 35px;
font-size: 16px;
}
h6 {
font-size: 13px;
margin-top: 8px;
color: $content-color;
}
}
.order-detail-title {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.right-detail {
display: flex;
align-items: center;
gap: 15px;
width: 40%;
justify-content: flex-end;
select {
height: 100%;
padding: 12px 20px;
border: 1px solid #eee;
background-color: $white;
border-radius: 8px;
font-weight: 500;
font-size: 16px;
width: 40%;
}
.custom-select {
min-width: 170px;
.select2-container {
.select2-selection {
background-color: $white !important;
}
}
}
label {
border-radius: 8px;
padding: 10px 20px;
border: 1px solid #eee;
font-weight: 500;
font-size: 16px;
display: flex;
align-items: center;
gap: 8px;
background-color: $white;
margin-bottom: 0;
}
}
}
.tracking-wrapper {
background-color: $white;
.product-table {
border: none;
tbody {
tr {
td {
text-align: center;
border-color: #ececec;
img {
width: 60px;
}
h6 {
font-size: 16px;
}
&:nth-child(2) {
max-width: 150px;
h6 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
}
}
&:last-child {
td {
border-bottom: none;
}
}
}
}
thead {
tr {
th {
text-align: center;
border-color: #ececec;
font-size: 16px;
@media (max-width: 1400px) {
max-width: 150px;
width: 150px;
}
}
}
}
}
}
.customer-detail {
ul {
display: flex;
flex-wrap: wrap;
gap: 15px;
li {
width: 100%;
display: block;
label {
color: #999;
text-transform: capitalize;
margin-bottom: 0;
}
h4 {
font-size: 16px;
line-height: 1.6;
}
}
}
}
.tracking-total {
li {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-size: 17px;
margin-bottom: 6px;
&:last-child {
font-weight: 600;
margin-bottom: 0;
padding-top: 15px;
border-top: 1px solid #e8e8e8;
margin-top: 12px;
}
}
}
.accented {
fill: var(--theme-color);
stroke: var(--theme-color);
}
.tracking-panel {
ul {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
position: relative;
gap: 15px;
padding-right: 20px;
overflow-y: hidden;
overflow-x: auto;
[dir="rtl"] & {
padding-right: 0;
padding-left: 20px;
}
li {
position: relative;
width: 100%;
background-color: #ffffff;
border-radius: 0;
padding: calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320))) 0
calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320)))
calc(21px + (31 - 21) * ((100vw - 320px) / (1920 - 320)));
[dir="rtl"] & {
padding: calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320)))
calc(21px + (31 - 21) * ((100vw - 320px) / (1920 - 320)))
calc(13px + (17 - 13) * ((100vw - 320px) / (1920 - 320))) 0;
}
&:after {
opacity: 1;
content: " ";
position: absolute;
top: 0;
right: -16px;
width: 0;
height: 0;
border-top: calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320))) solid transparent;
border-bottom: calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320))) solid transparent;
border-left: 17px solid #ffffff;
transition: border-color 0.2s ease;
[dir="rtl"] & {
right: unset;
left: -16px;
border-right: 17px solid #ffffff;
border-left: unset;
}
}
&:before {
content: " ";
position: absolute;
top: 0;
left: 0px;
width: 0;
height: 0;
border-top: calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320))) solid transparent;
border-bottom: calc(28px + (40 - 28) * ((100vw - 320px) / (1920 - 320))) solid transparent;
border-left: 17px solid #f9f9f6;
transition: border-color 0.2s ease;
[dir="rtl"] & {
right: 0;
left: unset;
border-right: 17px solid #f9f9f6;
border-left: unset;
}
}
&.active {
background-color: #e9f6f3;
&:after {
border-left: 17px solid #e9f6f3;
[dir="rtl"] & {
border-right: 17px solid #e9f6f3;
border-left: unset;
}
}
}
&.cancelled-box {
background-color: #fbe9eb;
&:after {
border-left: 17px solid #fbe9eb;
[dir="rtl"] & {
border-right: 17px solid #fbe9eb;
border-left: unset;
}
}
}
&:first-child {
border-radius: 6px 0 0 6px;
[dir="rtl"] & {
border-radius: 0 6px 6px 0;
}
&::before {
display: none;
}
}
}
}
.panel-content {
display: flex;
align-items: center;
gap: 16px;
margin-top: 0;
.icon {
width: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
height: calc(30px + (45 - 30) * ((100vw - 320px) / (1920 - 320)));
}
.status {
margin-top: 0;
font-size: 17px;
display: flex;
flex-direction: column;
font-weight: 600;
white-space: nowrap;
}
}
}
.sticky-top-sec {
position: sticky;
top: 110px;
}

1124
public/assets/scss/pages/_pos.scss Normal file
View File

File diff suppressed because it is too large Load Diff

189
public/assets/scss/pages/_shipping.scss Normal file
View File

@@ -0,0 +1,189 @@
/**=====================
Shipping CSS Start
==========================**/
.no-data-added {
text-align: center;
padding: 60px 0;
img {
width: 24%;
margin-bottom: 20px;
@media (max-width: 991px) {
width: 42%;
}
@media (max-width: 576px) {
width: 50%;
}
@media (max-width: 420px) {
width: 80%;
}
}
h4 {
font-weight: 500;
color: #9f9b9b;
font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1920 - 320)));
}
&.shipping-no-data {
padding: 110px 0;
}
&.category-no-data {
img {
width: 64%;
}
}
&.no-shipping {
img {
width: 32%;
@media (max-width: 991px) {
width: 42%;
}
@media (max-width: 576px) {
width: 50%;
}
@media (max-width: 420px) {
width: 80%;
}
}
}
}
.shipping-content {
margin-bottom: -30px;
}
.shipping-box {
padding: 0;
border-radius: 15px;
margin-bottom: 30px;
}
.btn-option {
display: flex;
align-items: center;
gap: 15px;
}
.shipping-accordion-custom {
margin-bottom: 14px;
border: 1px solid #eee;
border-radius: 12px;
.rule-edit-form {
background-color: transparent;
margin: 0;
}
.rule-dropdown {
border-radius: 10px;
overflow: hidden;
text-transform: capitalize;
box-shadow: none;
border: none;
background-color: #f9f9f6;
border-radius: 0;
color: #4a5568;
font-weight: 400;
font-size: 16px;
padding: 12px 18px;
line-height: 1;
border-radius: 10px 10px 0 0;
cursor: pointer;
}
}
.shipping-accordion {
margin-top: 0;
display: block;
.accordion-item {
margin-bottom: 14px;
border: 1px solid #eee;
border-radius: 12px;
.accordion-button {
border-radius: 10px;
overflow: hidden;
text-transform: capitalize;
box-shadow: none;
border: none;
background-color: #f9f9f6;
border-radius: 0;
z-index: 0;
color: #222;
font-weight: 600;
font-size: 18px;
padding: 12px 18px;
&:after {
width: 16px;
height: 16px;
background-size: contain;
filter: grayscale(1);
}
}
.accordion-body {
border-top: none;
padding: 20px;
}
}
}
.country-list {
display: flex;
flex-wrap: wrap;
gap: 15px;
li {
padding: 34px 20px;
border: 1px solid #eee;
border-radius: 6px;
display: flex;
font-size: 16px;
text-transform: capitalize;
align-items: center;
gap: 10px;
line-height: 1;
width: calc(25% - 12px);
text-align: center;
justify-content: space-between;
@media (max-width: 767px) {
width: calc(50% - 12px);
}
@media (max-width: 480px) {
width: 100%;
}
h5 {
width: 100%;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
[dir="rtl"] & {
text-align: right;
}
}
a {
color: #585858;
display: flex;
align-items: center;
gap: 10px;
}
}
}

272
public/assets/scss/pages/_theme-option.scss Normal file
View File

@@ -0,0 +1,272 @@
/**=====================
Theme option CSS start
==========================**/
.radio-type-sec {
display: flex;
flex-wrap: wrap;
gap: 20px;
li {
width: 100%;
}
input[type="radio"] {
opacity: 0;
width: 100%;
height: 100%;
position: absolute;
margin: 0;
z-index: 1;
border-radius: 0;
left: 0;
top: 0;
}
label {
z-index: 1;
&:before {
transform: translateY(0);
opacity: 1;
visibility: visible;
border-radius: 100%;
}
}
.selection-box {
overflow: hidden;
padding-left: 30px;
position: relative;
border: 1px solid #ddd;
padding: 15px 15px 15px 45px;
border-radius: 15px;
&:hover {
label {
img {
width: 100%;
object-fit: contain;
&.real-img {
display: inline-block;
transition: all 0.5s ease;
}
&.dummy-img {
display: none;
transition: all 0.5s ease;
}
}
}
}
}
label {
position: relative;
margin: 0;
cursor: pointer;
width: 100%;
img {
width: 100%;
object-fit: contain;
&.real-img {
display: none;
transition: all 0.5s ease;
}
}
}
label:before {
color: $white;
@include pos;
display: block;
border-radius: 100%;
border: 3px solid #c1c1c1;
left: -30px;
@include pseudowh($width: 18px, $height: 18px);
text-align: center;
line-height: 16px;
z-index: 1;
top: 50%;
transform: translateY(-50%);
}
:checked {
+ label {
border-color: var(--theme-color);
&:after {
content: "";
position: absolute;
width: 6px;
height: 6px;
border-radius: 100%;
background-color: #fff;
top: 50%;
transform: translateY(-50%);
left: -24px;
z-index: 1;
}
&:before {
content: "";
border-radius: 100%;
background-color: var(--theme-color);
border-color: var(--theme-color);
opacity: 1;
visibility: visible;
z-index: 1;
}
}
}
&.selection-layout {
.selection-box {
padding: 0;
border: none;
border-radius: 0;
}
label {
img {
border: 1px solid #ddd;
border-radius: 7px;
}
h4 {
text-transform: capitalize;
font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
}
&:before {
opacity: 0;
}
}
:checked {
+ label {
img {
border-color: var(--theme-color);
}
h4 {
color: #1fa687;
}
&:before {
top: 10px;
left: 10px;
transform: none;
opacity: 1;
}
&:after {
top: 16px;
transform: none;
left: 16px;
}
}
}
}
}
.color-box {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border: 1px solid #ededed;
width: max-content;
border-radius: 5px;
.form-control {
border: none;
padding: 0;
width: 25px;
height: 25px;
}
h6 {
font-weight: 500;
font-size: 14px;
}
}
.layout-selection-sec {
.theme-card {
border: 1px solid #ddd;
border-radius: 15px;
.library-box {
overflow: hidden;
position: relative;
border-radius: 15px 15px 0 0;
background: #f0f0f0;
padding: calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320)))
calc(18px + (25 - 18) * ((100vw - 320px) / (1920 - 320))) 0;
height: 270px;
box-shadow: inset 0px 0 8px rgba(219, 219, 219, 0.66);
@media (max-width: 1500px) {
height: calc(170px + (200 - 170) * ((100vw - 320px) / (1920 - 320)));
}
a {
display: block;
height: 100%;
img {
height: 100%;
object-fit: cover;
width: 100%;
object-position: top;
}
}
.details-box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
border-radius: 15px 15px 0 0;
align-items: center;
justify-content: center;
background-color: rgba($white, 0.9);
font-size: 20px;
text-transform: capitalize;
color: $black;
transform: scale(0.8);
transition: all 0.5s ease;
opacity: 0;
visibility: hidden;
}
}
.content-sec {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 20px;
text-transform: capitalize;
color: #222;
z-index: 1;
position: relative;
box-shadow: 0 -7px 8px rgba(48, 48, 48, 0.05);
h5 {
margin-top: 0 !important;
margin-bottom: 0;
font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));
font-weight: 500;
}
a {
background-color: $white;
color: var(--theme-color);
padding: 5px 15px;
border-radius: 5px;
border: 1px solid var(--theme-color);
&:hover {
color: $white;
background-color: var(--theme-color);
}
}
}
&:hover {
.library-box {
.details-box {
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
}
&.active {
border-color: var(--theme-color);
.content-sec {
a {
color: $white;
background-color: var(--theme-color);
}
}
}
}
}

72
public/assets/scss/pages/_wallet.scss Normal file
View File

@@ -0,0 +1,72 @@
/**=====================
Wallet CSS start
==========================**/
.wallet-sec {
display: flex;
gap: 15px;
align-items: center;
width: 100%;
justify-content: space-between;
@media (max-width: 1511px) {
display: grid;
grid-template-columns: auto 1fr;
}
@media (max-width: 500px) {
grid-template-columns: 1fr;
}
input {
width: 40%;
@media (max-width: 1511px) {
width: 100%;
}
}
.wallet-amount {
width: 25%;
display: flex;
align-items: center;
gap: 15px;
@media (max-width: 1511px) {
width: auto;
}
h5 {
margin-top: 5px;
}
h2 {
font-size: 22px;
font-weight: 600;
}
}
.wallet-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
i {
font-size: 40px;
color: var(--theme-color);
}
svg {
width: 40px;
height: 40px;
fill: var(--theme-color);
}
}
.btn-sec {
display: flex;
align-items: center;
gap: 15px;
}
}
.wallet-search {
display: flex;
align-items: center;
gap: 15px;
.custom-select {
width: 75%;
}
.btn-animation {
width: calc(25% - 15px);
}
}