From f10cdee8577b3e7bf1e396ac2d3a08b2c0387404 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Mar 2019 12:26:32 -0400 Subject: [PATCH 1/6] Suggested mixin updates --- .../src/pfe-accordion-header.scss | 63 +---- .../src/pfe-accordion-panel.scss | 23 +- elements/pfe-sass/mixins/_mixins.scss | 228 +++++++----------- examples/index.html | 2 - 4 files changed, 104 insertions(+), 212 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index d31cbfeb2b..e7a86d0bea 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -8,49 +8,24 @@ @include pfe-accordion-header; button { - @include pfe-trigger-button; // border 3px - @include pfe-trigger-color-light; + @include pfe-trigger-button($component-name: accordion); // border 3px + @include pfe-trigger-color($component-name: accordion); &[aria-expanded="true"] { - @include pfe-trigger-color-light-expanded; + @include pfe-trigger-color-expanded($component-name: accordion); @include pfe-trigger-expanded; } &[aria-expanded="true"]::after { - @include pfe-chevron-expanded-true; + @include pfe-chevron-expanded; } &[aria-expanded="false"]::after { - @include pfe-chevron-expanded-false; + @include pfe-chevron-expanded($state: false); } } } -////////// last child - -// @TODO: 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), :host([color="lightest"]:first-child) { @@ -77,34 +52,10 @@ :host([on="dark"]) { button { - @include pfe-trigger-color-dark; + @include pfe-trigger-color($theme: dark, $component-name: accordion); &[aria-expanded="true"] { - @include pfe-trigger-color-dark-expanded; + @include pfe-trigger-color-expanded($theme: dark, $component-name: accordion); } } } - -// @TODO: 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 61a27afb46..a3fd159de9 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -29,23 +29,8 @@ :host(:last-of-type[expanded]) { @include pfe-accordion-panel-expanded-last; } - -// @TODO: 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; -// } + +:host(:last-of-type[expanded][on="dark"]) { + @include pfe-accordion-panel-expanded-last($theme: dark); +} diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 2c536bb350..5d66e6eb26 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -231,50 +231,47 @@ $pfe-expand-button--LineHeight: 1.5; $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: #{pfe-var(container-spacer)}; -$pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5); +$pfe-expand_button--Padding--factor: 0.75; +$pfe-expand_button--Padding: #{pfe-var(container-spacer)}; +$pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); @mixin pfe-accordion-header { display: block; - - button { - -webkit-appearance: button; - } > * { margin: 0; } } -@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)}; - --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; +@mixin pfe-trigger-button($theme: light, $align: left, $component-name) { + --pfe-#{$component-name}--main: transparent; + --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; + --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; + --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; + --pfe-#{$component-name}--border-bottom: 0; + -webkit-appearance: button; margin: 0; width: 100%; height: auto; font-family: inherit; font-weight: 700; - font-size: calc((#{pfe-var(font-size)} * 1.1)); - line-height: #{pfe-var(line-height)}; text-align: left; cursor: pointer; - color: var(--pfe-accordion--aux); z-index: 1; position: relative; - 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-bottom); + font-size: calc(#{pfe-var(font-size)} * 1.1); + line-height: #{pfe-var(line-height)}; + color: var(--pfe-#{$component-name}--aux); + background-color: var(--pfe-#{$component-name}--main); + border-left: var(--pfe-#{$component-name}--border-left); + border-right: var(--pfe-#{$component-name}--border-right); + border-bottom: var(--pfe-#{$component-name}--border-bottom); border-top: 0; &:hover { outline: none; - border-left-color: var(--pfe-accordion--focus); + border-left-color: var(--pfe-#{$component-name}--focus); z-index: 2; } @@ -288,136 +285,111 @@ $pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5); &::-moz-focus-inner { border: 0; } - @if $theme == right { - padding: $pfe-expand_button--padding $pfe-expand_button--padding-wide $pfe-expand_button--padding 50px; - } - @else { - padding: $pfe-expand_button--padding 50px $pfe-expand_button--padding $pfe-expand_button--padding-wide; + @if $align == right { + padding: $pfe-expand_button--Padding $pfe-expand_button--Padding--wide $pfe-expand_button--Padding 50px; + } @else { + padding: $pfe-expand_button--Padding 50px $pfe-expand_button--Padding $pfe-expand_button--Padding--wide; } - //[scale="large"] & { @TODO later, type scale support + // @TODO later, type scale support + //[scale="large"] & { // font-size: calc((#{pfe-var(font-size)} * 1.3)); //} } @mixin pfe-trigger-button-last($theme: light) { - @if $theme == dark { - border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; - } - @else { - border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; - } + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + // @TODO Support differences based on theme + // @if $theme == dark { + // border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + // } + // @else { + // 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)}; - } + border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + // @TODO Support differences based on theme + // @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)}; + // } } @mixin pfe-trigger-expanded { position: relative; display: block; - border-bottom: 0px; -} - -@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)}; - --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)}; - --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)}; - --pfe-accordion--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; -} - -//// DARK - -@mixin pfe-trigger-color-dark { - --pfe-accordion--main: transparent; - --pfe-accordion--aux: #{pfe-color(surface--darkest--text)}; - --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--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)}; + border-bottom: 0; } -@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--lightest)}; +@mixin pfe-trigger-color($theme: light, $component-name) { + @if $theme == dark { + --pfe-#{$component-name}--main: transparent; + --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; + --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)}; + } + @else { + --pfe-#{$component-name}--main: transparent; + --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; + --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + } } -@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)}; +@mixin pfe-trigger-color-expanded($theme: light, $component-name) { + @if $theme == dark { + --pfe-#{$component-name}--main: #{pfe-color(surface--darker)}; + --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; + --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)}; + --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + } + @else { + --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)}; + --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; + --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + } } - /// =========================================================================== /// 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: #{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; - text-align: center; - transition: transform 0.15s; - transform: rotate(45deg); +@mixin pfe-chevron-expanded($state: true, $position: after) { + content: ""; + position: absolute; + top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--Padding--factor}) + #{$pfe-expand_chevron--placement} ); + display: block; + border-style: #{pfe-var(surface--border-style)}; + height: $pfe-expand_chevron--size; + width: $pfe-expand_chevron--size; + text-align: center; + transition: transform 0.15s; + @if $state { + border-width: #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0 0; + border-bottom: 0; + transform: rotate(-45deg); @if $position == before { - left: $pfe-expand_button--padding-wide; + left: #{$pfe-expand_button--Padding--wide}; } @else { - right: $pfe-expand_button--padding-wide; + right: #{$pfe-expand_button--Padding--wide}; } -} - -@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: #{pfe-var(surface--border-style)}; - border-width: $pfe-expand_chevron--weight $pfe-expand_chevron--weight 0 0; - text-align: center; - border-bottom: 0; - transition: all 0.15s; - transform: rotate(-45deg); + } + @else { + border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0; + transform: rotate(45deg); @if $position == before { - left: $pfe-expand_button--padding-wide; + left: #{$pfe-expand_button--Padding--wide}; } @else { - right: $pfe-expand_button--padding-wide; + right: #{$pfe-expand_button--Padding--wide}; } + } } /// =========================================================================== @@ -466,23 +438,9 @@ $pfe-expand_button--padding-wide: calc(#{pfe-var(container-spacer)} * 1.5); border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } -@mixin pfe-accordion-panel-expanded-style-darkest { - background: #{pfe-color(surface--darkest)}; -} - -@mixin pfe-accordion-panel-expanded-style-lightest { - background: #{pfe-color(surface--lightest)}; -} - -@mixin pfe-accordion-panel-expanded-last-dark { - 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; -} @mixin pfe-accordion-panel-container-inset { box-sizing: border-box; - padding: 0 $pfe-expand_button--padding-wide $pfe-expand_button--padding; + padding: 0 #{$pfe-expand_button--Padding--wide} #{$pfe-expand_button--Padding}; width: 100%; } diff --git a/examples/index.html b/examples/index.html index 68cc68c99e..c0166493e1 100644 --- a/examples/index.html +++ b/examples/index.html @@ -22,8 +22,6 @@

Demos

  • pfe-icon
  • pfe-icon-panel
  • pfe-layouts
    • -
  • pfe-link-list
    • -
  • pfe-navigation
  • pfe-number
  • pfe-tabs
    • From cb623067f9b70776bf52e22957955820d16ab0a0 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Mar 2019 14:01:05 -0400 Subject: [PATCH 2/6] Updates to the styles to resolve compilation error --- .../src/pfe-accordion-panel.scss | 6 +- elements/pfe-accordion/src/pfe-accordion.scss | 18 +----- elements/pfe-sass/mixins/_mixins.scss | 59 ++++--------------- 3 files changed, 15 insertions(+), 68 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index a3fd159de9..fb65f87988 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -27,10 +27,6 @@ } :host(:last-of-type[expanded]) { - @include pfe-accordion-panel-expanded-last; -} - -:host(:last-of-type[expanded][on="dark"]) { - @include pfe-accordion-panel-expanded-last($theme: dark); + margin-bottom: 0; } diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss index fad404d8f2..5096965cf1 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -5,7 +5,7 @@ position: relative; overflow: hidden; margin: 0; - color: var(--pfe-broadcasted--color--text); + color: #{pfe-radio(color--text)}; } :host([on="dark"]) { @@ -16,19 +16,3 @@ @include pfe-theme($theme: "light"); } -// @TODO: 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 5d66e6eb26..459b419b52 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -176,38 +176,6 @@ } } - -/// RH Define Vars -/// Helps define the CSS Var madness, making it easier for devs! -/// @param {String} $this-component-var - Component specific variable name -/// @param {String} $this-theme-var - Theme variable name -/// @param {String} $this-fallback - Fallback color -/// -/// --------------------------------------------------------------------------- -/// -/// SASS fallback based on PFElements style -/// $pfe-global[--context][--state][--PropertyCamelCase] - -/// Theme level Var -/// --pfe-theme[--context][--state][--PropertyCamelCase] -/// --pfe-theme--heading--hover--BackgroundColor - -/// Component Var for theming specific cases -/// --pfe-[component-block][__element][--context][--state][--PropertyCamelCase] -/// --pfe-teaser__title--link-color--visited -/// --pfe-teaser__subtitle--link-color--visited - -/// Defined locally for sanity -/// --pfe-local-[component-block][__element][--context][--state][--PropertyCamelCase] -/// --pfe-local-cta--link-color--inverted -/// -/// --------------------------------------------------------------------------- -/// -/// ↓ component, ↓ theme, ↓ fallback -@mixin pfe-define-vars($this-component-var, $this-theme-var, $this-fallback) { - --pfe-local-#{$this-component-var}: var(--pfe-#{$this-component-var}, var(--pfe-theme--#{$this-theme-var}, #{$this-fallback})); -} - // Mixin for building slot selectors @mixin pfe-slot($slot-name, $selector: "") { // This logic makes it much easier to style default slots in a loop @@ -227,13 +195,13 @@ /// =========================================================================== /// Accordion Specific SASS Vars /// =========================================================================== -$pfe-expand-button--LineHeight: 1.5; -$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: #{pfe-var(container-spacer)}; -$pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); +$pfe-expand_button--LineHeight: 1.5; +$pfe-expand_button--Padding--factor: .75; +$pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); + +$pfe-expand_chevron--size: .4em; +$pfe-expand_chevron--weight: .1em; +$pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2}; @mixin pfe-accordion-header { display: block; @@ -242,7 +210,7 @@ $pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); } } -@mixin pfe-trigger-button($theme: light, $align: left, $component-name) { +@mixin pfe-trigger-button($component-name, $theme: light, $align: left) { --pfe-#{$component-name}--main: transparent; --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; @@ -286,9 +254,9 @@ $pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); border: 0; } @if $align == right { - padding: $pfe-expand_button--Padding $pfe-expand_button--Padding--wide $pfe-expand_button--Padding 50px; + padding: #{pfe-var(container-spacer)} $pfe-expand_button--Padding--wide #{pfe-var(container-spacer)} 50px; } @else { - padding: $pfe-expand_button--Padding 50px $pfe-expand_button--Padding $pfe-expand_button--Padding--wide; + padding: #{pfe-var(container-spacer)} 50px #{pfe-var(container-spacer)} $pfe-expand_button--Padding--wide; } // @TODO later, type scale support //[scale="large"] & { @@ -324,7 +292,7 @@ $pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); border-bottom: 0; } -@mixin pfe-trigger-color($theme: light, $component-name) { +@mixin pfe-trigger-color($component-name, $theme: light) { @if $theme == dark { --pfe-#{$component-name}--main: transparent; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; @@ -338,7 +306,7 @@ $pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); } } -@mixin pfe-trigger-color-expanded($theme: light, $component-name) { +@mixin pfe-trigger-color-expanded($component-name, $theme: light) { @if $theme == dark { --pfe-#{$component-name}--main: #{pfe-color(surface--darker)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; @@ -413,7 +381,6 @@ $pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); overflow: hidden; will-change: height; border-color: transparent; - overflow: hidden; } @mixin pfe-accordion-panel-expanded { @@ -441,6 +408,6 @@ $pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); @mixin pfe-accordion-panel-container-inset { box-sizing: border-box; - padding: 0 #{$pfe-expand_button--Padding--wide} #{$pfe-expand_button--Padding}; + padding: 0 #{$pfe-expand_button--Padding--wide} #{pfe-var(container-spacer)}; width: 100%; } From 8cbf1e8b1351c672bd7a9a6b0744a460d2f96384 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Mar 2019 14:47:16 -0400 Subject: [PATCH 3/6] Revert accidental merge conflict overwrites --- elements/pfe-sass/mixins/_mixins.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index ca3c0ebe9b..9e44bc8d5e 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -197,8 +197,9 @@ /// =========================================================================== $pfe-expand_button--LineHeight: 1.5; +$pfe-expand_button--Padding: #{pfe-var(container-spacer)}; $pfe-expand_button--Padding--factor: .75; -$pfe-expand_button--Padding--wide: calc(#{pfe-var(container-spacer)} * 1.5); +$pfe-expand_button--Padding--wide: #{$pfe-expand_button--Padding * 1.5}; $pfe-expand_chevron--size: .4em; $pfe-expand_chevron--weight: .1em; @@ -215,7 +216,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe --pfe-#{$component-name}--main: transparent; --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} transparent; + --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent; --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; --pfe-#{$component-name}--border-bottom: 0; @@ -255,9 +256,9 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe border: 0; } @if $align == right { - padding: #{pfe-var(container-spacer)} $pfe-expand_button--Padding--wide #{pfe-var(container-spacer)} 50px; + padding: #{$pfe-expand_button--Padding} $pfe-expand_button--Padding--wide #{$pfe-expand_button--Padding} 50px; } @else { - padding: #{pfe-var(container-spacer)} 50px #{pfe-var(container-spacer)} $pfe-expand_button--Padding--wide; + padding: #{$pfe-expand_button--Padding} 50px #{$pfe-expand_button--Padding} $pfe-expand_button--Padding--wide; } // @TODO later, type scale support //[scale="large"] & { @@ -312,14 +313,14 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe --pfe-#{$component-name}--main: #{pfe-color(surface--darker)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)}; - --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; } @else { --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-thick)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } From 75442200899e84a3f7c2c5f7c6a9e627956b55f7 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Mar 2019 15:20:04 -0400 Subject: [PATCH 4/6] Resolve complexity with variable calls in mixins using pfe-local; fix broadcasted variable for ui-links in theme mixin --- elements/pfe-accordion/demo/index.html | 12 ++ .../src/pfe-accordion-header.scss | 19 ++-- .../src/pfe-accordion-panel.scss | 5 +- elements/pfe-accordion/src/pfe-accordion.scss | 2 + elements/pfe-sass/mixins/_mixins.scss | 106 +++++++++--------- 5 files changed, 80 insertions(+), 64 deletions(-) diff --git a/elements/pfe-accordion/demo/index.html b/elements/pfe-accordion/demo/index.html index 6cdd76e0a2..3b69a02753 100644 --- a/elements/pfe-accordion/demo/index.html +++ b/elements/pfe-accordion/demo/index.html @@ -33,6 +33,18 @@ section { padding: 2rem; } + a { + color: var(--pfe-broadcasted--color--ui-link); + } + a:hover { + color: var(--pfe-broadcasted--color--ui-link--hover); + } + a:visited { + color: var(--pfe-broadcasted--color--ui-link--visited); + } + a:focus { + color: var(--pfe-broadcasted--color--ui-link--focus); + } .dark-background { background-color: #191e84; } diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index e7a86d0bea..47c7c1e66f 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -1,5 +1,7 @@ @import "../../pfe-sass/pfe-sass"; +$LOCAL: accordion; + /// =========================================================================== /// DEFAULT ACCORDION HEADING /// =========================================================================== @@ -8,16 +10,15 @@ @include pfe-accordion-header; button { - @include pfe-trigger-button($component-name: accordion); // border 3px + @include pfe-trigger-button; @include pfe-trigger-color($component-name: accordion); &[aria-expanded="true"] { - @include pfe-trigger-color-expanded($component-name: accordion); - @include pfe-trigger-expanded; - } - - &[aria-expanded="true"]::after { + @include pfe-trigger-color-expanded($component-name: accordion); + @include pfe-trigger-expanded; + &::after { @include pfe-chevron-expanded; + } } &[aria-expanded="false"]::after { @@ -26,9 +27,7 @@ } } -:host(:first-child), -:host([color="lighter"]:first-child), -:host([color="lightest"]:first-child) { +:host(:first-child) { button { @include pfe-trigger-button-first($theme: light); } @@ -47,7 +46,7 @@ } /// =========================================================================== -/// COLOR OVERRIDES +/// CONTEXT STYLES, ON=DARK /// =========================================================================== :host([on="dark"]) { diff --git a/elements/pfe-accordion/src/pfe-accordion-panel.scss b/elements/pfe-accordion/src/pfe-accordion-panel.scss index e9ee739f3a..28363830c1 100644 --- a/elements/pfe-accordion/src/pfe-accordion-panel.scss +++ b/elements/pfe-accordion/src/pfe-accordion-panel.scss @@ -1,5 +1,7 @@ @import "../../pfe-sass/pfe-sass"; +$LOCAL: accordion; + /// =========================================================================== /// DEFAULT ACCORDION PANEL /// =========================================================================== @@ -14,6 +16,7 @@ } :host([on="dark"][expanded]) { + @include pfe-theme($theme: "dark"); @include pfe-accordion-panel-expanded-style($theme: dark); } @@ -25,7 +28,7 @@ .container { @include pfe-accordion-panel-container-inset($align: left); } - + :host(:last-of-type[expanded]) { margin-bottom: 0; } diff --git a/elements/pfe-accordion/src/pfe-accordion.scss b/elements/pfe-accordion/src/pfe-accordion.scss index 5096965cf1..699e5206ac 100644 --- a/elements/pfe-accordion/src/pfe-accordion.scss +++ b/elements/pfe-accordion/src/pfe-accordion.scss @@ -1,5 +1,7 @@ @import "../../pfe-sass/pfe-sass"; +$LOCAL: accordion; + :host { display: block; position: relative; diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 9e44bc8d5e..5979075ff6 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -40,58 +40,58 @@ /// =========================================================================== @mixin pfe-theme($theme) { + // GENERAL CONTEXT-BASED UPDATES, ON="DARK" @if $theme == dark { --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)}; + --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link--on-dark)}; + --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--on-dark--visited)}; + --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--on-dark--hover)}; + --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--on-dark--focus)}; } - @if $theme == light { + @else 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)}; + --pfe-broadcasted--color--ui-link: #{pfe-color(ui-link)}; + --pfe-broadcasted--color--ui-link--visited: #{pfe-color(ui-link--visited)}; + --pfe-broadcasted--color--ui-link--hover: #{pfe-color(ui-link--hover)}; + --pfe-broadcasted--color--ui-link--focus: #{pfe-color(ui-link--focus)}; } - // THEMES: - @if $theme == darker { + // MORE SPECIFIC COLOR BASED UPDATES, COLOR="DARKER" + @else if $theme == darker { --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)}; } - @if $theme == darkest { + @else if $theme == darkest { --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)}; } - @if $theme == accent { + @else if $theme == accent { --pfe-broadcasted--color--text: #{pfe-color(surface--accent--text)}; --pfe-broadcasted--color--ui-link: #{pfe-color(surface--accent--link)}; --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--accent--link--visited)}; --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--accent--link--hover)}; --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--accent--link--focus)}; } - @if $theme == complement { + @else if $theme == complement { --pfe-broadcasted--color--text: #{pfe-color(surface--complement--text)}; --pfe-broadcasted--color--ui-link: #{pfe-color(surface--complement--link)}; --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--complement--link--visited)}; --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 == lighter { + @else if $theme == lighter { --pfe-broadcasted--color--text: #{pfe-color(surface--lighter--text)}; --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lighter--link)}; --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lighter--link--visited)}; --pfe-broadcasted--color--ui-link--hover: #{pfe-color(surface--lighter--link--hover)}; --pfe-broadcasted--color--ui-link--focus: #{pfe-color(surface--lighter--link--focus)}; } - @if $theme == lightest { + @else if $theme == lightest { --pfe-broadcasted--color--text: #{pfe-color(surface--lightest--text)}; --pfe-broadcasted--color--ui-link: #{pfe-color(surface--lightest--link)}; --pfe-broadcasted--color--ui-link--visited: #{pfe-color(surface--lightest--link--visited)}; @@ -197,12 +197,13 @@ /// =========================================================================== $pfe-expand_button--LineHeight: 1.5; -$pfe-expand_button--Padding: #{pfe-var(container-spacer)}; -$pfe-expand_button--Padding--factor: .75; -$pfe-expand_button--Padding--wide: #{$pfe-expand_button--Padding * 1.5}; +$pfe-expand_button--padding: #{pfe-var(container-spacer)}; +$pfe-expand_button--padding--factor: .75; +$pfe-expand_button--padding--wide: calc(#{$pfe-expand_button--padding} * 1.5); $pfe-expand_chevron--size: .4em; $pfe-expand_chevron--weight: .1em; +$pfe-expand_chevron--padding: 3em; $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe-expand_chevron--size / 2}; @mixin pfe-accordion-header { @@ -212,14 +213,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe } } -@mixin pfe-trigger-button($component-name, $theme: light, $align: left) { - --pfe-#{$component-name}--main: transparent; - --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; - --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent; - --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; - --pfe-#{$component-name}--border-bottom: 0; - +@mixin pfe-trigger-button($theme: light, $align: left) { -webkit-appearance: button; margin: 0; width: 100%; @@ -230,18 +224,20 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe cursor: pointer; z-index: 1; position: relative; + font-size: calc(#{pfe-var(font-size)} * 1.1); line-height: #{pfe-var(line-height)}; - color: var(--pfe-#{$component-name}--aux); - background-color: var(--pfe-#{$component-name}--main); - border-left: var(--pfe-#{$component-name}--border-left); - border-right: var(--pfe-#{$component-name}--border-right); - border-bottom: var(--pfe-#{$component-name}--border-bottom); + + color: #{pfe-local(aux)}; //var(--pfe-#{$component-name}--aux); + background-color: #{pfe-local(main)}; //var(--pfe-#{$component-name}--main); + border-left: #{pfe-local(BorderLeft)}; //var(--pfe-#{$component-name}--border-left); + border-right: #{pfe-local(BorderRight)}; //var(--pfe-#{$component-name}--border-right); + border-bottom: #{pfe-local(BorderBottom)}; //var(--pfe-#{$component-name}--border-bottom); border-top: 0; &:hover { outline: none; - border-left-color: var(--pfe-#{$component-name}--focus); + border-left-color: #{pfe-local(BorderLeftColor--focus)}; //var(--pfe-#{$component-name}--focus); z-index: 2; } @@ -249,16 +245,16 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe outline: none; z-index: 2; text-decoration: underline; - text-decoration-color: pfe-color(surface--border--darker); + text-decoration-color: #{pfe-color(surface--border--darker)}; } &::-moz-focus-inner { border: 0; } @if $align == right { - padding: #{$pfe-expand_button--Padding} $pfe-expand_button--Padding--wide #{$pfe-expand_button--Padding} 50px; + padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px; } @else { - padding: #{$pfe-expand_button--Padding} 50px #{$pfe-expand_button--Padding} $pfe-expand_button--Padding--wide; + padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide}; } // @TODO later, type scale support //[scale="large"] & { @@ -298,13 +294,17 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @if $theme == dark { --pfe-#{$component-name}--main: transparent; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; - --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; } @else { --pfe-#{$component-name}--main: transparent; --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; - --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + + --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent; + --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; + + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } @@ -312,16 +312,16 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @if $theme == dark { --pfe-#{$component-name}--main: #{pfe-color(surface--darker)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; - --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest)}; - --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; - --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; + --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; } @else { --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--border-left: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } @@ -332,7 +332,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @mixin pfe-chevron-expanded($state: true, $position: after) { content: ""; position: absolute; - top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--Padding--factor}) + #{$pfe-expand_chevron--placement} ); + top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} ); display: block; border-style: #{pfe-var(surface--border-style)}; height: $pfe-expand_chevron--size; @@ -344,20 +344,20 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe border-bottom: 0; transform: rotate(-45deg); @if $position == before { - left: #{$pfe-expand_button--Padding--wide}; + left: #{$pfe-expand_button--padding--wide}; } @else { - right: #{$pfe-expand_button--Padding--wide}; + right: #{$pfe-expand_button--padding--wide}; } } @else { border-width: 0 #{$pfe-expand_chevron--weight} #{$pfe-expand_chevron--weight} 0; transform: rotate(45deg); @if $position == before { - left: #{$pfe-expand_button--Padding--wide}; + left: #{$pfe-expand_button--padding--wide}; } @else { - right: #{$pfe-expand_button--Padding--wide}; + right: #{$pfe-expand_button--padding--wide}; } } } @@ -371,7 +371,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe display: block; width: 100%; - padding: calc(#{pfe-local(Padding--vertical)} / 2) #{pfe-local(Padding--horizontal)}; + padding: calc(#{pfe-local(padding--vertical)} / 2) #{pfe-local(padding--horizontal)}; @media (min-width: #{pfe-breakpoint(sm)}) { padding: #{pfe-local(Padding)}; @@ -413,9 +413,9 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe width: 100%; @if $align == left { - padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding-wide}; + padding: 0 #{$pfe-expand_chevron--padding} #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide}; } @else { - padding: 0 #{$pfe-expand_button--padding-wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding}; + padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding}; } } From 0528246ace86372ba07bf0e4b442c733be18f110 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Mar 2019 15:26:46 -0400 Subject: [PATCH 5/6] Remove unnecessary comments --- .../src/pfe-accordion-header.scss | 2 +- elements/pfe-sass/mixins/_mixins.scss | 30 ++++++------------- 2 files changed, 10 insertions(+), 22 deletions(-) diff --git a/elements/pfe-accordion/src/pfe-accordion-header.scss b/elements/pfe-accordion/src/pfe-accordion-header.scss index 47c7c1e66f..ef75c977d2 100644 --- a/elements/pfe-accordion/src/pfe-accordion-header.scss +++ b/elements/pfe-accordion/src/pfe-accordion-header.scss @@ -10,8 +10,8 @@ $LOCAL: accordion; @include pfe-accordion-header; button { - @include pfe-trigger-button; @include pfe-trigger-color($component-name: accordion); + @include pfe-trigger-button; &[aria-expanded="true"] { @include pfe-trigger-color-expanded($component-name: accordion); diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 5979075ff6..f7de9040e1 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -213,7 +213,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe } } -@mixin pfe-trigger-button($theme: light, $align: left) { +@mixin pfe-trigger-button($align: left) { -webkit-appearance: button; margin: 0; width: 100%; @@ -228,16 +228,16 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe font-size: calc(#{pfe-var(font-size)} * 1.1); line-height: #{pfe-var(line-height)}; - color: #{pfe-local(aux)}; //var(--pfe-#{$component-name}--aux); - background-color: #{pfe-local(main)}; //var(--pfe-#{$component-name}--main); - border-left: #{pfe-local(BorderLeft)}; //var(--pfe-#{$component-name}--border-left); - border-right: #{pfe-local(BorderRight)}; //var(--pfe-#{$component-name}--border-right); - border-bottom: #{pfe-local(BorderBottom)}; //var(--pfe-#{$component-name}--border-bottom); + color: #{pfe-local(aux)}; + background-color: #{pfe-local(main)}; + border-left: #{pfe-local(BorderLeft)}; + border-right: #{pfe-local(BorderRight)}; + border-bottom: #{pfe-local(BorderBottom)}; border-top: 0; &:hover { outline: none; - border-left-color: #{pfe-local(BorderLeftColor--focus)}; //var(--pfe-#{$component-name}--focus); + border-left-color: #{pfe-local(BorderLeftColor--focus)}; z-index: 2; } @@ -265,23 +265,11 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @mixin pfe-trigger-button-last($theme: light) { border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; // @TODO Support differences based on theme - // @if $theme == dark { - // border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; - // } - // @else { - // border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; - // } } @mixin pfe-trigger-button-first($theme: light) { border-top: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; // @TODO Support differences based on theme - // @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)}; - // } } @mixin pfe-trigger-expanded { @@ -294,7 +282,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @if $theme == dark { --pfe-#{$component-name}--main: transparent; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; - --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; } @else { --pfe-#{$component-name}--main: transparent; @@ -302,9 +290,9 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} transparent; --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; + --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--BorderBottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } From b1059e379fe79f38eceecb10b984869d0b3488b5 Mon Sep 17 00:00:00 2001 From: castastrophe Date: Fri, 22 Mar 2019 15:29:57 -0400 Subject: [PATCH 6/6] minor syntax updates --- elements/pfe-sass/mixins/_mixins.scss | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index f7de9040e1..687d055505 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -219,7 +219,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe width: 100%; height: auto; font-family: inherit; - font-weight: 700; + font-weight: #{pfe-var(font-weight--bold)}; text-align: left; cursor: pointer; z-index: 1; @@ -237,7 +237,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe &:hover { outline: none; - border-left-color: #{pfe-local(BorderLeftColor--focus)}; + border-left-color: #{pfe-local(BorderLeftColor--focus)}; z-index: 2; } @@ -251,15 +251,12 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe &::-moz-focus-inner { border: 0; } + @if $align == right { padding: #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} 50px; } @else { padding: #{$pfe-expand_button--padding} 50px #{$pfe-expand_button--padding} #{$pfe-expand_button--padding--wide}; } - // @TODO later, type scale support - //[scale="large"] & { - // font-size: calc((#{pfe-var(font-size)} * 1.3)); - //} } @mixin pfe-trigger-button-last($theme: light) { @@ -300,16 +297,17 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @if $theme == dark { --pfe-#{$component-name}--main: #{pfe-color(surface--darker)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--darkest--text)}; + --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; - --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; - --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border-darkest)}; } @else { --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)}; --pfe-#{$component-name}--aux: #{pfe-color(surface--lightest--text)}; --pfe-#{$component-name}--focus: #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; - --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; + --pfe-#{$component-name}--BorderLeft: #{pfe-var(surface--border-width-heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--lightest--link)}; + --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border--lightest)}; } } @@ -323,8 +321,8 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe top: calc((#{pfe-var(container-spacer)} * #{$pfe-expand_button--padding--factor}) + #{$pfe-expand_chevron--placement} ); display: block; border-style: #{pfe-var(surface--border-style)}; - height: $pfe-expand_chevron--size; - width: $pfe-expand_chevron--size; + height: #{$pfe-expand_chevron--size}; + width: #{$pfe-expand_chevron--size}; text-align: center; transition: transform 0.15s; @if $state {