@fonixtree/magic-design 1.0.166 → 1.0.168

package/es/composite-comp/dito/components/SearchDITO/pc/components/Header/index.less

@@ -0,0 +1,184 @@
+.search-dito-header {
+  display: block;
+  max-width: 1200px;
+  height: 64px;
+  padding: 16px 40px;
+  border-radius: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #fff;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 10%);
+  position: absolute;
+  left: 120px;
+  right: 120px;
+  top: 16px;
+  margin: auto;
+  z-index: 2;
+
+  .logo {
+    width: auto;
+    height: 30px;
+  }
+
+  .navigation {
+    position: relative;
+
+    ul {
+      padding: 0;
+      margin: 0;
+    }
+
+    .nav-list {
+      display: flex;
+      flex-direction: row;
+      gap: 10px;
+
+      li {
+        font-weight: 600;
+        font-size: 14px;
+        color: #2C2C2C;
+        padding: 8px 12px;
+        list-style: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        &:hover {
+          color: #CE1126;
+
+          .icon_down {
+            color: #CE1126 !important;
+          }
+        }
+      }
+    }
+
+    .nav-card {
+      background-color: #fff;
+      padding: 10px;
+      border-radius: 16px;
+      display: flex;
+      gap: 8px;
+      width: max-content;
+      min-height: 200px;
+      position: absolute;
+      top: 38px;
+      transition: left 0.2s ease;
+      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 10%);
+
+      ul {
+        padding: 10px 0;
+
+        li {
+          list-style: none;
+          font-weight: 500;
+          font-size: 14px;
+          color: #2c2c2c;
+          padding: 0 16px;
+          height: 36px;
+          line-height: 36px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .icon_right {
+            margin-left: 4px;
+            visibility: hidden;
+          }
+
+          &:hover {
+            color: #CE1126;
+
+            .icon_right {
+              visibility: visible;
+            }
+          }
+        }
+      }
+
+      img {
+        width: 200px;
+        height: 200px;
+        border-radius: 8px;
+        margin-left: 20px;
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    .icon-wrap {
+      cursor: pointer;
+      position: relative;
+
+      .cart-num {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        width: 20px;
+        height: 20px;
+        background-color: #ce1126;
+        color: #fff;
+        border-radius: 50%;
+        font-size: 11px;
+        line-height: 20px;
+        text-align: center;
+      }
+    }
+
+    .personal-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+      font-weight: 500;
+      font-size: 14px;
+      color: #2c2c2c;
+      cursor: pointer;
+
+      &.showLogOut {
+        padding-bottom: 30px;
+        margin-bottom: -30px;
+      }
+
+      .avatar-img {
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+      }
+
+      .log-out-wrap {
+        position: absolute;
+        top: 50px;
+        left: -2px;
+        padding: 4px;
+        border-radius: 8px;
+        background-color: #fff;
+
+        .item {
+          padding: 8px 16px;
+          width: max-content;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 10px;
+          color: #2c2c2c;
+          font-weight: 500;
+          font-size: 14px;
+          cursor: pointer;
+        }
+
+        .icon-log-out {
+          transform: rotate(90deg);
+          transition: transform 0.3s;
+        }
+      }
+    }
+  }
+}