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

Merge pull request #13 from TotomInc/badges

Browse source 
Add cards and badges
This commit is contained in:
Rhyne 2017-11-03 08:27:09 -04:00 committed by GitHub
parent 80477b3ffd 2c0368a8fc
commit 71ab4ff884
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 246 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
index.html
View file

@ -582,6 +582,143 @@ function add(x, y) {
&lt;button popover="Popover on top" popover-position="top"&gt;Popover on top and on a button!&lt;/button&gt;</pre>
</div>
</div>
<div class="section">
<h2>Cards</h2>
<h4>Full card example</h4>
<p>It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.</p>
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<img class="image-top" src="https://picsum.photos/768" alt="Card example image">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
<button>Let me go here!</button>
</div>
</div>
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
&lt;img src="https://picsum.photos/768" alt="Card example image"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
&lt;p class="card-text"&gt;Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.&lt;/p&gt;
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<h4>Card title, text, links</h4>
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
<a class="card-link" href="#">First link</a>
<a class="card-link" href="#">Second link</a>
</div>
</div>
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
&lt;p class="card-text"&gt;This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.&lt;/p&gt;
&lt;a class="card-link" href="#"&gt;First link&lt;/a&gt;
&lt;a class="card-link" href="#"&gt;Second link&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<h4>Image on top or bottom</h4>
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">You can also place image on the bottom of the card.</p>
<button>Let me go here!</button>
</div>
<img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image">
</div>
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
&lt;p class="card-text"&gt;You can also place image on the bottom of the card.&lt;/p&gt;
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;img class="image-bottom" src="http://via.placeholder.com/550x250" alt="Card example image"&gt;
&lt;/div&gt;</pre>
</div>
<h4>Header and footer</h4>
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">You can also place image on the bottom of the card.</p>
<button>Let me go here!</button>
</div>
<div class="card-footer">Footer</div>
</div>
</div>
<div class="docs">
<pre>
&lt;div class="card" style="width: 20rem;"&gt;
&lt;div class="card-header"&gt;Header&lt;/div&gt;
&lt;div class="card-body"&gt;
&lt;h4 class="card-title"&gt;My awesome Paper card!&lt;/h4&gt;
&lt;h5 class="card-subtitle"&gt;Nice looking subtitle.&lt;/h5&gt;
&lt;p class="card-text"&gt;You can also place image on the bottom of the card.&lt;/p&gt;
&lt;button&gt;Let me go here!&lt;/button&gt;
&lt;/div&gt;
&lt;div class="card-footer"&gt;Footer&lt;/div&gt;
&lt;/div&gt;
</pre>
</div>
</div>
<div class="section">
<h2>Badges</h2>
<h4>Default</h4>
<p>You can customize badges colors with secondary, success, warning, danger classes.</p>
<h1>Example h1 heading <span class="badge">123</span></h1>
<h2>Example h2 heading <span class="badge secondary">123</span></h2>
<h3>Example h3 heading <span class="badge success">123</span></h3>
<h4>Example h4 heading <span class="badge warning">123</span></h4>
<h5>Example h5 heading <span class="badge danger">123</span></h5>
<h6>Example h6 heading <span class="badge">123</span></h6>
<div class="docs">
<pre>
&lt;h1&gt;Example h1 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example h2 heading &lt;span class="badge secondary"&gt;123&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example h3 heading &lt;span class="badge success"&gt;123&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example h4 heading &lt;span class="badge warning"&gt;123&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example h5 heading &lt;span class="badge danger"&gt;123&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example h6 heading &lt;span class="badge"&gt;123&lt;/span&gt;&lt;/h6&gt;</pre>
</div>
</div>
<div class="section">
<h2>Colors</h2>
<h4>Text</h4>
@ -590,13 +727,15 @@ function add(x, y) {
<p class="text-success">Text success</p>
<p class="text-warning">Text warning</p>
<p class="text-danger">Text danger</p>
<p class="text-muted">Text muted</p>
<div class="docs">
<pre>
&lt;p class=&quot;text-primary&quot;&gt;Text primary&lt;/p&gt;
&lt;p class=&quot;text-secondary&quot;&gt;Text secondary&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;Text success&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;Text warning&lt;/p&gt;
&lt;p class=&quot;text-danger&quot;&gt;Text danger&lt;/p&gt; </pre>
&lt;p class=&quot;text-danger&quot;&gt;Text danger&lt;/p&gt;
&lt;p class="text-muted"&gt;Text muted&lt;/p&gt; </pre>
</div>
<h4>Backgrounds</h4>
<div class="row flex-center">

35
src/badges.less Normal file
View file

@ -0,0 +1,35 @@
.badge {
.border;
display: inline-block;
padding: .25em .4em;
font-size: 75%;
font-weight: 700;
line-height: 1;
text-align: center;
white-space: nowrap;
vertical-align: baseline;
background-color: @muted;
color: white;
border-color: transparent;
&.primary {
background-color: @primary;
}
&.secondary {
background-color: @secondary;
}
&.success {
background-color: @success;
}
&.warning {
background-color: @warning;
}
&.danger {
background-color: @danger;
}
}

61
src/cards.less Normal file
View file

@ -0,0 +1,61 @@
.card {
.shadow;
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
border: 2px solid @muted-light;
&:hover {
.shadow-hover;
}
.card-header,
.card-footer {
padding: .75rem 1.25rem;
background-color: @white-dark;
}
.card-header {
border-bottom: 2px solid @muted-light;
}
.card-footer {
border-top: 2px solid @muted-light;
}
.card-body {
flex: 1 1 auto;
padding: 1.25rem;
.card-title, h4 {
margin-top: 0;
margin-bottom: 0.5rem;
}
.card-subtitle, h5 {
.text-secondary;
margin-top: 0;
margin-bottom: 0.5rem;
}
.card-text, p {
margin-top: 0;
margin-bottom: 1rem;
}
.card-link + .card-link,
a + a {
margin-left: 1.25rem;
}
}
.image-top,
.image-bottom,
img {
border: 0;
border-radius: 0;
}
}

3
src/code.less
View file

@ -23,5 +23,6 @@ pre {
background-color: lighten(@primary, 73%);
border: 1px solid lighten(@primary, 50%);
border-radius: 3px;
overflow-x: auto;
overflow-x: auto;
white-space: pre-wrap;
}

6
src/colors.less
View file

@ -4,14 +4,18 @@
@success: #86a361;
@warning: #ddcd45;
@danger: #a7342d;
@muted: #868e96;
@primary-light: lighten(@primary, 50%);
@secondary-light: lighten(@secondary, 50%);
@success-light: lighten(@success, 30%);
@warning-light: lighten(@warning, 30%);
@danger-light: lighten(@danger, 45%);
@muted-light: lighten(@muted, 35%);
@colors: primary, secondary, success, warning, danger;
@white-dark: rgba(0, 0, 0, .03);
@colors: primary, secondary, success, warning, danger, muted;
.make-text-color-classes(@i: length(@colors)) when (@i > 0) {
.make-text-color-classes(@i - 1);

4
src/styles.less
View file

@ -14,4 +14,6 @@
@import (less) "./images.less";
@import (less) "./utilities.less";
@import (less) "./popovers.less";
@import (less) "./alerts.less";
@import (less) "./cards.less";
@import (less) "./badges.less";
@import (less) "./alerts.less";