deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-06-07 16:32:15 +02:00
Code Issues Projects Releases Wiki Activity

Added tabs feature

Browse source
This commit is contained in:
Afzal Sayed 2017-11-25 20:47:10 +05:30
parent 2330dbf887
commit 1dc3adaf52
3 changed files with 145 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
index.html
View file

@ -60,6 +60,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>
</ul>
</div>
@ -1056,6 +1057,112 @@ 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>
<div class="section">
<h2 id="download">Download and Link</h2>
<h4>Download</h4>

1
src/styles.less
View file

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

37
src/tabs.less Normal file
View file

@ -0,0 +1,37 @@
.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;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
}