@ptcwebops/ptcw-design 0.7.5 → 0.7.6

package/dist/collection/components/ptc-accordion/ptc-accordion.js

@@ -1,74 +1,74 @@
-import { Component, Host, h, Prop, Element, Listen } from '@stencil/core';
-export class PtcAccordion {
-  constructor() {
-    /**
-     * If multiple `<ptc-accordion-item>`s can open at the same time
-     */
-    this.multiple = false;
-  }
-  componentWillLoad() {
-    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
-    if (!this.multiple) {
-      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
-      if (this.activeItem) {
-        this.activeItem.open();
-      }
-      this.closeNonActive();
-    }
-  }
-  openHandler(e) {
-    e.stopPropagation();
-    const eventTarget = e.target;
-    if (!this.multiple) {
-      this.activeItem = eventTarget;
-      this.closeNonActive();
-    }
-  }
-  closeNonActive() {
-    this.items.forEach(item => {
-      if (!item.isEqualNode(this.activeItem)) {
-        item.close();
-      }
-    });
-  }
-  render() {
-    return (h(Host, null,
-      h("slot", null)));
-  }
-  static get is() { return "ptc-accordion"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-accordion.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-accordion.css"]
-  }; }
-  static get properties() { return {
-    "multiple": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "If multiple `<ptc-accordion-item>`s can open at the same time"
-      },
-      "attribute": "multiple",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "opened",
-      "method": "openHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Host, h, Prop, Element, Listen } from '@stencil/core';
+export class PtcAccordion {
+  constructor() {
+    /**
+     * If multiple `<ptc-accordion-item>`s can open at the same time
+     */
+    this.multiple = false;
+  }
+  componentWillLoad() {
+    this.items = this.el.querySelectorAll(':scope > ptc-accordion-item');
+    if (!this.multiple) {
+      this.activeItem = this.el.querySelector(':scope > ptc-accordion-item[active]');
+      if (this.activeItem) {
+        this.activeItem.open();
+      }
+      this.closeNonActive();
+    }
+  }
+  openHandler(e) {
+    e.stopPropagation();
+    const eventTarget = e.target;
+    if (!this.multiple) {
+      this.activeItem = eventTarget;
+      this.closeNonActive();
+    }
+  }
+  closeNonActive() {
+    this.items.forEach(item => {
+      if (!item.isEqualNode(this.activeItem)) {
+        item.close();
+      }
+    });
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ptc-accordion"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-accordion.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-accordion.css"]
+  }; }
+  static get properties() { return {
+    "multiple": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "If multiple `<ptc-accordion-item>`s can open at the same time"
+      },
+      "attribute": "multiple",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "opened",
+      "method": "openHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -9,8 +9,8 @@
   z-index: 860;
   background-size: cover;
   background-repeat: repeat-x;
-  border: 1px solid var(--color-green-06);
-  box-shadow: var(--ptc-shadow-small);
+  border-top: 3px solid var(--color-green-07);
+  box-shadow: var(--ptc-shadow-medium);
   z-index: 999;
   display: none;
 }
