mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-03-14 01:09:38 +01:00
Card module and documentation updates
This commit is contained in:
Angelos Chalaris
parent
a649cf0927
commit
f0aef1f5f3
42
dist/mini-default.css
vendored
42
dist/mini-default.css
vendored
@ -1352,40 +1352,30 @@ button.large, [type="button"].large, [type="submit"].large,
|
||||
@media (min-width: 480px) {
|
||||
.card.large {
|
||||
max-width: 480px; } }
|
||||
@media (min-width: 160px) {
|
||||
@media (min-width: 240px) {
|
||||
.card.small {
|
||||
max-width: 160px; } }
|
||||
max-width: 240px; } }
|
||||
.card.fluid {
|
||||
max-width: 100%;
|
||||
width: auto; }
|
||||
|
||||
.card.primary {
|
||||
background: #e1f5fe;
|
||||
color: #263238;
|
||||
border: 1px solid #01579b; }
|
||||
.card.inverse {
|
||||
background: #212121;
|
||||
color: #fafafa;
|
||||
border: 1px solid #424242; }
|
||||
.card.inverse > .section {
|
||||
border-bottom: 1px solid #616161; }
|
||||
.card.inverse > .section:last-child {
|
||||
border-bottom: 0; }
|
||||
|
||||
.card > .section.dark {
|
||||
background: #e0e0e0; }
|
||||
|
||||
.card > .section.darker {
|
||||
background: #bdbdbd; }
|
||||
|
||||
.card > .section.primary {
|
||||
background: #0277bd; }
|
||||
|
||||
.card > .section.double-padded {
|
||||
padding: 12px 16px 12px; }
|
||||
|
||||
.row.cards {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around; }
|
||||
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.row.cards {
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around; }
|
||||
padding: 10px 12px 10px; }
|
||||
|
||||
mark.secondary {
|
||||
background: #f44336; }
|
||||
@ -1455,6 +1445,10 @@ progress.nano {
|
||||
width: -webkit-calc(100% - 2*0);
|
||||
width: calc(100% - 2*0);
|
||||
margin: 0 0; } }
|
||||
.spinner-donut.secondary {
|
||||
border: 4px solid #ffebee;
|
||||
border-left: 4px solid #c62828; }
|
||||
|
||||
.spinner-donut.tertiary {
|
||||
border: 4px solid #e8f5e9;
|
||||
border-left: 4px solid #2e7d32; }
|
||||
|
||||
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
@ -566,3 +566,7 @@
|
||||
- Added `card` doc page.
|
||||
- Added some basic info on `card`s in doc page.
|
||||
- Updated basic documentation for `card` module in doc page.
|
||||
- Updated some mixins in the `card` module.
|
||||
- Tested video embedding in `card`s and it works!
|
||||
- Added some information and demos about `card` `section`s.
|
||||
- Changed values for some `card` module variables used in mixins.
|
||||
|
||||
@ -45,12 +45,12 @@
|
||||
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
|
||||
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
|
||||
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
|
||||
.col-sm-12.col-sm-last.col-md-12.col-md-normal {
|
||||
box-sizing: border-box;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
}
|
||||
@media (max-width: 1279px){
|
||||
.col-sm-12.col-sm-last.col-lg-4.col-lg-normal {
|
||||
.col-sm-12.col-sm-last.col-md-12.col-md-normal {
|
||||
border: 0;
|
||||
border-top: 1px solid #bdbdbd;
|
||||
}
|
||||
@ -122,7 +122,7 @@
|
||||
<h2>Basic syntax</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="row">
|
||||
@ -133,14 +133,14 @@
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p>To start using cards in your layout, you need to be somewhat familiar with the <a href="grid.html"><strong>grid</strong></a> module, so if you aren't take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
|
||||
<ol>
|
||||
<li>At the outermost level of the card layout syntax is a <code>.row</code>, which serves as a wrapper for all the cards inside it.</li>
|
||||
<li>Inside the <code>.row</code>, cards are defined as <code><div></code> elements of the <code>.card</code> class.</li>
|
||||
<li>Finally, inside the <code>.card</code>s, you can define sections using the <code>.section</code> class to wrap your content.</li>
|
||||
</ol>
|
||||
<p>Cards will respond to screen changes, realigning themselves as necessary to fit on the page. Due to this property, the example showcased here might not make it immediately apparent that cards normally display side by side in order to fill their parent container.</p>
|
||||
<p>Note that cards will respond to screen changes, realigning themselves as necessary to fit on the page.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="row">
|
||||
<div class="card">
|
||||
@ -227,7 +227,7 @@
|
||||
<span class="fore-secondary"><!-- or --></span>
|
||||
<div class="card col-sm">
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> You should not have elements that are cards and rows or columns at the same time.</p>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> You should not have elements that are both cards and rows or columns at the same time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -241,20 +241,40 @@
|
||||
<h2>Sections & media</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<!-- sample -->
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<div class="container">
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div></div>
|
||||
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></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="http://placehold.it/800x600"><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-lg-8 col-lg-normal">
|
||||
<p></p>
|
||||
<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>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<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>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>The <code>.media</code> class might not be well supported on older browsers, especially legacy versions of Internet Explorer.</li>
|
||||
<li>Depending on the source website, some embedded videos might not display properly inside a <code>.media</code> section.</li>
|
||||
<li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization.html">customization page</a> for instructions.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
@ -278,10 +298,10 @@
|
||||
<h2>Card sizing and fluidity</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-lg-4 col-lg-normal">
|
||||
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
||||
<!-- sample -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-lg-8 col-lg-normal">
|
||||
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
||||
<p></p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
|
||||
@ -84,6 +84,7 @@
|
||||
|
||||
<div class="card"><div class="section row"><div class="card">aa</div></div></div>
|
||||
<span class="card"><h3 class="section">Text</h3><p class="section">Content of a card</p></span>
|
||||
<span class="card alert critical"><h3 class="section">Text</h3><p class="section">Content of a card</p></span>
|
||||
</div>
|
||||
<br><br>
|
||||
<h4>Contextual tests</h4>
|
||||
|
||||
@ -324,21 +324,24 @@ $card-normal-width: 320px; // Width for normal cards
|
||||
$card-size1-name: 'large'; // Class name for large cards
|
||||
$card-size1-width: 480px; // Width for large cards
|
||||
$card-size2-name: 'small'; // Class name for small cards
|
||||
$card-size2-width: 160px; // Width 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: 'primary'; // Class name for card style 1
|
||||
$card-style1-back-color: #e1f5fe; // Background color for card style 1
|
||||
$card-style1-fore-color: #263238; // Text color for card style 1
|
||||
$card-style1-border-style: 1px solid #01579b; // Border style for card style 1
|
||||
$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 #424242; // Border style for card style 1
|
||||
$card-style1-border-radius: 0; // Border radius for card style 1
|
||||
$card-style1-section-border-style: // Border style for card style 1 sections
|
||||
1px solid #616161;
|
||||
$card-section-style1-name: 'dark'; // Class name for card section style 1
|
||||
$card-section-style1-back-color:#bdbdbd; // Background color 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
|
||||
$card-section-style2-name: 'primary'; // Class name for card section style 2
|
||||
$card-section-style2-back-color:#0277bd; // Background color for card section style 2
|
||||
$card-section-style2-name: 'darker'; // Class name for card section style 2
|
||||
$card-section-style2-back-color:#bdbdbd; // Background color for card section style 2
|
||||
$card-section-style2-fore-color:$fore-color; // Text color for card section style 2
|
||||
$card-section-padding1-name: 'double-padded'; // Class name for card section padding style 1
|
||||
$card-section-padding1-padding: 12px 16px 12px; // Padding for card section padding style 1
|
||||
$card-section-padding1-padding: 10px 12px 10px; // Padding for card section padding style 1
|
||||
// Notes:
|
||||
// [1] - The cards module depends heavily on the grid system module.
|
||||
// Variables for tabs [1]
|
||||
@ -502,16 +505,12 @@ $center-block-name: 'center-block'; // Class name for center block
|
||||
@include make-card-alt-size ($card-size2-name, $card-size2-width);
|
||||
@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-style, $card-style1-border-radius, $card-style1-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,
|
||||
$card-section-style2-fore-color);
|
||||
@include make-card-section-alt-style ($card-section-padding1-name, $card-section-padding1-padding);
|
||||
@include add-grid-row-cards-alignment;
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include add-grid-row-cards-alignment;
|
||||
// Use mixins for contextual background elements and alerts
|
||||
@include make-mark-alt-color ($mark-variant1-name, $mark-variant1-back-color);
|
||||
@include make-mark-alt-color ($mark-variant2-name, $mark-variant2-back-color);
|
||||
@ -530,6 +529,8 @@ $center-block-name: 'center-block'; // Class name for center block
|
||||
@include make-progress-alt-style ($progress-style1-name, $progress-style1-height,
|
||||
$progress-style1-top-bottom-margin, $progress-style1-left-right-margin,
|
||||
$progress-style1-border-style, $progress-style1-border-radius);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant1-name, $spinner-donut-variant1-back-color,
|
||||
$spinner-donut-variant1-fore-color);
|
||||
@include make-spinner-donut-alt-color ($spinner-donut-variant2-name, $spinner-donut-variant2-back-color,
|
||||
$spinner-donut-variant2-fore-color);
|
||||
@include make-spinner-donut-alt-style ($spinner-donut-style1-name, $spinner-donut-style1-size,
|
||||
|
||||
@ -102,8 +102,11 @@ $card-normal-width: 320px !default; // Width for normal cards
|
||||
// of $card-border-style.
|
||||
// - $card-alt-border-radius : (Optional) The border radius of the alternate card. Defaults to the value
|
||||
// of $card-border-radius.
|
||||
// - $card-alt-section-border-style : (Optional) The border style of the alternate card's sections. Defaults to
|
||||
// the value of $card-section-border-style.
|
||||
@mixin make-card-alt-color ($card-alt-name, $card-alt-back-color, $card-alt-fore-color,
|
||||
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius) {
|
||||
$card-alt-border-style : $card-border-style, $card-alt-border-radius : $card-border-radius,
|
||||
$card-alt-section-border-style : $card-section-border-style) {
|
||||
.#{$card-name}.#{$card-alt-name} {
|
||||
@if $card-alt-back-color != $card-back-color {
|
||||
background: $card-alt-back-color;
|
||||
@ -117,6 +120,14 @@ $card-normal-width: 320px !default; // Width for normal cards
|
||||
@if $card-alt-border-radius != $card-border-radius {
|
||||
border-radius: $card-alt-border-radius;
|
||||
}
|
||||
@if $card-alt-section-border-style != $card-section-border-style{
|
||||
& > .#{$card-section-name} {
|
||||
border-bottom: $card-alt-section-border-style;
|
||||
}
|
||||
& > .#{$card-section-name}:last-child {
|
||||
border-bottom: 0; // Clean the extra border for last section
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Mixin for alternate card sections (card section color variants).
|
||||
@ -148,15 +159,4 @@ $card-normal-width: 320px !default; // Width for normal cards
|
||||
.#{$card-name} > .#{$card-section-name}.#{$card-section-alt-name} {
|
||||
padding: $card-section-alt-padding;
|
||||
}
|
||||
}
|
||||
// Mixin for grid system's row that spaces cards apart.
|
||||
@mixin add-grid-row-cards-alignment {
|
||||
$grid-row-name: 'row' !default; // Class name for the cards
|
||||
.#{$grid-row-name}.#{$card-name}s {
|
||||
// Old syntax
|
||||
-webkit-box-pack: justify;
|
||||
// New syntax
|
||||
-webkit-justify-content: space-around;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user