From 06d5284edd7006fbebb6e3e28275024c38a3e23e Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Fri, 22 Feb 2019 10:25:15 -0500 Subject: [PATCH 01/29] added extends scss file * linked to extends in accordion scss file * set extends naming to expand button --- elements/pfe-accordion/demo/index.html | 6 + elements/pfe-accordion/package-lock.json | 6 +- .../src/pfe-accordion-header.scss | 106 +++-------------- elements/pfe-sass/extends/_extends.scss | 111 ++++++++++++++++++ 4 files changed, 138 insertions(+), 91 deletions(-) create mode 100644 elements/pfe-sass/extends/_extends.scss diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index d52a72da5b..a015841c1f 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -21,6 +21,12 @@ +

<pfe-accordion>

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..ce4ff0bb15 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -1,85 +1,31 @@ @import "../../pfe-sass/pfe-sass"; +@import "../../pfe-sass/extends/extends"; /// =========================================================================== -/// 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; - - -/// =========================================================================== -/// 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)}; + --pfe-expanded--main: #{pfe-color(surface--lighter)}; + --pfe-expanded--aux: #{pfe-color(surface--lighter--text)}; + --pfe-expanded--focus: #{pfe-color(surface--lighter--link--focus)}; display: block; - background: var(--pfe-accordion--main); - color: var(--pfe-accordion--aux); + background: var(--pfe-expanded--main); + color: var(--pfe-expanded--aux); 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); - } - - &::-moz-focus-inner { - border: 0; - } + @extend %pfe-expand-button; &[aria-expanded] { - position: relative; - display: block; - font-weight: normal; - padding-left: calc(#{pfe-var(container-spacer)} * 2.5); + @extend %pfe-expand-button-expanded; } &[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); + @extend %pfe-expand-button-expanded-false; } &[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); + @extend %pfe-expand-button-expanded-true; } } } @@ -97,51 +43,35 @@ h6 { margin: 1px; // Gives the 1px spacing between each + room for focus border. } - - /// =========================================================================== /// COLOR OVERRIDES /// =========================================================================== :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)}; + @extend %pfe-expand-button-color-lightest; 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)}; + @extend %pfe-expand-button-color-lightest-expanded; } } :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)}; + @extend %pfe-expand-button-color-base; } :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)}; + @extend %pfe-expand-button-color-dark; } :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)}; + @extend %pfe-expand-button-color-darkest; } :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)}; + @extend %pfe-expand-button-color-accent; } :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)}; + @extend %pfe-expand-button-color-complement; } diff --git a/elements/pfe-sass/extends/_extends.scss b/elements/pfe-sass/extends/_extends.scss new file mode 100644 index 0000000000..491fb05c36 --- /dev/null +++ b/elements/pfe-sass/extends/_extends.scss @@ -0,0 +1,111 @@ +/// =========================================================================== +/// Component Specific SASS Vars +/// =========================================================================== + +$pfe-expand_button--LineHeight: 1.5; +$pfe-expand_chevron--size: 0.313em; +$pfe-expand_chevron--weight: 0.15em; +$pfe-expand_chevron--placement: ($pfe-expand_button--LineHeight / 2) - ($pfe-expand_chevron--size / 2); +$pfe-expand_button--padding-factor: 0.75; + +%pfe-expand-button { + padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_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-expand_button--LineHeight; + text-align: left; + background: none; + cursor: pointer; + color: var(--pfe-expanded--aux); + + &:focus { + outline: 1px solid var(--pfe-expanded--focus); + } + + &::-moz-focus-inner { + border: 0; + } +} + +%pfe-expand-button-expanded { + position: relative; + display: block; + font-weight: normal; + padding-left: calc(#{pfe-var(container-spacer)} * 2.5); +} + +%pfe-expand-button-expanded-false { + content: ""; + position: absolute; + left: #{pfe-var(container-spacer)}; + top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}) + #{$pfe-expand_chevron--placement} ); + display: block; + border-style: solid; + border-width: $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0 0; + height: $pfe-expand_chevron--size; + width: $pfe-expand_chevron--size; + text-align: center; + transition: transform 0.15s; + transform: rotate(45deg); +} + +%pfe-expand-button-expanded-true { + content: ""; + position: absolute; + left: #{pfe-var(container-spacer)}; + top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}) + #{$pfe-expand_chevron--placement} ); + display: block; + width: $pfe-expand_chevron--size; + height: $pfe-expand_chevron--size; + border-style: solid; + border-width: $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0 0; + text-align: center; + transition: all 0.15s; + transform: rotate(135deg); +} + +%pfe-expand-button-color-base { + --pfe-expanded--main: #{pfe-color(surface--base)}; + --pfe-expanded--aux: #{pfe-color(surface--base--text)}; + --pfe-expanded--focus: #{pfe-color(surface--base--link--focus)}; +} + +%pfe-expand-button-color-lightest { + --pfe-expanded--main: #{pfe-color(surface--lightest)}; + --pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; + --pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; +} + +%pfe-expand-button-color-lightest-expanded { + border-top-color: #{pfe-color(surface--border--lightest)}; + border-left-color: #{pfe-color(surface--border--lightest)}; + border-right-color: #{pfe-color(surface--border--lightest)}; +} + +%pfe-expand-button-color-dark { + --pfe-expanded--main: #{pfe-color(surface--darker)}; + --pfe-expanded--aux: #{pfe-color(surface--darker--text)}; + --pfe-expanded--focus: #{pfe-color(surface--darker--link--focus)}; +} + +%pfe-expand-button-color-darkest { + --pfe-expanded--main: #{pfe-color(surface--darkest)}; + --pfe-expanded--aux: #{pfe-color(surface--darkest--text)}; + --pfe-expanded--focus: #{pfe-color(surface--darkest--link--focus)}; +} + +%pfe-expand-button-color-accent { + --pfe-expanded--main: #{pfe-color(surface--accent)}; + --pfe-expanded--aux: #{pfe-color(surface--accent--text)}; + --pfe-expanded--focus: #{pfe-color(surface--accent--link--focus)}; +} + +%pfe-expand-button-color-complement { + --pfe-expanded--main: #{pfe-color(surface--complement)}; + --pfe-expanded--aux: #{pfe-color(surface--complement--text)}; + --pfe-expanded--focus: #{pfe-color(surface--complement--link--focus)}; +} \ No newline at end of file From 344c817b06dc3ad4e9890ef65bbe21fc2877de80 Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Mon, 11 Mar 2019 12:16:29 -0400 Subject: [PATCH 02/29] added accordion mixins from the nav-v2 branch --- doc/index.html | 2 + elements/pfe-accordion/demo/index.html | 165 +++++++++++++- .../src/pfe-accordion-header.scss | 74 ++++--- .../src/pfe-accordion-panel.scss | 37 +++- elements/pfe-accordion/src/pfe-accordion.js | 3 +- elements/pfe-sass/mixins/_mixins.scss | 209 ++++++++++++++++++ 6 files changed, 445 insertions(+), 45 deletions(-) diff --git a/doc/index.html b/doc/index.html index c0166493e1..68cc68c99e 100644 --- a/doc/index.html +++ b/doc/index.html @@ -22,6 +22,8 @@