@@ -21,134 +21,140 @@
 
 .content-wrapper {
   display: flex;
-  padding: var(--ptc-element-spacing-02) var(--ptc-element-spacing-03);
+  padding: var(--ptc-element-spacing-03) var(--ptc-element-spacing-06) var(--ptc-element-spacing-03) var(--ptc-element-spacing-05);
   margin: 0 auto;
   align-items: center;
   justify-content: space-between;
+  max-width: 1200px;
 }
 @media only screen and (min-width: 768px) {
   .content-wrapper {
-    padding: var(--ptc-element-spacing-02) var(--ptc-element-spacing-04);
-  }
-}
-
-@media only screen and (min-width: 768px) {
-  .temp-container {
-    width: 750px;
-  }
-}
-@media only screen and (min-width: 992px) {
-  .temp-container {
-    width: 970px;
+    padding: var(--ptc-element-spacing-03) var(--ptc-element-spacing-06);
   }
 }
 @media only screen and (min-width: 1200px) {
-  .temp-container {
-    width: 1170px;
-  }
-}
-@media only screen and (min-width: 1440px) {
-  .temp-container {
-    width: 1400px;
-  }
-}
-@media only screen and (min-width: 1600px) {
-  .temp-container {
-    width: 1560px;
+  .content-wrapper {
+    padding: var(--ptc-element-spacing-03) 44px var(--ptc-element-spacing-03) 67px;
   }
 }
 
 .left-content {
+  max-width: calc(100% - 76px);
   display: flex;
-  flex-basis: 82%;
   flex-direction: column;
-}
-@media only screen and (min-width: 768px) {
-  .left-content {
-    align-items: flex-start;
-    justify-content: flex-start;
-  }
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
 }
 
 .title {
-  flex-basis: 17%;
   font-family: Raleway;
-  font-size: var(--ptc-font-size-xx-small);
-  font-weight: var(--ptc-font-weight-extrabold);
-  font-stretch: normal;
-  font-style: normal;
-  line-height: var(--ptc-line-height-looser);
-  letter-spacing: var(--ptc-letter-spacing-loose);
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-densest);
+  letter-spacing: var(--ptc-letter-spacing-dense);
   text-align: left;
   color: var(--color-gray-10);
-  text-transform: uppercase;
-}
-
-.ptc-svg-btn {
-  flex-basis: 18%;
-}
-
-.bar-close {
-  padding-right: var(--ptc-element-spacing-04);
+  margin-bottom: var(--ptc-element-spacing-02);
+  max-width: 100%;
 }
 
 .description {
-  flex-basis: 82%;
   font-family: Raleway;
-  font-size: var(--ptc-font-size-xx-small);
-  font-weight: var(--ptc-font-weight-medium);
-  font-stretch: normal;
-  font-style: normal;
-  line-height: var(--ptc-line-height-denser);
-  letter-spacing: normal;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-densest);
+  letter-spacing: var(--ptc-letter-spacing-normal);
   text-align: left;
   color: var(--color-gray-10);
+  max-width: 100%;
+}
+.description div {
+  display: inline-block;
+  padding-right: var(--ptc-element-spacing-01);
+  vertical-align: middle;
 }
 
-a {
+.cta-link {
   color: var(--color-blue-07);
+  font-size: var(--ptc-font-size-x-small);
   -webkit-transition: color var(--ptc-transition-slow) var(--ptc-ease-inout);
   -o-transition: color var(--ptc-transition-slow) var(--ptc-ease-inout);
   transition: color var(--ptc-transition-slow) var(--ptc-ease-inout);
   font-weight: var(--ptc-font-weight-bold);
   text-decoration: underline;
-  white-space: nowrap;
-  margin-left: var(--ptc-element-spacing-04);
+  display: inline-block;
+  vertical-align: middle;
+  cursor: pointer;
 }
-a:hover {
+.cta-link::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+.cta-link:link {
+  color: var(--color-blue-07);
+}
+.cta-link:hover {
   color: var(--color-blue-08);
 }
-a:focus {
-  outline: 3px solid var(--color-blue-07);
-  outline-offset: 0.25rem;
-  border-radius: var(--ptc-border-radius-standard);
+.cta-link:active {
+  color: var(--color-gray-09);
 }
-a:visited {
-  color: var(--color-blue-09);
+.cta-link:focus {
+  outline: 2px solid var(--color-blue-07);
+  outline-offset: 0.25rem;
 }
 
-@media only screen and (min-width: 768px) {
-  .bar-close {
-    padding-right: 0px;
-  }
+.bar-close {
+  max-width: 36px;
+  cursor: pointer;
+  margin-left: var(--ptc-element-spacing-08);
+  position: relative;
 }
+.bar-close::before {
+  content: "";
+  position: absolute;
+  width: 44px;
+  height: 44px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+
 @media only screen and (min-width: 992px) {
   .left-content {
     flex-direction: row;
-    align-items: center;
+    max-width: calc(100% - 58px);
+    flex: 1 1 1032px;
+  }
+
+  .bar-close {
+    max-width: 18px;
+  }
+  .bar-close::before {
+    width: 34px;
+    height: 34px;
   }
 
   .title {
-    font-size: var(--ptc-font-size-xx-small);
-    font-weight: var(--ptc-font-weight-extrabold);
-    line-height: var(--ptc-line-height-dense);
-    letter-spacing: var(--ptc-letter-spacing-loose);
-    padding-left: var(--ptc-element-spacing-03);
+    margin-right: var(--ptc-element-spacing-04);
+    margin-bottom: 0;
+    flex: 0 1 auto;
+    max-width: 248px;
+  }
+  .title.max-title {
+    max-width: unset !important;
+    flex: 2 1 560px;
   }
 
   .description {
-    font-size: var(--ptc-font-size-x-small);
-    font-weight: var(--ptc-font-weight-medium);
-    line-height: var(--ptc-line-height-dense);
+    flex: 1 1 768px;
   }
 }