ros.grant.common 2.0.1650 → 2.0.1651

package/Shared/Styles/Layout/Header/HeaderBCP.less

@@ -1,6 +1,6 @@
 .page-wrapper {
   .header-travel {
-    padding: 16px 0;
+    padding-top: 16px;
     color: var(--neutral-text-primary);
     background: transparent;
     z-index: 6;
@@ -13,6 +13,11 @@
       align-items: center;
       justify-content: space-between;
       position: relative;
+      margin-bottom: 16px;
+
+      @media (max-width: 767px) {
+        align-items: start;
+      }
     }
 
     // header-travel-logo
@@ -40,11 +45,13 @@
       align-items: center;
       justify-content: center;
       position: relative;
-      font-family: 'PT Sans', sans-serif;
+
+      @media (max-width: 767px) {
+        margin-top: 60px;
+      }
 
       // header-travel-auth:hover
       &:hover {
-
         .header-travel-auth-user-menu {
           display: flex;
         }
@@ -150,6 +157,7 @@
         color: var(--neutral-text-primary);
         border-color: var(--neutral-text-primary);
         border-radius: 8px;
+        font-family: inherit;
 
         &:hover {
           color: #fff;
@@ -159,11 +167,157 @@
         }
       }
     }
+
+    // header-travel__nav
+    &__nav {
+      display: flex;
+      align-items: center;
+     
+
+      // header-travel__nav-list
+      &-list {
+        display: flex;
+        flex-wrap: wrap;
+        padding-top: 12px;
+        padding-bottom: 16px;
+
+        @media (max-width: 767px) {
+          display: none;
+          position: absolute;
+          overflow: hidden;
+          width: calc(100% - 20px);
+          text-align: center;
+          top: 75px;
+          left: 10px;
+          padding-bottom: 0;
+          padding-top: 0;
+          background: #fff;
+          box-shadow: 0px 1px 15px 0px rgba(142, 142, 142, 1);
+          border-radius: 8px;
+          z-index: 20;
+
+          &.list-active{
+            display: block;
+          }
+        }
+      }
+
+      // header-travel__nav-link 
+      &-link {
+        font-size: 14px;
+        line-height: 20px;
+        margin-right: 32px;
+        color: var(--neutral-text-primary);
+        position: relative;
+
+        @media (max-width: 767px) {
+          display: flex;
+          justify-content: center;
+          padding: 16px 0;
+          margin: 0;
+
+          &:not(:last-child){
+            border-bottom: 1px solid var(--neutral-bg-stroke-default);
+          }          
+        }
+
+        // header-travel__nav-link _active
+        &_active {
+            // header-travel__nav-link _active:after
+            &:after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: -16px;
+                width: 100%; 
+                height: 2px;
+                background: var(--brand-bg-primary-default);
+
+                @media (max-width: 767px) {
+                  content: none;
+                }
+            }
+        }    
+      }
+
+      // header-travel__nav-trigger
+      &-trigger {
+        display: none;
+
+        @media (max-width: 767px) {
+          display: block;
+          position: absolute;
+          top: 20px;
+          width: 24px;
+          height: 24px;
+          right: 15px;
+
+          &-btn {
+            border: none!important;
+            width: 24px!important;
+            height: 24px!important;
+
+            &:hover {
+              background-color: transparent !important;
+            }
+
+            &-icon {
+              top: 13px;
+              position: absolute;
+              width: 18px;
+              height: 2px;
+              background: var(--neutral-text-primary);
+              border-radius: 2px;
+              left: 6px;
+              display: block;
+              transition: transform 0.4s;
+            }
+
+            &:before {
+              top: 6px;
+              content: ''
+            }
+
+            &:after {
+              top: 20px;
+              content: '';
+            }
+
+            &:before,
+            &:after {
+              position: absolute;
+              width: 18px;
+              height: 2px;
+              background: var(--neutral-text-primary);
+              border-radius: 2px;
+              left: 6px;
+              display: block;
+              transition: transform 0.4s;
+            }
+
+            &.active {
+              .header-travel__nav-trigger-btn-icon {
+                transform: translate3d(0, 0, 0) rotate(45deg);
+                background: var(--neutral-text-primary);
+              }
+
+              &:before {
+                transform: translate3d(0, -5px, 0) rotate(-90deg);
+                opacity: 0;
+              }
+
+              &:after {
+                transform: rotate(-45deg) translate3d(5px, -5px, 0);
+                background: var(--neutral-text-primary);
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   header.header-travel{
-    border-bottom: 1px solid var(--neutral-bg-stroke-default)!important;
-
     .container{
       max-width: 1330px!important;
     }

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.1650",
+  "version": "2.0.1651",
   "name": "ros.grant.common",
   "private": false,
   "scripts": {