From c35dd8eb0dcaef3cb5d15d4848d9b11ba61ada33 Mon Sep 17 00:00:00 2001 From: Kendall Totten Date: Wed, 26 Jun 2019 15:17:24 -0400 Subject: [PATCH 1/6] - Move border bottom from button to panel, so that it moves with the panel while expanding/collapsing - change focus underline color to ui-link for visibility --- elements/pfe-sass/mixins/_mixins.scss | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 2d1106cfc9..dfee8cb1aa 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -233,7 +233,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe background-color: #{pfe-local(main)}; border-left: #{pfe-local(BorderLeft)}; border-right: #{pfe-local(BorderRight)}; - border-bottom: #{pfe-local(BorderBottom)}; + border-bottom: 1px solid transparent; //#{pfe-local(BorderBottom)}; border-top: 0; &:hover { @@ -246,7 +246,7 @@ $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(ui-link)}; } &::-moz-focus-inner { @@ -261,7 +261,7 @@ $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)}; + //border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; // @TODO Support differences based on theme } @@ -366,20 +366,31 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe } @mixin pfe-accordion-panel { - display: none; + //display: none; + display: block; + height: 0px; overflow: hidden; will-change: height; border-color: transparent; + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; + [tabindex="-1"] { + display: none; + } } @mixin pfe-accordion-panel-expanded { + height: auto; display: block; position: relative; + [tabindex="-1"] { + display: block; + } } @mixin pfe-accordion-panel-expanded-style($theme: light) { border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent; + //border-bottom: 1px solid green; //#{pfe-local(BorderBottom)}; @if $theme == dark { box-shadow: none; background-color: #{pfe-color(surface--darker)}; @@ -391,7 +402,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe border-left-color: #{pfe-color(surface--lightest--link)}; background-color: #{pfe-color(surface--lightest)}; border-right-color: #{pfe-color(surface--border)}; - border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; + //border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; } } From 42fec0c21cd8d4d79178d23808405c0eed88c745 Mon Sep 17 00:00:00 2001 From: Kendall Totten Date: Wed, 26 Jun 2019 15:44:04 -0400 Subject: [PATCH 2/6] change link underline color on focus --- elements/pfe-sass/mixins/_mixins.scss | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index dfee8cb1aa..3840b6e28a 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -233,7 +233,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe background-color: #{pfe-local(main)}; border-left: #{pfe-local(BorderLeft)}; border-right: #{pfe-local(BorderRight)}; - border-bottom: 1px solid transparent; //#{pfe-local(BorderBottom)}; + border-bottom: #{pfe-local(BorderBottom)}; border-top: 0; &:hover { @@ -261,7 +261,7 @@ $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)}; + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; // @TODO Support differences based on theme } @@ -366,31 +366,20 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe } @mixin pfe-accordion-panel { - //display: none; - display: block; - height: 0px; + display: none; overflow: hidden; will-change: height; border-color: transparent; - border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; - [tabindex="-1"] { - display: none; - } } @mixin pfe-accordion-panel-expanded { - height: auto; display: block; position: relative; - [tabindex="-1"] { - display: block; - } } @mixin pfe-accordion-panel-expanded-style($theme: light) { border-right: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} transparent; border-left: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} transparent; - //border-bottom: 1px solid green; //#{pfe-local(BorderBottom)}; @if $theme == dark { box-shadow: none; background-color: #{pfe-color(surface--darker)}; @@ -402,7 +391,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe border-left-color: #{pfe-color(surface--lightest--link)}; background-color: #{pfe-color(surface--lightest)}; border-right-color: #{pfe-color(surface--border)}; - //border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; + border-bottom: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; } } @@ -416,4 +405,4 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @else { padding: 0 #{$pfe-expand_button--padding--wide} #{$pfe-expand_button--padding} #{$pfe-expand_chevron--padding}; } -} +} \ No newline at end of file From 632327b474510d121c0213873c6f7fdfc4f6c529 Mon Sep 17 00:00:00 2001 From: Chris Doherty Date: Wed, 28 Aug 2019 11:28:19 -0400 Subject: [PATCH 3/6] issue-444 set underline color for focus states on dark to white * also addressed issue with border colors on expanded accordions on dark backgrounds (see issue 514). --- elements/pfe-sass/mixins/_mixins.scss | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 3840b6e28a..c0ecc1ce22 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -246,7 +246,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe outline: none; z-index: 2; text-decoration: underline; - text-decoration-color: #{pfe-color(ui-link)}; + text-decoration-color: #{pfe-local(TextDecorationColor--focus)}; } &::-moz-focus-inner { @@ -262,6 +262,7 @@ $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)}; + border-top: 0; // @TODO Support differences based on theme } @@ -281,6 +282,7 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe --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}--TextDecorationColor--focus: #{pfe-color(surface--darkest--text)}; } @else { --pfe-#{$component-name}--main: transparent; @@ -289,6 +291,7 @@ $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)}; + --pfe-#{$component-name}--TextDecorationColor--focus: #{pfe-color(ui-link)}; --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)}; } @@ -298,8 +301,8 @@ $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}--BorderLeft: #{pfe-var(surface--border-width--heavy)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; + --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; } @@ -383,8 +386,8 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe @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)}; + border-left-color: #{pfe-color(surface--border)}; + border-right-color: #{pfe-color(surface--border)}; } @else { box-shadow: 0 5px #{pfe-var(surface--border-width--heavy)} rgba(140, 140, 140, 0.35); From 3ecd7ca8c41021773357d76ad6c822ae3b9183ed Mon Sep 17 00:00:00 2001 From: Chris Doherty Date: Wed, 28 Aug 2019 16:18:27 -0400 Subject: [PATCH 4/6] issue-444 * set accordion content to disappear before the accordion collapses * set the dark accordion to have a blue left border on hover. --- elements/pfe-sass/mixins/_mixins.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index c0ecc1ce22..ba57b24a27 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -281,7 +281,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(ui-link--on-dark)}; --pfe-#{$component-name}--TextDecorationColor--focus: #{pfe-color(surface--darkest--text)}; } @else { @@ -304,7 +304,7 @@ $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)} #{pfe-color(surface--border)}; --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; - --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(ui-link--on-dark)}; } @else { --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)}; @@ -373,11 +373,13 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe overflow: hidden; will-change: height; border-color: transparent; + opacity: 0; } @mixin pfe-accordion-panel-expanded { display: block; position: relative; + opacity: 1; } @mixin pfe-accordion-panel-expanded-style($theme: light) { From bae3802e82c7505f81ac73802059280f0ef4fc98 Mon Sep 17 00:00:00 2001 From: Chris Doherty Date: Thu, 29 Aug 2019 11:16:47 -0400 Subject: [PATCH 5/6] issue-444: reverted dark theme border left hover color --- elements/pfe-sass/mixins/_mixins.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index ba57b24a27..8429cf2dda 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -281,7 +281,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(ui-link--on-dark)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; --pfe-#{$component-name}--TextDecorationColor--focus: #{pfe-color(surface--darkest--text)}; } @else { @@ -304,7 +304,7 @@ $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)} #{pfe-color(surface--border)}; --pfe-#{$component-name}--BorderRight: #{pfe-var(surface--border-width)} #{pfe-var(surface--border-style)} #{pfe-color(surface--border)}; - --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(ui-link--on-dark)}; + --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest)}; } @else { --pfe-#{$component-name}--main: #{pfe-color(surface--lightest)}; From 12b87364bb8c2691c8144eaac6939dc9729b43b3 Mon Sep 17 00:00:00 2001 From: Chris Doherty Date: Thu, 5 Sep 2019 10:24:54 -0400 Subject: [PATCH 6/6] issue-444 removed TextDecorationColor from accordion header mixins. --- elements/pfe-sass/mixins/_mixins.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/elements/pfe-sass/mixins/_mixins.scss b/elements/pfe-sass/mixins/_mixins.scss index 0bd137ba6a..f2f5329744 100644 --- a/elements/pfe-sass/mixins/_mixins.scss +++ b/elements/pfe-sass/mixins/_mixins.scss @@ -253,7 +253,6 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe outline: none; z-index: 2; text-decoration: underline; - text-decoration-color: #{pfe-local(TextDecorationColor--focus)}; } &::-moz-focus-inner { @@ -289,7 +288,6 @@ $pfe-expand_chevron--placement: #{$pfe-expand_button--LineHeight / 2 - $pfe --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}--TextDecorationColor--focus: #{pfe-color(surface--darkest--text)}; } @else { --pfe-#{$component-name}--main: transparent; @@ -298,7 +296,6 @@ $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)}; - --pfe-#{$component-name}--TextDecorationColor--focus: #{pfe-color(ui-link)}; --pfe-#{$component-name}--BorderLeftColor--focus: #{pfe-color(surface--lightest--link)}; }