mirror of
https://github.com/papercss/papercss
synced 2024-06-08 00:42:20 +02:00
Merge branch 'master' into Fraham-MoreButtonStyles
This commit is contained in:
commit
ba35c013fb
141
index.html
141
index.html
|
@ -597,6 +597,143 @@ function add(x, y) {
|
|||
<button popover="Popover on top" popover-position="top">Popover on top and on a button!</button></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>
|
||||
<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></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>
|
||||
<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></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>
|
||||
<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></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>
|
||||
<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>
|
||||
</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>
|
||||
<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></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Colors</h2>
|
||||
<h4>Text</h4>
|
||||
|
@ -605,13 +742,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>
|
||||
<p class="text-primary">Text primary</p>
|
||||
<p class="text-secondary">Text secondary</p>
|
||||
<p class="text-success">Text success</p>
|
||||
<p class="text-warning">Text warning</p>
|
||||
<p class="text-danger">Text danger</p> </pre>
|
||||
<p class="text-danger">Text danger</p>
|
||||
<p class="text-muted">Text muted</p> </pre>
|
||||
</div>
|
||||
<h4>Backgrounds</h4>
|
||||
<div class="row flex-center">
|
||||
|
|
35
src/badges.less
Normal file
35
src/badges.less
Normal 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
61
src/cards.less
Normal 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;
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -4,12 +4,15 @@
|
|||
@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%);
|
||||
|
||||
|
||||
@primary-text: #FFF;
|
||||
@secondary-text: @primary;
|
||||
|
@ -17,7 +20,9 @@
|
|||
@warning-text: @primary;
|
||||
@danger-text: @primary;
|
||||
|
||||
@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);
|
||||
|
|
|
@ -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";
|
||||
|
|
Loading…
Reference in a new issue