@solid-design-system/styles 1.0.1 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +15 -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 +2 -2
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Generates basic styles for flag elements.
|
|
3
|
-
* @name sd-1-0-
|
|
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-0-
|
|
6
|
+
* @variant { neutral-300 | neutral-500 | white } sd-1-1-0-flag--...
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
3
|
+
* @name sd-1-1-0-footnotes
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 3.0.0
|
|
6
|
-
* @boolean sd-1-0-
|
|
6
|
+
* @boolean sd-1-1-0-footnotes--inverted Inverts the footnote text.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
34
|
+
.sd-1-1-0-footnotes:is(ul) {
|
|
35
35
|
list-style: '';
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
.sd-1-0-
|
|
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-0-
|
|
3
|
+
* @name sd-1-1-0-headline
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.16
|
|
6
|
-
* @variant { 3xl | xl | lg | base } sd-1-0-
|
|
7
|
-
* @boolean sd-1-0-
|
|
8
|
-
* @boolean sd-1-0-
|
|
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-0-
|
|
12
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
43
|
-
.sd-1-0-
|
|
44
|
-
.sd-1-0-
|
|
45
|
-
.sd-1-0-
|
|
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-0-
|
|
57
|
-
.sd-1-0-
|
|
58
|
-
.sd-1-0-
|
|
59
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
79
|
-
.sd-1-0-
|
|
80
|
-
.sd-1-0-
|
|
81
|
-
.sd-1-0-
|
|
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-0-
|
|
93
|
-
.sd-1-0-
|
|
94
|
-
.sd-1-0-
|
|
95
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
115
|
-
.sd-1-0-
|
|
116
|
-
.sd-1-0-
|
|
117
|
-
.sd-1-0-
|
|
118
|
-
.sd-1-0-
|
|
119
|
-
.sd-1-0-
|
|
120
|
-
.sd-1-0-
|
|
121
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
136
|
-
.sd-1-0-
|
|
137
|
-
.sd-1-0-
|
|
138
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
157
|
-
.sd-1-0-
|
|
158
|
-
.sd-1-0-
|
|
159
|
-
.sd-1-0-
|
|
160
|
-
.sd-1-0-
|
|
161
|
-
.sd-1-0-
|
|
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-0-
|
|
167
|
-
.sd-1-0-
|
|
168
|
-
.sd-1-0-
|
|
169
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
188
|
-
.sd-1-0-
|
|
189
|
-
.sd-1-0-
|
|
190
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
205
|
+
.sd-1-1-0-headline--inline {
|
|
206
206
|
|
|
207
207
|
display: inline-block
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
225
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
3
|
+
* @name sd-1-1-0-hidden-links
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 3.15.0
|
|
6
|
-
* @boolean sd-1-0-
|
|
7
|
-
* @boolean sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
3
|
+
* @name sd-1-1-0-interactive
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.11
|
|
6
|
-
* @boolean sd-1-0-
|
|
7
|
-
* @boolean sd-1-0-
|
|
8
|
-
* @boolean sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
17
|
-
.sd-1-0-
|
|
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-0-
|
|
28
|
-
.sd-1-0-
|
|
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-0-
|
|
34
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
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-0-
|
|
51
|
-
.sd-1-0-
|
|
52
|
-
.sd-1-0-
|
|
53
|
-
.sd-1-0-
|
|
54
|
-
.sd-1-0-
|
|
55
|
-
.sd-1-0-
|
|
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-0-
|
|
62
|
-
.sd-1-0-
|
|
63
|
-
.sd-1-0-
|
|
64
|
-
.sd-1-0-
|
|
65
|
-
.sd-1-0-
|
|
66
|
-
.sd-1-0-
|
|
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-0-
|
|
72
|
-
.sd-1-0-
|
|
73
|
-
.sd-1-0-
|
|
74
|
-
.sd-1-0-
|
|
75
|
-
.sd-1-0-
|
|
76
|
-
.sd-1-0-
|
|
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-0-
|
|
82
|
-
.sd-1-0-
|
|
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-0-
|
|
88
|
-
.sd-1-0-
|
|
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-0-
|
|
94
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
3
|
+
* @name sd-1-1-0-leadtext
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.7
|
|
6
|
-
* @variant { lg } sd-1-0-
|
|
7
|
-
* @boolean sd-1-0-
|
|
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-0-
|
|
11
|
-
.sd-1-0-
|
|
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-0-
|
|
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-0-
|
|
38
|
-
.sd-1-0-
|
|
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
|
|