@biggive/components 202402071443.0.0 → 202402081415.0.0

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.
@@ -88,6 +88,11 @@ a:hover {
88
88
  margin-right: auto;
89
89
  padding: 30px;
90
90
  }
91
+ @media screen and (max-width: 1200px) {
92
+ .container .sleeve {
93
+ padding: 15px;
94
+ }
95
+ }
91
96
 
92
97
  .container.full-bleed {
93
98
  box-shadow: 0 0 0 100vmax #2C089B;
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
2
2
 
3
- const biggivePageSectionCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;overflow:hidden;position:relative;text-align:center}.container .sleeve{max-width:1200px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;padding:30px}.container.full-bleed{box-shadow:0 0 0 100vmax #2C089B;clip-path:inset(0 -100vmax)}.container.style-top-crop-right:before{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 0% 100%, 100% 100%);transform:translateY(1px)}.container.style-top-crop-left:before{content:\"\";display:block;height:75px;clip-path:polygon(100% 0, 100% 0%, 100% 100%, 0 100%);transform:translateY(1px)}.container.style-bottom-crop-right:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 0 100%);transform:translateY(-1px)}.container.style-bottom-crop-left:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 100% 100%);transform:translateY(-1px)}.container .sleeve{position:relative;text-align:left}.container.max-width-10 .sleeve{max-width:10%;margin-left:auto;margin-right:auto}.container.max-width-15 .sleeve{max-width:15%;margin-left:auto;margin-right:auto}.container.max-width-20 .sleeve{max-width:20%;margin-left:auto;margin-right:auto}.container.max-width-25 .sleeve{max-width:25%;margin-left:auto;margin-right:auto}.container.max-width-30 .sleeve{max-width:30%;margin-left:auto;margin-right:auto}.container.max-width-35 .sleeve{max-width:35%;margin-left:auto;margin-right:auto}.container.max-width-40 .sleeve{max-width:40%;margin-left:auto;margin-right:auto}.container.max-width-45 .sleeve{max-width:45%;margin-left:auto;margin-right:auto}.container.max-width-50 .sleeve{max-width:50%;margin-left:auto;margin-right:auto}.container.max-width-55 .sleeve{max-width:55%;margin-left:auto;margin-right:auto}.container.max-width-60 .sleeve{max-width:60%;margin-left:auto;margin-right:auto}.container.max-width-65 .sleeve{max-width:65%;margin-left:auto;margin-right:auto}.container.max-width-70 .sleeve{max-width:70%;margin-left:auto;margin-right:auto}.container.max-width-75 .sleeve{max-width:75%;margin-left:auto;margin-right:auto}.container.max-width-80 .sleeve{max-width:80%;margin-left:auto;margin-right:auto}.container.max-width-85 .sleeve{max-width:85%;margin-left:auto;margin-right:auto}.container.max-width-90 .sleeve{max-width:90%;margin-left:auto;margin-right:auto}.container.max-width-95 .sleeve{max-width:95%;margin-left:auto;margin-right:auto}.container .sleeve:before{content:\"\";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0}.container.background-color-primary:before,.container.background-color-primary:after,.container.background-color-primary .sleeve:before,.container.background-color-primary .sleeve{background-color:#2C089B;color:#FFFFFF}.container.background-color-secondary:before,.container.background-color-secondary:after,.container.background-color-secondary .sleeve:before,.container.background-color-secondary .sleeve{background-color:#2AF135;color:#FFFFFF}.container.background-color-tertiary:before,.container.background-color-tertiary:after,.container.background-color-tertiary .sleeve:before,.container.background-color-tertiary .sleeve{background-color:#FF7272;color:#FFFFFF}.container.background-color-brand-1:before,.container.background-color-brand-1:after,.container.background-color-brand-1 .sleeve:before,.container.background-color-brand-1 .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-2:before,.container.background-color-brand-2:after,.container.background-color-brand-2 .sleeve:before,.container.background-color-brand-2 .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-3:before,.container.background-color-brand-3:after,.container.background-color-brand-3 .sleeve:before,.container.background-color-brand-3 .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-4:before,.container.background-color-brand-4:after,.container.background-color-brand-4 .sleeve:before,.container.background-color-brand-4 .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-5:before,.container.background-color-brand-5:after,.container.background-color-brand-5 .sleeve:before,.container.background-color-brand-5 .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-cc-red:before,.container.background-color-brand-cc-red:after,.container.background-color-brand-cc-red .sleeve:before,.container.background-color-brand-cc-red .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-wgmf-purple:before,.container.background-color-brand-wgmf-purple:after,.container.background-color-brand-wgmf-purple .sleeve:before,.container.background-color-brand-wgmf-purple .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-gmf-green:before,.container.background-color-brand-gmf-green:after,.container.background-color-brand-gmf-green .sleeve:before,.container.background-color-brand-gmf-green .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-emf-yellow:before,.container.background-color-brand-emf-yellow:after,.container.background-color-brand-emf-yellow .sleeve:before,.container.background-color-brand-emf-yellow .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-c4c-orange:before,.container.background-color-brand-c4c-orange:after,.container.background-color-brand-c4c-orange .sleeve:before,.container.background-color-brand-c4c-orange .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-afa-pink:before,.container.background-color-brand-afa-pink:after,.container.background-color-brand-afa-pink .sleeve:before,.container.background-color-brand-afa-pink .sleeve{background-color:#BF387D;color:#FFFFFF}.container.background-color-brand-mhf-turquoise:before,.container.background-color-brand-mhf-turquoise:after,.container.background-color-brand-mhf-turquoise .sleeve:before,.container.background-color-brand-mhf-turquoise .sleeve{background-color:#62CFC9;color:#FFFFFF}.container.background-color-brand-grey:before,.container.background-color-brand-grey:after,.container.background-color-brand-grey .sleeve:before,.container.background-color-brand-grey .sleeve{background-color:#CBC8C8;color:#FFFFFF}.container.background-color-white:before,.container.background-color-white:after,.container.background-color-white .sleeve:before,.container.background-color-white .sleeve{background-color:#FFFFFF;color:#000000}.container.background-color-black:before,.container.background-color-black:after,.container.background-color-black .sleeve:before,.container.background-color-black .sleeve{background-color:#000000;color:#FFFFFF}.container.background-color-grey-extra-light:before,.container.background-color-grey-extra-light:after,.container.background-color-grey-extra-light .sleeve:before,.container.background-color-grey-extra-light .sleeve{background-color:#D7D7D7;color:#000000}.container.background-color-grey-light:before,.container.background-color-grey-light:after,.container.background-color-grey-light .sleeve:before,.container.background-color-grey-light .sleeve{background-color:#E8E8E8;color:#000000}.container.background-color-grey-medium:before,.container.background-color-grey-medium:after,.container.background-color-grey-medium .sleeve:before,.container.background-color-grey-medium .sleeve{background-color:#8A8A8A;color:#FFFFFF}.container.background-color-grey-dark:before,.container.background-color-grey-dark:after,.container.background-color-grey-dark .sleeve:before,.container.background-color-grey-dark .sleeve{background-color:#4A4A4A;color:#FFFFFF}.container.background-color-brand-6:before,.container.background-color-brand-6:after,.container.background-color-brand-6 .sleeve:before,.container.background-color-brand-6 .sleeve{background-color:#62CFC9;color:#FFFFFF}";
3
+ const biggivePageSectionCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;overflow:hidden;position:relative;text-align:center}.container .sleeve{max-width:1200px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;padding:30px}@media screen and (max-width: 1200px){.container .sleeve{padding:15px}}.container.full-bleed{box-shadow:0 0 0 100vmax #2C089B;clip-path:inset(0 -100vmax)}.container.style-top-crop-right:before{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 0% 100%, 100% 100%);transform:translateY(1px)}.container.style-top-crop-left:before{content:\"\";display:block;height:75px;clip-path:polygon(100% 0, 100% 0%, 100% 100%, 0 100%);transform:translateY(1px)}.container.style-bottom-crop-right:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 0 100%);transform:translateY(-1px)}.container.style-bottom-crop-left:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 100% 100%);transform:translateY(-1px)}.container .sleeve{position:relative;text-align:left}.container.max-width-10 .sleeve{max-width:10%;margin-left:auto;margin-right:auto}.container.max-width-15 .sleeve{max-width:15%;margin-left:auto;margin-right:auto}.container.max-width-20 .sleeve{max-width:20%;margin-left:auto;margin-right:auto}.container.max-width-25 .sleeve{max-width:25%;margin-left:auto;margin-right:auto}.container.max-width-30 .sleeve{max-width:30%;margin-left:auto;margin-right:auto}.container.max-width-35 .sleeve{max-width:35%;margin-left:auto;margin-right:auto}.container.max-width-40 .sleeve{max-width:40%;margin-left:auto;margin-right:auto}.container.max-width-45 .sleeve{max-width:45%;margin-left:auto;margin-right:auto}.container.max-width-50 .sleeve{max-width:50%;margin-left:auto;margin-right:auto}.container.max-width-55 .sleeve{max-width:55%;margin-left:auto;margin-right:auto}.container.max-width-60 .sleeve{max-width:60%;margin-left:auto;margin-right:auto}.container.max-width-65 .sleeve{max-width:65%;margin-left:auto;margin-right:auto}.container.max-width-70 .sleeve{max-width:70%;margin-left:auto;margin-right:auto}.container.max-width-75 .sleeve{max-width:75%;margin-left:auto;margin-right:auto}.container.max-width-80 .sleeve{max-width:80%;margin-left:auto;margin-right:auto}.container.max-width-85 .sleeve{max-width:85%;margin-left:auto;margin-right:auto}.container.max-width-90 .sleeve{max-width:90%;margin-left:auto;margin-right:auto}.container.max-width-95 .sleeve{max-width:95%;margin-left:auto;margin-right:auto}.container .sleeve:before{content:\"\";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0}.container.background-color-primary:before,.container.background-color-primary:after,.container.background-color-primary .sleeve:before,.container.background-color-primary .sleeve{background-color:#2C089B;color:#FFFFFF}.container.background-color-secondary:before,.container.background-color-secondary:after,.container.background-color-secondary .sleeve:before,.container.background-color-secondary .sleeve{background-color:#2AF135;color:#FFFFFF}.container.background-color-tertiary:before,.container.background-color-tertiary:after,.container.background-color-tertiary .sleeve:before,.container.background-color-tertiary .sleeve{background-color:#FF7272;color:#FFFFFF}.container.background-color-brand-1:before,.container.background-color-brand-1:after,.container.background-color-brand-1 .sleeve:before,.container.background-color-brand-1 .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-2:before,.container.background-color-brand-2:after,.container.background-color-brand-2 .sleeve:before,.container.background-color-brand-2 .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-3:before,.container.background-color-brand-3:after,.container.background-color-brand-3 .sleeve:before,.container.background-color-brand-3 .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-4:before,.container.background-color-brand-4:after,.container.background-color-brand-4 .sleeve:before,.container.background-color-brand-4 .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-5:before,.container.background-color-brand-5:after,.container.background-color-brand-5 .sleeve:before,.container.background-color-brand-5 .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-cc-red:before,.container.background-color-brand-cc-red:after,.container.background-color-brand-cc-red .sleeve:before,.container.background-color-brand-cc-red .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-wgmf-purple:before,.container.background-color-brand-wgmf-purple:after,.container.background-color-brand-wgmf-purple .sleeve:before,.container.background-color-brand-wgmf-purple .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-gmf-green:before,.container.background-color-brand-gmf-green:after,.container.background-color-brand-gmf-green .sleeve:before,.container.background-color-brand-gmf-green .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-emf-yellow:before,.container.background-color-brand-emf-yellow:after,.container.background-color-brand-emf-yellow .sleeve:before,.container.background-color-brand-emf-yellow .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-c4c-orange:before,.container.background-color-brand-c4c-orange:after,.container.background-color-brand-c4c-orange .sleeve:before,.container.background-color-brand-c4c-orange .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-afa-pink:before,.container.background-color-brand-afa-pink:after,.container.background-color-brand-afa-pink .sleeve:before,.container.background-color-brand-afa-pink .sleeve{background-color:#BF387D;color:#FFFFFF}.container.background-color-brand-mhf-turquoise:before,.container.background-color-brand-mhf-turquoise:after,.container.background-color-brand-mhf-turquoise .sleeve:before,.container.background-color-brand-mhf-turquoise .sleeve{background-color:#62CFC9;color:#FFFFFF}.container.background-color-brand-grey:before,.container.background-color-brand-grey:after,.container.background-color-brand-grey .sleeve:before,.container.background-color-brand-grey .sleeve{background-color:#CBC8C8;color:#FFFFFF}.container.background-color-white:before,.container.background-color-white:after,.container.background-color-white .sleeve:before,.container.background-color-white .sleeve{background-color:#FFFFFF;color:#000000}.container.background-color-black:before,.container.background-color-black:after,.container.background-color-black .sleeve:before,.container.background-color-black .sleeve{background-color:#000000;color:#FFFFFF}.container.background-color-grey-extra-light:before,.container.background-color-grey-extra-light:after,.container.background-color-grey-extra-light .sleeve:before,.container.background-color-grey-extra-light .sleeve{background-color:#D7D7D7;color:#000000}.container.background-color-grey-light:before,.container.background-color-grey-light:after,.container.background-color-grey-light .sleeve:before,.container.background-color-grey-light .sleeve{background-color:#E8E8E8;color:#000000}.container.background-color-grey-medium:before,.container.background-color-grey-medium:after,.container.background-color-grey-medium .sleeve:before,.container.background-color-grey-medium .sleeve{background-color:#8A8A8A;color:#FFFFFF}.container.background-color-grey-dark:before,.container.background-color-grey-dark:after,.container.background-color-grey-dark .sleeve:before,.container.background-color-grey-dark .sleeve{background-color:#4A4A4A;color:#FFFFFF}.container.background-color-brand-6:before,.container.background-color-brand-6:after,.container.background-color-brand-6 .sleeve:before,.container.background-color-brand-6 .sleeve{background-color:#62CFC9;color:#FFFFFF}";
4
4
  const BiggivePageSectionStyle0 = biggivePageSectionCss;
5
5
 
6
6
  const BiggivePageSection$1 = /*@__PURE__*/ proxyCustomElement(class BiggivePageSection extends HTMLElement {
@@ -1 +1 @@
1
- {"file":"biggive-page-section.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,myQAAmyQ,CAAC;AACl0Q,iCAAe,qBAAqB;;MCMvBA,oBAAkB;;;;;0BAIA,CAAC;+BAKI,UAAU;kCAKP,UAAU;;wBAUpB,GAAG;gCAKM,KAAK;;IAEzC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,sBAAsB;gBACtB,IAAI,CAAC,QAAQ;gBACb,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,oBAAoB;gBACpB,IAAI,CAAC,YAAY;gBACjB,aAAa;gBACb,IAAI,CAAC,eAAe;gBACpB,gBAAgB;gBAChB,IAAI,CAAC,kBAAkB;iBACtB,IAAI,CAAC,gBAAgB,GAAG,aAAa,GAAG,EAAE,CAAC,IAG9C,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggivePageSection"],"sources":["src/components/biggive-page-section/biggive-page-section.scss?tag=biggive-page-section&encapsulation=shadow","src/components/biggive-page-section/biggive-page-section.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n overflow: hidden;\n position: relative;\n text-align: center;\n .sleeve {\n @include section-container();\n padding: $spacer-4;\n }\n}\n\n.container.full-bleed {\n // from https://stackoverflow.com/questions/22083157/extend-background-color-of-header-beyond-container-with-css\n box-shadow: 0 0 0 100vmax $colour-primary-blue;\n clip-path: inset(0 -100vmax);\n}\n\n.container.style-top-crop-right:before {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(0 0, 0% 100%, 100% 100%);\n transform: translateY(1px);\n}\n\n.container.style-top-crop-left:before {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0 100%);\n transform: translateY(1px);\n}\n\n.container.style-bottom-crop-right:after {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(0 0, 100% 0, 0 100%);\n transform: translateY(-1px);\n}\n\n.container.style-bottom-crop-left:after {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(0 0, 100% 0, 100% 100%);\n transform: translateY(-1px);\n}\n\n.container .sleeve {\n position: relative;\n text-align: left;\n}\n\n.container.max-width-10 .sleeve { @include max-width-10(); }\n.container.max-width-15 .sleeve { @include max-width-15(); }\n.container.max-width-20 .sleeve { @include max-width-20(); }\n.container.max-width-25 .sleeve { @include max-width-25(); }\n.container.max-width-30 .sleeve { @include max-width-30(); }\n.container.max-width-35 .sleeve { @include max-width-35(); }\n.container.max-width-40 .sleeve { @include max-width-40(); }\n.container.max-width-45 .sleeve { @include max-width-45(); }\n.container.max-width-50 .sleeve { @include max-width-50(); }\n.container.max-width-55 .sleeve { @include max-width-55(); }\n.container.max-width-60 .sleeve { @include max-width-60(); }\n.container.max-width-65 .sleeve { @include max-width-65(); }\n.container.max-width-70 .sleeve { @include max-width-70(); }\n.container.max-width-75 .sleeve { @include max-width-75(); }\n.container.max-width-80 .sleeve { @include max-width-80(); }\n.container.max-width-85 .sleeve { @include max-width-85(); }\n.container.max-width-90 .sleeve { @include max-width-90(); }\n.container.max-width-95 .sleeve { @include max-width-95(); }\n\n\n\n.container .sleeve:before {\n content: '';\n position: absolute;\n z-index: -1;\n left: 50%;\n transform: translateX(-50%);\n width: 100vw;\n top: 0;\n bottom: 0;\n}\n\n@each $brand, $colour in $colours {\n .container.background-color-#{$brand}:before,\n .container.background-color-#{$brand}:after,\n .container.background-color-#{$brand} .sleeve:before,\n .container.background-color-#{$brand} .sleeve {\n background-color: $colour;\n @if $brand == 'white' or $brand == 'grey-extra-light' or $brand == 'grey-light' {\n color: $colour-black;\n } @else {\n color: $colour-white;\n }\n }\n}\n\n.container.background-color-brand-6:before,\n.container.background-color-brand-6:after,\n.container.background-color-brand-6 .sleeve:before,\n.container.background-color-brand-6 .sleeve {\n background-color: $colour-brand-mhf-turquoise;\n color: $colour-white;\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-page-section',\n styleUrl: 'biggive-page-section.scss',\n shadow: true,\n})\nexport class BiggivePageSection {\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Section style top\n */\n @Prop() sectionStyleTop: string = 'straight';\n\n /**\n * Section style bottom\n */\n @Prop() sectionStyleBottom: string = 'straight';\n\n /**\n * Colour scheme\n */\n @Prop() colourScheme: string;\n\n /**\n * Width\n */\n @Prop() maxWidth: number = 100;\n\n /**\n * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.\n */\n @Prop() primaryFullBleed: boolean = false;\n\n render() {\n return (\n <div\n class={\n 'container max-width-' +\n this.maxWidth +\n ' space-below-' +\n this.spaceBelow +\n ' background-color-' +\n this.colourScheme +\n ' style-top-' +\n this.sectionStyleTop +\n ' style-bottom-' +\n this.sectionStyleBottom +\n (this.primaryFullBleed ? ' full-bleed' : '')\n }\n >\n <div class=\"sleeve\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1
+ {"file":"biggive-page-section.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,02QAA02Q,CAAC;AACz4Q,iCAAe,qBAAqB;;MCMvBA,oBAAkB;;;;;0BAIA,CAAC;+BAKI,UAAU;kCAKP,UAAU;;wBAUpB,GAAG;gCAKM,KAAK;;IAEzC,MAAM;QACJ,QACE,4DACE,KAAK,EACH,sBAAsB;gBACtB,IAAI,CAAC,QAAQ;gBACb,eAAe;gBACf,IAAI,CAAC,UAAU;gBACf,oBAAoB;gBACpB,IAAI,CAAC,YAAY;gBACjB,aAAa;gBACb,IAAI,CAAC,eAAe;gBACpB,gBAAgB;gBAChB,IAAI,CAAC,kBAAkB;iBACtB,IAAI,CAAC,gBAAgB,GAAG,aAAa,GAAG,EAAE,CAAC,IAG9C,4DAAK,KAAK,EAAC,QAAQ,IACjB,8DAAa,CACT,CACF,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BiggivePageSection"],"sources":["src/components/biggive-page-section/biggive-page-section.scss?tag=biggive-page-section&encapsulation=shadow","src/components/biggive-page-section/biggive-page-section.tsx"],"sourcesContent":["@include spacers();\n\n:host {\n display: contents;\n}\n\n.container {\n @include standard-font();\n overflow: hidden;\n position: relative;\n text-align: center;\n .sleeve {\n @include section-container();\n padding: $spacer-4;\n\n @media screen and (max-width: $screen-desktop-max) {\n // similar to e.g. biggive-hero-image which was set to use $spacer-3 first.\n padding: $spacer-3;\n }\n }\n}\n\n.container.full-bleed {\n // from https://stackoverflow.com/questions/22083157/extend-background-color-of-header-beyond-container-with-css\n box-shadow: 0 0 0 100vmax $colour-primary-blue;\n clip-path: inset(0 -100vmax);\n}\n\n.container.style-top-crop-right:before {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(0 0, 0% 100%, 100% 100%);\n transform: translateY(1px);\n}\n\n.container.style-top-crop-left:before {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0 100%);\n transform: translateY(1px);\n}\n\n.container.style-bottom-crop-right:after {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(0 0, 100% 0, 0 100%);\n transform: translateY(-1px);\n}\n\n.container.style-bottom-crop-left:after {\n content: '';\n display: block;\n height: 75px;\n clip-path: polygon(0 0, 100% 0, 100% 100%);\n transform: translateY(-1px);\n}\n\n.container .sleeve {\n position: relative;\n text-align: left;\n}\n\n.container.max-width-10 .sleeve { @include max-width-10(); }\n.container.max-width-15 .sleeve { @include max-width-15(); }\n.container.max-width-20 .sleeve { @include max-width-20(); }\n.container.max-width-25 .sleeve { @include max-width-25(); }\n.container.max-width-30 .sleeve { @include max-width-30(); }\n.container.max-width-35 .sleeve { @include max-width-35(); }\n.container.max-width-40 .sleeve { @include max-width-40(); }\n.container.max-width-45 .sleeve { @include max-width-45(); }\n.container.max-width-50 .sleeve { @include max-width-50(); }\n.container.max-width-55 .sleeve { @include max-width-55(); }\n.container.max-width-60 .sleeve { @include max-width-60(); }\n.container.max-width-65 .sleeve { @include max-width-65(); }\n.container.max-width-70 .sleeve { @include max-width-70(); }\n.container.max-width-75 .sleeve { @include max-width-75(); }\n.container.max-width-80 .sleeve { @include max-width-80(); }\n.container.max-width-85 .sleeve { @include max-width-85(); }\n.container.max-width-90 .sleeve { @include max-width-90(); }\n.container.max-width-95 .sleeve { @include max-width-95(); }\n\n\n\n.container .sleeve:before {\n content: '';\n position: absolute;\n z-index: -1;\n left: 50%;\n transform: translateX(-50%);\n width: 100vw;\n top: 0;\n bottom: 0;\n}\n\n@each $brand, $colour in $colours {\n .container.background-color-#{$brand}:before,\n .container.background-color-#{$brand}:after,\n .container.background-color-#{$brand} .sleeve:before,\n .container.background-color-#{$brand} .sleeve {\n background-color: $colour;\n @if $brand == 'white' or $brand == 'grey-extra-light' or $brand == 'grey-light' {\n color: $colour-black;\n } @else {\n color: $colour-white;\n }\n }\n}\n\n.container.background-color-brand-6:before,\n.container.background-color-brand-6:after,\n.container.background-color-brand-6 .sleeve:before,\n.container.background-color-brand-6 .sleeve {\n background-color: $colour-brand-mhf-turquoise;\n color: $colour-white;\n}\n\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n tag: 'biggive-page-section',\n styleUrl: 'biggive-page-section.scss',\n shadow: true,\n})\nexport class BiggivePageSection {\n /**\n * Space below component\n */\n @Prop() spaceBelow: number = 0;\n\n /**\n * Section style top\n */\n @Prop() sectionStyleTop: string = 'straight';\n\n /**\n * Section style bottom\n */\n @Prop() sectionStyleBottom: string = 'straight';\n\n /**\n * Colour scheme\n */\n @Prop() colourScheme: string;\n\n /**\n * Width\n */\n @Prop() maxWidth: number = 100;\n\n /**\n * Bleeds the primary brand colour to the left and right edge of the viewport, even if used within a containing block element.\n */\n @Prop() primaryFullBleed: boolean = false;\n\n render() {\n return (\n <div\n class={\n 'container max-width-' +\n this.maxWidth +\n ' space-below-' +\n this.spaceBelow +\n ' background-color-' +\n this.colourScheme +\n ' style-top-' +\n this.sectionStyleTop +\n ' style-bottom-' +\n this.sectionStyleBottom +\n (this.primaryFullBleed ? ' full-bleed' : '')\n }\n >\n <div class=\"sleeve\">\n <slot></slot>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
@@ -1202,7 +1202,7 @@ const BiggivePageColumns = class {
1202
1202
  };
1203
1203
  BiggivePageColumns.style = BiggivePageColumnsStyle0;
1204
1204
 
1205
- const biggivePageSectionCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;overflow:hidden;position:relative;text-align:center}.container .sleeve{max-width:1200px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;padding:30px}.container.full-bleed{box-shadow:0 0 0 100vmax #2C089B;clip-path:inset(0 -100vmax)}.container.style-top-crop-right:before{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 0% 100%, 100% 100%);transform:translateY(1px)}.container.style-top-crop-left:before{content:\"\";display:block;height:75px;clip-path:polygon(100% 0, 100% 0%, 100% 100%, 0 100%);transform:translateY(1px)}.container.style-bottom-crop-right:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 0 100%);transform:translateY(-1px)}.container.style-bottom-crop-left:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 100% 100%);transform:translateY(-1px)}.container .sleeve{position:relative;text-align:left}.container.max-width-10 .sleeve{max-width:10%;margin-left:auto;margin-right:auto}.container.max-width-15 .sleeve{max-width:15%;margin-left:auto;margin-right:auto}.container.max-width-20 .sleeve{max-width:20%;margin-left:auto;margin-right:auto}.container.max-width-25 .sleeve{max-width:25%;margin-left:auto;margin-right:auto}.container.max-width-30 .sleeve{max-width:30%;margin-left:auto;margin-right:auto}.container.max-width-35 .sleeve{max-width:35%;margin-left:auto;margin-right:auto}.container.max-width-40 .sleeve{max-width:40%;margin-left:auto;margin-right:auto}.container.max-width-45 .sleeve{max-width:45%;margin-left:auto;margin-right:auto}.container.max-width-50 .sleeve{max-width:50%;margin-left:auto;margin-right:auto}.container.max-width-55 .sleeve{max-width:55%;margin-left:auto;margin-right:auto}.container.max-width-60 .sleeve{max-width:60%;margin-left:auto;margin-right:auto}.container.max-width-65 .sleeve{max-width:65%;margin-left:auto;margin-right:auto}.container.max-width-70 .sleeve{max-width:70%;margin-left:auto;margin-right:auto}.container.max-width-75 .sleeve{max-width:75%;margin-left:auto;margin-right:auto}.container.max-width-80 .sleeve{max-width:80%;margin-left:auto;margin-right:auto}.container.max-width-85 .sleeve{max-width:85%;margin-left:auto;margin-right:auto}.container.max-width-90 .sleeve{max-width:90%;margin-left:auto;margin-right:auto}.container.max-width-95 .sleeve{max-width:95%;margin-left:auto;margin-right:auto}.container .sleeve:before{content:\"\";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0}.container.background-color-primary:before,.container.background-color-primary:after,.container.background-color-primary .sleeve:before,.container.background-color-primary .sleeve{background-color:#2C089B;color:#FFFFFF}.container.background-color-secondary:before,.container.background-color-secondary:after,.container.background-color-secondary .sleeve:before,.container.background-color-secondary .sleeve{background-color:#2AF135;color:#FFFFFF}.container.background-color-tertiary:before,.container.background-color-tertiary:after,.container.background-color-tertiary .sleeve:before,.container.background-color-tertiary .sleeve{background-color:#FF7272;color:#FFFFFF}.container.background-color-brand-1:before,.container.background-color-brand-1:after,.container.background-color-brand-1 .sleeve:before,.container.background-color-brand-1 .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-2:before,.container.background-color-brand-2:after,.container.background-color-brand-2 .sleeve:before,.container.background-color-brand-2 .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-3:before,.container.background-color-brand-3:after,.container.background-color-brand-3 .sleeve:before,.container.background-color-brand-3 .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-4:before,.container.background-color-brand-4:after,.container.background-color-brand-4 .sleeve:before,.container.background-color-brand-4 .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-5:before,.container.background-color-brand-5:after,.container.background-color-brand-5 .sleeve:before,.container.background-color-brand-5 .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-cc-red:before,.container.background-color-brand-cc-red:after,.container.background-color-brand-cc-red .sleeve:before,.container.background-color-brand-cc-red .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-wgmf-purple:before,.container.background-color-brand-wgmf-purple:after,.container.background-color-brand-wgmf-purple .sleeve:before,.container.background-color-brand-wgmf-purple .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-gmf-green:before,.container.background-color-brand-gmf-green:after,.container.background-color-brand-gmf-green .sleeve:before,.container.background-color-brand-gmf-green .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-emf-yellow:before,.container.background-color-brand-emf-yellow:after,.container.background-color-brand-emf-yellow .sleeve:before,.container.background-color-brand-emf-yellow .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-c4c-orange:before,.container.background-color-brand-c4c-orange:after,.container.background-color-brand-c4c-orange .sleeve:before,.container.background-color-brand-c4c-orange .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-afa-pink:before,.container.background-color-brand-afa-pink:after,.container.background-color-brand-afa-pink .sleeve:before,.container.background-color-brand-afa-pink .sleeve{background-color:#BF387D;color:#FFFFFF}.container.background-color-brand-mhf-turquoise:before,.container.background-color-brand-mhf-turquoise:after,.container.background-color-brand-mhf-turquoise .sleeve:before,.container.background-color-brand-mhf-turquoise .sleeve{background-color:#62CFC9;color:#FFFFFF}.container.background-color-brand-grey:before,.container.background-color-brand-grey:after,.container.background-color-brand-grey .sleeve:before,.container.background-color-brand-grey .sleeve{background-color:#CBC8C8;color:#FFFFFF}.container.background-color-white:before,.container.background-color-white:after,.container.background-color-white .sleeve:before,.container.background-color-white .sleeve{background-color:#FFFFFF;color:#000000}.container.background-color-black:before,.container.background-color-black:after,.container.background-color-black .sleeve:before,.container.background-color-black .sleeve{background-color:#000000;color:#FFFFFF}.container.background-color-grey-extra-light:before,.container.background-color-grey-extra-light:after,.container.background-color-grey-extra-light .sleeve:before,.container.background-color-grey-extra-light .sleeve{background-color:#D7D7D7;color:#000000}.container.background-color-grey-light:before,.container.background-color-grey-light:after,.container.background-color-grey-light .sleeve:before,.container.background-color-grey-light .sleeve{background-color:#E8E8E8;color:#000000}.container.background-color-grey-medium:before,.container.background-color-grey-medium:after,.container.background-color-grey-medium .sleeve:before,.container.background-color-grey-medium .sleeve{background-color:#8A8A8A;color:#FFFFFF}.container.background-color-grey-dark:before,.container.background-color-grey-dark:after,.container.background-color-grey-dark .sleeve:before,.container.background-color-grey-dark .sleeve{background-color:#4A4A4A;color:#FFFFFF}.container.background-color-brand-6:before,.container.background-color-brand-6:after,.container.background-color-brand-6 .sleeve:before,.container.background-color-brand-6 .sleeve{background-color:#62CFC9;color:#FFFFFF}";
1205
+ const biggivePageSectionCss = "a{color:inherit;text-decoration:underline}a:hover{text-decoration:none}.space-above-0{margin-top:0}.space-above-1{margin-top:5px}.space-above-2{margin-top:10px}.space-above-3{margin-top:15px}.space-above-4{margin-top:30px}.space-above-5{margin-top:45px}.space-above-6{margin-top:60px}.space-below-0{margin-bottom:0}.space-below-1{margin-bottom:5px}.space-below-2{margin-bottom:10px}.space-below-3{margin-bottom:15px}.space-below-4{margin-bottom:30px}.space-below-5{margin-bottom:45px}.space-below-6{margin-bottom:60px}:host{display:contents}.container{font-family:\"Euclid Triangle\", sans-serif;font-size:17px;line-height:24px;overflow:hidden;position:relative;text-align:center}.container .sleeve{max-width:1200px;padding-left:15px;padding-right:15px;margin-left:auto;margin-right:auto;padding:30px}@media screen and (max-width: 1200px){.container .sleeve{padding:15px}}.container.full-bleed{box-shadow:0 0 0 100vmax #2C089B;clip-path:inset(0 -100vmax)}.container.style-top-crop-right:before{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 0% 100%, 100% 100%);transform:translateY(1px)}.container.style-top-crop-left:before{content:\"\";display:block;height:75px;clip-path:polygon(100% 0, 100% 0%, 100% 100%, 0 100%);transform:translateY(1px)}.container.style-bottom-crop-right:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 0 100%);transform:translateY(-1px)}.container.style-bottom-crop-left:after{content:\"\";display:block;height:75px;clip-path:polygon(0 0, 100% 0, 100% 100%);transform:translateY(-1px)}.container .sleeve{position:relative;text-align:left}.container.max-width-10 .sleeve{max-width:10%;margin-left:auto;margin-right:auto}.container.max-width-15 .sleeve{max-width:15%;margin-left:auto;margin-right:auto}.container.max-width-20 .sleeve{max-width:20%;margin-left:auto;margin-right:auto}.container.max-width-25 .sleeve{max-width:25%;margin-left:auto;margin-right:auto}.container.max-width-30 .sleeve{max-width:30%;margin-left:auto;margin-right:auto}.container.max-width-35 .sleeve{max-width:35%;margin-left:auto;margin-right:auto}.container.max-width-40 .sleeve{max-width:40%;margin-left:auto;margin-right:auto}.container.max-width-45 .sleeve{max-width:45%;margin-left:auto;margin-right:auto}.container.max-width-50 .sleeve{max-width:50%;margin-left:auto;margin-right:auto}.container.max-width-55 .sleeve{max-width:55%;margin-left:auto;margin-right:auto}.container.max-width-60 .sleeve{max-width:60%;margin-left:auto;margin-right:auto}.container.max-width-65 .sleeve{max-width:65%;margin-left:auto;margin-right:auto}.container.max-width-70 .sleeve{max-width:70%;margin-left:auto;margin-right:auto}.container.max-width-75 .sleeve{max-width:75%;margin-left:auto;margin-right:auto}.container.max-width-80 .sleeve{max-width:80%;margin-left:auto;margin-right:auto}.container.max-width-85 .sleeve{max-width:85%;margin-left:auto;margin-right:auto}.container.max-width-90 .sleeve{max-width:90%;margin-left:auto;margin-right:auto}.container.max-width-95 .sleeve{max-width:95%;margin-left:auto;margin-right:auto}.container .sleeve:before{content:\"\";position:absolute;z-index:-1;left:50%;transform:translateX(-50%);width:100vw;top:0;bottom:0}.container.background-color-primary:before,.container.background-color-primary:after,.container.background-color-primary .sleeve:before,.container.background-color-primary .sleeve{background-color:#2C089B;color:#FFFFFF}.container.background-color-secondary:before,.container.background-color-secondary:after,.container.background-color-secondary .sleeve:before,.container.background-color-secondary .sleeve{background-color:#2AF135;color:#FFFFFF}.container.background-color-tertiary:before,.container.background-color-tertiary:after,.container.background-color-tertiary .sleeve:before,.container.background-color-tertiary .sleeve{background-color:#FF7272;color:#FFFFFF}.container.background-color-brand-1:before,.container.background-color-brand-1:after,.container.background-color-brand-1 .sleeve:before,.container.background-color-brand-1 .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-2:before,.container.background-color-brand-2:after,.container.background-color-brand-2 .sleeve:before,.container.background-color-brand-2 .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-3:before,.container.background-color-brand-3:after,.container.background-color-brand-3 .sleeve:before,.container.background-color-brand-3 .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-4:before,.container.background-color-brand-4:after,.container.background-color-brand-4 .sleeve:before,.container.background-color-brand-4 .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-5:before,.container.background-color-brand-5:after,.container.background-color-brand-5 .sleeve:before,.container.background-color-brand-5 .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-cc-red:before,.container.background-color-brand-cc-red:after,.container.background-color-brand-cc-red .sleeve:before,.container.background-color-brand-cc-red .sleeve{background-color:#B30510;color:#FFFFFF}.container.background-color-brand-wgmf-purple:before,.container.background-color-brand-wgmf-purple:after,.container.background-color-brand-wgmf-purple .sleeve:before,.container.background-color-brand-wgmf-purple .sleeve{background-color:#6E0887;color:#FFFFFF}.container.background-color-brand-gmf-green:before,.container.background-color-brand-gmf-green:after,.container.background-color-brand-gmf-green .sleeve:before,.container.background-color-brand-gmf-green .sleeve{background-color:#50B400;color:#FFFFFF}.container.background-color-brand-emf-yellow:before,.container.background-color-brand-emf-yellow:after,.container.background-color-brand-emf-yellow .sleeve:before,.container.background-color-brand-emf-yellow .sleeve{background-color:#FFE500;color:#FFFFFF}.container.background-color-brand-c4c-orange:before,.container.background-color-brand-c4c-orange:after,.container.background-color-brand-c4c-orange .sleeve:before,.container.background-color-brand-c4c-orange .sleeve{background-color:#F07D00;color:#FFFFFF}.container.background-color-brand-afa-pink:before,.container.background-color-brand-afa-pink:after,.container.background-color-brand-afa-pink .sleeve:before,.container.background-color-brand-afa-pink .sleeve{background-color:#BF387D;color:#FFFFFF}.container.background-color-brand-mhf-turquoise:before,.container.background-color-brand-mhf-turquoise:after,.container.background-color-brand-mhf-turquoise .sleeve:before,.container.background-color-brand-mhf-turquoise .sleeve{background-color:#62CFC9;color:#FFFFFF}.container.background-color-brand-grey:before,.container.background-color-brand-grey:after,.container.background-color-brand-grey .sleeve:before,.container.background-color-brand-grey .sleeve{background-color:#CBC8C8;color:#FFFFFF}.container.background-color-white:before,.container.background-color-white:after,.container.background-color-white .sleeve:before,.container.background-color-white .sleeve{background-color:#FFFFFF;color:#000000}.container.background-color-black:before,.container.background-color-black:after,.container.background-color-black .sleeve:before,.container.background-color-black .sleeve{background-color:#000000;color:#FFFFFF}.container.background-color-grey-extra-light:before,.container.background-color-grey-extra-light:after,.container.background-color-grey-extra-light .sleeve:before,.container.background-color-grey-extra-light .sleeve{background-color:#D7D7D7;color:#000000}.container.background-color-grey-light:before,.container.background-color-grey-light:after,.container.background-color-grey-light .sleeve:before,.container.background-color-grey-light .sleeve{background-color:#E8E8E8;color:#000000}.container.background-color-grey-medium:before,.container.background-color-grey-medium:after,.container.background-color-grey-medium .sleeve:before,.container.background-color-grey-medium .sleeve{background-color:#8A8A8A;color:#FFFFFF}.container.background-color-grey-dark:before,.container.background-color-grey-dark:after,.container.background-color-grey-dark .sleeve:before,.container.background-color-grey-dark .sleeve{background-color:#4A4A4A;color:#FFFFFF}.container.background-color-brand-6:before,.container.background-color-brand-6:after,.container.background-color-brand-6 .sleeve:before,.container.background-color-brand-6 .sleeve{background-color:#62CFC9;color:#FFFFFF}";
1206
1206
  const BiggivePageSectionStyle0 = biggivePageSectionCss;
1207
1207
 
1208
1208
  const BiggivePageSection = class {