Skip to content

Set accordion placeholders fork #364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chrisdo1 merged 3 commits into from
Mar 14, 2019
Merged

Set accordion placeholders fork #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3651d91
set-accordion-placeholders-fork adjust mixins to resolve styling issues
starryeyez024 Mar 14, 2019
281da89
set-accordion-placeholders-fork adjust colors
starryeyez024 Mar 14, 2019
82c1a4e
origin/set-accordion-placeholders-fork fix borders
starryeyez024 Mar 14, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
260 changes: 190 additions & 70 deletions elements/pfe-accordion/demo/index.html
View file
Open in desktop

Large diffs are not rendered by default.

102 changes: 54 additions & 48 deletions elements/pfe-accordion/src/pfe-accordion-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,93 +3,99 @@
/// ===========================================================================
/// 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);
Copy link
Member Author

@starryeyez024 starryeyez024 Mar 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i moved these into a mixin instead

@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) {
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(: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.
}

/// ===========================================================================
/// 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"]),
:host([color="lightest"]) {
@include pfe-trigger-color-lightest;
}

: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"]) {
@include pfe-trigger-color-dark-expanded;
:host([on="dark"]),
:host([color="darker"]),
:host([color="darkest"]) {
@include pfe-trigger-color-darkest;
Copy link
Member Author

@starryeyez024 starryeyez024 Mar 14, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added support for theme colors darker and darkest, color="dark" is not supported

}

:host([on="dark"]) {
@include pfe-theme($theme: dark);
}
52 changes: 31 additions & 21 deletions elements/pfe-accordion/src/pfe-accordion-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,50 @@
@import "../../pfe-sass/pfe-sass";

:host {
@include pfe-accordion-panel;
/// ===========================================================================
/// DEFAULT ACCORDION PANEL
/// ===========================================================================

::slotted(pfe-accordion) {
padding: 0 14px;
}
:host {
@include pfe-accordion-panel;
}

:host([color="light"][expanded]) {
@include pfe-accordion-panel-expanded;
:host([expanded]) {
@include pfe-accordion-panel-expanded;
@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([color="dark"][expanded]) {
@include pfe-accordion-panel-expanded($theme: dark);
@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 {
: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);
}
24 changes: 24 additions & 0 deletions elements/pfe-accordion/src/pfe-accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,28 @@
position: relative;
overflow: hidden;
margin: 0;
color: var(--pfe-broadcasted--color--text);
}

: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");
}

9 changes: 6 additions & 3 deletions elements/pfe-band/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,18 @@

<!-- uncomment the es5-adapter if you're using the umd version -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/custom-elements-es5-adapter.js"></script>

<!-- Use webcomponents-loader when you are adding support for more modern browsers -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/webcomponents-loader.js"></script> -->

<!-- IE11 test: use bundle + require with umd files -->
<!-- Use webcomponents-bundle when supporting much older browsers like IE11 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.2.3/webcomponents-bundle.js"></script>
<link rel="stylesheet" href="https://www.redhat.com/profiles/rh/themes/redhatdotcom/css/editorial.css">

<!-- Tests require pulling in the UMD version of the files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>

<script>
require([
'../../pfe-card/pfe-card.umd.js',
Expand Down Expand Up @@ -90,7 +91,7 @@
}
</style>
</head>
<body unresolved>
<body unresolved class="editorial body1 generic1">
<pfe-band pfe-size="small"><h1>&lt;pfe-band&gt;</h1></pfe-band>

<pfe-band pfe-color="lightest">
Expand Down Expand Up @@ -178,10 +179,12 @@ <h3 slot="header">Aside: left full bottom</h3>
<h2>Darkest band with header tag</h2>
<p class="custom-band-summary">Header region, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</header>
<section class="body1 generic1 band">
<p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<pfe-cta priority="primary" slot="pfe-band--footer">
<a href="#">Learn more</a>
</pfe-cta>
</section>
<pfe-card color="dark" slot="pfe-band--aside">
<h3 slot="header">Aside: right full top</h3>
<p>Ut wisi enim ad minim veniam. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
Expand Down
Loading