Skip to content

US198282: Updated accordion styles #359

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
starryeyez024 merged 40 commits into from
Mar 25, 2019
Merged

US198282: Updated accordion styles #359

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
06d5284
added extends scss file
chrisdo1 Feb 22, 2019
344c817
added accordion mixins from the nav-v2 branch
chrisdo1 Mar 11, 2019
b421ad2
Merge branch 'master' into set-accordion-placeholders
chrisdo1 Mar 11, 2019
d6e9b53
Merge branch 'master' into set-accordion-placeholders
chrisdo1 Mar 12, 2019
3b32168
US198282 removed commented code
chrisdo1 Mar 13, 2019
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
3b5ca32
Merge pull request #364 from patternfly/set-accordion-placeholders-fork
chrisdo1 Mar 14, 2019
12b27b2
US198282 updates to accordion
chrisdo1 Mar 15, 2019
f3d477e
Merge branch 'master' into set-accordion-placeholders
chrisdo1 Mar 15, 2019
1c26f14
US198282 pfe-accordion style update
chrisdo1 Mar 15, 2019
8787fd5
US198282 update accordion styles
chrisdo1 Mar 15, 2019
140d995
US198282 pfe-accordion styles
chrisdo1 Mar 15, 2019
53a2113
US198282 pfe-accordion styles
chrisdo1 Mar 15, 2019
ff1e0c2
Put heading styles in mixin for accordion header; update theme mixin …
starryeyez024 Mar 18, 2019
9620adf
US198282 fixed content-set merge conflicts
chrisdo1 Mar 18, 2019
ede6a4d
US198282 set hover/focus for accordion header to underline/blue border
chrisdo1 Mar 18, 2019
1cf6412
set-accordion-placeholders revert change to font size based on header…
starryeyez024 Mar 18, 2019
0de5436
US198282 set text-decoration color.
chrisdo1 Mar 18, 2019
50d90f3
US198282 fixed To Do syntax
chrisdo1 Mar 18, 2019
c1d0c89
set-accordion-placeholders copy on=dark attribute to children
starryeyez024 Mar 20, 2019
3707275
US198282 set underline focus and border-left hover
chrisdo1 Mar 20, 2019
380ade7
US198282 set panel container to width: 100%
chrisdo1 Mar 21, 2019
651f721
Merge branch 'master' into set-accordion-placeholders
chrisdo1 Mar 21, 2019
2c8fd55
US198282 fixed on=light accordion panel bg color
chrisdo1 Mar 21, 2019
4ae957b
Merge branch 'master' into set-accordion-placeholders
kylebuch8 Mar 22, 2019
1fbf662
US198282 adjusted padding for headers, panels.
chrisdo1 Mar 22, 2019
a30c762
Merge branch 'set-accordion-placeholders' of https://github.com/patte…
chrisdo1 Mar 22, 2019
f10cdee
Suggested mixin updates
Mar 22, 2019
c8b63dd
US198282 code review changes
chrisdo1 Mar 22, 2019
cb62306
Updates to the styles to resolve compilation error
Mar 22, 2019
5921d31
Merge branch 'set-accordion-placeholders' into set-accordion-placehol…
castastrophe Mar 22, 2019
8cbf1e8
Revert accidental merge conflict overwrites
Mar 22, 2019
7544220
Resolve complexity with variable calls in mixins using pfe-local; fix…
Mar 22, 2019
0528246
Remove unnecessary comments
Mar 22, 2019
b1059e3
minor syntax updates
Mar 22, 2019
9a5fa9a
Merge pull request #374 from patternfly/set-accordion-placeholders-fork
chrisdo1 Mar 22, 2019
4ac6fa6
Merge branch 'master' into set-accordion-placeholders
castastrophe Mar 22, 2019
dc0b3f4
Merge branch 'master' into set-accordion-placeholders
castastrophe Mar 22, 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
156 changes: 135 additions & 21 deletions elements/pfe-accordion/demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,11 @@
<head>
<meta charset="utf-8">
<title>PFElements: pfe-accordion Demo</title>

