Skip to content

Commit 1fbf662

Browse files
chrisdo1chrisdo1
committed
US198282 adjusted padding for headers, panels.
1 parent 2c8fd55 commit 1fbf662

File tree

2 files changed

+79
-9
lines changed

2 files changed

+79
-9
lines changed

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

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ <h3>Where do the main characters work as adults?</h3>
9191
</section>
9292

9393
<section class="dark-background" >
94-
<h2 style="color:white;">pfe-accordion on=dark only, manually copied to children</h2><br/>
94+
<h2 style="color:white;">pfe-accordion on=dark</h2><br/>
9595
<pfe-accordion on="dark">
9696
<pfe-accordion-header>
9797
<h3>Why do wizards need money if they could just create it?</h3>
@@ -126,6 +126,75 @@ <h3>Where do the main characters work as adults?</h3>
126126
</pfe-accordion-panel>
127127
</pfe-accordion>
128128
</section>
129+
<section class="light-gray-background">
130+
<h2>&lt;pfe-accordion&gt; nested</h2><br/>
131+
<pfe-accordion>
132+
133+
<pfe-accordion-header>
134+
<h3>Why do wizards need money if they could just create it?</h3>
135+
</pfe-accordion-header>
136+
<pfe-accordion-panel>
137+
<pfe-accordion>
138+
<pfe-accordion-header>
139+
<h3>Why do wizards need money if they could just create it?</h3>
140+
</pfe-accordion-header>
141+
<pfe-accordion-panel>
142+
<p>There is legislation that decides what you can conjure and what you can not. Because things that you conjure out of thin air will not last, it is illegal in the wizarding world.</p>
143+
</pfe-accordion-panel>
144+
<pfe-accordion-header>
145+
<h3>Why doesn't Harry have a portrait of his parents?</h3>
146+
</pfe-accordion-header>
147+
<pfe-accordion-panel>
148+
<p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general represe<a href="foobarbaz.com">ntation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
149+
</pfe-accordion-panel>
150+
<pfe-accordion-header>
151+
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
152+
</pfe-accordion-header>
153+
<pfe-accordion-panel>
154+
<p>Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.</p>
155+
</pfe-accordion-panel>
156+
<pfe-accordion-header>
157+
<h3>Is Hogwarts the only wizarding school?</h3>
158+
</pfe-accordion-header>
159+
<pfe-accordion-panel>
160+
<p>No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.</p>
161+
</pfe-accordion-panel>
162+
<pfe-accordion-header>
163+
<h3>Where do the main characters work as adults?</h3>
164+
</pfe-accordion-header>
165+
<pfe-accordion-panel>
166+
<p>Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.</p>
167+
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
168+
</pfe-accordion-panel>
169+
</pfe-accordion>
170+
</pfe-accordion-panel>
171+
<pfe-accordion-header>
172+
<h3>Why doesn't Harry have a portrait of his parents?</h3>
173+
</pfe-accordion-header>
174+
<pfe-accordion-panel>
175+
<p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general represe<a href="foobarbaz.com">ntation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
176+
</pfe-accordion-panel>
177+
<pfe-accordion-header>
178+
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
179+
</pfe-accordion-header>
180+
<pfe-accordion-panel>
181+
<p>Because Harry's grandparents were not able to do magic. This is generally frowned upon by those who consider themselves pure, such as the Malfoy's or other antagonists.</p>
182+
</pfe-accordion-panel>
183+
<pfe-accordion-header>
184+
<h3>Is Hogwarts the only wizarding school?</h3>
185+
</pfe-accordion-header>
186+
<pfe-accordion-panel>
187+
<p>No! It has been revealed that there are actually 11 long established and prestigious schools around the globe. These include Castelobruxo in the rainforest of Brazil, Durmstrang Institute (whereas nobody is certain of it’s whereabouts), and Ilvermorny, right here in the United States.</p>
188+
</pfe-accordion-panel>
189+
<pfe-accordion-header>
190+
<h3>Where do the main characters work as adults?</h3>
191+
</pfe-accordion-header>
192+
<pfe-accordion-panel>
193+
<p>Harry and Hermione are at the Ministry: he ends up leading the Auror department. Ron helps George at the joke shop and does very well. Ginny becomes a professional Quidditch player and then sportswriter for the Daily Prophet.</p>
194+
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
195+
</pfe-accordion-panel>
196+
</pfe-accordion>
197+
</section>
129198

130199
</body>
131200
</html>

‎elements/pfe-sass/mixins/_mixins.scss‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,8 @@ $pfe-expand_chevron--size: 0.4em;
232232
$pfe-expand_chevron--weight: 0.1em;
233233
$pfe-expand_chevron--placement: ($pfe-expand_button--LineHeight / 2) - ($pfe-expand_chevron--size / 2);
234234
$pfe-expand_button--padding-factor: 0.75;
235-
$pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor});
235+
$pfe-expand_button--padding: #{pfe-var(container-spacer)};
236+
$pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5);
236237

237238
@mixin pfe-accordion-header {
238239
display: block;
@@ -288,10 +289,10 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
288289
border: 0;
289290
}
290291
@if $theme == right {
291-
padding: $pfe-expand_button--padding $pfe-expand_button--padding $pfe-expand_button--padding 50px;
292+
padding: $pfe-expand_button--padding $pfe-expand_button--padding-wide $pfe-expand_button--padding 50px;
292293
}
293294
@else {
294-
padding: $pfe-expand_button--padding 50px $pfe-expand_button--padding $pfe-expand_button--padding;
295+
padding: $pfe-expand_button--padding 50px $pfe-expand_button--padding $pfe-expand_button--padding-wide;
295296
}
296297
//[scale="large"] & { @TODO later, type scale support
297298
// font-size: calc((#{pfe-var(font-size)} * 1.3));
@@ -391,10 +392,10 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
391392
transition: transform 0.15s;
392393
transform: rotate(45deg);
393394
@if $position == before {
394-
left: #{pfe-var(container-spacer)};
395+
left: $pfe-expand_button--padding-wide;
395396
}
396397
@else {
397-
right: #{pfe-var(container-spacer)};
398+
right: $pfe-expand_button--padding-wide;
398399
}
399400
}
400401

@@ -412,10 +413,10 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
412413
transition: all 0.15s;
413414
transform: rotate(-45deg);
414415
@if $position == before {
415-
left: #{pfe-var(container-spacer)};
416+
left: $pfe-expand_button--padding-wide;
416417
}
417418
@else {
418-
right: #{pfe-var(container-spacer)};
419+
right: $pfe-expand_button--padding-wide;
419420
}
420421
}
421422

@@ -482,6 +483,6 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b
482483

483484
@mixin pfe-accordion-panel-container-inset {
484485
box-sizing: border-box;
485-
padding: 0 #{pfe-var(container-spacer)} #{pfe-var(container-spacer)};
486+
padding: 0 $pfe-expand_button--padding-wide $pfe-expand_button--padding;
486487
width: 100%;
487488
}

0 commit comments

Comments
 (0)