/** -------------------------------------------------- * * components / content blocks / * LANGUAGE SWITCHER SDC * @description: Styles for the language switcher block * * INFO * Global styling here, site specific styles are in the global styling * * TABLE OF CONTENTS * component properties * component spacing * * -------------------------------------------------- */ /** -------------------------------------------------- * * 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 * -------------------------------------------------- */ /** -------------------------------------------------- * * components / content blocks / * LANGUAGE SWITCHER SDC * @description: Styles for the language switcher block * * INFO * Global styling here, site specific styles are in the global styling * * TABLE OF CONTENTS * component properties * component spacing * * -------------------------------------------------- */ /** -------------------------------------------------- * * 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 * -------------------------------------------------- */ /** -------------------------------------------------- * * components / content blocks / * LANGUAGE SWITCHER SDC * @description: Styles for the language switcher block * * INFO * Global styling here, site specific styles are in the global styling * * TABLE OF CONTENTS * component properties * component spacing * * -------------------------------------------------- */ /** -------------------------------------------------- * * 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 * -------------------------------------------------- */ /** -------------------------------------------------- * * components / content blocks / * LANGUAGE SWITCHER SDC * @description: Styles for the language switcher block * * INFO * Global styling here, site specific styles are in the global styling * * TABLE OF CONTENTS * component properties * component spacing * * -------------------------------------------------- */ /** -------------------------------------------------- * * 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 * -------------------------------------------------- */ /** -------------------------------------------------- * * components / content blocks / * LANGUAGE SWITCHER SDC * @description: Styles for the language switcher block * * INFO * Global styling here, site specific styles are in the global styling * * TABLE OF CONTENTS * component properties * component spacing * * -------------------------------------------------- */ /** -------------------------------------------------- * * BASE / UTILS * visually hidden * * TABLE OF CONTENTS * visually hidden * visually hidden - focusable * * -------------------------------------------------- */ /** -------------------------------------------------- * #visually hidden * -------------------------------------------------- */ /** -------------------------------------------------- * #visually hidden - focusable * -------------------------------------------------- */ /** -------------------------------------------------- * #component properties * -------------------------------------------------- */ .sdc--type-language-switcher { --arrow-spacing: 0.25rem; --arrow-size: 0.6875rem 0.4375rem; --padding: 0.125rem 0.25rem; --background: var(--color-neutral-white, #fff); --list-gap: 0.125rem; --color: var(--color-neutral-black, #000); --list-padding: 0.125rem 0.25rem; } @container language-switcher (width > 48em) {} /** -------------------------------------------------- * #component spacing * -------------------------------------------------- */ .sdc--type-language-switcher { position: relative; padding: var(--padding-block); background-color: var(--background); z-index: 1; } .sdc--type-language-switcher .language-switcher-current { display: flex; align-items: center; gap: var(--arrow-spacing); cursor: pointer; padding: var(--padding); --list-gap: 0.125rem; color: var(--color); white-space: nowrap; } .sdc--type-language-switcher .language-switcher-current:after { content: ""; display: block; width: 1.5rem; aspect-ratio: 1/1; background-color: var(--color); mask-image: url("./assets/chevron-down.svg"); mask-repeat: no-repeat; mask-position: center center; mask-size: var(--arrow-size); transition: transform 0.3s ease; } .sdc--type-language-switcher .language-switcher-links { all: unset; position: absolute; inset: 100% 0 auto auto; min-width: 100%; background-color: var(--background); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: grid; gap: var(--list-gap); } .sdc--type-language-switcher .language-switcher-links li { all: unset; } .sdc--type-language-switcher .language-switcher-links a { display: block; padding: var(--padding); text-decoration: none; color: var(--color); } .sdc--type-language-switcher .language-switcher-links a:hover, .sdc--type-language-switcher .language-switcher-links a:focus { text-decoration: underline; } .sdc--type-language-switcher[data-show] .language-switcher-current:after { transform: rotate(180deg); } .sdc--type-language-switcher[data-show] .language-switcher-links { opacity: 1; pointer-events: auto; } .sdc-block--language-interface .contextual .trigger { right: auto; left: 100%; }