mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-06 05:47:23 +02:00
Code Issues Releases Wiki Activity

Added new card styles

Browse Source 
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
2017-05-10 23:42:54 +03:00
parent 393172e16f
commit bbe375ef3d
7 changed files with 114 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/quick_reference.html
View File

@@ -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 &amp; media <a href="https://codepen.io/chalarangelo/pen/oYmoJz" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<h3>Sections &amp; media <a href="https://codepen.io/chalarangelo/pen/gWvJEw" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;card&quot;&gt;
&lt;img src=&quot;...&quot; class=&quot;section media&quot;&gt;
&lt;div class=&quot;section double-padded&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section dark&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;div class=&quot;section darker&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card inverse&quot;&gt;
&lt;div class=&quot;section&quot;&gt;&lt;p&gt;Content&lt;/p&gt;&lt;/div&gt;
&lt;/div&gt;</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>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;card warning&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Warning&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card error&quot;&gt;
&lt;div class=&quot;section&quot;&gt;
&lt;p&gt;Error&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</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>&nbsp;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>&nbsp;View on Codepen</a></h3>
<pre>&lt;progress class=&quot;secondary&quot; value=&quot;600&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;tertiary&quot; value=&quot;300&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;
&lt;progress class=&quot;inline&quot; value=&quot;150&quot; max=&quot;1000&quot;&gt;&lt;/progress&gt;</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 &amp; shadows <a href="https://codepen.io/chalarangelo/pen/aBXXvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<h3>Generic borders &amp; shadows <a href="https://codepen.io/chalarangelo/pen/bWLPdo" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;span class=&quot;bordered&quot;&gt;Bordered&lt;/span&gt;
&lt;span class=&quot;rounded&quot;&gt;Rounded&lt;/span&gt;
&lt;span class=&quot;circular&quot;&gt;Circular&lt;/span&gt;