@biggive/components 1.0.95 → 1.0.97

package/dist/collection/components/biggive-heading/biggive-heading.js

@@ -1,174 +1,158 @@
-import { Component, Prop, h } from '@stencil/core';
+import { h } from '@stencil/core';
 export class BiggiveHeading {
   constructor() {
-    /**
-     * Space above component
-     */
     this.spaceAbove = 0;
-    /**
-     * Space below component
-     */
     this.spaceBelow = 0;
-    /**
-     * Colour Scheme
-     */
     this.colour = 'primary';
-    /**
-     * HTML element
-     */
     this.htmlElement = 'h1';
-    /**
-     * Heading size
-     */
     this.size = 1;
-    /**
-     * Text alignment
-     */
     this.align = 'left';
-    /**
-     * Heading text
-     */
     this.text = '';
   }
   render() {
     const Tag = this.htmlElement;
-    return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow },
-      h(Tag, { class: 'heading-colour-' + this.colour + ' heading-' + this.size }, this.text)));
+    return (h("div", { class: 'container align-' + this.align + ' space-above-' + this.spaceAbove + ' space-below-' + this.spaceBelow }, h(Tag, { class: 'heading-colour-' + this.colour + ' heading-' + this.size }, this.text)));
   }
   static get is() { return "biggive-heading"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["biggive-heading.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["biggive-heading.css"]
-  }; }
-  static get properties() { return {
-    "spaceAbove": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Space above component"
-      },
-      "attribute": "space-above",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "spaceBelow": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Space below component"
-      },
-      "attribute": "space-below",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "colour": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Colour Scheme"
-      },
-      "attribute": "colour",
-      "reflect": false,
-      "defaultValue": "'primary'"
-    },
-    "htmlElement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "HTML element"
-      },
-      "attribute": "html-element",
-      "reflect": false,
-      "defaultValue": "'h1'"
-    },
-    "size": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["biggive-heading.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["biggive-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "spaceAbove": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Space above component"
+        },
+        "attribute": "space-above",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Heading size"
+      "spaceBelow": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Space below component"
+        },
+        "attribute": "space-below",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "attribute": "size",
-      "reflect": false,
-      "defaultValue": "1"
-    },
-    "align": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "colour": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Colour Scheme"
+        },
+        "attribute": "colour",
+        "reflect": false,
+        "defaultValue": "'primary'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Text alignment"
+      "htmlElement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "HTML element"
+        },
+        "attribute": "html-element",
+        "reflect": false,
+        "defaultValue": "'h1'"
       },
-      "attribute": "align",
-      "reflect": false,
-      "defaultValue": "'left'"
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "size": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading size"
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "1"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Heading text"
+      "align": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text alignment"
+        },
+        "attribute": "align",
+        "reflect": false,
+        "defaultValue": "'left'"
       },
-      "attribute": "text",
-      "reflect": false,
-      "defaultValue": "''"
-    }
-  }; }
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Heading text"
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
 }

package/dist/collection/components/biggive-hero-image/biggive-hero-image.css

@@ -109,6 +109,10 @@ a:hover {
   fill: #000000;
 }
 
+.fill-red {
+  fill: red;
+}
+
 .background-colour-hover-primary:hover,
 .background-colour-primary {
   background-color: #2C089B;
@@ -214,6 +218,26 @@ a:hover {
   background-color: #FFFFFF;
 }
 
+.button-white {
+  color: #2C089B;
+  background-color: #FFFFFF;
+  border-color: #FFFFFF;
+}
+.button-white:hover {
+  color: #FFFFFF;
+  background-color: #2C089B;
+}
+
+.button-black {
+  color: #FFFFFF;
+  background-color: #000000;
+  border-color: #000000;
+}
+.button-black:hover {
+  color: #000000;
+  background-color: #FFFFFF;
+}
+
 .button-clear-primary {
   color: #2C089B;
   background-color: transparent;
@@ -516,43 +540,41 @@ a:hover {
   margin-left: auto;
   margin-right: auto;
 }
-
-.content-wrap {
+.container .content-wrap {
   width: 40%;
   position: relative;
   z-index: 1;
   padding: 180px 60px 60px 60px;
 }
-.content-wrap .logo {
+.container .content-wrap .logo {
   height: 75px;
   margin-bottom: 30px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: left center;
 }
-.content-wrap .logo img {
+.container .content-wrap .logo img {
   display: none;
 }
-.content-wrap .slug {
+.container .content-wrap .slug {
   font-size: 20px;
   line-height: 24px;
   font-weight: bold;
   margin: 0;
   padding: 0;
 }
-.content-wrap h1 {
+.container .content-wrap h1 {
   font-size: 50px;
   line-height: 60px;
   font-weight: bold;
   margin: 0 0 15px 0;
   padding: 0;
 }
-.content-wrap .teaser {
+.container .content-wrap .teaser {
   margin: 0 0 45px 0;
   padding: 0;
 }
-
-.graphic-wrap {
+.container .graphic-wrap {
   position: absolute;
   display: block;
   top: 0;
@@ -563,7 +585,7 @@ a:hover {
   margin-left: 20vw;
   clip-path: polygon(0 0, 100% 0, 100% 100%);
 }
-.graphic-wrap .image-wrap {
+.container .graphic-wrap .image-wrap {
   position: absolute;
   display: block;
   top: 0;
@@ -572,6 +594,21 @@ a:hover {
   right: 0;
   background-size: cover;
 }
-.graphic-wrap .image-wrap img {
+.container .graphic-wrap .image-wrap img {
   display: none;
+}
+
+@media screen and (max-width: 768px) {
+  .container .sleeve {
+    flex-wrap: wrap;
+  }
+  .container .sleeve .content-wrap {
+    width: 100%;
+    padding: 25vw 15px 15px 15px;
+  }
+  .container .sleeve .graphic-wrap {
+    margin-left: 0;
+    bottom: auto;
+    padding-bottom: 50%;
+  }
 }