Skip to content

Commit 777e2ce

Browse files
gwyneplainekyledurandlaurkim
authored and
sophschneider
committed
cards se23 (#9277)
Remerging #9261 into v11.x.x to fix bad rebase --------- Co-authored-by: Kyle Durand <kyledurand@users.noreply.github.com> Co-authored-by: Lo Kim <lo.kim@shopify.com> Co-authored-by: kyledurand <kyle.durand@shopify.com>
1 parent e22e484 commit 777e2ce

File tree

2 files changed

+219
-0
lines changed

2 files changed

+219
-0
lines changed

‎polaris-react/src/components/Card/Card.scss‎

Lines changed: 192 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,192 @@
1+
@import '../../styles/common';
2+
3+
.Card {
4+
background-color: var(--p-color-bg);
5+
box-shadow: var(--p-shadow-md);
6+
outline: var(--p-border-width-1) solid transparent;
7+
8+
#{$se23} & {
9+
/* stylelint-disable -- SE23 temporary styles */
10+
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.07), inset 0px -1px 0px #d4d4d4,
11+
inset -1px 0px 0px #e3e3e3, inset 1px 0px 0px #e3e3e3,
12+
inset 0px 1px 0px #e3e3e3;
13+
/* stylelint-enable */
14+
}
15+
16+
+ .Card {
17+
margin-top: var(--p-space-4);
18+
19+
@media print {
20+
margin-top: calc(-1 * var(--p-space-2));
21+
}
22+
}
23+
/* stylelint-disable-next-line polaris/conventions/selector-disallowed-list -- Temporary override, will be removed in v11 */
24+
+ [class^='Polaris-LegacyCard'] {
25+
margin-top: var(--p-space-4);
26+
27+
@media print {
28+
margin-top: calc(-1 * var(--p-space-2));
29+
}
30+
}
31+
32+
@media #{$p-breakpoints-sm-up} {
33+
border-radius: var(--p-border-radius-2);
34+
35+
#{$se23} & {
36+
border-radius: var(--p-border-radius-3);
37+
}
38+
}
39+
40+
@media print {
41+
box-shadow: none;
42+
}
43+
}
44+
45+
.subdued {
46+
background-color: var(--p-color-bg-subdued);
47+
}
48+
49+
.Section-hideOnPrint,
50+
.hideOnPrint {
51+
@media print {
52+
// stylelint-disable-next-line declaration-no-important -- Enforce print styles
53+
display: none !important;
54+
}
55+
}
56+
57+
.Header {
58+
padding: var(--p-space-4) var(--p-space-4) 0;
59+
60+
@media #{$p-breakpoints-sm-up} {
61+
padding: var(--p-space-5) var(--p-space-5) 0;
62+
}
63+
64+
@media print and #{$p-breakpoints-sm-up} {
65+
padding: var(--p-space-2) var(--p-space-4) 0;
66+
}
67+
}
68+
69+
.Section {
70+
padding: var(--p-space-4);
71+
72+
@media #{$p-breakpoints-sm-up} {
73+
padding: var(--p-space-5);
74+
}
75+
76+
+ .Section {
77+
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
78+
79+
#{$se23} & {
80+
/* stylelint-disable-next-line polaris/color/function-disallowed-list -- se23 temporary styles */
81+
border-top: 1px solid rgba(235, 235, 235, 1);
82+
}
83+
84+
@media print {
85+
border-top: 0;
86+
}
87+
}
88+
89+
@media print {
90+
padding-top: var(--p-space-1);
91+
padding-bottom: var(--p-space-1);
92+
}
93+
}
94+
95+
.Section:first-child {
96+
border-top-left-radius: var(--p-border-radius-2);
97+
border-top-right-radius: var(--p-border-radius-2);
98+
99+
#{$se23} & {
100+
border-top-left-radius: var(--p-border-radius-3);
101+
border-top-right-radius: var(--p-border-radius-3);
102+
}
103+
}
104+
105+
.Section:last-child {
106+
border-bottom-left-radius: var(--p-border-radius-2);
107+
border-bottom-right-radius: var(--p-border-radius-2);
108+
109+
#{$se23} & {
110+
border-bottom-left-radius: var(--p-border-radius-3);
111+
border-bottom-right-radius: var(--p-border-radius-3);
112+
}
113+
}
114+
115+
.Section-fullWidth {
116+
padding: var(--p-space-4) 0;
117+
118+
@media #{$p-breakpoints-sm-up} {
119+
padding: var(--p-space-5) 0;
120+
}
121+
}
122+
123+
.Section-flush {
124+
padding: 0;
125+
126+
@media #{$p-breakpoints-sm-up} {
127+
padding: 0;
128+
}
129+
}
130+
131+
.Section-subdued {
132+
background-color: var(--p-color-bg-subdued);
133+
134+
@media (-ms-high-contrast: active) {
135+
background-color: transparent;
136+
}
137+
138+
.Header + & {
139+
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
140+
margin-top: var(--p-space-5);
141+
}
142+
}
143+
144+
.SectionHeader {
145+
padding-bottom: var(--p-space-2);
146+
147+
.Section-fullWidth & {
148+
padding-left: var(--p-space-4);
149+
padding-right: var(--p-space-4);
150+
151+
@media #{$p-breakpoints-sm-up} {
152+
padding-left: var(--p-space-5);
153+
padding-right: var(--p-space-5);
154+
}
155+
}
156+
}
157+
158+
.Subsection {
159+
+ .Subsection {
160+
margin-top: var(--p-space-4);
161+
padding-top: var(--p-space-4);
162+
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
163+
164+
@media print {
165+
border-top: 0;
166+
}
167+
}
168+
169+
@media print {
170+
padding-top: var(--p-space-1);
171+
padding-bottom: var(--p-space-1);
172+
}
173+
}
174+
175+
.Footer {
176+
display: flex;
177+
justify-content: flex-end;
178+
padding: 0 var(--p-space-4) var(--p-space-4);
179+
180+
@media #{$p-breakpoints-sm-up} {
181+
padding: 0 var(--p-space-5) var(--p-space-5);
182+
}
183+
184+
&.LeftJustified {
185+
justify-content: flex-start;
186+
}
187+
188+
.Section-subdued + & {
189+
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
190+
padding: var(--p-space-5);
191+
}
192+
}

