@ptcwebops/ptcw-design 6.4.11 → 6.4.12-beta

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

@@ -58,63 +58,14 @@ ptc-footer {
   }
 }
 
-:host .mobile-dropdown-container .mobile-dropdown-button, :host .subnav-menu-left .overflow-menu-container .overflow-button, :host .subnav-menu-left ul.desktop-menu li a {
-  color: var(--color-gray-07);
-  text-decoration: none;
-  padding: 8px 12px;
-  text-align: center;
-  font-family: var(--ptc-font-latin);
-  font-style: var(--ptc-font-style-normal);
-  font-size: var(--ptc-font-size-xx-small);
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: 18px;
-  display: flex;
-  align-items: center;
-  position: relative;
-  border-bottom: 3px solid transparent;
-  height: 100%;
-  box-sizing: border-box;
-  transition: all 0.2s ease;
-}
-
-:host .subnav-menu-left .overflow-menu-container .overflow-dropdown {
-  position: absolute;
-  top: 100%;
-  background: var(--color-standard-gray);
-  border-radius: var(--ptc-border-radius-standard);
-  box-shadow: var(--ptc-shadow-x-large);
-  z-index: 1001;
-  padding: 14px 0;
-  margin-top: -4px;
-  max-width: 312px;
-  width: -moz-max-content;
-  width: max-content;
-}
-
-:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item, :host .subnav-menu-left .overflow-menu-container .overflow-dropdown a {
-  display: block;
-  padding: 10px 32px 10px 24px;
-  color: var(--color-gray-07);
-  text-decoration: none;
-  font-size: var(--ptc-font-size-xx-small);
-  font-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-densest);
-  transition: all 0.2s ease;
-  position: relative;
-  border: none;
-}
-
 :host {
-  position: relative;
   display: block;
   font-family: var(--ptc-font-latin);
+  position: sticky;
+  top: 0;
+  z-index: 105;
   background-color: var(--color-standard-gray);
   box-shadow: var(--ptc-shadow-small);
-  transition: all 0.3s ease-in-out;
-}
-:host.sticky-transition {
-  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }
 :host .subnav-container {
   display: flex;
@@ -134,24 +85,22 @@ ptc-footer {
 }
 @media only screen and (min-width: 1200px) {
   :host .subnav-container {
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
     max-width: 1136px;
   }
 }
 @media only screen and (min-width: 1440px) {
   :host .subnav-container {
-    padding: 0;
+    padding-left: 0;
+    padding-right: 0;
     max-width: 1200px;
   }
 }
-:host .subnav-container.full-width {
-  justify-content: flex-start;
-}
 :host .subnav-menu-left {
   display: flex;
   align-items: center;
   flex: 1;
-  align-self: stretch;
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-left {
@@ -167,7 +116,7 @@ ptc-footer {
   justify-content: center;
   gap: 4px;
   flex-wrap: wrap;
-  align-self: stretch;
+  margin-bottom: -2px;
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-left ul.desktop-menu {
@@ -177,7 +126,17 @@ ptc-footer {
 }
 :host .subnav-menu-left ul.desktop-menu li {
   display: inline-block;
-  height: 100%;
+}
+:host .subnav-menu-left ul.desktop-menu li a {
+  color: var(--color-gray-07);
+  text-decoration: none;
+  padding: 8px 12px;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-densest);
+  display: block;
+  position: relative;
+  border-bottom: 3px solid transparent;
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-left ul.desktop-menu li a {
@@ -208,10 +167,16 @@ ptc-footer {
   background: none;
   border: none;
   padding: 20px 0 17px 0;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-bold);
+  color: var(--color-gray-07);
   cursor: pointer;
+  display: flex;
+  align-items: center;
   justify-content: center;
+  min-width: 32px;
   border-bottom: 3px solid transparent;
-  box-sizing: border-box;
+  transition: all 0.2s ease;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button:hover {
   color: var(--color-gray-10);
@@ -231,7 +196,6 @@ ptc-footer {
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
-  box-sizing: border-box;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover {
   background-color: var(--color-gray-04);
@@ -245,7 +209,7 @@ ptc-footer {
   outline: 5px solid var(--keyboard-nav-outline);
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded], :host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active {
-  border-bottom-color: var(--color-green-07);
+  border-bottom: 3px solid var(--color-green-07);
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots, :host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots {
   background-color: var(--color-green-07);
@@ -254,17 +218,32 @@ ptc-footer {
 :host .subnav-menu-left .overflow-menu-container .overflow-button[aria-expanded] .overflow-dots svg circle, :host .subnav-menu-left .overflow-menu-container .overflow-button.selected-active .overflow-dots svg circle {
   fill: var(--color-white);
 }
-:host .subnav-menu-left .overflow-menu-container .overflow-dropdown.align-right {
-  left: auto;
-  right: -2px;
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-dropdown.align-left {
-  left: 0;
-  right: auto;
+:host .subnav-menu-left .overflow-menu-container .overflow-dropdown {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  background: var(--color-white);
+  border-radius: var(--ptc-border-radius-standard);
+  box-shadow: var(--ptc-shadow-x-large);
+  min-width: 200px;
+  z-index: 1001;
+  padding: 14px 0;
+  margin-top: -4px;
+  max-width: 312px;
+  width: -moz-max-content;
+  width: max-content;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-dropdown a {
-  text-align: left;
-  line-height: 18px;
+  display: block;
+  padding: 12px 32px 12px 24px;
+  color: var(--color-gray-07);
+  text-decoration: none;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-densest);
+  transition: all 0.2s ease;
+  position: relative;
+  border: none;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:hover {
   background-color: var(--color-gray-02);
@@ -278,57 +257,47 @@ ptc-footer {
   content: "";
   display: block;
   width: 2px;
-  height: 100%;
+  height: calc(100% - 0px);
   background-color: var(--color-green-07);
   position: absolute;
-  left: 14px;
+  left: 16px;
   top: 0;
 }
 :host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   outline: 5px solid var(--keyboard-nav-outline);
 }
-:host .subnav-menu-left.full-width {
-  flex: 1;
-  width: 100%;
-  justify-content: flex-start;
-}
-:host .subnav-menu-left.full-width .desktop-menu {
-  width: 100%;
-}
 :host .mobile-dropdown-container {
   position: relative;
   display: block;
-  height: 100%;
-  box-sizing: border-box;
 }
 @media only screen and (min-width: 768px) {
   :host .mobile-dropdown-container {
     display: none !important;
   }
 }
+@media (min-width: 768px) {
+  :host .mobile-dropdown-container {
+    display: none !important;
+  }
+}
 :host .mobile-dropdown-container .mobile-dropdown-button {
-  background: transparent;
-  border: none;
-  border-bottom: 3px solid var(--color-green-07);
+  display: flex;
   padding: 20px 0 17px 0;
   justify-content: center;
+  align-items: center;
   gap: 10px;
+  align-self: stretch;
+  border: none;
   cursor: pointer;
-}
-:host .mobile-dropdown-container .mobile-dropdown-button:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  outline: 5px solid var(--keyboard-nav-outline);
-}
-:host .mobile-dropdown-container .mobile-dropdown-button[aria-expanded] {
-  border-color: var(--color-green-07);
-  color: var(--color-gray-10);
+  transition: all 0.2s ease;
+  background-color: transparent;
+  border-bottom: 3px solid var(--color-green-07);
 }
 :host .mobile-dropdown-container .mobile-dropdown-button .mobile-selected-item {
-  flex: 1;
-  text-align: left;
   color: var(--color-gray-07);
   font-size: var(--ptc-font-size-xx-small);
+  font-style: normal;
   font-weight: var(--ptc-font-weight-bold);
   line-height: var(--ptc-line-height-densest);
   display: -webkit-box;
@@ -339,6 +308,22 @@ ptc-footer {
   text-overflow: ellipsis;
   max-width: 100%;
 }
+:host .mobile-dropdown-container .mobile-dropdown-button:hover {
+  border-color: var(--color-gray-04);
+  color: var(--color-gray-10);
+}
+:host .mobile-dropdown-container .mobile-dropdown-button:focus-visible {
+  border-radius: var(--ptc-border-radius-standard);
+  outline: 5px solid var(--keyboard-nav-outline);
+}
+:host .mobile-dropdown-container .mobile-dropdown-button[aria-expanded] {
+  border-color: var(--color-green-07);
+  color: var(--color-gray-10);
+}
+:host .mobile-dropdown-container .mobile-dropdown-button .mobile-selected-item {
+  flex: 1;
+  text-align: left;
+}
 :host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow {
   display: flex;
   align-items: center;
@@ -353,22 +338,26 @@ ptc-footer {
 }
 :host .mobile-dropdown-container .mobile-dropdown {
   position: absolute;
-  top: calc(100% - 8px);
-  left: -2px;
-  background: var(--color-standard-gray);
+  top: calc(100% - 4px);
+  left: auto;
+  right: auto;
+  background: var(--color-white);
+  border: 1px solid var(--color-gray-02);
   border-radius: var(--ptc-border-radius-standard);
   box-shadow: var(--ptc-shadow-medium);
   z-index: 1001;
-  margin: 4px 0 0 0;
+  margin-top: 4px;
   overflow-y: auto;
   min-width: 280px;
   width: -moz-fit-content;
   width: fit-content;
   list-style: none;
-  padding: 14px 0;
+  padding: 0;
+  margin: 4px 0 0 0;
 }
 :host .mobile-dropdown-container .mobile-dropdown li {
   display: block;
+  border-bottom: 1px solid var(--color-gray-01);
 }
 :host .mobile-dropdown-container .mobile-dropdown li:last-child {
   border-bottom: none;
@@ -376,36 +365,42 @@ ptc-footer {
 :host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item {
   width: 100%;
   background: none;
+  border: none;
+  padding: 12px 16px;
+  color: var(--color-gray-07);
+  text-decoration: none;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-densest);
   text-align: left;
   cursor: pointer;
+  transition: all 0.2s ease;
   word-break: break-word;
   display: block;
-  box-sizing: border-box;
 }
-:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active {
+:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item:hover {
+  background-color: var(--color-gray-01);
   color: var(--color-gray-10);
 }
-:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active::before {
-  content: "";
-  display: block;
-  width: 2px;
-  height: 100%;
-  background-color: var(--color-green-07);
-  position: absolute;
-  left: 14px;
-  top: 0;
+:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active {
+  background-color: var(--color-gray-01);
+  color: var(--color-gray-10);
+  border-left: 3px solid var(--color-green-07);
 }
 :host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   outline: 5px solid var(--keyboard-nav-outline);
 }
 :host .subnav-menu-right {
-  max-width: 50%;
+  max-width: 300px;
   padding: 12px 0;
 }
 @media only screen and (min-width: 768px) {
   :host .subnav-menu-right {
+    margin-left: 48px;
     width: auto;
-    max-width: 300px;
   }
+}
+:host .subnav-menu-right ptc-button {
+  max-width: 300px;
 }