@crm-market/template-shared 1.0.0

package/assets/scss/components/_navbar.scss

@@ -0,0 +1,1008 @@
+/* Navbar Area Style
+==================================== */
+.navbar {
+  z-index: 999;
+  padding: {
+    top: 0;
+    bottom: 0;
+  }
+  &.ptb-21 {
+    padding-top: 21px;
+    padding-bottom: 21px;
+  }
+  &.ptb-6 {
+    padding-top: 6.5px;
+    padding-bottom: 6.5px;
+  }
+  &.ptb-6 {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    .others-options {
+      top: -1px !important;
+    }
+  }
+  .navbar-brand {
+    margin-right: 35px;
+  }
+  .navbar-nav {
+    .nav-item {
+      margin: {
+        left: 11.5px;
+        right: 11.5px;
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+      &:first-child {
+        margin-left: 0;
+      }
+      .nav-link {
+        color: var(--secondary);
+        transition: var(--transition);
+        position: relative;
+        padding: 14px 0;
+        z-index: 1;
+        font: {
+          size: 14px;
+          family: var(--fontFamilyBold);
+        }
+        &.dropdown-toggle {
+          padding-right: 20px;
+          &::after {
+            position: absolute;
+            vertical-align: 0;
+            content: "\ea4e";
+            margin-left: 0;
+            right: 0;
+            border: 0;
+            top: 13px;
+            font-family: remixicon !important;
+            font-size: 18px;
+            transition: var(--transition);
+          }
+        }
+        &.router-link-active {
+          color: var(--primary);
+          &.dropdown-toggle {
+            &::after {
+              color: var(--primary) !important;
+            }
+          }
+        }
+        &:hover {
+          color: var(--primary);
+        }
+      }
+      .dropdown-menu {
+        left: 0;
+        border: 0;
+        top: 50px;
+        opacity: 0;
+        width: 300px;
+        padding: 15px 0;
+        border-radius: 0 0 5px 5px;
+        visibility: hidden;
+        display: block !important;
+        background-color: var(--white);
+        transition: all 0.2s ease-in-out;
+        box-shadow: 0 0.275rem 1.25rem rgba(11, 15, 25, 0.05),
+          0 0.25rem 0.5625rem rgba(11, 15, 25, 0.03);
+        pointer-events: none;
+        li {
+          position: relative;
+
+          .dropdown-item {
+            display: block;
+            padding: 8px 20px;
+            position: relative;
+            color: var(--dark);
+            background-color: transparent !important;
+            white-space: normal;
+            font: {
+              size: 14px;
+              family: var(--fontFamilyMedium);
+            }
+            &.dropdown-toggle {
+              padding-right: 18px;
+
+              &::after {
+                position: absolute;
+                vertical-align: 0;
+                content: "\f10a";
+                margin-left: 0;
+                right: 19px;
+                border: 0;
+                top: 12px;
+                transition: var(--transition);
+                font: {
+                  size: 10px;
+                  weight: 700;
+                  family: flaticon !important;
+                }
+              }
+            }
+            &.router-link-active {
+              color: var(--primary);
+            }
+            &:hover {
+              color: var(--primary);
+            }
+          }
+          .dropdown-menu {
+            visibility: hidden;
+            left: auto;
+            right: -100%;
+            opacity: 0;
+            top: 0;
+          }
+          &:hover {
+            .sub-dropdown {
+              color: var(--primary);
+              &.dropdown-toggle {
+                &::after {
+                  color: var(--primary);
+                }
+              }
+            }
+            .dropdown-menu {
+              visibility: visible;
+              opacity: 1;
+            }
+          }
+        }
+      }
+      &:hover {
+        .nav-link {
+          color: var(--primary);
+          &.dropdown-toggle {
+            &::after {
+              color: var(--primary) !important;
+            }
+          }
+        }
+        .dropdown-menu {
+          opacity: 1;
+          visibility: visible;
+          pointer-events: auto;
+        }
+        &.mega-menu {
+          .dropdown-menu {
+            pointer-events: auto;
+          }
+        }
+      }
+      &.mega-menu {
+        position: unset;
+        .dropdown-menu {
+          left: 0;
+          right: 0;
+          width: 1295px;
+          margin: auto;
+          padding: 25px;
+          margin-top: 0;
+          position: absolute;
+          transform: unset !important;
+          pointer-events: none;
+          .menu-img {
+            height: 100%;
+            display: block;
+            background-position: center right;
+          }
+          .sub-menu-title {
+            position: relative;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 8px;
+            margin-bottom: 25px;
+            margin-top: -2px;
+            font-family: var(--fontFamilyBold);
+            font-size: 15px;
+            &::before {
+              content: "";
+              position: absolute;
+              bottom: -1px;
+              left: 0;
+              width: 50px;
+              height: 1px;
+              background-color: var(--primary);
+            }
+          }
+          .sub-menu {
+            li {
+              a {
+                border-bottom: 1px dashed #eeeeee;
+                padding-left: 0;
+                padding-right: 0;
+              }
+              &:first-child {
+                a {
+                  padding-top: 0;
+                }
+              }
+              &:last-child {
+                a {
+                  border-bottom: none;
+                  padding-bottom: 0;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    &.ms-68 {
+      margin-left: 68px;
+    }
+  }
+  .navbar-toggler {
+    color: var(--dark);
+    font-size: inherit;
+    box-shadow: unset;
+    border: none;
+    padding: 0;
+    .burger-menu {
+      cursor: pointer;
+      span {
+        height: 3px;
+        width: 30px;
+        margin: 5px 0;
+        display: block;
+        background-color: var(--dark);
+      }
+    }
+  }
+  .others-options {
+    position: relative;
+    top: -6px;
+    .info {
+      margin-right: 20px;
+      a {
+        i {
+          width: 40px;
+          height: 40px;
+          line-height: 40px;
+          text-align: center;
+          display: inline-block;
+          background: var(--gray1);
+          border-radius: 50%;
+          font-size: 22px;
+          color: var(--bodyColor);
+          transition: var(--transition);
+          position: relative;
+          top: 2px;
+          &.bg-danger-10 {
+            color: #e1397d;
+            background-color: #ffe0ec;
+          }
+        }
+        span {
+          font-size: 13px;
+          color: var(--bodyColor);
+        }
+        h3 {
+          font-size: 14px;
+          margin-bottom: 0;
+        }
+        &:hover {
+          i {
+            background-color: var(--primary);
+            color: var(--white);
+          }
+          .bg-danger-10 {
+            color: var(--white);
+            background-color: #e1397d;
+          }
+        }
+        .ms-10 {
+          margin-left: 10px;
+          margin-inline-start: 10px !important;
+        }
+      }
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+    &.grocery-options {
+      top: -1.5px;
+      .info:last-child {
+        display: inline-block !important;
+      }
+    }
+  }
+  &.sticky {
+    top: -1px;
+    left: 0;
+    width: 100%;
+    position: sticky;
+    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.09);
+    animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
+    background-color: var(--white) !important;
+    padding: {
+      top: 15px;
+      bottom: 15px;
+    }
+    .categories-nav {
+      .categories-item {
+        .dropdown-menu {
+          display: none !important;
+          border: 1px solid var(--borderColor);
+          visibility: hidden;
+          opacity: 1;
+          &.show {
+            top: 48px;
+            visibility: visible;
+            opacity: 1;
+            display: block !important;
+          }
+          li {
+            .dropdown-menu-sub {
+              &.show {
+                top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    .others-options {
+      top: -2px;
+    }
+  }
+}
+.categories-nav {
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+  .categories-item {
+    .categories-link {
+      color: var(--white);
+      transition: var(--transition);
+      position: relative;
+      padding: 9px 15px;
+      z-index: 1;
+      text-decoration: none;
+      background: var(--primary);
+      width: 330px;
+      display: block;
+      border-radius: 6px 6px 0px 0px;
+      cursor: pointer;
+      i {
+        font-size: 20px;
+        margin-right: 16px;
+      }
+      span {
+        position: relative;
+        top: -1px;
+      }
+      &::after {
+        font-size: 17px;
+        color: var(--dark);
+      }
+      font: {
+        size: var(--fontSize15);
+        family: var(--fontFamilyBold);
+      }
+      &.dropdown-toggle {
+        padding-right: 20px;
+        &::after {
+          position: absolute;
+          vertical-align: 0;
+          content: "\ea4e";
+          margin-left: 0;
+          right: 14px;
+          border: 0;
+          top: 9px;
+          font-family: remixicon !important;
+          font-size: 22px;
+          transition: var(--transition);
+          color: var(--white);
+        }
+      }
+      &.active {
+        color: var(--primary);
+        &.dropdown-toggle {
+          &::after {
+            color: var(--primary) !important;
+          }
+        }
+      }
+      &:hover {
+        color: var(--primary);
+      }
+    }
+    .dropdown-menu {
+      left: 0;
+      border: 0;
+      top: 48px;
+      opacity: 0;
+      width: 100%;
+      padding: 0;
+      border-radius: 0 0 5px 5px;
+      visibility: hidden;
+      display: block !important;
+      background-color: var(--white);
+      transition: all 0.2s ease-in-out;
+      border: 1px solid var(--borderColor);
+      visibility: visible;
+      opacity: 1;
+      &.show {
+        top: 0;
+        visibility: visible;
+        opacity: 1;
+        display: block !important;
+      }
+      li {
+        // position: relative;
+        border-bottom: 1px solid var(--borderColor);
+        &:last-child {
+          border-bottom: 0;
+        }
+
+        .dropdown-item {
+          display: block;
+          padding: 10px 16px;
+          position: relative;
+          color: var(--dark);
+          background-color: transparent !important;
+          i {
+            width: 34px;
+            height: 34px;
+            line-height: 38px;
+            text-align: center;
+            display: inline-block;
+            background-color: var(--gray1);
+            border-radius: 50px;
+            font-size: 18px;
+            transition: var(--transition);
+          }
+          span {
+            position: relative;
+            top: -5px;
+            margin-left: 13px;
+          }
+          font: {
+            size: 14px;
+            family: var(--fontFamilyMedium);
+          }
+          &.dropdown-toggle {
+            padding-right: 18px;
+
+            &::after {
+              position: absolute;
+              vertical-align: 0;
+              content: "\f10a";
+              margin-left: 0;
+              right: 15px;
+              border: 0;
+              top: 17px;
+              transition: var(--transition);
+              transform: rotate(-90deg);
+              font: {
+                size: 12px;
+                weight: 700;
+                family: flaticon !important;
+              }
+            }
+          }
+          &.active {
+            color: var(--primary);
+          }
+          &:hover {
+            color: var(--primary);
+            i {
+              background-color: var(--primary);
+              color: var(--white);
+            }
+          }
+          &.single-style {
+            padding: 16.5px 16px;
+          }
+        }
+        .dropdown-menu-sub {
+          border-radius: 0 6px 6px 0 !important;
+          &.show {
+            top: 0;
+            height: 100%;
+          }
+        }
+        .dropdown-menu {
+          visibility: hidden;
+          left: auto;
+          right: -100%;
+          opacity: 0;
+          top: 0;
+        }
+        &:hover {
+          .sub-dropdown {
+            color: var(--primary);
+            &.dropdown-toggle {
+              &::after {
+                color: var(--primary);
+              }
+            }
+          }
+          .dropdown-menu {
+            visibility: visible;
+            opacity: 1;
+            display: block;
+            height: 100%;
+          }
+        }
+      }
+    }
+    .dropdown-menu {
+      display: block !important;
+      border: 1px solid var(--borderColor);
+      visibility: visible;
+      opacity: 1;
+      &.show {
+        top: 0;
+        visibility: hidden;
+        opacity: 1;
+        display: none !important;
+      }
+    }
+    &:hover {
+      .categories-link {
+        color: var(--white);
+        &.dropdown-toggle {
+          &::after {
+            color: var(--white) !important;
+          }
+        }
+      }
+      .dropdown-menu {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+  &.categories-style-three {
+    .categories-item {
+      .categories-link {
+        background-color: var(--warning);
+        border-radius: 0;
+        padding: 16px 15px;
+        &.dropdown-toggle {
+          &::after {
+            top: 15px;
+          }
+        }
+      }
+      .dropdown-menu {
+        display: none !important;
+        visibility: hidden;
+        opacity: 1;
+        &.show {
+          top: 60px;
+          visibility: visible;
+          opacity: 1;
+          display: block !important;
+        }
+        li {
+          .dropdown-menu-sub {
+            &.show {
+              top: 0;
+              margin-top: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+  .dropdown-menu {
+    &.dropdown-menu-sub {
+      &.only-grid {
+        width: 960px !important;
+        left: 100% !important;
+        right: auto !important;
+        padding: 20px;
+      }
+    }
+  }
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translateZ(0);
+  }
+}
+
+/* For Mobile Navbar Area Style
+==================================== */
+.mobile-navbar {
+  .offcanvas-header {
+    padding: 30px;
+    border-bottom: 1px solid #e7e7e7;
+
+    .close-btn {
+      transition: var(--transition);
+      font-size: 30px;
+      cursor: pointer;
+      top: 2px;
+
+      &:hover {
+        color: var(--primary);
+      }
+    }
+  }
+  .offcanvas-body {
+    padding: 30px;
+
+    .v-expansion-panels {
+      padding-left: 0;
+      overflow: hidden;
+
+      .v-expansion-panel {
+        line-height: 40px;
+        clear: both;
+        width: 100%;
+        &:last-child {
+          border: none;
+        }
+        .v-expansion-panel-title {
+          padding: 10px 40px 10px 0;
+          color: var(--dark);
+          position: relative;
+          min-height: auto;
+
+          &:after {
+            top: 50%;
+            right: 0;
+            content: "\ea4e";
+            color: var(--dark);
+            position: absolute;
+            transform: translateY(-50%);
+            transition: var(--transition);
+            font-family: remixicon !important;
+            font-style: normal;
+          }
+          font: {
+            size: 16px;
+            weight: 400;
+          }
+          &:hover {
+            color: var(--dark);
+          }
+          .v-expansion-panel-title__icon {
+            display: none;
+          }
+          &.without-icon {
+            a {
+              text-decoration: none;
+            }
+            &:after {
+              display: none;
+            }
+          }
+          &.v-expansion-panel-title--active {
+            &:after {
+              transform: translateY(-50%) rotate(180deg);
+            }
+          }
+        }
+        .v-expansion-panel-text {
+          .v-expansion-panel-text__wrapper {
+            padding: 0;
+            .mobile-menu-items {
+              background-color: #ededed;
+              padding: 0;
+              .mobile-menu-list {
+                &::after {
+                  right: 30px;
+                }
+                .v-expansion-panels {
+                  padding: 0 20px;
+                  .v-expansion-panel {
+                    background-color: transparent;
+                    .v-expansion-panel-title {
+                      background-color: transparent;
+                    }
+                    .v-expansion-panel-text {
+                      .v-expansion-panel-text__wrapper {
+                        .mobile-menu-items {
+                          background-color: #d2d2d2;
+                          padding: 0;
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+              a {
+                padding: 0 20px;
+                font-size: 15px;
+                color: var(--dark);
+
+                font: {
+                  size: 15px;
+                  weight: 400;
+                }
+                &.router-link-active {
+                  color: var(--primary);
+                }
+                &:hover {
+                  color: var(--primary);
+                }
+              }
+              li {
+                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+                list-style-type: none;
+
+                &:last-child {
+                  border: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.v-expansion-panel--active {
+  > .v-expansion-panel-title {
+    &:not(.v-expansion-panel-title--static) {
+      min-height: auto !important;
+    }
+  }
+}
+.v-expansion-panel-title:hover > .v-expansion-panel-title__overlay {
+  opacity: 0;
+}
+.v-expansion-panel__shadow {
+  box-shadow: none;
+}
+
+/* Max width 767px */
+@media only screen and (max-width: 767px) {
+  .navbar {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    &.sticky {
+      top: -1px;
+    }
+    .navbar-brand {
+      max-width: 110px;
+    }
+    .container {
+      position: relative;
+    }
+    .others-options {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      right: 60px;
+      ul {
+        li {
+          .src-form {
+            .form-control {
+              width: 125px;
+              padding: 16px;
+              height: 20px;
+            }
+            .src-btn {
+              right: 15px !important;
+              background-color: #fff !important;
+              padding-left: 5px;
+              i {
+                font-size: 17px;
+              }
+            }
+          }
+        }
+      }
+      .btn-primary {
+        padding: 7.5px 10px 7.5px;
+        font-size: 13px;
+      }
+    }
+  }
+  .mobile-navbar {
+    .offcanvas-header {
+      padding: 20px;
+    }
+    .offcanvas-body {
+      padding: 20px;
+    }
+  }
+}
+
+/* Min width 768px to Max width 991px */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  /* Navbar Area */
+  .navbar {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+
+    &.sticky {
+      top: -1px;
+    }
+    .container {
+      position: relative;
+    }
+  }
+}
+
+/* Min width 992px to Max width 1199px */
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+  .navbar {
+    padding-top: 0;
+    padding-bottom: 0;
+    .navbar-nav {
+      .nav-item {
+        margin-left: 8px;
+        margin-right: 8px;
+        .nav-link {
+          font-size: 15px;
+          &::after {
+            font-size: 14px;
+            position: relative;
+            top: 13px;
+          }
+        }
+        .dropdown-menu {
+          li {
+            .dropdown-menu {
+              right: auto;
+              left: -100%;
+            }
+          }
+        }
+        &.mega-menu {
+          .dropdown-menu {
+            width: 936px;
+            top: 69px;
+          }
+        }
+      }
+      &.ms-68 {
+        margin-left: 45px;
+      }
+    }
+    .others-options {
+      .info {
+        &:last-child {
+          display: none;
+        }
+      }
+    }
+  }
+  .categories-nav {
+    .dropdown-menu.dropdown-menu-sub {
+      &.only-grid {
+        width: 100% !important;
+      }
+    }
+  }
+}
+
+/* Min width 1200px to Max width 1399px */
+@media only screen and (min-width: 1200px) and (max-width: 1399px) {
+  .navbar {
+    .navbar-nav {
+      .nav-item {
+        margin-left: 10px;
+        margin-right: 10px;
+        .nav-link {
+          font-size: 15px;
+          &.dropdown-toggle {
+            &::after {
+              top: 13px;
+            }
+          }
+        }
+        &.mega-menu {
+          .dropdown-menu {
+            width: 1116px;
+          }
+        }
+      }
+    }
+  }
+  .categories-nav {
+    .dropdown-menu {
+      &.dropdown-menu-sub {
+        &.only-grid {
+          width: 788px !important;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 991px) {
+  .categories-nav {
+    .categories-item {
+      .categories-link {
+        width: 100%;
+        line-height: 1;
+        i {
+          margin-right: 0;
+        }
+      }
+      .dropdown-menu {
+        left: 0;
+        position: unset;
+        li {
+          .dropdown-menu {
+            left: 0;
+            right: 0;
+          }
+          .dropdown-menu-sub {
+            display: none !important;
+            visibility: hidden;
+            opacity: 0;
+            &.show {
+              visibility: visible !important;
+              opacity: 1 !important;
+              display: block !important;
+            }
+          }
+        }
+      }
+    }
+    .dropdown-menu.dropdown-menu-sub {
+      &.only-grid {
+        width: 100% !important;
+        ul {
+          padding-left: 0 !important;
+        }
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 1399px) {
+  .categories-nav {
+    .categories-item {
+      .categories-link {
+        display: block;
+      }
+      .dropdown-menu {
+        display: none !important;
+        border: 1px solid var(--borderColor);
+        visibility: visible;
+        opacity: 1;
+        margin: 0;
+        &.show {
+          top: 48px;
+          visibility: visible;
+          opacity: 1;
+          display: block !important;
+        }
+        li {
+          .dropdown-menu-sub {
+            &.show {
+              top: 0;
+            }
+          }
+          .dropdown-menu {
+            visibility: hidden;
+            left: auto;
+            right: -100%;
+            opacity: 0;
+            top: 0;
+          }
+          &:hover {
+            .dropdown-menu {
+              visibility: visible;
+              opacity: 1;
+              display: block !important;
+            }
+          }
+        }
+      }
+      &:hover {
+        .dropdown-menu {
+          opacity: 1;
+          visibility: visible;
+        }
+      }
+    }
+  }
+}