deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-09 01:12:20 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #84 from afzalsayed96/feature-tabs

Browse source 
Added tabs feature
This commit is contained in:
Rhyne 2017-11-29 10:20:21 -05:00 committed by GitHub
parent 2cd5a96b8f 93ce473178
commit 8560214c7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 146 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
index.html
View file

@ -63,6 +63,7 @@
<li><a href="#utilities">Utilities</a></li>
<li><a href="#images">Images</a></li>
<li><a href="#alerts">Alerts</a></li>
<li><a href="#tabs">Tabs</a></li>
<li><a href="#article">Article</a></li>
</ul>
</div>
@ -1077,6 +1078,111 @@ function add(x, y) {
&lt;/div&gt;</pre>
</div>
</div>
<div id="tabs" class="section">
<h2>Tabs</h2>
<div class="row flex-spaces tabs">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Tab 1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">Tab 2</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3">Tab 3</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4">Tab 4</label>
<div class="content" id="content1">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="content" id="content2">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
beef ribs.
</p>
</div>
<div class="content" id="content3">
<p>
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter
rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
</p>
<p>
Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump.
Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
</p>
</div>
<div class="content" id="content4">
<p>
Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin ball tip turducken. Pork belly meatball
t-bone bresaola tail filet mignon kevin turkey ribeye shank flank doner cow kielbasa shankle. Pig swine
chicken hamburger, tenderloin turkey rump ball tip sirloin frankfurter meatloaf boudin brisket ham hock.
Hamburger venison brisket tri-tip andouille pork belly ball tip short ribs biltong meatball chuck. Pork
chop ribeye tail short ribs, beef hamburger meatball kielbasa rump corned beef porchetta landjaeger flank.
Doner rump frankfurter meatball meatloaf, cow kevin pork pork loin venison fatback spare ribs salami
beef ribs.
</p>
</div>
</div>
<div class="docs">
<pre>
&lt;div class="row flex-spaces tabs"&gt;
&lt;input id="tab1" type="radio" name="tabs" checked&gt;
&lt;label for="tab1"&gt;Tab 1&lt;/label&gt;
&lt;input id="tab2" type="radio" name="tabs"&gt;
&lt;label for="tab2"&gt;Tab 2&lt;/label&gt;
&lt;input id="tab3" type="radio" name="tabs"&gt;
&lt;label for="tab3"&gt;Tab 3&lt;/label&gt;
&lt;input id="tab4" type="radio" name="tabs"&gt;
&lt;label for="tab4"&gt;Tab 4&lt;/label&gt;
&lt;div class="content" id="content1"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
&lt;/p&gt;
&lt;p&gt;
Brisket meatball turkey short loin boudin leberkas meatloaf...
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="content" id="content2"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet landjaeger sausage brisket...
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="content" id="content3"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet beef venison beef ribs kielbasa...
&lt;/p&gt;
&lt;p&gt;
Brisket meatball turkey short loin boudin leberkas meatloaf...
&lt;/p&gt;
&lt;/div&gt;
&lt;div class="content" id="content4"&gt;
&lt;p&gt;
Bacon ipsum dolor sit amet landjaeger sausage brisket...
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
</div>

3
src/styles.less
View file

@ -17,4 +17,5 @@
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";
@import (less) "./article.less";
@import (less) "./tabs.less";
@import (less) "./article.less";

38
src/tabs.less Normal file
View file

@ -0,0 +1,38 @@
.tabs {
.content {
display: none;
padding: 0.75rem 0 0;
}
input {
display: none;
}
label {
display: inline-block;
margin: 0 0 -1px;
padding: 0.75rem 0.75rem;
font-weight: 600;
text-align: center;
color: @primary-light;
}
label:hover {
color: @muted;
cursor: pointer;
}
input:checked+label {
color: @primary;
border-bottom: solid 3px @secondary;
}
.loop(@num) when (@num > 0) {
.loop((@num - 1));
input[id = ~"tab@{num}"]:checked~div[id = ~"content@{num}"]{
display:block;
}
}
.loop(5);
}