Skip to content

Commit 5921d31

Browse files
castastrophecastastrophe
authored
Merge branch 'set-accordion-placeholders' into set-accordion-placeholders-fork
2 parents cb62306 + c8b63dd commit 5921d31

File tree

6 files changed

+19
-13
lines changed

6 files changed

+19
-13
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="utf-8">
55
<title>PFElements: pfe-accordion Demo</title>
6-
<!--
6+
<!-- Stylesheets for testing light DOM styles.
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
88
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
99
-->
@@ -66,7 +66,7 @@ <h3>Why do wizards need money if they could just create it?</h3>
6666
<h3>Why doesn't Harry have a portrait of his parents?</h3>
6767
</pfe-accordion-header>
6868
<pfe-accordion-panel>
69-
<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>
69+
<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 a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
7070
</pfe-accordion-panel>
7171
<pfe-accordion-header>
7272
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
@@ -103,7 +103,7 @@ <h3>Why do wizards need money if they could just create it?</h3>
103103
<h3>Why doesn't Harry have a portrait of his parents?</h3>
104104
</pfe-accordion-header>
105105
<pfe-accordion-panel>
106-
<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>
106+
<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 <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
107107
</pfe-accordion-panel>
108108
<pfe-accordion-header>
109109
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
@@ -145,7 +145,7 @@ <h3>Why do wizards need money if they could just create it?</h3>
145145
<h3>Why doesn't Harry have a portrait of his parents?</h3>
146146
</pfe-accordion-header>
147147
<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>
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 <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
149149
</pfe-accordion-panel>
150150
<pfe-accordion-header>
151151
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
@@ -172,7 +172,7 @@ <h3>Where do the main characters work as adults?</h3>
172172
<h3>Why doesn't Harry have a portrait of his parents?</h3>
173173
</pfe-accordion-header>
174174
<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>
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 <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
176176
</pfe-accordion-panel>
177177
<pfe-accordion-header>
178178
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>

‎elements/pfe-accordion/src/pfe-accordion-panel.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
.container {
26-
@include pfe-accordion-panel-container-inset;
26+
@include pfe-accordion-panel-container-inset($align: left);
2727
}
2828

2929
:host(:last-of-type[expanded]) {

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@
195195
/// ===========================================================================
196196
/// Accordion Specific SASS Vars
197197
/// ===========================================================================
198+
198199
$pfe-expand_button--LineHeight: 1.5;
199200
$pfe-expand_button--Padding--factor: .75;
200201
$pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5);
@@ -390,24 +391,30 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe
390391

391392
@mixin pfe-accordion-panel-expanded-style($theme: light) {
392393
border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent;
393-
border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent;
394+
border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent;
394395
@if $theme == dark {
395396
box-shadow: none;
396397
background-color: #{pfe-color(surface--darker)};
397398
border-left-color: #{pfe-color(surface--darkest--text)};
398399
border-right-color: #{pfe-color(surface--darkest--text)};
399400
}
400401
@else {
401-
box-shadow: 0 5px #{pfe-var(surface--border-width-thick)} rgba(140, 140, 140, 0.35);
402+
box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35);
402403
border-left-color: #{pfe-color(surface--lightest--link)};
403404
background-color: #{pfe-color(surface--lightest)};
404405
border-right-color: #{pfe-color(surface--border--lightest)};
405406
border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)};
406407
}
407408
}
408409

409-
@mixin pfe-accordion-panel-container-inset {
410+
@mixin pfe-accordion-panel-container-inset($align: left) {
410411
box-sizing: border-box;
411-
padding: 0 #{$pfe-expand_button--Padding--wide} #{pfe-var(container-spacer)};
412412
width: 100%;
413+
414+
@if $align == left {
415+
padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding-wide};
416+
}
417+
@else {
418+
padding: 0 #{$pfe-expand_button--padding-wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding};
419+
}
413420
}

‎elements/pfe-sass/variables/_colors.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ $pfe-color--surface--accent--link--focus: $pfe-color--ui-link--on-dark--fo
129129
/* Palette of Border Colors */
130130
$pfe-color--surface--border: $pfe-color--gray-200 !default; // Was #ccc
131131
$pfe-color--surface--border--lightest: $pfe-color--gray-100 !default; // Was #e7e7e7
132+
$pfe-color--surface--border--lighter: $pfe-color--gray-100 !default;
132133
$pfe-color--surface--border--darkest: $pfe-color--gray-800 !default;
133134
$pfe-color--surface--border--darker: $pfe-color--gray-300 !default;
134135

‎elements/pfe-sass/variables/_maps.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ $pfe-vars: (
183183
link--text-decoration--hover: underline,
184184

185185
surface--border-width: 1px,
186-
surface--border-width-thick: 3px,
186+
surface--border-width--heavy: 3px,
187187
surface--border-style: solid,
188188
surface--border-radius: 0,
189189
ui--border-width: 1px,

‎themes/cp-theme/src/cp-theme.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import "../red-hat-sass/red-hat";
2-
@import "./cp-maps";
31
// @import "../node_modules/normalize-scss/sass/normalize";
42

53
:root {

0 commit comments

Comments
 (0)