Skip to content

Commit 0c780dc

Browse files
author
Joe Crick
committed
(master): Refactor accordion header class name
1 parent 0147f9d commit 0c780dc

File tree

3 files changed

+18
-18
lines changed

3 files changed

+18
-18
lines changed

‎index.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ <h2 class="content-subhead">Accordion</h2>
154154
<li class="accordion-section">
155155
<input type="radio" class="accordion-section-selector hidden" id="a-1" name="a-tab-head" role="tab"
156156
checked/>
157-
<label for="a-1" class="tab-header">Option 0</label>
157+
<label for="a-1" class="accordion-section-header">Option 0</label>
158158
<div class="accordion-section-content">
159159
<h2>Heading 1</h2>
160160
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
@@ -164,15 +164,15 @@ <h2>Heading 1</h2>
164164
</li>
165165
<li class="accordion-section">
166166
<input type="radio" class="accordion-section-selector hidden" id="a-2" name="a-tab-head" role="tab"/>
167-
<label for="a-2" class="tab-header">Option 1</label>
167+
<label for="a-2" class="accordion-section-header">Option 1</label>
168168
<div class="accordion-section-content">
169169
<h2>Heading 1</h2>
170170
Content goes here
171171
</div>
172172
</li>
173173
<li class="accordion-section">
174174
<input type="radio" class="accordion-section-selector hidden" id="a-3" name="a-tab-head" role="tab"/>
175-
<label for="a-3" class="tab-header">Option 2</label>
175+
<label for="a-3" class="accordion-section-header">Option 2</label>
176176
<div class="accordion-section-content">
177177
<h2>Heading 2</h2>
178178
Lorem Ipsum
@@ -185,7 +185,7 @@ <h2>Heading 2</h2>
185185
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
186186
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;a-1&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>
187187
checked/&gt;
188-
&lt;label for=<span style="color: #a31515">&quot;a-1&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 0&lt;/label&gt;
188+
&lt;label for=<span style="color: #a31515">&quot;a-1&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 0&lt;/label&gt;
189189
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
190190
&lt;h2&gt;Heading 1&lt;/h2&gt;
191191
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
@@ -195,15 +195,15 @@ <h2>Heading 2</h2>
195195
&lt;/li&gt;
196196
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
197197
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;a-2&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
198-
&lt;label for=<span style="color: #a31515">&quot;a-2&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 1&lt;/label&gt;
198+
&lt;label for=<span style="color: #a31515">&quot;a-2&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 1&lt;/label&gt;
199199
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
200200
&lt;h2&gt;Heading 1&lt;/h2&gt;
201201
Content goes here
202202
&lt;/div&gt;
203203
&lt;/li&gt;
204204
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
205205
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;a-3&quot;</span> name=<span style="color: #a31515">&quot;a-tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
206-
&lt;label for=<span style="color: #a31515">&quot;a-3&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 2&lt;/label&gt;
206+
&lt;label for=<span style="color: #a31515">&quot;a-3&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 2&lt;/label&gt;
207207
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
208208
&lt;h2&gt;Heading 2&lt;/h2&gt;
209209
Lorem Ipsum
@@ -618,7 +618,7 @@ <h2 class="content-subhead">Tabs</h2>
618618
<li class="accordion-section">
619619
<input type="radio" class="accordion-section-selector hidden" id="zero" name="tab-head" role="tab"
620620
checked/>
621-
<label for="zero" class="tab-header">Option 0</label>
621+
<label for="zero" class="accordion-section-header">Option 0</label>
622622
<div class="accordion-section-content">
623623
<h2>Heading 1</h2>
624624
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
@@ -628,15 +628,15 @@ <h2>Heading 1</h2>
628628
</li>
629629
<li class="accordion-section">
630630
<input type="radio" class="accordion-section-selector hidden" id="one" name="tab-head" role="tab"/>
631-
<label for="one" class="tab-header">Option 1</label>
631+
<label for="one" class="accordion-section-header">Option 1</label>
632632
<div class="accordion-section-content">
633633
<h2>Heading 1</h2>
634634
Content goes here
635635
</div>
636636
</li>
637637
<li class="accordion-section">
638638
<input type="radio" class="accordion-section-selector hidden" id="two" name="tab-head" role="tab"/>
639-
<label for="two" class="tab-header">Option 2</label>
639+
<label for="two" class="accordion-section-header">Option 2</label>
640640
<div class="accordion-section-content">
641641
<h2>Heading 2</h2>
642642
Lorem Ipsum
@@ -649,7 +649,7 @@ <h2>Heading 2</h2>
649649
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
650650
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;zero&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>
651651
checked/&gt;
652-
&lt;label for=<span style="color: #a31515">&quot;zero&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 0&lt;/label&gt;
652+
&lt;label for=<span style="color: #a31515">&quot;zero&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 0&lt;/label&gt;
653653
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
654654
&lt;h2&gt;Heading 1&lt;/h2&gt;
655655
Donec mattis mauris gravida metus laoreet non rutrum sem viverra. Aenean nibh libero,
@@ -659,15 +659,15 @@ <h2>Heading 2</h2>
659659
&lt;/li&gt;
660660
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
661661
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;one&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
662-
&lt;label for=<span style="color: #a31515">&quot;one&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 1&lt;/label&gt;
662+
&lt;label for=<span style="color: #a31515">&quot;one&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 1&lt;/label&gt;
663663
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
664664
&lt;h2&gt;Heading 1&lt;/h2&gt;
665665
Content goes here
666666
&lt;/div&gt;
667667
&lt;/li&gt;
668668
&lt;li class=<span style="color: #a31515">&quot;accordion-section&quot;</span>&gt;
669669
&lt;input type=<span style="color: #a31515">&quot;radio&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-selector hidden&quot;</span> id=<span style="color: #a31515">&quot;two&quot;</span> name=<span style="color: #a31515">&quot;tab-head&quot;</span> role=<span style="color: #a31515">&quot;tab&quot;</span>/&gt;
670-
&lt;label for=<span style="color: #a31515">&quot;two&quot;</span> class=<span style="color: #a31515">&quot;tab-header&quot;</span>&gt;Option 2&lt;/label&gt;
670+
&lt;label for=<span style="color: #a31515">&quot;two&quot;</span> class=<span style="color: #a31515">&quot;accordion-section-header&quot;</span>&gt;Option 2&lt;/label&gt;
671671
&lt;div class=<span style="color: #a31515">&quot;accordion-section-content&quot;</span>&gt;
672672
&lt;h2&gt;Heading 2&lt;/h2&gt;
673673
Lorem Ipsum

‎main.css‎

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

‎src/components/accordion.less‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323

2424
}
2525

26-
.tab-header {
26+
.accordion-section-header {
2727
display: inline;
2828
}
2929

@@ -43,14 +43,14 @@
4343
display: block;
4444
}
4545

46-
&:checked + .tab-header {
46+
&:checked + .accordion-section-header {
4747
background-color: white;
4848
color: gray;
4949
}
5050

5151
}
5252

53-
.tab-header {
53+
.accordion-section-header {
5454
cursor: pointer;
5555
padding: 10px;
5656
background-color: lightgray;

0 commit comments

Comments
 (0)