@crm-market/template-shared 1.0.0

package/assets/scss/components/_blank.scss

@@ -0,0 +1,40 @@
+/* Blank Area Style
+============================================*/
+
+
+
+
+
+
+
+
+
+
+/* Max width 767px */
+@media only screen and (max-width : 767px) {
+
+}
+
+/* Min width 768px to Max width 992px */
+@media only screen and (min-width : 768px) and (max-width : 991px) {
+
+}
+
+/* Min width 992px to Max width 1199px */
+@media only screen and (min-width : 992px) and (max-width : 1199px)  {
+
+}
+
+/* Min width 1200px to Max width 1399px */
+@media only screen and (min-width : 1200px) and (max-width : 1399px) {
+
+}
+
+/* Min width 1400px to Max width 1799px */
+@media only screen and (min-width : 1400px) and (max-width : 1799px) {
+
+}
+
+@media only screen and (max-width : 1199px) {
+
+}

package/assets/scss/components/_blog.scss

@@ -0,0 +1,193 @@
+/* Blog Area Style
+============================================*/
+.single-blog-item {
+  margin-bottom: 30px;
+  .blog-img {
+    margin-bottom: 20px;
+    display: block;
+    img {
+      border-radius: var(--borderRadius6);
+    }
+  }
+  .info {
+    margin-bottom: 15px;
+  }
+  h2 {
+    font-size: 28px;
+    margin-bottom: 16px;
+    a {
+      text-decoration: none;
+      color: var(--secondary);
+    }
+  }
+}
+.blog-details-content {
+  .blog-img {
+    margin-bottom: 20px;
+    display: block;
+    img {
+      border-radius: var(--borderRadius6);
+    }
+  }
+  .info {
+    margin-bottom: 15px;
+  }
+  h2 {
+    font-size: 28px;
+    margin-bottom: 16px;
+    a {
+      text-decoration: none;
+      color: var(--secondary);
+    }
+  }
+}
+.blockquote {
+  background-color: #fffae9;
+  padding: 50px 60px;
+  margin-top: 30px;
+  margin-bottom: 30px;
+  i {
+    font-size: 72px;
+    line-height: 1;
+    color: #d9d9d9;
+  }
+  p {
+    font-size: 16px;
+  }
+}
+.tags-share {
+  padding-top: 85px;
+  padding-bottom: 40px;
+  margin-bottom: 40px;
+  border-bottom: 1px solid var(--borderColor);
+  .tags {
+    i {
+      font-size: 18px;
+    }
+    span {
+      position: relative;
+      top: 1px;
+    }
+  }
+  .share {
+    span {
+      margin-right: 15px;
+    }
+    li {
+      margin-right: 5px;
+      a {
+        width: 30px;
+        height: 30px;
+        line-height: 30px;
+        text-align: center;
+        display: inline-block;
+        background-color: #d9d9d9;
+        border-radius: 50px;
+        &:hover {
+          background-color: var(--primary);
+          color: var(--white);
+        }
+      }
+    }
+  }
+}
+.post-left-right {
+  font-size: var(--fontSize15);
+  font-family: var(--fontFamilyMedium);
+  padding-bottom: 75px;
+}
+.commnet-form {
+  border: 1px solid var(--borderColor);
+  padding: 65px 80px;
+  border-radius: var(--borderRadius6);
+  h3 {
+    font-size: 28px;
+    margin-bottom: 20px;
+  }
+}
+
+/* Max width 767px */
+@media only screen and (max-width: 767px) {
+  .single-blog-item {
+    h2 {
+      font-size: 20px;
+    }
+    .gap-4 {
+      gap: 0.5rem !important;
+    }
+  }
+  .blog-details-content {
+    h2 {
+      font-size: 20px;
+    }
+    .gap-4 {
+      gap: 0.5rem !important;
+    }
+  }
+  .blockquote {
+    padding: 20px;
+    i {
+      font-size: 30px;
+    }
+  }
+  .tags-share {
+    padding-top: 30px;
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    .share span {
+      margin-right: -1px;
+    }
+  }
+  .post-left-right {
+    padding-bottom: 30px;
+  }
+  .commnet-form {
+    padding: 30px;
+    h3 {
+      font-size: 22px;
+    }
+  }
+}
+
+/* Min width 768px to Max width 992px */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .single-blog-item {
+    h2 {
+      font-size: 20px;
+    }
+    .gap-4 {
+      gap: 0.2rem !important;
+    }
+  }
+  .blog-details-content {
+    h2 {
+      font-size: 20px;
+    }
+    .gap-4 {
+      gap: 0.2rem !important;
+    }
+    .blockquote {
+      padding: 20px;
+      i {
+        font-size: 30px;
+      }
+    }
+    .tags-share {
+      padding-top: 30px;
+      padding-bottom: 30px;
+      margin-bottom: 30px;
+      .share span {
+        margin-right: -1px;
+      }
+    }
+    .post-left-right {
+      padding-bottom: 30px;
+    }
+    .commnet-form {
+      padding: 30px;
+      h3 {
+        font-size: 22px;
+      }
+    }
+  }
+}

package/assets/scss/components/_cart.scss