Demos

  • pfe-icon
  • pfe-icon-panel
  • pfe-layouts
    • +
  • pfe-link-list
    • +
  • pfe-navigation
  • pfe-number
  • pfe-tabs
    • diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index a015841c1f..2a0038b4bd 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -19,6 +19,7 @@

    <pfe-accordion>

    -
    - +
    +

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

     @@ -65,9 +82,9 @@

    Where do the main characters work as adults?
    -
    -

    Striped Accordion

    - +
    +

    Dark Accordion

    +

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

     @@ -101,5 +118,141 @@

    Where do the main characters work as adults?
    +
    +

    Double-nested dark 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?

    +     + +

    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

    +     +     +
    +
    +

    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?

    +     + +

    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

    +     +     +
    - + \ 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 ce4ff0bb15..7006e34146 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -1,33 +1,53 @@ @import "../../pfe-sass/pfe-sass"; -@import "../../pfe-sass/extends/extends"; /// =========================================================================== /// DEFAULT ACCORDION HEADING /// =========================================================================== :host { - --pfe-expanded--main: #{pfe-color(surface--lighter)}; - --pfe-expanded--aux: #{pfe-color(surface--lighter--text)}; - --pfe-expanded--focus: #{pfe-color(surface--lighter--link--focus)}; + // --pfe-expanded--aux: #{pfe-color(surface--lighter--text)}; //Text color + // --pfe-expanded--focus: #{pfe-color(surface--lighter--link--focus)}; + --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); button { - @extend %pfe-expand-button; + @include pfe-trigger-button; &[aria-expanded] { - @extend %pfe-expand-button-expanded; + @include pfe-trigger-expanded; } - &[aria-expanded="false"]::before { - @extend %pfe-expand-button-expanded-false; + &[aria-expanded="false"]::after { + @include pfe-chevron-expanded-false; } - &[aria-expanded="true"]::before { - @extend %pfe-expand-button-expanded-true; + &[aria-expanded="true"]::after { + @include pfe-chevron-expanded-true; } } + > * { + margin: 0; + } +} + +:host(:last-of-type) { +} + +// 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([color="dark"]:last-of-type), +:host([on="dark"]:last-of-type) { + button[aria-expanded="false"] { + @include pfe-trigger-button-last($theme: dark); + } } :host(.animating) { @@ -47,31 +67,31 @@ h6 { /// COLOR OVERRIDES /// =========================================================================== -:host([color="lightest"]), -:host([color="striped"].even) { - @extend %pfe-expand-button-color-lightest; +:host([color="light"]) { + @include pfe-trigger-color-light; button[aria-expanded="true"] { - @extend %pfe-expand-button-color-lightest-expanded; + @include pfe-trigger-color-light-borders; } } -:host([color="base"]) { - @extend %pfe-expand-button-color-base; -} - -:host([color="dark"]) { - @extend %pfe-expand-button-color-dark; +:host([color="dark"]), +:host([on="dark"]) { + @include pfe-trigger-color-dark; + button { + @include pfe-trigger-button($theme: dark); + } } -:host([color="darkest"]) { - @extend %pfe-expand-button-color-darkest; +:host([color="light"][aria-expanded="true"]) { + @include pfe-trigger-color-light-expanded; } -:host([color="accent"]) { - @extend %pfe-expand-button-color-accent; +:host([color="dark"][aria-expanded="true"]), +:host([on="dark"][aria-expanded="true"]) { + @include pfe-trigger-color-dark-expanded; } -:host([color="complement"]) { - @extend %pfe-expand-button-color-complement; +: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 7b63255c68..a060783a1c 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -1,15 +1,19 @@ @import "../../pfe-sass/pfe-sass"; :host { - display: none; - overflow: hidden; - background: #{pfe-color(surface--lightest)}; - will-change: height; + @include pfe-accordion-panel; + +::slotted(pfe-accordion) { + padding: 0 14px; + } } -:host([expanded]) { - display: block; - position: relative; +:host([color="light"][expanded]) { + @include pfe-accordion-panel-expanded; +} + +:host([color="dark"][expanded]) { + @include pfe-accordion-panel-expanded($theme: dark); } :host(.animating) { @@ -18,8 +22,19 @@ } .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)}; + :host([color="light"]) & { + @include pfe-accordion-panel-container($theme: light); + } + + :host([color="dark"]) & { + @include pfe-accordion-panel-container($theme: dark); + } +} + +:host(:last-of-type[color="dark"][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.js b/elements/pfe-accordion/src/pfe-accordion.js index 635e0c1f55..757546fdf1 100644 --- a/elements/pfe-accordion/src/pfe-accordion.js +++ b/elements/pfe-accordion/src/pfe-accordion.js @@ -70,7 +70,8 @@ class PfeAccordion extends PFElement { 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-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 8a6d1044d1..307ff4346e 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -35,6 +35,20 @@ border: 0; } +/// =========================================================================== +/// Theme Color Vars +/// =========================================================================== + +@mixin pfe-theme($theme) { + @if $theme == dark { + --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)}; + --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)}; + --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darker--link--visited)}; + --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darker--link--hover)}; + --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darker--link--focus)}; + } +} + @mixin pfe-transition($properties...) { $return: null; @each $property in $properties { @@ -158,3 +172,198 @@ } } } + +/// =========================================================================== +/// Component Specific SASS Vars +/// =========================================================================== + +$pfe-expand_button--LineHeight: 1.5; +$pfe-expand_chevron--size: 0.313em; +$pfe-expand_chevron--weight: 0.15em; +$pfe-expand_chevron--placement: ($pfe-expand_button--LineHeight / 2) - ($pfe-expand_chevron--size / 2); +$pfe-expand_button--padding-factor: 0.75; +$pfe-expand_button--border-dark: #979797; +$pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}); + +@mixin pfe-trigger-button($theme: light, $align: left) { + margin: 0; + width: 100%; + height: auto; + border: 1px solid transparent; + font-family: inherit; + font-size: #{pfe-var(font-size)}; + font-weight: 700; + line-height: $pfe-expand_button--LineHeight; + text-align: left; + background: none; + cursor: pointer; + color: var(--pfe-expanded--aux); + z-index: 2; + position: relative; + + @if $theme == dark { + border-top-color: $pfe-expand_button--border-dark; + } + @else { + border-top-color: #{pfe-color(surface--border--lightest)}; + } + + @if $theme == right { + padding: $pfe-expand_button--padding $pfe-expand_button--padding $pfe-expand_button--padding 50px; + } + @else { + padding: $pfe-expand_button--padding 50px $pfe-expand_button--padding $pfe-expand_button--padding; + } + + &:focus { + outline: 1px solid var(--pfe-expanded--focus); + } + + &::-moz-focus-inner { + border: 0; + } +} + +@mixin pfe-trigger-button-last($theme: light) { + @if $theme == dark { + border-bottom-color: $pfe-expand_button--border-dark; // use a var here + } + @else { + border-bottom-color: #{pfe-color(surface--border--lightest)}; // use a var here + } +} + +@mixin pfe-trigger-expanded { + position: relative; + display: block; +} + +@mixin pfe-trigger-color-light { + --pfe-expanded--main: transparent; + --pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; + --pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; +} + +@mixin pfe-trigger-color-light-expanded { + --pfe-expanded--main: #{pfe-color(surface--lightest)}; + --pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; + --pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-expanded--border-left: #{pfe-color(ui-link)}; +} + +@mixin pfe-trigger-color-dark { + --pfe-expanded--main: transparent; + --pfe-expanded--aux: #{pfe-color(surface--darkest--text)}; + --pfe-expanded--focus: #{pfe-color(surface--darker--link--focus)}; +} + +@mixin pfe-trigger-color-dark-expanded { + --pfe-expanded--main: #{pfe-color(surface--darker)}; + --pfe-expanded--aux: #{pfe-color(surface--darkest--text)}; + --pfe-expanded--focus: #{pfe-color(surface--darker--link--focus)}; + --pfe-expanded--border-left: #{pfe-color(surface--lightest)}; +} + +@mixin pfe-trigger-color-light-borders { + border-top-color: #{pfe-color(surface--border--lightest)}; + border-right-color: #{pfe-color(surface--border--lightest)}; + border-left-color: transparent; +} + +@mixin pfe-container { + position: relative; + display: block; + width: 100%; + + // Padding + padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)}; + + @media (min-width: #{pfe-breakpoint(sm)}) { + padding: #{pfe-local(Padding)}; + } +} + +/// =========================================================================== +/// Accordion chevrons +/// =========================================================================== + +@mixin pfe-chevron-expanded-false($position: after) { + content: ""; + position: absolute; + top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}) + #{$pfe-expand_chevron--placement} ); + display: block; + border-style: solid; + border-width: 0 $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0; + height: $pfe-expand_chevron--size; + width: $pfe-expand_chevron--size; + text-align: center; + transition: transform 0.15s; + transform: rotate(-135deg); + @if $position == before { + left: #{pfe-var(container-spacer)}; + } + @else { + right: #{pfe-var(container-spacer)}; + } +} + +@mixin pfe-chevron-expanded-true($position: after) { + content: ""; + position: absolute; + top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}) + #{$pfe-expand_chevron--placement} ); + display: block; + width: $pfe-expand_chevron--size; + height: $pfe-expand_chevron--size; + border-style: solid; + border-width: $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0 0; + text-align: center; + border-bottom: 0; + transition: all 0.15s; + transform: rotate(135deg); + @if $position == before { + left: #{pfe-var(container-spacer)}; + } + @else { + right: #{pfe-var(container-spacer)}; + } +} + +@mixin pfe-accordion-panel { + display: none; + overflow: hidden; + will-change: height; + border-color: transparent; +} + +@mixin pfe-accordion-panel-expanded($theme: light) { + display: block; + position: relative; + border-width: 0; + border-left-width: 3px; + border-style: solid; + @if $theme == dark { + border-color: $pfe-color--white; + background: #{pfe-color(surface--darker)}; + } + @else { + box-shadow: 0 5px 3px rgba(140, 140, 140, 0.35); + border-color: $pfe-color--ui-link; + background: #{pfe-color(surface--lightest)}; + } +} + +@mixin pfe-accordion-panel-expanded-last-dark { + border-bottom: 1px solid $pfe-expand_button--border-dark; +} + +@mixin pfe-accordion-panel-container($theme: light) { + padding: 0 #{pfe-var(container-spacer)} #{pfe-var(container-spacer)} #{pfe-var(container-spacer)}; + overflow: hidden; + @if $theme == light { + border-right: 1px solid #{pfe-color(surface--border--lightest)}; + border-bottom: 1px solid #{pfe-color(surface--border--lightest)}; + } + @else { + color: white; + } +} \ No newline at end of file From 3b3216885c9efbae640c60054348e8689d033d7c Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Wed, 13 Mar 2019 13:48:34 -0400 Subject: [PATCH 03/29] US198282 removed commented code --- elements/pfe-accordion/src/pfe-accordion-header.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index 7006e34146..5fb2261fc0 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -4,8 +4,6 @@ /// DEFAULT ACCORDION HEADING /// =========================================================================== :host { - // --pfe-expanded--aux: #{pfe-color(surface--lighter--text)}; //Text color - // --pfe-expanded--focus: #{pfe-color(surface--lighter--link--focus)}; --pfe-expanded--border-left: transparent; display: block; From 3651d917427d49c2134618be23db6214dd2132f3 Mon Sep 17 00:00:00 2001 From: Kendall Totten Date: Thu, 14 Mar 2019 12:52:47 -0400 Subject: [PATCH 04/29] set-accordion-placeholders-fork adjust mixins to resolve styling issues --- elements/pfe-accordion/demo/index.html | 253 +++++++++++++----- .../src/pfe-accordion-header.scss | 100 +++---- .../src/pfe-accordion-panel.scss | 50 ++-- elements/pfe-accordion/src/pfe-accordion.scss | 25 ++ elements/pfe-band/demo/index.html | 9 +- elements/pfe-content-set/demo/index.html | 47 ++-- elements/pfe-sass/mixins/_mixins.scss | 211 ++++++++++----- themes/cp-theme/src/cp-theme.scss | 2 +- 8 files changed, 456 insertions(+), 241 deletions(-) diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 2a0038b4bd..74ea0ab334 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -3,7 +3,8 @@ PFElements: pfe-accordion Demo - + + @@ -20,8 +21,10 @@ + -

    <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 +86,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 +123,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 +166,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 +192,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 +288,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..af4b534e4c 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"][aria-expanded="true"]), +:host([color="lightest"][aria-expanded="true"]) { + @include pfe-trigger-color-lightest-expanded; } -: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"]) { +:host([on="dark"][aria-expanded="true"]), +:host([color="darker"][aria-expanded="true"]), +:host([color="darkest"][aria-expanded="true"]) { @include pfe-trigger-color-dark-expanded; } -: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..6a9671dc90 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -1,40 +1,40 @@ -@import "../../pfe-sass/pfe-sass"; - + :host { - @include pfe-accordion-panel; - -::slotted(pfe-accordion) { - padding: 0 14px; - } + @include pfe-accordion-panel; } -:host([color="light"][expanded]) { - @include pfe-accordion-panel-expanded; -} -:host([color="dark"][expanded]) { - @include pfe-accordion-panel-expanded($theme: dark); + +:host([expanded]) { + @include pfe-accordion-panel-expanded; + } + + +:host([color="lighter"][expanded]), +:host([color="lightest"][expanded]) { + @include pfe-accordion-panel-expanded-style; } +:host([color="darker"][expanded]), +:host([color="darkest"][expanded]) { + @include pfe-accordion-panel-expanded-style($theme: dark); + } + :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..da24c37cdb 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -5,4 +5,29 @@ position: relative; overflow: hidden; margin: 0; + color: var(--pfe-broadcasted--color--text); + border: red solid 5px !important; } + +: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 @@ - + + - + diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index af4b534e4c..1297e97e95 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -75,9 +75,9 @@ h1, h2, h3, h4, h5, h6 { } } } -:host([color="lighter"][aria-expanded="true"]), -:host([color="lightest"][aria-expanded="true"]) { - @include pfe-trigger-color-lightest-expanded; +:host([color="lighter"]), +:host([color="lightest"]) { + @include pfe-trigger-color-lightest; } @@ -93,9 +93,9 @@ h1, h2, h3, h4, h5, h6 { @include pfe-trigger-color-darkest; } } -:host([on="dark"][aria-expanded="true"]), -:host([color="darker"][aria-expanded="true"]), -:host([color="darkest"][aria-expanded="true"]) { - @include pfe-trigger-color-dark-expanded; +:host([on="dark"]), +:host([color="darker"]), +:host([color="darkest"]) { + @include pfe-trigger-color-darkest; } diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index 6a9671dc90..c9ceb3fc30 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -1,12 +1,19 @@ - +@import "../../pfe-sass/pfe-sass"; + +/// =========================================================================== +/// DEFAULT ACCORDION PANEL +/// =========================================================================== + :host { @include pfe-accordion-panel; + } :host([expanded]) { @include pfe-accordion-panel-expanded; + @include pfe-accordion-panel-expanded-style; } diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss index da24c37cdb..93670a9163 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -6,7 +6,6 @@ overflow: hidden; margin: 0; color: var(--pfe-broadcasted--color--text); - border: red solid 5px !important; } :host([on="dark"]) { diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 4e673075af..040424e6f7 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -234,8 +234,8 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-accordion-header { display: block; - //background: var(--pfe-expanded--main); - //color: var(--pfe-expanded--aux); + //background: var(--pfe-accordion--main); + //color: var(--pfe-accordion--aux); button { -webkit-appearance: button; @@ -246,36 +246,36 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b } @mixin pfe-trigger-button($theme: light, $align: left) { - --pfe-expanded--main: transparent; - --pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; - --pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-expanded--border-left: 3px solid transparent; - --pfe-expanded--border-right: 1px solid transparent; - --pfe-expanded--border-top-bottom: 0px; - --pfe-expanded--border-focus-color: blue; + --pfe-accordion--main: transparent; + --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--border-left: 3px solid transparent; + --pfe-accordion--border-right: 1px solid transparent; + --pfe-accordion--border-top-bottom: 0px; + --pfe-accordion--border-focus-color: #{pfe-color(surface--accent)};; margin: 0; width: 100%; height: auto; font-family: inherit; - font-size: #{pfe-var(font-size * 1.1)}; + font-size: 16px; //calc(#{pfe-var(font-size)} * 1.1); font-weight: 700; line-height: #{pfe-var(line-height)}; text-align: left; cursor: pointer; - color: var(--pfe-expanded--aux); + color: var(--pfe-accordion--aux); z-index: 1; position: relative; - background: var(--pfe-expanded--main); - border-left: var(--pfe-expanded--border-left); - border-right: var( --pfe-expanded--border-right); - border-bottom: var(--pfe-expanded--border-top-bottom); - border-top: var(--pfe-expanded--border-top-bottom); + background: var(--pfe-accordion--main); + border-left: var(--pfe-accordion--border-left); + border-right: var( --pfe-accordion--border-right); + border-bottom: var(--pfe-accordion--border-top-bottom); + border-top: var(--pfe-accordion--border-top-bottom); &:focus { outline: none; - border-left-color: var(--pfe-expanded--border-focus-color); - border-right-color: var(--pfe-expanded--border-focus-color); + border-left-color: var(--pfe-accordion--border-focus-color); + border-right-color: var(--pfe-accordion--border-focus-color); z-index: 2; } @@ -305,44 +305,44 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b } @mixin pfe-trigger-color-light { - --pfe-expanded--main: transparent; - --pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; - --pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-expanded--border-top-bottom: #{pfe-color(surface--border--lightest)} solid 1px; + --pfe-accordion--main: transparent; + --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--border-top-bottom: #{pfe-color(surface--border--lightest)} solid 1px; } @mixin pfe-trigger-color-light-expanded { - //--pfe-expanded--main: #{pfe-color(surface--lightest)}; - //--pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; - //--pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-expanded--border-left: solid 3px #{pfe-color(ui-link)}; + --pfe-accordion--main: #{pfe-color(surface--lightest)}; + --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--border-left: solid 3px #{pfe-color(ui-link)}; } @mixin pfe-trigger-color-lightest { - --pfe-expanded--main: #{pfe-color(surface--lightest)}; - --pfe-expanded--aux: #{pfe-color(surface--lightest--text)}; - --pfe-expanded--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-expanded--border-top-bottom: #{pfe-color(surface--border--lightest)} solid 1px; + --pfe-accordion--main: #{pfe-color(surface--lightest)}; + --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--border-top-bottom: #{pfe-color(surface--border--lightest)} solid 1px; } //// DARK @mixin pfe-trigger-color-dark { - --pfe-expanded--main: transparent; - --pfe-expanded--aux: #{pfe-color(surface--darkest--text)}; - --pfe-expanded--focus: #{pfe-color(surface--darker--link--focus)}; + --pfe-accordion--main: transparent; + --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; } @mixin pfe-trigger-color-dark-expanded { - //--pfe-expanded--main: #{pfe-color(surface--darker)}; - //--pfe-expanded--aux: #{pfe-color(surface--darkest--text)}; - //--pfe-expanded--focus: #{pfe-color(surface--darker--link--focus)}; - --pfe-expanded--border-left: solid 3px #{pfe-color(surface--lightest)}; + --pfe-accordion--main: #{pfe-color(surface--darker)}; + --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; + --pfe-accordion--border-left: solid 3px #{pfe-color(surface--lightest)}; } @mixin pfe-trigger-color-darkest { - --pfe-expanded--main: #{pfe-color(surface--darker)}; - --pfe-expanded--aux: #{pfe-color(surface--darkest--text)}; - --pfe-expanded--focus: #{pfe-color(surface--darker--link--focus)}; + --pfe-accordion--main: #{pfe-color(surface--darker)}; + --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; } /// =========================================================================== @@ -402,7 +402,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)}; @media (min-width: #{pfe-breakpoint(sm)}) { - padding: #{pfe-local(Padding)}; + padding: #{pfe-local(Padding)}; } } @@ -422,7 +422,6 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-accordion-panel-expanded-style($theme: light) { border-right: 1px solid transparent; border-left: 3px solid transparent; - color: pink !important; @if $theme == dark { border-left-color: #{pfe-color(surface--darkest--text)}; background: #{pfe-color(surface--darker)}; @@ -444,5 +443,5 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b } @mixin pfe-accordion-panel-container-inset { - padding: 0 #{pfe-var(container-spacer)}; + padding: 0 #{pfe-var(container-spacer)} #{pfe-var(container-spacer)}; } From 82c1a4e9116dbde0f3ab705bc10500dd1e6d9811 Mon Sep 17 00:00:00 2001 From: Kendall Totten Date: Thu, 14 Mar 2019 14:27:07 -0400 Subject: [PATCH 06/29] origin/set-accordion-placeholders-fork fix borders --- elements/pfe-accordion/demo/index.html | 4 ++-- .../src/pfe-accordion-panel.scss | 13 ++++++---- elements/pfe-sass/mixins/_mixins.scss | 24 ++++++++++++------- 3 files changed, 26 insertions(+), 15 deletions(-) diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 82549a0fe4..2854b9186a 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -6,7 +6,7 @@ - +
    -

    Double-nested light accordion


    +

    nested light accordion


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

    @@ -231,7 +231,7 @@

    Where do the main characters work as adults?
    -

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


    +

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


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

    diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index 1297e97e95..a61cb213ed 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -4,7 +4,6 @@ /// DEFAULT ACCORDION HEADING /// =========================================================================== - :host { @include pfe-accordion-header; @@ -26,7 +25,6 @@ } } - ////////// last child :host([color="darker"]:last-of-type), @@ -35,6 +33,7 @@ @include pfe-trigger-button-last($theme: dark); } } + :host([color="lighter"]:last-of-type), :host([color="lightest"]:last-of-type) { button[aria-expanded="false"] { @@ -42,6 +41,21 @@ } } +:host([color="darker"]:first-child), +:host([color="darkest"]:first-child) { + button { + @include pfe-trigger-button-first($theme: dark); + } +} + +:host(:first-child), +:host([color="lighter"]:first-child), +:host([color="lightest"]:first-child) { + button { + @include pfe-trigger-button-first($theme: light); + } +} + // Add border bottom to the last button in an accordion set. :host(:last-of-type) { @@ -50,9 +64,6 @@ } } -:host(:last-of-type) { -} - :host(.animating) { transition: transform 0.3s #{pfe-var(animation-timing)}; } @@ -75,12 +86,12 @@ h1, h2, h3, h4, h5, h6 { } } } + :host([color="lighter"]), :host([color="lightest"]) { @include pfe-trigger-color-lightest; } - :host([on="dark"]) { button { @include pfe-trigger-color-dark; @@ -90,7 +101,11 @@ h1, h2, h3, h4, h5, h6 { :host([color="darker"]), :host([color="darkest"]) { button { - @include pfe-trigger-color-darkest; + @include pfe-trigger-color-darkest; + + &[aria-expanded="true"] { + @include pfe-trigger-color-dark-expanded; + } } } :host([on="dark"]), diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 9fab239bf2..2f0823dd2a 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -119,7 +119,7 @@ right: -90deg, left: 90deg, ); - border-style: solid; + border-style: #{pfe-var(surface--border-style)}; border-width: $width $height 0; border-color: transparent; border-top-color: $color; @@ -156,7 +156,7 @@ // scss-lint:enable ImportantRule @mixin pfe-pipe( $position: right, $padding: 0, $margin: 0, $color: $border-color) { - border: 1px solid transparent; + border: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; border-#{$position}-color: $color; @if $position == right { padding-left: $padding; @@ -223,7 +223,7 @@ } /// =========================================================================== -/// Component Specific SASS Vars +/// Accordion Specific SASS Vars /// =========================================================================== $pfe-expand-button--LineHeight: 1.5; $pfe-expand_chevron--size: 0.313em; @@ -234,8 +234,6 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-accordion-header { display: block; - //background: var(--pfe-accordion--main); - //color: var(--pfe-accordion--aux); button { -webkit-appearance: button; @@ -249,16 +247,16 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b --pfe-accordion--main: transparent; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-accordion--border-left: 3px solid transparent; - --pfe-accordion--border-right: 1px solid transparent; - --pfe-accordion--border-top-bottom: 0px; + --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; + --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; + --pfe-accordion--border-bottom: 0px; --pfe-accordion--border-focus-color: #{pfe-color(surface--accent)};; margin: 0; width: 100%; height: auto; font-family: inherit; - font-size: 16px; //calc(#{pfe-var(font-size)} * 1.1); + font-size: calc((#{pfe-var(font-size)} * 1.1)); font-weight: 700; line-height: #{pfe-var(line-height)}; text-align: left; @@ -269,8 +267,8 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b background: var(--pfe-accordion--main); border-left: var(--pfe-accordion--border-left); border-right: var(--pfe-accordion--border-right); - border-bottom: var(--pfe-accordion--border-top-bottom); - border-top: var(--pfe-accordion--border-top-bottom); + border-bottom: var(--pfe-accordion--border-bottom); + border-top: 0; &:focus { outline: none; @@ -292,10 +290,19 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-trigger-button-last($theme: light) { @if $theme == dark { - border-bottom: 1px solid #{pfe-color(surface--border--darkest)}; // use a var here + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } @else { - border-bottom: 1px solid #{pfe-color(surface--border--lightest)}; // use a var here + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + } +} + +@mixin pfe-trigger-button-first($theme: light) { + @if $theme == dark { + border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + } + @else { + border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } @@ -309,21 +316,21 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b --pfe-accordion--main: transparent; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-accordion--border-top-bottom: #{pfe-color(surface--border--lightest)} solid 1px; + --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } @mixin pfe-trigger-color-light-expanded { --pfe-accordion--main: #{pfe-color(surface--lightest)}; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-accordion--border-left: solid 3px #{pfe-color(surface--lightest--link)}; - --pfe-accordion--border-right: solid 1px #{pfe-color(surface--border--lightest)}; + --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; + --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } @mixin pfe-trigger-color-lightest { - --pfe-accordion--main: #{pfe-color(surface--lightest)}; - --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; - --pfe-accordion--border-top-bottom: #{pfe-color(surface--border--lightest)} solid 1px; + --pfe-accordion--main: #{pfe-color(surface--lightest)}; + --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } //// DARK @@ -338,8 +345,8 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b --pfe-accordion--main: #{pfe-color(surface--darkest)}; --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; --pfe-accordion--focus: #{pfe-color(surface--darkest--link--focus)}; - --pfe-accordion--border-left: solid 3px #{pfe-color(surface--darkest--link)}; - --pfe-accordion--border-right: solid 1px #{pfe-color(surface--border-darkest)}; + --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; } @mixin pfe-trigger-color-darkest { @@ -357,7 +364,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b position: absolute; top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}) + #{$pfe-expand_chevron--placement} ); display: block; - border-style: solid; + border-style: #{pfe-var(surface--border-style)}; border-width: 0 $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0; height: $pfe-expand_chevron--size; width: $pfe-expand_chevron--size; @@ -379,7 +386,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b display: block; width: $pfe-expand_chevron--size; height: $pfe-expand_chevron--size; - border-style: solid; + border-style: #{pfe-var(surface--border-style)}; border-width: $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0 0; text-align: center; border-bottom: 0; @@ -423,16 +430,17 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b } @mixin pfe-accordion-panel-expanded-style($theme: light) { - border-right: 1px solid transparent; - border-left: 3px solid transparent; + border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; + border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; @if $theme == dark { border-left-color: #{pfe-color(surface--darkest--text)}; + border-left-color: #{pfe-color(surface--darkest--text)}; } @else { - box-shadow: 0 5px 3px rgba(140, 140, 140, 0.35); + box-shadow: 0 5px #{pfe-var(surface--border-width-thick)} rgba(140, 140, 140, 0.35); border-left-color: #{pfe-color(surface--lightest--link)}; border-right-color: #{pfe-color(surface--border--lightest)}; - border-bottom: #{pfe-color(surface--border--lightest)} 1px solid; + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } @mixin pfe-accordion-panel-expanded-style-darkest { @@ -444,7 +452,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b } @mixin pfe-accordion-panel-expanded-last-dark { - border-bottom: 1px solid #{pfe-color(surface--border--darkest)}; + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--darkest)}; } @mixin pfe-accordion-panel-expanded-last { margin-bottom: 0; diff --git a/elements/pfe-sass/variables/_maps.scss b/elements/pfe-sass/variables/_maps.scss index 60bd3a3ecd..39e7eb4ee9 100644 --- a/elements/pfe-sass/variables/_maps.scss +++ b/elements/pfe-sass/variables/_maps.scss @@ -182,6 +182,7 @@ $pfe-vars: ( link--text-decoration--hover: underline, surface--border-width: 1px, + surface--border-width-thick: 3px, surface--border-style: solid, surface--border-radius: 0, ui--border-width: 1px, From 1c26f14799daa9305349e2b34aee126785610653 Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Fri, 15 Mar 2019 13:25:34 -0400 Subject: [PATCH 08/29] US198282 pfe-accordion style update * fixed accordion header and panel when on=dark and no color attribute is applied. --- .../pfe-accordion/src/pfe-accordion-header.scss | 14 ++++++-------- .../pfe-accordion/src/pfe-accordion-panel.scss | 2 +- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index a61cb213ed..c641815ad8 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -94,7 +94,11 @@ h1, h2, h3, h4, h5, h6 { :host([on="dark"]) { button { - @include pfe-trigger-color-dark; + @include pfe-trigger-color-dark; + + &[aria-expanded="true"] { + @include pfe-trigger-color-dark-expanded; + } } } @@ -104,13 +108,7 @@ h1, h2, h3, h4, h5, h6 { @include pfe-trigger-color-darkest; &[aria-expanded="true"] { - @include pfe-trigger-color-dark-expanded; + @include pfe-trigger-color-darkest-expanded; } } } -:host([on="dark"]), -:host([color="darker"]), -:host([color="darkest"]) { - @include pfe-trigger-color-darkest; -} - diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index b729784953..09688695f2 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -19,7 +19,7 @@ @include pfe-accordion-panel-expanded-style-lightest; } -:host([color="dark"][expanded]) { +:host([on="dark"][expanded]) { @include pfe-accordion-panel-expanded-style($theme: dark); } From 8787fd58bed013a72a332cfb27f45978482a8274 Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Fri, 15 Mar 2019 13:26:43 -0400 Subject: [PATCH 09/29] US198282 update accordion styles * fixed accordion styles when on=dark and no color attributes are applied. --- elements/pfe-sass/mixins/_mixins.scss | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 2f0823dd2a..ed21da990a 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -342,7 +342,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b } @mixin pfe-trigger-color-dark-expanded { - --pfe-accordion--main: #{pfe-color(surface--darkest)}; + --pfe-accordion--main: #{pfe-color(surface--darker)}; --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; --pfe-accordion--focus: #{pfe-color(surface--darkest--link--focus)}; --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; @@ -355,6 +355,15 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; } +@mixin pfe-trigger-color-darkest-expanded { + --pfe-accordion--main: #{pfe-color(surface--darkest)}; + --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; + --pfe-accordion--focus: #{pfe-color(surface--darkest--link--focus)}; + --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; +} + + /// =========================================================================== /// Accordion chevrons /// =========================================================================== @@ -433,6 +442,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; @if $theme == dark { + background-color: #{pfe-color(surface--darker)}; border-left-color: #{pfe-color(surface--darkest--text)}; border-left-color: #{pfe-color(surface--darkest--text)}; } From 140d99580c57d897f2f9503e7d7daac9f668e7c4 Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Fri, 15 Mar 2019 15:39:48 -0400 Subject: [PATCH 10/29] US198282 pfe-accordion styles * commented out color attribute settings --- elements/pfe-accordion/demo/index.html | 258 +----------------- .../src/pfe-accordion-header.scss | 91 +++--- .../src/pfe-accordion-panel.scss | 37 +-- elements/pfe-accordion/src/pfe-accordion.scss | 28 +- elements/pfe-sass/mixins/_mixins.scss | 2 +- 5 files changed, 84 insertions(+), 332 deletions(-) diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 402426a6bd..2da45a7615 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -34,7 +34,7 @@ .dark-background { background-color: #191e84; } - .gray-background { + .white-background { background-color: #fff; } .med-background { @@ -48,7 +48,7 @@ -
    +

    <pfe-accordion>


    @@ -85,115 +85,9 @@

    Where do the main characters work as adults?
    -
    -

    pfe-accordion color=lighter


    - - -

    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

    -     -     -
    - -
    -

    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?

    -     - -

    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

    -     -     -
    -
    -

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


    - +

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


    +

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

     @@ -227,149 +121,5 @@

    Where do the main characters work as adults?
    -
    -

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


    - - -

    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?

    -     - - - -

    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

    -     -     -     -     -
    - - - -

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


    - - -

    FOO FOO FOO

    -     - - - -

    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.

    -     -     -     - -

    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

    -     -     - -

    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

    - - - -

    Accordion with color=darkest

    -     - - - -

    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?

    -     - -

    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

    diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index c641815ad8..4f5b966b94 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -27,26 +27,28 @@ ////////// 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); - } -} - -:host([color="darker"]:first-child), -:host([color="darkest"]:first-child) { - button { - @include pfe-trigger-button-first($theme: dark); - } -} +// To Do: add lighter/lightest and darker/darkest colors. + +// :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); +// } +// } + +// :host([color="darker"]:first-child), +// :host([color="darkest"]:first-child) { +// button { +// @include pfe-trigger-button-first($theme: dark); +// } +// } :host(:first-child), :host([color="lighter"]:first-child), @@ -76,22 +78,6 @@ h1, h2, h3, h4, h5, h6 { /// COLOR OVERRIDES /// =========================================================================== -:host([color="lighter"]), -:host([color="lightest"]) { - button { - @include pfe-trigger-color-lightest; - - &[aria-expanded="true"] { - @include pfe-trigger-color-light-expanded; - } - } -} - -:host([color="lighter"]), -:host([color="lightest"]) { - @include pfe-trigger-color-lightest; -} - :host([on="dark"]) { button { @include pfe-trigger-color-dark; @@ -102,13 +88,26 @@ h1, h2, h3, h4, h5, h6 { } } -:host([color="darker"]), -:host([color="darkest"]) { - button { - @include pfe-trigger-color-darkest; - - &[aria-expanded="true"] { - @include pfe-trigger-color-darkest-expanded; - } - } -} +// To Do: add lighter/lightest and darker/darkest colors. + +// :host([color="lighter"]), +// :host([color="lightest"]) { +// button { +// @include pfe-trigger-color-lightest; + +// &[aria-expanded="true"] { +// @include pfe-trigger-color-light-expanded; +// } +// } +// } + +// :host([color="darker"]), +// :host([color="darkest"]) { +// button { +// @include pfe-trigger-color-darkest; + +// &[aria-expanded="true"] { +// @include pfe-trigger-color-darkest-expanded; +// } +// } +// } diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index 09688695f2..730d66740c 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -13,29 +13,15 @@ @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([on="dark"][expanded]) { @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 { @include pfe-accordion-panel-container-inset; } @@ -43,8 +29,23 @@ :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; - } + +// To Do: add lighter/lightest and darker/darkest colors. + +// :host([color="lighter"][expanded]), +// :host([color="lightest"][expanded]) { +// @include pfe-accordion-panel-expanded-style; +// @include pfe-accordion-panel-expanded-style-lightest; +// } + +// :host([color="darker"][expanded]), +// :host([color="darkest"][expanded]) { +// @include pfe-accordion-panel-expanded-style($theme: dark); +// @include pfe-accordion-panel-expanded-style-darkest; +// } + +// :host(:last-of-type[color="darker"][expanded]), +// :host(:last-of-type[color="darkest"][expanded]) { +// @include pfe-accordion-panel-expanded-last-dark; +// } diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss index 93670a9163..33cf6b9f70 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -11,22 +11,24 @@ :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"); -} +// To Do: add lighter/lightest and darker/darkest colors. + +// :host([color="darker"]) { +// @include pfe-theme($theme: "darker"); +// } +// :host([color="darkest"]) { +// @include pfe-theme($theme: "darkest"); +// } + +// :host([color="lighter"]) { +// @include pfe-theme($theme: "lighter"); +// } +// :host([color="lightest"]) { +// @include pfe-theme($theme: "lightest"); +// } diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index ed21da990a..437a73e524 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -444,7 +444,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @if $theme == dark { background-color: #{pfe-color(surface--darker)}; border-left-color: #{pfe-color(surface--darkest--text)}; - border-left-color: #{pfe-color(surface--darkest--text)}; + border-right-color: #{pfe-color(surface--darkest--text)}; } @else { box-shadow: 0 5px #{pfe-var(surface--border-width-thick)} rgba(140, 140, 140, 0.35); From 53a21136af7eb70596535800f8c8208a04ceb7de Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Fri, 15 Mar 2019 17:13:05 -0400 Subject: [PATCH 11/29] US198282 pfe-accordion styles * made chevrons narrower and slightly larger --- elements/pfe-sass/mixins/_mixins.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 437a73e524..a95345d4de 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -226,8 +226,8 @@ /// Accordion Specific SASS Vars /// =========================================================================== $pfe-expand-button--LineHeight: 1.5; -$pfe-expand_chevron--size: 0.313em; -$pfe-expand_chevron--weight: 0.15em; +$pfe-expand_chevron--size: 0.4em; +$pfe-expand_chevron--weight: 0.1em; $pfe-expand_chevron--placement: ($pfe-expand_button--LineHeight / 2) - ($pfe-expand_chevron--size / 2); $pfe-expand_button--padding-factor: 0.75; $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding-factor}); @@ -379,7 +379,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b width: $pfe-expand_chevron--size; text-align: center; transition: transform 0.15s; - transform: rotate(-135deg); + transform: rotate(45deg); @if $position == before { left: #{pfe-var(container-spacer)}; } @@ -400,7 +400,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b text-align: center; border-bottom: 0; transition: all 0.15s; - transform: rotate(135deg); + transform: rotate(-45deg); @if $position == before { left: #{pfe-var(container-spacer)}; } @@ -442,6 +442,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; @if $theme == dark { + box-shadow: none; background-color: #{pfe-color(surface--darker)}; border-left-color: #{pfe-color(surface--darkest--text)}; border-right-color: #{pfe-color(surface--darkest--text)}; From ff1e0c2110b27db802148207845ceedb106a6536 Mon Sep 17 00:00:00 2001 From: Kendall Totten Date: Sun, 17 Mar 2019 22:13:33 -0400 Subject: [PATCH 12/29] Put heading styles in mixin for accordion header; update theme mixin to use default text & link + on-dark text & link colors, add hover state, update color of focus state --- .../src/pfe-accordion-header.scss | 5 +-- elements/pfe-sass/mixins/_mixins.scss | 44 ++++++++++++------- 2 files changed, 30 insertions(+), 19 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index 4f5b966b94..954dc4d45b 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -70,9 +70,8 @@ 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 diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index a95345d4de..9a3059cd55 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -41,12 +41,20 @@ @mixin pfe-theme($theme) { @if $theme == dark { - --pfe-broadcasted--color--text: #{pfe-color(surface--darkest--text)}; - --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darkest--link)}; - --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--darkest--link--visited)}; - --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--darkest--link--hover)}; - --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--darkest--link--focus)}; + --pfe-broadcasted--color--text: #{pfe-color(text--on-dark)}; + --pfe-broadcasted--color--ui-link: #{pfe-color(link--on-dark)}; + --pfe-broadcasted--color--ui-link--visited: #{pfe-color(link--visited--on-dark)}; + --pfe-broadcasted--color--ui-link--hover: #{pfe-color(link--hover--on-dark)}; + --pfe-broadcasted--color--ui-link--focus: #{pfe-color(link--focus--on-dark)}; + } + @if $theme == light { + --pfe-broadcasted--color--text: #{pfe-color(text)}; + --pfe-broadcasted--color--ui-link: #{pfe-color(link)}; + --pfe-broadcasted--color--ui-link--visited: #{pfe-color(link--visited)}; + --pfe-broadcasted--color--ui-link--hover: #{pfe-color(link--hover)}; + --pfe-broadcasted--color--ui-link--focus: #{pfe-color(link--focus)}; } + // THEMES: @if $theme == darker { --pfe-broadcasted--color--text: #{pfe-color(surface--darker--text)}; --pfe-broadcasted--color--ui-link: #{pfe-color(surface--darker--link)}; @@ -75,13 +83,7 @@ --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--complement--link--hover)}; --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--complement--link--focus)}; } - @if $theme == light { - --pfe-broadcasted--color--text: #{pfe-color(surface--base--text)}; - --pfe-broadcasted--color--ui-link: #{pfe-color(surface--base--link)}; - --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--base--link--visited)}; - --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--base--link--hover)}; - --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--base--link--focus)}; - } + @if $theme == lighter { --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)}; --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)}; @@ -238,6 +240,18 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b button { -webkit-appearance: button; } + h2 button { + font-size: calc((#{pfe-var(font-size)} * 1.5)); + } + h3 button { + font-size: calc((#{pfe-var(font-size)} * 1.35)); + } + h4 button { + font-size: calc((#{pfe-var(font-size)} * 1.2)); + } + h5 button { + font-size: calc((#{pfe-var(font-size)} * 1)); + } > * { margin: 0; } @@ -250,13 +264,11 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; --pfe-accordion--border-bottom: 0px; - --pfe-accordion--border-focus-color: #{pfe-color(surface--accent)};; margin: 0; width: 100%; height: auto; font-family: inherit; - font-size: calc((#{pfe-var(font-size)} * 1.1)); font-weight: 700; line-height: #{pfe-var(line-height)}; text-align: left; @@ -270,10 +282,10 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b border-bottom: var(--pfe-accordion--border-bottom); border-top: 0; + &:hover, &:focus { outline: none; - border-left-color: var(--pfe-accordion--border-focus-color); - border-right-color: var(--pfe-accordion--border-focus-color); + border-left-color: var(--pfe-accordion--focus); z-index: 2; } From 9620adff3f7ba6dc9d3bc5f1b6b611a58bef9e69 Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Mon, 18 Mar 2019 10:21:23 -0400 Subject: [PATCH 13/29] US198282 fixed content-set merge conflicts --- elements/pfe-content-set/demo/index.html | 105 ----------------------- 1 file changed, 105 deletions(-) diff --git a/elements/pfe-content-set/demo/index.html b/elements/pfe-content-set/demo/index.html index 78ce4cd404..3ffe701c22 100644 --- a/elements/pfe-content-set/demo/index.html +++ b/elements/pfe-content-set/demo/index.html @@ -87,61 +87,6 @@

    Heading 3

    Content for heading 3.
    -<<<<<<< HEAD -
    -

    Accordion: on dark

    -

    Container max: 600px

    -
    - - -

    Heading 1

    -

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna sed diam voluptua.

    -     - -

    Heading 2

    -

    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.

    -

    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.

    -     - -

    Heading 3

    -

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

    -

    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.

    -     -     -
    - -
    -

    Tabs

    -

    On desktop, example below should render as tabs (default style).

    -

    Tabs: default

    -

    Container max: 800px

    -
    - - -

    Heading 1 Foo

    -
    -

    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.

    -

    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

    - - Primary - -
    -     - -

    Heading 2

    -

    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

    -

    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.

    - - Primary - -     - -

    Heading 3

    -

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

    -

    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

    -     -======= -

    On desktop, example below should render as accordion (primary style):

    Container max: 500px

    @@ -194,20 +139,12 @@

    Heading 2

    Content for heading 2.

    Heading 3

    Content for heading 3.
    ->>>>>>> master
    -<<<<<<< HEAD -

    Tabs: Primary variant

    -

    Container max: 900px

    -
    -======= -

    On desktop, example below should render as tabs (primary style):

    ->>>>>>> master

    Heading 1

    @@ -224,14 +161,9 @@

    Heading 3

    -<<<<<<< HEAD -

    Tabs: Secondary variant

    -
    -=======

    On desktop, example below should render as tabs (secondary style):

    ->>>>>>> master

    Heading 1

    @@ -248,29 +180,6 @@

    Heading 3

    -<<<<<<< HEAD -

    On desktop, example below should render as vertical tabs (default style).

    -

    Vertical tabs: Default

    -

    Container max: 800px

    -
    - - -

    Heading 1

    -

    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.

    -

    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

    -     - -

    Heading 2

    -

    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

    -

    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.

    -     - -

    Heading 3

    -

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

    -

    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

    -     -======= -

    On desktop, example below should render as vertical tabs (default style):

    @@ -285,20 +194,12 @@

    Heading 2

    Content for heading 2.

    Heading 3

    Content for heading 3.
    ->>>>>>> master
    -<<<<<<< HEAD -

    Vertical tabs: Primary variant

    -

    Container max: 900px

    -
    -======= -

    On desktop, example below should render as vertical tabs (primary style):

    ->>>>>>> master

    Heading 1

    @@ -315,14 +216,8 @@

    Heading 3

    -<<<<<<< HEAD -

    Vertical tabs: Secondary variant

    -
    -======= -

    On desktop, example below should render as vertical tabs (secondary style):

    ->>>>>>> master

    Heading 1

    From ede6a4d2d8b2c7a9e6af3d5604d8a51cb4d8c21a Mon Sep 17 00:00:00 2001 From: Christopher Doherty Date: Mon, 18 Mar 2019 11:53:19 -0400 Subject: [PATCH 14/29] US198282 set hover/focus for accordion header to underline/blue border --- .../pfe-accordion/src/pfe-accordion-header.scss | 4 +--- elements/pfe-sass/mixins/_mixins.scss | 17 +++++++++-------- elements/pfe-sass/package-lock.json | 2 +- elements/pfe-tabs/package-lock.json | 10 +++++++--- elements/pfelement/package-lock.json | 2 +- 5 files changed, 19 insertions(+), 16 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index 954dc4d45b..775c679752 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -19,6 +19,7 @@ &[aria-expanded="true"]::after { @include pfe-chevron-expanded-true; } + &[aria-expanded="false"]::after { @include pfe-chevron-expanded-false; } @@ -70,9 +71,6 @@ transition: transform 0.3s #{pfe-var(animation-timing)}; } - - - /// =========================================================================== /// COLOR OVERRIDES /// =========================================================================== diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 9a3059cd55..a3ada49979 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -260,7 +260,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-trigger-button($theme: light, $align: left) { --pfe-accordion--main: transparent; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link)}; --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; --pfe-accordion--border-bottom: 0px; @@ -287,6 +287,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b outline: none; border-left-color: var(--pfe-accordion--focus); z-index: 2; + text-decoration: underline; } &::-moz-focus-inner { @@ -327,21 +328,21 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-trigger-color-light { --pfe-accordion--main: transparent; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link)}; --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } @mixin pfe-trigger-color-light-expanded { --pfe-accordion--main: #{pfe-color(surface--lightest)}; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link)}; --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; - --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest-link)}; } @mixin pfe-trigger-color-lightest { --pfe-accordion--main: #{pfe-color(surface--lightest)}; --pfe-accordion--aux: #{pfe-color(surface--lightest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--lightest--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest--link)}; --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } @@ -350,13 +351,13 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-trigger-color-dark { --pfe-accordion--main: transparent; --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest)}; } @mixin pfe-trigger-color-dark-expanded { --pfe-accordion--main: #{pfe-color(surface--darker)}; --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--darkest--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest)}; --pfe-accordion--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; --pfe-accordion--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; } @@ -364,7 +365,7 @@ $pfe-expand_button--padding: calc(#{pfe-var(container-spacer)} * #{$pfe-expand_b @mixin pfe-trigger-color-darkest { --pfe-accordion--main: #{pfe-color(surface--darkest)}; --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; - --pfe-accordion--focus: #{pfe-color(surface--darker--link--focus)}; + --pfe-accordion--focus: #{pfe-color(surface--lightest)}; } @mixin pfe-trigger-color-darkest-expanded { diff --git a/elements/pfe-sass/package-lock.json b/elements/pfe-sass/package-lock.json index d4d0003d98..da8a9eb55c 100644 --- a/elements/pfe-sass/package-lock.json +++ b/elements/pfe-sass/package-lock.json @@ -1,5 +1,5 @@ { "name": "@patternfly/pfe-sass", - "version": "1.0.0-prerelease.8", + "version": "1.0.0-prerelease.9", "lockfileVersion": 1 } diff --git a/elements/pfe-tabs/package-lock.json b/elements/pfe-tabs/package-lock.json index a68835ab68..73549e00d4 100644 --- a/elements/pfe-tabs/package-lock.json +++ b/elements/pfe-tabs/package-lock.json @@ -1,14 +1,18 @@ { "name": "@patternfly/pfe-tabs", - "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", + "resolved": "https://registry.npmjs.org/@patternfly/pfe-sass/-/pfe-sass-1.0.0-prerelease.9.tgz", + "integrity": "sha512-sMo2ZSzBV9wRSjlMxc0cxytYalZ6uk+rQM5X42Hh2qZzjw0v3uUCKDD5Y1kealMvM0yaLymTj1fSaUaeBOxccg==" }, "@patternfly/pfelement": { - "version": "1.0.0-prerelease.8" + "version": "1.0.0-prerelease.9", + "resolved": "https://registry.npmjs.org/@patternfly/pfelement/-/pfelement-1.0.0-prerelease.9.tgz", + "integrity": "sha512-dgwj6IHzWXuDuvSYQYfKuqXAKsQNwIiugIFvIUzyMFLCPMbBiya95zd47wu2s4Bk3qoCaWKxcj0v14P0hMFcyQ==" } } } diff --git a/elements/pfelement/package-lock.json b/elements/pfelement/package-lock.json index 17b968121b..c621414b57 100644 --- a/elements/pfelement/package-lock.json +++ b/elements/pfelement/package-lock.json @@ -1,5 +1,5 @@ { "name": "@patternfly/pfelement", - "version": "1.0.0-prerelease.8", + "version": "1.0.0-prerelease.9", "lockfileVersion": 1 } From 1cf64121334cd45f56c8694b23c65a0329f0d87e Mon Sep 17 00:00:00 2001 From: Kendall Totten Date: Mon, 18 Mar 2019 14:16:47 -0400 Subject: [PATCH 15/29] set-accordion-placeholders revert change to font size based on header tag --- elements/pfe-accordion/demo/index.html | 2 ++ elements/pfe-sass/mixins/_mixins.scss | 16 ++++------------ 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 2da45a7615..3ed0d4ca19 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -3,8 +3,10 @@ PFElements: pfe-accordion Demo +