@primer/brand-css 0.71.1-rc.30d3a242 → 0.71.1-rc.8e8d7e50
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.
|
@@ -1,20 +1,5 @@
|
|
|
1
1
|
.SectionIntroStacked {
|
|
2
|
-
--brand-Grid-spacing-row: var(--base-size-
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
|
|
6
|
-
.SectionIntroStacked {
|
|
7
|
-
max-width: 618px;
|
|
8
|
-
margin-inline: auto;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.SectionIntroStacked.SectionIntroStacked--variant-gridline {
|
|
12
|
-
padding-inline: var(--base-size-32);
|
|
13
|
-
padding-block: calc(var(--base-size-64) - var(--base-size-4));
|
|
14
|
-
|
|
15
|
-
--SectionIntroStacked-item-divider-overflow-start: var(--base-size-32);
|
|
16
|
-
--SectionIntroStacked-item-divider-overflow-end: var(--base-size-32);
|
|
17
|
-
}
|
|
2
|
+
--brand-Grid-spacing-row: var(--base-size-48);
|
|
18
3
|
}
|
|
19
4
|
|
|
20
5
|
.SectionIntroStacked--variant-gridline {
|
|
@@ -36,6 +21,15 @@
|
|
|
36
21
|
}
|
|
37
22
|
}
|
|
38
23
|
|
|
24
|
+
@media screen and (min-width: 63.25rem) {
|
|
25
|
+
.SectionIntroStacked--variant-gridline {
|
|
26
|
+
padding-inline: var(--base-size-64);
|
|
27
|
+
padding-block: var(--base-size-64);
|
|
28
|
+
--SectionIntroStacked-item-divider-overflow-start: 0px;
|
|
29
|
+
--SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
39
33
|
@media screen and (min-width: 80rem) {
|
|
40
34
|
.SectionIntroStacked--variant-gridline {
|
|
41
35
|
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
|
|
@@ -77,13 +71,10 @@
|
|
|
77
71
|
flex-direction: column;
|
|
78
72
|
}
|
|
79
73
|
|
|
80
|
-
@media screen and (max-width: 63.
|
|
74
|
+
@media screen and (max-width: 63.25rem) {
|
|
81
75
|
.SectionIntroStacked-heading {
|
|
82
76
|
font-size: var(--brand-text-size-600);
|
|
83
77
|
}
|
|
84
|
-
.SectionIntroStacked-items {
|
|
85
|
-
overflow: hidden;
|
|
86
|
-
}
|
|
87
78
|
}
|
|
88
79
|
|
|
89
80
|
@media screen and (min-width: 63.25rem) {
|
|
@@ -95,18 +86,15 @@
|
|
|
95
86
|
.SectionIntroStacked--variant-gridline .SectionIntroStacked-items {
|
|
96
87
|
border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
|
|
97
88
|
margin-block: calc(-1 * var(--base-size-64));
|
|
98
|
-
padding-block:
|
|
89
|
+
padding-block: 0;
|
|
99
90
|
position: static;
|
|
100
91
|
top: auto;
|
|
101
92
|
}
|
|
102
93
|
|
|
103
|
-
.SectionIntroStacked-content {
|
|
104
|
-
padding-inline-end: var(--base-size-80);
|
|
105
|
-
}
|
|
106
|
-
|
|
107
94
|
.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {
|
|
108
95
|
/* Inset item content from the vertical gridline */
|
|
109
|
-
padding-inline-start: var(--base-size-
|
|
96
|
+
padding-inline-start: var(--base-size-32);
|
|
97
|
+
padding-inline-end: var(--base-size-32);
|
|
110
98
|
}
|
|
111
99
|
}
|
|
112
100
|
|
|
@@ -149,22 +137,21 @@
|
|
|
149
137
|
|
|
150
138
|
.SectionIntroStackedItem-item--with-icon {
|
|
151
139
|
display: flex;
|
|
140
|
+
flex-direction: row;
|
|
152
141
|
align-items: flex-start;
|
|
153
142
|
gap: var(--base-size-24);
|
|
154
|
-
flex-direction: column;
|
|
155
143
|
}
|
|
156
144
|
|
|
157
|
-
@media screen and (min-width:
|
|
145
|
+
@media screen and (min-width: 63.25rem) {
|
|
158
146
|
.SectionIntroStackedItem-item--with-icon {
|
|
159
147
|
gap: var(--base-size-48);
|
|
160
|
-
flex-direction: row;
|
|
161
148
|
}
|
|
162
149
|
}
|
|
163
150
|
|
|
164
151
|
.SectionIntroStackedItem__content {
|
|
165
152
|
display: flex;
|
|
166
153
|
flex-direction: column;
|
|
167
|
-
gap: var(--base-size-
|
|
154
|
+
gap: var(--base-size-8);
|
|
168
155
|
flex: 1;
|
|
169
156
|
min-width: 0;
|
|
170
157
|
}
|