@ptcwebops/ptcw-design 1.1.5 → 1.1.7

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

@@ -797,6 +797,31 @@ ptc-icon-list.icon-top-align-list a:hover {
     row-gap: 0;
   }
 }
+.max-content {
+  max-width: 90%;
+  margin: auto;
+}
+@media only screen and (min-width: 480px) {
+  .max-content {
+    max-width: 80%;
+  }
+}
+
+.product-tab ptc-title h3 {
+  font-size: 20px !important;
+  font-weight: 900;
+}
+@media only screen and (min-width: 1200px) {
+  .product-tab ptc-title h3 {
+    font-size: 15px !important;
+    font-weight: 800;
+  }
+}
+.product-tab .is-grid {
+  grid-column-gap: 20px;
+  grid-row-gap: 12px;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -11,6 +11,9 @@
   border-radius: var(--ptc-border-radius-standard);
   background-color: var(--color-gray-12);
 }
+:host .nav-card-wrap:hover {
+  background-color: var(--color-gray-08);
+}
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap {
     background-color: var(--color-gray-10);
@@ -27,15 +30,20 @@
   text-decoration: none;
 }
 :host .nav-card-wrap .media-card-wrap {
-  padding: 1rem;
+  padding: 1rem 1.5rem 1.125rem 1.5rem;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
 }
+@media only screen and (min-width: 1200px) {
+  :host .nav-card-wrap .media-card-wrap {
+    padding: 1rem;
+  }
+}
 :host .nav-card-wrap .media-card-wrap h4 {
   margin-bottom: 0.25rem;
-  font-weight: 600;
+  font-weight: 800;
   display: flex;
   align-items: center;
   font-size: var(--ptc-font-size-medium);
@@ -44,7 +52,6 @@
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap .media-card-wrap h4 {
     font-size: var(--ptc-font-size-xxx-small);
-    font-weight: 800;
   }
 }
 :host .nav-card-wrap .media-card-wrap p {
@@ -60,17 +67,25 @@
 }
 :host .nav-card-wrap .media-card-wrap .card-logo img {
   width: 100%;
-  max-width: 1.5rem;
-  min-width: 1.5rem;
+  max-width: 2rem;
+  min-width: 2rem;
+}
+@media only screen and (min-width: 1200px) {
+  :host .nav-card-wrap .media-card-wrap .card-logo img {
+    max-width: 1.5rem;
+    min-width: 1.5rem;
+  }
 }
 
 :host(.cta-card) .nav-card-wrap {
   border: 1px solid var(--color-gray-10);
   border-radius: var(--ptc-border-radius-standard);
   background-color: var(--color-gray-09);
+  min-height: 99px;
 }
 @media only screen and (min-width: 1200px) {
   :host(.cta-card) .nav-card-wrap {
+    min-height: auto;
     background-color: transparent;
   }
 }
@@ -80,63 +95,62 @@
 :host(.cta-card) .nav-card-wrap .card-content {
   margin: auto;
 }
+:host(.cta-card) .nav-card-wrap .card-content h4 {
+  margin: 0;
+}
 :host(.cta-card) .nav-card-wrap .card-content svg {
   vertical-align: middle;
   margin-left: 0.375rem;
 }
 
 :host(.links-card) .nav-card-wrap {
-  padding: 2rem 0rem 0.75rem 0rem;
-  border-radius: var(--ptc-border-radius-standard);
   background-color: transparent;
-  border: 1px solid var(--color-gray-07);
-  border-left: none;
-  border-right: none;
-  border-bottom: none;
-  border-radius: 0;
   align-items: flex-start;
-}
-@media only screen and (min-width: 768px) {
-  :host(.links-card) .nav-card-wrap {
-    padding: 1.5rem;
-    border: 1px solid var(--color-gray-07);
-    border-radius: var(--ptc-border-radius-standard);
-  }
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  border-bottom: 1px solid var(--color-gray-07);
+  border-radius: 0;
+  margin: 0 -1.5rem;
 }
 @media only screen and (min-width: 1200px) {
   :host(.links-card) .nav-card-wrap {
+    margin: 0;
+    padding: 1.5rem;
     border: 1px solid var(--color-gray-10);
+    border-radius: var(--ptc-border-radius-standard);
   }
 }
 :host(.links-card) .nav-card-wrap:hover {
   background-color: transparent;
 }
 :host(.links-card) .nav-card-wrap h3 {
-  margin: 0 0 0.75rem 0;
-  border-bottom: 1.5px solid transparent;
+  margin: 0 0 8px 0;
   display: inline-block;
   font-weight: 800;
+  font-size: 20px;
+  color: var(--color-white);
+}
+@media only screen and (min-width: 1200px) {
+  :host(.links-card) .nav-card-wrap h3 {
+    font-size: 15px;
+    margin: 0 0 10px 0;
+  }
 }
 :host(.links-card) .nav-card-wrap h3 svg {
   margin-left: 0.375rem;
-  display: none;
   vertical-align: middle;
 }
-:host(.links-card) .nav-card-wrap h3:hover {
-  border-color: var(--color-green-06);
-}
-:host(.links-card) .nav-card-wrap h3:hover svg {
-  display: inline-block;
-}
 :host(.links-card) .nav-card-wrap h3 a {
-  font-size: var(--ptc-font-size-medium);
+  border-bottom: 1.5px solid transparent;
 }
-@media only screen and (min-width: 1200px) {
-  :host(.links-card) .nav-card-wrap h3 a {
-    font-size: var(--ptc-font-size-x-small);
-  }
+:host(.links-card) .nav-card-wrap h3 a:hover {
+  border-color: var(--color-green-06);
 }
 :host(.links-card) ::slotted(ptc-link) {
-  padding: 6px 0;
+  padding: 8px 0;
   line-height: 14px;
+}
+@media only screen and (min-width: 1200px) {
+  :host(.links-card) ::slotted(ptc-link) {
+    padding: 6px 0;
+  }
 }

package/dist/collection/components/ptc-nav-card/ptc-nav-card.js

@@ -25,7 +25,8 @@ export class PtcNavCard {
   }
   render() {
     return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
-      h("div", { class: "links-card-wrap" }, h("h3", null, h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), h("slot", null))
+      h("div", { class: "links-card-wrap" }, h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
+        (h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
       :
         h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
           h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -742,6 +742,31 @@ ptc-icon-list.icon-top-align-list a:hover {
     row-gap: 0;
   }
 }
+.max-content {
+  max-width: 90%;
+  margin: auto;
+}
+@media only screen and (min-width: 480px) {
+  .max-content {
+    max-width: 80%;
+  }
+}
+
+.product-tab ptc-title h3 {
+  font-size: 20px !important;
+  font-weight: 900;
+}
+@media only screen and (min-width: 1200px) {
+  .product-tab ptc-title h3 {
+    font-size: 15px !important;
+    font-weight: 800;
+  }
+}
+.product-tab .is-grid {
+  grid-column-gap: 20px;
+  grid-row-gap: 12px;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.css

@@ -76,12 +76,13 @@
 
 :host(.tab-cta-with-background) {
   min-height: 400px;
-  padding: var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02);
+  padding: var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02) 88px var(--ptc-layout-spacing-02);
 }
 @media only screen and (min-width: 992px) {
   :host(.tab-cta-with-background) {
     display: flex;
     align-items: center;
+    padding: var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02);
   }
 }
 @media only screen and (min-width: 1200px) {