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

Added default card, more types to come

Browse source
This commit is contained in:
Thomas Cazade 2017-11-01 15:48:02 +01:00
parent d5119c94a1
commit c92cd319f3
3 changed files with 77 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
index.html
View file

@ -582,6 +582,39 @@ 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>Default card</h4>
<div class="row flex-center">
<div class="card" style="width: 20rem;">
<img 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>
</div>
<div class="section">
<h2>Colors</h2>
<h4>Text</h4>

42
src/cards.less Normal file
View file

@ -0,0 +1,42 @@
.card {
// Card border can't be changed with .border-x classes
// since we want to avoid the little blank space between
// image and border-top-left/right-radius, so we force
// the default border class and customize it on the img
.border;
position: relative;
display: flex;
flex-direction: column;
word-wrap: break-word;
.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;
}
}
img {
border: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 255px 14px !important;
border-top-right-radius: 13px 225px !important;
}
}

3
src/styles.less
View file

@ -13,4 +13,5 @@
@import (less) "./tables.less";
@import (less) "./images.less";
@import (less) "./utilities.less";
@import (less) "./popovers.less";
@import (less) "./popovers.less";
@import (less) "./cards.less";