<!-- Stylesheets for testing light DOM styles.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typebase.css/0.5.0/typebase.css">
-->
<link rel="stylesheet" href="http://overpass-30e2.kxcdn.com/overpass.css" />

<noscript>
<link href="../../pfelement/pfelement-noscript.min.css" rel="stylesheet">
</noscript>
Expand All @@ -18,81 +20,193 @@
<script src="/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<script>require([
'../pfe-accordion.umd.js'

'../pfe-accordion.umd.js',
'../../pfe-band/pfe-band.umd.js'
])</script>

<style>
body {
font-family: Overpass;
padding: 16px 32px 32px;
}
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;
}
.white-background {
background-color: #fff;
}
.med-background {
background-color: #9394ba;
}
.dark-gray-background {
background-color: #222591;
}
.light-gray-background {
background-color: #f8f8f8;
}

</style>
</head>
<body unresolved>
<h1>&lt;pfe-accordion&gt;</h1>
<section>
<pfe-accordion color="lightest">

<section class="light-gray-background">
<h2>&lt;pfe-accordion&gt;</h2><br/>
<pfe-accordion>
<pfe-accordion-header>
<h2>Why do wizards need money if they could just create it?</h2>
<h3>Why do wizards need money if they could just create it?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Why doesn't Harry have a portrait of his parents?</h2>
<h3>Why doesn't Harry have a portrait of his parents?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
<p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Why is Harry considered a half-blood if both of his parents could use magic?</h2>
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Is Hogwarts the only wizarding school?</h2>
<h3>Is Hogwarts the only wizarding school?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Where do the main characters work as adults?</h2>
<h3>Where do the main characters work as adults?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
</pfe-accordion-panel>
</pfe-accordion>
</section>
<section>
<h2>Striped Accordion</h2>
<pfe-accordion color="striped">

<section class="dark-background" >
<h2 style="color:white;">pfe-accordion on=dark</h2><br/>
<pfe-accordion on="dark">
<pfe-accordion-header>
<h2>Why do wizards need money if they could just create it?</h2>
<h3>Why do wizards need money if they could just create it?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Why doesn't Harry have a portrait of his parents?</h2>
<h3>Why doesn't Harry have a portrait of his parents?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
<p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Why is Harry considered a half-blood if both of his parents could use magic?</h2>
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Is Hogwarts the only wizarding school?</h2>
<h3>Is Hogwarts the only wizarding school?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h2>Where do the main characters work as adults?</h2>
<h3>Where do the main characters work as adults?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
</pfe-accordion-panel>
</pfe-accordion>
</section>
<section class="light-gray-background">
<h2>&lt;pfe-accordion&gt; nested</h2><br/>
<pfe-accordion>

<pfe-accordion-header>
<h3>Why do wizards need money if they could just create it?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<pfe-accordion>
<pfe-accordion-header>
<h3>Why do wizards need money if they could just create it?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Why doesn't Harry have a portrait of his parents?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Is Hogwarts the only wizarding school?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Where do the main characters work as adults?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
</pfe-accordion-panel>
</pfe-accordion>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Why doesn't Harry have a portrait of his parents?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p><a href="#">The characters in the portraits</a> are not actually ghosts. They mainly are there just to repeat common phrases or serve as a general <a href="foobarbaz.com">representation of the individual</a> they depict. A portrait of his parents would not be of much help to Harry.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Why is Harry considered a half-blood if both of his parents could use magic?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Is Hogwarts the only wizarding school?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
</pfe-accordion-panel>
<pfe-accordion-header>
<h3>Where do the main characters work as adults?</h3>
</pfe-accordion-header>
<pfe-accordion-panel>
<p>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.</p>
<p><a href="https://www.pottermore.com/collection/characters" target="blank">Read more about the characters</a></p>
</pfe-accordion-panel>
</pfe-accordion>
</section>

</body>
</html>
6 changes: 3 additions & 3 deletions elements/pfe-accordion/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading