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

Spinner size mixin

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-11 12:02:16 +02:00
parent a6b3cec38d
commit a2bc9e4835
6 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dist/mini-default.css vendored
View File

@@ -1237,6 +1237,11 @@ progress.nano {
border: 4px solid #e8f5e9;
border-left: 4px solid #2e7d32; }
.spinner-donut.large {
border-width: 6px;
width: 32px;
height: 32px; }
.bordered {
border: 1px solid rgba(0, 0, 0, 0.25) !important; }

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

File diff suppressed because one or more lines are too long

3
docs/v2/DEVLOG.md
View File

@@ -414,4 +414,5 @@
- Rebuilt `breadcrumbs` from scratch. Uses flexbox.
- Changed `clearfix`, `center-block`, `hidden` and `visually-hidden` from mixins to normal components.
- Changed the appearance of `button-group`, it will now use `border` and `border-radius` more creatively to get rid of unnecessary and excessive styling.
- Added mixin `make-box-shadow-generic` in `utility`, used it to create a class for `box-shadow:none;` just in case.
- Added mixin `make-box-shadow-generic` in `utility`, used it to create a class for `box-shadow:none;` just in case.
- Added mixin in `progress` `make-spinner-donut-alt-style` for `spinner-donut` and created `large` variant with it.

5
docs/v2/index.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<!-- Live demo styled as of 20161109 -->
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/4c473fa3216f1da2d0c140c9274a506de6e2ecd5/dist/mini-default.min.css"> -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/a6b3cec38d052cb2fec98f090593768ca4147902/dist/mini-default.min.css">
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<meta charset="utf-8">
@@ -554,7 +554,8 @@
<p>And this here is a <code>.spinner-donut</code> spinner. It is more versatile and it can also use a couple of variants like <code>.secondary</code> and <code>.tertiary</code>, as shown below:</p>
<div class="spinner-donut"></div>
<div class="spinner-donut secondary"></div>
<div class="spinner-donut tertiary"></div>
<div class="spinner-donut tertiary"></div>
<div class="spinner-donut large"></div>
</div>
</div>
</div>

6
src/flavors/mini-default.scss
View File

@@ -399,6 +399,10 @@ $spinner-donut-variant2-back-color: // Background color for donut spi
#e8f5e9;
$spinner-donut-variant2-fore-color: // Foreground color for donut spinner variant 2
#2e7d32;
$spinner-donut-style1-name: 'large'; // Class name for donut spinner style 1
$spinner-donut-style1-size: 32px; // Size for donut spinner style 1
$spinner-donut-style1-border-thickness: // Border thickness for donut spinner style 1
6px;
// Variables for utilities and helper classes
$hidden-name: 'hidden'; // Class name for hidden elements
$visually-hidden-name: 'visually-hidden'; // Class name for visually hidden elements
@@ -468,6 +472,8 @@ $center-block-name: 'center-block'; // Class name for center block
$progress-style1-margin, $progress-style1-border-style, $progress-style1-border-radius);
@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,
$spinner-donut-style1-border-thickness);
// Use mixins for utilities and helper classes
@include make-border-generic ($border-generic-name);
@include make-border-radial-style ($border-radial-style1-name, $border-radial-style1-radius);

20
src/mini/_progress.scss
View File

@@ -142,7 +142,7 @@ progress {
height: $spinner-donut-size;
animation: spinner-donut-anim 1.2s linear infinite;
}
// Mixin for alternate donut spinner styles (spinner donut color variants).
// Mixin for alternate donut spinner colors (spinner donut color variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner.
// - $spinner-donut-alt-back-color : The background color of the alternate donut spinner.
@@ -152,4 +152,22 @@ progress {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
}
// Mixin for alternate donut spinner styles (spinner donut styles variants).
// Variables:
// - $spinner-donut-alt-name : The name of the class used for the alternate donut spinner style.
// - $spinner-donut-alt-size : The size of the alternate donut spinner style.
// - $spinner-donut-alt-border-thickness : (Optional) The border thickness of the alternate donut spinner style.
// Defaults to the value of $spinner-donut-alt-border-thickness.
@mixin make-spinner-donut-alt-style ($spinner-donut-alt-name, $spinner-donut-alt-size,
$spinner-donut-alt-border-thickness : $spinner-donut-border-thickness) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
@if $spinner-donut-alt-border-thickness != $spinner-donut-border-thickness {
border-width: $spinner-donut-alt-border-thickness;
}
@if $spinner-donut-alt-size != $spinner-donut-size {
width: $spinner-donut-alt-size;
height: $spinner-donut-alt-size;
}
}
}