@solid-design-system/styles 1.0.0 → 1.0.1
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 +6 -0
- 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/table-cell.css +1 -1
- package/cdn-versioned/modules/table.css +1 -1
- package/cdn-versioned/solid-styles.css +1 -1
- 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/table-cell.css +23 -23
- package/dist-versioned/modules/table.css +4 -4
- package/dist-versioned/solid-styles.css +327 -327
- package/package.json +5 -5
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Prose
|
|
3
|
-
* @name sd-1-0-
|
|
3
|
+
* @name sd-1-0-1-prose
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 3.6.0
|
|
6
|
-
* @boolean sd-1-0-
|
|
7
|
-
* @boolean sd-1-0-
|
|
6
|
+
* @boolean sd-1-0-1-prose--inverted Inverts the content, but not tables.
|
|
7
|
+
* @boolean sd-1-0-1-prose--full-width Overrides the 80ch max-width and makes the prose full width.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* Display provides larger text sizes that are not used as headlines. The different sizes allow for a more versatile styling of text elements. Display text should not be used as substitute for headlines.
|
|
12
|
-
* @name sd-1-0-
|
|
12
|
+
* @name sd-1-0-1-display
|
|
13
13
|
* @status stable
|
|
14
14
|
* @since 1.7
|
|
15
|
-
* @variant { xl | 3xl } sd-1-0-
|
|
16
|
-
* @boolean sd-1-0-
|
|
15
|
+
* @variant { xl | 3xl } sd-1-0-1-display--size-... The display's size.
|
|
16
|
+
* @boolean sd-1-0-1-display--inverted Inverts the display text.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
.sd-1-0-
|
|
19
|
+
.sd-1-0-1-display {
|
|
20
20
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
21
21
|
font-weight: 400;
|
|
22
22
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
|
|
27
27
|
@media (min-width: 1024px) {
|
|
28
28
|
|
|
29
|
-
.sd-1-0-
|
|
29
|
+
.sd-1-0-1-display {
|
|
30
30
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.sd-1-0-
|
|
34
|
+
.sd-1-0-1-display--size-xl {
|
|
35
35
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
36
36
|
font-weight: 400;
|
|
37
37
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
.sd-1-0-
|
|
42
|
+
.sd-1-0-1-display--size-3xl {
|
|
43
43
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
44
44
|
font-weight: 400;
|
|
45
45
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -49,35 +49,35 @@
|
|
|
49
49
|
|
|
50
50
|
@media (min-width: 1024px) {
|
|
51
51
|
|
|
52
|
-
.sd-1-0-
|
|
52
|
+
.sd-1-0-1-display--size-3xl {
|
|
53
53
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
.sd-1-0-
|
|
57
|
+
.sd-1-0-1-display--inverted {
|
|
58
58
|
|
|
59
59
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
/**
|
|
63
63
|
* 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.
|
|
64
|
-
* @name sd-1-0-
|
|
64
|
+
* @name sd-1-0-1-headline
|
|
65
65
|
* @status stable
|
|
66
66
|
* @since 1.16
|
|
67
|
-
* @variant { 3xl | xl | lg | base } sd-1-0-
|
|
68
|
-
* @boolean sd-1-0-
|
|
69
|
-
* @boolean sd-1-0-
|
|
67
|
+
* @variant { 3xl | xl | lg | base } sd-1-0-1-headline--size-... The headline's size.
|
|
68
|
+
* @boolean sd-1-0-1-headline--inverted Inverts the headline text.
|
|
69
|
+
* @boolean sd-1-0-1-headline--inline Sets inline behavior. Used exclusively when an sd-icon or other component is present. See usage <a href="#inline">here.</a>
|
|
70
70
|
*/
|
|
71
71
|
|
|
72
|
-
.sd-1-0-
|
|
73
|
-
.sd-1-0-
|
|
72
|
+
.sd-1-0-1-headline,
|
|
73
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5) {
|
|
74
74
|
display: flex;
|
|
75
75
|
font-weight: 700;
|
|
76
76
|
|
|
77
77
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
.sd-1-0-
|
|
80
|
+
.sd-1-0-1-headline sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
|
81
81
|
flex-shrink: 0;
|
|
82
82
|
font-size: 3rem;
|
|
83
83
|
|
|
@@ -86,15 +86,15 @@
|
|
|
86
86
|
|
|
87
87
|
@media (min-width: 640px) {
|
|
88
88
|
|
|
89
|
-
.sd-1-0-
|
|
89
|
+
.sd-1-0-1-headline sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5) sd-icon {
|
|
90
90
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
91
91
|
}
|
|
92
92
|
}
|
|
93
93
|
|
|
94
|
-
.sd-1-0-
|
|
95
|
-
.sd-1-0-
|
|
96
|
-
.sd-1-0-
|
|
97
|
-
.sd-1-0-
|
|
94
|
+
.sd-1-0-1-headline.sd-1-0-1-headline,
|
|
95
|
+
.sd-1-0-1-headline:is(h1):not(.sd-1-0-1-headline),
|
|
96
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline,
|
|
97
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-1-headline) {
|
|
98
98
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
99
99
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
100
100
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -102,29 +102,29 @@
|
|
|
102
102
|
|
|
103
103
|
@media (min-width: 640px) {
|
|
104
104
|
|
|
105
|
-
.sd-1-0-
|
|
106
|
-
.sd-1-0-
|
|
107
|
-
.sd-1-0-
|
|
108
|
-
.sd-1-0-
|
|
105
|
+
.sd-1-0-1-headline.sd-1-0-1-headline,
|
|
106
|
+
.sd-1-0-1-headline:is(h1):not(.sd-1-0-1-headline),
|
|
107
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline,
|
|
108
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-1-headline) {
|
|
109
109
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */;
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
|
|
113
|
-
.sd-1-0-
|
|
113
|
+
.sd-1-0-1-headline.sd-1-0-1-headline sd-icon, .sd-1-0-1-headline:is(h1):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-1-headline) sd-icon {
|
|
114
114
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
115
115
|
}
|
|
116
116
|
|
|
117
117
|
@media (min-width: 640px) {
|
|
118
118
|
|
|
119
|
-
.sd-1-0-
|
|
119
|
+
.sd-1-0-1-headline.sd-1-0-1-headline sd-icon, .sd-1-0-1-headline:is(h1):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-0-1-headline) sd-icon {
|
|
120
120
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
.sd-1-0-
|
|
125
|
-
.sd-1-0-
|
|
126
|
-
.sd-1-0-
|
|
127
|
-
.sd-1-0-
|
|
124
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-3xl,
|
|
125
|
+
.sd-1-0-1-headline:is(h2):not(.sd-1-0-1-headline),
|
|
126
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-3xl,
|
|
127
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-1-headline) {
|
|
128
128
|
gap: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
129
129
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
130
130
|
line-height: var(--sd-line-height-tight, 120%) /* Used for display and large titles */;
|
|
@@ -132,144 +132,144 @@
|
|
|
132
132
|
|
|
133
133
|
@media (min-width: 640px) {
|
|
134
134
|
|
|
135
|
-
.sd-1-0-
|
|
136
|
-
.sd-1-0-
|
|
137
|
-
.sd-1-0-
|
|
138
|
-
.sd-1-0-
|
|
135
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-3xl,
|
|
136
|
+
.sd-1-0-1-headline:is(h2):not(.sd-1-0-1-headline),
|
|
137
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-3xl,
|
|
138
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-1-headline) {
|
|
139
139
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
-
.sd-1-0-
|
|
143
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-3xl sd-icon, .sd-1-0-1-headline:is(h2):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-3xl sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-1-headline) sd-icon {
|
|
144
144
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
@media (min-width: 640px) {
|
|
148
148
|
|
|
149
|
-
.sd-1-0-
|
|
149
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-3xl sd-icon, .sd-1-0-1-headline:is(h2):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-3xl sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-0-1-headline) sd-icon {
|
|
150
150
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
151
151
|
}
|
|
152
152
|
}
|
|
153
153
|
|
|
154
|
-
.sd-1-0-
|
|
155
|
-
.sd-1-0-
|
|
156
|
-
.sd-1-0-
|
|
157
|
-
.sd-1-0-
|
|
158
|
-
.sd-1-0-
|
|
159
|
-
.sd-1-0-
|
|
160
|
-
.sd-1-0-
|
|
161
|
-
.sd-1-0-
|
|
154
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-xl,
|
|
155
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-lg,
|
|
156
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-base,
|
|
157
|
+
.sd-1-0-1-headline:is(h3, h4, h5):not(.sd-1-0-1-headline),
|
|
158
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-xl,
|
|
159
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-lg,
|
|
160
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-base,
|
|
161
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-0-1-headline) {
|
|
162
162
|
gap: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
163
163
|
|
|
164
164
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
165
165
|
}
|
|
166
166
|
|
|
167
|
-
.sd-1-0-
|
|
167
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-xl sd-icon, .sd-1-0-1-headline.sd-1-0-1-headline--size-lg sd-icon, .sd-1-0-1-headline.sd-1-0-1-headline--size-base sd-icon, .sd-1-0-1-headline:is(h3, h4, h5):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-xl sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-lg sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-base sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-0-1-headline) sd-icon {
|
|
168
168
|
font-size: 2rem;
|
|
169
169
|
}
|
|
170
170
|
|
|
171
|
-
.sd-1-0-
|
|
172
|
-
.sd-1-0-
|
|
173
|
-
.sd-1-0-
|
|
174
|
-
.sd-1-0-
|
|
171
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-xl,
|
|
172
|
+
.sd-1-0-1-headline:is(h3):not(.sd-1-0-1-headline),
|
|
173
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-xl,
|
|
174
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-0-1-headline) {
|
|
175
175
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
|
-
.sd-1-0-
|
|
178
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-xl sd-icon, .sd-1-0-1-headline:is(h3):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-xl sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-0-1-headline) sd-icon {
|
|
179
179
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
@media (min-width: 640px) {
|
|
183
183
|
|
|
184
|
-
.sd-1-0-
|
|
184
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-xl sd-icon, .sd-1-0-1-headline:is(h3):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-xl sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-0-1-headline) sd-icon {
|
|
185
185
|
margin-top: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
186
186
|
}
|
|
187
187
|
}
|
|
188
188
|
|
|
189
|
-
.sd-1-0-
|
|
190
|
-
.sd-1-0-
|
|
191
|
-
.sd-1-0-
|
|
192
|
-
.sd-1-0-
|
|
193
|
-
.sd-1-0-
|
|
194
|
-
.sd-1-0-
|
|
189
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-lg,
|
|
190
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-base,
|
|
191
|
+
.sd-1-0-1-headline:is(h4, h5):not(.sd-1-0-1-headline),
|
|
192
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-lg,
|
|
193
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-base,
|
|
194
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-0-1-headline) {
|
|
195
195
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
.sd-1-0-
|
|
199
|
-
.sd-1-0-
|
|
200
|
-
.sd-1-0-
|
|
201
|
-
.sd-1-0-
|
|
198
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-lg,
|
|
199
|
+
.sd-1-0-1-headline:is(h4),
|
|
200
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-lg,
|
|
201
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h4) {
|
|
202
202
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
.sd-1-0-
|
|
205
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-lg sd-icon, .sd-1-0-1-headline:is(h4) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-lg sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
|
206
206
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
207
207
|
}
|
|
208
208
|
|
|
209
209
|
@media (min-width: 640px) {
|
|
210
210
|
|
|
211
|
-
.sd-1-0-
|
|
211
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-lg sd-icon, .sd-1-0-1-headline:is(h4) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-lg sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h4) sd-icon {
|
|
212
212
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
213
213
|
}
|
|
214
214
|
}
|
|
215
215
|
|
|
216
|
-
.sd-1-0-
|
|
217
|
-
.sd-1-0-
|
|
218
|
-
.sd-1-0-
|
|
219
|
-
.sd-1-0-
|
|
216
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-base,
|
|
217
|
+
.sd-1-0-1-headline:is(h5):not(.sd-1-0-1-headline),
|
|
218
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-base,
|
|
219
|
+
.sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-0-1-headline) {
|
|
220
220
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
221
221
|
}
|
|
222
222
|
|
|
223
|
-
.sd-1-0-
|
|
223
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-base sd-icon, .sd-1-0-1-headline:is(h5):not(.sd-1-0-1-headline) sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-base sd-icon, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-0-1-headline) sd-icon {
|
|
224
224
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
225
225
|
}
|
|
226
226
|
|
|
227
|
-
.sd-1-0-
|
|
227
|
+
.sd-1-0-1-headline.sd-1-0-1-headline--size-base mark, .sd-1-0-1-headline:is(h5):not(.sd-1-0-1-headline) mark, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5).sd-1-0-1-headline--size-base mark, .sd-1-0-1-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-0-1-headline) mark {
|
|
228
228
|
color: inherit;
|
|
229
229
|
}
|
|
230
230
|
|
|
231
|
-
.sd-1-0-
|
|
231
|
+
.sd-1-0-1-headline--inline {
|
|
232
232
|
display: inline-block;
|
|
233
233
|
}
|
|
234
234
|
|
|
235
|
-
.sd-1-0-
|
|
235
|
+
.sd-1-0-1-headline--inline sd-icon {
|
|
236
236
|
margin-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
237
237
|
margin-top: calc(var(--sd-spacing-1, 0.25rem) /* 4px */ * -1);
|
|
238
238
|
vertical-align: middle;
|
|
239
239
|
}
|
|
240
240
|
|
|
241
|
-
.sd-1-0-
|
|
241
|
+
.sd-1-0-1-headline--inline:is(.sd-1-0-1-headline--size-xl, .sd-1-0-1-headline--size-lg, .sd-1-0-1-headline--size-base) sd-icon {
|
|
242
242
|
margin-right: var(--sd-spacing-0-5, 0.125rem) /* 2px */;
|
|
243
243
|
}
|
|
244
244
|
|
|
245
|
-
.sd-1-0-
|
|
246
|
-
.sd-1-0-
|
|
245
|
+
.sd-1-0-1-headline--inverted:not(#_),
|
|
246
|
+
.sd-1-0-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-0-1-headline):not(#_) {
|
|
247
247
|
|
|
248
248
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
249
249
|
}
|
|
250
250
|
|
|
251
|
-
.sd-1-0-
|
|
251
|
+
.sd-1-0-1-headline--inverted:not(#_) sd-icon, .sd-1-0-1-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-0-1-headline):not(#_) sd-icon {
|
|
252
252
|
|
|
253
253
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
254
254
|
}
|
|
255
255
|
|
|
256
256
|
/**
|
|
257
257
|
* Generates basic styles for interactive elements.
|
|
258
|
-
* @name sd-1-0-
|
|
258
|
+
* @name sd-1-0-1-interactive
|
|
259
259
|
* @status stable
|
|
260
260
|
* @since 1.11
|
|
261
|
-
* @boolean sd-1-0-
|
|
262
|
-
* @boolean sd-1-0-
|
|
263
|
-
* @boolean sd-1-0-
|
|
261
|
+
* @boolean sd-1-0-1-interactive--disabled Makes an element look disabled.
|
|
262
|
+
* @boolean sd-1-0-1-interactive--inverted Inverts the colors of an element.
|
|
263
|
+
* @boolean sd-1-0-1-interactive--reset Resets the default browser styles of e.g., a button.
|
|
264
264
|
*/
|
|
265
265
|
|
|
266
|
-
.sd-1-0-
|
|
266
|
+
.sd-1-0-1-prose a--reset, .sd-1-0-1-interactive--reset {
|
|
267
267
|
all: unset;
|
|
268
268
|
outline: revert;
|
|
269
269
|
}
|
|
270
270
|
|
|
271
|
-
.sd-1-0-
|
|
272
|
-
.sd-1-0-
|
|
271
|
+
.sd-1-0-1-prose a,
|
|
272
|
+
.sd-1-0-1-interactive {
|
|
273
273
|
cursor: pointer;
|
|
274
274
|
|
|
275
275
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
@@ -279,80 +279,80 @@
|
|
|
279
279
|
transition-duration: 150ms;
|
|
280
280
|
}
|
|
281
281
|
|
|
282
|
-
.sd-1-0-
|
|
283
|
-
.sd-1-0-
|
|
282
|
+
.sd-1-0-1-prose a:hover:not([disabled]),
|
|
283
|
+
.sd-1-0-1-interactive:hover:not([disabled]) {
|
|
284
284
|
|
|
285
285
|
color: rgb(var(--sd-color-primary-500, 70 109 175) / var(--tw-text-opacity, 1)) /* Used for hover interaction */;
|
|
286
286
|
}
|
|
287
287
|
|
|
288
|
-
.sd-1-0-
|
|
289
|
-
.sd-1-0-
|
|
288
|
+
.sd-1-0-1-prose a:active:not([disabled]),
|
|
289
|
+
.sd-1-0-1-interactive:active:not([disabled]) {
|
|
290
290
|
|
|
291
291
|
color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-text-opacity, 1)) /* Used for pressed interaction */;
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
.sd-1-0-
|
|
294
|
+
.sd-1-0-1-prose a:is(.sd-1-0-1-interactive), .sd-1-0-1-interactive:is(.sd-1-0-1-interactive) {
|
|
295
295
|
text-decoration-line: none;
|
|
296
296
|
}
|
|
297
297
|
|
|
298
|
-
.sd-1-0-
|
|
298
|
+
.sd-1-0-1-prose a:focus-visible, .sd-1-0-1-interactive:focus-visible {
|
|
299
299
|
outline-style: solid;
|
|
300
300
|
outline-width: 2px;
|
|
301
301
|
outline-offset: 2px;
|
|
302
302
|
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
|
303
303
|
}
|
|
304
304
|
|
|
305
|
-
.sd-1-0-
|
|
306
|
-
.sd-1-0-
|
|
307
|
-
.sd-1-0-
|
|
308
|
-
.sd-1-0-
|
|
309
|
-
.sd-1-0-
|
|
310
|
-
.sd-1-0-
|
|
305
|
+
.sd-1-0-1-prose a--disabled,
|
|
306
|
+
.sd-1-0-1-prose a[disabled],
|
|
307
|
+
.sd-1-0-1-prose a[href=''],
|
|
308
|
+
.sd-1-0-1-interactive--disabled,
|
|
309
|
+
.sd-1-0-1-interactive[disabled],
|
|
310
|
+
.sd-1-0-1-interactive[href=''] {
|
|
311
311
|
cursor: not-allowed;
|
|
312
312
|
|
|
313
313
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
314
314
|
}
|
|
315
315
|
|
|
316
|
-
.sd-1-0-
|
|
317
|
-
.sd-1-0-
|
|
318
|
-
.sd-1-0-
|
|
319
|
-
.sd-1-0-
|
|
320
|
-
.sd-1-0-
|
|
321
|
-
.sd-1-0-
|
|
316
|
+
.sd-1-0-1-prose a--disabled:hover:not([disabled]),
|
|
317
|
+
.sd-1-0-1-prose a[disabled]:hover:not([disabled]),
|
|
318
|
+
.sd-1-0-1-prose a[href='']:hover:not([disabled]),
|
|
319
|
+
.sd-1-0-1-interactive--disabled:hover:not([disabled]),
|
|
320
|
+
.sd-1-0-1-interactive[disabled]:hover:not([disabled]),
|
|
321
|
+
.sd-1-0-1-interactive[href='']:hover:not([disabled]) {
|
|
322
322
|
|
|
323
323
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
324
324
|
}
|
|
325
325
|
|
|
326
|
-
.sd-1-0-
|
|
327
|
-
.sd-1-0-
|
|
328
|
-
.sd-1-0-
|
|
329
|
-
.sd-1-0-
|
|
330
|
-
.sd-1-0-
|
|
331
|
-
.sd-1-0-
|
|
326
|
+
.sd-1-0-1-prose a--disabled:active:not([disabled]),
|
|
327
|
+
.sd-1-0-1-prose a[disabled]:active:not([disabled]),
|
|
328
|
+
.sd-1-0-1-prose a[href='']:active:not([disabled]),
|
|
329
|
+
.sd-1-0-1-interactive--disabled:active:not([disabled]),
|
|
330
|
+
.sd-1-0-1-interactive[disabled]:active:not([disabled]),
|
|
331
|
+
.sd-1-0-1-interactive[href='']:active:not([disabled]) {
|
|
332
332
|
|
|
333
333
|
color: rgb(var(--sd-color-neutral-600, 136 136 136) / var(--tw-text-opacity, 1)) /* Used for inverted disabled state */;
|
|
334
334
|
}
|
|
335
335
|
|
|
336
|
-
.sd-1-0-
|
|
337
|
-
.sd-1-0-
|
|
336
|
+
.sd-1-0-1-prose--inverted a,
|
|
337
|
+
.sd-1-0-1-interactive--inverted {
|
|
338
338
|
|
|
339
339
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
340
340
|
}
|
|
341
341
|
|
|
342
|
-
.sd-1-0-
|
|
343
|
-
.sd-1-0-
|
|
342
|
+
.sd-1-0-1-prose--inverted a:hover:not([disabled]),
|
|
343
|
+
.sd-1-0-1-interactive--inverted:hover:not([disabled]) {
|
|
344
344
|
|
|
345
345
|
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 */;
|
|
346
346
|
}
|
|
347
347
|
|
|
348
|
-
.sd-1-0-
|
|
349
|
-
.sd-1-0-
|
|
348
|
+
.sd-1-0-1-prose--inverted a:active:not([disabled]),
|
|
349
|
+
.sd-1-0-1-interactive--inverted:active:not([disabled]) {
|
|
350
350
|
|
|
351
351
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
352
352
|
Used for inverted pressed interaction text link */;
|
|
353
353
|
}
|
|
354
354
|
|
|
355
|
-
.sd-1-0-
|
|
355
|
+
.sd-1-0-1-prose--inverted a:focus-visible, .sd-1-0-1-interactive--inverted:focus-visible {
|
|
356
356
|
outline-style: solid;
|
|
357
357
|
outline-width: 2px;
|
|
358
358
|
outline-offset: 2px;
|
|
@@ -361,15 +361,15 @@ Used for inverted pressed interaction text link */;
|
|
|
361
361
|
|
|
362
362
|
/**
|
|
363
363
|
* Leadtext is used for text that should be highlighted and a focal point of the page.
|
|
364
|
-
* @name sd-1-0-
|
|
364
|
+
* @name sd-1-0-1-leadtext
|
|
365
365
|
* @status stable
|
|
366
366
|
* @since 1.7
|
|
367
|
-
* @variant { lg } sd-1-0-
|
|
368
|
-
* @boolean sd-1-0-
|
|
367
|
+
* @variant { lg } sd-1-0-1-leadtext--size-... The leadtext's size.
|
|
368
|
+
* @boolean sd-1-0-1-leadtext--inverted Inverts the leadtext text.
|
|
369
369
|
*/
|
|
370
370
|
|
|
371
|
-
.sd-1-0-
|
|
372
|
-
.sd-1-0-
|
|
371
|
+
.sd-1-0-1-prose > .sd-1-0-1-leadtext,
|
|
372
|
+
.sd-1-0-1-leadtext {
|
|
373
373
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
374
374
|
font-weight: 400;
|
|
375
375
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -377,7 +377,7 @@ Used for inverted pressed interaction text link */;
|
|
|
377
377
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
378
378
|
}
|
|
379
379
|
|
|
380
|
-
.sd-1-0-
|
|
380
|
+
.sd-1-0-1-prose > .sd-1-0-1-leadtext--size-lg, .sd-1-0-1-leadtext--size-lg {
|
|
381
381
|
font-size: var(--sd-font-size-lg, 1.25rem) /* 20px */;
|
|
382
382
|
font-weight: 400;
|
|
383
383
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -385,111 +385,111 @@ Used for inverted pressed interaction text link */;
|
|
|
385
385
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
386
386
|
}
|
|
387
387
|
|
|
388
|
-
.sd-1-0-
|
|
389
|
-
.sd-1-0-
|
|
388
|
+
.sd-1-0-1-prose--inverted > .sd-1-0-1-leadtext,
|
|
389
|
+
.sd-1-0-1-leadtext--inverted {
|
|
390
390
|
|
|
391
391
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
392
392
|
}
|
|
393
393
|
|
|
394
394
|
/**
|
|
395
395
|
* Generates basic styles for list elements.
|
|
396
|
-
* @name sd-1-0-
|
|
396
|
+
* @name sd-1-0-1-list
|
|
397
397
|
* @status stable
|
|
398
398
|
* @since 1.39.0
|
|
399
|
-
* @boolean sd-1-0-
|
|
399
|
+
* @boolean sd-1-0-1-list--inverted Inverts the list text.
|
|
400
400
|
*/
|
|
401
401
|
|
|
402
|
-
.sd-1-0-
|
|
403
|
-
.sd-1-0-
|
|
402
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon),
|
|
403
|
+
.sd-1-0-1-prose > :is(ol, ul) {
|
|
404
404
|
padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
405
405
|
padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
406
406
|
text-align: left;
|
|
407
407
|
}
|
|
408
408
|
|
|
409
|
-
.sd-1-0-
|
|
409
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) li:not(:first-child), .sd-1-0-1-prose > :is(ol, ul) li:not(:first-child) {
|
|
410
410
|
margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
411
411
|
}
|
|
412
412
|
|
|
413
|
-
.sd-1-0-
|
|
414
|
-
.sd-1-0-
|
|
415
|
-
.sd-1-0-
|
|
416
|
-
.sd-1-0-
|
|
413
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol,
|
|
414
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul,
|
|
415
|
+
.sd-1-0-1-prose > :is(ol, ul) ol,
|
|
416
|
+
.sd-1-0-1-prose > :is(ol, ul) ul {
|
|
417
417
|
padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
418
418
|
}
|
|
419
419
|
|
|
420
420
|
/* Counter handling for ordered lists. */
|
|
421
421
|
|
|
422
|
-
.sd-1-0-
|
|
422
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol) > li, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol > li, .sd-1-0-1-prose > :is(ol, ul):is(ol) > li, .sd-1-0-1-prose > :is(ol, ul) ol > li {
|
|
423
423
|
counter-increment: item;
|
|
424
424
|
}
|
|
425
425
|
|
|
426
|
-
.sd-1-0-
|
|
426
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol) > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ol) > li:before, .sd-1-0-1-prose > :is(ol, ul) ol > li:before {
|
|
427
427
|
content: counters(item, '.') '. ';
|
|
428
428
|
}
|
|
429
429
|
|
|
430
430
|
/* Add second level */
|
|
431
431
|
|
|
432
|
-
.sd-1-0-
|
|
433
|
-
.sd-1-0-
|
|
434
|
-
.sd-1-0-
|
|
435
|
-
.sd-1-0-
|
|
436
|
-
.sd-1-0-
|
|
437
|
-
.sd-1-0-
|
|
432
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol),
|
|
433
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ol) > li > ol,
|
|
434
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) ol > li > ol,
|
|
435
|
+
.sd-1-0-1-prose > :is(ol, ul):is(ol),
|
|
436
|
+
.sd-1-0-1-prose > :is(ol, ul):is(ol) > li > ol,
|
|
437
|
+
.sd-1-0-1-prose > :is(ol, ul) ol > li > ol {
|
|
438
438
|
counter-reset: item;
|
|
439
439
|
}
|
|
440
440
|
|
|
441
441
|
/* Ordered lists inside unordered lists. */
|
|
442
442
|
|
|
443
|
-
.sd-1-0-
|
|
444
|
-
.sd-1-0-
|
|
445
|
-
.sd-1-0-
|
|
446
|
-
.sd-1-0-
|
|
443
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul) > li > ol,
|
|
444
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li > ol,
|
|
445
|
+
.sd-1-0-1-prose > :is(ol, ul):is(ul) > li > ol,
|
|
446
|
+
.sd-1-0-1-prose > :is(ol, ul) ul > li > ol {
|
|
447
447
|
counter-set: item 0;
|
|
448
448
|
}
|
|
449
449
|
|
|
450
450
|
/* Styling */
|
|
451
451
|
|
|
452
|
-
.sd-1-0-
|
|
452
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) li, .sd-1-0-1-prose > :is(ol, ul) li {
|
|
453
453
|
display: table;
|
|
454
454
|
}
|
|
455
455
|
|
|
456
|
-
.sd-1-0-
|
|
456
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) li:before, .sd-1-0-1-prose > :is(ol, ul) li:before {
|
|
457
457
|
display: table-cell;
|
|
458
458
|
padding-right: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
459
459
|
}
|
|
460
460
|
|
|
461
|
-
.sd-1-0-
|
|
462
|
-
.sd-1-0-
|
|
463
|
-
.sd-1-0-
|
|
464
|
-
.sd-1-0-
|
|
461
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul),
|
|
462
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul,
|
|
463
|
+
.sd-1-0-1-prose > :is(ol, ul):is(ul),
|
|
464
|
+
.sd-1-0-1-prose > :is(ol, ul) ul {
|
|
465
465
|
list-style-type: '';
|
|
466
466
|
}
|
|
467
467
|
|
|
468
|
-
.sd-1-0-
|
|
468
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul):not(.sd-1-0-1-list--icon) > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ul):not(.sd-1-0-1-list--icon) > li:before, .sd-1-0-1-prose > :is(ol, ul) ul > li:before {
|
|
469
469
|
content: '\2022';
|
|
470
470
|
}
|
|
471
471
|
|
|
472
|
-
.sd-1-0-
|
|
472
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul) ul > li > ul > li:before {
|
|
473
473
|
content: '\002B1D';
|
|
474
474
|
}
|
|
475
475
|
|
|
476
|
-
.sd-1-0-
|
|
476
|
+
.sd-1-0-1-list:not(.sd-1-0-1-list--icon):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li > ul > li:before, .sd-1-0-1-list:not(.sd-1-0-1-list--icon) ul > li > ul > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul):is(ul):not(.sd-1-0-1-list--icon) > li > ul > li > ul > li:before, .sd-1-0-1-prose > :is(ol, ul) ul > li > ul > li > ul > li:before {
|
|
477
477
|
content: '\2010';
|
|
478
478
|
}
|
|
479
479
|
|
|
480
|
-
.sd-1-0-
|
|
480
|
+
.sd-1-0-1-list--icon {
|
|
481
481
|
padding-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
482
482
|
padding-bottom: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
483
483
|
text-align: left;
|
|
484
484
|
}
|
|
485
485
|
|
|
486
|
-
.sd-1-0-
|
|
487
|
-
.sd-1-0-
|
|
486
|
+
.sd-1-0-1-list--icon li sd-icon:first-of-type,
|
|
487
|
+
.sd-1-0-1-list--icon li .sd-1-0-1-list--icon__icon:first-of-type {
|
|
488
488
|
|
|
489
489
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
490
490
|
}
|
|
491
491
|
|
|
492
|
-
.sd-1-0-
|
|
492
|
+
.sd-1-0-1-list--icon {
|
|
493
493
|
list-style-type: '';
|
|
494
494
|
}
|
|
495
495
|
|
|
@@ -497,19 +497,19 @@ Used for inverted pressed interaction text link */;
|
|
|
497
497
|
styles without affecting semantics is to set list-style-type to an empty string.
|
|
498
498
|
https://www.matuzo.at/blog/2023/removing-list-styles-without-affecting-semantics */
|
|
499
499
|
|
|
500
|
-
.sd-1-0-
|
|
500
|
+
.sd-1-0-1-list--icon > li:first-of-type {
|
|
501
501
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
502
502
|
}
|
|
503
503
|
|
|
504
|
-
.sd-1-0-
|
|
504
|
+
.sd-1-0-1-list--icon li {
|
|
505
505
|
position: relative;
|
|
506
506
|
padding-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
507
507
|
padding-left: var(--sd-spacing-10, 2.5rem) /* 40px */;
|
|
508
508
|
line-height: 32px;
|
|
509
509
|
}
|
|
510
510
|
|
|
511
|
-
.sd-1-0-
|
|
512
|
-
.sd-1-0-
|
|
511
|
+
.sd-1-0-1-list--icon li > sd-icon:first-of-type,
|
|
512
|
+
.sd-1-0-1-list--icon li > .sd-1-0-1-list--icon__icon:first-of-type {
|
|
513
513
|
position: absolute;
|
|
514
514
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
515
515
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
@@ -517,44 +517,44 @@ Used for inverted pressed interaction text link */;
|
|
|
517
517
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
518
518
|
}
|
|
519
519
|
|
|
520
|
-
.sd-1-0-
|
|
520
|
+
.sd-1-0-1-list--icon.sd-1-0-1-list--horizontal {
|
|
521
521
|
display: flex;
|
|
522
522
|
}
|
|
523
523
|
|
|
524
|
-
.sd-1-0-
|
|
524
|
+
.sd-1-0-1-list--icon.sd-1-0-1-list--horizontal li {
|
|
525
525
|
display: flex;
|
|
526
526
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
527
527
|
}
|
|
528
528
|
|
|
529
|
-
.sd-1-0-
|
|
529
|
+
.sd-1-0-1-list--icon.sd-1-0-1-list--horizontal li:not(:last-child) {
|
|
530
530
|
margin-right: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
531
531
|
}
|
|
532
532
|
|
|
533
|
-
.sd-1-0-
|
|
534
|
-
.sd-1-0-
|
|
533
|
+
.sd-1-0-1-list--inverted,
|
|
534
|
+
.sd-1-0-1-prose--inverted > :is(ol, ul) {
|
|
535
535
|
|
|
536
536
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
537
537
|
}
|
|
538
538
|
|
|
539
|
-
.sd-1-0-
|
|
540
|
-
.sd-1-0-
|
|
541
|
-
.sd-1-0-
|
|
542
|
-
.sd-1-0-
|
|
539
|
+
.sd-1-0-1-list--inverted li > sd-icon:first-of-type,
|
|
540
|
+
.sd-1-0-1-list--inverted li > .sd-1-0-1-list--icon__icon:first-of-type,
|
|
541
|
+
.sd-1-0-1-prose--inverted > :is(ol, ul) li > sd-icon:first-of-type,
|
|
542
|
+
.sd-1-0-1-prose--inverted > :is(ol, ul) li > .sd-1-0-1-list--icon__icon:first-of-type {
|
|
543
543
|
|
|
544
544
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
545
545
|
}
|
|
546
546
|
|
|
547
547
|
/**
|
|
548
548
|
* A paragraph is used to display blocks of text. It uses the base font size and can contain bold and/or link styles.
|
|
549
|
-
* @name sd-1-0-
|
|
549
|
+
* @name sd-1-0-1-paragraph
|
|
550
550
|
* @status stable
|
|
551
551
|
* @since 1.7
|
|
552
|
-
* @variant { sm } sd-1-0-
|
|
553
|
-
* @boolean sd-1-0-
|
|
552
|
+
* @variant { sm } sd-1-0-1-paragraph--size-... The paragraph's font size.
|
|
553
|
+
* @boolean sd-1-0-1-paragraph--inverted Inverts the paragraph text.
|
|
554
554
|
*/
|
|
555
555
|
|
|
556
|
-
.sd-1-0-
|
|
557
|
-
.sd-1-0-
|
|
556
|
+
.sd-1-0-1-paragraph,
|
|
557
|
+
.sd-1-0-1-prose p {
|
|
558
558
|
font-size: var(--sd-font-size-base, 1rem) /* 16px */;
|
|
559
559
|
font-weight: 400;
|
|
560
560
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -562,7 +562,7 @@ Used for inverted pressed interaction text link */;
|
|
|
562
562
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
563
563
|
}
|
|
564
564
|
|
|
565
|
-
.sd-1-0-
|
|
565
|
+
.sd-1-0-1-paragraph--size-sm, .sd-1-0-1-prose p--size-sm {
|
|
566
566
|
font-size: var(--sd-font-size-sm, 0.875rem) /* 14px */;
|
|
567
567
|
font-weight: 400;
|
|
568
568
|
line-height: var(--sd-line-height-normal, 150%) /* Used for body copy and smaller titles */;
|
|
@@ -570,35 +570,35 @@ Used for inverted pressed interaction text link */;
|
|
|
570
570
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
571
571
|
}
|
|
572
572
|
|
|
573
|
-
.sd-1-0-
|
|
574
|
-
.sd-1-0-
|
|
573
|
+
.sd-1-0-1-paragraph--inverted,
|
|
574
|
+
.sd-1-0-1-prose--inverted p {
|
|
575
575
|
|
|
576
576
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
577
577
|
}
|
|
578
578
|
|
|
579
579
|
/**
|
|
580
580
|
* Generates basic styles for media elements.
|
|
581
|
-
* @name sd-1-0-
|
|
581
|
+
* @name sd-1-0-1-media
|
|
582
582
|
* @status stable
|
|
583
583
|
* @since 2.5.0
|
|
584
|
-
* @boolean sd-1-0-
|
|
584
|
+
* @boolean sd-1-0-1-media--inverted Inverts the figcaption text.
|
|
585
585
|
*/
|
|
586
586
|
|
|
587
|
-
.sd-1-0-
|
|
588
|
-
figure.sd-1-0-
|
|
587
|
+
.sd-1-0-1-prose figure,
|
|
588
|
+
figure.sd-1-0-1-media {
|
|
589
589
|
margin: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
590
590
|
}
|
|
591
591
|
|
|
592
|
-
.sd-1-0-
|
|
592
|
+
.sd-1-0-1-prose figure figcaption, figure.sd-1-0-1-media figcaption {
|
|
593
593
|
|
|
594
594
|
color: rgb(var(--sd-color-neutral-700, 104 104 104) / var(--tw-text-opacity, 1)) /* Additional text color */;
|
|
595
595
|
}
|
|
596
596
|
|
|
597
|
-
.sd-1-0-
|
|
597
|
+
.sd-1-0-1-prose figure figcaption:last-child, figure.sd-1-0-1-media figcaption:last-child {
|
|
598
598
|
margin-top: var(--sd-spacing-3, 0.75rem) /* 12px */;
|
|
599
599
|
}
|
|
600
600
|
|
|
601
|
-
.sd-1-0-
|
|
601
|
+
.sd-1-0-1-prose--inverted figure figcaption, figure.sd-1-0-1-media--inverted figcaption {
|
|
602
602
|
|
|
603
603
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
604
604
|
Used for inverted pressed interaction text link */;
|
|
@@ -606,18 +606,18 @@ Used for inverted pressed interaction text link */;
|
|
|
606
606
|
|
|
607
607
|
/**
|
|
608
608
|
* A table cell is a single cell inside a table, used to display discrete data elements.
|
|
609
|
-
* @name sd-1-0-
|
|
609
|
+
* @name sd-1-0-1-table-cell
|
|
610
610
|
* @status stable
|
|
611
611
|
* @since 1.13
|
|
612
|
-
* @boolean sd-1-0-
|
|
613
|
-
* @variant { white | primary-100 | neutral-100 } sd-1-0-
|
|
614
|
-
* @boolean sd-1-0-
|
|
615
|
-
* @variant { top | left | right | bottom } sd-1-0-
|
|
612
|
+
* @boolean sd-1-0-1-table-cell--divider Displays a divider to the right.
|
|
613
|
+
* @variant { white | primary-100 | neutral-100 } sd-1-0-1-table-cell--bg-... Applies the selected background-color to the table cell. If not selected, a transparent background-color is used per default.
|
|
614
|
+
* @boolean sd-1-0-1-table-cell--shadow-active Displays the table shadow.
|
|
615
|
+
* @variant { top | left | right | bottom } sd-1-0-1-table-cell--shadow-... Applies the selected shadow to the table cell.
|
|
616
616
|
*/
|
|
617
617
|
|
|
618
|
-
.sd-1-0-
|
|
619
|
-
.sd-1-0-
|
|
620
|
-
.sd-1-0-
|
|
618
|
+
.sd-1-0-1-prose td,
|
|
619
|
+
.sd-1-0-1-prose th,
|
|
620
|
+
.sd-1-0-1-table-cell {
|
|
621
621
|
border-top-width: 1px;
|
|
622
622
|
border-bottom-width: 1px;
|
|
623
623
|
border-left-width: 0px;
|
|
@@ -634,11 +634,11 @@ Used for divider, teaser, container, ... */;
|
|
|
634
634
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */;
|
|
635
635
|
}
|
|
636
636
|
|
|
637
|
-
.sd-1-0-
|
|
637
|
+
.sd-1-0-1-table-cell--divider {
|
|
638
638
|
border-right-width: 1px;
|
|
639
639
|
}
|
|
640
640
|
|
|
641
|
-
.sd-1-0-
|
|
641
|
+
.sd-1-0-1-table-cell--shadow-top:after, .sd-1-0-1-table-cell--shadow-bottom:after, .sd-1-0-1-table-cell--shadow-left:after, .sd-1-0-1-table-cell--shadow-right:after {
|
|
642
642
|
pointer-events: none;
|
|
643
643
|
position: absolute;
|
|
644
644
|
--tw-gradient-from: rgb(0 0 0 / var(--sd-opacity-10, 0.1)) var(--tw-gradient-from-position);
|
|
@@ -653,7 +653,7 @@ Used for divider, teaser, container, ... */;
|
|
|
653
653
|
content: var(--tw-content);
|
|
654
654
|
}
|
|
655
655
|
|
|
656
|
-
.sd-1-0-
|
|
656
|
+
.sd-1-0-1-table-cell--shadow-top:after, .sd-1-0-1-table-cell--shadow-bottom:after {
|
|
657
657
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
658
658
|
right: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
659
659
|
height: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
|
|
@@ -661,7 +661,7 @@ Used for divider, teaser, container, ... */;
|
|
|
661
661
|
|
|
662
662
|
/* fix that shows line on top of table-cell */
|
|
663
663
|
|
|
664
|
-
.sd-1-0-
|
|
664
|
+
.sd-1-0-1-table-cell--shadow-top:before, .sd-1-0-1-table-cell--shadow-bottom:before {
|
|
665
665
|
position: absolute;
|
|
666
666
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
667
667
|
display: block;
|
|
@@ -675,66 +675,66 @@ Used for divider, teaser, container, ... */;
|
|
|
675
675
|
content: var(--tw-content);
|
|
676
676
|
}
|
|
677
677
|
|
|
678
|
-
.sd-1-0-
|
|
678
|
+
.sd-1-0-1-table-cell--shadow-left:after, .sd-1-0-1-table-cell--shadow-right:after {
|
|
679
679
|
top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
680
680
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
681
681
|
width: var(--sd-spacing-2-5, 0.625rem) /* 10px */;
|
|
682
682
|
}
|
|
683
683
|
|
|
684
|
-
.sd-1-0-
|
|
684
|
+
.sd-1-0-1-table-cell.sd-1-0-1-table-cell--shadow-active:after {
|
|
685
685
|
opacity: 100%;
|
|
686
686
|
}
|
|
687
687
|
|
|
688
|
-
.sd-1-0-
|
|
688
|
+
.sd-1-0-1-table-cell--shadow-top:after {
|
|
689
689
|
top: -10px;
|
|
690
690
|
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
|
691
691
|
}
|
|
692
692
|
|
|
693
693
|
/* fix that shows line on top of table-cell */
|
|
694
694
|
|
|
695
|
-
.sd-1-0-
|
|
695
|
+
.sd-1-0-1-table-cell--shadow-top:before {
|
|
696
696
|
bottom: -1px;
|
|
697
697
|
}
|
|
698
698
|
|
|
699
|
-
.sd-1-0-
|
|
699
|
+
.sd-1-0-1-table-cell--shadow-bottom:after {
|
|
700
700
|
bottom: -10px;
|
|
701
701
|
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
|
|
702
702
|
}
|
|
703
703
|
|
|
704
704
|
/* fix that shows line on top of table-cell */
|
|
705
705
|
|
|
706
|
-
.sd-1-0-
|
|
706
|
+
.sd-1-0-1-table-cell--shadow-bottom:before {
|
|
707
707
|
top: -1px;
|
|
708
708
|
}
|
|
709
709
|
|
|
710
|
-
.sd-1-0-
|
|
710
|
+
.sd-1-0-1-table-cell--shadow-left:after {
|
|
711
711
|
left: -10px;
|
|
712
712
|
background-image: linear-gradient(to left, var(--tw-gradient-stops));
|
|
713
713
|
}
|
|
714
714
|
|
|
715
|
-
.sd-1-0-
|
|
715
|
+
.sd-1-0-1-table-cell--shadow-right:after {
|
|
716
716
|
right: -10px;
|
|
717
717
|
background-image: linear-gradient(to right, var(--tw-gradient-stops));
|
|
718
718
|
}
|
|
719
719
|
|
|
720
|
-
.sd-1-0-
|
|
720
|
+
.sd-1-0-1-table-cell--bg-white {
|
|
721
721
|
|
|
722
722
|
background-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-bg-opacity, 1)) /* Default background color (light mode)
Used for inverted button */;
|
|
723
723
|
}
|
|
724
724
|
|
|
725
|
-
.sd-1-0-
|
|
725
|
+
.sd-1-0-1-table-cell--bg-primary-100 {
|
|
726
726
|
|
|
727
727
|
background-color: rgb(var(--sd-color-primary-100, 236 240 249) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
728
728
|
}
|
|
729
729
|
|
|
730
|
-
.sd-1-0-
|
|
730
|
+
.sd-1-0-1-table-cell--bg-neutral-100 {
|
|
731
731
|
|
|
732
732
|
background-color: rgb(var(--sd-color-neutral-100, 246 246 246) / var(--tw-bg-opacity, 1)) /* Additional background color (light mode) */;
|
|
733
733
|
}
|
|
734
734
|
|
|
735
735
|
/**
|
|
736
736
|
* A table is organized structured content, used for scanning, comparing, and analyzing the data.
|
|
737
|
-
* @name sd-1-0-
|
|
737
|
+
* @name sd-1-0-1-table
|
|
738
738
|
* @status stable
|
|
739
739
|
* @since 1.13
|
|
740
740
|
*/
|
|
@@ -743,8 +743,8 @@ Used for divider, teaser, container, ... */;
|
|
|
743
743
|
* Remove inherited styles from table before applying our styles.
|
|
744
744
|
*/
|
|
745
745
|
|
|
746
|
-
.sd-1-0-
|
|
747
|
-
.sd-1-0-
|
|
746
|
+
.sd-1-0-1-table,
|
|
747
|
+
.sd-1-0-1-prose table {
|
|
748
748
|
all: unset;
|
|
749
749
|
display: table;
|
|
750
750
|
border-collapse: collapse;
|
|
@@ -753,13 +753,13 @@ Used for divider, teaser, container, ... */;
|
|
|
753
753
|
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
|
|
754
754
|
}
|
|
755
755
|
|
|
756
|
-
.sd-1-0-
|
|
756
|
+
.sd-1-0-1-table thead tr:first-of-type, .sd-1-0-1-table tfoot tr:first-of-type, .sd-1-0-1-prose table thead tr:first-of-type, .sd-1-0-1-prose table tfoot tr:first-of-type {
|
|
757
757
|
position: relative;
|
|
758
758
|
}
|
|
759
759
|
|
|
760
760
|
/* plop:style */
|
|
761
761
|
|
|
762
|
-
.sd-1-0-
|
|
762
|
+
.sd-1-0-1-prose {
|
|
763
763
|
/* Optimize for reading. */
|
|
764
764
|
max-width: 80ch;
|
|
765
765
|
text-align: left;
|
|
@@ -767,67 +767,67 @@ Used for divider, teaser, container, ... */;
|
|
|
767
767
|
|
|
768
768
|
/* Add default spacings */
|
|
769
769
|
|
|
770
|
-
.sd-1-0-
|
|
770
|
+
.sd-1-0-1-prose > *:not(:first-child) {
|
|
771
771
|
margin-top: var(--sd-spacing-4, 1rem) /* 16px */;
|
|
772
772
|
}
|
|
773
773
|
|
|
774
774
|
/* First element has no margin-top */
|
|
775
775
|
|
|
776
|
-
.sd-1-0-
|
|
776
|
+
.sd-1-0-1-prose > *:first-child {
|
|
777
777
|
margin-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
778
778
|
}
|
|
779
779
|
|
|
780
780
|
/* headings after a heading have a smaller margin-top */
|
|
781
781
|
|
|
782
|
-
.sd-1-0-
|
|
782
|
+
.sd-1-0-1-prose > :is(h1, h2, h3, h4, h5):not(#_) + :is(h1, h2, h3, h4, h5) {
|
|
783
783
|
/* :not(#_) is a hack to raise specifity, see https://stackoverflow.com/a/61781795 */
|
|
784
784
|
margin-top: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
785
785
|
}
|
|
786
786
|
|
|
787
787
|
/* Headlines after other non-headlines have a larger margin-top */
|
|
788
788
|
|
|
789
|
-
.sd-1-0-
|
|
789
|
+
.sd-1-0-1-prose > *:not(:is(h1, h2, h3, h4, h5)) + :is(h1, h2, h3, h4, h5):not(#_) {
|
|
790
790
|
margin-top: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
791
791
|
}
|
|
792
792
|
|
|
793
793
|
/* Images and figures lead to a bigger margin-top for the next element */
|
|
794
794
|
|
|
795
|
-
.sd-1-0-
|
|
796
|
-
.sd-1-0-
|
|
795
|
+
.sd-1-0-1-prose > figure + *:not(#_),
|
|
796
|
+
.sd-1-0-1-prose > img + *:not(#_) {
|
|
797
797
|
margin-top: var(--sd-spacing-6, 1.5rem) /* 24px */;
|
|
798
798
|
}
|
|
799
799
|
|
|
800
800
|
/* Add styles for elements that are not based on existing CSS styles */
|
|
801
801
|
|
|
802
|
-
.sd-1-0-
|
|
802
|
+
.sd-1-0-1-prose hr {
|
|
803
803
|
height: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
804
804
|
border-top-width: 1px;
|
|
805
805
|
--tw-border-opacity: 1;
|
|
806
806
|
border-color: rgb(var(--sd-color-neutral-500, 174 174 174) / var(--tw-border-opacity, 1)) /* Used for disabled state */;
|
|
807
807
|
}
|
|
808
808
|
|
|
809
|
-
.sd-1-0-
|
|
809
|
+
.sd-1-0-1-prose pre {
|
|
810
810
|
overflow: auto;
|
|
811
811
|
}
|
|
812
812
|
|
|
813
|
-
.sd-1-0-
|
|
814
|
-
.sd-1-0-
|
|
813
|
+
.sd-1-0-1-prose blockquote,
|
|
814
|
+
.sd-1-0-1-prose blockquote > * {
|
|
815
815
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
816
816
|
}
|
|
817
817
|
|
|
818
|
-
.sd-1-0-
|
|
818
|
+
.sd-1-0-1-prose blockquote:has(*) *:first-child::before, .sd-1-0-1-prose blockquote:not(:has(*))::before {
|
|
819
819
|
content: open-quote;
|
|
820
820
|
display: inline;
|
|
821
821
|
}
|
|
822
822
|
|
|
823
|
-
.sd-1-0-
|
|
823
|
+
.sd-1-0-1-prose blockquote:has(*) *:first-child::after, .sd-1-0-1-prose blockquote:not(:has(*))::after {
|
|
824
824
|
content: close-quote;
|
|
825
825
|
display: inline;
|
|
826
826
|
}
|
|
827
827
|
|
|
828
828
|
/* Fixes for other elements */
|
|
829
829
|
|
|
830
|
-
.sd-1-0-
|
|
830
|
+
.sd-1-0-1-prose > :is(ul, ol):not(#_) {
|
|
831
831
|
/* ul and ol have padding that has to be reset */
|
|
832
832
|
padding-top: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
833
833
|
padding-bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
@@ -835,18 +835,18 @@ Used for divider, teaser, container, ... */;
|
|
|
835
835
|
|
|
836
836
|
/* Inverted styles */
|
|
837
837
|
|
|
838
|
-
.sd-1-0-
|
|
838
|
+
.sd-1-0-1-prose--inverted hr {
|
|
839
839
|
--tw-border-opacity: 1;
|
|
840
840
|
border-color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-border-opacity, 1)) /* Used for buttons, inverted focus state */;
|
|
841
841
|
}
|
|
842
842
|
|
|
843
|
-
.sd-1-0-
|
|
843
|
+
.sd-1-0-1-prose--inverted pre {
|
|
844
844
|
|
|
845
845
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
846
846
|
}
|
|
847
847
|
|
|
848
848
|
/* Full width styles */
|
|
849
849
|
|
|
850
|
-
.sd-1-0-
|
|
850
|
+
.sd-1-0-1-prose--full-width {
|
|
851
851
|
max-width: unset;
|
|
852
852
|
}
|