diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 0aea78b288..3b69a02753 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -3,9 +3,11 @@ PFElements: pfe-accordion Demo - + - @@ -18,39 +20,80 @@ + + -

<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 a href="foobarbaz.com">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.

@@ -58,35 +101,36 @@

Where do the main characters work as adults?
-
-

Striped Accordion

- + +
+

pfe-accordion on=dark


+ -

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.

@@ -94,5 +138,75 @@

Where do the main characters work as adults?
+
+

<pfe-accordion> nested


+ + + +

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?

+ + +

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

+ + + + +

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

+ + +
+ diff --git a/elements/pfe-accordion/package-lock.json b/elements/pfe-accordion/package-lock.json index 699e9fcab6..625df2d01c 100644 --- a/elements/pfe-accordion/package-lock.json +++ b/elements/pfe-accordion/package-lock.json @@ -1,14 +1,14 @@ { "name": "@patternfly/pfe-accordion", - "version": "1.0.0-prerelease.8", + "version": "1.0.0-prerelease.9", "lockfileVersion": 1, "requires": true, "dependencies": { "@patternfly/pfe-sass": { - "version": "1.0.0-prerelease.8" + "version": "1.0.0-prerelease.9" }, "@patternfly/pfelement": { - "version": "1.0.0-prerelease.8" + "version": "1.0.0-prerelease.9" } } } diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index d677f58973..ef75c977d2 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -1,147 +1,60 @@ @import "../../pfe-sass/pfe-sass"; -/// =========================================================================== -/// Component Specific SASS Vars -/// =========================================================================== - -$pfe-accordion_button--LineHeight: 1.5; -$pfe-accordion_chevron--size: 0.313em; -$pfe-accordion_chevron--weight: 0.15em; -$pfe-accordion_chevron--placement: ($pfe-accordion_button--LineHeight / 2) - ($pfe-accordion_chevron--size / 2); -$pfe-accordion_button--padding-factor: 0.75; - +$LOCAL: accordion; /// =========================================================================== -/// DEFUALT ACCORDION HEADING +/// DEFAULT ACCORDION HEADING /// =========================================================================== -:host { - --pfe-accordion--main: #{pfe-color(surface--lighter)}; - --pfe-accordion--aux: #{pfe-color(surface--lighter--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lighter--link--focus)}; - display: block; - background: var(--pfe-accordion--main); - color: var(--pfe-accordion--aux); +:host { + @include pfe-accordion-header; button { - padding: calc(#{pfe-var(container-spacer)} * #{$pfe-accordion_button--padding-factor}); - margin: 0; - width: 100%; - height: auto; - border: 1px solid transparent; - font-family: inherit; - font-size: #{pfe-var(font-size)}; - line-height: $pfe-accordion_button--LineHeight; - text-align: left; - background: none; - cursor: pointer; - color: var(--pfe-accordion--aux); - - &:focus { - outline: 1px solid var(--pfe-accordion--focus); + @include pfe-trigger-color($component-name: accordion); + @include pfe-trigger-button; + + &[aria-expanded="true"] { + @include pfe-trigger-color-expanded($component-name: accordion); + @include pfe-trigger-expanded; + &::after { + @include pfe-chevron-expanded; + } } - &::-moz-focus-inner { - border: 0; + &[aria-expanded="false"]::after { + @include pfe-chevron-expanded($state: false); } + } +} - &[aria-expanded] { - position: relative; - display: block; - font-weight: normal; - padding-left: calc(#{pfe-var(container-spacer)} * 2.5); - } +:host(:first-child) { + button { + @include pfe-trigger-button-first($theme: light); + } +} - &[aria-expanded="false"]::before { - content: ""; - position: absolute; - left: #{pfe-var(container-spacer)}; - top: calc((#{pfe-var(container-spacer)} * #{$pfe-accordion_button--padding-factor}) + #{$pfe-accordion_chevron--placement} ); - display: block; - border-style: solid; - border-width: $pfe-accordion_chevron--weight $pfe-accordion_chevron--weight 0 0; - height: $pfe-accordion_chevron--size; - width: $pfe-accordion_chevron--size; - text-align: center; - transition: transform 0.15s; - transform: rotate(45deg); - } - &[aria-expanded="true"]::before { - content: ""; - position: absolute; - left: #{pfe-var(container-spacer)}; - top: calc((#{pfe-var(container-spacer)} * #{$pfe-accordion_button--padding-factor}) + #{$pfe-accordion_chevron--placement} ); - display: block; - width: $pfe-accordion_chevron--size; - height: $pfe-accordion_chevron--size; - border-style: solid; - border-width: $pfe-accordion_chevron--weight $pfe-accordion_chevron--weight 0 0; - text-align: center; - transition: all 0.15s; - transform: rotate(135deg); - } - } +// Add border bottom to the last button in an accordion set. +:host(:last-of-type) { + button[aria-expanded="false"] { + @include pfe-trigger-button-last; + } } :host(.animating) { transition: transform 0.3s #{pfe-var(animation-timing)}; } -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 1px; // Gives the 1px spacing between each + room for focus border. -} - - - /// =========================================================================== -/// COLOR OVERRIDES +/// CONTEXT STYLES, ON=DARK /// =========================================================================== -:host([color="lightest"]), -:host([color="striped"].even) { - --pfe-accordion--main: #{pfe-color(surface--lightest)}; - --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; +:host([on="dark"]) { + button { + @include pfe-trigger-color($theme: dark, $component-name: accordion); - button[aria-expanded="true"] { - border-top-color: #{pfe-color(surface--border--lightest)}; - border-left-color: #{pfe-color(surface--border--lightest)}; - border-right-color: #{pfe-color(surface--border--lightest)}; + &[aria-expanded="true"] { + @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion); + } } } - -:host([color="base"]) { - --pfe-accordion--main: #{pfe-color(surface--base)}; - --pfe-accordion--aux: #{pfe-color(surface--base--text)}; - --pfe-accordion--focus: #{pfe-color(surface--base--link--focus)}; -} - -:host([color="dark"]) { - --pfe-accordion--main: #{pfe-color(surface--darker)}; - --pfe-accordion--aux: #{pfe-color(surface--darker--text)}; - --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; -} - -:host([color="darkest"]) { - --pfe-accordion--main: #{pfe-color(surface--darkest)}; - --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--darkest--link--focus)}; -} - -:host([color="accent"]) { - --pfe-accordion--main: #{pfe-color(surface--accent)}; - --pfe-accordion--aux: #{pfe-color(surface--accent--text)}; - --pfe-accordion--focus: #{pfe-color(surface--accent--link--focus)}; -} - -:host([color="complement"]) { - --pfe-accordion--main: #{pfe-color(surface--complement)}; - --pfe-accordion--aux: #{pfe-color(surface--complement--text)}; - --pfe-accordion--focus: #{pfe-color(surface--complement--link--focus)}; -} diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index 7b63255c68..28363830c1 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -1,15 +1,23 @@ @import "../../pfe-sass/pfe-sass"; +$LOCAL: accordion; + +/// =========================================================================== +/// DEFAULT ACCORDION PANEL +/// =========================================================================== + :host { - display: none; - overflow: hidden; - background: #{pfe-color(surface--lightest)}; - will-change: height; + @include pfe-accordion-panel; } :host([expanded]) { - display: block; - position: relative; + @include pfe-accordion-panel-expanded; + @include pfe-accordion-panel-expanded-style; +} + +:host([on="dark"][expanded]) { + @include pfe-theme($theme: "dark"); + @include pfe-accordion-panel-expanded-style($theme: dark); } :host(.animating) { @@ -18,8 +26,10 @@ } .container { - margin: 0 1px; // align with 1px margin on header - border: 1px solid #{pfe-color(surface--border--lightest)}; - border-top: none; - padding: #{pfe-var(container-spacer)}; + @include pfe-accordion-panel-container-inset($align: left); } + +:host(:last-of-type[expanded]) { + margin-bottom: 0; +} + diff --git a/elements/pfe-accordion/src/pfe-accordion.js b/elements/pfe-accordion/src/pfe-accordion.js index 05d42ea161..e0479d10ce 100644 --- a/elements/pfe-accordion/src/pfe-accordion.js +++ b/elements/pfe-accordion/src/pfe-accordion.js @@ -65,12 +65,13 @@ class PfeAccordion extends PFElement { } static get observedAttributes() { - return ["theme", "color"]; + return ["theme", "color", "on"]; } static get cascadingAttributes() { return { - color: "pfe-accordion-header" + color: "pfe-accordion-header, pfe-accordion-panel", + on: "pfe-accordion-header, pfe-accordion-panel" }; } diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss index ce55f360b2..699e5206ac 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -1,8 +1,20 @@ @import "../../pfe-sass/pfe-sass"; +$LOCAL: accordion; + :host { display: block; position: relative; overflow: hidden; margin: 0; + color: #{pfe-radio(color--text)}; +} + +:host([on="dark"]) { + @include pfe-theme($theme: "dark"); } + +:host([on="light"]) { + @include pfe-theme($theme: "light"); +} + diff --git a/elements/pfe-band/demo/index.html b/elements/pfe-band/demo/index.html index 8923b203fa..8135140a7b 100644 --- a/elements/pfe-band/demo/index.html +++ b/elements/pfe-band/demo/index.html @@ -23,6 +23,7 @@ + @@ -78,7 +79,7 @@ } - +

<pfe-band>
@@ -169,10 +170,12 @@

Aside: left full bottom

Darkest band with header tag

Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Learn more +

Aside: right full top

Ut wisi enim ad minim veniam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html index 9b292929f2..3ffe701c22 100644 --- a/elements/pfe-content-set/demo/index.html +++ b/elements/pfe-content-set/demo/index.html @@ -17,6 +17,10 @@