36 lines
1.5 KiB
CSS
36 lines
1.5 KiB
CSS
 
|
/* ============================================================================
|
||
|
|
LANGUAGE SWITCHER - figma `globe` 478:16381 (navigation 20:236)
|
||
|
|
----------------------------------------------------------------------------
|
||
|
|
The navigation now carries the language control as a bare 24x24 globe in the
|
||
|
|
Actions slot, replacing the "AR" / "EN" pill that used to sit next to the EU
|
||
|
|
badge. The exported asset fills its path with a hard-coded #1D1D1B, which
|
||
|
|
would be invisible on the dark surface, so it is applied as a mask over
|
||
|
|
`currentColor` - the same technique as `.sh-arrow-icon` and `.sh-card-icon`.
|
||
|
|
That keeps the exact exported geometry while the colour comes from whichever
|
||
|
|
semantic token the bar has in force.
|
||
|
|
|
||
|
|
GEOMETRY, straight from Figma: a 24x24 box (`--control-icon-size`) with the
|
||
|
|
glyph filling it edge to edge. The globe is radially symmetric, so unlike the
|
||
|
|
arrow it needs no RTL mirroring.
|
||
|
|
========================================================================= */
|
||
|
|
|
||
|
|
@layer theme, base, components, utilities;
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.sh-language-globe {
|
||
|
|
display: block;
|
||
|
|
flex: none;
|
||
|
|
inline-size: var(--control-icon-size);
|
||
|
|
block-size: var(--control-icon-size);
|
||
|
|
background-color: currentColor;
|
||
|
|
-webkit-mask-image: url("/assets/icons/globe-solid.svg");
|
||
|
|
mask-image: url("/assets/icons/globe-solid.svg");
|
||
|
|
-webkit-mask-size: 100% 100%;
|
||
|
|
mask-size: 100% 100%;
|
||
|
|
-webkit-mask-repeat: no-repeat;
|
||
|
|
mask-repeat: no-repeat;
|
||
|
|
-webkit-mask-position: center;
|
||
|
|
mask-position: center;
|
||
|
|
}
|
||
|
|
}
|