@ptcwebops/ptcw-design 2.4.2 → 2.4.5

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.css

@@ -1,20 +1,23 @@
 :host {
   display: block;
-  padding: var(--ptc-element-spacing-03);
   position: relative;
+  cursor: pointer;
 }
 :host .back-btn {
   display: none;
   position: absolute;
   left: 30px;
+  top: 22px;
   color: var(--color-white);
-  font-size: 15px;
+  font-size: var(--ptc-font-size-xx-small);
   line-height: var(--ptc-line-height-denser);
   font-weight: var(--ptc-font-weight-bold);
 }
 :host .back-btn svg {
   margin-right: 4px;
   vertical-align: middle;
+  width: 12px;
+  height: 12px;
 }
 @media only screen and (min-width: 1200px) {
   :host {
@@ -42,14 +45,25 @@
 }
 :host .submenu-toggle {
   display: inline-block;
-  cursor: pointer;
   color: var(--color-gray-03);
-  font-size: 15px;
+  font-size: var(--ptc-font-size-xx-small);
   line-height: var(--ptc-line-height-denser);
   font-weight: var(--ptc-font-weight-bold);
   white-space: nowrap;
-  border-bottom: 2px solid transparent;
+  padding: 22px var(--ptc-element-spacing-03);
   margin-left: 34%;
+  position: relative;
+}
+:host .submenu-toggle::after {
+  content: "";
+  display: block;
+  border-bottom: 2px solid transparent;
+  margin: auto;
+  position: absolute;
+  width: calc(100% - 20px);
+  left: 0;
+  right: 0;
+  bottom: 20px;
 }
 @media only screen and (min-width: 480px) {
   :host .submenu-toggle {
@@ -72,12 +86,16 @@
   margin-left: 5px;
   margin-top: 2px;
   vertical-align: middle;
+  width: 12px;
+  height: 12px;
 }
 :host .submenu-toggle svg path {
   fill: var(--color-gray-04);
 }
 :host .submenu-toggle:hover {
   color: var(--color-white);
+}
+:host .submenu-toggle:hover::after {
   border-color: var(--color-white);
 }
 :host .submenu-toggle:hover svg path {
@@ -98,53 +116,16 @@
     width: 100%;
     right: 0;
     left: 0;
-    top: 64px;
+    top: 67px;
   }
 }
 :host .submenu-container .submenu-container-lg {
-  padding: 0 32px;
-  width: 100%;
+  max-width: 1200px;
   margin: auto;
 }
-@media only screen and (min-width: 992px) {
-  :host .submenu-container .submenu-container-lg {
-    padding: 0 32px;
-  }
-}
 @media only screen and (min-width: 1200px) {
   :host .submenu-container .submenu-container-lg {
-    padding: 0;
-    width: 1106px;
-  }
-}
-@media only screen and (min-width: 1256px) {
-  :host .submenu-container .submenu-container-lg {
-    width: 1164px;
-  }
-}
-@media only screen and (min-width: 1280px) {
-  :host .submenu-container .submenu-container-lg {
-    width: 1180px;
-  }
-}
-@media only screen and (min-width: 1300px) {
-  :host .submenu-container .submenu-container-lg {
-    width: 1200px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  :host .submenu-container .submenu-container-lg {
-    width: 83.5rem;
-  }
-}
-@media only screen and (min-width: 1600px) {
-  :host .submenu-container .submenu-container-lg {
-    width: 93.5rem;
-  }
-}
-@media only screen and (min-width: 1980px) {
-  :host .submenu-container .submenu-container-lg {
-    width: 113.5rem;
+    padding: 0 32px;
   }
 }
 :host ::slotted(ptc-nav-link:last-child)::before, :host ::slotted(ptc-nav-link:last-child)::after {
@@ -184,11 +165,6 @@
 :host(.active)::before, :host(.active)::after {
   display: none;
 }
-@media only screen and (min-width: 1200px) {
-  :host(.active) {
-    padding-bottom: var(--ptc-element-spacing-03);
-  }
-}
 
 :host(.active.short-dropdown) .back-btn {
   display: inline-block;

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.js

@@ -10,7 +10,7 @@ export class PtcNavSubmenu {
     var container = this.el.closest('ptc-subnav');
     if (dropdown && container) {
       if (window.innerWidth >= 1200) {
-        let height = container.clientHeight - 10;
+        let height = container.clientHeight;
         if (height > 0) {
           dropdown.style.top = `${height}px`;
         }

package/dist/collection/components/subnav/ptc-subnav/ptc-subnav.css

@@ -4,47 +4,31 @@
   background-color: var(--color-gray-10);
   position: relative;
 }
-:host .navbar .navbar-inner {
-  width: 100%;
-  margin: auto;
-  padding: 0px;
-  display: none;
+:host .navbar {
+  overflow-x: hidden;
 }
 @media only screen and (min-width: 1200px) {
-  :host .navbar .navbar-inner {
-    width: 1170px;
+  :host .navbar {
+    overflow-x: visible;
   }
 }
-@media only screen and (min-width: 1256px) {
-  :host .navbar .navbar-inner {
-    width: 1256px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  :host .navbar .navbar-inner {
-    width: 87.5rem;
-  }
-}
-@media only screen and (min-width: 1600px) {
-  :host .navbar .navbar-inner {
-    width: 97.5rem;
-  }
-}
-@media only screen and (min-width: 1980px) {
-  :host .navbar .navbar-inner {
-    width: 117.5rem;
-  }
+:host .navbar .navbar-inner {
+  max-width: 1200px;
+  margin: auto;
+  box-sizing: border-box;
+  padding: 0px;
+  display: none;
 }
 @media only screen and (min-width: 1200px) {
   :host .navbar .navbar-inner {
-    padding: 10px 16px;
+    padding: 0px;
     height: auto;
     display: block;
   }
 }
 :host .navbar .navbar-inner .nav-wrapper {
   width: auto;
-  margin: auto 32px;
+  margin: auto 0;
   min-width: 163px;
 }
 @media only screen and (min-width: 1200px) {