npm - @ptcwebops/ptcw-design - Versions diffs - 4.2.5 → 4.2.7 - Mend

@ptcwebops/ptcw-design 4.2.5 → 4.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (336) hide show

package/dist/collection/components/ptc-card/ptc-card.css CHANGED Viewed

@@ -63,7 +63,7 @@ ptc-link, ptc-square-card {
 :host(.lottie-card) .card-border {
   box-shadow: var(--ptc-shadow-small);
   border: 1px solid var(--color-gray-03);
-  border-radius: 10px;
+  border-radius: var(--ptc-border-radius-large);
   position: relative;
   overflow: hidden;
   transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-inout);
@@ -428,7 +428,7 @@ ptc-link, ptc-square-card {
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
-  border-radius: 3px;
+  border-radius: var(--ptc-border-radius-standard);
   height: 100%;
   display: flex;
   flex-direction: row;
@@ -513,18 +513,18 @@ ptc-link, ptc-square-card {
 }
 :host(.listing-card) .card-body .card-date-text p {
   font-size: var(--ptc-font-size-xx-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
   margin-top: 0rem;
 }
 :host(.listing-card) .card-body .small {
   font-size: var(--ptc-font-size-x-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
 }
@@ -533,8 +533,7 @@ ptc-link, ptc-square-card {
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-small);
-  line-height: var(--ptc-line-height-loose);
-  line-height: 21px;
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 14px;
   margin-top: 0rem;
@@ -545,19 +544,19 @@ ptc-link, ptc-square-card {
   hyphens: auto;
 }
 :host(.listing-card) ::slotted([slot=slot-date]) {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
 }
 :host(.listing-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
@@ -574,7 +573,7 @@ ptc-link, ptc-square-card {
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
-  border-radius: 3px;
+  border-radius: var(--ptc-border-radius-standard);
   width: 100%;
   height: 100%;
   transition: background var(--ptc-transition-medium) var(--ptc-ease-inout), box-shadow var(--ptc-transition-medium) var(--ptc-ease-inout);
@@ -651,9 +650,9 @@ ptc-link, ptc-square-card {
 }
 :host(.listing-card-horizontal) .card-body .card-date-text p {
   font-size: var(--ptc-font-size-xx-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 12px;
   display: inline-block;
   margin-top: 0rem;
@@ -680,10 +679,10 @@ ptc-link, ptc-square-card {
   }
 }
 :host(.listing-card-horizontal) .card-body .small {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
 }
@@ -702,7 +701,7 @@ ptc-link, ptc-square-card {
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-x-small);
-  line-height: 19px;
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 8px;
   margin-top: 0rem;
@@ -733,8 +732,7 @@ ptc-link, ptc-square-card {
     font-style: var(--ptc-font-style-normal);
     font-weight: var(--ptc-font-weight-bold);
     font-size: var(--ptc-font-size-small);
-    line-height: var(--ptc-line-height-loose);
-    line-height: 21px;
+    line-height: var(--ptc-line-height-densest);
     color: var(--color-gray-11);
     margin-bottom: 8px;
     margin-top: 0rem;
@@ -748,9 +746,9 @@ ptc-link, ptc-square-card {
 :host(.listing-card-horizontal) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 19px;
   margin-top: 0rem;
@@ -766,9 +764,9 @@ ptc-link, ptc-square-card {
 }
 @media (max-width: 767px) {
   :host(.listing-card-horizontal) ::slotted([slot=slot-description]) {
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 16px;
+    font-weight: var(--ptc-font-weight-regular);
+    font-size: var(--ptc-font-size-xx-small);
+    line-height: var(--ptc-line-height-densest);
   }
 }
@@ -781,7 +779,7 @@ ptc-link, ptc-square-card {
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
-  border-radius: 3px;
+  border-radius: var(--ptc-border-radius-standard);
   display: flex;
   flex-direction: row;
   transition: background var(--ptc-transition-medium) var(--ptc-ease-inout), box-shadow var(--ptc-transition-medium) var(--ptc-ease-inout);
@@ -812,7 +810,7 @@ ptc-link, ptc-square-card {
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-small);
   color: var(--color-gray-11);
-  border-radius: 0px 3px 3px 0px;
+  border-radius: 0px 4px 4px 0px;
   box-shadow: var(--ptc-shadow-small);
   max-width: 70%;
   max-height: 30px;
@@ -903,9 +901,9 @@ ptc-link, ptc-square-card {
 }
 :host(.resource-center-card) .card-body .small {
   font-size: var(--ptc-font-size-x-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 24px;
   display: inline-block;
 }
@@ -914,8 +912,7 @@ ptc-link, ptc-square-card {
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-small);
-  line-height: var(--ptc-line-height-loose);
-  line-height: 21px;
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 12px;
   margin-top: 0rem;
@@ -925,9 +922,9 @@ ptc-link, ptc-square-card {
 :host(.resource-center-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 1rem;
   word-break: break-word;
@@ -939,9 +936,9 @@ ptc-link, ptc-square-card {
 :host(.resource-center-card) ::slotted([slot=slot-description]) p {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 39px;
   word-break: break-word;
@@ -953,9 +950,9 @@ ptc-link, ptc-square-card {
 :host(.resource-center-card) ::slotted([slot=slot-description]) span {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 39px;
 }
@@ -968,7 +965,7 @@ ptc-link, ptc-square-card {
   overflow: hidden;
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
-  border-radius: 3px;
+  border-radius: var(--ptc-border-radius-standard);
   display: flex;
   flex-direction: row;
   height: 100%;
@@ -1061,7 +1058,7 @@ ptc-link, ptc-square-card {
 }
 :host(.case-studies-card) .card-body .card-logo-container {
   padding: 8px 20px;
-  border-bottom: 1px solid #e4e7e9;
+  border-bottom: 1px solid var(--color-gray-02);
 }
 :host(.case-studies-card) .card-body .card-logo-none {
   padding-top: 16px;
@@ -1071,14 +1068,14 @@ ptc-link, ptc-square-card {
   width: auto;
   height: 40px;
   object-fit: cover;
-  border: 1px solid #e4e7e9;
+  border: 1px solid var(--color-gray-02);
   margin-bottom: 8px;
 }
 :host(.case-studies-card) .card-body .small {
   font-size: var(--ptc-font-size-x-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 24px;
   display: inline-block;
 }
@@ -1087,25 +1084,24 @@ ptc-link, ptc-square-card {
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-small);
-  line-height: var(--ptc-line-height-loose);
-  line-height: 21px;
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin: 8px 20px 12px 20px;
 }
 :host(.case-studies-card) ::slotted([slot=slot-date]) {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 24px;
   display: inline-block;
 }
 :host(.case-studies-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin: 0px 20px 16px 20px;
 }
@@ -1154,7 +1150,7 @@ ptc-link, ptc-square-card {
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-small);
   color: var(--color-gray-11);
-  border-radius: 0px 3px 3px 0px;
+  border-radius: 0px 4px 4px 0px;
   box-shadow: var(--ptc-shadow-small);
   max-height: fit-content;
   overflow: hidden;
@@ -1245,9 +1241,9 @@ ptc-link, ptc-square-card {
 }
 :host(.related-card) .card-body .card-date-text p {
   font-size: var(--ptc-font-size-xx-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
   margin-top: 0rem;
@@ -1259,9 +1255,9 @@ ptc-link, ptc-square-card {
 }
 :host(.related-card) .card-body .small {
   font-size: var(--ptc-font-size-x-small);
-  font-weight: 400;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
 }
@@ -1270,8 +1266,7 @@ ptc-link, ptc-square-card {
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
   font-size: var(--ptc-font-size-small);
-  line-height: var(--ptc-line-height-loose);
-  line-height: 21px;
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 14px;
   margin-top: 0rem;
@@ -1284,9 +1279,9 @@ ptc-link, ptc-square-card {
 :host(.related-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 18px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
 }
@@ -1296,7 +1291,7 @@ ptc-link, ptc-square-card {
 :host(.featured-horizontal-card) .card-border {
   overflow: hidden;
   background: var(--color-white);
-  border-radius: 3px;
+  border-radius: var(--ptc-border-radius-standard);
   width: 312px;
   height: 100%;
 }
@@ -1395,10 +1390,10 @@ ptc-link, ptc-square-card {
   }
 }
 :host(.featured-horizontal-card) .card-body .small {
-  font-weight: 400;
-  font-size: 16px;
-  line-height: 19px;
-  color: #282f35;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-11);
   margin-bottom: 16px;
   display: inline-block;
 }
@@ -1437,9 +1432,9 @@ ptc-link, ptc-square-card {
 :host(.featured-horizontal-card) ::slotted([slot=slot-description]) {
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
-  font-weight: 400;
-  font-size: 1rem !important;
-  line-height: 19px;
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small) !important;
+  line-height: var(--ptc-line-height-densest);
   color: var(--color-gray-11);
   margin-bottom: 19px;
   margin-top: 0rem;
@@ -1452,11 +1447,11 @@ ptc-link, ptc-square-card {
 }
 :host(.featured-horizontal-card) ::slotted([slot=slot-description]) p {
   margin-block-start: 0rem;
-  font-size: 1rem;
+  font-size: var(--ptc-font-size-x-small);
 }
 @media (max-width: 992px) {
   :host(.featured-horizontal-card) ::slotted([slot=slot-description]) {
-    font-size: 1.125rem !important;
+    font-size: var(--ptc-font-size-small) !important;
   }
 }
 :host(.featured-horizontal-card) ::slotted([slot=slot-image]) {

package/dist/collection/components/ptc-collapse-list/ptc-collapse-list.css CHANGED Viewed

@@ -86,10 +86,10 @@ li {
   max-height: 0;
 }
 .level-1 > ul > li {
-  margin: 12px 0;
+  margin: var(--ptc-element-spacing-03) 0;
 }
 .level-1 > ul > li:first-child {
-  margin-top: 20px;
+  margin-top: var(--ptc-element-spacing-05);
 }
 .level-1 > ul > li:last-child {
   margin-bottom: 10px;
@@ -99,7 +99,7 @@ li {
   max-height: 0;
 }
 .level-2 > ul > li, .level-3 > ul > li, .level-4 > ul > li, .level-5 > ul > li {
-  margin: 8px 0;
+  margin: var(--ptc-element-spacing-02) 0;
 }
 .level-2 > ul {
@@ -107,7 +107,7 @@ li {
 }
 .level-3 > ul {
-  padding-left: 3rem;
+  padding-left: var(--ptc-element-spacing-09);
 }
 .level-4 > ul {
@@ -123,11 +123,11 @@ li {
 }
 .level-1 > a {
   position: relative;
-  padding: 16px 20px 17.5px 0;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-05) 17.5px 0;
   display: block;
-  font-size: 18px;
+  font-size: var(--ptc-font-size-small);
   letter-spacing: 0.45px;
-  font-weight: 800;
+  font-weight: var(--ptc-font-weight-extrabold);
   color: var(--color-gray-12);
   text-decoration: none;
   border-bottom: 1px solid rgba(112, 112, 112, 0.25);
@@ -166,23 +166,23 @@ li {
   padding-top: 0;
 }
 .level-1:first-child > a {
-  padding-top: 20px;
+  padding-top: var(--ptc-element-spacing-05);
 }
 .level-2, .level-3, .level-4, .level-5 {
   position: relative;
 }
 .level-2 > a, .level-3 > a, .level-4 > a, .level-5 > a {
-  font-size: 15px;
-  font-weight: 500;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-medium);
   letter-spacing: 0.4px;
   color: var(--color-gray-10);
   text-decoration: none;
   display: inline-block;
-  margin-left: 20px;
+  margin-left: var(--ptc-element-spacing-05);
 }
 .level-2 > a:hover, .level-2 > a:active, .level-3 > a:hover, .level-3 > a:active, .level-4 > a:hover, .level-4 > a:active, .level-5 > a:hover, .level-5 > a:active {
-  font-weight: 800;
+  font-weight: var(--ptc-font-weight-extrabold);
   color: var(--color-green-07);
   text-decoration: none;
 }
@@ -224,16 +224,16 @@ li {
 }
 .search-box input[type=text] {
   font-family: var(--ptc-font-latin);
-  padding: 8px 45px 8px 18px;
-  font-size: 1rem;
-  font-weight: 400;
+  padding: var(--ptc-element-spacing-02) var(--ptc-element-spacing-08) var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-regular);
   color: var(--color-gray-12);
   box-shadow: var(--ptc-shadow-x-small);
   border: solid 1px var(--color-gray-06);
   transition: border var(--ptc-transition-medium) var(--ptc-ease-out), box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);
   background-color: var(--color-white);
   width: 100%;
-  margin-right: 2rem;
+  margin-right: var(--ptc-element-spacing-07);
 }
 .search-box input[type=text]::-ms-clear {
   display: none;
@@ -271,7 +271,7 @@ li {
   width: 256px;
 }
 .popup i {
-  margin-right: 8px;
+  margin-right: var(--ptc-element-spacing-02);
 }
 ptc-tooltip .wrapper-content.sc-ptc-tooltip {