4-row-components edit

wm-statnum-component  edit

layout and classes for large number with smaller prepends or appends

$ 32 lbs. %
Copy
Edit
<!-- components/4-row-components/wm-statnum-component.php --> <div class="wm-statnum"> <sup class="wm-statnum--prepend-bottom"><i class="fa-regular fa-arrow-up"></i></sup> <sup class="wm-statnum--prepend-top">$</sup> <span class="wm-statnum__number">32</span> <sub class="wm-statnum--append-bottom">lbs.</sub> <sub class="wm-statnum--append-top">%</sub> </div>
Cancel
Copy
Copy
Edit
/* scss/4-row-components/_wm-statnum-component.scss */ // Large number component including // * prepends - top and bottom // * appends - top and bottom // * character length determines font size // AVAILABLE OPTIONS // * none currently .wm-statnum { font-family: font(heading-serif-italic); font-style: italic; font-feature-settings: "lnum"; line-height: 1; &__number { padding: 0; // this equates to 5px given the // number's natural spacing padding-right: 4px; font-weight: font(serif-weight, normal); // 1-4 characters font-size: toRem(90); // 5 characters .--chars5 & { font-size: toRem(80); } // 6 characters .--chars6 & { font-size: toRem(75); } // 7 characters .--chars7 & { font-size: toRem(70); } } &--prepend-top, &--append-bottom, &--append-top { font-family: font(alt-heading-serif); font-weight: font(serif-weight, medium); font-size: toRem(30); bottom: 0; } &--prepend-top, &--append-top { top: -1.3em; // modify supers based on size of font // for the number of characters // 5 characters .--chars5 & { top: -1.1em; } // 6 characters .--chars6 & { top: -1em; } // 7 characters .--chars7 & { top: -0.87em; } } &--prepend-top { // this should align the prepend with the starting edge of the number right: -4px; } &--prepend-bottom { font-size: 26px; top: -0.03em; } }
Cancel