‎polaris-react/src/components/LegacyCard/LegacyCard.scss‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@
55
box-shadow: var(--p-shadow-md);
66
outline: var(--p-border-width-1) solid transparent;
77

8+
#{$se23} & {
9+
/* stylelint-disable -- SE23 temporary styles */
10+
box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.07), inset 0px -1px 0px #d4d4d4,
11+
inset -1px 0px 0px #e3e3e3, inset 1px 0px 0px #e3e3e3,
12+
inset 0px 1px 0px #e3e3e3;
13+
/* stylelint-enable */
14+
}
15+
816
+ .LegacyCard {
917
margin-top: var(--p-space-4);
1018

@@ -15,6 +23,10 @@
1523

1624
@media #{$p-breakpoints-sm-up} {
1725
border-radius: var(--p-border-radius-2);
26+
27+
#{$se23} & {
28+
border-radius: var(--p-border-radius-3);
29+
}
1830
}
1931

2032
@media print {
@@ -56,6 +68,11 @@
5668
+ .Section {
5769
border-top: var(--p-border-width-1) solid var(--p-color-border-subdued);
5870

71+
#{$se23} & {
72+
/* stylelint-disable-next-line polaris/color/function-disallowed-list -- se23 temporary styles */
73+
border-top: 1px solid rgba(235, 235, 235, 1);
74+
}
75+
5976
@media print {
6077
border-top: 0;
6178
}
@@ -70,11 +87,21 @@
7087
.Section:first-child {
7188
border-top-left-radius: var(--p-border-radius-2);
7289
border-top-right-radius: var(--p-border-radius-2);
90+
91+
#{$se23} & {
92+
border-top-left-radius: var(--p-border-radius-3);
93+
border-top-right-radius: var(--p-border-radius-3);
94+
}
7395
}
7496

7597
.Section:last-child {
7698
border-bottom-left-radius: var(--p-border-radius-2);
7799
border-bottom-right-radius: var(--p-border-radius-2);
100+
101+
#{$se23} & {
102+
border-bottom-left-radius: var(--p-border-radius-3);
103+
border-bottom-right-radius: var(--p-border-radius-3);
104+
}
78105
}
79106

80107
.Section-fullWidth {

0 commit comments

Comments
 (0)