@solid-design-system/styles 1.0.0 → 1.1.0
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/CHANGELOG.md +21 -0
- package/cdn/modules/status-badge.css +1 -0
- package/cdn/solid-styles.css +1 -1
- package/cdn-versioned/modules/chip.css +1 -1
- package/cdn-versioned/modules/container.css +1 -1
- package/cdn-versioned/modules/copyright.css +1 -1
- package/cdn-versioned/modules/display.css +1 -1
- package/cdn-versioned/modules/flag.css +1 -1
- package/cdn-versioned/modules/footnotes.css +1 -1
- package/cdn-versioned/modules/headline.css +1 -1
- package/cdn-versioned/modules/hidden-links.css +1 -1
- package/cdn-versioned/modules/interactive.css +1 -1
- package/cdn-versioned/modules/leadtext.css +1 -1
- package/cdn-versioned/modules/list.css +1 -1
- package/cdn-versioned/modules/mark.css +1 -1
- package/cdn-versioned/modules/media.css +1 -1
- package/cdn-versioned/modules/meta.css +1 -1
- package/cdn-versioned/modules/paragraph.css +1 -1
- package/cdn-versioned/modules/prose.css +1 -1
- package/cdn-versioned/modules/status-badge.css +1 -0
- package/cdn-versioned/modules/table-cell.css +1 -1
- package/cdn-versioned/modules/table.css +1 -1
- package/cdn-versioned/solid-styles.css +1 -1
- package/dist/modules/status-badge.css +61 -0
- package/dist/solid-styles.css +44 -0
- package/dist-versioned/modules/chip.css +6 -6
- package/dist-versioned/modules/container.css +45 -45
- package/dist-versioned/modules/copyright.css +11 -11
- package/dist-versioned/modules/display.css +9 -9
- package/dist-versioned/modules/flag.css +6 -6
- package/dist-versioned/modules/footnotes.css +7 -7
- package/dist-versioned/modules/headline.css +67 -67
- package/dist-versioned/modules/hidden-links.css +7 -7
- package/dist-versioned/modules/interactive.css +38 -38
- package/dist-versioned/modules/leadtext.css +8 -8
- package/dist-versioned/modules/list.css +47 -47
- package/dist-versioned/modules/mark.css +2 -2
- package/dist-versioned/modules/media.css +7 -7
- package/dist-versioned/modules/meta.css +12 -12
- package/dist-versioned/modules/paragraph.css +8 -8
- package/dist-versioned/modules/prose.css +231 -231
- package/dist-versioned/modules/status-badge.css +61 -0
- package/dist-versioned/modules/table-cell.css +23 -23
- package/dist-versioned/modules/table.css +4 -4
- package/dist-versioned/solid-styles.css +371 -327
- package/package.json +5 -5
@@ -1,12 +1,12 @@
|
|
1
1
|
/**
|
2
2
|
* Generates basic styles for flag elements.
|
3
|
-
* @name sd-1-
|
3
|
+
* @name sd-1-1-0-flag
|
4
4
|
* @status stable
|
5
5
|
* @since 1.34.0
|
6
|
-
* @variant { neutral-300 | neutral-500 | white } sd-1-
|
6
|
+
* @variant { neutral-300 | neutral-500 | white } sd-1-1-0-flag--...
|
7
7
|
*/
|
8
8
|
|
9
|
-
.sd-1-
|
9
|
+
.sd-1-1-0-flag {
|
10
10
|
|
11
11
|
display: inline-flex;
|
12
12
|
|
@@ -33,7 +33,7 @@
|
|
33
33
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
34
34
|
}
|
35
35
|
|
36
|
-
.sd-1-
|
36
|
+
.sd-1-1-0-flag--neutral-500 {
|
37
37
|
|
38
38
|
|
39
39
|
|
@@ -44,14 +44,14 @@
|
|
44
44
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
45
45
|
}
|
46
46
|
|
47
|
-
.sd-1-
|
47
|
+
.sd-1-1-0-flag--neutral-300 {
|
48
48
|
|
49
49
|
|
50
50
|
|
51
51
|
background-color: rgb(var(--sd-color-neutral-300, 218 218 218) / var(--tw-bg-opacity, 1)) /* Used for flag */
|
52
52
|
}
|
53
53
|
|
54
|
-
.sd-1-
|
54
|
+
.sd-1-1-0-flag--white {
|
55
55
|
|
56
56
|
|
57
57
|
|
@@ -1,12 +1,12 @@
|
|
1
1
|
/**
|
2
2
|
* A footnote contains additional information/sources related to the content and usually appears at the bottom of a page or below the content it refers to.
|
3
|
-
* @name sd-1-
|
3
|
+
* @name sd-1-1-0-footnotes
|
4
4
|
* @status stable
|
5
5
|
* @since 3.0.0
|
6
|
-
* @boolean sd-1-
|
6
|
+
* @boolean sd-1-1-0-footnotes--inverted Inverts the footnote text.
|
7
7
|
*/
|
8
8
|
|
9
|
-
.sd-1-
|
9
|
+
.sd-1-1-0-footnotes {
|
10
10
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
11
11
|
margin-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
12
12
|
padding: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
@@ -16,13 +16,13 @@
|
|
16
16
|
color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
|
17
17
|
}
|
18
18
|
|
19
|
-
.sd-1-
|
19
|
+
.sd-1-1-0-footnotes:is(ol) li {
|
20
20
|
counter-increment: list-item;
|
21
21
|
display: flex;
|
22
22
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
23
23
|
}
|
24
24
|
|
25
|
-
.sd-1-
|
25
|
+
.sd-1-1-0-footnotes:is(ol) li::before {
|
26
26
|
width: var(--sd-spacing-5, 1.25rem) /* 20px */;
|
27
27
|
flex-shrink: 0;
|
28
28
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
@@ -31,11 +31,11 @@
|
|
31
31
|
font-size: 10px;
|
32
32
|
}
|
33
33
|
|
34
|
-
.sd-1-
|
34
|
+
.sd-1-1-0-footnotes:is(ul) {
|
35
35
|
list-style: '';
|
36
36
|
}
|
37
37
|
|
38
|
-
.sd-1-
|
38
|
+
.sd-1-1-0-footnotes--inverted {
|
39
39
|
|
40
40
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
41
41
|
Used for inverted pressed interaction text link */;
|
@@ -1,15 +1,15 @@
|
|
1
1
|
/**
|
2
2
|
* Headlines are vital for displaying content hierarchy and to improve accessibility. A headline can be additionally accompanied by an icon. The icon can be displayed on the left side or inline.
|
3
|
-
* @name sd-1-
|
3
|
+
* @name sd-1-1-0-headline
|
4
4
|
* @status stable
|
5
5
|
* @since 1.16
|
6
|
-
* @variant { 3xl | xl | lg | base } sd-1-
|
7
|
-
* @boolean sd-1-
|
8
|
-
* @boolean sd-1-
|
6
|
+
* @variant { 3xl | xl | lg | base } sd-1-1-0-headline--size-... The headline's size.
|
7
|
+
* @boolean sd-1-1-0-headline--inverted Inverts the headline text.
|
8
|
+
* @boolean sd-1-1-0-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
|
9
9
|
*/
|
10
10
|
|
11
|
-
.sd-1-
|
12
|
-
.sd-1-
|
11
|
+
.sd-1-1-0-headline,
|
12
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5) {
|
13
13
|
|
14
14
|
display: flex;
|
15
15
|
|
@@ -20,7 +20,7 @@
|
|
20
20
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */
|
21
21
|
}
|
22
22
|
|
23
|
-
.sd-1-
|
23
|
+
.sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
24
24
|
|
25
25
|
flex-shrink: 0;
|
26
26
|
|
@@ -33,16 +33,16 @@
|
|
33
33
|
|
34
34
|
@media (min-width: 640px) {
|
35
35
|
|
36
|
-
.sd-1-
|
36
|
+
.sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
37
37
|
|
38
38
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */
|
39
39
|
}
|
40
40
|
}
|
41
41
|
|
42
|
-
.sd-1-
|
43
|
-
.sd-1-
|
44
|
-
.sd-1-
|
45
|
-
.sd-1-
|
42
|
+
.sd-1-1-0-headline.sd-1-1-0-headline,
|
43
|
+
.sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline),
|
44
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline,
|
45
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) {
|
46
46
|
|
47
47
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
48
48
|
|
@@ -53,32 +53,32 @@
|
|
53
53
|
|
54
54
|
@media (min-width: 640px) {
|
55
55
|
|
56
|
-
.sd-1-
|
57
|
-
.sd-1-
|
58
|
-
.sd-1-
|
59
|
-
.sd-1-
|
56
|
+
.sd-1-1-0-headline.sd-1-1-0-headline,
|
57
|
+
.sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline),
|
58
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline,
|
59
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) {
|
60
60
|
|
61
61
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
|
62
62
|
}
|
63
63
|
}
|
64
64
|
|
65
|
-
.sd-1-
|
65
|
+
.sd-1-1-0-headline.sd-1-1-0-headline sd-icon, .sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) sd-icon {
|
66
66
|
|
67
67
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
|
68
68
|
}
|
69
69
|
|
70
70
|
@media (min-width: 640px) {
|
71
71
|
|
72
|
-
.sd-1-
|
72
|
+
.sd-1-1-0-headline.sd-1-1-0-headline sd-icon, .sd-1-1-0-headline:is(h1):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-1-0-headline) sd-icon {
|
73
73
|
|
74
74
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
|
75
75
|
}
|
76
76
|
}
|
77
77
|
|
78
|
-
.sd-1-
|
79
|
-
.sd-1-
|
80
|
-
.sd-1-
|
81
|
-
.sd-1-
|
78
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-3xl,
|
79
|
+
.sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline),
|
80
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl,
|
81
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) {
|
82
82
|
|
83
83
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
84
84
|
|
@@ -89,36 +89,36 @@
|
|
89
89
|
|
90
90
|
@media (min-width: 640px) {
|
91
91
|
|
92
|
-
.sd-1-
|
93
|
-
.sd-1-
|
94
|
-
.sd-1-
|
95
|
-
.sd-1-
|
92
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-3xl,
|
93
|
+
.sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline),
|
94
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl,
|
95
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) {
|
96
96
|
|
97
97
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
|
98
98
|
}
|
99
99
|
}
|
100
100
|
|
101
|
-
.sd-1-
|
101
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) sd-icon {
|
102
102
|
|
103
103
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
|
104
104
|
}
|
105
105
|
|
106
106
|
@media (min-width: 640px) {
|
107
107
|
|
108
|
-
.sd-1-
|
108
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-headline:is(h2):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-3xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-1-0-headline) sd-icon {
|
109
109
|
|
110
110
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
|
111
111
|
}
|
112
112
|
}
|
113
113
|
|
114
|
-
.sd-1-
|
115
|
-
.sd-1-
|
116
|
-
.sd-1-
|
117
|
-
.sd-1-
|
118
|
-
.sd-1-
|
119
|
-
.sd-1-
|
120
|
-
.sd-1-
|
121
|
-
.sd-1-
|
114
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-xl,
|
115
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-lg,
|
116
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-base,
|
117
|
+
.sd-1-1-0-headline:is(h3, h4, h5):not(.sd-1-1-0-headline),
|
118
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl,
|
119
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg,
|
120
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base,
|
121
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-1-0-headline) {
|
122
122
|
|
123
123
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
124
124
|
|
@@ -127,87 +127,87 @@
|
|
127
127
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
128
128
|
}
|
129
129
|
|
130
|
-
.sd-1-
|
130
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-headline.sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-headline.sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-headline:is(h3, h4, h5):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-1-0-headline) sd-icon {
|
131
131
|
|
132
132
|
font-size: 2rem
|
133
133
|
}
|
134
134
|
|
135
|
-
.sd-1-
|
136
|
-
.sd-1-
|
137
|
-
.sd-1-
|
138
|
-
.sd-1-
|
135
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-xl,
|
136
|
+
.sd-1-1-0-headline:is(h3):not(.sd-1-1-0-headline),
|
137
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl,
|
138
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-1-0-headline) {
|
139
139
|
|
140
140
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */
|
141
141
|
}
|
142
142
|
|
143
|
-
.sd-1-
|
143
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-headline:is(h3):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-1-0-headline) sd-icon {
|
144
144
|
|
145
145
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
|
146
146
|
}
|
147
147
|
|
148
148
|
@media (min-width: 640px) {
|
149
149
|
|
150
|
-
.sd-1-
|
150
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-headline:is(h3):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-xl sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-1-0-headline) sd-icon {
|
151
151
|
|
152
152
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */
|
153
153
|
}
|
154
154
|
}
|
155
155
|
|
156
|
-
.sd-1-
|
157
|
-
.sd-1-
|
158
|
-
.sd-1-
|
159
|
-
.sd-1-
|
160
|
-
.sd-1-
|
161
|
-
.sd-1-
|
156
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-lg,
|
157
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-base,
|
158
|
+
.sd-1-1-0-headline:is(h4, h5):not(.sd-1-1-0-headline),
|
159
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg,
|
160
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base,
|
161
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-1-0-headline) {
|
162
162
|
|
163
163
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */
|
164
164
|
}
|
165
165
|
|
166
|
-
.sd-1-
|
167
|
-
.sd-1-
|
168
|
-
.sd-1-
|
169
|
-
.sd-1-
|
166
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-lg,
|
167
|
+
.sd-1-1-0-headline:is(h4),
|
168
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg,
|
169
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4) {
|
170
170
|
|
171
171
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */
|
172
172
|
}
|
173
173
|
|
174
|
-
.sd-1-
|
174
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-headline:is(h4) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
175
175
|
|
176
176
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
|
177
177
|
}
|
178
178
|
|
179
179
|
@media (min-width: 640px) {
|
180
180
|
|
181
|
-
.sd-1-
|
181
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-headline:is(h4) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-lg sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
182
182
|
|
183
183
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */
|
184
184
|
}
|
185
185
|
}
|
186
186
|
|
187
|
-
.sd-1-
|
188
|
-
.sd-1-
|
189
|
-
.sd-1-
|
190
|
-
.sd-1-
|
187
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-base,
|
188
|
+
.sd-1-1-0-headline:is(h5):not(.sd-1-1-0-headline),
|
189
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base,
|
190
|
+
.sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-1-0-headline) {
|
191
191
|
|
192
192
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */
|
193
193
|
}
|
194
194
|
|
195
|
-
.sd-1-
|
195
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-headline:is(h5):not(.sd-1-1-0-headline) sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base sd-icon, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-1-0-headline) sd-icon {
|
196
196
|
|
197
197
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1)
|
198
198
|
}
|
199
199
|
|
200
|
-
.sd-1-
|
200
|
+
.sd-1-1-0-headline.sd-1-1-0-headline--size-base mark, .sd-1-1-0-headline:is(h5):not(.sd-1-1-0-headline) mark, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5).sd-1-1-0-headline--size-base mark, .sd-1-1-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-1-0-headline) mark {
|
201
201
|
|
202
202
|
color: inherit
|
203
203
|
}
|
204
204
|
|
205
|
-
.sd-1-
|
205
|
+
.sd-1-1-0-headline--inline {
|
206
206
|
|
207
207
|
display: inline-block
|
208
208
|
}
|
209
209
|
|
210
|
-
.sd-1-
|
210
|
+
.sd-1-1-0-headline--inline sd-icon {
|
211
211
|
|
212
212
|
margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
213
213
|
|
@@ -216,20 +216,20 @@
|
|
216
216
|
vertical-align: middle
|
217
217
|
}
|
218
218
|
|
219
|
-
.sd-1-
|
219
|
+
.sd-1-1-0-headline--inline:is(.sd-1-1-0-headline--size-xl, .sd-1-1-0-headline--size-lg, .sd-1-1-0-headline--size-base) sd-icon {
|
220
220
|
|
221
221
|
margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */
|
222
222
|
}
|
223
223
|
|
224
|
-
.sd-1-
|
225
|
-
.sd-1-
|
224
|
+
.sd-1-1-0-headline--inverted:not(#_),
|
225
|
+
.sd-1-1-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-1-0-headline):not(#_) {
|
226
226
|
|
227
227
|
|
228
228
|
|
229
229
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */
|
230
230
|
}
|
231
231
|
|
232
|
-
.sd-1-
|
232
|
+
.sd-1-1-0-headline--inverted:not(#_) sd-icon, .sd-1-1-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-1-0-headline):not(#_) sd-icon {
|
233
233
|
|
234
234
|
|
235
235
|
|
@@ -1,10 +1,10 @@
|
|
1
1
|
/**
|
2
2
|
* Hidden links can be used to show links only for keyboard users.
|
3
|
-
* @name sd-1-
|
3
|
+
* @name sd-1-1-0-hidden-links
|
4
4
|
* @status stable
|
5
5
|
* @since 3.15.0
|
6
|
-
* @boolean sd-1-
|
7
|
-
* @boolean sd-1-
|
6
|
+
* @boolean sd-1-1-0-hidden-links--multiple Adapts styling for multiple skip links.
|
7
|
+
* @boolean sd-1-1-0-hidden-links--debug Always show the links for debugging purposes.
|
8
8
|
*/
|
9
9
|
|
10
10
|
:lang(en) {
|
@@ -15,7 +15,7 @@
|
|
15
15
|
--sd-hidden-links-title: 'Springe zu';
|
16
16
|
}
|
17
17
|
|
18
|
-
.sd-1-
|
18
|
+
.sd-1-1-0-hidden-links:not(:focus-within):not(.sd-1-1-0-hidden-links--debug) {
|
19
19
|
position: absolute;
|
20
20
|
width: 1px;
|
21
21
|
height: 1px;
|
@@ -27,13 +27,13 @@
|
|
27
27
|
border-width: 0;
|
28
28
|
}
|
29
29
|
|
30
|
-
.sd-1-
|
30
|
+
.sd-1-1-0-hidden-links {
|
31
31
|
position: absolute;
|
32
32
|
top: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
33
33
|
left: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
34
34
|
}
|
35
35
|
|
36
|
-
.sd-1-
|
36
|
+
.sd-1-1-0-hidden-links--multiple {
|
37
37
|
display: flex;
|
38
38
|
flex-direction: column;
|
39
39
|
|
@@ -47,7 +47,7 @@
|
|
47
47
|
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
48
48
|
}
|
49
49
|
|
50
|
-
.sd-1-
|
50
|
+
.sd-1-1-0-hidden-links--multiple:before {
|
51
51
|
padding-left: var(--sd-spacing-4, 1rem) /* 16px */;
|
52
52
|
padding-right: var(--sd-spacing-4, 1rem) /* 16px */;
|
53
53
|
padding-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
@@ -1,20 +1,20 @@
|
|
1
1
|
/**
|
2
2
|
* Generates basic styles for interactive elements.
|
3
|
-
* @name sd-1-
|
3
|
+
* @name sd-1-1-0-interactive
|
4
4
|
* @status stable
|
5
5
|
* @since 1.11
|
6
|
-
* @boolean sd-1-
|
7
|
-
* @boolean sd-1-
|
8
|
-
* @boolean sd-1-
|
6
|
+
* @boolean sd-1-1-0-interactive--disabled Makes an element look disabled.
|
7
|
+
* @boolean sd-1-1-0-interactive--inverted Inverts the colors of an element.
|
8
|
+
* @boolean sd-1-1-0-interactive--reset Resets the default browser styles of e.g., a button.
|
9
9
|
*/
|
10
10
|
|
11
|
-
.sd-1-
|
11
|
+
.sd-1-1-0-prose a--reset, .sd-1-1-0-interactive--reset {
|
12
12
|
all: unset;
|
13
13
|
outline: revert;
|
14
14
|
}
|
15
15
|
|
16
|
-
.sd-1-
|
17
|
-
.sd-1-
|
16
|
+
.sd-1-1-0-prose a,
|
17
|
+
.sd-1-1-0-interactive {
|
18
18
|
cursor: pointer;
|
19
19
|
|
20
20
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
@@ -24,80 +24,80 @@
|
|
24
24
|
transition-duration: 150ms;
|
25
25
|
}
|
26
26
|
|
27
|
-
.sd-1-
|
28
|
-
.sd-1-
|
27
|
+
.sd-1-1-0-prose a:hover:not([disabled]),
|
28
|
+
.sd-1-1-0-interactive:hover:not([disabled]) {
|
29
29
|
|
30
30
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
31
31
|
}
|
32
32
|
|
33
|
-
.sd-1-
|
34
|
-
.sd-1-
|
33
|
+
.sd-1-1-0-prose a:active:not([disabled]),
|
34
|
+
.sd-1-1-0-interactive:active:not([disabled]) {
|
35
35
|
|
36
36
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
37
37
|
}
|
38
38
|
|
39
|
-
.sd-1-
|
39
|
+
.sd-1-1-0-prose a:is(.sd-1-1-0-interactive), .sd-1-1-0-interactive:is(.sd-1-1-0-interactive) {
|
40
40
|
text-decoration-line: none;
|
41
41
|
}
|
42
42
|
|
43
|
-
.sd-1-
|
43
|
+
.sd-1-1-0-prose a:focus-visible, .sd-1-1-0-interactive:focus-visible {
|
44
44
|
outline-style: solid;
|
45
45
|
outline-width: 2px;
|
46
46
|
outline-offset: 2px;
|
47
47
|
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
48
48
|
}
|
49
49
|
|
50
|
-
.sd-1-
|
51
|
-
.sd-1-
|
52
|
-
.sd-1-
|
53
|
-
.sd-1-
|
54
|
-
.sd-1-
|
55
|
-
.sd-1-
|
50
|
+
.sd-1-1-0-prose a--disabled,
|
51
|
+
.sd-1-1-0-prose a[disabled],
|
52
|
+
.sd-1-1-0-prose a[href=''],
|
53
|
+
.sd-1-1-0-interactive--disabled,
|
54
|
+
.sd-1-1-0-interactive[disabled],
|
55
|
+
.sd-1-1-0-interactive[href=''] {
|
56
56
|
cursor: not-allowed;
|
57
57
|
|
58
58
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
59
59
|
}
|
60
60
|
|
61
|
-
.sd-1-
|
62
|
-
.sd-1-
|
63
|
-
.sd-1-
|
64
|
-
.sd-1-
|
65
|
-
.sd-1-
|
66
|
-
.sd-1-
|
61
|
+
.sd-1-1-0-prose a--disabled:hover:not([disabled]),
|
62
|
+
.sd-1-1-0-prose a[disabled]:hover:not([disabled]),
|
63
|
+
.sd-1-1-0-prose a[href='']:hover:not([disabled]),
|
64
|
+
.sd-1-1-0-interactive--disabled:hover:not([disabled]),
|
65
|
+
.sd-1-1-0-interactive[disabled]:hover:not([disabled]),
|
66
|
+
.sd-1-1-0-interactive[href='']:hover:not([disabled]) {
|
67
67
|
|
68
68
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
69
69
|
}
|
70
70
|
|
71
|
-
.sd-1-
|
72
|
-
.sd-1-
|
73
|
-
.sd-1-
|
74
|
-
.sd-1-
|
75
|
-
.sd-1-
|
76
|
-
.sd-1-
|
71
|
+
.sd-1-1-0-prose a--disabled:active:not([disabled]),
|
72
|
+
.sd-1-1-0-prose a[disabled]:active:not([disabled]),
|
73
|
+
.sd-1-1-0-prose a[href='']:active:not([disabled]),
|
74
|
+
.sd-1-1-0-interactive--disabled:active:not([disabled]),
|
75
|
+
.sd-1-1-0-interactive[disabled]:active:not([disabled]),
|
76
|
+
.sd-1-1-0-interactive[href='']:active:not([disabled]) {
|
77
77
|
|
78
78
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
79
79
|
}
|
80
80
|
|
81
|
-
.sd-1-
|
82
|
-
.sd-1-
|
81
|
+
.sd-1-1-0-prose--inverted a,
|
82
|
+
.sd-1-1-0-interactive--inverted {
|
83
83
|
|
84
84
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
85
85
|
}
|
86
86
|
|
87
|
-
.sd-1-
|
88
|
-
.sd-1-
|
87
|
+
.sd-1-1-0-prose--inverted a:hover:not([disabled]),
|
88
|
+
.sd-1-1-0-interactive--inverted:hover:not([disabled]) {
|
89
89
|
|
90
90
|
color: rgb(var(--sd-color-primary-200, 224 233 243) / var(--tw-text-opacity, 1)) /* Used for inverted hover interaction text link and inverted pressed interaction button label */;
|
91
91
|
}
|
92
92
|
|
93
|
-
.sd-1-
|
94
|
-
.sd-1-
|
93
|
+
.sd-1-1-0-prose--inverted a:active:not([disabled]),
|
94
|
+
.sd-1-1-0-interactive--inverted:active:not([disabled]) {
|
95
95
|
|
96
96
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
97
97
|
Used for inverted pressed interaction text link */;
|
98
98
|
}
|
99
99
|
|
100
|
-
.sd-1-
|
100
|
+
.sd-1-1-0-prose--inverted a:focus-visible, .sd-1-1-0-interactive--inverted:focus-visible {
|
101
101
|
outline-style: solid;
|
102
102
|
outline-width: 2px;
|
103
103
|
outline-offset: 2px;
|
@@ -1,14 +1,14 @@
|
|
1
1
|
/**
|
2
2
|
* Leadtext is used for text that should be highlighted and a focal point of the page.
|
3
|
-
* @name sd-1-
|
3
|
+
* @name sd-1-1-0-leadtext
|
4
4
|
* @status stable
|
5
5
|
* @since 1.7
|
6
|
-
* @variant { lg } sd-1-
|
7
|
-
* @boolean sd-1-
|
6
|
+
* @variant { lg } sd-1-1-0-leadtext--size-... The leadtext's size.
|
7
|
+
* @boolean sd-1-1-0-leadtext--inverted Inverts the leadtext text.
|
8
8
|
*/
|
9
9
|
|
10
|
-
.sd-1-
|
11
|
-
.sd-1-
|
10
|
+
.sd-1-1-0-prose > .sd-1-1-0-leadtext,
|
11
|
+
.sd-1-1-0-leadtext {
|
12
12
|
|
13
13
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
14
14
|
|
@@ -21,7 +21,7 @@
|
|
21
21
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
22
22
|
}
|
23
23
|
|
24
|
-
.sd-1-
|
24
|
+
.sd-1-1-0-prose > .sd-1-1-0-leadtext--size-lg, .sd-1-1-0-leadtext--size-lg {
|
25
25
|
|
26
26
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
27
27
|
|
@@ -34,8 +34,8 @@
|
|
34
34
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
35
35
|
}
|
36
36
|
|
37
|
-
.sd-1-
|
38
|
-
.sd-1-
|
37
|
+
.sd-1-1-0-prose--inverted > .sd-1-1-0-leadtext,
|
38
|
+
.sd-1-1-0-leadtext--inverted {
|
39
39
|
|
40
40
|
|
41
41
|
|