Skip to content

Commit dc0b3f4

Browse files
castastrophecastastrophe
authored
Merge branch 'master' into set-accordion-placeholders
2 parents 4ac6fa6 + a2867f3 commit dc0b3f4

File tree

2 files changed

+110
-28
lines changed

2 files changed

+110
-28
lines changed

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

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,7 @@
8282
<body unresolved class="editorial body1 generic1">
8383
<pfe-band pfe-size="small"><h1>&lt;pfe-band&gt;</h1></pfe-band>
8484

85+
<div style="width: 1000px;margin:auto;"> <!-- arbitrary restricting container -->
8586
<pfe-band pfe-color="lightest">
8687
<header slot="pfe-band--header">
8788
<h1>Lightest band, header region</h1>
@@ -102,7 +103,7 @@ <h3 slot="header">Aside: right body bottom</h3>
102103
</pfe-cta>
103104
</pfe-card>
104105
</pfe-band>
105-
106+
</div>
106107
<pfe-band pfe-color="lighter" pfe-aside-desktop="left">
107108
<header slot="pfe-band--header">
108109
<h2>Lighter band; no footer</h2>
@@ -194,7 +195,7 @@ <h2>Accent band</h2>
194195
<pfe-cta priority="primary">
195196
<a href="#">Learn more</a>
196197
</pfe-cta>
197-
<pfe-card color="lightest" slot="pfe-band--aside" style="height: -webkit-fill-available;">
198+
<pfe-card color="lightest" slot="pfe-band--aside">
198199
<h3 slot="header">Aside: left body top</h3>
199200
<p>Ut wisi enim ad minim veniam.</p>
200201
<pfe-cta slot="footer" priority="tertiary">
@@ -209,6 +210,29 @@ <h3 slot="header">Aside: left body top</h3>
209210
</footer>
210211
</pfe-band>
211212

213+
<pfe-band pfe-aside-desktop="left" pfe-aside-mobile="top">
214+
<header slot="pfe-band--header">
215+
<h2>Short content band</h2>
216+
<p class="custom-band-summary">Header region, consetetur sadluptua.</p>
217+
</header>
218+
<p>Short content sadipscing elitra.</p>
219+
<pfe-cta priority="primary">
220+
<a href="#">Learn more</a>
221+
</pfe-cta>
222+
<pfe-card color="lightest" slot="pfe-band--aside">
223+
<h3 slot="header">Aside: left body top</h3>
224+
<p>Ut wisi enim ad minim veniam.</p>
225+
<pfe-cta slot="footer" priority="tertiary">
226+
<a href="#">Learn more</a>
227+
</pfe-cta>
228+
</pfe-card>
229+
<footer slot="pfe-band--footer" class="custom-footnote">
230+
<ol>
231+
<li>Footnote ipsum accusam et justo duo dolores et ea rebum.</li>
232+
</ol>
233+
</footer>
234+
</pfe-band>
235+
212236
<pfe-band pfe-color="complement" pfe-aside-desktop="left" pfe-aside-mobile="top" pfe-aside-height="body">
213237
<header slot="pfe-band--header">
214238
<h2>Complement band, layout classes</h2>

‎elements/pfe-band/src/pfe-band.scss‎

