diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 2a0038b4bd..2854b9186a 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -3,10 +3,12 @@ PFElements: pfe-accordion Demo - + + - - + + + @@ -19,9 +21,11 @@ + -

<pfe-accordion>

+
- +

<pfe-accordion>


+ -

Why do wizards need money if they could just create it?

+

Why do wizards need money if they could just create it?

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.

 -

Why doesn't Harry have a portrait of his parents?

+

Why doesn't Harry have a portrait of his parents?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Why is Harry considered a half-blood if both of his parents could use magic?

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.

 -

Is Hogwarts the only wizarding school?

+

Is Hogwarts the only wizarding school?

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.

 -

Where do the main characters work as adults?

+

Where do the main characters work as adults?

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.

@@ -82,35 +87,36 @@

Where do the main characters work as adults?
-
-

Dark Accordion

- + +
+

pfe-accordion color=lighter


+ -

Why do wizards need money if they could just create it?

+

Why do wizards need money if they could just create it?

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.

 -

Why doesn't Harry have a portrait of his parents?

+

Why doesn't Harry have a portrait of his parents?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Why is Harry considered a half-blood if both of his parents could use magic?

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.

 -

Is Hogwarts the only wizarding school?

+

Is Hogwarts the only wizarding school?

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.

 -

Where do the main characters work as adults?

+

Where do the main characters work as adults?

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.

@@ -118,40 +124,41 @@

Where do the main characters work as adults?
-
-

Double-nested dark accordion

- + +
+

Double-nested light accordion


+ -

Why do wizards need money if they could just create it?

+

Why do wizards need money if they could just create it?

 - + -

Why do wizards need money if they could just create it?

+

Why do wizards need money if they could just create it?

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.

 -

Why doesn't Harry have a portrait of his parents?

+

Why doesn't Harry have a portrait of his parents?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Why is Harry considered a half-blood if both of his parents could use magic?

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.

 -

Is Hogwarts the only wizarding school?

+

Is Hogwarts the only wizarding school?

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.

 -

Where do the main characters work as adults?

+

Where do the main characters work as adults?

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.

@@ -160,25 +167,25 @@

Where do the main characters work as adults?

 -

Why doesn't Harry have a portrait of his parents?

+

Why doesn't Harry have a portrait of his parents?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Why is Harry considered a half-blood if both of his parents could use magic?

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.

 -

Is Hogwarts the only wizarding school?

+

Is Hogwarts the only wizarding school?

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.

 -

Where do the main characters work as adults?

+

Where do the main characters work as adults?

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.

@@ -186,40 +193,95 @@

Where do the main characters work as adults?
-
-

Double-nested light accordion

- + +
+

pfe-accordion on=dark only, manually copied to children **BUG**


+ + +

Why do wizards need money if they could just create it?

+ + +

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.

+ + +

Why doesn't Harry have a portrait of his parents?

+ + +

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+ + +

Why is Harry considered a half-blood if both of his parents could use magic?

+ + +

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.

+ + +

Is Hogwarts the only wizarding school?

+ + +

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.

+ + +

Where do the main characters work as adults?

+ + +

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.

+

Read more about the characters

+ + +
+
+

Double-nested dark accordion color="darker" on="dark"


+ -

Why do wizards need money if they could just create it?

+

Why do wizards need money if they could just create it?

 - - -

Why do wizards need money if they could just create it?

- - -

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.

- +

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.

+ + +

Why doesn't Harry have a portrait of his parents?

+ + +

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+ + +

Why is Harry considered a half-blood if both of his parents could use magic?

+ + +

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.

+ + +

Is Hogwarts the only wizarding school?

+ + +

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.

+ + +

Where do the main characters work as adults?

+ + + -

Why doesn't Harry have a portrait of his parents?

+

Why doesn't Harry have a portrait of his parents?

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

 -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Why is Harry considered a half-blood if both of his parents could use magic?

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.

 -

Is Hogwarts the only wizarding school?

+

Is Hogwarts the only wizarding school?

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.

 -

