Added new card styles
Updated cards to include the two new styles that will replace alerts, updated card documentation (for the most part).
This commit is contained in:
Angelos Chalaris
parent
393172e16f
commit
bbe375ef3d
7 changed files with 114 additions and 27 deletions
25
dist/mini-default.css
vendored
25
dist/mini-default.css
vendored
|
|
@ -1451,17 +1451,30 @@ table.striped tr:nth-of-type(2n) > td {
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.card.inverse {
|
||||
background: #212121;
|
||||
.card.warning {
|
||||
background: #ffca28;
|
||||
border: 1px solid #e8b825;
|
||||
}
|
||||
|
||||
.card.warning > .section {
|
||||
border-bottom: 1px solid #e8b825;
|
||||
}
|
||||
|
||||
.card.warning > .section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card.error {
|
||||
background: #b71c1c;
|
||||
color: #fafafa;
|
||||
border: 1px solid #0c0c0c;
|
||||
border: 1px solid #a71a1a;
|
||||
}
|
||||
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #424242;
|
||||
.card.error > .section {
|
||||
border-bottom: 1px solid #a71a1a;
|
||||
}
|
||||
|
||||
.card.inverse > .section:last-child {
|
||||
.card.error > .section:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -220,22 +220,17 @@
|
|||
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe><div class="section"><h3>Card with video</h3></div></div>
|
||||
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
|
||||
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
|
||||
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="https://placehold.it/800x600" alt="image"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
|
||||
</div><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code><img></code> element or a video element of your choice (e.g. using a <code><iframe></code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>. Finally, you can turn a whole <code>.card</code> black, by applying the <code>.inverse</code> class to it. This is not really a section trick, but we thought we should include it here anyway.</p>
|
||||
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code><img></code> element or a video element of your choice (e.g. using a <code><iframe></code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="card">
|
||||
<img src="..." class="section media">
|
||||
<div class="section double-padded"><p>Content</p></div>
|
||||
<div class="section dark"><p>Content</p></div>
|
||||
<div class="section darker"><p>Content</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card inverse">
|
||||
<div class="section"><p>Content</p></div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -326,6 +321,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="color-variants">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Card color variants</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div class="container"><br>
|
||||
<div class="row">
|
||||
<div class="card warning"><div class="section"><h3>Warning Card</h3><p>Warning cards are used to display important information to users.</p></div></div>
|
||||
<div class="card error"><div class="section"><h3>Error Card</h3><p>Error cards are used to display error messages to users.</p></div></div>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p>Cards can also be used to display important information or error messages to users. You can use the <code>.warning</code> class to display a yellow warning card or, if you need to display an error message to your users, you can use the <code>.error</code> class to display a red error card. </p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="card warning">
|
||||
<div class="section">
|
||||
<p>Warning</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card error">
|
||||
<div class="section">
|
||||
<p>Error</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>If you want more color variants for your cards, check out the <a href="customization.html">customization</a> page.</li>
|
||||
</ul><hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12"><pre><div class="card warning errors">
|
||||
<div class="section">
|
||||
<p>Bad card</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid combining two card color variants, as this might cause some unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
2
docs/mini-default.min.css
vendored
2
docs/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -765,16 +765,12 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Sections & media <a href="https://codepen.io/chalarangelo/pen/oYmoJz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<h3>Sections & media <a href="https://codepen.io/chalarangelo/pen/gWvJEw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="card">
|
||||
<img src="..." class="section media">
|
||||
<div class="section double-padded"><p>Content</p></div>
|
||||
<div class="section dark"><p>Content</p></div>
|
||||
<div class="section darker"><p>Content</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card inverse">
|
||||
<div class="section"><p>Content</p></div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
|
@ -783,7 +779,6 @@
|
|||
<li>Create media sections for images or video, using the <code>.media</code> class</li>
|
||||
<li>Color variants for sections are available using the <code>.dark</code> and <code>.darker</code> classes</li>
|
||||
<li>Extra padding section variant available using the <code>.double-padded</code> class</li>
|
||||
<li>Card color variant is available using the <code>.inverse</code> class</li>
|
||||
<li><code>.media</code> sections might not be fully supported in older browsers</li>
|
||||
<li><code>.media</code> sections have a preset height of <code>200px</code></li>
|
||||
</ul>
|
||||
|
|
@ -822,6 +817,30 @@
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Card color variants <a href="https://codepen.io/chalarangelo/pen/BRYeeW" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="card warning">
|
||||
<div class="section">
|
||||
<p>Warning</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card error">
|
||||
<div class="section">
|
||||
<p>Error</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>Create yellow warning cards, using the <code>.warning</code> class</li>
|
||||
<li>Create red error cards, using <code>.error</code> class</li>
|
||||
<li>Avoid combining two or more card color variants</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1028,7 +1047,7 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/MbLLwb" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<h3>Progress bar variants <a href="https://codepen.io/chalarangelo/pen/OmQePm" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><progress class="secondary" value="600" max="1000"></progress>
|
||||
<progress class="tertiary" value="300" max="1000"></progress>
|
||||
<progress class="inline" value="150" max="1000"></progress></pre>
|
||||
|
|
@ -1099,7 +1118,7 @@
|
|||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
|
||||
<h3>Generic borders & shadows <a href="https://codepen.io/chalarangelo/pen/aBXXvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<h3>Generic borders & shadows <a href="https://codepen.io/chalarangelo/pen/bWLPdo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><span class="bordered">Bordered</span>
|
||||
<span class="rounded">Rounded</span>
|
||||
<span class="circular">Circular</span>
|
||||
|
|
|
|||
|
|
@ -1114,3 +1114,7 @@
|
|||
|
||||
- Tonight's the night: Lots of updates and changes will be taking place (hopefully), as the next release needs to be fast-forwarded for a lot of reasons. Let the building begin.
|
||||
- Updated the `.close` icon with the new styling, making it less complicated, using a Unicode character instead of custom pseudo-elements, size is now `6.24KB`.
|
||||
- Removed `.inverse` class from card, added `.warning` and `.error` instead (part of the `.alert` migration system).
|
||||
- Updated `quick_reference` for said changes to `card` module.
|
||||
- Created new codepens for the `quick_reference` page for changes in the `card` module.
|
||||
- Forked old codepens that used `.nano` and `.shadow-...` classes, updated links in `quick_reference` for all of them now.
|
||||
|
|
|
|||
|
|
@ -339,12 +339,18 @@ $card-size2-name: 'small'; // Class name for small cards
|
|||
$card-size2-width: 240px; // Width for small cards
|
||||
$card-size3-name: 'fluid'; // Class name for fluid cards
|
||||
$card-size3-width: 100%; // Width for fluid cards
|
||||
$card-style1-name: 'inverse'; // Class name for card style 1
|
||||
$card-style1-back-color: $fore-color; // Background color for card style 1
|
||||
$card-style1-fore-color: #fafafa; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #0c0c0c; // Border style for card style 1
|
||||
$card-style1-name: 'warning'; // Class name for card style 1
|
||||
$card-style1-back-color: #ffca28; // Background color for card style 1
|
||||
$card-style1-fore-color: $fore-color; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #e8b825; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style:1px solid #424242;// Border style for card style 1 sections
|
||||
$card-style1-section-border-style:1px solid #e8b825;// Border style for card style 1 sections
|
||||
$card-style2-name: 'error'; // Class name for card style 1
|
||||
$card-style2-back-color: #b71c1c; // Background color for card style 1
|
||||
$card-style2-fore-color: #fafafa; // Text color for card style 1
|
||||
$card-style2-border-style: 1px solid #a71a1a; // Border style for card style 1
|
||||
$card-style2-border-radius: 0; // Border radius for card style 1
|
||||
$card-style2-section-border-style:1px solid #a71a1a;// Border style for card style 1 sections
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color: #e0e0e0; // Background color for card section style 1
|
||||
$card-section-style1-fore-color: $fore-color; // Text color for card section style 1
|
||||
|
|
@ -538,6 +544,8 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
@include make-card-alt-size ($card-size3-name, $card-size3-width);
|
||||
@include make-card-alt-color ($card-style1-name, $card-style1-back-color, $card-style1-fore-color,
|
||||
$card-style1-border-style, $card-style1-border-radius, $card-style1-section-border-style);
|
||||
@include make-card-alt-color ($card-style2-name, $card-style2-back-color, $card-style2-fore-color,
|
||||
$card-style2-border-style, $card-style2-border-radius, $card-style2-section-border-style);
|
||||
@include make-card-section-alt-color ($card-section-style1-name, $card-section-style1-back-color,
|
||||
$card-section-style1-fore-color);
|
||||
@include make-card-section-alt-color ($card-section-style2-name, $card-section-style2-back-color,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue