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

Merge pull request #5 from papercss/develop

Browse source 
Develop
This commit is contained in:
Afzal Sayed 2017-12-02 15:41:37 +05:30 committed by GitHub
parent c946f6870b 3cf3f09f77
commit 03981cadb5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 182 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
demo.css
View file

@ -13,4 +13,23 @@ body {
}
.summary a {
color: #41403e;
}
.to-top {
opacity: 1;
display: inline-block;
padding: 1em;
position: fixed;
bottom: 1em;
right: 1em
}
.to-top .paper-btn {
padding: .6em 1em;
background: #fff;
border-top-left-radius: 185px 160px;
border-top-right-radius: 200px 195px;
border-bottom-right-radius: 160px 195px;
border-bottom-left-radius: 185px 190px
}
.demo-title:hover + .to-top {
opacity: 0
}

123
index.html
View file

@ -30,7 +30,7 @@
<body>
<div class="container">
<div class=" paper">
<div class="demo-title">
<div id="top" class="demo-title">
<div class="row flex-center">
<div class="text-center">
<h1>PaperCSS</h1>
@ -63,10 +63,13 @@
<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>
<div class="to-top">
<a href="#top" class="paper-btn margin">^</a>
</div>
<div id="flexbox" class="section">
<h2>Flexbox</h2>
<h4>Flexgrid</h4>
@ -236,7 +239,7 @@
</div>
<div id="buttons" class="section">
<h2>Buttons</h2>
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imprefect Buttons</a></p>
<p>Insprired by <a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank">Imperfect Buttons</a></p>
<button class="btn-large">Large</button>
<button>Default</button>
<button class="btn-small">Small</button>
@ -250,7 +253,7 @@
<button disabled>Disabled</button>
<div class="docs">
<pre>
&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imprefect Buttons&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Insprired by &lt;a href="https://codepen.io/tmrDevelops/pen/VeRvKX" target="_blank"&gt;Imperfect Buttons&lt;/a&gt;&lt;/p&gt;
&lt;button class="btn-large"&gt;Large&lt;/button&gt;
&lt;button&gt;Default&lt;/button&gt;
&lt;button class="btn-small"&gt;Small&lt;/button&gt;
@ -445,6 +448,13 @@
</ul>
<li>And now we're are the top!</li>
</ul>
<h4>Inline List</h4>
<ul class="inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<div class="docs">
<pre>
&lt;ol&gt;
@ -1077,6 +1087,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>

4
src/lists.less
View file

@ -41,4 +41,8 @@ ul {
}
}
}
&.inline li{
display: inline;
margin-left: 5px;
}
}

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);
}