Where do the main characters work as adults?

+

Where do the main characters work as adults?

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.

@@ -227,32 +289,90 @@

Where do the main characters work as adults?

 + +
+ + + +

pfe-band, color=darkest, and on=dark with a light accordion, then a "default" accordion


+ -

Why doesn't Harry have a portrait of his parents?

+

FOO FOO FOO

 -

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+ + +

BAR BAR BAR

+ + +

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.

+ + +

BAZ BAZ

+ + +

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+ + -

Why is Harry considered a half-blood if both of his parents could use magic?

+

Where do the main characters work as adults?

 -

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.

+

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.

+

Read more about the characters

 + + +

lorem ipsum plain text in a paragraph lorem ipsum plain text in a paragraph lorem ipsum plain text in a paragraph lorem ipsum plain text in a paragraph

+ + -

Is Hogwarts the only wizarding school?

+

Accordion with color=darkest

 -

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.

+ + +

Foo headline

+ + +

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.

+ + +

Bar headline

+ + +

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+ + +

Baz headline

+ + +

The characters in the portraits are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general representation of the individual they depict. A portrait of his parents would not be of much help to Harry.

+ + -

Where do the main characters work as adults?

+

Where do the main characters work as adults?

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.

Read more about the characters

 + +

Is Hogwarts the only wizarding school?

+ + +

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.

+ -
+ + +
+
+
+
+
+

foo

