-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feat(web): Introduce
CorporateFooter component
- Loading branch information
1 parent
2c04230
commit d371acb
Showing
7 changed files
with
371 additions
and
0 deletions.
There are no files selected for viewing
84 changes: 84 additions & 0 deletions
84
packages/web/src/scss/components/CorporateFooter/_CorporateFooter.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| @use '../../tools/reset'; | ||
| @use '../../tools/typography'; | ||
| @use 'theme'; | ||
|
|
||
| .CorporateFooter { | ||
| @include typography.generate(theme.$typography); | ||
|
|
||
| padding-block: theme.$padding-y; | ||
| text-align: center; | ||
| border-top: theme.$border-top-width solid theme.$border-top-color; | ||
| background-color: var(--spirit-color-background-primary); | ||
| } | ||
|
|
||
| .CorporateFooter__headingDecoration, | ||
| .CorporateFooter__claimDecoration { | ||
| position: relative; | ||
|
|
||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| } | ||
| } | ||
|
|
||
| .CorporateFooter__list { | ||
| @include reset.list(); | ||
|
|
||
| // stylelint-disable-next-line selector-nested-pattern, no-duplicate-selectors -- Deal with the mixed declaration order. | ||
| & { | ||
| margin-bottom: -1 * theme.$list-gap; | ||
| word-break: break-word; | ||
| } | ||
| } | ||
|
|
||
| .CorporateFooter__list > li { | ||
| margin-bottom: theme.$list-gap; | ||
| } | ||
|
|
||
| .CorporateFooter__list--columns { | ||
| column-count: 2; | ||
| column-gap: var(--grid-spacing-x); | ||
| break-inside: avoid-column; | ||
| } | ||
|
|
||
| .CorporateFooter__headingDecoration::after { | ||
| top: 100%; | ||
| inset-inline: 0; | ||
| height: 0.5rem; | ||
| background: linear-gradient( | ||
| 90deg, | ||
| #ffcb3b 0%, | ||
| #feba3c 3%, | ||
| #fda03d 9%, | ||
| #fd8d3f 15%, | ||
| #fd813f 21%, | ||
| #fd7e40 28%, | ||
| #8f66ff 67%, | ||
| #4dd7be 89% | ||
| ); | ||
| mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='164' height='6' fill='none'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M130.576 1.64023c-16.351-.27957-32.7229-.30306-52.9463-.19804-21.1182.10966-34.8712.39686-54.9322 1.07212-3.5893.12082-7.0247.30845-10.2339.48372-.4953.02706-.9852.05382-1.4695.07999-3.60119.19463-6.91401.35843-9.72769.35843C.566991 3.43645 0 3.12649 0 2.74414c0-.38235.566991-.69231 1.26641-.69231 2.66927 0 5.86028-.15616 9.47849-.35171.4803-.02596.9677-.05258 1.4618-.07957 3.2067-.17518 6.6938-.36567 10.3351-.48824C42.6443.455661 56.4412.167538 77.6056.057636 110.695-.114191 133.53.0574615 162.818 1.13258c.682.02501 1.204.34085 1.181.71396-.023.37311-.583.6691-1.265.6691-5.65 0-10.365.08964-14.636.1843-.669.01484-1.329.02981-1.979.0446-2.131.04841-4.17.09474-6.176.12715.226.12502.365.29678.365.48634 0 .38235-.567.69231-1.266.69231h-7.098c-2.068 0-4.756.05199-7.477.10472l-.021.0004c-2.699.05229-5.428.10519-7.544.10519H88.5299c-11.1738 0-21.4411.36667-29.6348.65929-1.518.05422-2.9649.10589-4.3332.15222-1.7499.05925-3.4115.11438-5.0327.16818-6.4737.21482-12.3064.40837-20.5662.7576-.0639.0027-.1281.00275-.192.00013-.0275-.00112-.1123-.00473-.2163-.01873-.049-.0066-.159-.02277-.2863-.05918-.0973-.02782-.4133-.12519-.5828-.34742-.2123-.27824-.0405-.52653.1231-.6575.1374-.11001.2979-.16953.3532-.18933.1243-.04453.2362-.06684.2635-.0723l.0017-.00034c.1107-.02211.2233-.03424.2501-.03713l.0038-.00041c.0977-.01074.235-.02328.3888-.0365.3176-.0273.7893-.06462 1.3618-.10823.4677-.03561 1.0073-.07576 1.5927-.11856-.4087-.03236-.835-.06509-1.2809-.09802-.6604-.04879-1.1387-.36903-1.0939-.73253.0447-.3635.5971-.64585 1.2635-.64585 5.4992 0 9.8423-.05242 13.8029-.10496.3309-.00439.6593-.00878.9855-.01314 3.5757-.04784 6.8934-.09222 10.5281-.09222 1.0801 0 2.1427.00093 3.1935.00185 5.2394.00459 10.1846.00892 15.5269-.10365 5.5806-.11759 14.1601-.09292 19.7295-.00019 5.2046.08665 9.5036-.05341 13.8356-.23816.821-.03505 1.646-.07179 2.479-.1089 3.549-.15816 7.248-.32298 11.545-.3928 2.443-.03971 4.987-.10517 7.289-.16441.252-.0065.502-.01292.748-.01923ZM29.1633 5.97519s.0044-.00061.0148-.00177c-.0093.00121-.0148.00177-.0148.00177Z' clip-rule='evenodd'/%3E%3C/svg%3E") | ||
| center/100% 0.5rem no-repeat; | ||
| } | ||
|
|
||
| .CorporateFooter__claimDecoration { | ||
| font-style: normal; | ||
|
|
||
| &::after { | ||
| top: 95%; | ||
| inset-inline: -0.25em; | ||
| height: 0.375rem; | ||
| background: linear-gradient( | ||
| 90deg, | ||
| #ffcb3b 0%, | ||
| #feba3c 2.88%, | ||
| #fda03d 8.63%, | ||
| #fd8d3f 14.38%, | ||
| #fd813f 20.14%, | ||
| #fd7e40 26.85%, | ||
| #8f66ff 64.24%, | ||
| #4dd7be 85.34% | ||
| ); | ||
| mask: url("data:image/svg+xml,%3Csvg fill='none' height='5' viewBox='0 0 73 5' width='73' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='m5.05204 3.31621c-.33143.15043-1.70132.71795-2.19404.90131-.49051.18337-.97219.34736-1.21081.3635-.24084.01679-.43307-.01679-.73135-.04326-.296074-.02647-.594357-.08716-.775536-.13687-.1833894-.05036-.1944369-.16335.011047-.25374.205484-.09039.53691-.16335.742394-.19369.205485-.0297.433065-.10653.684945-.20015.25189-.09362 2.76409-1.20154 3.79372-1.6225 1.02742-.42031 2.6956-1.05175 3.49544-1.281598.79763-.229849 1.89575-.553961 2.35095-.586889.4573-.033573.9942.020015 1.2903.106531s.4574.190465.411.380929-.422.510707-.7888.781227c-.3646.27052-1.0407.75734-1.3589 1.05498-.3203.29699-.6385.67082-.6385.73474s.0331.09039.2519.05359c.2165-.0368 2.6845-.69084 3.449-.90455s2.7995-.85483 3.7584-1.14149c.9589-.28731 2.9121-.801244 3.449-.884531.5369-.083288 1.0959-.129774 1.5202-.023243.4242.10653.833.27698.5258.581074-.3093.3041-.9037.63467-1.6107 1.20542-.7092.57074-1.2683 1.06466-1.4163 1.27837-.148.2137-.1834.30409-.0221.31701.1613.01291.8109-.11041 1.2904-.21371.4794-.1033 3.5749-.83417 4.8432-1.20154s2.6846-.76444 3.7694-.96782c1.0849-.20337 1.9753-.33379 2.4791-.33379s.9589.09684 1.1997.18336c.2387.08716.5591.28344.3889.52103-.1723.23695-.5148.65081-.7645.98783-.2519.33703-.559.7044-.3888.73087.1723.02647.7534-.10007 1.4052-.24341.6518-.14333 2.194-.48746 3.6214-.88453 1.4273-.39707 2.7994-.76766 3.5065-.87807.707-.10976 1.3478-.12332 1.6217-.04003.274.08329.7999.28021.7778.47713s-.2519.72118-.2983.9549c-.0464.23373.0354.35059.3425.3706.3093.02002 1.2903-.16399 1.9532-.29376.6628-.13042 2.3863-.49069 3.2789-.7341.8904-.24341 2.1012-.55073 2.6735-.65081.57-.10007 1.2439-.17044 1.6461-.09684.3999.0736.9943.24341.833.48036-.1591.23695-.7093.74119-.9015.92133-.1945.18013-.4463.41062-.2519.4442.1944.03357 1.6571-.17368 2.2493-.25374.4375-.05875 3.3562-.56687 4.7195-.87097.9722-.21694 2.4216-.49069 3.1993-.48746.7756.00323 1.4163.06005 3.1199.4074 1.7013.34736 6.0955 1.63402 6.4159 1.7341.3203.10007.2739.33702.0685.40417-.2055.0665-.7314.10007-1.0275.0665-.2982-.03358-5.046-1.32024-6.0491-1.52103-1.0053-.20015-1.8626-.3706-2.2957-.3706-.433 0-.9368.04325-1.8383.23372-.9036.19046-2.0902.50425-3.4954.72118-1.4052.21694-3.2436.53072-3.9307.60109-.685.07038-1.7256.09362-2.2051.0297-.4795-.06327-1.0628-.30022-1.2108-.47713-.148-.1769.011-.4739.2165-.6508.2055-.17691.3646-.29054.274-.31701-.0906-.02712-1.4273.34671-2.1808.52426-.7534.1769-2.0791.45388-2.9806.614s-1.7477.29054-2.457.28021c-.7092-.01033-1.1644-.06327-1.6682-.29699-.5037-.23373-.6407-.33057-.6518-.64113-.011-.31055.0575-.62046.0575-.65403s-.1834-.04003-.3668.00646c-.1834.04648-2.8436.80447-3.7584 1.01172-.9125.2066-3.301.76121-3.9528.84127s-1.0517.10653-1.4958.03034c-.4463-.07683-1.1755-.28085-1.2329-.50037-.0575-.22081.2519-.60432.4684-.97169s.5723-.83804.6165-.88776c.0464-.04971-.1613-.06004-.5038.00646s-2.32.52426-3.153.75475c-.833.2305-3.1971.89099-4.1914 1.13504-.9943.24341-2.5697.58431-2.9939.64758-.422.06327-.8551.09039-1.3478.04003-.4905-.04971-1.1997-.19046-1.4737-.35381s-.3204-.39061-.0354-.75411c.2851-.36414.7314-.71408 1.1644-1.09501.4331-.38028.8905-.69406.959-.75411.0685-.06004.0795-.10007-.2298-.05359-.3094.04713-2.3421.6676-3.2325.95491-.8905.28731-3.5419 1.09823-4.3307 1.29838s-1.6681.40353-2.2271.42354c-.55905.02002-1.99081-.22145-2.08361-.48423-.09059-.26277.24304-.81028.77774-1.24609.53249-.43645 1.18872-.9478 1.24837-1.01043.0619-.06262-.06186-.08457-.25851-.03099-.19885.05359-2.34649.87678-3.06237 1.18863s-1.64829.71214-1.64829.71214z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E") | ||
| center/100% 0.375rem no-repeat; | ||
| } | ||
| } |
13 changes: 13 additions & 0 deletions
13
packages/web/src/scss/components/CorporateFooter/_theme.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| // TODO: | ||
| // 1. Add correct web fonts for headline and claim. | ||
| // 2. Set the rest of headline and claim typography. | ||
| // 3. Make sure the inheritance from the rest of the page works as needed. | ||
| // 4. Make sure we are OK with slightly bigger links (14px instead of 13px). | ||
|
|
||
| @use '@global' as global-tokens; | ||
|
|
||
| $typography: global-tokens.$body-small-regular; | ||
| $padding-y: global-tokens.$space-1300; | ||
| $border-top-width: global-tokens.$border-width-100; | ||
| $border-top-color: var(--spirit-color-border-basic); | ||
| $list-gap: global-tokens.$space-600; |
Oops, something went wrong.