Skip to content

Commit ed73ab6

Browse files
author
Joe Crick
committed
(master): Namespace modal - pull out formating styles from modal.less
1 parent a11cb3b commit ed73ab6

File tree

5 files changed

+139
-111
lines changed

5 files changed

+139
-111
lines changed

‎index.html‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -281,25 +281,23 @@ <h2 class="content-subhead">Alert</h2>
281281
</div>
282282
</div>
283283

284-
<div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
284+
<div style="background: #ffffff; margin-top: 50px; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
285285
style="margin: 0; line-height: 125%">
286-
&lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;close-alert&quot;</span> <span
287-
style="color: #0000ff">class</span>=<span style="color: #a31515">&quot;alert-toggle pcssc-invisible&quot;</span>/&gt;
288-
&lt;div <span style="color: #0000ff">class</span>=<span style="color: #a31515">&quot;alert alert-success alert-dismissible&quot;</span> role=<span
286+
&lt;div class=<span style="color: #a31515">&quot;pcssc-alert&quot;</span>&gt;
287+
&lt;input type=<span style="color: #a31515">&quot;checkbox&quot;</span> id=<span style="color: #a31515">&quot;close-alert&quot;</span> class=<span
288+
style="color: #a31515">&quot;alert-toggle pcssc-invisible&quot;</span>/&gt;
289+
&lt;div class=<span style="color: #a31515">&quot;alert alert-success alert-dismissible&quot;</span> role=<span
289290
style="color: #a31515">&quot;alert&quot;</span>&gt;
290-
&lt;span&gt;&lt;strong&gt;Uh oh...&lt;<span>/strong&gt; Something happened...&lt;/span&gt;</span>
291-
&lt;label <span style="color: #0000ff">for</span>=<span style="color: #a31515">&quot;close-alert&quot;</span> <span
292-
style="color: #0000ff">class</span>=<span
293-
style="color: #a31515">&quot;close-alert&quot;</span> aria-label=<span
291+
&lt;span&gt;&lt;strong&gt;Uh oh...&lt;/strong&gt; Something happened...&lt;/span&gt;
292+
&lt;label for=<span style="color: #a31515">&quot;close-alert&quot;</span> class=<span style="color: #a31515">&quot;close-alert&quot;</span> aria-label=<span
294293
style="color: #a31515">&quot;Close&quot;</span>&gt;
295-
&lt;span aria-invisible=<span
296-
style="color: #a31515">&quot;true&quot;</span>&gt;&amp;times;&lt;<span>/span&gt;</span>
297-
&lt;<span>/label&gt;</span>
298-
&lt;<span>/div&gt;</span>
294+
&lt;span aria-invisible=<span style="color: #a31515">&quot;true&quot;</span>&gt;&amp;times;&lt;/span&gt;
295+
&lt;/label&gt;
296+
&lt;/div&gt;
297+
&lt;/div&gt;
299298
</pre>
300299
</div>
301300

302-
303301
</div>
304302

305303
<div class="content carousel-content">
@@ -597,44 +595,44 @@ <h2 class="content-subhead">Collapsing Menu</h2>
597595
<a name="modal"></a>
598596
<h2 class="content-subhead">Modal</h2>
599597

600-
<input type="radio" class="open-modal pcssc-invisible" id="test-modal" name="modal-toggle"/>
601-
<label for="test-modal" class="pure-button">Open Modal</label>
602-
<div class="modal-container pcssc-invisible">
603-
<div class="modal-frame">
604-
<div class="modal-header">
605-
Header
606-
<input type="radio" id="close-modal" name="modal-toggle"
607-
class="close-modal pcssc-invisible"/>
608-
<label for="close-modal" class="close-button">x</label>
609-
</div>
610-
<div class="modal-body">
611-
Body
598+
<div class="pcssc-modal">
599+
<input type="radio" class="open-modal pcssc-invisible" id="test-modal" name="modal-toggle"/>
600+
<label for="test-modal" class="pure-button">Open Modal</label>
601+
<div class="modal-container pcssc-invisible">
602+
<div class="modal-frame">
603+
<div class="modal-header">
604+
Header
605+
<input type="radio" id="close-modal" name="modal-toggle"
606+
class="close-modal pcssc-invisible"/>
607+
<label for="close-modal" class="close-button">x</label>
608+
</div>
609+
<div class="modal-body">
610+
Body
611+
</div>
612612
</div>
613613
</div>
614614
</div>
615615

