@coopdigital/shared-component--featurecard
Version:
Co-op Shared Component: Feature Card
1 lines • 7.89 kB
Source Map (JSON)
{"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,gFACE,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,0BAMJ,CALE,CAEA,wBAPF,6DAQI,wBAEJ,CADE,CAIA,0BADF,2DAEI,cAAe,CACf,eAUJ,CATE,CAEA,wBANF,2DAOI,kBAMJ,CALE,CAEA,wBAVF,2DAWI,kBAEJ,CADE,CAIA,0BADF,iGAEI,WAMJ,CALE,CAEA,wBALF,iGAMI,QAEJ,CADE,CAIA,wBADF,sDAEI,gBAEJ,CADE,CAIA,0BADF,wDAEI,wBAMJ,CALE,CAEA,wBALF,wDAMI,wBAEJ,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 .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 var(--spacing-base--1-4);\n }\n\n @media (--mq-large) {\n padding: var(--spacing-base--1-2) var(--spacing-base) 0 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 .coop-c-featureCard__media .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 var(--spacing-base);\n }\n}\n"]}