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

Spinner cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2016-11-10 10:51:35 +02:00
parent a8b92f577c
commit f8ad9526af
2 changed files with 1 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View File

@@ -389,4 +389,4 @@
- Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly. - Restructured `form`, `button` and `checkbox` into one module: `input_control`. Made necessary changes for this to work properly.
- Code cleanup in `progress`. Merged `spinner` into `progress`. Removed `spinner-dot` from the `spinner` module as it was not a great component. - Code cleanup in `progress`. Merged `spinner` into `progress`. Removed `spinner-dot` from the `spinner` module as it was not a great component.
- Code cleanup for `contextual`. Minor `mark` optimizations. Added `alert` mixin `make-alert-alt-style` for alternative `alert` styles. - Code cleanup for `contextual`. Minor `mark` optimizations. Added `alert` mixin `make-alert-alt-style` for alternative `alert` styles.
- Removed `spinner` file.

42
src/mini/_spinner.scss
View File

@@ -1,42 +0,0 @@
// Definitions for spinners.
// Animation definitions
@-webkit-keyframes spinner-dot-anim { to { -webkit-transform: translateY(-($spinner-dot-font-size*6));} }
@keyframes spinner-dot-anim { to { transform: translateY(-($spinner-dot-font-size*6));} }
@-webkit-keyframes spinner-donut-anim { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }
@keyframes spinner-donut-anim { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }
// Style for dots spinner (simple text-based spinner)
.#{$spinner-dot-name} {
display: inline-block;
overflow: hidden;
font-size: $spinner-dot-font-size;
height: 1.5 * $spinner-dot-font-size;
vertical-align: bottom;
&:after{
display: inline-table;
white-space: pre;
content: "\A.\A..\A...";
-webkit-animation: spinner-dot-anim 1.2s steps(4) infinite;
animation: spinner-dot-anim 1.2s steps(4) infinite;
}
}
// Style for donut spinner
.#{$spinner-donut-name} {
display: inline-block;
border: $spinner-donut-border-thickness solid $spinner-donut-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-fore-color;
border-radius: 50%;
width: $spinner-donut-size;
height: $spinner-donut-size;
animation: spinner-donut-anim 1.2s linear infinite;
}
// Mixin for alternate donut spinner styles (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.
// - $spinner-donut-alt-fore-color : The foreground color of the alternate donut spinner.
@mixin make-spinner-donut-alt-color ($spinner-donut-alt-name, $spinner-donut-alt-back-color, $spinner-donut-alt-fore-color) {
.#{$spinner-donut-name}.#{$spinner-donut-alt-name} {
border: $spinner-donut-border-thickness solid $spinner-donut-alt-back-color;
border-left: $spinner-donut-border-thickness solid $spinner-donut-alt-fore-color;
}
}