@@ -0,0 +1,108 @@
+/* Cart Area Style
+============================================*/
+.cart-table {
+  table {
+    width: 1295px;
+    thead {
+      tr {
+        border-color: #d9d9d9;
+        th {
+          font-size: 14px;
+          color: var(--dark);
+          background-color: #fffbf5;
+          padding: 20px 30px;
+        }
+      }
+    }
+    tbody {
+      tr {
+        border-left: 1px solid #d9d9d9;
+        border-right: 1px solid #d9d9d9;
+        td {
+          padding: 20px 30px;
+          border-color: #d9d9d9;
+          .cart-product {
+            width: 80px;
+          }
+          a {
+            display: block;
+            color: var(--primary);
+            text-decoration: none;
+          }
+          .title {
+            width: 250px;
+            color: var(--secondary);
+          }
+          .price {
+            font-size: 16px;
+            font-family: var(--fontFamilyBold);
+            color: var(--bodyColor);
+          }
+          .remove {
+            i {
+              font-size: 20px;
+              color: var(--danger);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.coupon-wrap {
+  .form-control {
+    width: 200px;
+    margin-right: 10px;
+    height: 41px;
+  }
+}
+.total-cart {
+  background-color: #fffbf5;
+  max-width: 730px;
+  padding: 70px;
+  margin-top: 60px;
+  h3 {
+    font-size: 18px;
+    margin-bottom: 20px;
+  }
+  ul {
+    padding-left: 0;
+    margin-bottom: 20px;
+    list-style: none;
+    li {
+      padding: 20px 30px;
+      border: 1px solid #d9d9d9;
+      background-color: var(--white);
+      line-height: 1;
+      border-bottom: none;
+      .title {
+        font-size: 14px;
+        color: var(--dark);
+      }
+      .price {
+        font-family: var(--fontFamilyBold);
+        font-size: 16px;
+        color: var(--secondary);
+      }
+      &:last-child {
+        border-bottom: 1px solid #d9d9d9;
+      }
+    }
+  }
+}
+
+/* Max width 767px */
+@media only screen and (max-width: 767px) {
+  .total-cart {
+    padding: 20px;
+    margin-top: 30px;
+  }
+}
+
+/* Min width 768px to Max width 992px */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .total-cart {
+    padding: 30px;
+    margin-top: 30px;
+  }
+}

package/assets/scss/components/_categories.scss

@@ -0,0 +1,82 @@
+/* Categories Area Style
+============================================*/
+.single-popular-categories-item {
+  text-align: center;
+  text-decoration: none;
+  img {
+    border: 1px solid var(--borderColor);
+    padding: 8px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+    transition: var(--transition);
+  }
+  h3 {
+    font-size: var(--fontSize16);
+    margin-bottom: 3px;
+    transition: var(--transition);
+  }
+  span {
+    font-size: var(--fontSize13);
+    color: var(--bodyColor);
+  }
+  &:hover {
+    img {
+      border-color: var(--success);
+    }
+    h3 {
+      color: var(--success);
+    }
+  }
+}
+.popular-categories {
+  .controller-icon {
+    font-size: 18px;
+    width: 35px;
+    height: 35px;
+    line-height: 38px;
+    text-align: center;
+    border: 1px solid var(--borderColor);
+    display: inline-block;
+    border-radius: 50px;
+    background: var(--white);
+    z-index: 1;
+    transition: var(--transition);
+    position: absolute;
+    top: 26%;
+    left: 1px;
+    cursor: pointer;
+    &:hover {
+      background-color: var(--success);
+      border-color: var(--success);
+      color: var(--white);
+    }
+  }
+  .prev3 {
+    i {
+      position: relative;
+      right: 2px;
+      transform: scaleX(-1);
+      display: block;
+    }
+  }
+  .next3 {
+    left: auto;
+    right: 1px;
+    i {
+      position: relative;
+      right: -2px;
+    }
+  }
+}
+.bg-50 {
+  position: relative;
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 64px;
+    background-color: var(--warningdiv1);
+  }
+}

package/assets/scss/components/_checkout.scss

@@ -0,0 +1,110 @@
+/* Checkout Area Style
+============================================*/
+.checkout-content {
+  h3 {
+    font-size: 24px;
+    margin-bottom: 30px;
+  }
+}
+.your-order {
+  margin-left: 50px;
+  h3 {
+    font-size: 24px;
+    margin-bottom: 30px;
+  }
+  .title {
+    span {
+      margin-left: 5px;
+      max-width: 200px;
+      display: inline-block;
+    }
+  }
+}
+.your-order-form {
+  h3 {
+    font-size: 24px;
+    margin-top: 40px;
+    margin-bottom: 30px;
+  }
+  .table {
+    border-color: #d9d9d9;
+    thead {
+      tr {
+        border: none;
+        th {
+          border: none;
+          font-size: 18px;
+          padding-bottom: 20px;
+          padding-left: 0;
+          padding-right: 0;
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          padding: 20px 30px;
+          &.title {
+            color: var(--bodyColor);
+          }
+          &.price {
+            font-size: 16px;
+            font-family: var(--fontFamilyBold);
+            color: var(--secondary);
+          }
+          &.sub-title {
+            font-size: 18px;
+            color: var(--dark);
+          }
+          &.sub-price {
+            font-size: 18px;
+            font-weight: 700;
+            color: var(--primary);
+          }
+        }
+      }
+    }
+  }
+  .form-check {
+    margin-bottom: 15px;
+    .form-check-input {
+      .form-check-label {
+        font-weight: 500;
+        font-size: 14px;
+        margin-left: 9px;
+      }
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+/* Max width 991px */
+@media only screen and (max-width: 991px) {
+  .your-order-form {
+    .table {
+      tbody {
+        tr {
+          td {
+            padding: 10px;
+            &.title {
+              font-size: 14px;
+            }
+            &.sub-title {
+              font-size: 16px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .your-order {
+    margin-top: 30px;
+    margin-left: 0;
+    h3 {
+      font-size: 20px;
+      margin-bottom: 20px;
+    }
+  }
+}