@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
60 lines (56 loc) • 1.48 kB
CSS
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
/**
* @license EUPL-1.2
* Copyright (c) 2020-2024 Frameless B.V.
* Copyright (c) 2021-2024 Gemeente Utrecht
*/
:host {
block-size: var(--utrecht-icon-size);
color: var(--utrecht-icon-color);
display: inline-block;
font-size: var(--utrecht-icon-size);
inline-size: var(--utrecht-icon-size);
inset-block-start: var(--utrecht-icon-inset-block-start, 0);
position: relative;
}
svg {
/*
* Override the width of SVGs when they are hardcoded, and avoid oversized SVG icons.
* For example:
*
* <svg width="128px" height="128px">
*/
/* stylelint-disable-next-line csstools/use-logical */
height: 100%;
/* Remove tooltip from SVG `<title>` element using `pointer-events: none` */
pointer-events: none;
/* stylelint-disable-next-line csstools/use-logical */
width: 100%;
}
/* This is the ideal implementation: */
/*
:host([direction="inherit"]) {
--utrecht-icon-rtl-scale-x: -1;
}
svg:dir(rtl) {
transform: scaleX(var(--utrecht-icon-rtl-scale-x, 1));
}
*/
/* This is a workaround for Safari not supporting :dir(rtl) in Shadow DOM.
* Match `:dir(rtl)` outside the shadow DOM.
*/
:host([direction=inherit]:dir(rtl)) {
--utrecht-icon-scale-x: -1;
}
svg {
transform: scaleX(var(--utrecht-icon-scale-x, 1));
}