- \ No newline at end of file + diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index 5fb2261fc0..1297e97e95 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -3,37 +3,45 @@ /// =========================================================================== /// DEFAULT ACCORDION HEADING /// =========================================================================== + + :host { - --pfe-expanded--border-left: transparent; - - display: block; - background: var(--pfe-expanded--main); - color: var(--pfe-expanded--aux); - border-left-width: 3px; - border-left-style: solid; - border-left-color: var(--pfe-expanded--border-left); + @include pfe-accordion-header; + button { - @include pfe-trigger-button; + @include pfe-trigger-button; // border 3px + @include pfe-trigger-color-light; - &[aria-expanded] { - @include pfe-trigger-expanded; - } - - &[aria-expanded="false"]::after { - @include pfe-chevron-expanded-false; + &[aria-expanded="true"] { + @include pfe-trigger-color-light-expanded; + @include pfe-trigger-expanded; } &[aria-expanded="true"]::after { - @include pfe-chevron-expanded-true; + @include pfe-chevron-expanded-true; + } + &[aria-expanded="false"]::after { + @include pfe-chevron-expanded-false; } - } - > * { - margin: 0; } } -:host(:last-of-type) { + +////////// last child + +:host([color="darker"]:last-of-type), +:host([color="darkest"]:last-of-type) { + button[aria-expanded="false"] { + @include pfe-trigger-button-last($theme: dark); + } } +:host([color="lighter"]:last-of-type), +:host([color="lightest"]:last-of-type) { + button[aria-expanded="false"] { + @include pfe-trigger-button-last($theme: light); + } +} + // Add border bottom to the last button in an accordion set. :host(:last-of-type) { @@ -41,23 +49,15 @@ @include pfe-trigger-button-last; } } -:host([color="dark"]:last-of-type), -:host([on="dark"]:last-of-type) { - button[aria-expanded="false"] { - @include pfe-trigger-button-last($theme: dark); - } + +:host(:last-of-type) { } :host(.animating) { transition: transform 0.3s #{pfe-var(animation-timing)}; } -h1, -h2, -h3, -h4, -h5, -h6 { +h1, h2, h3, h4, h5, h6 { margin: 1px; // Gives the 1px spacing between each + room for focus border. } @@ -65,31 +65,37 @@ h6 { /// COLOR OVERRIDES /// =========================================================================== -:host([color="light"]) { - @include pfe-trigger-color-light; +:host([color="lighter"]), +:host([color="lightest"]) { + button { + @include pfe-trigger-color-lightest; - button[aria-expanded="true"] { - @include pfe-trigger-color-light-borders; - } + &[aria-expanded="true"] { + @include pfe-trigger-color-light-expanded; + } + } +} +:host([color="lighter"]), +:host([color="lightest"]) { + @include pfe-trigger-color-lightest; } -:host([color="dark"]), + :host([on="dark"]) { - @include pfe-trigger-color-dark; button { - @include pfe-trigger-button($theme: dark); + @include pfe-trigger-color-dark; } } -:host([color="light"][aria-expanded="true"]) { - @include pfe-trigger-color-light-expanded; +:host([color="darker"]), +:host([color="darkest"]) { + button { + @include pfe-trigger-color-darkest; + } } - -:host([color="dark"][aria-expanded="true"]), -:host([on="dark"][aria-expanded="true"]) { - @include pfe-trigger-color-dark-expanded; +:host([on="dark"]), +:host([color="darker"]), +:host([color="darkest"]) { + @include pfe-trigger-color-darkest; } -:host([on="dark"]) { - @include pfe-theme($theme: dark); -} diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index a060783a1c..b729784953 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -1,40 +1,50 @@ @import "../../pfe-sass/pfe-sass"; -:host { - @include pfe-accordion-panel; +/// =========================================================================== +/// DEFAULT ACCORDION PANEL +/// =========================================================================== -::slotted(pfe-accordion) { - padding: 0 14px; - } +:host { + @include pfe-accordion-panel; } -:host([color="light"][expanded]) { - @include pfe-accordion-panel-expanded; +:host([expanded]) { + @include pfe-accordion-panel-expanded; + @include pfe-accordion-panel-expanded-style; +} + +:host([color="lighter"][expanded]), +:host([color="lightest"][expanded]) { + @include pfe-accordion-panel-expanded-style; + @include pfe-accordion-panel-expanded-style-lightest; } :host([color="dark"][expanded]) { - @include pfe-accordion-panel-expanded($theme: dark); + @include pfe-accordion-panel-expanded-style($theme: dark); } +:host([color="darker"][expanded]), +:host([color="darkest"][expanded]) { + @include pfe-accordion-panel-expanded-style($theme: dark); + @include pfe-accordion-panel-expanded-style-darkest; + } + + :host(.animating) { display: block; transition: height 0.3s ease-in-out; } + .container { - :host([color="light"]) & { - @include pfe-accordion-panel-container($theme: light); - } - - :host([color="dark"]) & { - @include pfe-accordion-panel-container($theme: dark); - } + @include pfe-accordion-panel-container-inset; } - -:host(:last-of-type[color="dark"][expanded]) { - @include pfe-accordion-panel-expanded-last-dark; + +:host(:last-of-type[expanded]) { + @include pfe-accordion-panel-expanded-last; } +:host(:last-of-type[color="darker"][expanded]), +:host(:last-of-type[color="darkest"][expanded]) { + @include pfe-accordion-panel-expanded-last-dark; + } -:host([on="dark"]) { - @include pfe-theme($theme: dark); -} \ No newline at end of file diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss index ce55f360b2..93670a9163 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -5,4 +5,28 @@ position: relative; overflow: hidden; margin: 0; + color: var(--pfe-broadcasted--color--text); } + +:host([on="dark"]) { + @include pfe-theme($theme: "dark"); +} +:host([color="darker"]) { + @include pfe-theme($theme: "darker"); +} +:host([color="darkest"]) { + @include pfe-theme($theme: "darkest"); +} + + +:host([on="light"]) { + @include pfe-theme($theme: "light"); +} + +:host([on="lighter"]) { + @include pfe-theme($theme: "lighter"); +} +:host([on="lightest"]) { + @include pfe-theme($theme: "lightest"); +} + diff --git a/elements/pfe-band/demo/index.html b/elements/pfe-band/demo/index.html index d7dd02f6f2..a6fd5e4b08 100644 --- a/elements/pfe-band/demo/index.html +++ b/elements/pfe-band/demo/index.html @@ -15,17 +15,18 @@ - + + - +