@primer/brand-css 0.66.0-rc.d5c4bb5d → 0.66.1-rc.612823df

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
- opacity: 1;
163
- transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
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
- opacity: 0;
228
+ color: var(--brand-color-text-default);
168
229
  }
@@ -635,7 +635,16 @@
635
635
 
636
636
  @media screen and (min-width: 63.25rem) {
637
637
  .RiverBreakout--variant-gridline .River__visual--has-background {
638
+ align-items: flex-end;
638
639
  padding: var(--base-size-64);
640
+ padding-block-end: 0;
641
+ }
642
+
643
+ .RiverBreakout--variant-gridline .River__visual--has-background img,
644
+ .RiverBreakout--variant-gridline .River__visual--has-background picture,
645
+ .RiverBreakout--variant-gridline .River__visual--has-background video {
646
+ border-end-start-radius: 0;
647
+ border-end-end-radius: 0;
639
648
  }
640
649
 
641
650
  .RiverBreakout--variant-gridline .River__visual--has-background.River__visual--rounded {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/brand-css",
3
- "version": "0.66.0-rc.d5c4bb5d",
3
+ "version": "0.66.1-rc.612823df",
4
4
  "description": "CSS stylesheets for Primer Brand components",
5
5
  "keywords": [
6
6
  "primer",