Lines changed: 84 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -118,19 +118,23 @@ $LOCAL: band;
118118
--pfe-band--gridTemplateArea_mobile: "body";
119119
// Styles for the different combination of regions
120120
&[pfe-has-aside] {
121-
--pfe-band--gridTemplateArea_mobile: "body" "aside";
122-
--pfe-band--gridTemplateArea_desktop: "body aside";
121+
--pfe-band--gridTemplateArea_mobile:
122+
"body" "aside";
123+
--pfe-band--gridTemplateArea_desktop:
124+
"body aside";
123125
@media (min-width: #{pfe-breakpoint(md)}) {
124126
--pfe-band--layout: 1fr #{pfe-local(Width__aside--sm)};
125127
}
126128
@media (min-width: #{pfe-breakpoint(lg)}) {
127129
--pfe-band--layout: 1fr #{pfe-local(Width__aside--lg)};
128130
}
129131
&[pfe-aside-mobile="top"] {
130-
--pfe-band--gridTemplateArea_mobile: "aside" "body";
132+
--pfe-band--gridTemplateArea_mobile:
133+
"aside" "body";
131134
}
132135
&[pfe-aside-desktop="left"] {
133-
--pfe-band--gridTemplateArea_desktop: "aside body";
136+
--pfe-band--gridTemplateArea_desktop:
137+
"aside body";
134138
@media (min-width: #{pfe-breakpoint(md)}) {
135139
--pfe-band--layout: #{pfe-local(Width__aside--sm)} 1fr;
136140
}
@@ -140,66 +144,120 @@ $LOCAL: band;
140144
}
141145
}
142146
&[pfe-has-header] {
143-
--pfe-band--gridTemplateArea_mobile: "header" "body";
147+
--pfe-band--gridTemplateArea_mobile:
148+
"header" "body";
144149
&[pfe-has-aside] {
145-
--pfe-band--gridTemplateArea_mobile: "header" "body" "aside";
146-
--pfe-band--gridTemplateArea_desktop: "header header" "body aside";
150+
--pfe-band--gridTemplateArea_mobile:
151+
"header"
152+
"body" "aside";
153+
--pfe-band--gridTemplateArea_desktop:
154+
"header header"
155+
"body aside";
147156
}
148157
&[pfe-aside-mobile="top"] {
149-
--pfe-band--gridTemplateArea_mobile: "aside" "header" "body";
158+
--pfe-band--gridTemplateArea_mobile:
159+
"aside"
160+
"header"
161+
"body";
150162
}
151163
&[pfe-aside-height="full"] {
152-
--pfe-band--gridTemplateArea_desktop: "header aside" "body aside";
164+
--pfe-band--gridTemplateArea_desktop:
165+
"header aside"
166+
"body aside";
153167
}
154168
&[pfe-aside-desktop="left"] {
155-
--pfe-band--gridTemplateArea_desktop: "header header" "aside body";
169+
--pfe-band--gridTemplateArea_desktop:
170+
"header header"
171+
"aside body";
156172
&[pfe-aside-height="full"] {
157-
--pfe-band--gridTemplateArea_desktop: "aside header" "aside body";
173+
--pfe-band--gridTemplateArea_desktop:
174+
"aside header"
175+
"aside body";
158176
}
159177
}
160178
}
161179
&[pfe-has-footer] {
162-
--pfe-band--gridTemplateArea_mobile: "body" "footer";
180+
--pfe-band--gridTemplateArea_mobile:
181+
"body"
182+
"footer";
163183
&[pfe-has-aside] {
164-
--pfe-band--gridTemplateArea_mobile: "body" "aside" "footer";
165-
--pfe-band--gridTemplateArea_desktop: "body aside" "footer footer";
184+
--pfe-band--gridTemplateArea_mobile:
185+
"body"
186+
"aside"
187+
"footer";
188+
--pfe-band--gridTemplateArea_desktop:
189+
"body aside"
190+
"footer footer";
166191
}
167192
&[pfe-aside-mobile="top"] {
168-
--pfe-band--gridTemplateArea_mobile: "aside" "body" "footer";
193+
--pfe-band--gridTemplateArea_mobile:
194+
"aside"
195+
"body"
196+
"footer";
169197
}
170198
&[pfe-aside-height="full"] {
171-
--pfe-band--gridTemplateArea_desktop: "body aside" "footer aside" ;
199+
--pfe-band--gridTemplateArea_desktop:
200+
"body aside"
201+
"footer aside" ;
172202
}
173203
&[pfe-aside-desktop="left"] {
174-
--pfe-band--gridTemplateArea_desktop: "aside body" "footer footer";
204+
--pfe-band--gridTemplateArea_desktop:
205+
"aside body"
206+
"footer footer";
175207
&[pfe-aside-height="full"] {
176-
--pfe-band--gridTemplateArea_desktop: "aside body" "aside footer";
208+
--pfe-band--gridTemplateArea_desktop:
209+
"aside body"
210+
"aside footer";
177211
}
178212
}
179213
}
180214
&[pfe-has-header][pfe-has-footer] {
181-
--pfe-band--gridTemplateArea_mobile: "header" "body" "footer";
215+
--pfe-band--gridTemplateArea_mobile:
216+
"header"
217+
"body"
218+
"footer";
182219
&[pfe-has-aside] {
183-
--pfe-band--gridTemplateArea_mobile: "header" "body" "footer" "aside";
184-
--pfe-band--gridTemplateArea_desktop: "header header" "body aside" "footer footer";
220+
--pfe-band--gridTemplateArea_mobile:
221+
"header"
222+
"body"
223+
"footer"
224+
"aside";
225+
--pfe-band--gridTemplateArea_desktop:
226+
"header header"
227+
"body aside"
228+
"footer footer";
185229
}
186230
&[pfe-aside-mobile="top"] {
187-
--pfe-band--gridTemplateArea_mobile: "aside" "header" "body" "footer";
231+
--pfe-band--gridTemplateArea_mobile:
232+
"aside"
233+
"header"
234+
"body"
235+
"footer";
188236
}
189237
&[pfe-aside-height="full"] {
190-
--pfe-band--gridTemplateArea_desktop: "header aside" "body aside" "footer aside" ;
238+
--pfe-band--gridTemplateArea_desktop:
239+
"header aside"
240+
"body aside"
241+
"footer aside" ;
191242
}
192243
&[pfe-aside-desktop="left"] {
193-
--pfe-band--gridTemplateArea_desktop: "header header" "aside body" "footer footer";
244+
--pfe-band--gridTemplateArea_desktop:
245+
"header header"
246+
"aside body"
247+
"footer footer";
194248
&[pfe-aside-height="full"] {
195-
--pfe-band--gridTemplateArea_desktop: "aside header" "aside body" "aside footer";
249+
--pfe-band--gridTemplateArea_desktop:
250+
"aside header"
251+
"aside body"
252+
"aside footer";
196253
}
197254
}
198255
}
199256

200257
position: relative;
201258
margin: 0 auto;
202-
width: #{pfe-local(Width)};
259+
width: 100%;
260+
max-width: #{pfe-local(Width)};
203261
@extend %flex-fallback;
204262

205263
// Grid support styles

0 commit comments

Comments
 (0)