@solid-design-system/styles 1.2.0 → 1.3.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 +8 -0
- package/cdn/modules/pagination.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/pagination.css +1 -0
- package/cdn-versioned/modules/paragraph.css +1 -1
- package/cdn-versioned/modules/prose.css +1 -1
- package/cdn-versioned/modules/status-badge.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/modules/pagination.css +469 -0
- package/dist/solid-styles.css +342 -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 +26 -26
- 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/pagination.css +469 -0
- package/dist-versioned/modules/paragraph.css +8 -8
- package/dist-versioned/modules/prose.css +231 -231
- package/dist-versioned/modules/status-badge.css +8 -8
- package/dist-versioned/modules/table-cell.css +23 -23
- package/dist-versioned/modules/table.css +4 -4
- package/dist-versioned/solid-styles.css +696 -354
- package/package.json +5 -8
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* 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.
|
|
3
|
-
* @name sd-1-
|
|
3
|
+
* @name sd-1-3-0-display
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 1.7
|
|
6
|
-
* @variant { xl | 3xl } sd-1-
|
|
7
|
-
* @boolean sd-1-
|
|
6
|
+
* @variant { xl | 3xl } sd-1-3-0-display--size-... The display's size.
|
|
7
|
+
* @boolean sd-1-3-0-display--inverted Inverts the display text.
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
.sd-1-
|
|
10
|
+
.sd-1-3-0-display {
|
|
11
11
|
|
|
12
12
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */;
|
|
13
13
|
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
|
|
23
23
|
@media (min-width: 1024px) {
|
|
24
24
|
|
|
25
|
-
.sd-1-
|
|
25
|
+
.sd-1-3-0-display {
|
|
26
26
|
|
|
27
27
|
font-size: var(--sd-font-size-4xl, 2.5rem) /* 40px */
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
.sd-1-
|
|
31
|
+
.sd-1-3-0-display--size-xl {
|
|
32
32
|
|
|
33
33
|
font-size: var(--sd-font-size-xl, 1.5rem) /* 24px */;
|
|
34
34
|
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
color: rgb(var(--sd-color-black, 24 24 24) / var(--tw-text-opacity, 1)) /* Default text color */
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
.sd-1-
|
|
44
|
+
.sd-1-3-0-display--size-3xl {
|
|
45
45
|
|
|
46
46
|
font-size: var(--sd-font-size-2xl, 1.75rem) /* 28px */;
|
|
47
47
|
|
|
@@ -56,13 +56,13 @@
|
|
|
56
56
|
|
|
57
57
|
@media (min-width: 1024px) {
|
|
58
58
|
|
|
59
|
-
.sd-1-
|
|
59
|
+
.sd-1-3-0-display--size-3xl {
|
|
60
60
|
|
|
61
61
|
font-size: var(--sd-font-size-3xl, 2rem) /* 32px */
|
|
62
62
|
}
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
.sd-1-
|
|
65
|
+
.sd-1-3-0-display--inverted {
|
|
66
66
|
|
|
67
67
|
|
|
68
68
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Generates basic styles for flag elements.
|
|
3
|
-
* @name sd-1-
|
|
3
|
+
* @name sd-1-3-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-3-0-flag--...
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
.sd-1-
|
|
9
|
+
.sd-1-3-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-3-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-3-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-3-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-3-0-footnotes
|
|
4
4
|
* @status stable
|
|
5
5
|
* @since 3.0.0
|
|
6
|
-
* @boolean sd-1-
|
|
6
|
+
* @boolean sd-1-3-0-footnotes--inverted Inverts the footnote text.
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
|
-
.sd-1-
|
|
9
|
+
.sd-1-3-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,22 +16,22 @@
|
|
|
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-3-0-footnotes :target {
|
|
20
20
|
|
|
21
21
|
background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
.sd-1-
|
|
24
|
+
.sd-1-3-0-footnotes:is(ol) {
|
|
25
25
|
padding-inline-start: var(--sd-spacing-8, 2rem) /* 32px */;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
.sd-1-
|
|
28
|
+
.sd-1-3-0-footnotes:is(ol) li {
|
|
29
29
|
counter-increment: list-item;
|
|
30
30
|
position: relative;
|
|
31
31
|
list-style-type: none;
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
.sd-1-
|
|
34
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker::before, .sd-1-3-0-footnotes:is(ol) li:has(.sd-1-3-0-footnotes--marker:nth-of-type(2))::before, .sd-1-3-0-footnotes:is(ol) li:not(:has(.sd-1-3-0-footnotes--marker))::before {
|
|
35
35
|
position: absolute;
|
|
36
36
|
left: calc(var(--sd-spacing-8, 2rem) /* 32px */ * -1);
|
|
37
37
|
flex-shrink: 0;
|
|
@@ -42,16 +42,16 @@
|
|
|
42
42
|
font-size: 10px;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
|
-
.sd-1-
|
|
45
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker::after, .sd-1-3-0-footnotes:is(ol) li:has(.sd-1-3-0-footnotes--marker:nth-of-type(2))::after, .sd-1-3-0-footnotes:is(ol) li:not(:has(.sd-1-3-0-footnotes--marker))::after {
|
|
46
46
|
content: none;
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
.sd-1-
|
|
49
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker .sd-1-3-0-footnotes--marker, .sd-1-3-0-footnotes:is(ol) li:has(.sd-1-3-0-footnotes--marker:nth-of-type(2)) .sd-1-3-0-footnotes--marker, .sd-1-3-0-footnotes:is(ol) li:not(:has(.sd-1-3-0-footnotes--marker)) .sd-1-3-0-footnotes--marker {
|
|
50
50
|
display: inline-block;
|
|
51
51
|
counter-increment: footnotes-multiple;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
.sd-1-
|
|
54
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker .sd-1-3-0-footnotes--marker::before, .sd-1-3-0-footnotes:is(ol) li:has(.sd-1-3-0-footnotes--marker:nth-of-type(2)) .sd-1-3-0-footnotes--marker::before, .sd-1-3-0-footnotes:is(ol) li:not(:has(.sd-1-3-0-footnotes--marker)) .sd-1-3-0-footnotes--marker::before {
|
|
55
55
|
position: relative;
|
|
56
56
|
left: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
57
57
|
vertical-align: super;
|
|
@@ -60,16 +60,16 @@
|
|
|
60
60
|
content: counter(footnotes-multiple, lower-alpha);
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.sd-1-
|
|
63
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker {
|
|
64
64
|
bottom: var(--sd-spacing-0, 0px) /* No spacing (manually added) */;
|
|
65
65
|
display: block;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
.sd-1-
|
|
68
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker:focus-visible {
|
|
69
69
|
outline-width: 0px;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
|
-
.sd-1-
|
|
72
|
+
.sd-1-3-0-footnotes:is(ol) li .sd-1-3-0-footnotes--marker:focus-visible::before {
|
|
73
73
|
border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
|
|
74
74
|
outline-style: solid;
|
|
75
75
|
outline-width: 2px;
|
|
@@ -77,39 +77,39 @@
|
|
|
77
77
|
outline-color: rgb(var(--sd-color-primary, 0 53 142) / 1) /* Used for buttons, select field, focus state */;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
.sd-1-
|
|
80
|
+
.sd-1-3-0-footnotes:is(ul) {
|
|
81
81
|
list-style: '';
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
-
.sd-1-
|
|
84
|
+
.sd-1-3-0-footnotes--inverted {
|
|
85
85
|
|
|
86
86
|
color: rgb(var(--sd-color-primary-400, 153 171 208) / var(--tw-text-opacity, 1)) /* Additional text inverted color
|
|
87
87
|
Used for inverted pressed interaction text link */;
|
|
88
88
|
}
|
|
89
89
|
|
|
90
|
-
.sd-1-
|
|
90
|
+
.sd-1-3-0-footnotes--inverted :target {
|
|
91
91
|
|
|
92
92
|
background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
|
|
93
93
|
}
|
|
94
94
|
|
|
95
|
-
.sd-1-
|
|
95
|
+
.sd-1-3-0-footnotes--inverted .sd-1-3-0-footnotes--marker::before {
|
|
96
96
|
|
|
97
97
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */;
|
|
98
98
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
-
.sd-1-
|
|
101
|
+
.sd-1-3-0-footnotes--inverted:is(.sd-1-3-0-footnotes--marker) {
|
|
102
102
|
--tw-text-opacity: 1 !important;
|
|
103
103
|
color: rgb(var(--sd-color-white, 255 255 255) / var(--tw-text-opacity, 1)) /* Inverted text color */ !important;
|
|
104
104
|
outline-color: rgb(var(--sd-color-white, 255 255 255) / 1) /* Used for buttons, inverted focus state */ !important;
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
-
.sd-1-
|
|
107
|
+
.sd-1-3-0-footnotes--inverted:is(.sd-1-3-0-footnotes--marker):target {
|
|
108
108
|
|
|
109
109
|
background-color: rgb(var(--sd-color-primary-800, 5 21 48) / var(--tw-bg-opacity, 1)) /* Used for pressed interaction */;
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
-
.sd-1-
|
|
112
|
+
.sd-1-3-0-footnotes--marker {
|
|
113
113
|
position: relative;
|
|
114
114
|
bottom: var(--sd-spacing-2, 0.5rem) /* 8px */;
|
|
115
115
|
display: inline-block;
|
|
@@ -119,28 +119,28 @@ Used for inverted pressed interaction text link */;
|
|
|
119
119
|
font-size: x-small;
|
|
120
120
|
}
|
|
121
121
|
|
|
122
|
-
.sd-1-
|
|
122
|
+
.sd-1-3-0-footnotes--marker:target {
|
|
123
123
|
|
|
124
124
|
background-color: rgb(var(--sd-color-neutral-200, 233 233 233) / var(--tw-bg-opacity, 1)) /* Used for hover interaction */;
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
.sd-1-
|
|
127
|
+
.sd-1-3-0-footnotes--marker::before {
|
|
128
128
|
content: '[ ';
|
|
129
129
|
display: inline-block;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
.sd-1-
|
|
132
|
+
.sd-1-3-0-footnotes--marker::after {
|
|
133
133
|
content: ' ]';
|
|
134
134
|
display: inline-block;
|
|
135
135
|
}
|
|
136
136
|
|
|
137
|
-
.sd-1-
|
|
138
|
-
.sd-1-
|
|
137
|
+
.sd-1-3-0-footnotes--marker:link,
|
|
138
|
+
.sd-1-3-0-footnotes--marker:visited {
|
|
139
139
|
|
|
140
140
|
color: rgb(var(--sd-color-primary, 0 53 142) / var(--tw-text-opacity, 1)) /* Primary brand color for text */;
|
|
141
141
|
}
|
|
142
142
|
|
|
143
|
-
.sd-1-
|
|
143
|
+
.sd-1-3-0-footnotes--marker:focus-visible {
|
|
144
144
|
border-radius: var(--sd-border-radius-default, 0.25rem) /* 4px Default radius for buttons */;
|
|
145
145
|
outline-style: solid;
|
|
146
146
|
outline-width: 2px;
|
|
@@ -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-3-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-3-0-headline--size-... The headline's size.
|
|
7
|
+
* @boolean sd-1-3-0-headline--inverted Inverts the headline text.
|
|
8
|
+
* @boolean sd-1-3-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-3-0-headline,
|
|
12
|
+
.sd-1-3-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-3-0-headline sd-icon, .sd-1-3-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-3-0-headline sd-icon, .sd-1-3-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-3-0-headline.sd-1-3-0-headline,
|
|
43
|
+
.sd-1-3-0-headline:is(h1):not(.sd-1-3-0-headline),
|
|
44
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline,
|
|
45
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline,
|
|
57
|
+
.sd-1-3-0-headline:is(h1):not(.sd-1-3-0-headline),
|
|
58
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline,
|
|
59
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline sd-icon, .sd-1-3-0-headline:is(h1):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline sd-icon, .sd-1-3-0-headline:is(h1):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h1):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-3xl,
|
|
79
|
+
.sd-1-3-0-headline:is(h2):not(.sd-1-3-0-headline),
|
|
80
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-3xl,
|
|
81
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-3xl,
|
|
93
|
+
.sd-1-3-0-headline:is(h2):not(.sd-1-3-0-headline),
|
|
94
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-3xl,
|
|
95
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-3xl sd-icon, .sd-1-3-0-headline:is(h2):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-3xl sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-3xl sd-icon, .sd-1-3-0-headline:is(h2):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-3xl sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h2):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-xl,
|
|
115
|
+
.sd-1-3-0-headline.sd-1-3-0-headline--size-lg,
|
|
116
|
+
.sd-1-3-0-headline.sd-1-3-0-headline--size-base,
|
|
117
|
+
.sd-1-3-0-headline:is(h3, h4, h5):not(.sd-1-3-0-headline),
|
|
118
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-xl,
|
|
119
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-lg,
|
|
120
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-base,
|
|
121
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-xl sd-icon, .sd-1-3-0-headline.sd-1-3-0-headline--size-lg sd-icon, .sd-1-3-0-headline.sd-1-3-0-headline--size-base sd-icon, .sd-1-3-0-headline:is(h3, h4, h5):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-xl sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-lg sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-base sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h3, h4, h5):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-xl,
|
|
136
|
+
.sd-1-3-0-headline:is(h3):not(.sd-1-3-0-headline),
|
|
137
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-xl,
|
|
138
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-xl sd-icon, .sd-1-3-0-headline:is(h3):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-xl sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-xl sd-icon, .sd-1-3-0-headline:is(h3):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-xl sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h3):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-lg,
|
|
157
|
+
.sd-1-3-0-headline.sd-1-3-0-headline--size-base,
|
|
158
|
+
.sd-1-3-0-headline:is(h4, h5):not(.sd-1-3-0-headline),
|
|
159
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-lg,
|
|
160
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-base,
|
|
161
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h4, h5):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-lg,
|
|
167
|
+
.sd-1-3-0-headline:is(h4),
|
|
168
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-lg,
|
|
169
|
+
.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-lg sd-icon, .sd-1-3-0-headline:is(h4) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-lg sd-icon, .sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-lg sd-icon, .sd-1-3-0-headline:is(h4) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-lg sd-icon, .sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-base,
|
|
188
|
+
.sd-1-3-0-headline:is(h5):not(.sd-1-3-0-headline),
|
|
189
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-base,
|
|
190
|
+
.sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-base sd-icon, .sd-1-3-0-headline:is(h5):not(.sd-1-3-0-headline) sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-base sd-icon, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-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-3-0-headline.sd-1-3-0-headline--size-base mark, .sd-1-3-0-headline:is(h5):not(.sd-1-3-0-headline) mark, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5).sd-1-3-0-headline--size-base mark, .sd-1-3-0-prose :is(h1, h2, h3, h4, h5):is(h5):not(.sd-1-3-0-headline) mark {
|
|
201
201
|
|
|
202
202
|
color: inherit
|
|
203
203
|
}
|
|
204
204
|
|
|
205
|
-
.sd-1-
|
|
205
|
+
.sd-1-3-0-headline--inline {
|
|
206
206
|
|
|
207
207
|
display: inline-block
|
|
208
208
|
}
|
|
209
209
|
|
|
210
|
-
.sd-1-
|
|
210
|
+
.sd-1-3-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-3-0-headline--inline:is(.sd-1-3-0-headline--size-xl, .sd-1-3-0-headline--size-lg, .sd-1-3-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-3-0-headline--inverted:not(#_),
|
|
225
|
+
.sd-1-3-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-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-3-0-headline--inverted:not(#_) sd-icon, .sd-1-3-0-prose--inverted :is(h1, h2, h3, h4, h5):not(.sd-1-3-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-3-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-3-0-hidden-links--multiple Adapts styling for multiple skip links.
|
|
7
|
+
* @boolean sd-1-3-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-3-0-hidden-links:not(:focus-within):not(.sd-1-3-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-3-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-3-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-3-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 */;
|