616-
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;margin-top: 50px;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre
617-
style="margin: 0; line-height: 125%">
618-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;open-modal pcssc-invisible&quot;</span> id=<span
619-
style="color: #a31515">&quot;test-modal&quot;</span> name=<span style="color: #a31515">&quot;modal-toggle&quot;</span>/&gt;
620-
&lt;label <span style="color: #0000ff">for</span>=<span style="color: #a31515">&quot;test-modal&quot;</span> class=<span
621-
style="color: #a31515">&quot;pure-button&quot;</span>&gt;Open Modal&lt;/label&gt;
622-
&lt;div class=<span style="color: #a31515">&quot;modal-container pcssc-invisible&quot;</span>&gt;
623-
&lt;div class=<span style="color: #a31515">&quot;modal-frame&quot;</span>&gt;
624-
&lt;div class=<span style="color: #a31515">&quot;modal-header&quot;</span>&gt;
625-
Header
626-
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> id=<span style="color: #a31515">&quot;close-modal&quot;</span> name=<span
627-
style="color: #a31515">&quot;modal-toggle&quot;</span> class=<span style="color: #a31515">&quot;pcssc-invisible&quot;</span>/&gt;
628-
&lt;label <span style="color: #0000ff">for</span>=<span
629-
style="color: #a31515">&quot;close-modal&quot;</span> class=<span style="color: #a31515">&quot;close-button&quot;</span>&gt;x&lt;/label&gt;
630-
&lt;/div&gt;
631-
&lt;div class=<span style="color: #a31515">&quot;modal-body&quot;</span>&gt;
632-
Body
616+
<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%">
617+
&lt;div class=<span style="color: #a31515">&quot;pcssc-modal&quot;</span>&gt;
618+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;open-modal pcssc-invisible&quot;</span> id=<span style="color: #a31515">&quot;test-modal&quot;</span> name=<span style="color: #a31515">&quot;modal-toggle&quot;</span>/&gt;
619+
&lt;label for=<span style="color: #a31515">&quot;test-modal&quot;</span> class=<span style="color: #a31515">&quot;pure-button&quot;</span>&gt;Open Modal&lt;/label&gt;
620+
&lt;div class=<span style="color: #a31515">&quot;modal-container pcssc-invisible&quot;</span>&gt;
621+
&lt;div class=<span style="color: #a31515">&quot;modal-frame&quot;</span>&gt;
622+
&lt;div class=<span style="color: #a31515">&quot;modal-header&quot;</span>&gt;
623+
Header
624+
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> id=<span style="color: #a31515">&quot;close-modal&quot;</span> name=<span style="color: #a31515">&quot;modal-toggle&quot;</span>
625+
class=<span style="color: #a31515">&quot;close-modal pcssc-invisible&quot;</span>/&gt;
626+
&lt;label for=<span style="color: #a31515">&quot;close-modal&quot;</span> class=<span style="color: #a31515">&quot;close-button&quot;</span>&gt;x&lt;/label&gt;
627+
&lt;/div&gt;
628+
&lt;div class=<span style="color: #a31515">&quot;modal-body&quot;</span>&gt;
629+
Body
630+
&lt;/div&gt;
633631
&lt;/div&gt;
634632
&lt;/div&gt;
635633
&lt;/div&gt;
636-
</pre>
637-
</div>
634+
</pre></div>
635+
638636

639637

640638
</div>

‎main.css‎

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

0 commit comments

Comments
 (0)