63 lines
2.4 KiB
CSS
63 lines
2.4 KiB
CSS
|
/* ============================================================================
|
||
|
|
ARROW ICON - figma `arrow-small-right` 84:4260 / `arrow-small-lift` 140:8078
|
||
|
|
----------------------------------------------------------------------------
|
||
|
|
The exported asset is at /assets/icons/arrow-small-right.svg. Its path is
|
||
|
|
filled with a hard-coded black, so it is applied as a mask over
|
||
|
|
`currentColor` instead of being dropped in an <img>: that is the only way the
|
||
|
|
arrow can turn white on a Primary button, dark grey on a Secondary one and
|
||
|
|
green on a Ghost one while remaining the exact exported bytes.
|
||
|
|
|
||
|
|
GEOMETRY, straight from Figma: a 24x24 clipped box (`--control-icon-size`)
|
||
|
|
with the 12.9996 x 11.414 leaf inset 20.8333% from the left, 25% from the
|
||
|
|
right and 26.22% top and bottom. The insets are physical on purpose - the
|
||
|
|
glyph is asymmetric, which app.css names as the one case that cannot be
|
||
|
|
expressed logically, so mirroring is done by flipping the whole box.
|
||
|
|
|
||
|
|
DIRECTION. Figma's left arrow is not a second drawing: node 140:8078 is this
|
||
|
|
same asset with `-scale-x-100`. So `forward` (the arrow that follows reading
|
||
|
|
order) is the exported right arrow in LTR and that same box mirrored in RTL,
|
||
|
|
which is exactly what the Arabic home 85:5029 shows in its hero CTA.
|
||
|
|
========================================================================= */
|
||
|
|
|
||
|
|
@layer theme, base, components, utilities;
|
||
|
|
|
||
|
|
@layer components {
|
||
|
|
.sh-arrow-icon {
|
||
|
|
position: relative;
|
||
|
|
display: inline-block;
|
||
|
|
flex: none;
|
||
|
|
inline-size: var(--control-icon-size);
|
||
|
|
block-size: var(--control-icon-size);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sh-arrow-icon__glyph {
|
||
|
|
position: absolute;
|
||
|
|
top: 26.22%;
|
||
|
|
bottom: 26.22%;
|
||
|
|
left: 20.8333%;
|
||
|
|
right: 25%;
|
||
|
|
background-color: currentColor;
|
||
|
|
-webkit-mask-image: url("/assets/icons/arrow-small-right.svg");
|
||
|
|
mask-image: url("/assets/icons/arrow-small-right.svg");
|
||
|
|
-webkit-mask-size: 100% 100%;
|
||
|
|
mask-size: 100% 100%;
|
||
|
|
-webkit-mask-repeat: no-repeat;
|
||
|
|
mask-repeat: no-repeat;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Mirror the box, not the glyph, so the 1px asymmetry of the inset mirrors
|
||
|
|
with it - this reproduces node 140:8078 rather than approximating it. */
|
||
|
|
.sh-arrow-icon[data-direction="backward"] {
|
||
|
|
transform: scaleX(-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] .sh-arrow-icon[data-direction="forward"] {
|
||
|
|
transform: scaleX(-1);
|
||
|
|
}
|
||
|
|
|
||
|
|
[dir="rtl"] .sh-arrow-icon[data-direction="backward"] {
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
}
|