diff --git a/packages/shared-component--app/dist/app-download.css.map b/packages/shared-component--app/dist/app-download.css.map index ba8a64df..c637dcef 100644 --- a/packages/shared-component--app/dist/app-download.css.map +++ b/packages/shared-component--app/dist/app-download.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/app-download.pcss"],"names":[],"mappings":"AAEA,qBACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,qCACE,iBACF,CAEA,4BACE,SAAU,CAEV,eAAgB,CAChB,aAAc,CACd,mBAkBF,CAhBE,0BAPF,4BAQI,mBAeJ,CAdE,CAEA,wBAXF,4BAYI,iBAWJ,CAVE,CAEA,wBAfF,4BAgBI,mBAOJ,CANE,CAEA,2BAnBF,4BAoBI,wBAGJ,CADE,CAIF,0TAME,aAKF,CAHE,wBARF,0TASI,kBAEJ,CADE,CAIA,kCACE,iBACF,CAEA,0BALF,8BAMI,SAAU,CACV,UAYJ,CAXE,CAEA,wBAVF,8BAWI,kBAAmB,CACnB,kBAOJ,CANE,CAEA,2BAfF,8BAgBI,kBAAmB,CACnB,SAEJ,CADE,CAGF,0DACE,qBAKF,CAHE,0BAHF,0DAII,gBAEJ,CADE,CAGF,2BACE,aAaF,CAXE,uCACE,eACF,CAEA,wBAPF,2BAQI,aAMJ,CALE,CAEA,wBAXF,2BAYI,cAEJ,CADE,CAGF,4BACE,iBAA6B,CAC7B,SACF,CAEA,2BACE,kBAA6C,CAE7C,WASF,CAPE,sCACE,eACF,CAEA,0BATF,2BAUI,oBAEJ,CADE,CAGF,0CACE,oBASF,CAPE,0BAHF,0CAII,eAMJ,CALE,CAEA,qDACE,cACF,CAGF,4BACE,eAA2B,CAC3B,kBASF,CAPE,0BAJF,4BAKI,eAMJ,CALE,CAEA,wCACE,eACF,CAIA,wBADF,uDAEI,eAEJ,CADE,CAGF,0DAEE,UACF,CAGA,4BACE,kBAA6C,CAE7C,WAAY,CACZ,iBAWF,CATE,0BANF,4BAOI,SAAU,CACV,UAAW,CACX,iBAMJ,CALE,CAEA,2BAZF,4BAaI,SAEJ,CADE,CAIF,0DACE,eAKF,CAHE,0BAHF,0DAII,iBAEJ,CADE,CAIF,wEACE,eAeF,CAbE,0BAHF,wEAII,iBAAkB,CAClB,QAAS,CACT,QAAS,CACT,UAAW,CACX,SAAU,CACV,eAOJ,CANE,CAEA,2BAZF,wEAaI,QAAS,CACT,SAEJ,CADE,CAIF,wFAGE,eACF,CAGA,kDACE,iBAAkB,CAClB,SAAU,CACV,SAAU,CACV,SAAU,CACV,WAAY,CACZ,SAAU,CAEV,SAAU,CACV,QAAS,CACT,oBAAqB,CACrB,oBAAqB,CACrB,UAwBF,CAtBE,0BAdF,kDAeI,SAAU,CACV,UAAW,CACX,WAAY,CACZ,MAAO,CACP,SAiBJ,CAhBE,CAEA,wBAtBF,kDAuBI,SAaJ,CAZE,CAEA,2BA1BF,kDA2BI,SAAU,CACV,SAAU,CACV,SAAU,CACV,kBAAmB,CAInB,SAEJ,CALE,CAQF,gEACE,QAAS,CACT,UAAW,CACX,YAAa,CACb,QAsBF,CApBE,0BANF,gEAOI,SAAU,CACV,OAAQ,CACR,WAAY,CACZ,SAgBJ,CAfE,CAEA,wBAbF,gEAcI,SAYJ,CAXE,CAEA,2BAjBF,gEAkBI,UAAW,CACX,QAAS,CACT,iBAAkB,CAIlB,SAEJ,CALE,CAQF,8EAEE,SAAU,CACV,YAKF,CAHE,2BALF,8EAMI,YAEJ,CADE,CAGF,8BACE,iBAAkB,CAClB,SAAU,CACV,oBAAqB,CACrB,aACF,CAGA,uCACE,eAAgB,CAChB,WAAY,CACZ,YAAa,CAEb,iBAAkB,CAClB,0CAUF,CARE,0BARF,uCASI,eAOJ,CANE,CAEA,wBAZF,uCAaI,WAAY,CACZ,YAEJ,CADE,CAGF,4BACE,aAAc,CACd,UACF,CAGA,uDACE,iBAeF,CAbE,wBAHF,uDAII,iBAYJ,CAXE,CAEA,wBAPF,uDAQI,0BAQJ,CANE,CAEA,2BAZF,uDAaI,wBAGJ,CADE,CAIA,0BADF,yDAEI,UAAW,CACX,UAAW,CACX,cAEJ,CADE,CAGF,sDACE,aAYF,CAVE,4BAHF,sDAII,aASJ,CARE,CAEA,wBAPF,sDAQI,SAAU,CACV,UAAW,CACX,mBAAoB,CACpB,kBAEJ,CADE,CAGF,uDACE,mBAOF,CALE,wBAHF,uDAII,SAAU,CACV,mBAAoB,CACpB,kBAEJ,CADE,CAGF,sDACE,eAQF,CANE,wBAHF,sDAII,SAAU,CACV,UAAW,CACX,mBAAoB,CACpB,gBAEJ,CADE,CAGF,0CACE,iBAA6B,CAC7B,eAKF,CAHE,wBAJF,0CAKI,YAEJ,CADE","file":"app-download.css","sourcesContent":["@import \"@coopdigital/foundations-vars\";\n\n.coop-c-app-download {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-l-section + .coop-c-app-download {\n margin-top: 1.5rem;\n}\n\n.coop-c-app-download__inner {\n z-index: 1;\n\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-32) var(--spacing-16) 0;\n\n @media (--mq-small) {\n padding-bottom: var(--spacing-48);\n }\n\n @media (--mq-medium) {\n padding: var(--spacing-48) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-48) var(--spacing-24);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-64) var(--spacing-16)\n calc(var(--spacing-64) + var(--spacing-8));\n }\n}\n\n/* Remove padding when components (same colour) follow each other */\n.coop-c-app-download.coop-u-brand-membership-turquoise-lightest-bg\n + .coop-c-app-download.coop-u-brand-membership-turquoise-lightest-bg\n .coop-c-app-download__inner,\n.coop-c-app-download.coop-u-brand-membership-blue-lightest-bg\n + .coop-c-app-download.coop-u-brand-membership-blue-lightest-bg\n .coop-c-app-download__inner {\n padding-top: 0;\n\n @media (--mq-medium) {\n padding-top: var(--spacing-24);\n }\n}\n\n.coop-c-app-download__content {\n & p + p {\n margin-top: var(--spacing-24);\n }\n\n @media (--mq-small) {\n width: 62%;\n float: left;\n }\n\n @media (--mq-large) {\n max-width: 38.75rem; /* 620px */\n padding-right: var(--spacing-32);\n }\n\n @media (--mq-xlarge) {\n max-width: 43.75rem; /* 700px */\n width: 50%;\n }\n}\n\n.coop-c-app-download__media + .coop-c-app-download__content {\n padding-bottom: var(--spacing-24);\n\n @media (--mq-small) {\n padding-bottom: 0;\n }\n}\n\n.coop-c-app-download__body {\n max-width: 90%;\n\n & :last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n max-width: 85%;\n }\n\n @media (--mq-large) {\n max-width: none;\n }\n}\n\n.coop-c-app-download__title {\n margin: 0 0 var(--spacing-24);\n padding: 0;\n}\n\n.coop-c-app-download__btns {\n margin: var(--spacing-32) 0 var(--spacing-16);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-small) {\n margin: var(--spacing-48) 0 var(--spacing-24);\n }\n}\n\n.coop-c-app-download__btns .coop-btn--app {\n margin: 0 var(--spacing-16) var(--spacing-16) 0;\n\n @media (--mq-small) {\n margin-bottom: 0;\n }\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.coop-c-app-download__about {\n margin: var(--spacing-24) 0;\n font-size: var(--type-body-s);\n\n @media (--mq-small) {\n margin: var(--spacing-32) 0 0;\n }\n\n & :last-child {\n margin-bottom: 0;\n }\n}\n\n.coop-c-app-download__body + .coop-c-app-download__about {\n @media (--mq-medium) {\n margin-top: var(--spacing-48);\n }\n}\n\n.coop-c-app-download__media,\n.coop-c-app-download__picture {\n width: 100%;\n}\n\n/* All images */\n.coop-c-app-download__media {\n margin: var(--spacing-32) 0 var(--spacing-64);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n text-align: center;\n\n @media (--mq-small) {\n width: 38%;\n float: left;\n margin: var(--spacing-12) 0 0;\n }\n\n @media (--mq-xlarge) {\n width: 50%;\n }\n}\n\n/* Right-hand media wrapper only */\n.coop-c-app-download__content + .coop-c-app-download__media {\n margin-top: var(--spacing-48);\n\n @media (--mq-small) {\n margin-top: var(--spacing-12);\n }\n}\n\n/* Right-hand media wrapper only, aligned to bottom */\n.coop-c-app-download__content + .coop-c-app-download__media--align-bottom {\n margin-bottom: 0;\n\n @media (--mq-small) {\n position: absolute;\n bottom: 0;\n left: 62%;\n float: none;\n width: 38%;\n max-width: 648px;\n }\n\n @media (--mq-xlarge) {\n left: 50%;\n width: 50%;\n }\n}\n\n/* Right-hand image only */\n.coop-c-app-download__content\n + .coop-c-app-download__media\n .coop-c-app-download__picture {\n max-width: 550px;\n}\n\n/* Connector full-width repeater */\n.coop-c-app-download__media[class*=\"-stroke\"]:after {\n position: absolute;\n z-index: 0;\n top: 205px;\n right: 50%;\n bottom: auto;\n left: auto;\n\n width: 50%;\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n\n @media (--mq-small) {\n top: 142px;\n right: auto;\n bottom: auto;\n left: 0;\n width: 25%;\n }\n\n @media (--mq-medium) {\n top: 205px;\n }\n\n @media (--mq-xlarge) {\n right: 50%;\n left: auto;\n width: 50%;\n margin-right: 320px;\n }\n\n @media (--mq-xlarge) {\n top: 261px;\n }\n}\n\n/* Connector full-width repeater (right-hand image only) */\n.coop-c-app-download__content + .coop-c-app-download__media:after {\n top: auto;\n right: auto;\n bottom: 205px;\n left: 50%;\n\n @media (--mq-small) {\n top: 142px;\n right: 0;\n bottom: auto;\n left: auto;\n }\n\n @media (--mq-medium) {\n top: 205px;\n }\n\n @media (--mq-xlarge) {\n right: auto;\n left: 50%;\n margin-left: 320px;\n }\n\n @media (--mq-xlarge) {\n top: 261px;\n }\n}\n\n/* Connector full-width repeater (right-hand image only, aligned to bottom) */\n.coop-c-app-download__content\n + .coop-c-app-download__media--align-bottom:after {\n width: 50%;\n bottom: 285px;\n\n @media (--mq-xlarge) {\n display: none;\n }\n}\n\n.coop-c-app-download__picture {\n position: relative;\n z-index: 1;\n display: inline-block;\n margin: 0 auto;\n}\n\n/* iPhone handset with shadow */\n.coop-c-app-download__picture--handset {\n overflow: hidden;\n width: 120px;\n height: 260px;\n\n border-radius: 8px;\n box-shadow: 0 4px 16px 0 rgba(40, 40, 40, 0.15);\n\n @media (--mq-small) {\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n width: 210px;\n height: 455px;\n }\n}\n\n.coop-c-app-download__image {\n display: block;\n width: 100%;\n}\n\n/* Adjust for \"mini\" (no image) variant */\n.coop-c-app-download--mini .coop-c-app-download__inner {\n padding: var(--spacing-32) var(--spacing-16);\n\n @media (--mq-medium) {\n padding: var(--spacing-32) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-32) var(--spacing-24)\n calc(var(--spacing-32) + var(--spacing-8));\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-32) var(--spacing-16)\n calc(var(--spacing-32) + var(--spacing-8));\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__content {\n @media (--mq-small) {\n float: none;\n width: auto;\n max-width: none;\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__body {\n max-width: 70%;\n\n @media (--mq-xsmall) {\n max-width: 90%;\n }\n\n @media (--mq-large) {\n width: 50%;\n float: left;\n max-width: 28.875rem; /* 462px */\n padding-right: var(--spacing-48);\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__title {\n margin-bottom: var(--spacing-8);\n\n @media (--mq-large) {\n width: 50%;\n max-width: 28.875rem; /* 462px */\n padding-right: var(--spacing-48);\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__btns {\n margin: var(--spacing-16) 0 0 0;\n\n @media (--mq-large) {\n width: 50%;\n float: left;\n max-width: 28.875rem; /* 462px */\n margin-top: -38px;\n }\n}\n\n.coop-c-app-download--mini .coop-btn--app {\n margin-top: var(--spacing-12);\n margin-bottom: 0;\n\n @media (--mq-large) {\n margin-top: 0;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/app-download.pcss"],"names":[],"mappings":"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","file":"app-download.css","sourcesContent":["@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-app-download {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-l-section + .coop-c-app-download {\n margin-top: 1.5rem;\n}\n\n.coop-c-app-download__inner {\n z-index: 1;\n\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-32) var(--spacing-16) 0;\n\n @media (--mq-small) {\n padding-bottom: var(--spacing-48);\n }\n\n @media (--mq-medium) {\n padding: var(--spacing-48) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-48) var(--spacing-24);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-64) var(--spacing-16)\n calc(var(--spacing-64) + var(--spacing-8));\n }\n}\n\n/* Remove padding when components (same colour) follow each other */\n.coop-c-app-download.coop-u-brand-membership-turquoise-lightest-bg\n + .coop-c-app-download.coop-u-brand-membership-turquoise-lightest-bg\n .coop-c-app-download__inner,\n.coop-c-app-download.coop-u-brand-membership-blue-lightest-bg\n + .coop-c-app-download.coop-u-brand-membership-blue-lightest-bg\n .coop-c-app-download__inner {\n padding-top: 0;\n\n @media (--mq-medium) {\n padding-top: var(--spacing-24);\n }\n}\n\n.coop-c-app-download__content {\n & p + p {\n margin-top: var(--spacing-24);\n }\n\n @media (--mq-small) {\n width: 62%;\n float: left;\n }\n\n @media (--mq-large) {\n max-width: 38.75rem; /* 620px */\n padding-right: var(--spacing-32);\n }\n\n @media (--mq-xlarge) {\n max-width: 43.75rem; /* 700px */\n width: 50%;\n }\n}\n\n.coop-c-app-download__media + .coop-c-app-download__content {\n padding-bottom: var(--spacing-24);\n\n @media (--mq-small) {\n padding-bottom: 0;\n }\n}\n\n.coop-c-app-download__body {\n max-width: 90%;\n\n & :last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n max-width: 85%;\n }\n\n @media (--mq-large) {\n max-width: none;\n }\n}\n\n.coop-c-app-download__title {\n margin: 0 0 var(--spacing-24);\n padding: 0;\n}\n\n.coop-c-app-download__btns {\n margin: var(--spacing-32) 0 var(--spacing-16);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-small) {\n margin: var(--spacing-48) 0 var(--spacing-24);\n }\n}\n\n.coop-c-app-download__btns .coop-btn--app {\n margin: 0 var(--spacing-16) var(--spacing-16) 0;\n\n @media (--mq-small) {\n margin-bottom: 0;\n }\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.coop-c-app-download__about {\n margin: var(--spacing-24) 0;\n font-size: var(--type-body-s);\n\n @media (--mq-small) {\n margin: var(--spacing-32) 0 0;\n }\n\n & :last-child {\n margin-bottom: 0;\n }\n}\n\n.coop-c-app-download__body + .coop-c-app-download__about {\n @media (--mq-medium) {\n margin-top: var(--spacing-48);\n }\n}\n\n.coop-c-app-download__media,\n.coop-c-app-download__picture {\n width: 100%;\n}\n\n/* All images */\n.coop-c-app-download__media {\n margin: var(--spacing-32) 0 var(--spacing-64);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n text-align: center;\n\n @media (--mq-small) {\n width: 38%;\n float: left;\n margin: var(--spacing-12) 0 0;\n }\n\n @media (--mq-xlarge) {\n width: 50%;\n }\n}\n\n/* Right-hand media wrapper only */\n.coop-c-app-download__content + .coop-c-app-download__media {\n margin-top: var(--spacing-48);\n\n @media (--mq-small) {\n margin-top: var(--spacing-12);\n }\n}\n\n/* Right-hand media wrapper only, aligned to bottom */\n.coop-c-app-download__content + .coop-c-app-download__media--align-bottom {\n margin-bottom: 0;\n\n @media (--mq-small) {\n position: absolute;\n bottom: 0;\n left: 62%;\n float: none;\n width: 38%;\n max-width: 648px;\n }\n\n @media (--mq-xlarge) {\n left: 50%;\n width: 50%;\n }\n}\n\n/* Right-hand image only */\n.coop-c-app-download__content\n + .coop-c-app-download__media\n .coop-c-app-download__picture {\n max-width: 550px;\n}\n\n/* Connector full-width repeater */\n.coop-c-app-download__media[class*=\"-stroke\"]:after {\n position: absolute;\n z-index: 0;\n top: 205px;\n right: 50%;\n bottom: auto;\n left: auto;\n\n width: 50%;\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n\n @media (--mq-small) {\n top: 142px;\n right: auto;\n bottom: auto;\n left: 0;\n width: 25%;\n }\n\n @media (--mq-medium) {\n top: 205px;\n }\n\n @media (--mq-xlarge) {\n right: 50%;\n left: auto;\n width: 50%;\n margin-right: 320px;\n }\n\n @media (--mq-xlarge) {\n top: 261px;\n }\n}\n\n/* Connector full-width repeater (right-hand image only) */\n.coop-c-app-download__content + .coop-c-app-download__media:after {\n top: auto;\n right: auto;\n bottom: 205px;\n left: 50%;\n\n @media (--mq-small) {\n top: 142px;\n right: 0;\n bottom: auto;\n left: auto;\n }\n\n @media (--mq-medium) {\n top: 205px;\n }\n\n @media (--mq-xlarge) {\n right: auto;\n left: 50%;\n margin-left: 320px;\n }\n\n @media (--mq-xlarge) {\n top: 261px;\n }\n}\n\n/* Connector full-width repeater (right-hand image only, aligned to bottom) */\n.coop-c-app-download__content\n + .coop-c-app-download__media--align-bottom:after {\n width: 50%;\n bottom: 285px;\n\n @media (--mq-xlarge) {\n display: none;\n }\n}\n\n.coop-c-app-download__picture {\n position: relative;\n z-index: 1;\n display: inline-block;\n margin: 0 auto;\n}\n\n/* iPhone handset with shadow */\n.coop-c-app-download__picture--handset {\n overflow: hidden;\n width: 120px;\n height: 260px;\n\n border-radius: 8px;\n box-shadow: 0 4px 16px 0 rgba(40, 40, 40, 0.15);\n\n @media (--mq-small) {\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n width: 210px;\n height: 455px;\n }\n}\n\n.coop-c-app-download__image {\n display: block;\n width: 100%;\n}\n\n/* Adjust for \"mini\" (no image) variant */\n.coop-c-app-download--mini .coop-c-app-download__inner {\n padding: var(--spacing-32) var(--spacing-16);\n\n @media (--mq-medium) {\n padding: var(--spacing-32) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-32) var(--spacing-24)\n calc(var(--spacing-32) + var(--spacing-8));\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-32) var(--spacing-16)\n calc(var(--spacing-32) + var(--spacing-8));\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__content {\n @media (--mq-small) {\n float: none;\n width: auto;\n max-width: none;\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__body {\n max-width: 70%;\n\n @media (--mq-xsmall) {\n max-width: 90%;\n }\n\n @media (--mq-large) {\n width: 50%;\n float: left;\n max-width: 28.875rem; /* 462px */\n padding-right: var(--spacing-48);\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__title {\n margin-bottom: var(--spacing-8);\n\n @media (--mq-large) {\n width: 50%;\n max-width: 28.875rem; /* 462px */\n padding-right: var(--spacing-48);\n }\n}\n\n.coop-c-app-download--mini .coop-c-app-download__btns {\n margin: var(--spacing-16) 0 0 0;\n\n @media (--mq-large) {\n width: 50%;\n float: left;\n max-width: 28.875rem; /* 462px */\n margin-top: -38px;\n }\n}\n\n.coop-c-app-download--mini .coop-btn--app {\n margin-top: var(--spacing-12);\n margin-bottom: 0;\n\n @media (--mq-large) {\n margin-top: 0;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--app/package.json b/packages/shared-component--app/package.json index 1bffd088..b9edd9e8 100644 --- a/packages/shared-component--app/package.json +++ b/packages/shared-component--app/package.json @@ -20,16 +20,12 @@ "directory": "packages/shared-component--app" }, "devDependencies": { - "@coopdigital/foundations-buttons": "^2.7.0", - "@coopdigital/foundations-layout": "^3.3.6", - "@coopdigital/foundations-typography": "^4.2.7", - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations-buttons": "^2.6.0", + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { "@coopdigital/foundations-buttons": ">= 2.1.14 < 3", - "@coopdigital/foundations-layout": ">= 3.1.13 < 4", - "@coopdigital/foundations-typography": ">= 4.0.0 < 5", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--app/src/app-download.pcss b/packages/shared-component--app/src/app-download.pcss index e54594e5..52c3fca5 100644 --- a/packages/shared-component--app/src/app-download.pcss +++ b/packages/shared-component--app/src/app-download.pcss @@ -1,4 +1,4 @@ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-app-download { position: relative; diff --git a/packages/shared-component--breadcrumbs/dist/breadcrumbs.css.map b/packages/shared-component--breadcrumbs/dist/breadcrumbs.css.map index b49e9001..d96bf78b 100644 --- a/packages/shared-component--breadcrumbs/dist/breadcrumbs.css.map +++ b/packages/shared-component--breadcrumbs/dist/breadcrumbs.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/breadcrumbs.pcss"],"names":[],"mappings":"AAEA,oBACE,YAAa,CACb,eAA2B,CAC3B,cAA2B,CAC3B,eAAgB,CAChB,kBAKF,CAHE,0BAPF,oBAQI,aAEJ,CADE,CAGF,0BACE,oBAAqB,CACrB,gBAA2B,CAC3B,kBACF,CAEA,2BACE,iBAAkB,CAClB,SACF","file":"breadcrumbs.css","sourcesContent":["@import \"@coopdigital/foundations-vars\";\n\n.coop-c-breadcrumbs {\n display: none;\n padding: var(--spacing-8) 0;\n font-size: var(--type-sp-s);\n font-weight: 500;\n background: var(--color-grey-light);\n\n @media (--mq-small) {\n display: block;\n }\n}\n\n.coop-c-breadcrumbs__link {\n display: inline-block;\n padding: var(--spacing-4) 0;\n white-space: normal;\n}\n\n.coop-c-breadcrumbs__arrow {\n position: relative;\n top: var(--spacing-8);\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/breadcrumbs.pcss"],"names":[],"mappings":"AAEA,oBACE,YAAa,CACb,eAA2B,CAC3B,cAA2B,CAC3B,eAAgB,CAChB,kBAKF,CAHE,0BAPF,oBAQI,aAEJ,CADE,CAGF,0BACE,oBAAqB,CACrB,gBAA2B,CAC3B,kBACF,CAEA,2BACE,iBAAkB,CAClB,SACF","file":"breadcrumbs.css","sourcesContent":["@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-breadcrumbs {\n display: none;\n padding: var(--spacing-8) 0;\n font-size: var(--type-sp-s);\n font-weight: 500;\n background: var(--color-grey-light);\n\n @media (--mq-small) {\n display: block;\n }\n}\n\n.coop-c-breadcrumbs__link {\n display: inline-block;\n padding: var(--spacing-4) 0;\n white-space: normal;\n}\n\n.coop-c-breadcrumbs__arrow {\n position: relative;\n top: var(--spacing-8);\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--breadcrumbs/package.json b/packages/shared-component--breadcrumbs/package.json index dd6b4b0d..68d3ebee 100755 --- a/packages/shared-component--breadcrumbs/package.json +++ b/packages/shared-component--breadcrumbs/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--breadcrumbs" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.8 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--breadcrumbs/src/breadcrumbs.pcss b/packages/shared-component--breadcrumbs/src/breadcrumbs.pcss index 2db6a00c..55790f52 100755 --- a/packages/shared-component--breadcrumbs/src/breadcrumbs.pcss +++ b/packages/shared-component--breadcrumbs/src/breadcrumbs.pcss @@ -1,4 +1,4 @@ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-breadcrumbs { display: none; diff --git a/packages/shared-component--cooperate/dist/cooperate.css.map b/packages/shared-component--cooperate/dist/cooperate.css.map index 1ea75845..e32eccf3 100644 --- a/packages/shared-component--cooperate/dist/cooperate.css.map +++ b/packages/shared-component--cooperate/dist/cooperate.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/cooperate.pcss"],"names":[],"mappings":"AAIA,mCACE,kBAKF,CAHE,wBAHF,mCAII,kBAEJ,CADE,CAGF,6BACE,iBAAkB,CAClB,oBAAqB,CACrB,kBAWF,CATE,iCACE,iBAAkB,CAClB,SAAU,CACV,MAAO,CAEP,gBAA4B,CAC5B,eAA2B,CAC3B,UACF","file":"cooperate.css","sourcesContent":["/* Co-operate explainer */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-cooperate-explainer__title {\n font-size: var(--type-h3-s);\n\n @media (--mq-medium) {\n font-size: var(--type-h3-l);\n }\n}\n\n.coop-c-cooperate-underlined {\n position: relative;\n display: inline-block;\n margin-bottom: var(--spacing-48);\n\n & svg {\n position: absolute;\n z-index: 0;\n left: 0;\n /* 12px at 26px font-size */\n bottom: calc(12 / 26 * -1em);\n height: calc(12 / 26 * 1em);\n width: 130%;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/cooperate.pcss"],"names":[],"mappings":"AAIA,mCACE,kBAKF,CAHE,wBAHF,mCAII,kBAEJ,CADE,CAGF,6BACE,iBAAkB,CAClB,oBAAqB,CACrB,kBAWF,CATE,iCACE,iBAAkB,CAClB,SAAU,CACV,MAAO,CAEP,gBAA4B,CAC5B,eAA2B,CAC3B,UACF","file":"cooperate.css","sourcesContent":["/* Co-operate explainer */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-cooperate-explainer__title {\n font-size: var(--type-h3-s);\n\n @media (--mq-medium) {\n font-size: var(--type-h3-l);\n }\n}\n\n.coop-c-cooperate-underlined {\n position: relative;\n display: inline-block;\n margin-bottom: var(--spacing-48);\n\n & svg {\n position: absolute;\n z-index: 0;\n left: 0;\n /* 12px at 26px font-size */\n bottom: calc(12 / 26 * -1em);\n height: calc(12 / 26 * 1em);\n width: 130%;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--cooperate/package.json b/packages/shared-component--cooperate/package.json index c20b38c1..19982a9c 100755 --- a/packages/shared-component--cooperate/package.json +++ b/packages/shared-component--cooperate/package.json @@ -20,14 +20,12 @@ "directory": "packages/shared-component--cooperate" }, "devDependencies": { - "@coopdigital/foundations-grid": "^2.1.5", - "@coopdigital/foundations-vars": "^3.8.2", + "@coopdigital/foundations": "^1.2.1", "@coopdigital/shared-component--signpost": "^2.6.4", "@coopdigital/shared-component--signpostlist": "^1.5.5" }, "peerDependencies": { - "@coopdigital/foundations-grid": ">= 2.0.7 < 3", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4", + "@coopdigital/foundations": ">= 1.2.0 < 2", "@coopdigital/shared-component--signpost": ">= 2.1.17 < 3", "@coopdigital/shared-component--signpostlist": ">= 1.0.4 < 2" }, diff --git a/packages/shared-component--cooperate/src/cooperate.pcss b/packages/shared-component--cooperate/src/cooperate.pcss index daab945b..d47c559e 100755 --- a/packages/shared-component--cooperate/src/cooperate.pcss +++ b/packages/shared-component--cooperate/src/cooperate.pcss @@ -1,6 +1,6 @@ /* Co-operate explainer */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-cooperate-explainer__title { font-size: var(--type-h3-s); diff --git a/packages/shared-component--editorialCard/dist/editorialCard.css.map b/packages/shared-component--editorialCard/dist/editorialCard.css.map index cad17a1e..55f70fe9 100644 --- a/packages/shared-component--editorialCard/dist/editorialCard.css.map +++ b/packages/shared-component--editorialCard/dist/editorialCard.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/editorialCard.pcss"],"names":[],"mappings":"AAIA,sBACE,YAAa,CACb,MAAO,CACP,kBAAgC,CAChC,iBACF,CAEA,mCACE,wBAAsC,CACtC,kBACF,CAEA,6BACE,aAAc,CACd,eAAgB,CAChB,WAAY,CACZ,qBAAoC,CACpC,iBAAsC,CACtC,uCAA4B,CAC5B,iCAAmC,CACnC,MAMF,CAJE,sEAEE,uCACF,CAIA,wBADF,6DAEI,qBAEJ,CADE,CAIA,wBADF,+DAEI,YAAa,CACb,kBAEJ,CADE,CAIA,wBADF,yDAEI,0BAEJ,CADE,CAGF,4BACE,aAAc,CACd,UAAW,CACX,oBAAqB,CACrB,aAAc,CACd,QACF,CAEA,6BACE,QAAS,CACT,SAAU,CACV,iBAAkB,CAClB,SAAU,CACV,wBACF,CAEA,+DACE,eAMF,CAJE,wBAHF,+DAII,yBAA0B,CAC1B,oBAEJ,CADE,CAGF,6BACE,aAOF,CALE,iCACE,aAAc,CACd,UAAW,CACX,QACF,CAKA,wBAFF,kIAGI,WAAY,CACZ,UAOJ,CANE,CAGA,gCARF,kIASI,WAEJ,CADE,CAIA,wBADF,mEAEI,gBAEJ,CADE,CAGF,+BACE,oBAAqB,CACrB,iBAAkB,CAClB,SAAU,CACV,MAAO,CACP,aAKF,CAHE,wBAPF,+BAQI,eAEJ,CADE,CAMA,wBAHF,8FAII,iBAAkB,CAClB,sBAEJ,CADE,CAMA,wBAHF,wFAII,oBAEJ,CADE,CAGF,gCACE,kBAAmB,CACnB,kBAAmB,CACnB,mBACF,CAEA,6BACE,eAAgB,CAChB,kBAAmB,CACnB,gBAAiB,CACjB,QAAS,CACT,SAAU,CACV,aACF,CAEA,0EAEE,yBACF,CAEA,4BACE,kBAAmB,CACnB,mBAAoB,CACpB,gBAAkB,CAClB,kBAYF,CAVE,8BACE,iBAAkB,CAClB,mBAAoB,CACpB,kBAAmB,CACnB,kBAKF,CAHE,yCACE,eACF","file":"editorialCard.css","sourcesContent":["/* Editorial Card */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-editorialcard {\n display: flex;\n flex: 1;\n margin-bottom: var(--spacing-32);\n position: relative;\n}\n\n.coop-c-editorialcard--auto-height {\n height: calc(100% - var(--spacing-32));\n margin-bottom: var(--spacing-32);\n}\n\n.coop-c-editorialcard__inner {\n display: block;\n overflow: hidden;\n height: 100%;\n background-color: var(--color-white);\n border-radius: var(--ui-border-radius);\n box-shadow: var(--ui-shadow);\n transition: box-shadow 0.2s ease-in;\n flex: 1;\n\n &:hover,\n &:focus {\n box-shadow: var(--ui-shadow--hover);\n }\n}\n\n.coop-c-editorialcard--twocol .coop-c-editorialcard__content {\n @media (--mq-large) {\n padding-right: 5.25rem;\n }\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__inner {\n @media (--mq-medium) {\n display: flex;\n flex-direction: row;\n }\n}\n\n.coop-c-editorialcard--flip .coop-c-editorialcard__inner {\n @media (--mq-medium) {\n flex-direction: row-reverse;\n }\n}\n\n.coop-c-editorialcard__link {\n display: block;\n width: 100%;\n text-decoration: none;\n color: inherit;\n border: 0;\n}\n\n.coop-c-editorialcard__media {\n margin: 0;\n padding: 0;\n position: relative;\n z-index: 2;\n background-color: var(--color-grey-light);\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__media {\n overflow: hidden;\n\n @media (--mq-medium) {\n flex-basis: 31.6506309148%;\n width: 31.6506309148%;\n }\n}\n\n.coop-c-editorialcard__image {\n display: block;\n\n & img {\n display: block;\n width: 100%;\n border: 0;\n }\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__image,\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__image img {\n @media (--mq-medium) {\n height: 100%;\n width: 100%;\n }\n\n /* IE 10/11 */\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__image img {\n @media (--mq-medium) {\n object-fit: cover;\n }\n}\n\n.coop-c-editorialcard__content {\n padding: 1.25rem 1rem;\n position: relative;\n z-index: 1;\n flex: 1;\n color: #534f4f;\n\n @media (--mq-large) {\n padding: 1.25rem 1.25rem;\n }\n}\n\n.coop-c-editorialcard--horizontal\n .coop-c-editorialcard__media\n + .coop-c-editorialcard__content {\n @media (--mq-large) {\n padding-left: 2rem;\n padding-right: 11.25rem;\n }\n}\n\n.coop-c-editorialcard--flip\n .coop-c-editorialcard__media\n + .coop-c-editorialcard__content {\n @media (--mq-large) {\n padding-left: 1.25rem;\n }\n}\n\n.coop-c-editorialcard__subtitle {\n margin: 0 0 1.25rem;\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.coop-c-editorialcard__title {\n font-weight: 600;\n font-size: 1.375rem;\n line-height: 2rem;\n margin: 0;\n padding: 0;\n color: var(--color-text);\n}\n\na:hover .coop-c-editorialcard__title,\na:focus .coop-c-editorialcard__title {\n text-decoration: underline;\n}\n\n.coop-c-editorialcard__body {\n font-size: 1.125rem;\n line-height: 1.75rem;\n margin: 0.5rem 0 0;\n max-width: 43.75rem;\n\n & p {\n font-size: inherit;\n line-height: inherit;\n margin-bottom: 1rem;\n margin-top: 1.25rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/editorialCard.pcss"],"names":[],"mappings":"AAIA,sBACE,YAAa,CACb,MAAO,CACP,kBAAgC,CAChC,iBACF,CAEA,mCACE,wBAAsC,CACtC,kBACF,CAEA,6BACE,aAAc,CACd,eAAgB,CAChB,WAAY,CACZ,qBAAoC,CACpC,iBAAsC,CACtC,uCAA4B,CAC5B,iCAAmC,CACnC,MAMF,CAJE,sEAEE,uCACF,CAIA,wBADF,6DAEI,qBAEJ,CADE,CAIA,wBADF,+DAEI,YAAa,CACb,kBAEJ,CADE,CAIA,wBADF,yDAEI,0BAEJ,CADE,CAGF,4BACE,aAAc,CACd,UAAW,CACX,oBAAqB,CACrB,aAAc,CACd,QACF,CAEA,6BACE,QAAS,CACT,SAAU,CACV,iBAAkB,CAClB,SAAU,CACV,wBACF,CAEA,+DACE,eAMF,CAJE,wBAHF,+DAII,yBAA0B,CAC1B,oBAEJ,CADE,CAGF,6BACE,aAOF,CALE,iCACE,aAAc,CACd,UAAW,CACX,QACF,CAKA,wBAFF,kIAGI,WAAY,CACZ,UAOJ,CANE,CAGA,gCARF,kIASI,WAEJ,CADE,CAIA,wBADF,mEAEI,gBAEJ,CADE,CAGF,+BACE,oBAAqB,CACrB,iBAAkB,CAClB,SAAU,CACV,MAAO,CACP,aAKF,CAHE,wBAPF,+BAQI,eAEJ,CADE,CAMA,wBAHF,8FAII,iBAAkB,CAClB,sBAEJ,CADE,CAMA,wBAHF,wFAII,oBAEJ,CADE,CAGF,gCACE,kBAAmB,CACnB,kBAAmB,CACnB,mBACF,CAEA,6BACE,eAAgB,CAChB,kBAAmB,CACnB,gBAAiB,CACjB,QAAS,CACT,SAAU,CACV,aACF,CAEA,0EAEE,yBACF,CAEA,4BACE,kBAAmB,CACnB,mBAAoB,CACpB,gBAAkB,CAClB,kBAYF,CAVE,8BACE,iBAAkB,CAClB,mBAAoB,CACpB,kBAAmB,CACnB,kBAKF,CAHE,yCACE,eACF","file":"editorialCard.css","sourcesContent":["/* Editorial Card */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-editorialcard {\n display: flex;\n flex: 1;\n margin-bottom: var(--spacing-32);\n position: relative;\n}\n\n.coop-c-editorialcard--auto-height {\n height: calc(100% - var(--spacing-32));\n margin-bottom: var(--spacing-32);\n}\n\n.coop-c-editorialcard__inner {\n display: block;\n overflow: hidden;\n height: 100%;\n background-color: var(--color-white);\n border-radius: var(--ui-border-radius);\n box-shadow: var(--ui-shadow);\n transition: box-shadow 0.2s ease-in;\n flex: 1;\n\n &:hover,\n &:focus {\n box-shadow: var(--ui-shadow--hover);\n }\n}\n\n.coop-c-editorialcard--twocol .coop-c-editorialcard__content {\n @media (--mq-large) {\n padding-right: 5.25rem;\n }\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__inner {\n @media (--mq-medium) {\n display: flex;\n flex-direction: row;\n }\n}\n\n.coop-c-editorialcard--flip .coop-c-editorialcard__inner {\n @media (--mq-medium) {\n flex-direction: row-reverse;\n }\n}\n\n.coop-c-editorialcard__link {\n display: block;\n width: 100%;\n text-decoration: none;\n color: inherit;\n border: 0;\n}\n\n.coop-c-editorialcard__media {\n margin: 0;\n padding: 0;\n position: relative;\n z-index: 2;\n background-color: var(--color-grey-light);\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__media {\n overflow: hidden;\n\n @media (--mq-medium) {\n flex-basis: 31.6506309148%;\n width: 31.6506309148%;\n }\n}\n\n.coop-c-editorialcard__image {\n display: block;\n\n & img {\n display: block;\n width: 100%;\n border: 0;\n }\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__image,\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__image img {\n @media (--mq-medium) {\n height: 100%;\n width: 100%;\n }\n\n /* IE 10/11 */\n @media all and (-ms-high-contrast: none) {\n height: auto;\n }\n}\n\n.coop-c-editorialcard--horizontal .coop-c-editorialcard__image img {\n @media (--mq-medium) {\n object-fit: cover;\n }\n}\n\n.coop-c-editorialcard__content {\n padding: 1.25rem 1rem;\n position: relative;\n z-index: 1;\n flex: 1;\n color: #534f4f;\n\n @media (--mq-large) {\n padding: 1.25rem 1.25rem;\n }\n}\n\n.coop-c-editorialcard--horizontal\n .coop-c-editorialcard__media\n + .coop-c-editorialcard__content {\n @media (--mq-large) {\n padding-left: 2rem;\n padding-right: 11.25rem;\n }\n}\n\n.coop-c-editorialcard--flip\n .coop-c-editorialcard__media\n + .coop-c-editorialcard__content {\n @media (--mq-large) {\n padding-left: 1.25rem;\n }\n}\n\n.coop-c-editorialcard__subtitle {\n margin: 0 0 1.25rem;\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n\n.coop-c-editorialcard__title {\n font-weight: 600;\n font-size: 1.375rem;\n line-height: 2rem;\n margin: 0;\n padding: 0;\n color: var(--color-text);\n}\n\na:hover .coop-c-editorialcard__title,\na:focus .coop-c-editorialcard__title {\n text-decoration: underline;\n}\n\n.coop-c-editorialcard__body {\n font-size: 1.125rem;\n line-height: 1.75rem;\n margin: 0.5rem 0 0;\n max-width: 43.75rem;\n\n & p {\n font-size: inherit;\n line-height: inherit;\n margin-bottom: 1rem;\n margin-top: 1.25rem;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--editorialCard/package.json b/packages/shared-component--editorialCard/package.json index 213bde12..50cd71d6 100755 --- a/packages/shared-component--editorialCard/package.json +++ b/packages/shared-component--editorialCard/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--editorialCard" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--editorialCard/src/editorialCard.pcss b/packages/shared-component--editorialCard/src/editorialCard.pcss index bb6dba09..25a0bd8b 100755 --- a/packages/shared-component--editorialCard/src/editorialCard.pcss +++ b/packages/shared-component--editorialCard/src/editorialCard.pcss @@ -1,6 +1,6 @@ /* Editorial Card */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-editorialcard { display: flex; diff --git a/packages/shared-component--featureCard/dist/featureCard.css.map b/packages/shared-component--featureCard/dist/featureCard.css.map index 5126468d..72e4a25d 100644 --- a/packages/shared-component--featureCard/dist/featureCard.css.map +++ b/packages/shared-component--featureCard/dist/featureCard.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/featureCard.pcss"],"names":[],"mappings":"AAIA,oBACE,YAAa,CACb,MAAO,CACP,qBAAsB,CACtB,iBAAkB,CAClB,kBACF,CAEA,0BACE,eAAgB,CAChB,YAAa,CACb,qBAAsB,CACtB,WAAY,CACZ,UAAY,CACZ,iBAAsC,CACtC,uCAA4B,CAC5B,iCAAmC,CACnC,oBACF,CAEA,0GAEE,yBACF,CAEA,wGAEE,uCAAmC,CACnC,iBACF,CAEA,2BACE,YAAa,CACb,QACF,CAEA,2DACE,UAAW,CACX,WAAY,CACZ,aAAc,CACd,iBAMF,CAJE,+DACE,WAAY,CACZ,UACF,CAGF,iEACE,QAAS,CACT,UAAW,CACX,kBAWF,CATE,qEACE,iBAAkB,CAClB,WAAY,CACZ,gBAAiB,CACjB,KAAM,CACN,MAAO,CACP,QAAS,CACT,OACF,CAGF,8BACE,UAAyB,CACzB,YAAiC,CACjC,iBAAkB,CAClB,SAAU,CACV,WAAY,CACZ,YAAa,CACb,WAAY,CACZ,UAAW,CACX,oBAUF,CARE,wBAXF,8BAYI,cAAe,CACf,SAAU,CACV,UAKJ,CAJE,CACA,wBAhBF,8BAiBI,oBAEJ,CADE,CAGF,8BACE,mBAAqB,CACrB,SAAU,CACV,WAAY,CACZ,mBAOF,CALE,wBANF,8BAOI,cAAe,CACf,SAAU,CACV,WAEJ,CADE,CAGF,oDACE,SAAU,CACV,WAAY,CACZ,YAAa,CACb,WAOF,CALE,wBANF,oDAOI,cAAe,CACf,SAAU,CACV,WAEJ,CADE,CAGF,qCACE,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WAAY,CACZ,SACF,CAEA,mCACE,UAAW,CACX,YACF,CAEA,qCACE,YAAa,CACb,MAAO,CACP,qBAAsB,CACtB,kBAAmB,CACnB,iBAAkB,CAClB,SAAU,CACV,eACF,CAEA,0CACE,eAAgB,CAChB,UAAyB,CACzB,aAAc,CACd,eAAgB,CAChB,kBAA6B,CAC7B,iBAAkB,CAClB,uBAA4D,CAC5D,iBAAkB,CAClB,WACF,CAEA,0CACE,eAAgB,CAChB,UAAyB,CACzB,eAAgB,CAChB,iBAAkB,CAClB,aAAc,CACd,iBAAkB,CAClB,eAKF,CAHE,wBATF,0CAUI,cAEJ,CADE,CAGF,oFAEE,gBACF,CAEA,yCACE,eACF,CAEA,gFAEE,eACF,CAEA,yCACE,eAAgB,CAChB,iBAAkB,CAClB,eAAgB,CAChB,iBAAkB,CAClB,eAAgB,CAChB,wBACF,CAEA,8CACE,iBACF,CAEA,6BACE,YAAa,CACb,qBAAsB,CACtB,0BAA2B,CAC3B,kBAAmB,CACnB,wBAA8E,CAC9E,qBACF,CAEA,2BACE,aAAwB,CACxB,eAAgB,CAChB,kBAAmB,CACnB,SAAU,CACV,oBAAqB,CACrB,UACF,CAEA,8BACE,aAAwB,CACxB,YAAa,CACb,kBAA6B,CAC7B,eAAgB,CAChB,UACF,CAIE,0BADF,0DAEI,0BAEJ,CADE,CAIA,0BADF,2DAEI,aAAc,CACd,YAEJ,CADE,CAIA,0BADF,6DAEI,aAAc,CACd,YAAa,CACb,0BAQJ,CANE,CAEA,wBARF,6DASI,wBAGJ,CADE,CAIA,0BADF,2DAEI,cAAe,CACf,eAUJ,CATE,CAEA,wBANF,2DAOI,kBAMJ,CALE,CAEA,wBAVF,2DAWI,kBAEJ,CADE,CAMA,0BAHF,iGAII,WAMJ,CALE,CAEA,wBAPF,iGAQI,QAEJ,CADE,CAIA,wBADF,sDAEI,gBAEJ,CADE,CAIA,0BADF,wDAEI,wBAOJ,CANE,CAEA,wBALF,wDAMI,wBAGJ,CADE","file":"featureCard.css","sourcesContent":["/* Feature Card */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-featureCard {\n display: flex;\n flex: 1;\n flex-direction: column;\n position: relative;\n margin-bottom: var(--spacing-64);\n}\n\n.coop-c-featureCard__link {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n color: black;\n border-radius: var(--ui-border-radius);\n box-shadow: var(--ui-shadow);\n transition: box-shadow 0.2s ease-in;\n text-decoration: none;\n}\n\n.coop-c-featureCard:hover .coop-c-featureCard__title,\n.coop-c-featureCard:focus .coop-c-featureCard__title {\n text-decoration: underline;\n}\n\n.coop-c-featureCard:hover .coop-c-featureCard__link,\n.coop-c-featureCard:focus .coop-c-featureCard__link {\n box-shadow: var(--ui-shadow--hover);\n color: transparent;\n}\n\n.coop-c-featureCard__media {\n display: flex;\n margin: 0;\n}\n\n.coop-c-featureCard__media .coop-c-featureCard__media-wrap {\n width: 100%;\n height: auto;\n line-height: 0;\n position: relative;\n\n & img {\n height: auto;\n width: 100%;\n }\n}\n\n.coop-c-featureCard__media .coop-c-featureCard__media-wrap--16-9 {\n height: 0;\n width: 100%;\n padding-top: 56.25%;\n\n & img {\n position: absolute;\n height: 100%;\n object-fit: cover;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n}\n\n.coop-c-featureCard__squircle {\n color: var(--color-white);\n padding: var(--spacing-base--1-2);\n position: absolute;\n top: -30px;\n right: -28px;\n height: 114px;\n width: 118px;\n z-index: 10;\n transform: scale(0.88);\n\n @media (--mq-large) {\n transform: none;\n top: -21px;\n right: -8px;\n }\n @media (--mq-medium) {\n transform: scale(0.78);\n }\n}\n\n.coop-c-featureCard__squircle {\n padding: 0.875rem 0 0;\n top: -38px;\n right: -32px;\n transform: scale(0.7);\n\n @media (--mq-large) {\n transform: none;\n top: -31px;\n right: -20px;\n }\n}\n\n.coop-c-featureCard__squircle--super_saver_squircle {\n top: -42px;\n right: -38px;\n height: 140px;\n width: 147px;\n\n @media (--mq-large) {\n transform: none;\n top: -31px;\n right: -20px;\n }\n}\n\n.coop-c-featureCard__squircle__media {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n.coop-c-featureCard__squircle__svg {\n width: 100%;\n fill: #d3212a;\n}\n\n.coop-c-featureCard__squircle__label {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n position: relative;\n z-index: 2;\n margin-top: -8px;\n}\n\n.coop-c-featureCard__squircle__small-text {\n max-width: 100px;\n color: var(--color-white);\n display: block;\n font-weight: 600;\n font-size: var(--type-body-s);\n line-height: 1.4em;\n padding: var(--spacing-base--1-4) var(--spacing-base--1-8) 0;\n text-align: center;\n width: 100px;\n}\n\n.coop-c-featureCard__squircle__large-text {\n max-width: 100px;\n color: var(--color-white);\n font-weight: 600;\n font-size: 2.25rem;\n display: block;\n text-align: center;\n line-height: 1.4;\n\n @media (--mq-medium) {\n font-size: 2rem;\n }\n}\n\n.coop-c-featureCard__squircle__large-text,\n.coop-c-featureCard__squircle__small-text {\n margin-top: -16px;\n}\n\n.coop-c-featureCard__squircle--text-pull {\n margin-top: -7px;\n}\n\n.coop-c-featureCard__squircle--fresh_3\n .coop-c-featureCard__squircle__uppercase {\n margin-top: 32px;\n}\n\n.coop-c-featureCard__squircle__uppercase {\n max-width: 100px;\n font-size: 1.55rem;\n font-weight: 600;\n text-align: center;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n.coop-c-featureCard__squircle__uppercase--new {\n font-size: 1.75rem;\n}\n\n.coop-c-featureCard__content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n padding: var(--spacing-base--3-4) var(--spacing-base--1-2) var(--spacing-base);\n background-color: var(--color-white);\n}\n\n.coop-c-featureCard__title {\n color: var(--color-text);\n font-weight: 600;\n font-size: 1.375rem;\n padding: 0;\n text-decoration: none;\n width: 100%;\n}\n\n.coop-c-featureCard__linkText {\n color: var(--color-text);\n display: flex;\n font-size: var(--type-h456-s);\n margin-bottom: 0;\n width: 100%;\n}\n\n/* horizontal modifier styles */\n.coop-c-featureCard--horizontal .coop-c-featureCard__link {\n @media (--mq-small) {\n flex-direction: row-reverse;\n }\n}\n\n.coop-c-featureCard--horizontal .coop-c-featureCard__media {\n @media (--mq-small) {\n max-width: 45%;\n flex: 1 0 45%;\n }\n}\n\n.coop-c-featureCard--horizontal .coop-c-featureCard__content {\n @media (--mq-small) {\n max-width: 55%;\n flex: 1 0 55%;\n padding: var(--spacing-base--1-4) var(--spacing-base--1-2) 0\n var(--spacing-base--1-4);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-base--1-2) var(--spacing-base) 0\n var(--spacing-base--1-2);\n }\n}\n\n.coop-c-featureCard--horizontal .coop-c-featureCard__title {\n @media (--mq-small) {\n font-size: 1rem;\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n font-size: 1.125rem;\n }\n\n @media (--mq-large) {\n font-size: 1.375rem;\n }\n}\n\n.coop-c-featureCard--horizontal\n .coop-c-featureCard__media\n .coop-c-featureCard__media-wrap--16-9 {\n @media (--mq-small) {\n height: auto;\n }\n\n @media (--mq-medium) {\n height: 0;\n }\n}\n\n.coop-c-featureCard--large .coop-c-featureCard__media {\n @media (--mq-large) {\n flex: 1 0 33.333%;\n }\n}\n\n.coop-c-featureCard--large .coop-c-featureCard__content {\n @media (--mq-small) {\n padding: var(--spacing-base) var(--spacing-medium) 0 var(--spacing-base);\n }\n\n @media (--mq-medium) {\n padding: var(--spacing-base) calc(var(--spacing-medium) * 2) 0\n var(--spacing-base);\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/featureCard.pcss"],"names":[],"mappings":"AAIA,oBACE,YAAa,CACb,MAAO,CACP,qBAAsB,CACtB,iBAAkB,CAClB,kBACF,CAEA,0BACE,eAAgB,CAChB,YAAa,CACb,qBAAsB,CACtB,WAAY,CACZ,UAAY,CACZ,iBAAsC,CACtC,uCAA4B,CAC5B,iCAAmC,CACnC,oBACF,CAEA,0GAEE,yBACF,CAEA,wGAEE,uCAAmC,CACnC,iBACF,CAEA,2BACE,YAAa,CACb,QACF,CAEA,2DACE,UAAW,CACX,WAAY,CACZ,aAAc,CACd,iBAMF,CAJE,+DACE,WAAY,CACZ,UACF,CAGF,iEACE,QAAS,CACT,UAAW,CACX,kBAWF,CATE,qEACE,iBAAkB,CAClB,WAAY,CACZ,gBAAiB,CACjB,KAAM,CACN,MAAO,CACP,QAAS,CACT,OACF,CAGF,8BACE,UAAyB,CACzB,YAAiC,CACjC,iBAAkB,CAClB,SAAU,CACV,WAAY,CACZ,YAAa,CACb,WAAY,CACZ,UAAW,CACX,oBAUF,CARE,wBAXF,8BAYI,cAAe,CACf,SAAU,CACV,UAKJ,CAJE,CACA,wBAhBF,8BAiBI,oBAEJ,CADE,CAGF,8BACE,mBAAqB,CACrB,SAAU,CACV,WAAY,CACZ,mBAOF,CALE,wBANF,8BAOI,cAAe,CACf,SAAU,CACV,WAEJ,CADE,CAGF,oDACE,SAAU,CACV,WAAY,CACZ,YAAa,CACb,WAOF,CALE,wBANF,oDAOI,cAAe,CACf,SAAU,CACV,WAEJ,CADE,CAGF,qCACE,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WAAY,CACZ,SACF,CAEA,mCACE,UAAW,CACX,YACF,CAEA,qCACE,YAAa,CACb,MAAO,CACP,qBAAsB,CACtB,kBAAmB,CACnB,iBAAkB,CAClB,SAAU,CACV,eACF,CAEA,0CACE,eAAgB,CAChB,UAAyB,CACzB,aAAc,CACd,eAAgB,CAChB,kBAA6B,CAC7B,iBAAkB,CAClB,uBAA4D,CAC5D,iBAAkB,CAClB,WACF,CAEA,0CACE,eAAgB,CAChB,UAAyB,CACzB,eAAgB,CAChB,iBAAkB,CAClB,aAAc,CACd,iBAAkB,CAClB,eAKF,CAHE,wBATF,0CAUI,cAEJ,CADE,CAGF,oFAEE,gBACF,CAEA,yCACE,eACF,CAEA,gFAEE,eACF,CAEA,yCACE,eAAgB,CAChB,iBAAkB,CAClB,eAAgB,CAChB,iBAAkB,CAClB,eAAgB,CAChB,wBACF,CAEA,8CACE,iBACF,CAEA,6BACE,YAAa,CACb,qBAAsB,CACtB,0BAA2B,CAC3B,kBAAmB,CACnB,wBAA8E,CAC9E,qBACF,CAEA,2BACE,aAAwB,CACxB,eAAgB,CAChB,kBAAmB,CACnB,SAAU,CACV,oBAAqB,CACrB,UACF,CAEA,8BACE,aAAwB,CACxB,YAAa,CACb,kBAA6B,CAC7B,eAAgB,CAChB,UACF,CAIE,0BADF,0DAEI,0BAEJ,CADE,CAIA,0BADF,2DAEI,aAAc,CACd,YAEJ,CADE,CAIA,0BADF,6DAEI,aAAc,CACd,YAAa,CACb,0BAQJ,CANE,CAEA,wBARF,6DASI,wBAGJ,CADE,CAIA,0BADF,2DAEI,cAAe,CACf,eAUJ,CATE,CAEA,wBANF,2DAOI,kBAMJ,CALE,CAEA,wBAVF,2DAWI,kBAEJ,CADE,CAMA,0BAHF,iGAII,WAMJ,CALE,CAEA,wBAPF,iGAQI,QAEJ,CADE,CAIA,wBADF,sDAEI,gBAEJ,CADE,CAIA,0BADF,wDAEI,wBAOJ,CANE,CAEA,wBALF,wDAMI,wBAGJ,CADE","file":"featureCard.css","sourcesContent":["/* Feature Card */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-featureCard {\n display: flex;\n flex: 1;\n flex-direction: column;\n position: relative;\n margin-bottom: var(--spacing-64);\n}\n\n.coop-c-featureCard__link {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n color: black;\n border-radius: var(--ui-border-radius);\n box-shadow: var(--ui-shadow);\n transition: box-shadow 0.2s ease-in;\n text-decoration: none;\n}\n\n.coop-c-featureCard:hover .coop-c-featureCard__title,\n.coop-c-featureCard:focus .coop-c-featureCard__title {\n text-decoration: underline;\n}\n\n.coop-c-featureCard:hover .coop-c-featureCard__link,\n.coop-c-featureCard:focus .coop-c-featureCard__link {\n box-shadow: var(--ui-shadow--hover);\n color: transparent;\n}\n\n.coop-c-featureCard__media {\n display: flex;\n margin: 0;\n}\n\n.coop-c-featureCard__media .coop-c-featureCard__media-wrap {\n width: 100%;\n height: auto;\n line-height: 0;\n position: relative;\n\n & img {\n height: auto;\n width: 100%;\n }\n}\n\n.coop-c-featureCard__media .coop-c-featureCard__media-wrap--16-9 {\n height: 0;\n width: 100%;\n padding-top: 56.25%;\n\n & img {\n position: absolute;\n height: 100%;\n object-fit: cover;\n top: 0;\n left: 0;\n bottom: 0;\n right: 0;\n }\n}\n\n.coop-c-featureCard__squircle {\n color: var(--color-white);\n padding: var(--spacing-base--1-2);\n position: absolute;\n top: -30px;\n right: -28px;\n height: 114px;\n width: 118px;\n z-index: 10;\n transform: scale(0.88);\n\n @media (--mq-large) {\n transform: none;\n top: -21px;\n right: -8px;\n }\n @media (--mq-medium) {\n transform: scale(0.78);\n }\n}\n\n.coop-c-featureCard__squircle {\n padding: 0.875rem 0 0;\n top: -38px;\n right: -32px;\n transform: scale(0.7);\n\n @media (--mq-large) {\n transform: none;\n top: -31px;\n right: -20px;\n }\n}\n\n.coop-c-featureCard__squircle--super_saver_squircle {\n top: -42px;\n right: -38px;\n height: 140px;\n width: 147px;\n\n @media (--mq-large) {\n transform: none;\n top: -31px;\n right: -20px;\n }\n}\n\n.coop-c-featureCard__squircle__media {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n}\n\n.coop-c-featureCard__squircle__svg {\n width: 100%;\n fill: #d3212a;\n}\n\n.coop-c-featureCard__squircle__label {\n display: flex;\n flex: 1;\n flex-direction: column;\n align-items: center;\n position: relative;\n z-index: 2;\n margin-top: -8px;\n}\n\n.coop-c-featureCard__squircle__small-text {\n max-width: 100px;\n color: var(--color-white);\n display: block;\n font-weight: 600;\n font-size: var(--type-body-s);\n line-height: 1.4em;\n padding: var(--spacing-base--1-4) var(--spacing-base--1-8) 0;\n text-align: center;\n width: 100px;\n}\n\n.coop-c-featureCard__squircle__large-text {\n max-width: 100px;\n color: var(--color-white);\n font-weight: 600;\n font-size: 2.25rem;\n display: block;\n text-align: center;\n line-height: 1.4;\n\n @media (--mq-medium) {\n font-size: 2rem;\n }\n}\n\n.coop-c-featureCard__squircle__large-text,\n.coop-c-featureCard__squircle__small-text {\n margin-top: -16px;\n}\n\n.coop-c-featureCard__squircle--text-pull {\n margin-top: -7px;\n}\n\n.coop-c-featureCard__squircle--fresh_3\n .coop-c-featureCard__squircle__uppercase {\n margin-top: 32px;\n}\n\n.coop-c-featureCard__squircle__uppercase {\n max-width: 100px;\n font-size: 1.55rem;\n font-weight: 600;\n text-align: center;\n line-height: 1.1;\n text-transform: uppercase;\n}\n\n.coop-c-featureCard__squircle__uppercase--new {\n font-size: 1.75rem;\n}\n\n.coop-c-featureCard__content {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n padding: var(--spacing-base--3-4) var(--spacing-base--1-2) var(--spacing-base);\n background-color: var(--color-white);\n}\n\n.coop-c-featureCard__title {\n color: var(--color-text);\n font-weight: 600;\n font-size: 1.375rem;\n padding: 0;\n text-decoration: none;\n width: 100%;\n}\n\n.coop-c-featureCard__linkText {\n color: var(--color-text);\n display: flex;\n font-size: var(--type-h456-s);\n margin-bottom: 0;\n width: 100%;\n}\n\n/* horizontal modifier styles */\n.coop-c-featureCard--horizontal .coop-c-featureCard__link {\n @media (--mq-small) {\n flex-direction: row-reverse;\n }\n}\n\n.coop-c-featureCard--horizontal .coop-c-featureCard__media {\n @media (--mq-small) {\n max-width: 45%;\n flex: 1 0 45%;\n }\n}\n\n.coop-c-featureCard--horizontal .coop-c-featureCard__content {\n @media (--mq-small) {\n max-width: 55%;\n flex: 1 0 55%;\n padding: var(--spacing-base--1-4) var(--spacing-base--1-2) 0\n var(--spacing-base--1-4);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-base--1-2) var(--spacing-base) 0\n var(--spacing-base--1-2);\n }\n}\n\n.coop-c-featureCard--horizontal .coop-c-featureCard__title {\n @media (--mq-small) {\n font-size: 1rem;\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n font-size: 1.125rem;\n }\n\n @media (--mq-large) {\n font-size: 1.375rem;\n }\n}\n\n.coop-c-featureCard--horizontal\n .coop-c-featureCard__media\n .coop-c-featureCard__media-wrap--16-9 {\n @media (--mq-small) {\n height: auto;\n }\n\n @media (--mq-medium) {\n height: 0;\n }\n}\n\n.coop-c-featureCard--large .coop-c-featureCard__media {\n @media (--mq-large) {\n flex: 1 0 33.333%;\n }\n}\n\n.coop-c-featureCard--large .coop-c-featureCard__content {\n @media (--mq-small) {\n padding: var(--spacing-base) var(--spacing-medium) 0 var(--spacing-base);\n }\n\n @media (--mq-medium) {\n padding: var(--spacing-base) calc(var(--spacing-medium) * 2) 0\n var(--spacing-base);\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--featureCard/package.json b/packages/shared-component--featureCard/package.json index b806dd74..74d72502 100755 --- a/packages/shared-component--featureCard/package.json +++ b/packages/shared-component--featureCard/package.json @@ -19,10 +19,10 @@ "directory": "packages/shared-component--featureCard" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--featureCard/src/featureCard.pcss b/packages/shared-component--featureCard/src/featureCard.pcss index 1f60d0f9..3b445f24 100755 --- a/packages/shared-component--featureCard/src/featureCard.pcss +++ b/packages/shared-component--featureCard/src/featureCard.pcss @@ -1,6 +1,6 @@ /* Feature Card */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-featureCard { display: flex; diff --git a/packages/shared-component--hero/dist/hero.css b/packages/shared-component--hero/dist/hero.css index b1636812..0bef439a 100644 --- a/packages/shared-component--hero/dist/hero.css +++ b/packages/shared-component--hero/dist/hero.css @@ -1,2 +1,2 @@ -.coop-c-hero{overflow:hidden;margin:0 auto 2rem;position:relative;z-index:0}.coop-c-hero .coop-c-signpost{display:inline-block;margin:1rem 0 0;width:auto}.coop-c-hero .coop-c-signpost__content{min-height:3.3rem}.coop-c-hero .coop-c-signpost__title{flex-shrink:0;flex-basis:auto}.coop-c-hero .coop-c-signpost__icon{fill:currentColor;margin-left:1rem}.coop-c-hero .coop-c-signpost__icon--prefix{margin-left:0;margin-right:.75rem}.coop-c-hero .coop-c-signpost a{color:#282828}@media (min-width:48em){.coop-c-hero{margin-bottom:3rem}}.coop-c-hero--pull{margin-bottom:-6rem}@media (min-width:64em){.coop-c-hero--pull{margin-bottom:-12rem}}.coop-c-hero__inner{max-width:81rem;padding:1.5rem 1rem 0;margin:0 auto;position:relative}@media (min-width:48em){.coop-c-hero__inner{padding-top:2rem}}@media (min-width:64em){.coop-c-hero__inner{padding:2rem 1.5rem 0}}@media (min-width:81.25em){.coop-c-hero__inner{padding:3rem 1rem 0}}.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:3rem}@media (min-width:48em){.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:3rem}}@media (min-width:64em){.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:6rem}}@media (min-width:81.25em){.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:7rem}}@media (min-width:48em){.coop-c-hero--media .coop-c-hero__inner{padding-bottom:0}}.coop-c-hero--pull .coop-c-hero__inner{padding-bottom:6rem}@media (min-width:64em){.coop-c-hero--pull .coop-c-hero__inner{padding-bottom:13rem}}.coop-c-hero__title{position:relative;z-index:2;margin:0;font-size:2.875rem;line-height:3.625rem}@media (min-width:48em){.coop-c-hero__title{float:left;width:66.6666%;padding-right:1rem}}@media (min-width:48em){.coop-c-hero--media .coop-c-hero__title{width:50%}}.coop-c-hero__title--mega{font-size:3rem}@media (min-width:64em){.coop-c-hero__title--mega{font-size:3.5rem}}.coop-c-hero__media{margin:1rem -1rem 0;position:relative;z-index:2}@media (min-width:48em){.coop-c-hero__media{width:50%;margin:0;padding-left:1rem;float:right}}.coop-c-hero__image{display:block}.coop-c-hero__image img{display:block;width:100%}.coop-c-hero__body{position:relative;z-index:2;padding-top:1.25rem}@media (min-width:48em){.coop-c-hero__body{float:left;width:66.6666%;padding-right:2rem}}@media (min-width:81.25em){.coop-c-hero__body{padding-top:2rem}}.coop-c-hero__body p{font-size:1.2499999rem;line-height:2rem;margin-bottom:1rem}.coop-c-hero__body p:last-child{margin-bottom:0}@media (min-width:48em){.coop-c-hero__body p{font-size:1.375rem}.coop-c-hero--media .coop-c-hero__body{width:50%}}@media (min-width:48em){.coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body{width:50%;padding-bottom:3rem}}@media (min-width:64em){.coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body{padding-bottom:4rem}}.coop-c-hero__squircle{position:absolute;bottom:0;left:50%;width:280%;transform:translateX(-50%);margin-left:-10%;z-index:1;fill:#f3f9fd;pointer-events:none}@media (min-width:48em){.coop-c-hero__squircle{left:auto;right:0;transform:none;width:150%}}@media (min-width:64em){.coop-c-hero__squircle{right:0;width:160%}}@media (min-width:81.25em){.coop-c-hero__squircle{width:145%}}@media (min-width:90em){.coop-c-hero__squircle{right:-1rem;width:155%}}.coop-c-hero__squircle__inner{position:relative;width:100%;height:0;padding-top:95.78246393%}.coop-c-hero__squircle__svg{width:100%;height:100%;position:absolute;top:0;left:0}.coop-c-hero .coop-c-hero__end-date{margin-top:1rem}.coop-c-hero .coop-c-hero__end-date span,.coop-c-hero .coop-c-hero__end-date svg{vertical-align:middle}.coop-c-hero__link-container{display:flex;flex-wrap:wrap}.coop-c-hero__link{margin-right:10px;margin-bottom:10px}.coop-c-hero__disclaimer{margin-bottom:1rem}.coop-c-hero__disclaimer p{font-size:1rem}@media (min-width:64em){.coop-c-hero__disclaimer p{font-size:1.2499999rem}}.coop-c-hero.coop-u-black .coop-c-hero__body>a,.coop-c-hero.coop-u-black .coop-c-hero__body>p>a,.coop-c-hero.coop-u-black .coop-c-hero__body a:not(.coop-btn){color:#282828}.coop-c-hero.coop-u-white .coop-c-hero__body>a,.coop-c-hero.coop-u-white .coop-c-hero__body>p>a,.coop-c-hero.coop-u-white .coop-c-hero__body a:not(.coop-btn){color:#fff} +.coop-c-hero{overflow:hidden;margin:0 auto 2rem;position:relative;z-index:0}.coop-c-hero .coop-c-signpost{display:inline-block;margin:1rem 0 0;width:auto}.coop-c-hero .coop-c-signpost__content{min-height:3.3rem}.coop-c-hero .coop-c-signpost__title{flex-shrink:0;flex-basis:auto}.coop-c-hero .coop-c-signpost__icon{fill:currentColor;margin-left:1rem}.coop-c-hero .coop-c-signpost__icon--prefix{margin-left:0;margin-right:.75rem}.coop-c-hero .coop-c-signpost a{color:#282828}@media (min-width:48em){.coop-c-hero{margin-bottom:3rem}}.coop-c-hero--pull{margin-bottom:-6rem}@media (min-width:64em){.coop-c-hero--pull{margin-bottom:-12rem}}.coop-c-hero__inner{max-width:81rem;padding:1.5rem 1rem 0;margin:0 auto;position:relative}@media (min-width:48em){.coop-c-hero__inner{padding-top:2rem}}@media (min-width:64em){.coop-c-hero__inner{padding:2rem 1.5rem 0}}@media (min-width:81.25em){.coop-c-hero__inner{padding:3rem 1rem 0}}.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:3rem}@media (min-width:48em){.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:3rem}}@media (min-width:64em){.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:6rem}}@media (min-width:81.25em){.coop-c-hero--squircle .coop-c-hero__inner{padding-bottom:7rem}}@media (min-width:48em){.coop-c-hero--media .coop-c-hero__inner{padding-bottom:0}}.coop-c-hero--pull .coop-c-hero__inner{padding-bottom:6rem}@media (min-width:64em){.coop-c-hero--pull .coop-c-hero__inner{padding-bottom:13rem}}.coop-c-hero__title{position:relative;z-index:2;margin:0;font-size:2.875rem;line-height:3.625rem}@media (min-width:48em){.coop-c-hero__title{float:left;width:66.6666%;padding-right:1rem}}@media (min-width:48em){.coop-c-hero--media .coop-c-hero__title{width:50%}}.coop-c-hero__title--mega{font-size:3rem}@media (min-width:64em){.coop-c-hero__title--mega{font-size:3.5rem}}.coop-c-hero__media{margin:1rem -1rem 0;position:relative;z-index:2}@media (min-width:48em){.coop-c-hero__media{width:50%;margin:0;padding-left:1rem;float:right}}.coop-c-hero__image{display:block}.coop-c-hero__image img{display:block;width:100%}.coop-c-hero__body{position:relative;z-index:2;padding-top:1.25rem}@media (min-width:48em){.coop-c-hero__body{float:left;width:66.6666%;padding-right:2rem}}@media (min-width:81.25em){.coop-c-hero__body{padding-top:2rem}}.coop-c-hero__body p{font-size:1.2499999rem;line-height:2rem;margin-bottom:1rem}.coop-c-hero__body p:last-child{margin-bottom:0}@media (min-width:48em){.coop-c-hero__body p{font-size:1.375rem}.coop-c-hero--media .coop-c-hero__body{width:50%}}@media (min-width:48em){.coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body{width:50%;padding-bottom:3rem}}@media (min-width:64em){.coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body{padding-bottom:4rem}}.coop-c-hero__squircle{position:absolute;bottom:0;left:50%;width:280%;transform:translateX(-50%);margin-left:-10%;z-index:1;fill:#eef3fc;pointer-events:none}@media (min-width:48em){.coop-c-hero__squircle{left:auto;right:0;transform:none;width:150%}}@media (min-width:64em){.coop-c-hero__squircle{right:0;width:160%}}@media (min-width:81.25em){.coop-c-hero__squircle{width:145%}}@media (min-width:90em){.coop-c-hero__squircle{right:-1rem;width:155%}}.coop-c-hero__squircle__inner{position:relative;width:100%;height:0;padding-top:95.78246393%}.coop-c-hero__squircle__svg{width:100%;height:100%;position:absolute;top:0;left:0}.coop-c-hero .coop-c-hero__end-date{margin-top:1rem}.coop-c-hero .coop-c-hero__end-date span,.coop-c-hero .coop-c-hero__end-date svg{vertical-align:middle}.coop-c-hero__link-container{display:flex;flex-wrap:wrap}.coop-c-hero__link{margin-right:10px;margin-bottom:10px}.coop-c-hero__disclaimer{margin-bottom:1rem}.coop-c-hero__disclaimer p{font-size:1rem}@media (min-width:64em){.coop-c-hero__disclaimer p{font-size:1.2499999rem}}.coop-c-hero.coop-u-black .coop-c-hero__body>a,.coop-c-hero.coop-u-black .coop-c-hero__body>p>a,.coop-c-hero.coop-u-black .coop-c-hero__body a:not(.coop-btn){color:#282828}.coop-c-hero.coop-u-white .coop-c-hero__body>a,.coop-c-hero.coop-u-white .coop-c-hero__body>p>a,.coop-c-hero.coop-u-white .coop-c-hero__body a:not(.coop-btn){color:#fff} /*# sourceMappingURL=hero.css.map */ \ No newline at end of file diff --git a/packages/shared-component--hero/dist/hero.css.map b/packages/shared-component--hero/dist/hero.css.map index e8da4466..fffd55e8 100644 --- a/packages/shared-component--hero/dist/hero.css.map +++ b/packages/shared-component--hero/dist/hero.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/hero.pcss"],"names":[],"mappings":"AAIA,aACE,eAAgB,CAEhB,kBAAgC,CAChC,iBAAkB,CAClB,SACF,CAEA,8BACE,oBAAqB,CACrB,eAA+B,CAC/B,UACF,CAEA,uCACE,iBACF,CAEA,qCACE,aAAc,CACd,eACF,CAEA,oCACE,iBAAkB,CAClB,gBACF,CAEA,4CACE,aAAc,CACd,mBACF,CAEA,gCACE,aACF,CAEA,wBACE,aACE,kBACF,CACF,CACA,mBACE,mBACF,CACA,wBACE,mBACE,oBACF,CACF,CACA,oBACE,eAAgB,CAChB,qBAA8C,CAC9C,aAAc,CACd,iBACF,CACA,wBACE,oBACE,gBACF,CACF,CACA,wBACE,oBACE,qBACF,CACF,CACA,2BACE,oBACE,mBACF,CACF,CACA,2CACE,mBACF,CACA,wBACE,2CACE,mBACF,CACF,CACA,wBACE,2CACE,mBACF,CACF,CACA,2BACE,2CACE,mBACF,CACF,CACA,wBACE,wCACE,gBACF,CACF,CACA,uCACE,mBACF,CACA,wBACE,uCACE,oBACF,CACF,CACA,oBACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,kBAA2B,CAC3B,oBACF,CACA,wBACE,oBACE,UAAW,CACX,cAAe,CACf,kBACF,CACF,CACA,wBACE,wCACE,SACF,CACF,CACA,0BACE,cACF,CACA,wBACE,0BACE,gBACF,CACF,CACA,oBACE,mBAAiC,CACjC,iBAAkB,CAClB,SACF,CACA,wBACE,oBACE,SAAU,CACV,QAAS,CACT,iBAA+B,CAC/B,WACF,CACF,CACA,oBACE,aACF,CACA,wBACE,aAAc,CACd,UACF,CACA,mBACE,iBAAkB,CAClB,SAAU,CACV,mBACF,CACA,wBACE,mBACE,UAAW,CACX,cAAe,CACf,kBACF,CACF,CACA,2BACE,mBACE,gBACF,CACF,CACA,qBACE,sBAA2B,CAC3B,gBAA8B,CAC9B,kBACF,CACA,gCACE,eACF,CACA,wBACE,qBACE,kBACF,CACA,uCACE,SACF,CACF,CACA,wBACE,6DACE,SAAU,CACV,mBACF,CACF,CACA,wBACE,6DACE,mBACF,CACF,CACA,uBACE,iBAAkB,CAClB,QAAS,CACT,QAAS,CACT,UAAW,CACX,0BAA2B,CAC3B,gBAAiB,CACjB,SAAU,CACV,YAAwC,CACxC,mBACF,CACA,wBACE,uBACE,SAAU,CACV,OAAQ,CACR,cAAe,CACf,UACF,CACF,CACA,wBACE,uBACE,OAAQ,CACR,UACF,CACF,CACA,2BACE,uBACE,UACF,CACF,CACA,wBACE,uBACE,WAAY,CACZ,UACF,CACF,CACA,8BACE,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,wBACF,CACA,4BACE,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,KAAM,CACN,MACF,CAEA,oCACE,eACF,CAEA,iFAEE,qBACF,CAEA,6BACE,YAAa,CACb,cACF,CAEA,mBACE,iBAAkB,CAClB,kBACF,CAEA,yBACE,kBACF,CAEA,2BACE,cACF,CAEA,wBACE,2BACE,sBACF,CACF,CAKA,8JAGE,aACF,CAEA,8JAGE,UACF","file":"hero.css","sourcesContent":["/* Hero */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-hero {\n overflow: hidden;\n margin: 0 auto;\n margin-bottom: var(--spacing-32);\n position: relative;\n z-index: 0;\n}\n\n.coop-c-hero .coop-c-signpost {\n display: inline-block;\n margin: var(--spacing-16) 0 0 0;\n width: auto;\n}\n\n.coop-c-hero .coop-c-signpost__content {\n min-height: 3.3rem;\n}\n\n.coop-c-hero .coop-c-signpost__title {\n flex-shrink: 0;\n flex-basis: auto;\n}\n\n.coop-c-hero .coop-c-signpost__icon {\n fill: currentColor;\n margin-left: var(--spacing-16);\n}\n\n.coop-c-hero .coop-c-signpost__icon--prefix {\n margin-left: 0;\n margin-right: var(--spacing-12);\n}\n\n.coop-c-hero .coop-c-signpost a {\n color: var(--color-text);\n}\n\n@media (--mq-medium) {\n .coop-c-hero {\n margin-bottom: var(--spacing-48);\n }\n}\n.coop-c-hero--pull {\n margin-bottom: -6rem;\n}\n@media (--mq-large) {\n .coop-c-hero--pull {\n margin-bottom: -12rem;\n }\n}\n.coop-c-hero__inner {\n max-width: 81rem;\n padding: var(--spacing-24) var(--spacing-16) 0;\n margin: 0 auto;\n position: relative;\n}\n@media (--mq-medium) {\n .coop-c-hero__inner {\n padding-top: var(--spacing-32);\n }\n}\n@media (--mq-large) {\n .coop-c-hero__inner {\n padding: var(--spacing-32) var(--spacing-24) 0;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__inner {\n padding: var(--spacing-48) var(--spacing-16) 0;\n }\n}\n.coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: var(--spacing-48);\n}\n@media (--mq-medium) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: var(--spacing-48);\n }\n}\n@media (--mq-large) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: 6rem;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: 7rem;\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--media .coop-c-hero__inner {\n padding-bottom: 0;\n }\n}\n.coop-c-hero--pull .coop-c-hero__inner {\n padding-bottom: 6rem;\n}\n@media (--mq-large) {\n .coop-c-hero--pull .coop-c-hero__inner {\n padding-bottom: 13rem;\n }\n}\n.coop-c-hero__title {\n position: relative;\n z-index: 2;\n margin: 0;\n font-size: var(--type-h1-l);\n line-height: 3.625rem;\n}\n@media (--mq-medium) {\n .coop-c-hero__title {\n float: left;\n width: 66.6666%;\n padding-right: var(--spacing-16);\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--media .coop-c-hero__title {\n width: 50%;\n }\n}\n.coop-c-hero__title--mega {\n font-size: var(--type-h1-mega-s);\n}\n@media (--mq-large) {\n .coop-c-hero__title--mega {\n font-size: var(--type-h1-mega-l);\n }\n}\n.coop-c-hero__media {\n margin: var(--spacing-16) -1rem 0;\n position: relative;\n z-index: 2;\n}\n@media (--mq-medium) {\n .coop-c-hero__media {\n width: 50%;\n margin: 0;\n padding-left: var(--spacing-16);\n float: right;\n }\n}\n.coop-c-hero__image {\n display: block;\n}\n.coop-c-hero__image img {\n display: block;\n width: 100%;\n}\n.coop-c-hero__body {\n position: relative;\n z-index: 2;\n padding-top: 1.25rem;\n}\n@media (--mq-medium) {\n .coop-c-hero__body {\n float: left;\n width: 66.6666%;\n padding-right: var(--spacing-32);\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__body {\n padding-top: var(--spacing-32);\n }\n}\n.coop-c-hero__body p {\n font-size: var(--type-sp-l);\n line-height: var(--spacing-32);\n margin-bottom: var(--spacing-16);\n}\n.coop-c-hero__body p:last-child {\n margin-bottom: 0;\n}\n@media (--mq-medium) {\n .coop-c-hero__body p {\n font-size: var(--type-lp-s);\n }\n .coop-c-hero--media .coop-c-hero__body {\n width: 50%;\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body {\n width: 50%;\n padding-bottom: var(--spacing-48);\n }\n}\n@media (--mq-large) {\n .coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body {\n padding-bottom: var(--spacing-64);\n }\n}\n.coop-c-hero__squircle {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 280%;\n transform: translateX(-50%);\n margin-left: -10%;\n z-index: 1;\n fill: var(--color-brand-coop-light-blue);\n pointer-events: none;\n}\n@media (--mq-medium) {\n .coop-c-hero__squircle {\n left: auto;\n right: 0;\n transform: none;\n width: 150%;\n }\n}\n@media (--mq-large) {\n .coop-c-hero__squircle {\n right: 0;\n width: 160%;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__squircle {\n width: 145%;\n }\n}\n@media (--mq-xxlarge) {\n .coop-c-hero__squircle {\n right: -1rem;\n width: 155%;\n }\n}\n.coop-c-hero__squircle__inner {\n position: relative;\n width: 100%;\n height: 0;\n padding-top: 95.78246393%;\n}\n.coop-c-hero__squircle__svg {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.coop-c-hero .coop-c-hero__end-date {\n margin-top: var(--spacing-16);\n}\n\n.coop-c-hero .coop-c-hero__end-date svg,\n.coop-c-hero .coop-c-hero__end-date span {\n vertical-align: middle;\n}\n\n.coop-c-hero__link-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.coop-c-hero__link {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n\n.coop-c-hero__disclaimer {\n margin-bottom: var(--spacing-16);\n}\n\n.coop-c-hero__disclaimer p {\n font-size: var(--type-sp-s);\n}\n\n@media (--mq-large) {\n .coop-c-hero__disclaimer p {\n font-size: var(--type-sp-l);\n }\n}\n\n/* target links in heros that aren't coop-btn,\n or are direct descendants of hero__body\n or direct descendants of p tags descended directly from hero__body */\n.coop-c-hero.coop-u-black .coop-c-hero__body > a,\n.coop-c-hero.coop-u-black .coop-c-hero__body > p > a,\n.coop-c-hero.coop-u-black .coop-c-hero__body a:not(.coop-btn) {\n color: var(--color-text);\n}\n\n.coop-c-hero.coop-u-white .coop-c-hero__body > a,\n.coop-c-hero.coop-u-white .coop-c-hero__body > p > a,\n.coop-c-hero.coop-u-white .coop-c-hero__body a:not(.coop-btn) {\n color: var(--color-white);\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/hero.pcss"],"names":[],"mappings":"AAIA,aACE,eAAgB,CAEhB,kBAAgC,CAChC,iBAAkB,CAClB,SACF,CAEA,8BACE,oBAAqB,CACrB,eAA+B,CAC/B,UACF,CAEA,uCACE,iBACF,CAEA,qCACE,aAAc,CACd,eACF,CAEA,oCACE,iBAAkB,CAClB,gBACF,CAEA,4CACE,aAAc,CACd,mBACF,CAEA,gCACE,aACF,CAEA,wBACE,aACE,kBACF,CACF,CACA,mBACE,mBACF,CACA,wBACE,mBACE,oBACF,CACF,CACA,oBACE,eAAgB,CAChB,qBAA8C,CAC9C,aAAc,CACd,iBACF,CACA,wBACE,oBACE,gBACF,CACF,CACA,wBACE,oBACE,qBACF,CACF,CACA,2BACE,oBACE,mBACF,CACF,CACA,2CACE,mBACF,CACA,wBACE,2CACE,mBACF,CACF,CACA,wBACE,2CACE,mBACF,CACF,CACA,2BACE,2CACE,mBACF,CACF,CACA,wBACE,wCACE,gBACF,CACF,CACA,uCACE,mBACF,CACA,wBACE,uCACE,oBACF,CACF,CACA,oBACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,kBAA2B,CAC3B,oBACF,CACA,wBACE,oBACE,UAAW,CACX,cAAe,CACf,kBACF,CACF,CACA,wBACE,wCACE,SACF,CACF,CACA,0BACE,cACF,CACA,wBACE,0BACE,gBACF,CACF,CACA,oBACE,mBAAiC,CACjC,iBAAkB,CAClB,SACF,CACA,wBACE,oBACE,SAAU,CACV,QAAS,CACT,iBAA+B,CAC/B,WACF,CACF,CACA,oBACE,aACF,CACA,wBACE,aAAc,CACd,UACF,CACA,mBACE,iBAAkB,CAClB,SAAU,CACV,mBACF,CACA,wBACE,mBACE,UAAW,CACX,cAAe,CACf,kBACF,CACF,CACA,2BACE,mBACE,gBACF,CACF,CACA,qBACE,sBAA2B,CAC3B,gBAA8B,CAC9B,kBACF,CACA,gCACE,eACF,CACA,wBACE,qBACE,kBACF,CACA,uCACE,SACF,CACF,CACA,wBACE,6DACE,SAAU,CACV,mBACF,CACF,CACA,wBACE,6DACE,mBACF,CACF,CACA,uBACE,iBAAkB,CAClB,QAAS,CACT,QAAS,CACT,UAAW,CACX,0BAA2B,CAC3B,gBAAiB,CACjB,SAAU,CACV,YAAgC,CAChC,mBACF,CAEA,wBACE,uBACE,SAAU,CACV,OAAQ,CACR,cAAe,CACf,UACF,CACF,CACA,wBACE,uBACE,OAAQ,CACR,UACF,CACF,CACA,2BACE,uBACE,UACF,CACF,CACA,wBACE,uBACE,WAAY,CACZ,UACF,CACF,CACA,8BACE,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,wBACF,CACA,4BACE,UAAW,CACX,WAAY,CACZ,iBAAkB,CAClB,KAAM,CACN,MACF,CAEA,oCACE,eACF,CAEA,iFAEE,qBACF,CAEA,6BACE,YAAa,CACb,cACF,CAEA,mBACE,iBAAkB,CAClB,kBACF,CAEA,yBACE,kBACF,CAEA,2BACE,cACF,CAEA,wBACE,2BACE,sBACF,CACF,CAKA,8JAGE,aACF,CAEA,8JAGE,UACF","file":"hero.css","sourcesContent":["/* Hero */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-hero {\n overflow: hidden;\n margin: 0 auto;\n margin-bottom: var(--spacing-32);\n position: relative;\n z-index: 0;\n}\n\n.coop-c-hero .coop-c-signpost {\n display: inline-block;\n margin: var(--spacing-16) 0 0 0;\n width: auto;\n}\n\n.coop-c-hero .coop-c-signpost__content {\n min-height: 3.3rem;\n}\n\n.coop-c-hero .coop-c-signpost__title {\n flex-shrink: 0;\n flex-basis: auto;\n}\n\n.coop-c-hero .coop-c-signpost__icon {\n fill: currentColor;\n margin-left: var(--spacing-16);\n}\n\n.coop-c-hero .coop-c-signpost__icon--prefix {\n margin-left: 0;\n margin-right: var(--spacing-12);\n}\n\n.coop-c-hero .coop-c-signpost a {\n color: var(--color-text);\n}\n\n@media (--mq-medium) {\n .coop-c-hero {\n margin-bottom: var(--spacing-48);\n }\n}\n.coop-c-hero--pull {\n margin-bottom: -6rem;\n}\n@media (--mq-large) {\n .coop-c-hero--pull {\n margin-bottom: -12rem;\n }\n}\n.coop-c-hero__inner {\n max-width: 81rem;\n padding: var(--spacing-24) var(--spacing-16) 0;\n margin: 0 auto;\n position: relative;\n}\n@media (--mq-medium) {\n .coop-c-hero__inner {\n padding-top: var(--spacing-32);\n }\n}\n@media (--mq-large) {\n .coop-c-hero__inner {\n padding: var(--spacing-32) var(--spacing-24) 0;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__inner {\n padding: var(--spacing-48) var(--spacing-16) 0;\n }\n}\n.coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: var(--spacing-48);\n}\n@media (--mq-medium) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: var(--spacing-48);\n }\n}\n@media (--mq-large) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: 6rem;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero--squircle .coop-c-hero__inner {\n padding-bottom: 7rem;\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--media .coop-c-hero__inner {\n padding-bottom: 0;\n }\n}\n.coop-c-hero--pull .coop-c-hero__inner {\n padding-bottom: 6rem;\n}\n@media (--mq-large) {\n .coop-c-hero--pull .coop-c-hero__inner {\n padding-bottom: 13rem;\n }\n}\n.coop-c-hero__title {\n position: relative;\n z-index: 2;\n margin: 0;\n font-size: var(--type-h1-l);\n line-height: 3.625rem;\n}\n@media (--mq-medium) {\n .coop-c-hero__title {\n float: left;\n width: 66.6666%;\n padding-right: var(--spacing-16);\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--media .coop-c-hero__title {\n width: 50%;\n }\n}\n.coop-c-hero__title--mega {\n font-size: var(--type-h1-mega-s);\n}\n@media (--mq-large) {\n .coop-c-hero__title--mega {\n font-size: var(--type-h1-mega-l);\n }\n}\n.coop-c-hero__media {\n margin: var(--spacing-16) -1rem 0;\n position: relative;\n z-index: 2;\n}\n@media (--mq-medium) {\n .coop-c-hero__media {\n width: 50%;\n margin: 0;\n padding-left: var(--spacing-16);\n float: right;\n }\n}\n.coop-c-hero__image {\n display: block;\n}\n.coop-c-hero__image img {\n display: block;\n width: 100%;\n}\n.coop-c-hero__body {\n position: relative;\n z-index: 2;\n padding-top: 1.25rem;\n}\n@media (--mq-medium) {\n .coop-c-hero__body {\n float: left;\n width: 66.6666%;\n padding-right: var(--spacing-32);\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__body {\n padding-top: var(--spacing-32);\n }\n}\n.coop-c-hero__body p {\n font-size: var(--type-sp-l);\n line-height: var(--spacing-32);\n margin-bottom: var(--spacing-16);\n}\n.coop-c-hero__body p:last-child {\n margin-bottom: 0;\n}\n@media (--mq-medium) {\n .coop-c-hero__body p {\n font-size: var(--type-lp-s);\n }\n .coop-c-hero--media .coop-c-hero__body {\n width: 50%;\n }\n}\n@media (--mq-medium) {\n .coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body {\n width: 50%;\n padding-bottom: var(--spacing-48);\n }\n}\n@media (--mq-large) {\n .coop-c-hero--squircle.coop-c-hero--media .coop-c-hero__body {\n padding-bottom: var(--spacing-64);\n }\n}\n.coop-c-hero__squircle {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: 280%;\n transform: translateX(-50%);\n margin-left: -10%;\n z-index: 1;\n fill: var(--color-blue-light-10);\n pointer-events: none;\n}\n/* --color-blue-light-10 */\n@media (--mq-medium) {\n .coop-c-hero__squircle {\n left: auto;\n right: 0;\n transform: none;\n width: 150%;\n }\n}\n@media (--mq-large) {\n .coop-c-hero__squircle {\n right: 0;\n width: 160%;\n }\n}\n@media (--mq-xlarge) {\n .coop-c-hero__squircle {\n width: 145%;\n }\n}\n@media (--mq-xxlarge) {\n .coop-c-hero__squircle {\n right: -1rem;\n width: 155%;\n }\n}\n.coop-c-hero__squircle__inner {\n position: relative;\n width: 100%;\n height: 0;\n padding-top: 95.78246393%;\n}\n.coop-c-hero__squircle__svg {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.coop-c-hero .coop-c-hero__end-date {\n margin-top: var(--spacing-16);\n}\n\n.coop-c-hero .coop-c-hero__end-date svg,\n.coop-c-hero .coop-c-hero__end-date span {\n vertical-align: middle;\n}\n\n.coop-c-hero__link-container {\n display: flex;\n flex-wrap: wrap;\n}\n\n.coop-c-hero__link {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n\n.coop-c-hero__disclaimer {\n margin-bottom: var(--spacing-16);\n}\n\n.coop-c-hero__disclaimer p {\n font-size: var(--type-sp-s);\n}\n\n@media (--mq-large) {\n .coop-c-hero__disclaimer p {\n font-size: var(--type-sp-l);\n }\n}\n\n/* target links in heros that aren't coop-btn,\n or are direct descendants of hero__body\n or direct descendants of p tags descended directly from hero__body */\n.coop-c-hero.coop-u-black .coop-c-hero__body > a,\n.coop-c-hero.coop-u-black .coop-c-hero__body > p > a,\n.coop-c-hero.coop-u-black .coop-c-hero__body a:not(.coop-btn) {\n color: var(--color-text);\n}\n\n.coop-c-hero.coop-u-white .coop-c-hero__body > a,\n.coop-c-hero.coop-u-white .coop-c-hero__body > p > a,\n.coop-c-hero.coop-u-white .coop-c-hero__body a:not(.coop-btn) {\n color: var(--color-white);\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--hero/package.json b/packages/shared-component--hero/package.json index 97b13f40..b2c7f137 100755 --- a/packages/shared-component--hero/package.json +++ b/packages/shared-component--hero/package.json @@ -19,12 +19,12 @@ "directory": "packages/shared-component--hero" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2", + "@coopdigital/foundations": "^1.2.1", "@coopdigital/shared-component--link": "^1.8.6", "@coopdigital/shared-component--signpost": "^2.6.4" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4", + "@coopdigital/foundations": ">= 1.2.0 < 2", "@coopdigital/shared-component--link": ">=1.5.0 < 2", "@coopdigital/shared-component--signpost": ">= 2.3.0 < 3" }, diff --git a/packages/shared-component--hero/src/hero.pcss b/packages/shared-component--hero/src/hero.pcss index fb4e4a2c..617293dd 100755 --- a/packages/shared-component--hero/src/hero.pcss +++ b/packages/shared-component--hero/src/hero.pcss @@ -1,6 +1,6 @@ /* Hero */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-hero { overflow: hidden; @@ -203,9 +203,10 @@ transform: translateX(-50%); margin-left: -10%; z-index: 1; - fill: var(--color-brand-coop-light-blue); + fill: var(--color-blue-light-10); pointer-events: none; } +/* --color-blue-light-10 */ @media (--mq-medium) { .coop-c-hero__squircle { left: auto; diff --git a/packages/shared-component--image/dist/image.css.map b/packages/shared-component--image/dist/image.css.map index 8f51bdad..7ac05458 100644 --- a/packages/shared-component--image/dist/image.css.map +++ b/packages/shared-component--image/dist/image.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/image.pcss"],"names":[],"mappings":"AAIA,cACE,gBAMF,CAJE,kBACE,UAAW,CACX,aACF,CAGF,uBACE,eAKF,CAHE,wBAHF,uBAII,kBAEJ,CADE","file":"image.css","sourcesContent":["/* Image */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-image {\n margin: 0 0 var(--spacing-base--1-4) 0;\n\n & img {\n width: 100%;\n display: block;\n }\n}\n\n.section .coop-c-image {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin-bottom: 2rem;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/image.pcss"],"names":[],"mappings":"AAIA,cACE,gBAMF,CAJE,kBACE,UAAW,CACX,aACF,CAGF,uBACE,eAKF,CAHE,wBAHF,uBAII,kBAEJ,CADE","file":"image.css","sourcesContent":["/* Image */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-image {\n margin: 0 0 var(--spacing-base--1-4) 0;\n\n & img {\n width: 100%;\n display: block;\n }\n}\n\n.section .coop-c-image {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin-bottom: 2rem;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--image/package.json b/packages/shared-component--image/package.json index 971a9533..ddc7b235 100755 --- a/packages/shared-component--image/package.json +++ b/packages/shared-component--image/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--image" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--image/src/image.pcss b/packages/shared-component--image/src/image.pcss index 6cb5cbec..05d3014e 100755 --- a/packages/shared-component--image/src/image.pcss +++ b/packages/shared-component--image/src/image.pcss @@ -1,6 +1,6 @@ /* Image */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-image { margin: 0 0 var(--spacing-base--1-4) 0; diff --git a/packages/shared-component--linkList/dist/linkList.css.map b/packages/shared-component--linkList/dist/linkList.css.map index 0ed0e4ac..1509deb2 100644 --- a/packages/shared-component--linkList/dist/linkList.css.map +++ b/packages/shared-component--linkList/dist/linkList.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/linkList.pcss"],"names":[],"mappings":"AAEA,uBACE,kBAKF,CAHE,wBAHF,uBAII,kBAEJ,CADE,CAGF,8BACE,+BACF,CAEA,6BACE,oBAAqB,CACrB,SAAU,CACV,YAKF,CAHE,gCACE,mBACF,CAOF,2JAGE,aACF","file":"linkList.css","sourcesContent":["@import \"@coopdigital/foundations-vars\";\n\n.coop-c-list-container {\n margin-bottom: var(--spacing-32);\n\n @media (--mq-large) {\n margin-bottom: var(--spacing-64);\n }\n}\n\n.coop-c-list-container__title {\n border-bottom: 1px solid var(--color-grey-mid);\n}\n\n.coop-c-list-container__list {\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n\n & li {\n margin-bottom: var(--spacing-8);\n }\n}\n\n.coop-c-list-container__list-link {\n color: var(--color-text);\n}\n\n.coop-c-list-container__list-link:hover,\n.coop-c-list-container__list-link:focus,\n.coop-c-list-container__list-link:active {\n color: var(--color-text);\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/linkList.pcss"],"names":[],"mappings":"AAEA,uBACE,kBAKF,CAHE,wBAHF,uBAII,kBAEJ,CADE,CAGF,8BACE,+BACF,CAEA,6BACE,oBAAqB,CACrB,SAAU,CACV,YAKF,CAHE,gCACE,mBACF,CAOF,2JAGE,aACF","file":"linkList.css","sourcesContent":["@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-list-container {\n margin-bottom: var(--spacing-32);\n\n @media (--mq-large) {\n margin-bottom: var(--spacing-64);\n }\n}\n\n.coop-c-list-container__title {\n border-bottom: 1px solid var(--color-grey-mid);\n}\n\n.coop-c-list-container__list {\n list-style-type: none;\n padding: 0;\n margin-top: 0;\n\n & li {\n margin-bottom: var(--spacing-8);\n }\n}\n\n.coop-c-list-container__list-link {\n color: var(--color-text);\n}\n\n.coop-c-list-container__list-link:hover,\n.coop-c-list-container__list-link:focus,\n.coop-c-list-container__list-link:active {\n color: var(--color-text);\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--linkList/package.json b/packages/shared-component--linkList/package.json index 74b823df..c09d254c 100755 --- a/packages/shared-component--linkList/package.json +++ b/packages/shared-component--linkList/package.json @@ -20,11 +20,11 @@ "directory": "packages/shared-component--linklist" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2", + "@coopdigital/foundations": "^1.2.1", "@coopdigital/shared-component--link": "^1.8.6" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4", + "@coopdigital/foundations": ">= 1.2.0 < 2", "@coopdigital/shared-component--link": ">= 1.5.0" }, "bugs": { diff --git a/packages/shared-component--linkList/src/linkList.pcss b/packages/shared-component--linkList/src/linkList.pcss index 31cc8467..3e2a4d4e 100755 --- a/packages/shared-component--linkList/src/linkList.pcss +++ b/packages/shared-component--linkList/src/linkList.pcss @@ -1,4 +1,4 @@ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-list-container { margin-bottom: var(--spacing-32); diff --git a/packages/shared-component--membership/dist/membership.css.map b/packages/shared-component--membership/dist/membership.css.map index 33218661..17df8e61 100644 --- a/packages/shared-component--membership/dist/membership.css.map +++ b/packages/shared-component--membership/dist/membership.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/membership.pcss"],"names":[],"mappings":"AAIA,yBACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,gCACE,iBAAkB,CAClB,eAAgB,CAChB,aAAc,CACd,wBAaF,CAXE,0BANF,gCAOI,iBAUJ,CATE,CAEA,wBAVF,gCAWI,wBAMJ,CALE,CAEA,2BAdF,gCAeI,sBAEJ,CADE,CAIA,0BADF,kCAEI,SAAU,CACV,WAAY,CACZ,mBAYJ,CAXE,CAEA,wBAPF,kCAQI,kBAAmB,CACnB,kBAOJ,CANE,CAEA,2BAZF,kCAaI,kBAAmB,CACnB,SAEJ,CADE,CAGF,gCACE,kBAKF,CAHE,wBAHF,gCAII,cAEJ,CADE,CAGF,+BACE,eAKF,CAHE,wBAHF,+BAII,iBAEJ,CADE,CAGF,gCACE,eAKF,CAHE,wBAHF,gCAII,iBAEJ,CADE,CAGF,+BACE,aAA2B,CAC3B,SAAU,CACV,eAKF,CAHE,wBALF,+BAMI,iBAEJ,CADE,CAGF,gCACE,iBAAkB,CAElB,YAAa,CACb,kBAA6C,CAC7C,iBAiBF,CAfE,0BAPF,gCAQI,iBAAkB,CAClB,WAAyB,CACzB,MAAO,CACP,SAAU,CACV,QAUJ,CATE,CAEA,wBAfF,gCAgBI,YAMJ,CALE,CAEA,2BAnBF,gCAoBI,SAEJ,CADE,CAGF,kCACE,iBAAkB,CAClB,SAAU,CAEV,oBAAqB,CACrB,WAAY,CACZ,YAAa,CACb,eAAqC,CAErC,uBAAwB,CACxB,wCAKF,CAHE,wBAZF,kCAaI,kBAEJ,CADE,CAGF,+BACE,YACF,CAEA,+BACE,SACF,CAEA,kEAEE,aAAc,CACd,WAAY,CACZ,WAKF,CAHE,wBANF,kEAOI,WAEJ,CADE,CAGF,oCACE,iBAAkB,CAClB,SAAU,CACV,KAAM,CACN,QAAS,CACT,kBAKF,CAHE,wBAPF,oCAQI,kBAEJ,CADE,CAGF,+BACE,SAAU,CACV,cACF,CAGA,iFAEE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,SAAU,CAEV,4BAAgE,CAChE,UACF,CAGA,yCACE,YAAa,CACb,MAAO,CACP,iBAmBF,CAjBE,0BALF,yCAMI,YAAa,CACb,aAAc,CACd,SAcJ,CAbE,CAEA,wBAXF,yCAYI,YAAa,CACb,kBASJ,CARE,CAEA,2BAhBF,yCAiBI,UAAW,CACX,SAAU,CACV,SAAU,CACV,8BAEJ,CADE,CAIF,wCACE,WAAY,CACZ,QAAS,CACT,gBAiBF,CAfE,0BALF,wCAMI,WAAY,CACZ,QAAmB,CACnB,SAYJ,CAXE,CAEA,wBAXF,wCAYI,WAAY,CACZ,iBAOJ,CANE,CAEA,2BAhBF,wCAiBI,QAAmB,CACnB,UAEJ,CADE","file":"membership.css","sourcesContent":["/* Membership component */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-membershipmodule {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-c-membershipmodule__inner {\n position: relative;\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) var(--spacing-32);\n\n @media (--mq-small) {\n padding: var(--spacing-32) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-48);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-membershipmodule__content {\n @media (--mq-small) {\n width: 62%;\n float: right;\n padding-bottom: var(--spacing-32);\n }\n\n @media (--mq-medium) {\n max-width: 38.75rem; /* 620px */\n padding-right: var(--spacing-32);\n }\n\n @media (--mq-xlarge) {\n max-width: 43.75rem; /* 700px */\n width: 50%;\n }\n}\n\n.coop-c-membershipmodule__title {\n font-size: var(--type-h2-s);\n\n @media (--mq-medium) {\n font-size: var(--type-h2-l);\n }\n}\n\n.coop-c-membershipmodule__btns {\n margin-top: var(--spacing-16);\n\n @media (--mq-medium) {\n margin-top: var(--spacing-24);\n }\n}\n\n.coop-c-membershipmodule__links {\n margin: var(--spacing-16) 0 0;\n\n @media (--mq-medium) {\n margin-top: var(--spacing-24);\n }\n}\n\n.coop-c-membershipmodule__list {\n margin: var(--spacing-16) 0;\n padding: 0;\n list-style: none;\n\n @media (--mq-medium) {\n margin-top: var(--spacing-24);\n }\n}\n\n.coop-c-membershipmodule__media {\n position: relative;\n\n height: 304px;\n margin: var(--spacing-48) 0 var(--spacing-16);\n text-align: center;\n\n @media (--mq-small) {\n position: absolute;\n bottom: var(--spacing-32);\n left: 0;\n width: 38%;\n margin: 0;\n }\n\n @media (--mq-large) {\n height: 433px;\n }\n\n @media (--mq-xlarge) {\n width: 50%;\n }\n}\n\n.coop-c-membershipmodule__graphic {\n position: relative;\n z-index: 2;\n\n display: inline-block;\n width: 150px;\n height: 224px;\n margin-top: calc((304px - 224px) / 2);\n\n transform: rotate(-8deg);\n box-shadow: 0 4px 16px rgba(40, 40, 40, 0.24);\n\n @media (--mq-large) {\n margin-top: calc((433px - 224px) / 2);\n }\n}\n\n.coop-c-membershipmodule__card {\n fill: var(--color-brand-coop);\n}\n\n.coop-c-membershipmodule__logo {\n fill: var(--color-white);\n}\n\n.coop-c-membershipmodule__connector,\n.coop-c-membershipmodule__svg {\n display: block;\n width: 288px;\n height: 100%;\n\n @media (--mq-large) {\n width: 392px;\n }\n}\n\n.coop-c-membershipmodule__connector {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 50%;\n margin-left: calc(288px / -2);\n\n @media (--mq-large) {\n margin-left: calc(392px / -2);\n }\n}\n\n.coop-c-membershipmodule__path {\n fill: none;\n stroke: var(--color-brand-membership-blue-light-9);\n}\n\n/* Fake connector repeating lines */\n.coop-c-membershipmodule__content:before,\n.coop-c-membershipmodule__content:after {\n position: absolute;\n z-index: 0;\n bottom: 0;\n width: 50%;\n\n border-top: 8px solid var(--color-brand-membership-blue-light-9);\n content: \"\";\n}\n\n/* Fake connector repeating lines (left) */\n.coop-c-membershipmodule__content:before {\n bottom: 344px;\n left: 0;\n margin-left: -76px;\n\n @media (--mq-small) {\n bottom: 328px;\n display: block;\n width: calc(38% / 2);\n }\n\n @media (--mq-large) {\n bottom: 446px;\n margin-left: -104px;\n }\n\n @media (--mq-xlarge) {\n width: 100%;\n right: 50%;\n left: auto;\n margin-right: calc((50% / 2) + 104px);\n }\n}\n\n/* Fake connector repeating lines (right) */\n.coop-c-membershipmodule__content:after {\n bottom: 48px;\n left: 50%;\n margin-left: 76px;\n\n @media (--mq-small) {\n bottom: 32px;\n left: calc(38% / 2);\n width: calc(62% + (38% / 2));\n }\n\n @media (--mq-large) {\n bottom: 43px;\n margin-left: 104px;\n }\n\n @media (--mq-xlarge) {\n left: calc(50% / 2);\n width: 100%;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/membership.pcss"],"names":[],"mappings":"AAIA,yBACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,gCACE,iBAAkB,CAClB,eAAgB,CAChB,aAAc,CACd,wBAaF,CAXE,0BANF,gCAOI,iBAUJ,CATE,CAEA,wBAVF,gCAWI,wBAMJ,CALE,CAEA,2BAdF,gCAeI,sBAEJ,CADE,CAIA,0BADF,kCAEI,SAAU,CACV,WAAY,CACZ,mBAYJ,CAXE,CAEA,wBAPF,kCAQI,kBAAmB,CACnB,kBAOJ,CANE,CAEA,2BAZF,kCAaI,kBAAmB,CACnB,SAEJ,CADE,CAGF,gCACE,kBAKF,CAHE,wBAHF,gCAII,cAEJ,CADE,CAGF,+BACE,eAKF,CAHE,wBAHF,+BAII,iBAEJ,CADE,CAGF,gCACE,eAKF,CAHE,wBAHF,gCAII,iBAEJ,CADE,CAGF,+BACE,aAA2B,CAC3B,SAAU,CACV,eAKF,CAHE,wBALF,+BAMI,iBAEJ,CADE,CAGF,gCACE,iBAAkB,CAElB,YAAa,CACb,kBAA6C,CAC7C,iBAiBF,CAfE,0BAPF,gCAQI,iBAAkB,CAClB,WAAyB,CACzB,MAAO,CACP,SAAU,CACV,QAUJ,CATE,CAEA,wBAfF,gCAgBI,YAMJ,CALE,CAEA,2BAnBF,gCAoBI,SAEJ,CADE,CAGF,kCACE,iBAAkB,CAClB,SAAU,CAEV,oBAAqB,CACrB,WAAY,CACZ,YAAa,CACb,eAAqC,CAErC,uBAAwB,CACxB,wCAKF,CAHE,wBAZF,kCAaI,kBAEJ,CADE,CAGF,+BACE,YACF,CAEA,+BACE,SACF,CAEA,kEAEE,aAAc,CACd,WAAY,CACZ,WAKF,CAHE,wBANF,kEAOI,WAEJ,CADE,CAGF,oCACE,iBAAkB,CAClB,SAAU,CACV,KAAM,CACN,QAAS,CACT,kBAKF,CAHE,wBAPF,oCAQI,kBAEJ,CADE,CAGF,+BACE,SAAU,CACV,cACF,CAGA,iFAEE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,SAAU,CAEV,4BAAgE,CAChE,UACF,CAGA,yCACE,YAAa,CACb,MAAO,CACP,iBAmBF,CAjBE,0BALF,yCAMI,YAAa,CACb,aAAc,CACd,SAcJ,CAbE,CAEA,wBAXF,yCAYI,YAAa,CACb,kBASJ,CARE,CAEA,2BAhBF,yCAiBI,UAAW,CACX,SAAU,CACV,SAAU,CACV,8BAEJ,CADE,CAIF,wCACE,WAAY,CACZ,QAAS,CACT,gBAiBF,CAfE,0BALF,wCAMI,WAAY,CACZ,QAAmB,CACnB,SAYJ,CAXE,CAEA,wBAXF,wCAYI,WAAY,CACZ,iBAOJ,CANE,CAEA,2BAhBF,wCAiBI,QAAmB,CACnB,UAEJ,CADE","file":"membership.css","sourcesContent":["/* Membership component */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-membershipmodule {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-c-membershipmodule__inner {\n position: relative;\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) var(--spacing-32);\n\n @media (--mq-small) {\n padding: var(--spacing-32) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-48);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-membershipmodule__content {\n @media (--mq-small) {\n width: 62%;\n float: right;\n padding-bottom: var(--spacing-32);\n }\n\n @media (--mq-medium) {\n max-width: 38.75rem; /* 620px */\n padding-right: var(--spacing-32);\n }\n\n @media (--mq-xlarge) {\n max-width: 43.75rem; /* 700px */\n width: 50%;\n }\n}\n\n.coop-c-membershipmodule__title {\n font-size: var(--type-h2-s);\n\n @media (--mq-medium) {\n font-size: var(--type-h2-l);\n }\n}\n\n.coop-c-membershipmodule__btns {\n margin-top: var(--spacing-16);\n\n @media (--mq-medium) {\n margin-top: var(--spacing-24);\n }\n}\n\n.coop-c-membershipmodule__links {\n margin: var(--spacing-16) 0 0;\n\n @media (--mq-medium) {\n margin-top: var(--spacing-24);\n }\n}\n\n.coop-c-membershipmodule__list {\n margin: var(--spacing-16) 0;\n padding: 0;\n list-style: none;\n\n @media (--mq-medium) {\n margin-top: var(--spacing-24);\n }\n}\n\n.coop-c-membershipmodule__media {\n position: relative;\n\n height: 304px;\n margin: var(--spacing-48) 0 var(--spacing-16);\n text-align: center;\n\n @media (--mq-small) {\n position: absolute;\n bottom: var(--spacing-32);\n left: 0;\n width: 38%;\n margin: 0;\n }\n\n @media (--mq-large) {\n height: 433px;\n }\n\n @media (--mq-xlarge) {\n width: 50%;\n }\n}\n\n.coop-c-membershipmodule__graphic {\n position: relative;\n z-index: 2;\n\n display: inline-block;\n width: 150px;\n height: 224px;\n margin-top: calc((304px - 224px) / 2);\n\n transform: rotate(-8deg);\n box-shadow: 0 4px 16px rgba(40, 40, 40, 0.24);\n\n @media (--mq-large) {\n margin-top: calc((433px - 224px) / 2);\n }\n}\n\n.coop-c-membershipmodule__card {\n fill: var(--color-brand-coop);\n}\n\n.coop-c-membershipmodule__logo {\n fill: var(--color-white);\n}\n\n.coop-c-membershipmodule__connector,\n.coop-c-membershipmodule__svg {\n display: block;\n width: 288px;\n height: 100%;\n\n @media (--mq-large) {\n width: 392px;\n }\n}\n\n.coop-c-membershipmodule__connector {\n position: absolute;\n z-index: 1;\n top: 0;\n left: 50%;\n margin-left: calc(288px / -2);\n\n @media (--mq-large) {\n margin-left: calc(392px / -2);\n }\n}\n\n.coop-c-membershipmodule__path {\n fill: none;\n stroke: var(--color-brand-membership-blue-light-9);\n}\n\n/* Fake connector repeating lines */\n.coop-c-membershipmodule__content:before,\n.coop-c-membershipmodule__content:after {\n position: absolute;\n z-index: 0;\n bottom: 0;\n width: 50%;\n\n border-top: 8px solid var(--color-brand-membership-blue-light-9);\n content: \"\";\n}\n\n/* Fake connector repeating lines (left) */\n.coop-c-membershipmodule__content:before {\n bottom: 344px;\n left: 0;\n margin-left: -76px;\n\n @media (--mq-small) {\n bottom: 328px;\n display: block;\n width: calc(38% / 2);\n }\n\n @media (--mq-large) {\n bottom: 446px;\n margin-left: -104px;\n }\n\n @media (--mq-xlarge) {\n width: 100%;\n right: 50%;\n left: auto;\n margin-right: calc((50% / 2) + 104px);\n }\n}\n\n/* Fake connector repeating lines (right) */\n.coop-c-membershipmodule__content:after {\n bottom: 48px;\n left: 50%;\n margin-left: 76px;\n\n @media (--mq-small) {\n bottom: 32px;\n left: calc(38% / 2);\n width: calc(62% + (38% / 2));\n }\n\n @media (--mq-large) {\n bottom: 43px;\n margin-left: 104px;\n }\n\n @media (--mq-xlarge) {\n left: calc(50% / 2);\n width: 100%;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--membership/package.json b/packages/shared-component--membership/package.json index e3e303e9..a6a89db3 100755 --- a/packages/shared-component--membership/package.json +++ b/packages/shared-component--membership/package.json @@ -20,14 +20,12 @@ "directory": "packages/shared-component--membership" }, "devDependencies": { - "@coopdigital/foundations-buttons": "^2.7.0", - "@coopdigital/foundations-layout": "^3.3.6", - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations-buttons": "^2.6.0", + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { "@coopdigital/foundations-buttons": ">= 2.2.3 < 3", - "@coopdigital/foundations-layout": ">= 3.1.13 < 4", - "@coopdigital/foundations-vars": ">= 3.1.8 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--membership/src/membership.pcss b/packages/shared-component--membership/src/membership.pcss index 7f786dba..c9544879 100755 --- a/packages/shared-component--membership/src/membership.pcss +++ b/packages/shared-component--membership/src/membership.pcss @@ -1,6 +1,6 @@ /* Membership component */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-membershipmodule { position: relative; diff --git a/packages/shared-component--membershipFeatured/dist/membership-featured.css.map b/packages/shared-component--membershipFeatured/dist/membership-featured.css.map index af0d3cb8..2f7f2901 100644 --- a/packages/shared-component--membershipFeatured/dist/membership-featured.css.map +++ b/packages/shared-component--membershipFeatured/dist/membership-featured.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/membership-featured.pcss"],"names":[],"mappings":"AAIA,4BACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,mCACE,iBAAkB,CAClB,eAAgB,CAChB,aAAc,CACd,sBAA8D,CAC9D,oBASF,CAPE,wBAPF,mCAQI,mBAMJ,CALE,CAEA,2BAXF,mCAYI,sBAEJ,CADE,CAGF,mCACE,oBAMF,CAJE,wBAHF,mCAII,aAAc,CACd,kBAEJ,CADE,CAGF,mCACE,oBACF,CAEA,kCACE,iBAAkB,CAClB,SACF,CAEA,mCACE,iBAAkB,CAClB,SAAU,CAEV,kBAaF,CAXE,+CACE,eACF,CAEA,0BAVF,mCAWI,oBAMJ,CALE,CAEA,2BAdF,mCAeI,kBAEJ,CADE,CAIF,6HAGE,iBAAkB,CAElB,gBAAqB,CAArB,oBAAqB,CACrB,UACF,CAGA,mFAEE,YACF,CAEA,0CACE,wBAAsC,CACtC,UAAW,CACX,UAAW,CAEX,QAAS,CACT,oBAKF,CAHE,2BARF,0CASI,aAEJ,CADE,CAGF,0CACE,SAAU,CACV,YAAa,CACb,WAAY,CAEZ,OAAQ,CACR,yBAAkC,CAClC,sBAsBF,CApBE,0BATF,0CAUI,UAAW,CACX,UAkBJ,CAjBE,CAEA,wBAdF,0CAeI,QAAS,CACT,WAAY,CACZ,sBAAuB,CACvB,UAAW,CAEX,aAAc,CACd,wBAAyB,CACzB,QAAS,CACT,oBAMJ,CALE,CAEA,wBA1BF,0CA2BI,sBAEJ,CADE,CAGF,6EACE,uBAKF,CAHE,wBAHF,6EAII,uBAEJ,CADE,CAGF,uCACE,iBAAkB,CAClB,SAAU,CACV,SACF,CAEA,6CACE,YAAa,CACb,WAAY,CACZ,YAAa,CAEb,WAAY,CACZ,YAiBF,CAfE,0BARF,6CASI,aAcJ,CAbE,CAEA,wBAZF,6CAaI,WAUJ,CATE,CAEA,wBAhBF,6CAiBI,WAMJ,CALE,CAEA,2BApBF,6CAqBI,YAEJ,CADE,CAGF,8CACE,SAAU,CACV,UAAW,CAEX,WAAY,CACZ,YAoBF,CAlBE,0BAPF,8CAQI,UAAW,CACX,UAgBJ,CAfE,CAEA,wBAZF,8CAaI,WAAY,CACZ,SAAU,CACV,UAUJ,CATE,CAEA,wBAlBF,8CAmBI,WAMJ,CALE,CAEA,2BAtBF,8CAuBI,UAEJ,CADE,CAIF,mFAGE,YAKF,CAHE,wBALF,mFAMI,aAEJ,CADE","file":"membership-featured.css","sourcesContent":["/* Membership featured */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-membership-featured {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-c-membership-featured__inner {\n position: relative;\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-64) var(--spacing-16) var(--spacing-48);\n border-color: inherit;\n\n @media (--mq-large) {\n padding: var(--spacing-48) var(--spacing-24);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-64) var(--spacing-16) var(--spacing-48);\n }\n}\n\n.coop-c-membership-featured__title {\n margin-bottom: var(--spacing-24);\n\n @media (--mq-medium) {\n max-width: 75%;\n margin-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-membership-featured__cards {\n border-color: inherit;\n}\n\n.coop-c-membership-featured__grid {\n position: relative;\n z-index: 1;\n}\n\n.coop-c-membership-featured__about {\n position: relative;\n z-index: 1;\n\n font-size: var(--type-body-s);\n\n & :last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-small) {\n margin: var(--spacing-24) 0 var(--spacing-16);\n }\n\n @media (--mq-xlarge) {\n margin: var(--spacing-48) 0 var(--spacing-32);\n }\n}\n\n/* Fake connector repeating lines */\n.coop-c-membership-featured__inner:before,\n.coop-c-membership-featured__cards:before,\n.coop-c-membership-featured__cards:after {\n position: absolute;\n border: 8px solid;\n border-color: inherit;\n content: \"\";\n}\n\n/* Straight line connectors */\n.coop-c-membership-featured__inner:before,\n.coop-c-membership-featured__cards:after {\n display: none;\n}\n\n.coop-c-membership-featured__inner:before {\n bottom: calc(var(--spacing-64) + 71px);\n width: 100%;\n right: 100%;\n\n height: 0;\n border-width: 8px 0 0;\n\n @media (--mq-xlarge) {\n display: block;\n }\n}\n\n.coop-c-membership-featured__cards:before {\n top: 350px;\n bottom: 350px;\n right: 251px;\n\n width: 0;\n height: calc(100% - 350px - 350px);\n border-width: 0 0 0 8px;\n\n @media (--mq-small) {\n right: auto;\n left: 100px;\n }\n\n @media (--mq-medium) {\n top: auto;\n right: 100px;\n bottom: calc(50% - 4px);\n left: 100px;\n\n display: block;\n width: calc(100% - 200px);\n height: 0;\n border-width: 8px 0 0;\n }\n\n @media (--mq-large) {\n bottom: calc(45% - 4px);\n }\n}\n\n.coop-c-membership-featured__title + .coop-c-membership-featured__cards:before {\n bottom: calc(50% + 70px);\n\n @media (--mq-large) {\n bottom: calc(45% + 70px);\n }\n}\n\n.coop-c-membership-featured__connector {\n position: absolute;\n z-index: 0;\n fill: none;\n}\n\n.coop-c-membership-featured__connector--left {\n bottom: 110px;\n left: -392px;\n display: none;\n\n width: 500px;\n height: 212px;\n\n @media (--mq-small) {\n display: block;\n }\n\n @media (--mq-medium) {\n left: -330px;\n }\n\n @media (--mq-large) {\n left: -290px;\n }\n\n @media (--mq-xlarge) {\n bottom: 135px;\n }\n}\n\n.coop-c-membership-featured__connector--right {\n top: -62px;\n right: 26px;\n\n width: 233px;\n height: 391px;\n\n @media (--mq-small) {\n right: auto;\n left: 100px;\n }\n\n @media (--mq-medium) {\n right: -77px;\n left: auto;\n top: -230px;\n }\n\n @media (--mq-large) {\n right: -37px;\n }\n\n @media (--mq-xlarge) {\n right: -7px;\n }\n}\n\n/* Avoid overlapping title */\n.coop-c-membership-featured__title\n + *\n .coop-c-membership-featured__connector--right {\n display: none;\n\n @media (--mq-medium) {\n display: block;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/membership-featured.pcss"],"names":[],"mappings":"AAIA,4BACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,mCACE,iBAAkB,CAClB,eAAgB,CAChB,aAAc,CACd,sBAA8D,CAC9D,oBASF,CAPE,wBAPF,mCAQI,mBAMJ,CALE,CAEA,2BAXF,mCAYI,sBAEJ,CADE,CAGF,mCACE,oBAMF,CAJE,wBAHF,mCAII,aAAc,CACd,kBAEJ,CADE,CAGF,mCACE,oBACF,CAEA,kCACE,iBAAkB,CAClB,SACF,CAEA,mCACE,iBAAkB,CAClB,SAAU,CAEV,kBAaF,CAXE,+CACE,eACF,CAEA,0BAVF,mCAWI,oBAMJ,CALE,CAEA,2BAdF,mCAeI,kBAEJ,CADE,CAIF,6HAGE,iBAAkB,CAElB,gBAAqB,CAArB,oBAAqB,CACrB,UACF,CAGA,mFAEE,YACF,CAEA,0CACE,wBAAsC,CACtC,UAAW,CACX,UAAW,CAEX,QAAS,CACT,oBAKF,CAHE,2BARF,0CASI,aAEJ,CADE,CAGF,0CACE,SAAU,CACV,YAAa,CACb,WAAY,CAEZ,OAAQ,CACR,yBAAkC,CAClC,sBAsBF,CApBE,0BATF,0CAUI,UAAW,CACX,UAkBJ,CAjBE,CAEA,wBAdF,0CAeI,QAAS,CACT,WAAY,CACZ,sBAAuB,CACvB,UAAW,CAEX,aAAc,CACd,wBAAyB,CACzB,QAAS,CACT,oBAMJ,CALE,CAEA,wBA1BF,0CA2BI,sBAEJ,CADE,CAGF,6EACE,uBAKF,CAHE,wBAHF,6EAII,uBAEJ,CADE,CAGF,uCACE,iBAAkB,CAClB,SAAU,CACV,SACF,CAEA,6CACE,YAAa,CACb,WAAY,CACZ,YAAa,CAEb,WAAY,CACZ,YAiBF,CAfE,0BARF,6CASI,aAcJ,CAbE,CAEA,wBAZF,6CAaI,WAUJ,CATE,CAEA,wBAhBF,6CAiBI,WAMJ,CALE,CAEA,2BApBF,6CAqBI,YAEJ,CADE,CAGF,8CACE,SAAU,CACV,UAAW,CAEX,WAAY,CACZ,YAoBF,CAlBE,0BAPF,8CAQI,UAAW,CACX,UAgBJ,CAfE,CAEA,wBAZF,8CAaI,WAAY,CACZ,SAAU,CACV,UAUJ,CATE,CAEA,wBAlBF,8CAmBI,WAMJ,CALE,CAEA,2BAtBF,8CAuBI,UAEJ,CADE,CAIF,mFAGE,YAKF,CAHE,wBALF,mFAMI,aAEJ,CADE","file":"membership-featured.css","sourcesContent":["/* Membership featured */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-membership-featured {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-c-membership-featured__inner {\n position: relative;\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-64) var(--spacing-16) var(--spacing-48);\n border-color: inherit;\n\n @media (--mq-large) {\n padding: var(--spacing-48) var(--spacing-24);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-64) var(--spacing-16) var(--spacing-48);\n }\n}\n\n.coop-c-membership-featured__title {\n margin-bottom: var(--spacing-24);\n\n @media (--mq-medium) {\n max-width: 75%;\n margin-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-membership-featured__cards {\n border-color: inherit;\n}\n\n.coop-c-membership-featured__grid {\n position: relative;\n z-index: 1;\n}\n\n.coop-c-membership-featured__about {\n position: relative;\n z-index: 1;\n\n font-size: var(--type-body-s);\n\n & :last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-small) {\n margin: var(--spacing-24) 0 var(--spacing-16);\n }\n\n @media (--mq-xlarge) {\n margin: var(--spacing-48) 0 var(--spacing-32);\n }\n}\n\n/* Fake connector repeating lines */\n.coop-c-membership-featured__inner:before,\n.coop-c-membership-featured__cards:before,\n.coop-c-membership-featured__cards:after {\n position: absolute;\n border: 8px solid;\n border-color: inherit;\n content: \"\";\n}\n\n/* Straight line connectors */\n.coop-c-membership-featured__inner:before,\n.coop-c-membership-featured__cards:after {\n display: none;\n}\n\n.coop-c-membership-featured__inner:before {\n bottom: calc(var(--spacing-64) + 71px);\n width: 100%;\n right: 100%;\n\n height: 0;\n border-width: 8px 0 0;\n\n @media (--mq-xlarge) {\n display: block;\n }\n}\n\n.coop-c-membership-featured__cards:before {\n top: 350px;\n bottom: 350px;\n right: 251px;\n\n width: 0;\n height: calc(100% - 350px - 350px);\n border-width: 0 0 0 8px;\n\n @media (--mq-small) {\n right: auto;\n left: 100px;\n }\n\n @media (--mq-medium) {\n top: auto;\n right: 100px;\n bottom: calc(50% - 4px);\n left: 100px;\n\n display: block;\n width: calc(100% - 200px);\n height: 0;\n border-width: 8px 0 0;\n }\n\n @media (--mq-large) {\n bottom: calc(45% - 4px);\n }\n}\n\n.coop-c-membership-featured__title + .coop-c-membership-featured__cards:before {\n bottom: calc(50% + 70px);\n\n @media (--mq-large) {\n bottom: calc(45% + 70px);\n }\n}\n\n.coop-c-membership-featured__connector {\n position: absolute;\n z-index: 0;\n fill: none;\n}\n\n.coop-c-membership-featured__connector--left {\n bottom: 110px;\n left: -392px;\n display: none;\n\n width: 500px;\n height: 212px;\n\n @media (--mq-small) {\n display: block;\n }\n\n @media (--mq-medium) {\n left: -330px;\n }\n\n @media (--mq-large) {\n left: -290px;\n }\n\n @media (--mq-xlarge) {\n bottom: 135px;\n }\n}\n\n.coop-c-membership-featured__connector--right {\n top: -62px;\n right: 26px;\n\n width: 233px;\n height: 391px;\n\n @media (--mq-small) {\n right: auto;\n left: 100px;\n }\n\n @media (--mq-medium) {\n right: -77px;\n left: auto;\n top: -230px;\n }\n\n @media (--mq-large) {\n right: -37px;\n }\n\n @media (--mq-xlarge) {\n right: -7px;\n }\n}\n\n/* Avoid overlapping title */\n.coop-c-membership-featured__title\n + *\n .coop-c-membership-featured__connector--right {\n display: none;\n\n @media (--mq-medium) {\n display: block;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--membershipFeatured/package.json b/packages/shared-component--membershipFeatured/package.json index ae10d671..7ebddda6 100755 --- a/packages/shared-component--membershipFeatured/package.json +++ b/packages/shared-component--membershipFeatured/package.json @@ -20,13 +20,11 @@ "directory": "packages/shared-component--membershipFeatured" }, "devDependencies": { - "@coopdigital/foundations-grid": "^2.1.5", - "@coopdigital/foundations-vars": "^3.8.2", + "@coopdigital/foundations": "^1.2.1", "@coopdigital/shared-component--editorialcard": "^2.4.8" }, "peerDependencies": { - "@coopdigital/foundations-grid": ">= 2.0.7 < 3", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4", + "@coopdigital/foundations": ">= 1.2.0 < 2", "@coopdigital/shared-component--editorialcard": ">= 2.1.15 < 3" }, "bugs": { diff --git a/packages/shared-component--membershipFeatured/src/membership-featured.pcss b/packages/shared-component--membershipFeatured/src/membership-featured.pcss index e608f884..8ef88098 100755 --- a/packages/shared-component--membershipFeatured/src/membership-featured.pcss +++ b/packages/shared-component--membershipFeatured/src/membership-featured.pcss @@ -1,6 +1,6 @@ /* Membership featured */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-membership-featured { position: relative; diff --git a/packages/shared-component--membershipHero/dist/membership-hero.css.map b/packages/shared-component--membershipHero/dist/membership-hero.css.map index b764a09f..fdc85e1b 100644 --- a/packages/shared-component--membershipHero/dist/membership-hero.css.map +++ b/packages/shared-component--membershipHero/dist/membership-hero.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/membership-hero.pcss"],"names":[],"mappings":"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","file":"membership-hero.css","sourcesContent":["/* Membership hero */\n\n@import \"@coopdigital/foundations-vars\";\n\n:root {\n /* Connector curved line (small) */\n --membership-hero-background-small-width: 800px;\n --membership-hero-background-small-height: 265px;\n --membership-hero-background-small-origin-x: 50%;\n --membership-hero-background-small-offset-x: calc(\n (var(--membership-hero-background-small-width) / -2) - 100px\n );\n --membership-hero-background-small-offset-y: 60px;\n\n /* Connector curved line (medium) */\n --membership-hero-background-medium-width: 1440px;\n --membership-hero-background-medium-height: 476px;\n --membership-hero-background-medium-origin-x: 50%;\n --membership-hero-background-medium-offset-x: calc(\n (var(--membership-hero-background-medium-width) / -2) - 120px\n );\n --membership-hero-background-medium-offset-y: 62px;\n\n /* Connector curved line (large) */\n --membership-hero-background-large-width: 1732px;\n --membership-hero-background-large-height: 573px;\n --membership-hero-background-large-origin-x: 50%;\n --membership-hero-background-large-offset-x: calc(\n (var(--membership-hero-background-large-width) / -2) + 50px\n );\n --membership-hero-background-large-offset-y: -174px;\n\n /* Connector curved line (xlarge) */\n --membership-hero-background-xlarge-offset-x: calc(\n (var(--membership-hero-background-medium-width) / -2) - 340px\n );\n --membership-hero-background-xlarge-offset-y: 46px;\n\n /* Connector full-width repeater (left) */\n --membership-hero-connector-left-offset-x: 0;\n --membership-hero-connector-left-offset-y: calc(var(--spacing-32) - 12px);\n --membership-hero-connector-left-origin-x: 0;\n\n /* Connector full-width repeater (left, large) */\n --membership-hero-connector-left-large-offset-x: 0;\n --membership-hero-connector-left-large-offset-y: calc(\n var(--spacing-48) - 8px\n );\n --membership-hero-connector-left-large-origin-x: 0;\n\n /* Connector full-width repeater (left, xlarge) */\n --membership-hero-connector-left-xlarge-offset-x: -100px;\n --membership-hero-connector-left-xlarge-offset-y: calc(\n var(--spacing-64) - 8px\n );\n --membership-hero-connector-left-xlarge-origin-x: 0;\n\n /* Connector full-width repeater (right) */\n --membership-hero-connector-right-offset-x: 0;\n --membership-hero-connector-right-offset-y: 264px;\n --membership-hero-connector-right-origin-x: 50%;\n\n /* Connector full-width repeater (right, xlarge) */\n --membership-hero-connector-right-xlarge-offset-x: 100px;\n --membership-hero-connector-right-xlarge-offset-y: 329px;\n --membership-hero-connector-right-xlarge-origin-x: 50%;\n\n /* Hero image (small) */\n --membership-hero-image-small-width: 400px;\n --membership-hero-image-small-height: 300px;\n --membership-hero-photo-small-width: 338px;\n --membership-hero-photo-small-height: 190px;\n\n /* Hero image (medium) */\n --membership-hero-image-medium-width: 512px;\n --membership-hero-image-medium-height: 384px;\n --membership-hero-photo-medium-width: 440px;\n --membership-hero-photo-medium-height: 247px;\n\n /* Hero image (large) */\n --membership-hero-image-large-width: 640px;\n --membership-hero-image-large-height: 480px;\n --membership-hero-photo-large-width: 555px;\n --membership-hero-photo-large-height: 312px;\n}\n\n.coop-c-membership-hero {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n\n /* required to overwrite foundation CSS */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n.coop-c-membership-hero__inner {\n position: relative;\n z-index: 1;\n\n max-width: 81rem;\n min-height: 410px;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) 0;\n\n @media (--mq-medium) {\n min-height: 440px;\n padding: var(--spacing-32) var(--spacing-16) var(--spacing-48);\n }\n\n @media (--mq-large) {\n min-height: 500px;\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-64);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-membership-hero__content {\n position: relative;\n z-index: 1;\n max-width: 33rem; /* 528px */\n\n @media (--mq-small) {\n padding-bottom: var(--spacing-64);\n }\n\n @media (--mq-medium) {\n padding-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-membership-hero__content--full-width {\n max-width: none;\n}\n\n.coop-c-membership-hero__body {\n @media (--mq-small) {\n max-width: 80%;\n }\n\n @media (--mq-medium) {\n max-width: 90%;\n }\n}\n\n.coop-c-membership-hero__content--full-width {\n & .coop-c-membership-hero__body {\n @media (--mq-small) {\n max-width: 90%;\n }\n }\n}\n\n.coop-c-membership-hero__title {\n margin-bottom: var(--spacing-24);\n\n @media (--mq-medium) {\n margin-bottom: var(--spacing-16);\n }\n}\n\nh2.coop-c-membership-hero__title {\n margin-bottom: var(--spacing-24);\n}\n\n.coop-c-membership-hero__cta {\n margin-top: var(--spacing-24);\n font-size: var(--type-body-s);\n\n & .coop-t-link {\n color: var(--color-text);\n }\n}\n\n.coop-c-membership-hero__btns {\n margin-bottom: var(--spacing-24);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n}\n\n.coop-c-membership-hero__btns .coop-btn--app {\n margin: 0 var(--spacing-16) var(--spacing-16) 0;\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.coop-c-membership-hero__caption {\n margin-bottom: 0;\n}\n\n.coop-c-membership-hero__media {\n position: relative;\n z-index: 0;\n margin: 0;\n}\n\n.coop-c-membership-hero__picture,\n.coop-c-membership-hero__image {\n display: block;\n}\n\n/* Digital card promo picture */\n.coop-c-membership-hero__picture {\n position: relative;\n z-index: 1;\n}\n\n.coop-c-membership-hero__image {\n display: block;\n width: 100%;\n}\n\n/* Connector curved line */\n.coop-c-membership-hero__connector {\n position: absolute;\n z-index: 0;\n top: 0;\n\n /* Small connector */\n left: var(--membership-hero-background-small-origin-x);\n width: var(--membership-hero-background-small-width);\n height: var(--membership-hero-background-small-height);\n margin-left: var(--membership-hero-background-small-offset-x);\n margin-top: var(--membership-hero-background-small-offset-y);\n\n /* Large connector (at small viewport) */\n @media (--mq-small) {\n left: var(--membership-hero-background-large-origin-x);\n width: var(--membership-hero-background-large-width);\n height: var(--membership-hero-background-large-height);\n margin-left: var(--membership-hero-background-large-offset-x);\n margin-top: var(--membership-hero-background-large-offset-y);\n }\n}\n\n/* Connector full-width repeater */\n.coop-c-membership-hero:before,\n.coop-c-membership-hero:after {\n position: absolute;\n z-index: 0;\n width: 50%;\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n}\n\n/* Connector full-width repeater (left) */\n.coop-c-membership-hero:before {\n bottom: var(--membership-hero-connector-left-offset-y);\n left: var(--membership-hero-connector-left-origin-x);\n margin-left: var(--membership-hero-connector-left-offset-x);\n display: none;\n\n @media (--mq-small) {\n display: block;\n }\n\n @media (--mq-large) {\n left: var(--membership-hero-connector-left-large-origin-x);\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-left-large-offset-y);\n margin-left: var(--membership-hero-connector-left-large-offset-x);\n }\n\n @media (--mq-xlarge) {\n left: var(--membership-hero-connector-left-xlarge-origin-x);\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-left-xlarge-offset-y);\n margin-left: var(--membership-hero-connector-left-xlarge-offset-x);\n }\n}\n\n/* Connector full-width repeater (right) */\n.coop-c-membership-hero:after {\n bottom: var(--membership-hero-connector-right-offset-y);\n left: var(--membership-hero-connector-right-origin-x);\n display: block;\n\n @media (--mq-small) {\n display: none;\n }\n\n @media (--mq-xlarge) {\n left: var(--membership-hero-connector-right-xlarge-origin-x);\n display: block;\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-right-xlarge-offset-y);\n margin-left: var(--membership-hero-connector-right-xlarge-offset-x);\n }\n}\n\n.coop-c-membership-hero__path {\n fill: none;\n stroke: inherit;\n}\n\n/* Adjust for hero with handset image (4:3) */\n.coop-c-membership-hero--handset {\n & .coop-c-membership-hero__content {\n max-width: 21.875rem; /* 350px */\n\n @media (--mq-medium) {\n max-width: 33rem; /* 528px */\n }\n }\n\n & .coop-c-membership-hero__content--full-width {\n max-width: none;\n\n @media (--mq-small) {\n max-width: 60%;\n }\n\n @media (--mq-medium) {\n max-width: 33rem; /* 528px */\n }\n }\n\n & .coop-c-membership-hero__media {\n height: var(--membership-hero-image-medium-height);\n\n @media (--mq-small) {\n position: absolute;\n z-index: 0;\n right: 0;\n right: -5%;\n bottom: 0;\n height: auto;\n margin-top: 0;\n }\n\n @media (--mq-medium) {\n right: 0;\n }\n }\n\n & .coop-c-membership-hero__picture {\n position: absolute;\n top: 0;\n left: 50%;\n\n width: var(--membership-hero-image-medium-width);\n height: var(--membership-hero-image-medium-height);\n margin-left: calc(var(--membership-hero-image-medium-width) / -2);\n\n @media (--mq-small) {\n position: relative;\n top: auto;\n left: auto;\n width: var(--membership-hero-image-small-width);\n height: var(--membership-hero-image-small-height);\n margin-left: 0;\n }\n\n @media (--mq-large) {\n width: var(--membership-hero-image-large-width);\n height: var(--membership-hero-image-large-height);\n }\n }\n\n & .coop-c-membership-hero__connector {\n /* Medium connector (at large viewport) */\n @media (--mq-large) {\n left: var(--membership-hero-background-medium-origin-x);\n width: var(--membership-hero-background-medium-width);\n height: var(--membership-hero-background-medium-height);\n margin-left: var(--membership-hero-background-medium-offset-x);\n margin-top: var(--membership-hero-background-medium-offset-y);\n }\n\n /* Medium connector (at xlarge viewport) */\n @media (--mq-xlarge) {\n margin-left: var(--membership-hero-background-xlarge-offset-x);\n margin-top: var(--membership-hero-background-xlarge-offset-y);\n }\n }\n}\n\n/* Adjust for hero with photo (16:9) */\n.coop-c-membership-hero--photo {\n & .coop-c-membership-hero__inner {\n @media (--mq-xlarge) {\n min-height: 580px;\n padding-bottom: var(--spacing-32);\n }\n }\n\n & .coop-c-membership-hero__content {\n @media (--mq-medium) {\n max-width: 50%;\n }\n }\n\n & .coop-c-membership-hero__media {\n margin: var(--spacing-32) calc(var(--spacing-16) * -1) 0;\n\n @media (--mq-medium) {\n position: absolute;\n right: var(--spacing-32);\n bottom: 110px;\n\n width: var(--membership-hero-photo-small-width);\n margin: 0;\n }\n\n @media (--mq-large) {\n right: var(--spacing-32);\n bottom: 205px;\n width: var(--membership-hero-photo-medium-width);\n }\n\n @media (--mq-xlarge) {\n right: var(--spacing-16);\n bottom: 205px;\n width: var(--membership-hero-photo-large-width);\n }\n }\n\n & .coop-c-membership-hero__picture {\n @media (--mq-medium) {\n height: var(--membership-hero-photo-small-height);\n }\n\n @media (--mq-large) {\n height: var(--membership-hero-photo-medium-height);\n }\n\n @media (--mq-xlarge) {\n height: var(--membership-hero-photo-large-height);\n }\n }\n\n & .coop-c-membership-hero__connector {\n @media (--mq-large) {\n top: 132px;\n }\n\n @media (--mq-xlarge) {\n top: 181px;\n }\n }\n\n &:before,\n &:after {\n display: none;\n }\n\n &:before {\n @media (--mq-medium) {\n display: block;\n }\n\n @media (--mq-xlarge) {\n bottom: 56px;\n }\n }\n}\n\n/* Adjust for hero with photo (16:9) on home page */\n.coop-c-membership-hero--photo.coop-c-membership-hero--home {\n & .coop-c-membership-hero__title {\n @media (--mq-medium) {\n margin-bottom: var(--spacing-32);\n font-size: 2.625rem; /* 42px */\n }\n\n @media (--mq-large) {\n font-size: 2.875rem; /* 46px */\n }\n\n @media (--mq-xlarge) {\n font-size: 4.25rem; /* 68px */\n }\n }\n\n & .coop-c-membership-hero__body {\n @media (--mq-large) {\n font-size: 1.375rem; /* 22px */\n }\n\n @media (--mq-xlarge) {\n font-size: 1.625rem; /* 26px */\n }\n }\n\n & .coop-c-membership-hero__cta {\n @media (--mq-xlarge) {\n margin-top: var(--spacing-48);\n }\n }\n\n & .coop-c-membership-hero__connector {\n @media (--mq-large) {\n top: 132px;\n }\n\n @media (--mq-xlarge) {\n top: 101px;\n }\n }\n\n &:before {\n @media (--mq-xlarge) {\n bottom: 136px;\n }\n }\n}\n\n.coop-c-membership-hero__list {\n list-style: none;\n padding-left: calc(var(--spacing-32) + var(--spacing-4));\n margin: var(--spacing-24) 0;\n}\n\n.coop-c-membership-hero__item {\n position: relative;\n margin-bottom: var(--spacing-16);\n}\n\n.coop-c-membership-hero__tick {\n position: absolute;\n left: calc((var(--spacing-32) + var(--spacing-4)) * -1);\n top: 0.1875rem; /* 3px */\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/membership-hero.pcss"],"names":[],"mappings":"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","file":"membership-hero.css","sourcesContent":["/* Membership hero */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n:root {\n /* Connector curved line (small) */\n --membership-hero-background-small-width: 800px;\n --membership-hero-background-small-height: 265px;\n --membership-hero-background-small-origin-x: 50%;\n --membership-hero-background-small-offset-x: calc(\n (var(--membership-hero-background-small-width) / -2) - 100px\n );\n --membership-hero-background-small-offset-y: 60px;\n\n /* Connector curved line (medium) */\n --membership-hero-background-medium-width: 1440px;\n --membership-hero-background-medium-height: 476px;\n --membership-hero-background-medium-origin-x: 50%;\n --membership-hero-background-medium-offset-x: calc(\n (var(--membership-hero-background-medium-width) / -2) - 120px\n );\n --membership-hero-background-medium-offset-y: 62px;\n\n /* Connector curved line (large) */\n --membership-hero-background-large-width: 1732px;\n --membership-hero-background-large-height: 573px;\n --membership-hero-background-large-origin-x: 50%;\n --membership-hero-background-large-offset-x: calc(\n (var(--membership-hero-background-large-width) / -2) + 50px\n );\n --membership-hero-background-large-offset-y: -174px;\n\n /* Connector curved line (xlarge) */\n --membership-hero-background-xlarge-offset-x: calc(\n (var(--membership-hero-background-medium-width) / -2) - 340px\n );\n --membership-hero-background-xlarge-offset-y: 46px;\n\n /* Connector full-width repeater (left) */\n --membership-hero-connector-left-offset-x: 0;\n --membership-hero-connector-left-offset-y: calc(var(--spacing-32) - 12px);\n --membership-hero-connector-left-origin-x: 0;\n\n /* Connector full-width repeater (left, large) */\n --membership-hero-connector-left-large-offset-x: 0;\n --membership-hero-connector-left-large-offset-y: calc(\n var(--spacing-48) - 8px\n );\n --membership-hero-connector-left-large-origin-x: 0;\n\n /* Connector full-width repeater (left, xlarge) */\n --membership-hero-connector-left-xlarge-offset-x: -100px;\n --membership-hero-connector-left-xlarge-offset-y: calc(\n var(--spacing-64) - 8px\n );\n --membership-hero-connector-left-xlarge-origin-x: 0;\n\n /* Connector full-width repeater (right) */\n --membership-hero-connector-right-offset-x: 0;\n --membership-hero-connector-right-offset-y: 264px;\n --membership-hero-connector-right-origin-x: 50%;\n\n /* Connector full-width repeater (right, xlarge) */\n --membership-hero-connector-right-xlarge-offset-x: 100px;\n --membership-hero-connector-right-xlarge-offset-y: 329px;\n --membership-hero-connector-right-xlarge-origin-x: 50%;\n\n /* Hero image (small) */\n --membership-hero-image-small-width: 400px;\n --membership-hero-image-small-height: 300px;\n --membership-hero-photo-small-width: 338px;\n --membership-hero-photo-small-height: 190px;\n\n /* Hero image (medium) */\n --membership-hero-image-medium-width: 512px;\n --membership-hero-image-medium-height: 384px;\n --membership-hero-photo-medium-width: 440px;\n --membership-hero-photo-medium-height: 247px;\n\n /* Hero image (large) */\n --membership-hero-image-large-width: 640px;\n --membership-hero-image-large-height: 480px;\n --membership-hero-photo-large-width: 555px;\n --membership-hero-photo-large-height: 312px;\n}\n\n.coop-c-membership-hero {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n\n /* required to overwrite foundation CSS */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n.coop-c-membership-hero__inner {\n position: relative;\n z-index: 1;\n\n max-width: 81rem;\n min-height: 410px;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) 0;\n\n @media (--mq-medium) {\n min-height: 440px;\n padding: var(--spacing-32) var(--spacing-16) var(--spacing-48);\n }\n\n @media (--mq-large) {\n min-height: 500px;\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-64);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-membership-hero__content {\n position: relative;\n z-index: 1;\n max-width: 33rem; /* 528px */\n\n @media (--mq-small) {\n padding-bottom: var(--spacing-64);\n }\n\n @media (--mq-medium) {\n padding-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-membership-hero__content--full-width {\n max-width: none;\n}\n\n.coop-c-membership-hero__body {\n @media (--mq-small) {\n max-width: 80%;\n }\n\n @media (--mq-medium) {\n max-width: 90%;\n }\n}\n\n.coop-c-membership-hero__content--full-width {\n & .coop-c-membership-hero__body {\n @media (--mq-small) {\n max-width: 90%;\n }\n }\n}\n\n.coop-c-membership-hero__title {\n margin-bottom: var(--spacing-24);\n\n @media (--mq-medium) {\n margin-bottom: var(--spacing-16);\n }\n}\n\nh2.coop-c-membership-hero__title {\n margin-bottom: var(--spacing-24);\n}\n\n.coop-c-membership-hero__cta {\n margin-top: var(--spacing-24);\n font-size: var(--type-body-s);\n\n & .coop-t-link {\n color: var(--color-text);\n }\n}\n\n.coop-c-membership-hero__btns {\n margin-bottom: var(--spacing-24);\n /* removes whitespace caused by inline-block */\n font-size: 0;\n}\n\n.coop-c-membership-hero__btns .coop-btn--app {\n margin: 0 var(--spacing-16) var(--spacing-16) 0;\n\n &:last-child {\n margin-right: 0;\n }\n}\n\n.coop-c-membership-hero__caption {\n margin-bottom: 0;\n}\n\n.coop-c-membership-hero__media {\n position: relative;\n z-index: 0;\n margin: 0;\n}\n\n.coop-c-membership-hero__picture,\n.coop-c-membership-hero__image {\n display: block;\n}\n\n/* Digital card promo picture */\n.coop-c-membership-hero__picture {\n position: relative;\n z-index: 1;\n}\n\n.coop-c-membership-hero__image {\n display: block;\n width: 100%;\n}\n\n/* Connector curved line */\n.coop-c-membership-hero__connector {\n position: absolute;\n z-index: 0;\n top: 0;\n\n /* Small connector */\n left: var(--membership-hero-background-small-origin-x);\n width: var(--membership-hero-background-small-width);\n height: var(--membership-hero-background-small-height);\n margin-left: var(--membership-hero-background-small-offset-x);\n margin-top: var(--membership-hero-background-small-offset-y);\n\n /* Large connector (at small viewport) */\n @media (--mq-small) {\n left: var(--membership-hero-background-large-origin-x);\n width: var(--membership-hero-background-large-width);\n height: var(--membership-hero-background-large-height);\n margin-left: var(--membership-hero-background-large-offset-x);\n margin-top: var(--membership-hero-background-large-offset-y);\n }\n}\n\n/* Connector full-width repeater */\n.coop-c-membership-hero:before,\n.coop-c-membership-hero:after {\n position: absolute;\n z-index: 0;\n width: 50%;\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n}\n\n/* Connector full-width repeater (left) */\n.coop-c-membership-hero:before {\n bottom: var(--membership-hero-connector-left-offset-y);\n left: var(--membership-hero-connector-left-origin-x);\n margin-left: var(--membership-hero-connector-left-offset-x);\n display: none;\n\n @media (--mq-small) {\n display: block;\n }\n\n @media (--mq-large) {\n left: var(--membership-hero-connector-left-large-origin-x);\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-left-large-offset-y);\n margin-left: var(--membership-hero-connector-left-large-offset-x);\n }\n\n @media (--mq-xlarge) {\n left: var(--membership-hero-connector-left-xlarge-origin-x);\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-left-xlarge-offset-y);\n margin-left: var(--membership-hero-connector-left-xlarge-offset-x);\n }\n}\n\n/* Connector full-width repeater (right) */\n.coop-c-membership-hero:after {\n bottom: var(--membership-hero-connector-right-offset-y);\n left: var(--membership-hero-connector-right-origin-x);\n display: block;\n\n @media (--mq-small) {\n display: none;\n }\n\n @media (--mq-xlarge) {\n left: var(--membership-hero-connector-right-xlarge-origin-x);\n display: block;\n\n /* Offset connector from origin */\n bottom: var(--membership-hero-connector-right-xlarge-offset-y);\n margin-left: var(--membership-hero-connector-right-xlarge-offset-x);\n }\n}\n\n.coop-c-membership-hero__path {\n fill: none;\n stroke: inherit;\n}\n\n/* Adjust for hero with handset image (4:3) */\n.coop-c-membership-hero--handset {\n & .coop-c-membership-hero__content {\n max-width: 21.875rem; /* 350px */\n\n @media (--mq-medium) {\n max-width: 33rem; /* 528px */\n }\n }\n\n & .coop-c-membership-hero__content--full-width {\n max-width: none;\n\n @media (--mq-small) {\n max-width: 60%;\n }\n\n @media (--mq-medium) {\n max-width: 33rem; /* 528px */\n }\n }\n\n & .coop-c-membership-hero__media {\n height: var(--membership-hero-image-medium-height);\n\n @media (--mq-small) {\n position: absolute;\n z-index: 0;\n right: 0;\n right: -5%;\n bottom: 0;\n height: auto;\n margin-top: 0;\n }\n\n @media (--mq-medium) {\n right: 0;\n }\n }\n\n & .coop-c-membership-hero__picture {\n position: absolute;\n top: 0;\n left: 50%;\n\n width: var(--membership-hero-image-medium-width);\n height: var(--membership-hero-image-medium-height);\n margin-left: calc(var(--membership-hero-image-medium-width) / -2);\n\n @media (--mq-small) {\n position: relative;\n top: auto;\n left: auto;\n width: var(--membership-hero-image-small-width);\n height: var(--membership-hero-image-small-height);\n margin-left: 0;\n }\n\n @media (--mq-large) {\n width: var(--membership-hero-image-large-width);\n height: var(--membership-hero-image-large-height);\n }\n }\n\n & .coop-c-membership-hero__connector {\n /* Medium connector (at large viewport) */\n @media (--mq-large) {\n left: var(--membership-hero-background-medium-origin-x);\n width: var(--membership-hero-background-medium-width);\n height: var(--membership-hero-background-medium-height);\n margin-left: var(--membership-hero-background-medium-offset-x);\n margin-top: var(--membership-hero-background-medium-offset-y);\n }\n\n /* Medium connector (at xlarge viewport) */\n @media (--mq-xlarge) {\n margin-left: var(--membership-hero-background-xlarge-offset-x);\n margin-top: var(--membership-hero-background-xlarge-offset-y);\n }\n }\n}\n\n/* Adjust for hero with photo (16:9) */\n.coop-c-membership-hero--photo {\n & .coop-c-membership-hero__inner {\n @media (--mq-xlarge) {\n min-height: 580px;\n padding-bottom: var(--spacing-32);\n }\n }\n\n & .coop-c-membership-hero__content {\n @media (--mq-medium) {\n max-width: 50%;\n }\n }\n\n & .coop-c-membership-hero__media {\n margin: var(--spacing-32) calc(var(--spacing-16) * -1) 0;\n\n @media (--mq-medium) {\n position: absolute;\n right: var(--spacing-32);\n bottom: 110px;\n\n width: var(--membership-hero-photo-small-width);\n margin: 0;\n }\n\n @media (--mq-large) {\n right: var(--spacing-32);\n bottom: 205px;\n width: var(--membership-hero-photo-medium-width);\n }\n\n @media (--mq-xlarge) {\n right: var(--spacing-16);\n bottom: 205px;\n width: var(--membership-hero-photo-large-width);\n }\n }\n\n & .coop-c-membership-hero__picture {\n @media (--mq-medium) {\n height: var(--membership-hero-photo-small-height);\n }\n\n @media (--mq-large) {\n height: var(--membership-hero-photo-medium-height);\n }\n\n @media (--mq-xlarge) {\n height: var(--membership-hero-photo-large-height);\n }\n }\n\n & .coop-c-membership-hero__connector {\n @media (--mq-large) {\n top: 132px;\n }\n\n @media (--mq-xlarge) {\n top: 181px;\n }\n }\n\n &:before,\n &:after {\n display: none;\n }\n\n &:before {\n @media (--mq-medium) {\n display: block;\n }\n\n @media (--mq-xlarge) {\n bottom: 56px;\n }\n }\n}\n\n/* Adjust for hero with photo (16:9) on home page */\n.coop-c-membership-hero--photo.coop-c-membership-hero--home {\n & .coop-c-membership-hero__title {\n @media (--mq-medium) {\n margin-bottom: var(--spacing-32);\n font-size: 2.625rem; /* 42px */\n }\n\n @media (--mq-large) {\n font-size: 2.875rem; /* 46px */\n }\n\n @media (--mq-xlarge) {\n font-size: 4.25rem; /* 68px */\n }\n }\n\n & .coop-c-membership-hero__body {\n @media (--mq-large) {\n font-size: 1.375rem; /* 22px */\n }\n\n @media (--mq-xlarge) {\n font-size: 1.625rem; /* 26px */\n }\n }\n\n & .coop-c-membership-hero__cta {\n @media (--mq-xlarge) {\n margin-top: var(--spacing-48);\n }\n }\n\n & .coop-c-membership-hero__connector {\n @media (--mq-large) {\n top: 132px;\n }\n\n @media (--mq-xlarge) {\n top: 101px;\n }\n }\n\n &:before {\n @media (--mq-xlarge) {\n bottom: 136px;\n }\n }\n}\n\n.coop-c-membership-hero__list {\n list-style: none;\n padding-left: calc(var(--spacing-32) + var(--spacing-4));\n margin: var(--spacing-24) 0;\n}\n\n.coop-c-membership-hero__item {\n position: relative;\n margin-bottom: var(--spacing-16);\n}\n\n.coop-c-membership-hero__tick {\n position: absolute;\n left: calc((var(--spacing-32) + var(--spacing-4)) * -1);\n top: 0.1875rem; /* 3px */\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--membershipHero/package.json b/packages/shared-component--membershipHero/package.json index efd3be17..f685243c 100755 --- a/packages/shared-component--membershipHero/package.json +++ b/packages/shared-component--membershipHero/package.json @@ -20,16 +20,12 @@ "directory": "packages/shared-component--membershipHero" }, "devDependencies": { - "@coopdigital/foundations-buttons": "^2.7.0", - "@coopdigital/foundations-layout": "^3.3.6", - "@coopdigital/foundations-typography": "^4.2.7", - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations-buttons": "^2.6.0", + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { "@coopdigital/foundations-buttons": ">= 2.2.2 < 3", - "@coopdigital/foundations-layout": ">= 3.2.0 < 4", - "@coopdigital/foundations-typography": ">= 4.0.0 < 5", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--membershipHero/src/membership-hero.pcss b/packages/shared-component--membershipHero/src/membership-hero.pcss index 7ffde015..125c88e2 100755 --- a/packages/shared-component--membershipHero/src/membership-hero.pcss +++ b/packages/shared-component--membershipHero/src/membership-hero.pcss @@ -1,6 +1,6 @@ /* Membership hero */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; :root { /* Connector curved line (small) */ diff --git a/packages/shared-component--offers/dist/offers.css.map b/packages/shared-component--offers/dist/offers.css.map index a6b4513c..ec830c69 100644 --- a/packages/shared-component--offers/dist/offers.css.map +++ b/packages/shared-component--offers/dist/offers.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/offers.pcss"],"names":[],"mappings":"AAEA,8BACE,iBACF,CAEA,0BACE,iBAAkB,CAClB,OAAQ,CACR,MAAO,CACP,KAAM,CACN,QAYF,CAVE,8BACE,4BAQF,CANE,0BAHF,8BAII,6BAKJ,CAJE,CACA,wBANF,8BAOI,8BAEJ,CADE,CAIJ,qBACE,cAAe,CACf,qBAAsB,CACtB,kBAAkC,CAClC,uCAA4C,CAC5C,kBAAmB,CACnB,iBAAkB,CAClB,SAKF,CAHE,wBATF,qBAUI,YAEJ,CADE,CAGF,6BACE,kBAKF,CAHE,wBAHF,6BAII,mBAEJ,CADE,CAGF,4BACE,aAUF,CARE,0BAHF,4BAII,kBAAmB,CACnB,mBAMJ,CALE,CAEA,wBARF,4BASI,QAEJ,CADE,CAGF,0BACE,eAaF,CAXE,wBAHF,0BAII,oBAAqB,CAIrB,YAMJ,CATE,CAMA,2BAXF,0BAYI,oBAEJ,CADE,CAGF,gCACE,sBACsC,CACtC,UAAyB,CACzB,kBAAuC,CACvC,kBAAmB,CACnB,iEAA+B,CAC/B,eAAgB,CAChB,iBAAkB,CAClB,QAAS,CACT,sBAAwB,CACxB,0BAA4B,CAC5B,YAAa,CACb,oBAAqB,CACrB,kBAAmB,CACnB,aAAc,CACd,aAuBF,CArBE,wBAlBF,gCAmBI,mBAAsE,CACtE,oBAmBJ,CAlBE,CAEA,0BAvBF,gCAwBI,QAAS,CACT,oBAcJ,CAbE,CAEA,4EAEE,kBAA8C,CAC9C,UACF,CAEA,uCACE,kBAA+C,CAC/C,UAAyB,CACzB,SACF,CAGF,8BACE,aAAc,CACd,eAAgB,CAChB,kBAAmB,CACnB,oBAAqB,CACrB,iBAkBF,CAfE,yCACE,eACF,CAEA,2BAZF,8BAaI,gBAUJ,CATE,CAEA,wBAhBF,8BAiBI,gBAMJ,CALE,CAEA,0BApBF,8BAqBI,eAEJ,CADE,CAGF,oCACE,eACF,CAEA,sCACE,YAKF,CAHE,wBAHF,sCAII,eAEJ,CADE,CAGF,4BACE,QAAS,CACT,SAMF,CAJE,wBAJF,4BAKI,iBAAkB,CAClB,SAEJ,CADE,CAGF,4BACE,QAAS,CAET,kBAAmB,CACnB,oBAAqB,CACrB,uBAAyB,CACzB,YAaF,CAXE,wBARF,4BASI,aAUJ,CATE,CAEA,wBAZF,4BAaI,iBAMJ,CALE,CAEA,2BAhBF,4BAiBI,gBAEJ,CADE,CAGF,kCACE,aAAc,CACd,oBACF,CAIE,wBAFF,0DAGI,YAAa,CACb,mBAAoB,CACpB,qBAEJ,CADE","file":"offers.css","sourcesContent":["@import \"@coopdigital/foundations-vars\";\n\n.coop-offers-module-container {\n position: relative;\n}\n\n.coop-double-squircles-bg {\n position: absolute;\n right: 0;\n left: 0;\n top: 0;\n bottom: 0;\n\n & svg {\n transform: translate(-3%, -8%);\n\n @media (--mq-small) {\n transform: translate(-4%, -10%);\n }\n @media (--mq-large) {\n transform: translate(-10%, -10%);\n }\n }\n}\n\n.coop-c-offersmodule {\n padding: 1.5rem;\n background-color: #fff;\n margin-bottom: var(--spacing-base);\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);\n border-radius: 1rem;\n position: relative;\n z-index: 2;\n\n @media (--mq-medium) {\n padding: 2rem;\n }\n}\n\n.coop-c-offersmodule__header {\n margin-bottom: 1rem;\n\n @media (--mq-medium) {\n margin-bottom: 0.5rem;\n }\n}\n\n.coop-c-offersmodule__title {\n padding-top: 0;\n\n @media (--mq-small) {\n font-size: 1.625rem;\n line-height: 2.25rem;\n }\n\n @media (--mq-medium) {\n margin: 0;\n }\n}\n\n.coop-c-offersmodule__cta {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin: 0 0 1rem 1rem;\n }\n\n @media (--mq-medium) {\n display: flex;\n }\n\n @media (--mq-xlarge) {\n display: inline-block;\n }\n}\n\n.coop-c-offersmodule__cta__link {\n padding: calc(var(--spacing-base--1-4) * 1.75)\n calc(var(--spacing-base--1-2) * 1.5);\n color: var(--color-white);\n background: var(--color-button-primary);\n font-size: 1.125rem;\n font-family: var(--font-family);\n font-weight: 500;\n text-align: center;\n border: 0;\n border-radius: 0.4375rem;\n transition: all 0.15s linear;\n outline: none;\n text-decoration: none;\n line-height: normal;\n margin: 0 auto;\n display: block;\n\n @media (--mq-medium) {\n padding: var(--spacing-base--1-2) calc(var(--spacing-base--1-2) * 1.5);\n line-height: 1.125rem;\n }\n\n @media (--mq-small) {\n margin: 0;\n display: inline-block;\n }\n\n &:hover,\n &:focus {\n background: var(--color-button-primary--hover);\n color: var(--color-white);\n }\n\n &:active {\n background: var(--color-button-primary--active);\n color: var(--color-white);\n outline: 0;\n }\n}\n\n.coop-c-offersmodule__sign-in {\n display: block;\n margin-bottom: 0;\n font-size: 1.125rem;\n line-height: 1.625rem;\n text-align: center;\n\n /* required to overwrite foundation CSS */\n &:last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-xlarge) {\n line-height: 2rem;\n }\n\n @media (--mq-medium) {\n margin-left: 1rem;\n }\n\n @media (--mq-small) {\n text-align: left;\n }\n}\n\n.coop-c-offersmodule__sign-in__link {\n font-weight: 500;\n}\n\n.coop-c-offersmodule__media-container {\n display: none;\n\n @media (--mq-large) {\n display: inherit;\n }\n}\n\n.coop-c-offersmodule__media {\n margin: 0;\n padding: 0;\n\n @media (--mq-medium) {\n position: relative;\n left: 20px;\n }\n}\n\n.coop-c-offersmodule__links {\n margin: 0;\n padding: 0;\n font-size: 1.125rem;\n line-height: 1.625rem;\n padding: 0.27rem 0 0 2rem;\n display: none;\n\n @media (--mq-medium) {\n display: block;\n }\n\n @media (--mq-large) {\n align-self: center;\n }\n\n @media (--mq-xlarge) {\n line-height: 2rem;\n }\n}\n\n.coop-c-offersmodule__links__link {\n color: #2f66af;\n border-color: #2f66af;\n}\n\n.coop-c-offersmodule__actions,\n.coop-c-offersmodule__links {\n @media (--mq-medium) {\n display: flex;\n align-self: flex-end;\n flex-direction: column;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/offers.pcss"],"names":[],"mappings":"AAEA,8BACE,iBACF,CAEA,0BACE,iBAAkB,CAClB,OAAQ,CACR,MAAO,CACP,KAAM,CACN,QAYF,CAVE,8BACE,4BAQF,CANE,0BAHF,8BAII,6BAKJ,CAJE,CACA,wBANF,8BAOI,8BAEJ,CADE,CAIJ,qBACE,cAAe,CACf,qBAAsB,CACtB,kBAAkC,CAClC,uCAA4C,CAC5C,kBAAmB,CACnB,iBAAkB,CAClB,SAKF,CAHE,wBATF,qBAUI,YAEJ,CADE,CAGF,6BACE,kBAKF,CAHE,wBAHF,6BAII,mBAEJ,CADE,CAGF,4BACE,aAUF,CARE,0BAHF,4BAII,kBAAmB,CACnB,mBAMJ,CALE,CAEA,wBARF,4BASI,QAEJ,CADE,CAGF,0BACE,eAaF,CAXE,wBAHF,0BAII,oBAAqB,CAIrB,YAMJ,CATE,CAMA,2BAXF,0BAYI,oBAEJ,CADE,CAGF,gCACE,sBACsC,CACtC,UAAyB,CACzB,kBAAuC,CACvC,kBAAmB,CACnB,iEAA+B,CAC/B,eAAgB,CAChB,iBAAkB,CAClB,QAAS,CACT,sBAAwB,CACxB,0BAA4B,CAC5B,YAAa,CACb,oBAAqB,CACrB,kBAAmB,CACnB,aAAc,CACd,aAuBF,CArBE,wBAlBF,gCAmBI,mBAAsE,CACtE,oBAmBJ,CAlBE,CAEA,0BAvBF,gCAwBI,QAAS,CACT,oBAcJ,CAbE,CAEA,4EAEE,kBAA8C,CAC9C,UACF,CAEA,uCACE,kBAA+C,CAC/C,UAAyB,CACzB,SACF,CAGF,8BACE,aAAc,CACd,eAAgB,CAChB,kBAAmB,CACnB,oBAAqB,CACrB,iBAkBF,CAfE,yCACE,eACF,CAEA,2BAZF,8BAaI,gBAUJ,CATE,CAEA,wBAhBF,8BAiBI,gBAMJ,CALE,CAEA,0BApBF,8BAqBI,eAEJ,CADE,CAGF,oCACE,eACF,CAEA,sCACE,YAKF,CAHE,wBAHF,sCAII,eAEJ,CADE,CAGF,4BACE,QAAS,CACT,SAMF,CAJE,wBAJF,4BAKI,iBAAkB,CAClB,SAEJ,CADE,CAGF,4BACE,QAAS,CAET,kBAAmB,CACnB,oBAAqB,CACrB,uBAAyB,CACzB,YAaF,CAXE,wBARF,4BASI,aAUJ,CATE,CAEA,wBAZF,4BAaI,iBAMJ,CALE,CAEA,2BAhBF,4BAiBI,gBAEJ,CADE,CAGF,kCACE,aAAc,CACd,oBACF,CAIE,wBAFF,0DAGI,YAAa,CACb,mBAAoB,CACpB,qBAEJ,CADE","file":"offers.css","sourcesContent":["@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-offers-module-container {\n position: relative;\n}\n\n.coop-double-squircles-bg {\n position: absolute;\n right: 0;\n left: 0;\n top: 0;\n bottom: 0;\n\n & svg {\n transform: translate(-3%, -8%);\n\n @media (--mq-small) {\n transform: translate(-4%, -10%);\n }\n @media (--mq-large) {\n transform: translate(-10%, -10%);\n }\n }\n}\n\n.coop-c-offersmodule {\n padding: 1.5rem;\n background-color: #fff;\n margin-bottom: var(--spacing-base);\n box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);\n border-radius: 1rem;\n position: relative;\n z-index: 2;\n\n @media (--mq-medium) {\n padding: 2rem;\n }\n}\n\n.coop-c-offersmodule__header {\n margin-bottom: 1rem;\n\n @media (--mq-medium) {\n margin-bottom: 0.5rem;\n }\n}\n\n.coop-c-offersmodule__title {\n padding-top: 0;\n\n @media (--mq-small) {\n font-size: 1.625rem;\n line-height: 2.25rem;\n }\n\n @media (--mq-medium) {\n margin: 0;\n }\n}\n\n.coop-c-offersmodule__cta {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin: 0 0 1rem 1rem;\n }\n\n @media (--mq-medium) {\n display: flex;\n }\n\n @media (--mq-xlarge) {\n display: inline-block;\n }\n}\n\n.coop-c-offersmodule__cta__link {\n padding: calc(var(--spacing-base--1-4) * 1.75)\n calc(var(--spacing-base--1-2) * 1.5);\n color: var(--color-white);\n background: var(--color-button-primary);\n font-size: 1.125rem;\n font-family: var(--font-family);\n font-weight: 500;\n text-align: center;\n border: 0;\n border-radius: 0.4375rem;\n transition: all 0.15s linear;\n outline: none;\n text-decoration: none;\n line-height: normal;\n margin: 0 auto;\n display: block;\n\n @media (--mq-medium) {\n padding: var(--spacing-base--1-2) calc(var(--spacing-base--1-2) * 1.5);\n line-height: 1.125rem;\n }\n\n @media (--mq-small) {\n margin: 0;\n display: inline-block;\n }\n\n &:hover,\n &:focus {\n background: var(--color-button-primary--hover);\n color: var(--color-white);\n }\n\n &:active {\n background: var(--color-button-primary--active);\n color: var(--color-white);\n outline: 0;\n }\n}\n\n.coop-c-offersmodule__sign-in {\n display: block;\n margin-bottom: 0;\n font-size: 1.125rem;\n line-height: 1.625rem;\n text-align: center;\n\n /* required to overwrite foundation CSS */\n &:last-child {\n margin-bottom: 0;\n }\n\n @media (--mq-xlarge) {\n line-height: 2rem;\n }\n\n @media (--mq-medium) {\n margin-left: 1rem;\n }\n\n @media (--mq-small) {\n text-align: left;\n }\n}\n\n.coop-c-offersmodule__sign-in__link {\n font-weight: 500;\n}\n\n.coop-c-offersmodule__media-container {\n display: none;\n\n @media (--mq-large) {\n display: inherit;\n }\n}\n\n.coop-c-offersmodule__media {\n margin: 0;\n padding: 0;\n\n @media (--mq-medium) {\n position: relative;\n left: 20px;\n }\n}\n\n.coop-c-offersmodule__links {\n margin: 0;\n padding: 0;\n font-size: 1.125rem;\n line-height: 1.625rem;\n padding: 0.27rem 0 0 2rem;\n display: none;\n\n @media (--mq-medium) {\n display: block;\n }\n\n @media (--mq-large) {\n align-self: center;\n }\n\n @media (--mq-xlarge) {\n line-height: 2rem;\n }\n}\n\n.coop-c-offersmodule__links__link {\n color: #2f66af;\n border-color: #2f66af;\n}\n\n.coop-c-offersmodule__actions,\n.coop-c-offersmodule__links {\n @media (--mq-medium) {\n display: flex;\n align-self: flex-end;\n flex-direction: column;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--offers/package.json b/packages/shared-component--offers/package.json index 44f1bb77..51b50b2a 100755 --- a/packages/shared-component--offers/package.json +++ b/packages/shared-component--offers/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--offers" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--offers/src/offers.pcss b/packages/shared-component--offers/src/offers.pcss index e57b14dc..35f65ee3 100755 --- a/packages/shared-component--offers/src/offers.pcss +++ b/packages/shared-component--offers/src/offers.pcss @@ -1,4 +1,4 @@ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-offers-module-container { position: relative; diff --git a/packages/shared-component--offersPromo/dist/offersPromo.css.map b/packages/shared-component--offersPromo/dist/offersPromo.css.map index 24292840..386a7c22 100644 --- a/packages/shared-component--offersPromo/dist/offersPromo.css.map +++ b/packages/shared-component--offersPromo/dist/offersPromo.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/offersPromo.pcss"],"names":[],"mappings":"AAIA,+CAEE,iBACF,CAEA,2BACE,wBAAyB,CACzB,uCACF,CAEA,0BACE,aAAc,CACd,oBAAqB,CACrB,aAAc,CACd,QAUF,CARE,gEAEE,aAKF,CAHE,oEACE,yBACF,CAIJ,6BACE,iBAAkB,CAClB,aAAwB,CACxB,qBAAoC,CACpC,8BAMF,CAJE,wBANF,6BAOI,UAAW,CACX,SAEJ,CADE,CAGF,2BACE,eAAgB,CAChB,kBAA2B,CAC3B,gBAAiB,CACjB,QAAS,CACT,SAAU,CACV,aASF,CAPE,wBARF,2BASI,kBAMJ,CALE,CAEA,wBAZF,2BAaI,kBAEJ,CADE,CAGF,4BACE,eAKF,CAHE,wBAHF,4BAII,kBAEJ,CADE,CAGF,0BACE,kBAAmB,CACnB,mBA4BF,CA1BE,wBAJF,0BAKI,eAyBJ,CAxBE,CAEA,4BACE,cAA2B,CAC3B,eAmBF,CAjBE,wBAJF,4BAKI,cAgBJ,CAfE,CAEA,wBARF,4BASI,eAAgB,CAChB,sBAWJ,CAVE,CAEA,oEAEE,aACF,CAEA,uCACE,eACF,CAIJ,2BACE,yBAyBF,CAvBE,6BACE,cAA2B,CAC3B,kBAKF,CAHE,wCACE,eACF,CAGF,wBACE,6BACE,cACF,CACF,CAEA,wBAlBF,2BAmBI,mBAA+B,CAC/B,oBAMJ,CAJI,6BACE,kBACF,CACF,CAGF,0BACE,qBAAqE,CACrE,8BAiBF,CAfE,wBAJF,0BAKI,WAAY,CACZ,SAAU,CACV,eAAmD,CACnD,eAAgB,CAIhB,cAOJ,CAVE,CAMA,2BAfF,0BAgBI,2BAGJ,CADE,CAGF,oDACE,aAAyB,CACzB,qBAAoC,CACpC,sCAA2C,CAC3C,iBAKF,CAHE,wBANF,oDAOI,YAEJ,CADE,CAGF,uDACE,uBAMF,CAJE,wBAHF,uDAII,gBAAiB,CACjB,2BAEJ,CADE,CAGF,gCACE,iBAA4B,CAC5B,kBASF,CAPE,wBAJF,gCAKI,cAMJ,CALE,CAEA,2BARF,gCASI,kBAEJ,CADE,CAGF,gCACE,UAAW,CACX,iBAA+B,CAC/B,SASF,CAPE,wBALF,gCAMI,qBAMJ,CALE,CAEA,2BATF,gCAUI,mBAEJ,CADE,CAGF,2DAEE,UAAW,CACX,WAWF,CATE,wBALF,2DAMI,WAAY,CACZ,YAOJ,CANE,CAEA,2BAVF,2DAWI,WAAY,CACZ,YAEJ,CADE,CAGF,iCACE,8BAkBF,CAhBE,mCACE,cAA2B,CAC3B,eACF,CAEA,wBARF,iCASI,mCAUJ,CATE,CAEA,2BAZF,iCAaI,iCAMJ,CAJI,mCACE,kBACF,CACF,CAGF,0DAEE,aACF,CAEA,2BACE,eAAgB,CAChB,iBACF,CAEA,+BACE,UACF","file":"offersPromo.css","sourcesContent":["/* Offers Promo */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-offerspromo,\n.coop-c-offerspromo__inner {\n border-radius: var(--ui-border-radius);\n}\n\n.coop-c-offerspromo__inner {\n background-color: inherit;\n box-shadow: var(--ui-shadow);\n}\n\n.coop-c-offerspromo__link {\n display: block;\n text-decoration: none;\n color: inherit;\n border: 0;\n\n &:hover,\n &:focus {\n color: var(--color-text);\n\n & p {\n text-decoration: underline;\n }\n }\n}\n\n.coop-c-offerspromo__content {\n position: relative;\n color: var(--color-text);\n background-color: var(--color-white);\n transition: width 0.15s ease-out;\n\n @media (--mq-medium) {\n float: left;\n width: 50%;\n }\n}\n\n.coop-c-offerspromo__title {\n font-weight: 600;\n font-size: var(--type-h3-s);\n line-height: 2rem;\n margin: 0;\n padding: 0;\n color: var(--color-text);\n\n @media (--mq-medium) {\n font-size: var(--type-h3-s);\n }\n\n @media (--mq-large) {\n font-size: var(--type-h3-l);\n }\n}\n\n.coop-c-offerspromo__header {\n max-width: 25rem; /* 400px */\n\n @media (--mq-large) {\n max-width: 31.25rem; /* 500px */\n }\n}\n\n.coop-c-offerspromo__body {\n max-width: 18.75rem; /* 300px */\n line-height: 1.75rem;\n\n @media (--mq-large) {\n max-width: 30rem; /* 480px */\n }\n\n & p {\n font-size: var(--type-sp-s);\n margin-top: var(--spacing-16);\n\n @media (--mq-medium) {\n font-size: var(--type-sp-s);\n }\n\n @media (--mq-large) {\n max-width: 30rem; /* 480px */\n font-size: var(--type-sp-l);\n }\n\n &:hover,\n &:focus {\n color: var(--color-text);\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n.coop-c-offerspromo__terms {\n padding: var(--spacing-8) var(--spacing-16) var(--spacing-24);\n\n & p {\n font-size: var(--type-sp-s);\n margin-bottom: var(--spacing-16);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n @media (--mq-medium) {\n & p {\n font-size: var(--type-sp-s);\n }\n }\n\n @media (--mq-large) {\n padding-left: var(--spacing-24);\n padding-right: var(--spacing-24);\n\n & p {\n font-size: var(--type-body-s);\n }\n }\n}\n\n.coop-c-offerspromo__card {\n padding: calc(var(--spacing-16) + var(--spacing-2)) var(--spacing-16);\n transition: width 0.15s ease-out;\n\n @media (--mq-medium) {\n float: right;\n width: 50%;\n padding: calc(var(--spacing-16) + var(--spacing-4));\n background: none;\n }\n\n @media (--mq-medium) {\n padding: var(--spacing-24);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-24) var(--spacing-32)\n calc(var(--spacing-16) + var(--spacing-4));\n }\n}\n\n.coop-c-offerspromo__card .coop-c-offerspromo__link {\n padding: var(--spacing-8);\n background-color: var(--color-white);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n border-radius: 4px;\n\n @media (--mq-large) {\n padding: var(--spacing-16);\n }\n}\n\n.coop-c-offerspromo__content .coop-c-offerspromo__link {\n padding: var(--spacing-16) var(--spacing-16) var(--spacing-8);\n\n @media (--mq-large) {\n min-height: 192px;\n padding: var(--spacing-24) var(--spacing-24) var(--spacing-8);\n }\n}\n\n.coop-c-offerspromo__card-title {\n margin: 0 0 var(--spacing-4);\n font-size: var(--type-h3-l);\n\n @media (--mq-large) {\n font-size: var(--type-h2-l);\n }\n\n @media (--mq-xlarge) {\n font-size: var(--type-h1-l);\n }\n}\n\n.coop-c-offerspromo__card-media {\n float: left;\n margin: 0 var(--spacing-16) 0 0;\n padding: 0;\n\n @media (--mq-large) {\n margin-right: calc(var(--spacing-16) + var(--spacing-2));\n }\n\n @media (--mq-xlarge) {\n margin-right: var(--spacing-24);\n }\n}\n\n.coop-c-offerspromo__card-media,\n.coop-c-offerspromo__image {\n width: 90px;\n height: 90px;\n\n @media (--mq-large) {\n width: 142px;\n height: 142px;\n }\n\n @media (--mq-xlarge) {\n width: 174px;\n height: 174px;\n }\n}\n\n.coop-c-offerspromo__card-header {\n padding-left: calc(90px + var(--spacing-16));\n\n & p {\n font-size: var(--type-sp-s);\n margin-bottom: 0;\n }\n\n @media (--mq-large) {\n padding-left: calc(142px + var(--spacing-16) + var(--spacing-2));\n }\n\n @media (--mq-xlarge) {\n padding-left: calc(174px + var(--spacing-24));\n\n & p {\n font-size: var(--type-h3-s);\n }\n }\n}\n\n.coop-c-offerspromo__image,\n.coop-c-offerspromo__image img {\n display: block;\n}\n\n.coop-c-offerspromo__image {\n overflow: hidden;\n border-radius: 4px;\n}\n\n.coop-c-offerspromo__image img {\n width: 100%;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/offersPromo.pcss"],"names":[],"mappings":"AAIA,+CAEE,iBACF,CAEA,2BACE,wBAAyB,CACzB,uCACF,CAEA,0BACE,aAAc,CACd,oBAAqB,CACrB,aAAc,CACd,QAUF,CARE,gEAEE,aAKF,CAHE,oEACE,yBACF,CAIJ,6BACE,iBAAkB,CAClB,aAAwB,CACxB,qBAAoC,CACpC,8BAMF,CAJE,wBANF,6BAOI,UAAW,CACX,SAEJ,CADE,CAGF,2BACE,eAAgB,CAChB,kBAA2B,CAC3B,gBAAiB,CACjB,QAAS,CACT,SAAU,CACV,aASF,CAPE,wBARF,2BASI,kBAMJ,CALE,CAEA,wBAZF,2BAaI,kBAEJ,CADE,CAGF,4BACE,eAKF,CAHE,wBAHF,4BAII,kBAEJ,CADE,CAGF,0BACE,kBAAmB,CACnB,mBA4BF,CA1BE,wBAJF,0BAKI,eAyBJ,CAxBE,CAEA,4BACE,cAA2B,CAC3B,eAmBF,CAjBE,wBAJF,4BAKI,cAgBJ,CAfE,CAEA,wBARF,4BASI,eAAgB,CAChB,sBAWJ,CAVE,CAEA,oEAEE,aACF,CAEA,uCACE,eACF,CAIJ,2BACE,yBAyBF,CAvBE,6BACE,cAA2B,CAC3B,kBAKF,CAHE,wCACE,eACF,CAGF,wBACE,6BACE,cACF,CACF,CAEA,wBAlBF,2BAmBI,mBAA+B,CAC/B,oBAMJ,CAJI,6BACE,kBACF,CACF,CAGF,0BACE,qBAAqE,CACrE,8BAiBF,CAfE,wBAJF,0BAKI,WAAY,CACZ,SAAU,CACV,eAAmD,CACnD,eAAgB,CAIhB,cAOJ,CAVE,CAMA,2BAfF,0BAgBI,2BAGJ,CADE,CAGF,oDACE,aAAyB,CACzB,qBAAoC,CACpC,sCAA2C,CAC3C,iBAKF,CAHE,wBANF,oDAOI,YAEJ,CADE,CAGF,uDACE,uBAMF,CAJE,wBAHF,uDAII,gBAAiB,CACjB,2BAEJ,CADE,CAGF,gCACE,iBAA4B,CAC5B,kBASF,CAPE,wBAJF,gCAKI,cAMJ,CALE,CAEA,2BARF,gCASI,kBAEJ,CADE,CAGF,gCACE,UAAW,CACX,iBAA+B,CAC/B,SASF,CAPE,wBALF,gCAMI,qBAMJ,CALE,CAEA,2BATF,gCAUI,mBAEJ,CADE,CAGF,2DAEE,UAAW,CACX,WAWF,CATE,wBALF,2DAMI,WAAY,CACZ,YAOJ,CANE,CAEA,2BAVF,2DAWI,WAAY,CACZ,YAEJ,CADE,CAGF,iCACE,8BAkBF,CAhBE,mCACE,cAA2B,CAC3B,eACF,CAEA,wBARF,iCASI,mCAUJ,CATE,CAEA,2BAZF,iCAaI,iCAMJ,CAJI,mCACE,kBACF,CACF,CAGF,0DAEE,aACF,CAEA,2BACE,eAAgB,CAChB,iBACF,CAEA,+BACE,UACF","file":"offersPromo.css","sourcesContent":["/* Offers Promo */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-offerspromo,\n.coop-c-offerspromo__inner {\n border-radius: var(--ui-border-radius);\n}\n\n.coop-c-offerspromo__inner {\n background-color: inherit;\n box-shadow: var(--ui-shadow);\n}\n\n.coop-c-offerspromo__link {\n display: block;\n text-decoration: none;\n color: inherit;\n border: 0;\n\n &:hover,\n &:focus {\n color: var(--color-text);\n\n & p {\n text-decoration: underline;\n }\n }\n}\n\n.coop-c-offerspromo__content {\n position: relative;\n color: var(--color-text);\n background-color: var(--color-white);\n transition: width 0.15s ease-out;\n\n @media (--mq-medium) {\n float: left;\n width: 50%;\n }\n}\n\n.coop-c-offerspromo__title {\n font-weight: 600;\n font-size: var(--type-h3-s);\n line-height: 2rem;\n margin: 0;\n padding: 0;\n color: var(--color-text);\n\n @media (--mq-medium) {\n font-size: var(--type-h3-s);\n }\n\n @media (--mq-large) {\n font-size: var(--type-h3-l);\n }\n}\n\n.coop-c-offerspromo__header {\n max-width: 25rem; /* 400px */\n\n @media (--mq-large) {\n max-width: 31.25rem; /* 500px */\n }\n}\n\n.coop-c-offerspromo__body {\n max-width: 18.75rem; /* 300px */\n line-height: 1.75rem;\n\n @media (--mq-large) {\n max-width: 30rem; /* 480px */\n }\n\n & p {\n font-size: var(--type-sp-s);\n margin-top: var(--spacing-16);\n\n @media (--mq-medium) {\n font-size: var(--type-sp-s);\n }\n\n @media (--mq-large) {\n max-width: 30rem; /* 480px */\n font-size: var(--type-sp-l);\n }\n\n &:hover,\n &:focus {\n color: var(--color-text);\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n.coop-c-offerspromo__terms {\n padding: var(--spacing-8) var(--spacing-16) var(--spacing-24);\n\n & p {\n font-size: var(--type-sp-s);\n margin-bottom: var(--spacing-16);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n\n @media (--mq-medium) {\n & p {\n font-size: var(--type-sp-s);\n }\n }\n\n @media (--mq-large) {\n padding-left: var(--spacing-24);\n padding-right: var(--spacing-24);\n\n & p {\n font-size: var(--type-body-s);\n }\n }\n}\n\n.coop-c-offerspromo__card {\n padding: calc(var(--spacing-16) + var(--spacing-2)) var(--spacing-16);\n transition: width 0.15s ease-out;\n\n @media (--mq-medium) {\n float: right;\n width: 50%;\n padding: calc(var(--spacing-16) + var(--spacing-4));\n background: none;\n }\n\n @media (--mq-medium) {\n padding: var(--spacing-24);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-24) var(--spacing-32)\n calc(var(--spacing-16) + var(--spacing-4));\n }\n}\n\n.coop-c-offerspromo__card .coop-c-offerspromo__link {\n padding: var(--spacing-8);\n background-color: var(--color-white);\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.05);\n border-radius: 4px;\n\n @media (--mq-large) {\n padding: var(--spacing-16);\n }\n}\n\n.coop-c-offerspromo__content .coop-c-offerspromo__link {\n padding: var(--spacing-16) var(--spacing-16) var(--spacing-8);\n\n @media (--mq-large) {\n min-height: 192px;\n padding: var(--spacing-24) var(--spacing-24) var(--spacing-8);\n }\n}\n\n.coop-c-offerspromo__card-title {\n margin: 0 0 var(--spacing-4);\n font-size: var(--type-h3-l);\n\n @media (--mq-large) {\n font-size: var(--type-h2-l);\n }\n\n @media (--mq-xlarge) {\n font-size: var(--type-h1-l);\n }\n}\n\n.coop-c-offerspromo__card-media {\n float: left;\n margin: 0 var(--spacing-16) 0 0;\n padding: 0;\n\n @media (--mq-large) {\n margin-right: calc(var(--spacing-16) + var(--spacing-2));\n }\n\n @media (--mq-xlarge) {\n margin-right: var(--spacing-24);\n }\n}\n\n.coop-c-offerspromo__card-media,\n.coop-c-offerspromo__image {\n width: 90px;\n height: 90px;\n\n @media (--mq-large) {\n width: 142px;\n height: 142px;\n }\n\n @media (--mq-xlarge) {\n width: 174px;\n height: 174px;\n }\n}\n\n.coop-c-offerspromo__card-header {\n padding-left: calc(90px + var(--spacing-16));\n\n & p {\n font-size: var(--type-sp-s);\n margin-bottom: 0;\n }\n\n @media (--mq-large) {\n padding-left: calc(142px + var(--spacing-16) + var(--spacing-2));\n }\n\n @media (--mq-xlarge) {\n padding-left: calc(174px + var(--spacing-24));\n\n & p {\n font-size: var(--type-h3-s);\n }\n }\n}\n\n.coop-c-offerspromo__image,\n.coop-c-offerspromo__image img {\n display: block;\n}\n\n.coop-c-offerspromo__image {\n overflow: hidden;\n border-radius: 4px;\n}\n\n.coop-c-offerspromo__image img {\n width: 100%;\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--offersPromo/package.json b/packages/shared-component--offersPromo/package.json index bd98c687..908cb2f8 100755 --- a/packages/shared-component--offersPromo/package.json +++ b/packages/shared-component--offersPromo/package.json @@ -20,12 +20,10 @@ "directory": "packages/shared-component--offersPromo" }, "devDependencies": { - "@coopdigital/foundations-layout": "^3.3.6", - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-layout": ">= 3.2.0 < 4", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--offersPromo/src/offersPromo.pcss b/packages/shared-component--offersPromo/src/offersPromo.pcss index 85f5507a..7faddd8a 100755 --- a/packages/shared-component--offersPromo/src/offersPromo.pcss +++ b/packages/shared-component--offersPromo/src/offersPromo.pcss @@ -1,6 +1,6 @@ /* Offers Promo */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-offerspromo, .coop-c-offerspromo__inner { diff --git a/packages/shared-component--postcode/dist/postcode.css.map b/packages/shared-component--postcode/dist/postcode.css.map index 283fe03c..db181d0c 100644 --- a/packages/shared-component--postcode/dist/postcode.css.map +++ b/packages/shared-component--postcode/dist/postcode.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/postcode.pcss"],"names":[],"mappings":"AAEA,iBACE,kMACmB,CACnB,wBAAgD,CAChD,uBAAwB,CACxB,YAMF,CAJE,wBAPF,iBAQI,qBAAsB,CACtB,2BAEJ,CADE,CAGF,mDACE,wBACF,CAEA,wBACE,eAA8B,CAC9B,qBAAsB,CACtB,YAA0B,CAC1B,iBAAkB,CAClB,cAcF,CAZE,2BACE,kBAA2B,CAC3B,eACF,CAEA,wBAZF,wBAaI,aAMJ,CALE,CAEA,wBAhBF,wBAiBI,WAEJ,CADE,CAGF,wBACE,kBAAmB,CACnB,iBACF,CAEA,yBACE,WAAY,CACZ,aAcF,CAZE,6BACE,SAAwB,CACxB,qBASF,CAPE,kCACE,SACF,CAEA,oCACE,YACF,CAIJ,mCACE,cAAe,CACf,kBACF,CAEA,mDACE,eACF,CAEA,sBACE,YACF,CAEA,sEACE,uBACE,YACF,CAEA,sBACE,aAKF,CAHE,wBACE,iBACF,CAEJ,CAEA,uBACE,iBACF,CAEA,yBACE,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,OAAQ,CACR,cAAe,CACf,eAAgB,CAChB,QAAS,CACT,iBAAkB,CAClB,wBAAyB,CACzB,2BAA4B,CAC5B,cACF,CAEA,6BACE,iBAAkB,CAClB,OACF,CAEA,kCACE,WAAe,CACf,gBACF","file":"postcode.css","sourcesContent":["@import \"@coopdigital/foundations-vars\";\n\n.coop-c-postcode {\n background: url(\"https://images.ctfassets.net/bffxiku554r1/3X4qWR7fQksgWawaYKH2qp/52fd244cb77eddfda51ea70c40aa0de6/food-instore-3.jpeg?fm=jpg&fl=progressive&q=100&h=300&fit=crop\")\n no-repeat 0 -10px;\n background-color: var(--color-grey-neutral-warm);\n background-size: contain;\n padding: 10px;\n\n @media (--mq-large) {\n background-size: cover;\n background-position: 0 -24px;\n }\n}\n\n.coop-c-postcode.error .coop-c-postcode__searchbox {\n border: 1px solid var(--color-red-mid);\n}\n\n.coop-c-postcode__inner {\n background: var(--color-white);\n margin: 36px 10px 10px;\n padding: var(--spacing-16);\n border-radius: 6px;\n max-width: 100%;\n\n & h2 {\n font-size: var(--type-h2-s);\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n max-width: 45%;\n }\n\n @media (--mq-large) {\n margin: 10px;\n }\n}\n\n.coop-c-postcode__label {\n font-size: 1.125rem;\n margin-bottom: 8px;\n}\n\n.coop-c-postcode__submit {\n border: none;\n padding: 0 3px;\n\n & svg {\n fill: var(--color-white);\n vertical-align: bottom;\n\n & path {\n fill: var(--color-white);\n }\n\n & circle {\n fill: var(--color-turquoise-mid);\n }\n }\n}\n\n.coop-c-postcode__error:last-child {\n margin: 6px 0 0;\n font-size: 1.125rem;\n}\n\n.coop-c-postcode__error:last-child .coop-u-red-mid {\n font-weight: 500;\n}\n\n.coop-c-postcode__alt {\n display: none;\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .coop-c-postcode__form {\n display: none;\n }\n\n .coop-c-postcode__alt {\n display: block;\n\n & p {\n margin-bottom: 8px;\n }\n }\n}\n\n.coop-c-postcode__form {\n position: relative;\n}\n\n.coop-c-postcode__submit {\n position: absolute;\n width: 60px;\n bottom: 0;\n right: 0;\n padding: 0 15px;\n margin-bottom: 0;\n border: 0;\n border-radius: 5px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n cursor: pointer;\n}\n\n.coop-c-postcode__submit svg {\n position: relative;\n top: 1px;\n}\n\n.coop-c-postcode__submit svg path {\n stroke: #ffffff; /* Background color against your svg */\n stroke-width: 1px; /*Between 1px and 2px*/\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/postcode.pcss"],"names":[],"mappings":"AAEA,iBACE,kMACmB,CACnB,wBAAgD,CAChD,uBAAwB,CACxB,YAMF,CAJE,wBAPF,iBAQI,qBAAsB,CACtB,2BAEJ,CADE,CAGF,mDACE,wBACF,CAEA,wBACE,eAA8B,CAC9B,qBAAsB,CACtB,YAA0B,CAC1B,iBAAkB,CAClB,cAcF,CAZE,2BACE,kBAA2B,CAC3B,eACF,CAEA,wBAZF,wBAaI,aAMJ,CALE,CAEA,wBAhBF,wBAiBI,WAEJ,CADE,CAGF,wBACE,kBAAmB,CACnB,iBACF,CAEA,yBACE,WAAY,CACZ,aAcF,CAZE,6BACE,SAAwB,CACxB,qBASF,CAPE,kCACE,SACF,CAEA,oCACE,YACF,CAIJ,mCACE,cAAe,CACf,kBACF,CAEA,mDACE,eACF,CAEA,sBACE,YACF,CAEA,sEACE,uBACE,YACF,CAEA,sBACE,aAKF,CAHE,wBACE,iBACF,CAEJ,CAEA,uBACE,iBACF,CAEA,yBACE,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,OAAQ,CACR,cAAe,CACf,eAAgB,CAChB,QAAS,CACT,iBAAkB,CAClB,wBAAyB,CACzB,2BAA4B,CAC5B,cACF,CAEA,6BACE,iBAAkB,CAClB,OACF,CAEA,kCACE,WAAe,CACf,gBACF","file":"postcode.css","sourcesContent":["@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-postcode {\n background: url(\"https://images.ctfassets.net/bffxiku554r1/3X4qWR7fQksgWawaYKH2qp/52fd244cb77eddfda51ea70c40aa0de6/food-instore-3.jpeg?fm=jpg&fl=progressive&q=100&h=300&fit=crop\")\n no-repeat 0 -10px;\n background-color: var(--color-grey-neutral-warm);\n background-size: contain;\n padding: 10px;\n\n @media (--mq-large) {\n background-size: cover;\n background-position: 0 -24px;\n }\n}\n\n.coop-c-postcode.error .coop-c-postcode__searchbox {\n border: 1px solid var(--color-red-mid);\n}\n\n.coop-c-postcode__inner {\n background: var(--color-white);\n margin: 36px 10px 10px;\n padding: var(--spacing-16);\n border-radius: 6px;\n max-width: 100%;\n\n & h2 {\n font-size: var(--type-h2-s);\n margin-bottom: 0;\n }\n\n @media (--mq-medium) {\n max-width: 45%;\n }\n\n @media (--mq-large) {\n margin: 10px;\n }\n}\n\n.coop-c-postcode__label {\n font-size: 1.125rem;\n margin-bottom: 8px;\n}\n\n.coop-c-postcode__submit {\n border: none;\n padding: 0 3px;\n\n & svg {\n fill: var(--color-white);\n vertical-align: bottom;\n\n & path {\n fill: var(--color-white);\n }\n\n & circle {\n fill: var(--color-turquoise-mid);\n }\n }\n}\n\n.coop-c-postcode__error:last-child {\n margin: 6px 0 0;\n font-size: 1.125rem;\n}\n\n.coop-c-postcode__error:last-child .coop-u-red-mid {\n font-weight: 500;\n}\n\n.coop-c-postcode__alt {\n display: none;\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .coop-c-postcode__form {\n display: none;\n }\n\n .coop-c-postcode__alt {\n display: block;\n\n & p {\n margin-bottom: 8px;\n }\n }\n}\n\n.coop-c-postcode__form {\n position: relative;\n}\n\n.coop-c-postcode__submit {\n position: absolute;\n width: 60px;\n bottom: 0;\n right: 0;\n padding: 0 15px;\n margin-bottom: 0;\n border: 0;\n border-radius: 5px;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n cursor: pointer;\n}\n\n.coop-c-postcode__submit svg {\n position: relative;\n top: 1px;\n}\n\n.coop-c-postcode__submit svg path {\n stroke: #ffffff; /* Background color against your svg */\n stroke-width: 1px; /*Between 1px and 2px*/\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--postcode/package.json b/packages/shared-component--postcode/package.json index 3fc8ce45..05326517 100755 --- a/packages/shared-component--postcode/package.json +++ b/packages/shared-component--postcode/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--postcode" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--postcode/src/postcode.pcss b/packages/shared-component--postcode/src/postcode.pcss index f788f8c9..83187af3 100755 --- a/packages/shared-component--postcode/src/postcode.pcss +++ b/packages/shared-component--postcode/src/postcode.pcss @@ -1,4 +1,4 @@ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-postcode { background: url("https://images.ctfassets.net/bffxiku554r1/3X4qWR7fQksgWawaYKH2qp/52fd244cb77eddfda51ea70c40aa0de6/food-instore-3.jpeg?fm=jpg&fl=progressive&q=100&h=300&fit=crop") diff --git a/packages/shared-component--signpost/dist/signpost.css.map b/packages/shared-component--signpost/dist/signpost.css.map index 44b792d7..f30064d6 100644 --- a/packages/shared-component--signpost/dist/signpost.css.map +++ b/packages/shared-component--signpost/dist/signpost.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/signpost.pcss"],"names":[],"mappings":"AAIA,iBAGE,qBAAoC,CAEpC,kBAEF,CAEA,wCARE,WAAY,CACZ,YAAa,CAEb,UAAW,CAEX,iBA6BF,CA1BA,uBAGE,kBAAmB,CACnB,kBAAmB,CAEnB,uCAA4B,CAC5B,iCAAmC,CACnC,aAAwB,CACxB,oBAAqB,CAErB,eAeF,CAbE,wBAbF,uBAcI,qBAYJ,CAXE,CAGA,gCAlBF,uBAmBI,aAOJ,CANE,CAEA,0DAEE,uCACF,CAGF,uBACE,UAAyB,CACzB,iBAAkB,CAClB,iBAAkB,CAClB,WAAa,CACb,aAAe,CACf,cAAe,CACf,gBAAiB,CACjB,YAAa,CACb,kBAAmB,CACnB,SAAU,CACV,QAQF,CANE,wBAbF,uBAcI,SAAU,CACV,YAAc,CACd,eAAgB,CAChB,eAEJ,CADE,CAGF,8BACE,MAAO,CACP,aAAc,CACd,iBAAkB,CAClB,SAAU,CACV,eAAgB,CAChB,gBAAkB,CAClB,gBAMF,CAJE,wBATF,8BAUI,cAAe,CACf,kBAEJ,CADE,CAGF,iCACE,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WAAY,CACZ,SAOF,CALE,qCACE,UAAW,CACX,WAAY,CACZ,YACF,CAGF,wBACE,QAAS,CACT,iBAAkB,CAClB,WAAY,CACZ,mBAAoB,CACpB,cAOF,CALE,wBAPF,wBAQI,WAAY,CACZ,eAAgB,CAChB,UAEJ,CADE,CAGF,wBACE,aAAc,CACd,UAAW,CACX,WAkBF,CAhBE,wBALF,wBAMI,UAAW,CACX,WAcJ,CAbE,CAEA,4BACE,aAAc,CACd,UAAW,CACX,WAAY,CACZ,QAMF,CAJE,wBANF,4BAOI,UAAW,CACX,WAEJ,CADE,CAIJ,0BACE,YAAa,CACb,oBAAoC,CACpC,eAAgB,CAChB,kBAAmB,CACnB,MAUF,CARE,wBAPF,0BAQI,eAAgB,CAChB,mBAMJ,CALE,CAEA,wBAZF,0BAaI,oBAEJ,CADE,CAGF,wBACE,MAAO,CACP,QAAS,CACT,mBAAqB,CACrB,eAAgB,CAChB,kBAAmB,CACnB,oBAUF,CARE,wBARF,wBASI,kBAOJ,CANE,CAEA,wBAZF,wBAaI,iBAAkB,CAClB,mBAEJ,CADE,CAGF,gEAEE,yBACF,CAEA,uBACE,aAAc,CACd,kBAAmB,CACnB,gBAAkB,CAClB,oCAAsC,CACtC,YAAc,CACd,eAAgB,CAChB,eACF,CAGA,+BACE,cAAe,CACf,eAAgB,CAChB,eAAgB,CAChB,kBACF,CAEA,8DAEE,4BACF,CAGA,8EAEE,cACF,CAEA,4BACE,aAAc,CACd,UAAW,CACX,WACF","file":"signpost.css","sourcesContent":["/* Signpost */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-signpost {\n flex-grow: 1;\n display: flex;\n background-color: var(--color-white);\n width: 100%;\n margin-bottom: var(--spacing-64);\n border-radius: var(--ui-border-radius);\n}\n\n.coop-c-signpost__link {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n border-bottom: none;\n width: 100%;\n box-shadow: var(--ui-shadow);\n transition: box-shadow 0.2s ease-in;\n color: var(--color-text);\n text-decoration: none;\n border-radius: var(--ui-border-radius);\n overflow: hidden;\n\n @media (--mq-medium) {\n flex-direction: column;\n }\n\n /* IE 10/11 */\n @media all and (-ms-high-contrast: none) {\n display: block;\n }\n\n &:hover,\n &:focus {\n box-shadow: var(--ui-shadow--hover);\n }\n}\n\n.coop-c-signpost__deal {\n color: var(--color-white);\n text-align: center;\n position: absolute;\n top: -0.75rem;\n right: -0.75rem;\n width: 3.625rem;\n height: 2.8125rem;\n display: flex;\n align-items: center;\n padding: 0;\n margin: 0;\n\n @media (--mq-medium) {\n top: -1rem;\n right: -0.5rem;\n width: 3.8125rem;\n height: 3.625rem;\n }\n}\n\n.coop-c-signpost__deal__label {\n flex: 1;\n display: block;\n position: relative;\n z-index: 2;\n font-weight: 600;\n font-size: 0.75rem;\n line-height: 1rem;\n\n @media (--mq-medium) {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n}\n\n.coop-c-signpost__deal__squircle {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n\n & svg {\n width: 100%;\n height: 100%;\n fill: #d3212a;\n }\n}\n\n.coop-c-signpost__media {\n margin: 0;\n position: relative;\n height: 5rem;\n flex-basis: 8.875rem;\n width: 8.875rem;\n\n @media (--mq-medium) {\n height: auto;\n flex-basis: auto;\n width: auto;\n }\n}\n\n.coop-c-signpost__image {\n display: block;\n width: auto;\n height: 100%;\n\n @media (--mq-medium) {\n width: 100%;\n height: auto;\n }\n\n & img {\n display: block;\n width: auto;\n height: 100%;\n border: 0;\n\n @media (--mq-medium) {\n width: 100%;\n height: auto;\n }\n }\n}\n\n.coop-c-signpost__content {\n display: flex;\n padding: 0.5rem 1.5rem 0.5rem 1.5rem;\n min-height: 5rem;\n align-items: center;\n flex: 1;\n\n @media (--mq-medium) {\n min-height: none;\n padding: 1rem 1.5rem;\n }\n\n @media (--mq-large) {\n padding: 1.25rem 2rem;\n }\n}\n\n.coop-c-signpost__title {\n flex: 1;\n margin: 0;\n padding: 0 0.5rem 0 0;\n font-weight: 600;\n font-size: 1.125rem;\n line-height: 1.625rem;\n\n @media (--mq-medium) {\n padding-right: 1rem;\n }\n\n @media (--mq-large) {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n}\n\na:hover .coop-c-signpost__title,\na:focus .coop-c-signpost__title {\n text-decoration: underline;\n}\n\n.coop-c-signpost__icon {\n display: block;\n flex-basis: 0.75rem;\n max-width: 0.75rem;\n transition: transform 0.2s ease-in-out;\n width: 0.75rem;\n height: 1.375rem;\n overflow: hidden;\n}\n\n/* Option icon that prefixes signpost text */\n.coop-c-signpost__icon--prefix {\n max-width: 2rem;\n max-height: 2rem;\n flex-basis: 2rem;\n margin-right: 0.4rem;\n}\n\na:hover .coop-c-signpost__icon,\na:focus .coop-c-signpost__icon {\n transform: translateX(0.25rem);\n}\n\n/* Do not translate prefix icons on hover */\na:hover .coop-c-signpost__icon--prefix,\na:focus .coop-c-signpost__icon--prefix {\n transform: none;\n}\n\n.coop-c-signpost__icon__svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/signpost.pcss"],"names":[],"mappings":"AAIA,iBAGE,qBAAoC,CAEpC,kBAEF,CAEA,wCARE,WAAY,CACZ,YAAa,CAEb,UAAW,CAEX,iBA6BF,CA1BA,uBAGE,kBAAmB,CACnB,kBAAmB,CAEnB,uCAA4B,CAC5B,iCAAmC,CACnC,aAAwB,CACxB,oBAAqB,CAErB,eAeF,CAbE,wBAbF,uBAcI,qBAYJ,CAXE,CAGA,gCAlBF,uBAmBI,aAOJ,CANE,CAEA,0DAEE,uCACF,CAGF,uBACE,UAAyB,CACzB,iBAAkB,CAClB,iBAAkB,CAClB,WAAa,CACb,aAAe,CACf,cAAe,CACf,gBAAiB,CACjB,YAAa,CACb,kBAAmB,CACnB,SAAU,CACV,QAQF,CANE,wBAbF,uBAcI,SAAU,CACV,YAAc,CACd,eAAgB,CAChB,eAEJ,CADE,CAGF,8BACE,MAAO,CACP,aAAc,CACd,iBAAkB,CAClB,SAAU,CACV,eAAgB,CAChB,gBAAkB,CAClB,gBAMF,CAJE,wBATF,8BAUI,cAAe,CACf,kBAEJ,CADE,CAGF,iCACE,iBAAkB,CAClB,KAAM,CACN,MAAO,CACP,UAAW,CACX,WAAY,CACZ,SAOF,CALE,qCACE,UAAW,CACX,WAAY,CACZ,YACF,CAGF,wBACE,QAAS,CACT,iBAAkB,CAClB,WAAY,CACZ,mBAAoB,CACpB,cAOF,CALE,wBAPF,wBAQI,WAAY,CACZ,eAAgB,CAChB,UAEJ,CADE,CAGF,wBACE,aAAc,CACd,UAAW,CACX,WAkBF,CAhBE,wBALF,wBAMI,UAAW,CACX,WAcJ,CAbE,CAEA,4BACE,aAAc,CACd,UAAW,CACX,WAAY,CACZ,QAMF,CAJE,wBANF,4BAOI,UAAW,CACX,WAEJ,CADE,CAIJ,0BACE,YAAa,CACb,oBAAoC,CACpC,eAAgB,CAChB,kBAAmB,CACnB,MAUF,CARE,wBAPF,0BAQI,eAAgB,CAChB,mBAMJ,CALE,CAEA,wBAZF,0BAaI,oBAEJ,CADE,CAGF,wBACE,MAAO,CACP,QAAS,CACT,mBAAqB,CACrB,eAAgB,CAChB,kBAAmB,CACnB,oBAUF,CARE,wBARF,wBASI,kBAOJ,CANE,CAEA,wBAZF,wBAaI,iBAAkB,CAClB,mBAEJ,CADE,CAGF,gEAEE,yBACF,CAEA,uBACE,aAAc,CACd,kBAAmB,CACnB,gBAAkB,CAClB,oCAAsC,CACtC,YAAc,CACd,eAAgB,CAChB,eACF,CAGA,+BACE,cAAe,CACf,eAAgB,CAChB,eAAgB,CAChB,kBACF,CAEA,8DAEE,4BACF,CAGA,8EAEE,cACF,CAEA,4BACE,aAAc,CACd,UAAW,CACX,WACF","file":"signpost.css","sourcesContent":["/* Signpost */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-signpost {\n flex-grow: 1;\n display: flex;\n background-color: var(--color-white);\n width: 100%;\n margin-bottom: var(--spacing-64);\n border-radius: var(--ui-border-radius);\n}\n\n.coop-c-signpost__link {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n border-bottom: none;\n width: 100%;\n box-shadow: var(--ui-shadow);\n transition: box-shadow 0.2s ease-in;\n color: var(--color-text);\n text-decoration: none;\n border-radius: var(--ui-border-radius);\n overflow: hidden;\n\n @media (--mq-medium) {\n flex-direction: column;\n }\n\n /* IE 10/11 */\n @media all and (-ms-high-contrast: none) {\n display: block;\n }\n\n &:hover,\n &:focus {\n box-shadow: var(--ui-shadow--hover);\n }\n}\n\n.coop-c-signpost__deal {\n color: var(--color-white);\n text-align: center;\n position: absolute;\n top: -0.75rem;\n right: -0.75rem;\n width: 3.625rem;\n height: 2.8125rem;\n display: flex;\n align-items: center;\n padding: 0;\n margin: 0;\n\n @media (--mq-medium) {\n top: -1rem;\n right: -0.5rem;\n width: 3.8125rem;\n height: 3.625rem;\n }\n}\n\n.coop-c-signpost__deal__label {\n flex: 1;\n display: block;\n position: relative;\n z-index: 2;\n font-weight: 600;\n font-size: 0.75rem;\n line-height: 1rem;\n\n @media (--mq-medium) {\n font-size: 1rem;\n line-height: 1.5rem;\n }\n}\n\n.coop-c-signpost__deal__squircle {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1;\n\n & svg {\n width: 100%;\n height: 100%;\n fill: #d3212a;\n }\n}\n\n.coop-c-signpost__media {\n margin: 0;\n position: relative;\n height: 5rem;\n flex-basis: 8.875rem;\n width: 8.875rem;\n\n @media (--mq-medium) {\n height: auto;\n flex-basis: auto;\n width: auto;\n }\n}\n\n.coop-c-signpost__image {\n display: block;\n width: auto;\n height: 100%;\n\n @media (--mq-medium) {\n width: 100%;\n height: auto;\n }\n\n & img {\n display: block;\n width: auto;\n height: 100%;\n border: 0;\n\n @media (--mq-medium) {\n width: 100%;\n height: auto;\n }\n }\n}\n\n.coop-c-signpost__content {\n display: flex;\n padding: 0.5rem 1.5rem 0.5rem 1.5rem;\n min-height: 5rem;\n align-items: center;\n flex: 1;\n\n @media (--mq-medium) {\n min-height: none;\n padding: 1rem 1.5rem;\n }\n\n @media (--mq-large) {\n padding: 1.25rem 2rem;\n }\n}\n\n.coop-c-signpost__title {\n flex: 1;\n margin: 0;\n padding: 0 0.5rem 0 0;\n font-weight: 600;\n font-size: 1.125rem;\n line-height: 1.625rem;\n\n @media (--mq-medium) {\n padding-right: 1rem;\n }\n\n @media (--mq-large) {\n font-size: 1.25rem;\n line-height: 1.75rem;\n }\n}\n\na:hover .coop-c-signpost__title,\na:focus .coop-c-signpost__title {\n text-decoration: underline;\n}\n\n.coop-c-signpost__icon {\n display: block;\n flex-basis: 0.75rem;\n max-width: 0.75rem;\n transition: transform 0.2s ease-in-out;\n width: 0.75rem;\n height: 1.375rem;\n overflow: hidden;\n}\n\n/* Option icon that prefixes signpost text */\n.coop-c-signpost__icon--prefix {\n max-width: 2rem;\n max-height: 2rem;\n flex-basis: 2rem;\n margin-right: 0.4rem;\n}\n\na:hover .coop-c-signpost__icon,\na:focus .coop-c-signpost__icon {\n transform: translateX(0.25rem);\n}\n\n/* Do not translate prefix icons on hover */\na:hover .coop-c-signpost__icon--prefix,\na:focus .coop-c-signpost__icon--prefix {\n transform: none;\n}\n\n.coop-c-signpost__icon__svg {\n display: block;\n width: 100%;\n height: 100%;\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--signpost/package.json b/packages/shared-component--signpost/package.json index 2e00de76..3f5664f8 100755 --- a/packages/shared-component--signpost/package.json +++ b/packages/shared-component--signpost/package.json @@ -20,11 +20,11 @@ "directory": "packages/shared-component--signpost" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2", + "@coopdigital/foundations": "^1.2.1", "@coopdigital/shared-component--icon": "^1.0.2" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4", + "@coopdigital/foundations": ">= 1.2.0 < 2", "@coopdigital/shared-component--icon": ">= 1.0.2 < 3" }, "bugs": { diff --git a/packages/shared-component--signpost/src/signpost.pcss b/packages/shared-component--signpost/src/signpost.pcss index e93d6717..43d7d637 100755 --- a/packages/shared-component--signpost/src/signpost.pcss +++ b/packages/shared-component--signpost/src/signpost.pcss @@ -1,6 +1,6 @@ /* Signpost */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-signpost { flex-grow: 1; diff --git a/packages/shared-component--signpostList/dist/signpost-list.css.map b/packages/shared-component--signpostList/dist/signpost-list.css.map index 157120d9..0a1356fa 100644 --- a/packages/shared-component--signpostList/dist/signpost-list.css.map +++ b/packages/shared-component--signpostList/dist/signpost-list.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/signpost-list.pcss"],"names":[],"mappings":"AAIA,sBACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,6BACE,eAAgB,CAChB,aAAc,CACd,wBAaF,CAXE,wBALF,6BAMI,iBAUJ,CATE,CAEA,wBATF,6BAUI,wBAMJ,CALE,CAEA,2BAbF,6BAcI,sBAEJ,CADE,CAGF,yDAEE,eACF,CAEA,4BACE,iBAKF,CAHE,wBAHF,4BAII,eAEJ,CADE,CAGF,4BACE,wBAAsC,CACtC,eAMF,CAJE,2BAJF,4BAKI,wBAAsC,CACtC,kBAEJ,CADE,CAGF,sDACE,mBASF,CAPE,0BAHF,sDAII,eAMJ,CALE,CAEA,2BAPF,sDAQI,kBAEJ,CADE","file":"signpost-list.css","sourcesContent":["/* Signpost list */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-signpost-list {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-c-signpost-list__inner {\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) var(--spacing-32);\n\n @media (--mq-medium) {\n padding: var(--spacing-32) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-48);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-signpost-list__title,\n.coop-c-signpost-list__body {\n max-width: 40rem; /* 640px */\n}\n\n.coop-c-signpost-list__grid {\n margin-top: var(--spacing-24);\n\n @media (--mq-medium) {\n margin-top: var(--spacing-32);\n }\n}\n\n.coop-c-signpost-list__item {\n height: calc(100% - var(--spacing-16));\n margin: 0 0 var(--spacing-16);\n\n @media (--mq-xlarge) {\n height: calc(100% - var(--spacing-32));\n margin-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-signpost-list__item .coop-c-signpost__content {\n min-height: 3.625rem; /* 58px */\n\n @media (--mq-small) {\n min-height: 5rem; /* 80px */\n }\n\n @media (--mq-xlarge) {\n min-height: 6.25rem; /* 100px */\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/signpost-list.pcss"],"names":[],"mappings":"AAIA,sBACE,iBAAkB,CAClB,eAAgB,CAChB,aACF,CAEA,6BACE,eAAgB,CAChB,aAAc,CACd,wBAaF,CAXE,wBALF,6BAMI,iBAUJ,CATE,CAEA,wBATF,6BAUI,wBAMJ,CALE,CAEA,2BAbF,6BAcI,sBAEJ,CADE,CAGF,yDAEE,eACF,CAEA,4BACE,iBAKF,CAHE,wBAHF,4BAII,eAEJ,CADE,CAGF,4BACE,wBAAsC,CACtC,eAMF,CAJE,2BAJF,4BAKI,wBAAsC,CACtC,kBAEJ,CADE,CAGF,sDACE,mBASF,CAPE,0BAHF,sDAII,eAMJ,CALE,CAEA,2BAPF,sDAQI,kBAEJ,CADE","file":"signpost-list.css","sourcesContent":["/* Signpost list */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-signpost-list {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n}\n\n.coop-c-signpost-list__inner {\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-24) var(--spacing-16) var(--spacing-32);\n\n @media (--mq-medium) {\n padding: var(--spacing-32) var(--spacing-16);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-32) var(--spacing-24) var(--spacing-48);\n }\n\n @media (--mq-xlarge) {\n padding: var(--spacing-48) var(--spacing-16) var(--spacing-64);\n }\n}\n\n.coop-c-signpost-list__title,\n.coop-c-signpost-list__body {\n max-width: 40rem; /* 640px */\n}\n\n.coop-c-signpost-list__grid {\n margin-top: var(--spacing-24);\n\n @media (--mq-medium) {\n margin-top: var(--spacing-32);\n }\n}\n\n.coop-c-signpost-list__item {\n height: calc(100% - var(--spacing-16));\n margin: 0 0 var(--spacing-16);\n\n @media (--mq-xlarge) {\n height: calc(100% - var(--spacing-32));\n margin-bottom: var(--spacing-32);\n }\n}\n\n.coop-c-signpost-list__item .coop-c-signpost__content {\n min-height: 3.625rem; /* 58px */\n\n @media (--mq-small) {\n min-height: 5rem; /* 80px */\n }\n\n @media (--mq-xlarge) {\n min-height: 6.25rem; /* 100px */\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--signpostList/package.json b/packages/shared-component--signpostList/package.json index 456e2385..647cfc6d 100755 --- a/packages/shared-component--signpostList/package.json +++ b/packages/shared-component--signpostList/package.json @@ -20,15 +20,11 @@ "directory": "packages/shared-component--signpostList" }, "devDependencies": { - "@coopdigital/foundations-grid": "^2.1.5", - "@coopdigital/foundations-typography": "^4.2.7", - "@coopdigital/foundations-vars": "^3.8.2", + "@coopdigital/foundations": "^1.2.1", "@coopdigital/shared-component--signpost": "^2.6.4" }, "peerDependencies": { - "@coopdigital/foundations-grid": ">= 2.0.7 < 3", - "@coopdigital/foundations-typography": ">= 4.0.0 < 5", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4", + "@coopdigital/foundations": ">= 1.2.0 < 2", "@coopdigital/shared-component--signpost": ">= 2.1.15 < 3" }, "bugs": { diff --git a/packages/shared-component--signpostList/src/signpost-list.pcss b/packages/shared-component--signpostList/src/signpost-list.pcss index 8ef8b763..a6be59bc 100755 --- a/packages/shared-component--signpostList/src/signpost-list.pcss +++ b/packages/shared-component--signpostList/src/signpost-list.pcss @@ -1,6 +1,6 @@ /* Signpost list */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-signpost-list { position: relative; diff --git a/packages/shared-component--statement/dist/statement.css.map b/packages/shared-component--statement/dist/statement.css.map index e8da8f4d..89251556 100644 --- a/packages/shared-component--statement/dist/statement.css.map +++ b/packages/shared-component--statement/dist/statement.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/statement.pcss"],"names":[],"mappings":"AAIA,wBACE,eAAgB,CAChB,UAAW,CACX,iBAAkB,CAClB,eASF,CAPE,wBANF,wBAOI,wBAMJ,CALE,CAEA,wBAVF,wBAWI,mBAEJ,CADE,CAGF,+BACE,aAAc,CACd,aAAc,CACd,cAAe,CAEf,oBAIF,CAHE,0BANF,+BAOI,oBAEJ,CADE,CAGF,+BACE,YAAa,CACb,sBASF,CAPE,wBAJF,+BAKI,cAMJ,CALE,CAEA,2BARF,+BASI,cAEJ,CADE,CAGF,mCACE,eAAgB,CAChB,UAUF,CARE,0BAJF,mCAKI,iBAAkB,CAClB,aAMJ,CALE,CAEA,2BATF,mCAUI,eAEJ,CADE,CAGF,qCACE,kBAAmB,CACnB,eAAgB,CAChB,gBAAiB,CACjB,aAUF,CATE,0BALF,qCAMI,aAQJ,CAPE,CACA,wBARF,qCASI,cAAe,CACf,oBAAqB,CACrB,mBAAoB,CACpB,aAEJ,CADE,CAGF,8BACE,gBAAiB,CACjB,eAAmB,CACnB,oBAAqB,CACrB,oBAAqB,CACrB,aAAc,CACd,eAAgB,CAChB,UAeF,CAdE,oCACE,oBAAqB,CACrB,aACF,CAEA,0BAbF,8BAcI,iBAQJ,CAPE,CAEA,wBAjBF,8BAkBI,gBAAiB,CACjB,oBAAqB,CACrB,iBAEJ,CADE","file":"statement.css","sourcesContent":["/* Statement */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-statement-block {\n overflow: hidden;\n width: 100%;\n padding: 4rem 2rem;\n margin: 0 0 var(--spacing-64) 0;\n\n @media (--mq-medium) {\n padding: 2.5rem 3rem 4rem;\n }\n\n @media (--mq-large) {\n padding: 6.5rem 6rem;\n }\n}\n\n.coop-c-statement-block__quote {\n display: block;\n width: 2.75rem;\n height: 2.25rem;\n\n margin: 0 0 2.1875rem 0;\n @media (--mq-small) {\n margin: 0 auto 3.5rem;\n }\n}\n\n.coop-c-statement-block__inner {\n display: flex;\n justify-content: center;\n\n @media (--mq-large) {\n margin: 0 -2rem;\n }\n\n @media (--mq-xlarge) {\n margin: 0 -4rem;\n }\n}\n\n.coop-c-statement-block__statement {\n text-align: left;\n color: var(--color-black);\n\n @media (--mq-small) {\n text-align: center;\n margin: 0 auto;\n }\n\n @media (--mq-xlarge) {\n padding: 0 10rem;\n }\n}\n\n.coop-c-statement-block__statement p {\n font-size: 1.375rem;\n font-weight: 700;\n line-height: 2rem;\n margin: 0 auto;\n @media (--mq-small) {\n max-width: 75%;\n }\n @media (--mq-large) {\n font-size: 2rem;\n line-height: 3.125rem;\n max-width: 46.875rem;\n margin: 0 auto;\n }\n}\n\n.coop-c-statement-block__link {\n font-size: 1.2rem;\n font-weight: normal;\n line-height: 2.125rem;\n margin-top: 2.1875rem;\n display: block;\n text-align: left;\n color: var(--color-black);\n &:hover {\n text-decoration: none;\n color: inherit;\n }\n\n @media (--mq-small) {\n text-align: center;\n }\n\n @media (--mq-large) {\n font-size: 1.5rem;\n line-height: 2.625rem;\n margin-top: 3.5rem;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/statement.pcss"],"names":[],"mappings":"AAIA,wBACE,eAAgB,CAChB,UAAW,CACX,iBAAkB,CAClB,eASF,CAPE,wBANF,wBAOI,wBAMJ,CALE,CAEA,wBAVF,wBAWI,mBAEJ,CADE,CAGF,+BACE,aAAc,CACd,aAAc,CACd,cAAe,CAEf,oBAIF,CAHE,0BANF,+BAOI,oBAEJ,CADE,CAGF,+BACE,YAAa,CACb,sBASF,CAPE,wBAJF,+BAKI,cAMJ,CALE,CAEA,2BARF,+BASI,cAEJ,CADE,CAGF,mCACE,eAAgB,CAChB,UAUF,CARE,0BAJF,mCAKI,iBAAkB,CAClB,aAMJ,CALE,CAEA,2BATF,mCAUI,eAEJ,CADE,CAGF,qCACE,kBAAmB,CACnB,eAAgB,CAChB,gBAAiB,CACjB,aAUF,CATE,0BALF,qCAMI,aAQJ,CAPE,CACA,wBARF,qCASI,cAAe,CACf,oBAAqB,CACrB,mBAAoB,CACpB,aAEJ,CADE,CAGF,8BACE,gBAAiB,CACjB,eAAmB,CACnB,oBAAqB,CACrB,oBAAqB,CACrB,aAAc,CACd,eAAgB,CAChB,UAeF,CAdE,oCACE,oBAAqB,CACrB,aACF,CAEA,0BAbF,8BAcI,iBAQJ,CAPE,CAEA,wBAjBF,8BAkBI,gBAAiB,CACjB,oBAAqB,CACrB,iBAEJ,CADE","file":"statement.css","sourcesContent":["/* Statement */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-statement-block {\n overflow: hidden;\n width: 100%;\n padding: 4rem 2rem;\n margin: 0 0 var(--spacing-64) 0;\n\n @media (--mq-medium) {\n padding: 2.5rem 3rem 4rem;\n }\n\n @media (--mq-large) {\n padding: 6.5rem 6rem;\n }\n}\n\n.coop-c-statement-block__quote {\n display: block;\n width: 2.75rem;\n height: 2.25rem;\n\n margin: 0 0 2.1875rem 0;\n @media (--mq-small) {\n margin: 0 auto 3.5rem;\n }\n}\n\n.coop-c-statement-block__inner {\n display: flex;\n justify-content: center;\n\n @media (--mq-large) {\n margin: 0 -2rem;\n }\n\n @media (--mq-xlarge) {\n margin: 0 -4rem;\n }\n}\n\n.coop-c-statement-block__statement {\n text-align: left;\n color: var(--color-black);\n\n @media (--mq-small) {\n text-align: center;\n margin: 0 auto;\n }\n\n @media (--mq-xlarge) {\n padding: 0 10rem;\n }\n}\n\n.coop-c-statement-block__statement p {\n font-size: 1.375rem;\n font-weight: 700;\n line-height: 2rem;\n margin: 0 auto;\n @media (--mq-small) {\n max-width: 75%;\n }\n @media (--mq-large) {\n font-size: 2rem;\n line-height: 3.125rem;\n max-width: 46.875rem;\n margin: 0 auto;\n }\n}\n\n.coop-c-statement-block__link {\n font-size: 1.2rem;\n font-weight: normal;\n line-height: 2.125rem;\n margin-top: 2.1875rem;\n display: block;\n text-align: left;\n color: var(--color-black);\n &:hover {\n text-decoration: none;\n color: inherit;\n }\n\n @media (--mq-small) {\n text-align: center;\n }\n\n @media (--mq-large) {\n font-size: 1.5rem;\n line-height: 2.625rem;\n margin-top: 3.5rem;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--statement/package.json b/packages/shared-component--statement/package.json index 70b53ef3..4e940d1d 100755 --- a/packages/shared-component--statement/package.json +++ b/packages/shared-component--statement/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--statement" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--statement/src/statement.pcss b/packages/shared-component--statement/src/statement.pcss index a38cebd2..cbc70ae5 100755 --- a/packages/shared-component--statement/src/statement.pcss +++ b/packages/shared-component--statement/src/statement.pcss @@ -1,6 +1,6 @@ /* Statement */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-statement-block { overflow: hidden; diff --git a/packages/shared-component--text/dist/text.css.map b/packages/shared-component--text/dist/text.css.map index 6bf79aa9..88efec5a 100644 --- a/packages/shared-component--text/dist/text.css.map +++ b/packages/shared-component--text/dist/text.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/text.pcss"],"names":[],"mappings":"AAIA,4BACE,aACF,CAGE,wBADF,yBAEI,cAEJ,CADE,CAGF,sBACE,eAKF,CAHE,wBAHF,sBAII,kBAEJ,CADE","file":"text.css","sourcesContent":["/* Text */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-text h2:first-child {\n padding-top: 0;\n}\n\n.coop-c-text--contrained {\n @media (--mq-medium) {\n width: 66.6666%;\n }\n}\n\n.section .coop-c-text {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin-bottom: 2rem;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/text.pcss"],"names":[],"mappings":"AAIA,4BACE,aACF,CAGE,wBADF,yBAEI,cAEJ,CADE,CAGF,sBACE,eAKF,CAHE,wBAHF,sBAII,kBAEJ,CADE","file":"text.css","sourcesContent":["/* Text */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-text h2:first-child {\n padding-top: 0;\n}\n\n.coop-c-text--contrained {\n @media (--mq-medium) {\n width: 66.6666%;\n }\n}\n\n.section .coop-c-text {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin-bottom: 2rem;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--text/package.json b/packages/shared-component--text/package.json index 5f831220..60a5459d 100644 --- a/packages/shared-component--text/package.json +++ b/packages/shared-component--text/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--text" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--text/src/text.pcss b/packages/shared-component--text/src/text.pcss index 2d4605d4..c8bfa5f4 100755 --- a/packages/shared-component--text/src/text.pcss +++ b/packages/shared-component--text/src/text.pcss @@ -1,6 +1,6 @@ /* Text */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-text h2:first-child { padding-top: 0; diff --git a/packages/shared-component--totaliser/dist/totaliser.css.map b/packages/shared-component--totaliser/dist/totaliser.css.map index 864761cc..f25d8a00 100644 --- a/packages/shared-component--totaliser/dist/totaliser.css.map +++ b/packages/shared-component--totaliser/dist/totaliser.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/totaliser.pcss"],"names":[],"mappings":"AAEA,kCACE,iBACF,CAEA,kBACE,iBAAkB,CAClB,eAAgB,CAChB,aAMF,CAHE,+BACE,eACF,CAIF,4FAEE,aASF,CAPE,0BAJF,4FAKI,iBAMJ,CALE,CAEA,wBARF,4FASI,gBAEJ,CADE,CAGF,yBACE,eAAgB,CAChB,aAAc,CACd,iBACF,CAEA,wBACE,iBAAkB,CAClB,oBAAyC,CACzC,iBACF,CAGA,8BACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,UAAW,CACX,UAAW,CACX,SAAU,CACV,aAAc,CAEd,kBAAmB,CACnB,iBAAkB,CAClB,UAAY,CACZ,UACF,CAEA,2BACE,iBAAkB,CAClB,SAAU,CACV,eAAgB,CAChB,mBAA4C,CAC5C,eAA8B,CAC9B,iBAgBF,CAdE,0BARF,2BASI,mBAaJ,CAZE,CAEA,wBAZF,2BAaI,gBAAiB,CACjB,kBAAmB,CACnB,mBAOJ,CANE,CAEA,2BAlBF,2BAmBI,kBAAmB,CACnB,mBAEJ,CADE,CAGF,sDAEE,aACF,CAEA,yBACE,aAAc,CACd,eAA6B,CAC7B,kBAA8B,CAE9B,oBAAqB,CACrB,oBAAqB,CACrB,gBAkCF,CAhCE,4BATF,yBAUI,cA+BJ,CA9BE,CAEA,0BAbF,yBAcI,SAAU,CAGV,WAAY,CACZ,gBAAiB,CACjB,qBAAyD,CACzD,gBAAiB,CACjB,WAoBJ,CAnBE,CAEA,wBAxBF,yBAyBI,SAgBJ,CAfE,CAEA,wBA5BF,yBA6BI,iBAAkB,CAClB,QAAsB,CACtB,WAAY,CACZ,UAAW,CACX,UAAW,CACX,gBAAiB,CACjB,gBAMJ,CALE,CAEA,2BAtCF,yBAuCI,WAEJ,CADE,CAGF,6BACE,kBAKF,CAHE,wBAHF,6BAII,kBAEJ,CADE,CAGF,wBACE,oBAAqB,CACrB,eAmBF,CAjBE,0BAJF,wBAKI,SAAU,CACV,UAeJ,CAdE,CAEA,wBATF,wBAUI,SAWJ,CAVE,CAEA,wBAbF,wBAcI,kBAAmB,CACnB,kBAMJ,CALE,CAEA,2BAlBF,wBAmBI,SAEJ,CADE,CAIF,mEAEE,iBAAkB,CAClB,QAAS,CAET,YAAa,CACb,YAAwB,CACxB,QAAS,CACT,oBAAqB,CACrB,oBAAqB,CACrB,UAKF,CAHE,0BAZF,mEAaI,aAEJ,CADE,CAGF,iCACE,UACF,CAEA,kCACE,MASF,CAPE,wBAHF,kCAII,UAMJ,CALE,CAEA,2BAPF,kCAQI,YAEJ,CADE,CAGF,iCACE,OASF,CAPE,wBAHF,iCAII,UAMJ,CALE,CAEA,wBAPF,iCAQI,YAEJ,CADE,CAIF,6BACE,YAAa,CACb,SAMF,CAJE,wBAJF,6BAKI,iBAAkB,CAClB,SAEJ,CADE,CAGF,mCACE,WAAY,CACZ,YAOF,CALE,2BAJF,mCAKI,QAAS,CACT,UAAW,CACX,aAEJ,CADE,CAGF,oCACE,WAAY,CACZ,WAWF,CATE,wBAJF,oCAKI,KAAM,CACN,YAAa,CACb,aAMJ,CALE,CAEA,2BAVF,oCAWI,OAEJ,CADE","file":"totaliser.css","sourcesContent":["@import \"@coopdigital/foundations-vars\";\n\n.coop-l-section + .coop-c-totaliser {\n margin-top: 1.5rem;\n}\n\n.coop-c-totaliser {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n\n /* required to overwrite foundation CSS */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Reduce padding on pink sections following totaliser */\n.coop-c-totaliser\n + .coop-l-section--padding-default.coop-u-brand-membership-pink-lightest-bg {\n padding-top: 0;\n\n @media (--mq-small) {\n padding-top: var(--spacing-8);\n }\n\n @media (--mq-large) {\n padding-top: var(--spacing-16);\n }\n}\n\n.coop-c-totaliser__inner {\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-32) var(--spacing-16);\n}\n\n.coop-c-totaliser__card {\n position: relative;\n margin: var(--spacing-8) var(--spacing-2);\n border-radius: 8px;\n}\n\n/* background blur effect */\n.coop-c-totaliser__card:after {\n position: absolute;\n z-index: 0;\n top: 28px;\n right: 18px;\n bottom: 2px;\n left: 18px;\n display: block;\n\n background: inherit;\n filter: blur(18px);\n opacity: 0.4;\n content: \"\";\n}\n\n.coop-c-totaliser__content {\n position: relative;\n z-index: 1;\n overflow: hidden;\n padding: var(--spacing-48) var(--spacing-24);\n background: var(--color-white);\n border-radius: 8px;\n\n @media (--mq-small) {\n padding: var(--spacing-48) calc(var(--spacing-32) + var(--spacing-8));\n }\n\n @media (--mq-large) {\n min-height: 203px;\n padding-left: 110px;\n padding-right: 110px;\n }\n\n @media (--mq-xlarge) {\n padding-left: 210px;\n padding-right: 210px;\n }\n}\n\n.coop-c-totaliser__total,\n.coop-c-totaliser__strapline {\n display: block;\n}\n\n.coop-c-totaliser__total {\n display: block;\n margin: var(--spacing-32) 0 0;\n padding-top: var(--spacing-24);\n\n border-top: 1px solid;\n border-color: inherit;\n font-size: 2.5rem; /* 40px */\n\n @media (--mq-xsmall) {\n font-size: var(--type-h1-mega-s);\n }\n\n @media (--mq-small) {\n width: 55%;\n margin: 0;\n padding: 0;\n float: right;\n margin: -10px 0 0;\n padding: 0 0 0 calc(var(--spacing-24) + var(--spacing-4));\n font-size: 2.5rem; /* 40px */\n border: none;\n }\n\n @media (--mq-medium) {\n width: 50%;\n }\n\n @media (--mq-large) {\n position: absolute;\n top: var(--spacing-48);\n right: 110px;\n float: none;\n width: auto;\n margin: -14px 0 0;\n font-size: var(--type-h1-mega-l);\n }\n\n @media (--mq-xlarge) {\n right: 220px;\n }\n}\n\n.coop-c-totaliser__strapline {\n font-size: 1.125rem; /* 18px */\n\n @media (--mq-medium) {\n font-size: 1.375rem; /* 22px */\n }\n}\n\n.coop-c-totaliser__body {\n max-width: 20.9375rem; /* 335px */\n font-weight: 600;\n\n @media (--mq-small) {\n width: 45%;\n float: left;\n }\n\n @media (--mq-medium) {\n width: 50%;\n }\n\n @media (--mq-large) {\n max-width: 28.75rem; /* 460px */\n font-size: var(--type-lp-s);\n }\n\n @media (--mq-xlarge) {\n width: 55%;\n }\n}\n\n/* Fake connectors used at 'small' size */\n.coop-c-totaliser__content:before,\n.coop-c-totaliser__content:after {\n position: absolute;\n top: 73px;\n\n display: none;\n width: var(--spacing-24);\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n\n @media (--mq-small) {\n display: block;\n }\n}\n\n.coop-c-totaliser__content:after {\n width: var(--spacing-32);\n}\n\n.coop-c-totaliser__content:before {\n left: 0;\n\n @media (--mq-large) {\n width: 90px;\n }\n\n @media (--mq-xlarge) {\n display: none;\n }\n}\n\n.coop-c-totaliser__content:after {\n right: 0;\n\n @media (--mq-medium) {\n width: 64px;\n }\n\n @media (--mq-large) {\n display: none;\n }\n}\n\n/* Real SVG connectors used at 'large' size */\n.coop-c-totaliser__connector {\n display: none;\n fill: none;\n\n @media (--mq-large) {\n position: absolute;\n z-index: 2;\n }\n}\n\n.coop-c-totaliser__connector--left {\n width: 205px;\n height: 130px;\n\n @media (--mq-xlarge) {\n bottom: 0;\n left: -14px;\n display: block;\n }\n}\n\n.coop-c-totaliser__connector--right {\n width: 203px;\n height: 81px;\n\n @media (--mq-large) {\n top: 0;\n right: -110px;\n display: block;\n }\n\n @media (--mq-xlarge) {\n right: 0;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/totaliser.pcss"],"names":[],"mappings":"AAEA,kCACE,iBACF,CAEA,kBACE,iBAAkB,CAClB,eAAgB,CAChB,aAMF,CAHE,+BACE,eACF,CAIF,4FAEE,aASF,CAPE,0BAJF,4FAKI,iBAMJ,CALE,CAEA,wBARF,4FASI,gBAEJ,CADE,CAGF,yBACE,eAAgB,CAChB,aAAc,CACd,iBACF,CAEA,wBACE,iBAAkB,CAClB,oBAAyC,CACzC,iBACF,CAGA,8BACE,iBAAkB,CAClB,SAAU,CACV,QAAS,CACT,UAAW,CACX,UAAW,CACX,SAAU,CACV,aAAc,CAEd,kBAAmB,CACnB,iBAAkB,CAClB,UAAY,CACZ,UACF,CAEA,2BACE,iBAAkB,CAClB,SAAU,CACV,eAAgB,CAChB,mBAA4C,CAC5C,eAA8B,CAC9B,iBAgBF,CAdE,0BARF,2BASI,mBAaJ,CAZE,CAEA,wBAZF,2BAaI,gBAAiB,CACjB,kBAAmB,CACnB,mBAOJ,CANE,CAEA,2BAlBF,2BAmBI,kBAAmB,CACnB,mBAEJ,CADE,CAGF,sDAEE,aACF,CAEA,yBACE,aAAc,CACd,eAA6B,CAC7B,kBAA8B,CAE9B,oBAAqB,CACrB,oBAAqB,CACrB,gBAkCF,CAhCE,4BATF,yBAUI,cA+BJ,CA9BE,CAEA,0BAbF,yBAcI,SAAU,CAGV,WAAY,CACZ,gBAAiB,CACjB,qBAAyD,CACzD,gBAAiB,CACjB,WAoBJ,CAnBE,CAEA,wBAxBF,yBAyBI,SAgBJ,CAfE,CAEA,wBA5BF,yBA6BI,iBAAkB,CAClB,QAAsB,CACtB,WAAY,CACZ,UAAW,CACX,UAAW,CACX,gBAAiB,CACjB,gBAMJ,CALE,CAEA,2BAtCF,yBAuCI,WAEJ,CADE,CAGF,6BACE,kBAKF,CAHE,wBAHF,6BAII,kBAEJ,CADE,CAGF,wBACE,oBAAqB,CACrB,eAmBF,CAjBE,0BAJF,wBAKI,SAAU,CACV,UAeJ,CAdE,CAEA,wBATF,wBAUI,SAWJ,CAVE,CAEA,wBAbF,wBAcI,kBAAmB,CACnB,kBAMJ,CALE,CAEA,2BAlBF,wBAmBI,SAEJ,CADE,CAIF,mEAEE,iBAAkB,CAClB,QAAS,CAET,YAAa,CACb,YAAwB,CACxB,QAAS,CACT,oBAAqB,CACrB,oBAAqB,CACrB,UAKF,CAHE,0BAZF,mEAaI,aAEJ,CADE,CAGF,iCACE,UACF,CAEA,kCACE,MASF,CAPE,wBAHF,kCAII,UAMJ,CALE,CAEA,2BAPF,kCAQI,YAEJ,CADE,CAGF,iCACE,OASF,CAPE,wBAHF,iCAII,UAMJ,CALE,CAEA,wBAPF,iCAQI,YAEJ,CADE,CAIF,6BACE,YAAa,CACb,SAMF,CAJE,wBAJF,6BAKI,iBAAkB,CAClB,SAEJ,CADE,CAGF,mCACE,WAAY,CACZ,YAOF,CALE,2BAJF,mCAKI,QAAS,CACT,UAAW,CACX,aAEJ,CADE,CAGF,oCACE,WAAY,CACZ,WAWF,CATE,wBAJF,oCAKI,KAAM,CACN,YAAa,CACb,aAMJ,CALE,CAEA,2BAVF,oCAWI,OAEJ,CADE","file":"totaliser.css","sourcesContent":["@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-l-section + .coop-c-totaliser {\n margin-top: 1.5rem;\n}\n\n.coop-c-totaliser {\n position: relative;\n overflow: hidden;\n margin: 0 auto;\n\n /* required to overwrite foundation CSS */\n & p:last-child {\n margin-bottom: 0;\n }\n}\n\n/* Reduce padding on pink sections following totaliser */\n.coop-c-totaliser\n + .coop-l-section--padding-default.coop-u-brand-membership-pink-lightest-bg {\n padding-top: 0;\n\n @media (--mq-small) {\n padding-top: var(--spacing-8);\n }\n\n @media (--mq-large) {\n padding-top: var(--spacing-16);\n }\n}\n\n.coop-c-totaliser__inner {\n max-width: 81rem;\n margin: 0 auto;\n padding: var(--spacing-32) var(--spacing-16);\n}\n\n.coop-c-totaliser__card {\n position: relative;\n margin: var(--spacing-8) var(--spacing-2);\n border-radius: 8px;\n}\n\n/* background blur effect */\n.coop-c-totaliser__card:after {\n position: absolute;\n z-index: 0;\n top: 28px;\n right: 18px;\n bottom: 2px;\n left: 18px;\n display: block;\n\n background: inherit;\n filter: blur(18px);\n opacity: 0.4;\n content: \"\";\n}\n\n.coop-c-totaliser__content {\n position: relative;\n z-index: 1;\n overflow: hidden;\n padding: var(--spacing-48) var(--spacing-24);\n background: var(--color-white);\n border-radius: 8px;\n\n @media (--mq-small) {\n padding: var(--spacing-48) calc(var(--spacing-32) + var(--spacing-8));\n }\n\n @media (--mq-large) {\n min-height: 203px;\n padding-left: 110px;\n padding-right: 110px;\n }\n\n @media (--mq-xlarge) {\n padding-left: 210px;\n padding-right: 210px;\n }\n}\n\n.coop-c-totaliser__total,\n.coop-c-totaliser__strapline {\n display: block;\n}\n\n.coop-c-totaliser__total {\n display: block;\n margin: var(--spacing-32) 0 0;\n padding-top: var(--spacing-24);\n\n border-top: 1px solid;\n border-color: inherit;\n font-size: 2.5rem; /* 40px */\n\n @media (--mq-xsmall) {\n font-size: var(--type-h1-mega-s);\n }\n\n @media (--mq-small) {\n width: 55%;\n margin: 0;\n padding: 0;\n float: right;\n margin: -10px 0 0;\n padding: 0 0 0 calc(var(--spacing-24) + var(--spacing-4));\n font-size: 2.5rem; /* 40px */\n border: none;\n }\n\n @media (--mq-medium) {\n width: 50%;\n }\n\n @media (--mq-large) {\n position: absolute;\n top: var(--spacing-48);\n right: 110px;\n float: none;\n width: auto;\n margin: -14px 0 0;\n font-size: var(--type-h1-mega-l);\n }\n\n @media (--mq-xlarge) {\n right: 220px;\n }\n}\n\n.coop-c-totaliser__strapline {\n font-size: 1.125rem; /* 18px */\n\n @media (--mq-medium) {\n font-size: 1.375rem; /* 22px */\n }\n}\n\n.coop-c-totaliser__body {\n max-width: 20.9375rem; /* 335px */\n font-weight: 600;\n\n @media (--mq-small) {\n width: 45%;\n float: left;\n }\n\n @media (--mq-medium) {\n width: 50%;\n }\n\n @media (--mq-large) {\n max-width: 28.75rem; /* 460px */\n font-size: var(--type-lp-s);\n }\n\n @media (--mq-xlarge) {\n width: 55%;\n }\n}\n\n/* Fake connectors used at 'small' size */\n.coop-c-totaliser__content:before,\n.coop-c-totaliser__content:after {\n position: absolute;\n top: 73px;\n\n display: none;\n width: var(--spacing-24);\n height: 0;\n border-top: 8px solid;\n border-color: inherit;\n content: \"\";\n\n @media (--mq-small) {\n display: block;\n }\n}\n\n.coop-c-totaliser__content:after {\n width: var(--spacing-32);\n}\n\n.coop-c-totaliser__content:before {\n left: 0;\n\n @media (--mq-large) {\n width: 90px;\n }\n\n @media (--mq-xlarge) {\n display: none;\n }\n}\n\n.coop-c-totaliser__content:after {\n right: 0;\n\n @media (--mq-medium) {\n width: 64px;\n }\n\n @media (--mq-large) {\n display: none;\n }\n}\n\n/* Real SVG connectors used at 'large' size */\n.coop-c-totaliser__connector {\n display: none;\n fill: none;\n\n @media (--mq-large) {\n position: absolute;\n z-index: 2;\n }\n}\n\n.coop-c-totaliser__connector--left {\n width: 205px;\n height: 130px;\n\n @media (--mq-xlarge) {\n bottom: 0;\n left: -14px;\n display: block;\n }\n}\n\n.coop-c-totaliser__connector--right {\n width: 203px;\n height: 81px;\n\n @media (--mq-large) {\n top: 0;\n right: -110px;\n display: block;\n }\n\n @media (--mq-xlarge) {\n right: 0;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--totaliser/package.json b/packages/shared-component--totaliser/package.json index ce26c1bc..1cfd48b9 100644 --- a/packages/shared-component--totaliser/package.json +++ b/packages/shared-component--totaliser/package.json @@ -20,14 +20,12 @@ "directory": "packages/shared-component--totaliser" }, "devDependencies": { - "@coopdigital/foundations-buttons": "^2.7.0", - "@coopdigital/foundations-layout": "^3.3.6", - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations-buttons": "^2.6.0", + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { "@coopdigital/foundations-buttons": ">= 2.1.14 < 3", - "@coopdigital/foundations-layout": ">= 3.1.13 < 4", - "@coopdigital/foundations-vars": ">= 3.3.0 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--totaliser/src/totaliser.pcss b/packages/shared-component--totaliser/src/totaliser.pcss index a9cc1789..f3eea130 100644 --- a/packages/shared-component--totaliser/src/totaliser.pcss +++ b/packages/shared-component--totaliser/src/totaliser.pcss @@ -1,4 +1,4 @@ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-l-section + .coop-c-totaliser { margin-top: 1.5rem; diff --git a/packages/shared-component--video/dist/video.css.map b/packages/shared-component--video/dist/video.css.map index 5718ee58..b58639a9 100644 --- a/packages/shared-component--video/dist/video.css.map +++ b/packages/shared-component--video/dist/video.css.map @@ -1 +1 @@ -{"version":3,"sources":["../src/video.pcss"],"names":[],"mappings":"AAIA,cACE,qBAAsB,CACtB,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,eAOF,CALE,qBACE,iBAAkB,CAClB,UAAW,CACX,WACF,CAGF,uBACE,eAKF,CAHE,wBAHF,uBAII,kBAEJ,CADE","file":"video.css","sourcesContent":["/* Video */\n\n@import \"@coopdigital/foundations-vars\";\n\n.coop-c-video {\n padding-bottom: 56.25%; /* 16:9 */\n position: relative;\n width: 100%;\n height: 0;\n margin: 0 0 var(--spacing-medium--1-4) 0;\n\n & iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n}\n\n.section .coop-c-video {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin-bottom: 2rem;\n }\n}\n"]} \ No newline at end of file +{"version":3,"sources":["../src/video.pcss"],"names":[],"mappings":"AAIA,cACE,qBAAsB,CACtB,iBAAkB,CAClB,UAAW,CACX,QAAS,CACT,eAOF,CALE,qBACE,iBAAkB,CAClB,UAAW,CACX,WACF,CAGF,uBACE,eAKF,CAHE,wBAHF,uBAII,kBAEJ,CADE","file":"video.css","sourcesContent":["/* Video */\n\n@import \"@coopdigital/foundations/dist/vars/vars.css\";\n\n.coop-c-video {\n padding-bottom: 56.25%; /* 16:9 */\n position: relative;\n width: 100%;\n height: 0;\n margin: 0 0 var(--spacing-medium--1-4) 0;\n\n & iframe {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n}\n\n.section .coop-c-video {\n margin: 0 0 1rem 0;\n\n @media (--mq-medium) {\n margin-bottom: 2rem;\n }\n}\n"]} \ No newline at end of file diff --git a/packages/shared-component--video/package.json b/packages/shared-component--video/package.json index 1b1d3036..9c0126b3 100755 --- a/packages/shared-component--video/package.json +++ b/packages/shared-component--video/package.json @@ -20,10 +20,10 @@ "directory": "packages/shared-component--video" }, "devDependencies": { - "@coopdigital/foundations-vars": "^3.8.2" + "@coopdigital/foundations": "^1.2.1" }, "peerDependencies": { - "@coopdigital/foundations-vars": ">= 3.1.2 < 4" + "@coopdigital/foundations": ">= 1.2.0 < 2" }, "bugs": { "url": "https://github.com/coopdigital/coop-frontend/issues" diff --git a/packages/shared-component--video/src/video.pcss b/packages/shared-component--video/src/video.pcss index a0f7f60e..e60fa99e 100755 --- a/packages/shared-component--video/src/video.pcss +++ b/packages/shared-component--video/src/video.pcss @@ -1,6 +1,6 @@ /* Video */ -@import "@coopdigital/foundations-vars"; +@import "@coopdigital/foundations/dist/vars/vars.css"; .coop-c-video { padding-bottom: 56.25%; /* 16:9 */