Skip to content

Commit 68ec32b

Browse files
author
Joe Crick
committed
(master): Namespace collapse
1 parent 7d97c00 commit 68ec32b

File tree

4 files changed

+55
-45
lines changed

4 files changed

+55
-45
lines changed

‎index.html

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -104,12 +104,14 @@ <h2 class="content-subhead">Pure CSS</h2>
104104
<h2 class="content-subhead">Pure CSS Components<a class="content-link"></a></h2>
105105
<p>
106106
Pure CSS doesn't have many components, so I wrote some. And some of the components they have
107-
are missing some useful functionality (unless you add in some JS). <em>Please note, this is still a work in
107+
are missing some useful functionality (unless you add in some JS). <em>Please note, this is
108+
still a work in
108109
progress. The usual cautions apply</em>.
109110
</p>
110111
<p>
111112
Like Pure CSS, Pure.CSS Components is very small. It is only 2KB* (minified and zipped). Each
112-
component is also available as a module. So, if you only need <strong>modals</strong>, and nothing else, you
113+
component is also available as a module. So, if you only need <strong>modals</strong>, and
114+
nothing else, you
113115
don't have to
114116
include the entire package.
115117
</p>
@@ -457,33 +459,34 @@ <h2 class="content-subhead">Collapse</h2>
457459

458460
<h3>Basic Collapse</h3>
459461

460-
<label for="collapse-toggle" class="collapse-button pure-button" aria-label="Toggle">
461-
<span>Toggle</span>
462-
</label>
463-
<input type="checkbox" id="collapse-toggle" class="collapse-toggle pcssc-invisible"/>
464-
<div class="collapse-content pcssc-invisible">
465-
Pooka pooka!
462+
<div class="pcssc-collapse">
463+
<label for="collapse-toggle" class="collapse-button pure-button" aria-label="Toggle">
464+
<span>Toggle</span>
465+
</label>
466+
<input type="checkbox" id="collapse-toggle" class="collapse-toggle pcssc-invisible"/>
467+
<div class="collapse-content pcssc-invisible">
468+
Pooka pooka!
469+
</div>
466470
</div>
467471

468472

469-
<div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
470-
style="margin: 0; line-height: 125%">
471-
&lt;label for=<span style="color: #a31515">&quot;collapse-toggle&quot;</span> class=<span style="color: #a31515">&quot;collapse-button pure-button&quot;</span> aria-label=<span
472-
style="color: #a31515">&quot;Toggle&quot;</span>&gt;
473-
&lt;span&gt;Toggle&lt;/span&gt;
474-
&lt;/label&gt;
475-
&lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;collapse-toggle&quot;</span> class=<span
476-
style="color: #a31515">&quot;collapse-toggle pcssc-invisible&quot;</span>/&gt;
477-
&lt;div class=<span style="color: #a31515">&quot;collapse-content pcssc-invisible&quot;</span>&gt;
478-
Pooka pooka!
473+
<div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
474+
&lt;div class=<span style="color: #a31515">&quot;pcssc-collapse&quot;</span>&gt;
475+
&lt;label for=<span style="color: #a31515">&quot;collapse-toggle&quot;</span> class=<span style="color: #a31515">&quot;collapse-button pure-button&quot;</span> aria-label=<span style="color: #a31515">&quot;Toggle&quot;</span>&gt;
476+
&lt;span&gt;Toggle&lt;/span&gt;
477+
&lt;/label&gt;
478+
&lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;collapse-toggle&quot;</span> class=<span style="color: #a31515">&quot;collapse-toggle pcssc-invisible&quot;</span>/&gt;
479+
&lt;div class=<span style="color: #a31515">&quot;collapse-content pcssc-invisible&quot;</span>&gt;
480+
Pooka pooka!
481+
&lt;/div&gt;
479482
&lt;/div&gt;
480-
</pre>
481-
</div>
483+
</pre></div>
484+
482485

483486

484487
<h3>Toggling Button Label Collapse</h3>
485488

486-
<div class="collapse-toggle-button">
489+
<div class="pcssc-collapse collapse-toggle-button">
487490
<input type="checkbox" id="collapse-toggle-button" class="collapse-toggle pcssc-invisible"/>
488491
<label for="collapse-toggle-button" class="collapse-button pure-button" aria-label="Toggle">
489492
<span class="collapse-button-label">Open</span>
@@ -496,7 +499,7 @@ <h3>Toggling Button Label Collapse</h3>
496499

497500
<div style="background: #ffffff; margin-top: 50px;overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
498501
style="margin: 0; line-height: 125%">
499-
&lt;div class=<span style="color: #a31515">&quot;collapse-toggle-button&quot;</span>&gt;
502+
&lt;div class=<span style="color: #a31515">&quot;pcssc-collapse collapse-toggle-button&quot;</span>&gt;
500503
&lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;collapse-toggle-button&quot;</span> class=<span
501504
style="color: #a31515">&quot;collapse-toggle pcssc-invisible&quot;</span>/&gt;
502505
&lt;label for=<span style="color: #a31515">&quot;collapse-toggle-button&quot;</span> class=<span
@@ -551,12 +554,15 @@ <h2 class="content-subhead">Collapsing Menu</h2>
551554

552555
<p>
553556
The menu on the left side of this page is an example of a left-side collapsing menu. The
554-
collapsing menu builds off of the <a href="#dropdown"><strong>dropdown</strong></a> component, and
555-
Pure CSS' vertical <a href="https://purecss.io/menus/"><strong>menu</strong></a>. As a stand-alone module, the collapsing
557+
collapsing menu builds off of the <a href="#dropdown"><strong>dropdown</strong></a> component,
558+
and
559+
Pure CSS' vertical <a href="https://purecss.io/menus/"><strong>menu</strong></a>. As a
560+
stand-alone module, the collapsing
556561
menu requires both <strong>dropdown.css</strong> and <strong>menu.css</strong>.
557562
</p>
558563

559-
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%">
564+
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
565+
style="margin: 0; line-height: 125%">
560566
&lt;div class=<span style="color: #a31515">&quot;pcssc-collapsing-menu pcssc-menu-left&quot;</span>&gt;
561567
&lt;a class=<span style="color: #a31515">&quot;pure-menu-heading&quot;</span> href=<span style="color: #a31515">&quot;#top&quot;</span>&gt;Pure
562568
&lt;div class=<span style="color: #a31515">&quot;small-caps&quot;</span>&gt;components&lt;/div&gt;
@@ -576,8 +582,8 @@ <h2 class="content-subhead">Collapsing Menu</h2>
576582
&lt;/li&gt;
577583
&lt;/ul&gt;
578584
&lt;/div&gt;
579-
</pre></div>
580-
585+
</pre>
586+
</div>
581587

582588

583589
</div>

‎main.css

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)