Updated generic shadow classes
Removed old classes, replaced with a single generic .shadowed class.
This commit is contained in:
Angelos Chalaris
parent
84741346b2
commit
ce03ac2a4d
10 changed files with 20 additions and 71 deletions
18
dist/mini-dark.css
vendored
18
dist/mini-dark.css
vendored
|
|
@ -3,7 +3,7 @@
|
|||
Flavor name: Dark (mini-dark)
|
||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||
Maintainers: Angelos Chalaris
|
||||
mini.css version: v2.1.4 (Fermion)
|
||||
mini.css version: v2.1.5 (Fermion)
|
||||
*/
|
||||
/*
|
||||
Browsers resets and base typography.
|
||||
|
|
@ -2099,20 +2099,8 @@ ul.breadcrumbs li:last-child:after {
|
|||
}
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.shadow-small {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-medium {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-large {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
.shadowed {
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
|
|
|||
2
dist/mini-dark.min.css
vendored
2
dist/mini-dark.min.css
vendored
File diff suppressed because one or more lines are too long
16
dist/mini-default.css
vendored
16
dist/mini-default.css
vendored
|
|
@ -2100,20 +2100,8 @@ ul.breadcrumbs li:last-child:after {
|
|||
}
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.shadow-small {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-medium {
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15) !important;
|
||||
}
|
||||
|
||||
.shadow-large {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15) !important;
|
||||
.shadowed {
|
||||
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
|
|
|
|||
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
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
|
|
@ -1104,17 +1104,14 @@
|
|||
<pre><span class="bordered">Bordered</span>
|
||||
<span class="rounded">Rounded</span>
|
||||
<span class="circular">Circular</span>
|
||||
<span class="shadow-none">No shadow</span>
|
||||
<span class="shadow-small">Small shadow</span>
|
||||
<span class="shadow-medium">Medium shadow</span>
|
||||
<span class="shadow-large">Large shadow</span></pre>
|
||||
<span class="shadowed">Casts shadow</span></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>
|
||||
|
|
|
|||
|
|
@ -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"> <img src="https://placehold.it/200x200?text=circular" class="circular" alt="image"></p><br>
|
||||
<p><span class="shadow-none">No shadow</span> <span class="shadow-small">Small shadow</span> <span class="shadow-medium">Medium shadow</span> <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><span class="bordered">Bordered</span>
|
||||
<span class="rounded">Rounded</span>
|
||||
<span class="circular">Circular</span>
|
||||
<span class="shadow-none">No shadow</span>
|
||||
<span class="shadow-small">Small shadow</span>
|
||||
<span class="shadow-medium">Medium shadow</span>
|
||||
<span class="shadow-large">Large shadow</span></pre>
|
||||
<span class="shadowed">Casts shadow</span></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -490,17 +490,9 @@ $border-radial-style1-name: 'rounded'; // Class name for radial border sty
|
|||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
||||
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
||||
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
|
||||
0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
|
|
@ -600,8 +592,5 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
|
|||
|
|
@ -490,17 +490,9 @@ $border-radial-style1-name: 'rounded'; // Class name for radial border sty
|
|||
$border-radial-style1-radius: 2px; // Border radius for radial border style 1
|
||||
$border-radial-style2-name: 'circular'; // Class name for radial border style 2
|
||||
$border-radial-style2-radius: 50%; // Border radius for radial border style 2
|
||||
$box-shadow-style1-name: 'shadow-none'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: none; // Box shadow value for generic box-shadow style 1
|
||||
$box-shadow-style2-name: 'shadow-small'; // Class name for generic box-shadow style 2
|
||||
$box-shadow-style2-value: // Box shadow value for generic box-shadow style 2
|
||||
0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style3-name: 'shadow-medium'; // Class name for generic box-shadow style 3
|
||||
$box-shadow-style3-value: // Box shadow value for generic box-shadow style 3
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style4-name: 'shadow-large'; // Class name for generic box-shadow style 4
|
||||
$box-shadow-style4-value: // Box shadow value for generic box-shadow style 4
|
||||
0 2px 4px rgba(0,0,0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.15);
|
||||
$box-shadow-style1-name: 'shadowed'; // Class name for generic box-shadow style 1
|
||||
$box-shadow-style1-value: // Box shadow value for generic box-shadow style 1
|
||||
0 4px 4px 0 rgba(0, 0, 0, 0.125), 0 2px 2px -1px rgba(0, 0, 0, 0.25);
|
||||
$responsive-margin-name: 'responsive-margin'; // Class name for responsive margin
|
||||
$responsive-margin-small-value: 0.25rem; // Margin value for responsive margin on small screens
|
||||
$responsive-margin-medium-value: 0.375rem; // Margin value for responsive margin on medium screens
|
||||
|
|
@ -600,8 +592,5 @@ $include-center-block-name: false; // Should center block be included? (
|
|||
@include make-padding-responsive ($responsive-padding-name, $responsive-padding-small-value,
|
||||
$responsive-padding-medium-value, $responsive-padding-large-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style1-name, $box-shadow-style1-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style2-name, $box-shadow-style2-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style3-name, $box-shadow-style3-value);
|
||||
@include make-box-shadow-generic ($box-shadow-style4-name, $box-shadow-style4-value);
|
||||
@include make-hidden-responsive ($responsive-hidden-prefix);
|
||||
@include make-visually-hidden-responsive ($responsive-visually-hidden-prefix);
|
||||
|
|
|
|||
Loading…
Reference in a new issue