@digdir/designsystemet-css 1.0.0-next.32 → 1.0.0-next.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion.css +104 -124
- package/alert.css +52 -53
- package/avatar.css +98 -0
- package/badge.css +95 -109
- package/button.css +129 -173
- package/card.css +181 -174
- package/chip.css +5 -5
- package/combobox.css +2 -0
- package/dist/accordion.css +1 -1
- package/dist/alert.css +1 -1
- package/dist/avatar.css +1 -0
- package/dist/badge.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/chip.css +1 -1
- package/dist/combobox.css +1 -1
- package/dist/divider.css +1 -1
- package/dist/dropdownmenu.css +1 -1
- package/dist/index.css +1 -1
- package/dist/link.css +1 -1
- package/dist/list.css +1 -1
- package/dist/pagination.css +1 -1
- package/dist/popover.css +1 -1
- package/dist/select.css +1 -0
- package/dist/spinner.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/table.css +1 -1
- package/dist/tag.css +1 -1
- package/dist/tooltip.css +1 -1
- package/dist/utilities.css +1 -1
- package/divider.css +5 -14
- package/dropdownmenu.css +16 -29
- package/index.css +2 -2
- package/link.css +44 -46
- package/list.css +23 -13
- package/package.json +5 -2
- package/pagination.css +41 -60
- package/popover.css +58 -66
- package/{native-select.css → select.css} +30 -30
- package/spinner.css +36 -20
- package/switch.css +4 -0
- package/table.css +134 -117
- package/tag.css +54 -62
- package/tooltip.css +3 -6
- package/utilities.css +9 -6
- package/box.css +0 -71
- package/dist/box.css +0 -1
- package/dist/native-select.css +0 -1
package/accordion.css
CHANGED
|
@@ -1,139 +1,119 @@
|
|
|
1
|
-
.ds-accordion {
|
|
2
|
-
--dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
|
|
3
|
-
--dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
|
|
1
|
+
.ds-accordion-group {
|
|
4
2
|
--dsc-accordion-background: var(--ds-color-neutral-background-default);
|
|
5
|
-
--dsc-accordion-
|
|
6
|
-
--dsc-accordion-
|
|
7
|
-
--dsc-accordion-
|
|
8
|
-
--dsc-accordion-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
background
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.ds-accordion__heading {
|
|
32
|
-
margin: 0;
|
|
33
|
-
width: 100%;
|
|
34
|
-
display: flex;
|
|
35
|
-
justify-content: flex-start;
|
|
36
|
-
align-items: center;
|
|
37
|
-
gap: var(--ds-spacing-2);
|
|
38
|
-
text-align: left;
|
|
39
|
-
border: none;
|
|
40
|
-
border-top: 1px solid var(--dsc-accordion-border-color);
|
|
41
|
-
background-color: var(--dsc-accordion-button-background);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.ds-accordion__button {
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
width: 100%;
|
|
47
|
-
display: flex;
|
|
48
|
-
justify-content: flex-start;
|
|
49
|
-
align-items: center;
|
|
50
|
-
gap: var(--ds-spacing-2);
|
|
51
|
-
margin: 0;
|
|
52
|
-
padding: var(--ds-spacing-4);
|
|
53
|
-
background-color: transparent;
|
|
54
|
-
border: none;
|
|
55
|
-
font-family: inherit;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
.ds-accordion__item--open .ds-accordion__heading {
|
|
59
|
-
background-color: var(--dsc-accordion-button-background-open);
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.ds-accordion__item:focus-within {
|
|
63
|
-
position: relative;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
.ds-accordion__item:where(.ds-accordion__item--open) .ds-accordion__expand-icon {
|
|
67
|
-
transform: rotateZ(180deg);
|
|
68
|
-
}
|
|
3
|
+
--dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
|
|
4
|
+
--dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
|
|
5
|
+
--dsc-accordion-chevron-gap: var(--ds-spacing-2);
|
|
6
|
+
--dsc-accordion-chevron-size: var(--ds-spacing-6);
|
|
7
|
+
--dsc-accordion-chevron-rotate: 0deg;
|
|
8
|
+
--dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-default);
|
|
9
|
+
--dsc-accordion-heading-background--open: var(--ds-color-neutral-background-subtle);
|
|
10
|
+
--dsc-accordion-heading-background: var(--ds-color-neutral-background-default);
|
|
11
|
+
--dsc-accordion-padding: var(--ds-spacing-4);
|
|
12
|
+
|
|
13
|
+
&[data-border] > * {
|
|
14
|
+
border: var(--dsc-accordion-border);
|
|
15
|
+
|
|
16
|
+
&:first-child,
|
|
17
|
+
&:first-child > :is(summary, u-summary) {
|
|
18
|
+
border-top-left-radius: var(--dsc-accordion-border-radius);
|
|
19
|
+
border-top-right-radius: var(--dsc-accordion-border-radius);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&:last-child,
|
|
23
|
+
&:last-child:not([open]) > :is(summary, u-summary) {
|
|
24
|
+
border-bottom-left-radius: var(--dsc-accordion-border-radius);
|
|
25
|
+
border-bottom-right-radius: var(--dsc-accordion-border-radius);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
69
28
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
29
|
+
&[data-color='subtle'] {
|
|
30
|
+
--dsc-accordion-background: var(--ds-color-neutral-background-subtle);
|
|
31
|
+
--dsc-accordion-border: 1px solid var(--ds-color-neutral-border-subtle);
|
|
32
|
+
--dsc-accordion-heading-background--hover: var(--ds-color-neutral-surface-hover);
|
|
33
|
+
--dsc-accordion-heading-background--open: var(--ds-color-neutral-surface-default);
|
|
34
|
+
--dsc-accordion-heading-background: var(--ds-color-neutral-background-subtle);
|
|
35
|
+
}
|
|
73
36
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
37
|
+
&[data-color='brand1'] {
|
|
38
|
+
--dsc-accordion-background: var(--ds-color-brand1-background-subtle);
|
|
39
|
+
--dsc-accordion-border: 1px solid var(--ds-color-brand1-border-subtle);
|
|
40
|
+
--dsc-accordion-heading-background--hover: var(--ds-color-brand1-surface-hover);
|
|
41
|
+
--dsc-accordion-heading-background--open: var(--ds-color-brand1-surface-default);
|
|
42
|
+
--dsc-accordion-heading-background: var(--ds-color-brand1-surface-default);
|
|
43
|
+
}
|
|
77
44
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
45
|
+
&[data-color='brand2'] {
|
|
46
|
+
--dsc-accordion-background: var(--ds-color-brand2-background-subtle);
|
|
47
|
+
--dsc-accordion-border: 1px solid var(--ds-color-brand2-border-subtle);
|
|
48
|
+
--dsc-accordion-heading-background--hover: var(--ds-color-brand2-surface-hover);
|
|
49
|
+
--dsc-accordion-heading-background--open: var(--ds-color-brand2-surface-default);
|
|
50
|
+
--dsc-accordion-heading-background: var(--ds-color-brand2-surface-default);
|
|
51
|
+
}
|
|
82
52
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
53
|
+
&[data-color='brand3'] {
|
|
54
|
+
--dsc-accordion-background: var(--ds-color-brand3-background-subtle);
|
|
55
|
+
--dsc-accordion-border: 1px solid var(--ds-color-brand3-border-subtle);
|
|
56
|
+
--dsc-accordion-heading-background--hover: var(--ds-color-brand3-surface-hover);
|
|
57
|
+
--dsc-accordion-heading-background--open: var(--ds-color-brand3-surface-default);
|
|
58
|
+
--dsc-accordion-heading-background: var(--ds-color-brand3-surface-default);
|
|
59
|
+
}
|
|
86
60
|
}
|
|
87
61
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
62
|
+
.ds-accordion__item {
|
|
63
|
+
background: var(--dsc-accordion-background);
|
|
64
|
+
border-block: var(--dsc-accordion-border);
|
|
65
|
+
|
|
66
|
+
& > :is(summary, u-summary) {
|
|
67
|
+
background: var(--dsc-accordion-heading-background);
|
|
68
|
+
box-sizing: border-box;
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
list-style: none;
|
|
71
|
+
outline: none;
|
|
72
|
+
padding-block: var(--dsc-accordion-padding);
|
|
73
|
+
padding-inline: calc(var(--dsc-accordion-padding) + var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) var(--dsc-accordion-padding);
|
|
74
|
+
|
|
75
|
+
&:focus-visible {
|
|
76
|
+
position: relative; /* Ensure foucs outline renders on top */
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&::before {
|
|
80
|
+
background: currentcolor;
|
|
81
|
+
border-radius: var(--ds-border-radius-md);
|
|
82
|
+
content: '';
|
|
83
|
+
height: var(--dsc-accordion-chevron-size);
|
|
84
|
+
mask: 50% / contain no-repeat
|
|
85
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.97 9.47a.75.75 0 0 1 1.06 0L12 14.44l4.97-4.97a.75.75 0 1 1 1.06 1.06l-5.5 5.5a.75.75 0 0 1-1.06 0l-5.5-5.5a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E");
|
|
86
|
+
position: absolute;
|
|
87
|
+
rotate: var(--dsc-accordion-chevron-rotate);
|
|
88
|
+
margin-inline: calc(
|
|
89
|
+
(var(--dsc-accordion-chevron-size) + var(--dsc-accordion-chevron-gap)) * -1
|
|
90
|
+
); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
|
|
91
|
+
|
|
92
|
+
width: var(--dsc-accordion-chevron-size);
|
|
93
|
+
}
|
|
91
94
|
}
|
|
92
95
|
|
|
93
|
-
|
|
94
|
-
|
|
96
|
+
& + & {
|
|
97
|
+
border-top: 0; /* Skip border-top when .accordion__item is followed by .accordion__item */
|
|
95
98
|
}
|
|
96
|
-
}
|
|
97
99
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
--dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
.ds-accordion--subtle {
|
|
106
|
-
--dsc-accordion-background: var(--ds-color-neutral-background-subtle);
|
|
107
|
-
--dsc-accordion-border-color: var(--ds-color-neutral-border-default);
|
|
108
|
-
--dsc-accordion-button-background: var(--ds-color-neutral-background-subtle);
|
|
109
|
-
--dsc-accordion-button-background-open: var(--ds-color-neutral-surface-default);
|
|
110
|
-
--dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
|
|
111
|
-
--dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-active);
|
|
112
|
-
}
|
|
100
|
+
& > :not(summary, u-summary) {
|
|
101
|
+
border-radius: inherit;
|
|
102
|
+
padding: var(--ds-spacing-5, 1rem);
|
|
103
|
+
}
|
|
113
104
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
--dsc-accordion-button-background: var(--ds-color-brand1-surface-default);
|
|
118
|
-
--dsc-accordion-button-background-open: var(--ds-color-brand1-surface-hover);
|
|
119
|
-
--dsc-accordion-icon-background-hover: var(--ds-color-brand1-surface-active);
|
|
120
|
-
--dsc-accordion-icon-background-active: var(--ds-color-brand1-surface-active);
|
|
121
|
-
}
|
|
105
|
+
&[open] > :is(summary, u-summary) {
|
|
106
|
+
background: var(--dsc-accordion-heading-background--open);
|
|
107
|
+
}
|
|
122
108
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
--dsc-accordion-button-background-open: var(--ds-color-brand2-surface-hover);
|
|
128
|
-
--dsc-accordion-icon-background-hover: var(--ds-color-brand2-surface-active);
|
|
129
|
-
--dsc-accordion-icon-background-active: var(--ds-color-brand2-surface-active);
|
|
130
|
-
}
|
|
109
|
+
/* Make flip on click */
|
|
110
|
+
&[open]:not([data-chevron-open='false']) {
|
|
111
|
+
--dsc-accordion-chevron-rotate: -180deg;
|
|
112
|
+
}
|
|
131
113
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
--dsc-accordion-icon-background-hover: var(--ds-color-brand3-surface-active);
|
|
138
|
-
--dsc-accordion-icon-background-active: var(--ds-color-brand3-surface-active);
|
|
114
|
+
@media (hover: hover) and (pointer: fine) {
|
|
115
|
+
& > :is(summary, u-summary):hover {
|
|
116
|
+
background: var(--dsc-accordion-heading-background--hover);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
139
119
|
}
|
package/alert.css
CHANGED
|
@@ -1,69 +1,68 @@
|
|
|
1
1
|
.ds-alert {
|
|
2
|
+
--dsc-alert-background: var(--ds-color-info-surface-default);
|
|
2
3
|
--dsc-alert-border-color: var(--ds-color-info-border-strong);
|
|
3
4
|
--dsc-alert-border-radius: min(1rem, var(--ds-border-radius-md));
|
|
4
5
|
--dsc-alert-color: var(--ds-color-neutral-text-default);
|
|
5
|
-
--dsc-alert-
|
|
6
|
+
--dsc-alert-gap: var(--ds-spacing-2);
|
|
7
|
+
--dsc-alert-icon-color: var(--ds-color-info-text-subtle);
|
|
6
8
|
--dsc-alert-icon-size: var(--ds-sizing-7);
|
|
7
|
-
--dsc-alert-
|
|
9
|
+
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
|
|
8
10
|
--dsc-alert-padding: var(--ds-spacing-6);
|
|
9
11
|
|
|
10
|
-
border: 1px solid var(--dsc-alert-border-color);
|
|
11
|
-
border-radius: var(--dsc-alert-border-radius);
|
|
12
12
|
background: var(--dsc-alert-background);
|
|
13
|
+
border-radius: var(--dsc-alert-border-radius);
|
|
14
|
+
border: 1px solid var(--dsc-alert-border-color);
|
|
13
15
|
color: var(--dsc-alert-color);
|
|
14
|
-
padding: var(--dsc-alert-padding);
|
|
15
|
-
|
|
16
|
-
grid-auto-flow: column;
|
|
17
|
-
grid-auto-columns: min-content auto;
|
|
18
|
-
gap: var(--ds-spacing-2);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.ds-alert__icon {
|
|
22
|
-
height: var(--dsc-alert-icon-size);
|
|
23
|
-
width: var(--dsc-alert-icon-size);
|
|
24
|
-
color: var(--dsc-alert-icon-color);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.ds-alert__content {
|
|
28
|
-
display: flex;
|
|
29
|
-
flex-direction: column;
|
|
30
|
-
}
|
|
16
|
+
padding-block: var(--dsc-alert-padding);
|
|
17
|
+
padding-inline: calc(var(--dsc-alert-padding) + var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) var(--dsc-alert-padding);
|
|
31
18
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
19
|
+
& > :is(h1,h2,h3,h4,h5,h6):first-child::before, /* If Alert starts with Heading, align icon to this */
|
|
20
|
+
&:not(:has(> :is(h1,h2,h3,h4,h5,h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
|
|
21
|
+
background-color: var(--dsc-alert-icon-color);
|
|
22
|
+
content: '';
|
|
23
|
+
display: block;
|
|
24
|
+
height: var(--dsc-alert-icon-size);
|
|
25
|
+
margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
|
|
26
|
+
mask: var(--dsc-alert-icon-url) center/contain no-repeat;
|
|
27
|
+
position: absolute;
|
|
28
|
+
translate: 0 calc(.5lh - var(--dsc-alert-icon-size) / 2); /* Center icon to line height */
|
|
29
|
+
width: var(--dsc-alert-icon-size);
|
|
30
|
+
}
|
|
43
31
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
32
|
+
/**
|
|
33
|
+
* Colors
|
|
34
|
+
*/
|
|
35
|
+
&[data-color="warning"] {
|
|
36
|
+
--dsc-alert-border-color: var(--ds-color-warning-border-default);
|
|
37
|
+
--dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
|
|
38
|
+
--dsc-alert-background: var(--ds-color-warning-surface-default);
|
|
39
|
+
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2.25a.75.75 0 0 1 .66.39l9.52 17.25a.75.75 0 0 1-.65 1.11H2.47a.75.75 0 0 1-.65-1.11l9.52-17.25a.75.75 0 0 1 .66-.39m0 6.5a.75.75 0 0 1 .75.75v4a.75.75 0 0 1-1.5 0v-4a.75.75 0 0 1 .75-.75m-1 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0'/%3E%3C/svg%3E");
|
|
40
|
+
}
|
|
49
41
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
42
|
+
&[data-color="success"] {
|
|
43
|
+
--dsc-alert-background: var(--ds-color-success-surface-default);
|
|
44
|
+
--dsc-alert-border-color: var(--ds-color-success-border-default);
|
|
45
|
+
--dsc-alert-icon-color: var(--ds-color-success-text-subtle);
|
|
46
|
+
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 21.75a9.75 9.75 0 1 0 0-19.5 9.75 9.75 0 0 0 0 19.5m4.95-12.47a.81.81 0 0 0-1.24-1.05l-5.39 6.36-2.62-2.62a.81.81 0 0 0-1.15 1.15l3.25 3.25a.81.81 0 0 0 1.2-.05z'/%3E%3C/svg%3E");
|
|
47
|
+
}
|
|
55
48
|
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
49
|
+
&[data-color="danger"] {
|
|
50
|
+
--dsc-alert-background: var(--ds-color-danger-surface-default);
|
|
51
|
+
--dsc-alert-border-color: var(--ds-color-danger-border-default);
|
|
52
|
+
--dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
|
|
53
|
+
--dsc-alert-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M7.74 2.47a.75.75 0 0 1 .53-.22h7.46a.75.75 0 0 1 .53.22l5.27 5.27c.14.14.22.33.22.53v7.46a.75.75 0 0 1-.22.53l-5.27 5.27a.75.75 0 0 1-.53.22H8.27a.75.75 0 0 1-.53-.22l-5.27-5.27a.75.75 0 0 1-.22-.53V8.27a.75.75 0 0 1 .22-.53zm1.29 5.5a.75.75 0 0 0-1.06 1.06L10.94 12l-2.97 2.97a.75.75 0 1 0 1.06 1.06L12 13.06l2.97 2.97a.75.75 0 1 0 1.06-1.06L13.06 12l2.97-2.97a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
|
|
54
|
+
}
|
|
60
55
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
56
|
+
/**
|
|
57
|
+
* Sizes
|
|
58
|
+
*/
|
|
59
|
+
&[data-size="sm"] {
|
|
60
|
+
--dsc-alert-icon-size: var(--ds-sizing-6);
|
|
61
|
+
--dsc-alert-padding: var(--ds-spacing-5);
|
|
62
|
+
}
|
|
65
63
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
&[data-size="lg"] {
|
|
65
|
+
--dsc-alert-icon-size: var(--ds-sizing-8);
|
|
66
|
+
--dsc-alert-padding: var(--ds-spacing-7);
|
|
67
|
+
}
|
|
69
68
|
}
|
package/avatar.css
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
.ds-avatar {
|
|
2
|
+
--dsc-avatar-background: var(--ds-color-accent-base-default);
|
|
3
|
+
--dsc-avatar-color: var(--ds-color-accent-contrast-default);
|
|
4
|
+
--dsc-avatar-size: var(--ds-sizing-12);
|
|
5
|
+
--dsc-avatar-padding: var(--ds-spacing-2);
|
|
6
|
+
--dsc-avatar-border-radius: 50%;
|
|
7
|
+
|
|
8
|
+
background: var(--dsc-avatar-background);
|
|
9
|
+
height: var(--dsc-avatar-size);
|
|
10
|
+
aspect-ratio: 1 / 1;
|
|
11
|
+
color: var(--dsc-avatar-color);
|
|
12
|
+
border-radius: var(--dsc-avatar-border-radius);
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
display: inline-flex;
|
|
15
|
+
justify-content: center;
|
|
16
|
+
align-items: center;
|
|
17
|
+
user-select: none;
|
|
18
|
+
text-transform: uppercase;
|
|
19
|
+
text-decoration: none;
|
|
20
|
+
|
|
21
|
+
&:not(:has(> img)) {
|
|
22
|
+
padding: var(--dsc-avatar-padding);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
& img {
|
|
26
|
+
object-fit: cover;
|
|
27
|
+
width: 100%;
|
|
28
|
+
height: 100%;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
& svg {
|
|
32
|
+
max-width: 100%;
|
|
33
|
+
max-height: 100%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:empty::before {
|
|
37
|
+
content: '';
|
|
38
|
+
width: 100%;
|
|
39
|
+
height: 100%;
|
|
40
|
+
mask-repeat: no-repeat;
|
|
41
|
+
mask-size: contain;
|
|
42
|
+
background-color: currentcolor;
|
|
43
|
+
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M8.25 7.5a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0M12 2.25a5.25 5.25 0 1 0 0 10.5 5.25 5.25 0 0 0 0-10.5M8.288 17.288A5.25 5.25 0 0 1 17.25 21a.75.75 0 0 0 1.5 0 6.75 6.75 0 0 0-13.5 0 .75.75 0 0 0 1.5 0 5.25 5.25 0 0 1 1.538-3.712' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&[data-variant='circle'] {
|
|
47
|
+
--dsc-avatar-border-radius: var(--ds-border-radius-full);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&[data-variant='square'] {
|
|
51
|
+
--dsc-avatar-border-radius: var(--ds-border-radius-sm);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
&[data-color='accent'] {
|
|
55
|
+
--dsc-avatar-background: var(--ds-color-accent-base-default);
|
|
56
|
+
--dsc-avatar-color: var(--ds-color-accent-contrast-default);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
&[data-color='neutral'] {
|
|
60
|
+
--dsc-avatar-background: var(--ds-color-neutral-base-default);
|
|
61
|
+
--dsc-avatar-color: var(--ds-color-neutral-contrast-default);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&[data-color='brand1'] {
|
|
65
|
+
--dsc-avatar-background: var(--ds-color-brand1-base-default);
|
|
66
|
+
--dsc-avatar-color: var(--ds-color-brand1-contrast-default);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&[data-color='brand2'] {
|
|
70
|
+
--dsc-avatar-background: var(--ds-color-brand2-base-default);
|
|
71
|
+
--dsc-avatar-color: var(--ds-color-brand2-contrast-default);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&[data-color='brand3'] {
|
|
75
|
+
--dsc-avatar-background: var(--ds-color-brand3-base-default);
|
|
76
|
+
--dsc-avatar-color: var(--ds-color-brand3-contrast-default);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
&[data-size='xs'] {
|
|
80
|
+
--dsc-avatar-size: var(--ds-sizing-7);
|
|
81
|
+
--dsc-avatar-padding: var(--ds-spacing-1);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&[data-size='sm'] {
|
|
85
|
+
--dsc-avatar-size: var(--ds-sizing-9);
|
|
86
|
+
--dsc-avatar-padding: var(--ds-spacing-1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
&[data-size='md'] {
|
|
90
|
+
--dsc-avatar-size: var(--ds-sizing-12);
|
|
91
|
+
--dsc-avatar-padding: var(--ds-spacing-2);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&[data-size='lg'] {
|
|
95
|
+
--dsc-avatar-size: var(--ds-sizing-15);
|
|
96
|
+
--dsc-avatar-padding: var(--ds-spacing-2);
|
|
97
|
+
}
|
|
98
|
+
}
|