Fix: Updated direction for disclosure carets (opened and closed) (#674)

* Changed direction for disclosure carets (opened and closed)
* moved caret up slightly when opened.
* Added changelog, changed argument name in chevron mixin.
* Adjusted vertical position of chevron
* made default chevron size smaller

Co-authored-by: Kendall Totten <[email protected]>

Author: chrisdo1

CHANGELOG-prerelease.md

@@ -4,7 +4,9 @@ Tag: [v1.0.0-prerelease.34](https://github.com/patternfly/patternfly-elements/re
 
 - [c2833e3](https://github.com/patternfly/patternfly-elements/commit/c2833e3ef9caa87edbbc56fa22471525d453b7d3) feat: pfe-badge (#625)
 - [9d9e001](https://github.com/patternfly/patternfly-elements/commit/9d9e00169fe949f78c31211c5d0a4bf3af1dbe9e) fix: Restore clickability of pfe-cta links
-- [](https://github.com/patternfly/patternfly-elements/commit/) chore: Update license from 2019 to 2020
+- [90855bb](https://github.com/patternfly/patternfly-elements/commit/90855bbc01b800de3280691ee67e61887fd7fe4d) chore: Update license from 2019 to 2020
+- [88b26ed](https://github.com/patternfly/patternfly-elements/commit/88b26ed90616651a994890454172be5b4e78db7d) fix: pfe-navigation: Trigger link color, font-size, logo min-width, spacing (#631)
+- [](https://github.com/patternfly/patternfly-elements/commit/) Change direction of disclosure carets (#674) (https://github.com/patternfly/patternfly-elements/issues/662)
 
 ## Prerelease 33 ( 2019-12-18 )
 

elements/pfe-navigation/src/pfe-navigation-item.scss

@@ -218,11 +218,11 @@ $variables: map-merge($variables, $nav-item-variables);
   &::after {
     // closed:
     :host([is_nested]:not(.expanded):not([parent_hidden])) & {
-      @include pfe-chevron($state: closed, $position: 0px);
+      @include pfe-chevron($state: closed, $offset: 0px);
     }
     // open:
     :host([is_nested].expanded:not([parent_hidden])) & {
-      @include pfe-chevron($state: open, $position: 4px);
+      @include pfe-chevron($state: open, $offset: 4px);
     }
     :host([is_nested]:not([parent_hidden])) & {
       --pfe-navigation__trigger-icon--Visible: visible;

elements/pfe-sass/mixins/_components.scss

@@ -193,11 +193,12 @@
 /// Accordion chevrons
 /// ===========================================================================
 
-@mixin pfe-chevron($state: open, $position: after, $size: .4em, $position: $size) {
+@mixin pfe-chevron($state: open, $position: after, $size: .4em, $offset: $size) {
 
   content: "";
   position: absolute;
-  top: calc(#{pfe-var(container-spacer)} + #{$position});
+  top: calc(#{pfe-var(container-spacer)} + #{$offset});
+
   display: block;
   border-style: #{pfe-var(surface--border-style)};
   height: #{$size};
@@ -207,9 +208,11 @@
     border-width: .1em .1em 0 0;
     border-bottom: 0;
     transform: rotate(-45deg);
-    top: calc(#{pfe-var(container-spacer)} + #{$position});
+    top: calc(#{pfe-var(container-spacer)} + #{$offset});
     @if $position == before {
       left: calc(#{pfe-var(container-spacer)} * 1.5);
+      top: calc(#{pfe-var(container-spacer)} + .25em);
+      transform: rotate(135deg);
     }
     @else {
       right: calc(#{pfe-var(container-spacer)} * 1.5);
@@ -220,6 +223,7 @@
     transform: rotate(45deg);
     @if $position == before {
       left: calc(#{pfe-var(container-spacer)} * 1.5);
+      transform: rotate(-45deg);
     }
     @else {
       right: calc(#{pfe-var(container-spacer)} * 1.5);