@coopdigital/shared-component--membership
Version:
Co-op Shared Component: Membership
1 lines • 5.68 kB
Source Map (JSON)
{"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"]}