@primer/brand-css 0.66.0-rc.d5c4bb5d → 0.66.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.
|
@@ -32,6 +32,64 @@
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
+
/* Gridline variant */
|
|
36
|
+
|
|
37
|
+
.RiverAccordion--variant-gridline {
|
|
38
|
+
position: relative;
|
|
39
|
+
padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);
|
|
40
|
+
padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.RiverAccordion--variant-gridline::before,
|
|
44
|
+
.RiverAccordion--variant-gridline::after {
|
|
45
|
+
content: '';
|
|
46
|
+
position: absolute;
|
|
47
|
+
left: 50%;
|
|
48
|
+
transform: translateX(-50%);
|
|
49
|
+
width: 100vw;
|
|
50
|
+
height: 0;
|
|
51
|
+
border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
|
|
52
|
+
z-index: 1;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.RiverAccordion--variant-gridline::before {
|
|
56
|
+
top: 0;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.RiverAccordion--variant-gridline::after {
|
|
60
|
+
bottom: 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@media (min-width: 48rem) {
|
|
64
|
+
.RiverAccordion--variant-gridline {
|
|
65
|
+
--gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
|
|
66
|
+
--half-column: calc(50% - var(--gap-width) / 2);
|
|
67
|
+
|
|
68
|
+
gap: var(--gap-width);
|
|
69
|
+
align-items: center;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.RiverAccordion--variant-gridline.RiverAccordion__align-start {
|
|
73
|
+
grid-template-columns: var(--half-column) var(--half-column);
|
|
74
|
+
grid-template-areas: 'accordion visual';
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.RiverAccordion--variant-gridline.RiverAccordion__align-end {
|
|
78
|
+
grid-template-columns: var(--half-column) var(--half-column);
|
|
79
|
+
grid-template-areas: 'visual accordion';
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
@media (min-width: 80rem) {
|
|
84
|
+
.RiverAccordion--variant-gridline {
|
|
85
|
+
border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {
|
|
90
|
+
border-radius: var(--brand-borderRadius-medium);
|
|
91
|
+
}
|
|
92
|
+
|
|
35
93
|
.RiverAccordion__accordionContainer {
|
|
36
94
|
grid-area: accordion;
|
|
37
95
|
}
|
|
@@ -41,6 +99,7 @@
|
|
|
41
99
|
}
|
|
42
100
|
|
|
43
101
|
.RiverAccordion__visualsWrapper {
|
|
102
|
+
width: 100%;
|
|
44
103
|
overflow: hidden;
|
|
45
104
|
border-radius: var(--brand-borderRadius-xlarge);
|
|
46
105
|
display: grid;
|
|
@@ -159,10 +218,12 @@
|
|
|
159
218
|
}
|
|
160
219
|
|
|
161
220
|
.RiverAccordion__icon {
|
|
162
|
-
|
|
163
|
-
|
|
221
|
+
flex-shrink: 0;
|
|
222
|
+
display: flex;
|
|
223
|
+
align-items: center;
|
|
224
|
+
color: var(--brand-color-text-muted);
|
|
164
225
|
}
|
|
165
226
|
|
|
166
227
|
.RiverAccordion__item--open .RiverAccordion__icon {
|
|
167
|
-
|
|
228
|
+
color: var(--brand-color-text-default);
|
|
168
229
|
}
|