mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-21 21:15:13 +02:00
Code Issues Releases Wiki Activity

Updated generic shadow classes

Browse Source 
Removed old classes, replaced with a single generic .shadowed class.
This commit is contained in:
Angelos Chalaris
2017-05-08 17:51:17 +03:00
parent 84741346b2
commit ce03ac2a4d
10 changed files with 20 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

7
docs/quick_reference.html
View File

@@ -1104,17 +1104,14 @@
<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;
&lt;span class=&quot;shadow-none&quot;&gt;No shadow&lt;/span&gt;
&lt;span class=&quot;shadow-small&quot;&gt;Small shadow&lt;/span&gt;
&lt;span class=&quot;shadow-medium&quot;&gt;Medium shadow&lt;/span&gt;
&lt;span class=&quot;shadow-large&quot;&gt;Large shadow&lt;/span&gt;</pre>
&lt;span class=&quot;shadowed&quot;&gt;Casts shadow&lt;/span&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Create generic borders using <code>.bordered</code></li>
<li>Rounded and circular border radii available using <code>.rounded</code> and <code>.circular</code> classes</li>
<li>Generic shadows available using the <code>.shadow-small</code>, <code>.shadow-medium</code>, <code>.shadow-large</code> and <code>.shadow-none</code> classes</li>
<li>Generic shadows available using the <code>.shadowed</code> class</li>
<li>Combine generic borders, border radii and generic shadows with each other but not with themselves</li>
<li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
<li>Generic borders work well with buttons</li>

9
docs/utility.html
View File

@@ -132,19 +132,16 @@
<p>This is a paragraph with a piece of <span class="bordered">bordered text</span>.</p>
<button class="bordered">Bordered button</button><button class="bordered primary">Bordered button</button><br>
<p><img src="https://placehold.it/200x200?text=rounded" class="rounded" alt="image">&nbsp;&nbsp;<img src="https://placehold.it/200x200?text=circular" class="circular" alt="image"></p><br>
<p><span class="shadow-none">No shadow</span>&nbsp;&nbsp;<span class="shadow-small">Small shadow</span>&nbsp;&nbsp;<span class="shadow-medium">Medium shadow</span>&nbsp;&nbsp;<span class="shadow-large">Large shadow</span></p><br>
<p><span class="shadowed">This is an element that casts a shadow.</span></p><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Use the <code>.bordered</code> class to apply a generic black border with 25% opacity to any element. Apart from that you can use the <code>.rounded</code> and <code>.circular</code> classes to create generic border radiuses. Finally, you can use the <code>.shadow-small</code>, <code>.shadow-medium</code> and <code>.shadow-large</code> to add a generic <code><span class="fore-secondary">box-shadow</span></code> to any element, as well as the <code>.shadow-none</code> class to remove it entirely.</p>
<p>Use the <code>.bordered</code> class to apply a generic black border with 25% opacity to any element. Apart from that you can use the <code>.rounded</code> and <code>.circular</code> classes to create generic border radiuses. Finally, you can use the <code>.shadowed</code> class to add a generic <code><span class="fore-secondary">box-shadow</span></code> to any element.</p>
<h3>Sample code</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;
&lt;span class=&quot;shadow-none&quot;&gt;No shadow&lt;/span&gt;
&lt;span class=&quot;shadow-small&quot;&gt;Small shadow&lt;/span&gt;
&lt;span class=&quot;shadow-medium&quot;&gt;Medium shadow&lt;/span&gt;
&lt;span class=&quot;shadow-large&quot;&gt;Large shadow&lt;/span&gt;</pre>
&lt;span class=&quot;shadowed&quot;&gt;Casts shadow&lt;/span&gt;</pre>
</div>
</div>
<div class="section">

1
docs/v2/DEVLOG.md
View File

@@ -1106,3 +1106,4 @@
- Embedded the intro that Per Harald Borgen built for the framework in the front page (`index.html`) under the `Quick overview` heading (I think it fits quite nicely).
- Added Per Harald Borgen to the list of contributors to show my gratitude.
- Removed old classes produced using the generic shadow mixin in `utility`, replaced with `.shadowed` to let developers still have some generic shadow class. Updated docs as needed, codepens will be updated right before release.