@ptcwebops/ptcw-design 6.4.10 → 6.4.11-beta

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

@@ -1,411 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-  word-break: break-word;
-  hyphens: manual;
-  -webkit-hyphens: manual;
-  -moz-hyphens: manual;
-  -ms-hyphens: manual;
-}
-@supports (hyphenate-limit-chars: 12 3 3) {
-  h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ul,
-li,
-ptc-subnav,
-ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    /* For Safari */
-    -webkit-hyphenate-limit-after: 3;
-    /* For Safari */
-    hyphenate-limit-chars: 12 3 3;
-    hyphenate-limit-lines: 2;
-    hyphenate-limit-last: always;
-    hyphenate-limit-zone: 6%;
-    -webkit-hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-    -webkit-hyphenate-limit-chars: 12 3 3;
-    -webkit-hyphenate-limit-lines: 2;
-    -moz-hyphens: auto;
-    -moz-hyphenate-limit-chars: 12 3 3;
-    -moz-hyphenate-limit-lines: 2;
-    -ms-hyphens: auto;
-    -ms-hyphenate-limit-chars: 12 3 3;
-    -ms-hyphenate-limit-lines: 2;
-  }
-}
-
-: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);
-  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;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 24px;
-  margin: 0 auto;
-  max-width: 1200px;
-  gap: 24px;
-}
-@media only screen and (min-width: 768px) {
-  :host .subnav-container {
-    flex-wrap: wrap;
-    gap: 48px;
-  }
-}
-@media only screen and (min-width: 1200px) {
-  :host .subnav-container {
-    padding: 0;
-    max-width: 1136px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  :host .subnav-container {
-    padding: 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 {
-    justify-content: flex-start;
-  }
-}
-:host .subnav-menu-left ul.desktop-menu {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  flex-wrap: wrap;
-  align-self: stretch;
-}
-@media only screen and (min-width: 768px) {
-  :host .subnav-menu-left ul.desktop-menu {
-    justify-content: flex-start;
-    gap: 32px;
-  }
-}
-:host .subnav-menu-left ul.desktop-menu li {
-  display: inline-block;
-  height: 100%;
-}
-@media only screen and (min-width: 768px) {
-  :host .subnav-menu-left ul.desktop-menu li a {
-    padding: 20px 0 17px 0;
-  }
-}
-:host .subnav-menu-left ul.desktop-menu li a:hover {
-  color: var(--color-gray-10);
-}
-:host .subnav-menu-left ul.desktop-menu li a.active {
-  color: var(--color-gray-10);
-  border-bottom: 3px solid var(--color-green-07);
-}
-:host .subnav-menu-left ul.desktop-menu li a:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  outline: 5px solid var(--keyboard-nav-outline);
-}
-:host .subnav-menu-left .overflow-menu-container {
-  position: relative;
-  display: none;
-}
-@media only screen and (min-width: 768px) {
-  :host .subnav-menu-left .overflow-menu-container {
-    display: inline-block;
-  }
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-button {
-  background: none;
-  border: none;
-  padding: 20px 0 17px 0;
-  cursor: pointer;
-  justify-content: center;
-  border-bottom: 3px solid transparent;
-  box-sizing: border-box;
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-button:hover {
-  color: var(--color-gray-10);
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-button:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  outline: 5px solid var(--keyboard-nav-outline);
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots {
-  border-radius: 2px;
-  border: 1px solid var(--color-gray-07);
-  line-height: 1;
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  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);
-  border-color: var(--color-gray-04);
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:hover svg circle {
-  fill: var(--color-gray-10);
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-button .overflow-dots:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  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);
-}
-: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);
-  border-color: var(--color-green-07);
-}
-: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 a {
-  text-align: left;
-  line-height: 18px;
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a:hover {
-  background-color: var(--color-gray-02);
-  color: var(--color-gray-10);
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a.active {
-  color: var(--color-gray-10);
-  border-bottom: none;
-}
-:host .subnav-menu-left .overflow-menu-container .overflow-dropdown a.active::before {
-  content: "";
-  display: block;
-  width: 2px;
-  height: 100%;
-  background-color: var(--color-green-07);
-  position: absolute;
-  left: 14px;
-  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;
-  }
-}
-:host .mobile-dropdown-container .mobile-dropdown-button {
-  background: transparent;
-  border: none;
-  border-bottom: 3px solid var(--color-green-07);
-  padding: 20px 0 17px 0;
-  justify-content: center;
-  gap: 10px;
-  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);
-}
-: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-weight: var(--ptc-font-weight-bold);
-  line-height: var(--ptc-line-height-densest);
-  display: -webkit-box;
-  line-clamp: 1;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-}
-:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.2s ease;
-}
-:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow svg {
-  transition: transform 0.2s ease;
-}
-:host .mobile-dropdown-container .mobile-dropdown-button .mobile-arrow.rotated svg {
-  transform: rotate(180deg);
-}
-:host .mobile-dropdown-container .mobile-dropdown {
-  position: absolute;
-  top: calc(100% - 8px);
-  left: -2px;
-  background: var(--color-standard-gray);
-  border-radius: var(--ptc-border-radius-standard);
-  box-shadow: var(--ptc-shadow-medium);
-  z-index: 1001;
-  margin: 4px 0 0 0;
-  overflow-y: auto;
-  min-width: 280px;
-  width: -moz-fit-content;
-  width: fit-content;
-  list-style: none;
-  padding: 14px 0;
-}
-:host .mobile-dropdown-container .mobile-dropdown li {
-  display: block;
-}
-:host .mobile-dropdown-container .mobile-dropdown li:last-child {
-  border-bottom: none;
-}
-:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item {
-  width: 100%;
-  background: none;
-  text-align: left;
-  cursor: pointer;
-  word-break: break-word;
-  display: block;
-  box-sizing: border-box;
-}
-:host .mobile-dropdown-container .mobile-dropdown li .mobile-dropdown-item.active {
-  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:focus-visible {
-  border-radius: var(--ptc-border-radius-standard);
-  outline: 5px solid var(--keyboard-nav-outline);
-}
-:host .subnav-menu-right {
-  max-width: 50%;
-  padding: 12px 0;
-}
-@media only screen and (min-width: 768px) {
-  :host .subnav-menu-right {
-    width: auto;
-    max-width: 300px;
-  }
-}