/** -------------------------------------------------- * * BASE / FUNCTIONS * clamped * * Clamps an output value between a min & max value * and interpolates the "preferred" value based on the * slope between the breakpoints at which the min/max * value should be used as the cut-off. * * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * rem * * Converts a pixel value to rems. * * -------------------------------------------------- */ /** -------------------------------------------------- * #rem * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * rnd * * Built-in Sass math:round (and ceil/floor) functions * result in whole numbers only. * * -------------------------------------------------- */ /** -------------------------------------------------- * #rnd * -------------------------------------------------- */ /** -------------------------------------------------- * #clamped * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * iff * * Syntactic sugar around Sass' built-in `if` function that * does not require you to pass a value for `$if-false`. * * -------------------------------------------------- */ /** -------------------------------------------------- * #iff * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * implode * * Variant of PHP array implode to convert list items into a string * * -------------------------------------------------- */ /** -------------------------------------------------- * #implode * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * internal media query helpers to help convert & interpret MQ's * * TABLE OF CONTENTS * mq * interpret-features * breakpoint-lookup * media-concatenate * convert units * * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * strip-unit * * Strips the unit of input and returns just the numerical value. * * -------------------------------------------------- */ /** -------------------------------------------------- * #strip-unit * -------------------------------------------------- */ /** -------------------------------------------------- * #mq [internal function] * -------------------------------------------------- */ /** -------------------------------------------------- * #interpret-features [internal function] * -------------------------------------------------- */ /** -------------------------------------------------- * #breakpoint-lookup * -------------------------------------------------- */ /** -------------------------------------------------- * #media-concatenate * -------------------------------------------------- */ /** -------------------------------------------------- * #convert units * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * space * * Returns the min or max value for a given key on * the size scale. Defaults to min (mobile first). * * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / FUNCTIONS * token * * Checks the design token maps for a given entry * and returns the result. * * -------------------------------------------------- */ /** -------------------------------------------------- * * COLOR DESIGN TOKENS * These should never be used directly for styling. * Use abstractions in /variables/colors or components instead. * * TABLE OF CONTENTS * color tokens * * -------------------------------------------------- */ /** -------------------------------------------------- * * SIZE SCALE DESIGN TOKENS * These represent the mobile & desktop device size scale * from the Figma file as a min/max value per scale entry. * We cannot simply override the properties at a certain * breakpoint as this clashes with the component (container) * implementation. * By adding these tokens, we can at least maintain the naming * and values from the Figma file for easier reference without * having to resort to manually entering unrelated spacing units * all throughout the project. * * TABLE OF CONTENTS * size scale tokens * * -------------------------------------------------- */ /** -------------------------------------------------- * * TYPOGRAPHY DESIGN TOKENS * These should never be used directly for styling. * Use abstractions in /variables/font-styles instead. * * TABLE OF CONTENTS * typographic tokens * * -------------------------------------------------- */ /** -------------------------------------------------- * #token * -------------------------------------------------- */ /** -------------------------------------------------- * #space * -------------------------------------------------- */ /** -------------------------------------------------- * * VARIABLES * breakpoints * * INFO * breakpoint configuration: * - $mq-breakpoints is a list of breakpoints which * can be entered in px (recommended), em or rem. * Output will always be in em units. * Order of the breakpoints in the list does not matter. * - $mq-presets is an (optional) list of frequent combos * * SDC * Try to minimise the use of breakpoints inside SDC component * styles. Container Queries are preferred so the components * can adjust themselves without needing awareness of their context. * (For instance: on a page with sidebar vs full width) * * TABLE OF CONTENTS * custom breakpoints * frequently used presets * * -------------------------------------------------- */ /** -------------------------------------------------- * #custom breakpoints * -------------------------------------------------- */ /** -------------------------------------------------- * #frequently used presets * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / UTILS * queries * * INFO * Media query mixins to be called directly or with * predefined keys configured in [variables/breakpoints] * + * basic container query mixin (inline-size, width > x) * sharing the same breakpoints and conversion logic as our * media query mixin * * TABLE OF CONTENTS * fallback defaults * mq * mqset * cq * * -------------------------------------------------- */ /** -------------------------------------------------- * #fallback defaults * -------------------------------------------------- */ /** -------------------------------------------------- * #mq * -------------------------------------------------- */ /** -------------------------------------------------- * #mqset * -------------------------------------------------- */ /** -------------------------------------------------- * #cq * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / UTILS * create button variants * * INFO * Mixin to generate all button variant & style combos. * * TABLE OF CONTENTS * create-button-variants * * -------------------------------------------------- */ /** -------------------------------------------------- * #create-button-variants * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / UTILS * tokens to custom property * * INFO * Mixin to include all typographic related rules * based on a given token. Includes fluid type scale. * * TABLE OF CONTENTS * tokens-to-custom-property * * -------------------------------------------------- */ /** -------------------------------------------------- * #tokens-to-custom-property * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / UTILS * typography * * INFO * Mixin to include all typographic related rules * based on a given token. Includes fluid type scale. * * TABLE OF CONTENTS * font-styles * * -------------------------------------------------- */ /** -------------------------------------------------- * #font * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / UTILS * visually hidden * * TABLE OF CONTENTS * visually hidden * visually hidden - focusable * * -------------------------------------------------- */ /** -------------------------------------------------- * #visually hidden * -------------------------------------------------- */ /** -------------------------------------------------- * #visually hidden - focusable * -------------------------------------------------- */ .sdc--type-social-share { --icon-size: 1rem; --icon-color: var(--color-fills-brand-accent1-base); --reading-color: var(--color-fills-brand-accent1-base); } .sdc--type-social-share .content { --social-share-margin-block-start: 1.5rem; --social-share-padding-block: 0.9375rem; --social-share-padding-inline: 1rem; } @container social-share (width > 48em) { .sdc--type-social-share .content { --social-share-margin-block-start: 2.5rem; --social-share-padding-block: 0.9375rem; --social-share-padding-inline: 2rem; } } .sdc--type-social-share .social-share-cq { container: social-share/inline-size; } .sdc--type-social-share .content { display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-block-start: var(--social-share-margin-block-start); padding-block: var(--social-share-padding-block); padding-inline: var(--social-share-padding-inline); } .sdc--type-social-share .reading-time { display: flex; flex-flow: row nowrap; align-items: center; gap: 0.25rem; color: var(--reading-color); } .sdc--type-social-share .reading-time::before { content: ""; width: var(--icon-size); height: var(--icon-size); background-color: var(--icon-color); mask-image: url("../../../img/icons/clock.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: var(--icon-size) var(--icon-size); } .sdc--type-social-share .tags .action-bar-cq { container: none; } .sdc--type-social-share .tags .sdc-inner { width: max-content; } .sdc--type-social-share .social-share { margin: 0; padding: 0; list-style-type: none; display: flex; flex-flow: row nowrap; align-items: center; gap: 1rem; } @container social-share (width > 48em) { .sdc--type-social-share .social-share { margin-inline-start: auto; } } .sdc--type-social-share .social-share:only-child { margin-inline: auto; } .sdc--type-social-share .social-share li { margin-block-start: 0; font-size: 0; } .sdc--type-social-share .social-share li .share-button { font-size: 0; } .sdc--type-social-share .social-share li .share-button::before { --size: 2rem; content: ""; width: var(--size); height: var(--size); display: block; } .sdc--type-social-share .social-share li .share-button:hover::before { transition: all 0.3s ease; } .sdc--type-social-share .social-share li .icon-facebook::before { background-color: var(--color-fills-brand-accent1-base); mask-image: url("../../../img/icons/share/facebook.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: var(--size) var(--size); } .sdc--type-social-share .social-share li .icon-twitter::before { background-color: var(--color-fills-brand-accent1-base); mask-image: url("../../../img/icons/share/x.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: var(--size) var(--size); } .sdc--type-social-share .social-share li .icon-linkedin::before { background-color: var(--color-fills-brand-accent1-base); mask-image: url("../../../img/icons/share/linkedin.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: var(--size) var(--size); } .sdc--type-social-share .social-share li .icon-mail::before { background-color: var(--color-fills-brand-accent1-base); mask-image: url("../../../img/icons/share/share.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: var(--size) var(--size); } @container social-share (width > 48em) { .sdc--type-social-share .social-share { gap: 1.5rem; } } @container social-share (width > 48em) {}