generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 15
/
_mixin.scss
43 lines (40 loc) · 1.67 KB
/
_mixin.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
/**
* @license EUPL-1.2
* Copyright (c) 2020-2022 Gemeente Utrecht
* Copyright (c) 2020-2022 Frameless B.V.
*/
@mixin utrecht-badge {
/*
* `line-height` has a default value, so `line-height` can be used on a parent element to add vertical space between badges
*
* Configure maximum size to prevent stretching badges inside a flexbox.
*
* Configure minumum size to have space to type in when displaying badges in a WYSIWYG editor.
*/
background-color: var(--utrecht-badge-background-color, hsl(0 0% 0%));
border-radius: var(--utrecht-badge-border-radius, 0.5ch);
color: var(--utrecht-badge-color, hsl(0 0% 100%));
display: inline-block;
font-family: var(--utrecht-document-font-family, sans-serif);
font-size: var(--utrecht-badge-font-size, inherit);
font-style: var(--utrecht-badge-font-style, normal); /* no inheritance */
font-weight: var(--utrecht-badge-font-weight, bold); /* no inheritance */
line-height: var(--utrecht-badge-line-height, 1em);
max-block-size: max-content;
max-inline-size: max-content;
min-block-size: 1em;
min-inline-size: 1em;
padding-block-end: var(--utrecht-badge-padding-block, 0.5ex);
padding-block-start: var(--utrecht-badge-padding-block, 0.5ex);
padding-inline-end: var(--utrecht-badge-padding-inline, 0.5ch);
padding-inline-start: var(--utrecht-badge-padding-inline, 0.5ch);
text-decoration: none; /* no inheritance */
}
@mixin utrecht-badge--media-query-forced-colors {
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
border-color: currentColor;
border-style: solid;
/* Warning: there layout difference because of the added 1px border */
border-width: 1px;
}
}