@utrecht/web-component-library-stencil
Version:
Stencil component library bundle for the Municipality of Utrecht based on the NL Design System architecture
48 lines (47 loc) • 1.58 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
*/
:host {
/*
* Goals:
*
* - take up 100% of the space, both horizontally and vertically.
* - create a scrollable viewport experience both on `<html>` in the root,
* as well as on a `<div>` somewhere in a document.
* - override commonly applied `font-smoothing` CSS that reduces text contrast.
* - the root must be a "positioned ancestor", so elements that are positioned
* outside the normal document flow (`absolute`, `fixed` and `sticky`)
* are positioned relative to the root component.
* - ensure text content fits at 400% zoom by enabling hypenation.
*/
/* reset `font-smoothing: antialiasing`, prefer automatic (`subpixel-antialiasing`) behavior for high-dpi screens */
-webkit-font-smoothing: auto ;
-moz-osx-font-smoothing: auto ;
background-color: var(--utrecht-root-background-color);
block-size: 100%;
color: var(--utrecht-root-color);
font-family: var(--utrecht-root-font-family);
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
inline-size: 100%;
overflow-block: auto;
overflow-inline: auto;
position: relative;
text-rendering: optimizeLegibility;
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
word-break: break-word;
}
:host([hidden]) {
display: none ;
}