Skip to content

Commit 8eb9340

Browse files
author
[ Cassondra ]
committed
feat Revert changes to demo page adding resize to all cards
1 parent 7b80b8f commit 8eb9340

File tree

2 files changed

+24
-12
lines changed

2 files changed

+24
-12
lines changed

‎elements/pfe-cta/demo/demo.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,24 @@ pfe-band[pfe-color="lightest"] pfe-card[pfe-color="lightest"] {
3535
flex-flow: row wrap;
3636
margin-top: -10px;
3737
margin-left: -20px;
38+
@supports (display: grid) {
39+
display: grid;
40+
grid-row-gap: 10px;
41+
grid-column-gap: 20px;
42+
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
43+
margin-top: 0;
44+
margin-left: 0;
45+
}
3846
}
3947

4048
.cta-layout > *:not([class~="layout"]),
4149
.card-layout .cta-align > * {
4250
margin-top: 10px;
4351
margin-left: 20px;
52+
@supports (display: grid) {
53+
margin-top: 0;
54+
margin-left: 0;
55+
}
4456
}
4557

4658
.card-layout > *:not([class~="layout"]) {

‎elements/pfe-cta/demo/index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ <h1 slot="pfe-band--header"><code>&lt;pfe-cta&gt;</code> demo page</h1>
5050
<pfe-band pfe-color="lightest" style="--pfe-band--Border: 1px solid #ddd">
5151
<h2 slot="pfe-band--header">CTAs in light containers</h2>
5252
<div class="card-layout">
53-
<pfe-card class="resize" pfe-color="lightest" pfe-size="small">
53+
<pfe-card pfe-color="lightest" pfe-size="small">
5454
<h3 slot="pfe-card--header">No color attribute</h3>
5555
<div class="cta-align">
5656
<pfe-cta><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -61,7 +61,7 @@ <h3 slot="pfe-card--header">No color attribute</h3>
6161
</div>
6262
<div class="event-registry" slot="pfe-card--footer"></div>
6363
</pfe-card>
64-
<pfe-card class="resize" pfe-color="lightest" pfe-size="small">
64+
<pfe-card pfe-color="lightest" pfe-size="small">
6565
<h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
6666
<div class="cta-align">
6767
<pfe-cta pfe-color="base"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -75,7 +75,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
7575
</div>
7676
<div class="event-registry" slot="pfe-card--footer"></div>
7777
</pfe-card>
78-
<pfe-card class="resize" pfe-color="lighter" pfe-size="small">
78+
<pfe-card pfe-color="lighter" pfe-size="small">
7979
<h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
8080
<div class="cta-align">
8181
<pfe-cta pfe-color="accent"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -89,7 +89,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
8989
</div>
9090
<div class="event-registry" slot="pfe-card--footer"></div>
9191
</pfe-card>
92-
<pfe-card class="resize" pfe-color="lighter" pfe-size="small">
92+
<pfe-card pfe-color="lighter" pfe-size="small">
9393
<h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
9494
<div class="cta-align">
9595
<pfe-cta pfe-color="complement"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -109,7 +109,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
109109
<pfe-band pfe-color="lightest" style="--pfe-band--Border: 1px solid #ddd">
110110
<h2 slot="pfe-band--header">CTAs in dark containers</h2>
111111
<div class="card-layout">
112-
<pfe-card class="resize" pfe-color="darkest" pfe-size="small">
112+
<pfe-card pfe-color="darkest" pfe-size="small">
113113
<h3 slot="pfe-card--header">No color attribute</h3>
114114
<div class="cta-align">
115115
<pfe-cta><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -120,7 +120,7 @@ <h3 slot="pfe-card--header">No color attribute</h3>
120120
</div>
121121
<div class="event-registry" slot="pfe-card--footer"></div>
122122
</pfe-card>
123-
<pfe-card class="resize" pfe-color="darkest" pfe-size="small">
123+
<pfe-card pfe-color="darkest" pfe-size="small">
124124
<h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
125125
<div class="cta-align">
126126
<pfe-cta pfe-color="base"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -134,7 +134,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
134134
</div>
135135
<div class="event-registry" slot="pfe-card--footer"></div>
136136
</pfe-card>
137-
<pfe-card class="resize" pfe-color="darker" pfe-size="small">
137+
<pfe-card pfe-color="darker" pfe-size="small">
138138
<h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
139139
<div class="cta-align">
140140
<pfe-cta pfe-color="accent"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -148,7 +148,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
148148
</div>
149149
<div class="event-registry" slot="pfe-card--footer"></div>
150150
</pfe-card>
151-
<pfe-card class="resize" pfe-color="darker" pfe-size="small">
151+
<pfe-card pfe-color="darker" pfe-size="small">
152152
<h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
153153
<div class="cta-align">
154154
<pfe-cta pfe-color="complement"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -168,7 +168,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
168168
<pfe-band pfe-color="lightest" style="--pfe-band--Border: 1px solid #ddd">
169169
<h2 slot="pfe-band--header">CTAs in saturated containers</h2>
170170
<div class="card-layout">
171-
<pfe-card class="resize" pfe-color="complement" pfe-size="small">
171+
<pfe-card pfe-color="complement" pfe-size="small">
172172
<h3 slot="pfe-card--header">No color attribute</h3>
173173
<div class="cta-align">
174174
<pfe-cta><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -179,7 +179,7 @@ <h3 slot="pfe-card--header">No color attribute</h3>
179179
</div>
180180
<div class="event-registry" slot="pfe-card--footer"></div>
181181
</pfe-card>
182-
<pfe-card class="resize" pfe-color="complement" pfe-size="small">
182+
<pfe-card pfe-color="complement" pfe-size="small">
183183
<h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
184184
<div class="cta-align">
185185
<pfe-cta pfe-color="base"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -193,7 +193,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="base"</code></h3>
193193
</div>
194194
<div class="event-registry" slot="pfe-card--footer"></div>
195195
</pfe-card>
196-
<pfe-card class="resize" pfe-color="accent" pfe-size="small">
196+
<pfe-card pfe-color="accent" pfe-size="small">
197197
<h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
198198
<div class="cta-align">
199199
<pfe-cta pfe-color="accent"><a href="https://www.redhat.com#default">Default</a></pfe-cta>
@@ -207,7 +207,7 @@ <h3 slot="pfe-card--header"><code>pfe-color="accent"</code></h3>
207207
</div>
208208
<div class="event-registry" slot="pfe-card--footer"></div>
209209
</pfe-card>
210-
<pfe-card class="resize" pfe-color="accent" pfe-size="small">
210+
<pfe-card pfe-color="accent" pfe-size="small">
211211
<h3 slot="pfe-card--header"><code>pfe-color="complement"</code></h3>
212212
<div class="cta-align">
213213
<pfe-cta pfe-color="complement"><a href="https://www.redhat.com#default">Default</a></pfe-cta>

0 commit comments

Comments
 (0)