Added spinner module
This commit is contained in:
Angelos Chalaris
parent
203100b465
commit
0139657e94
9 changed files with 212 additions and 9 deletions
|
|
@ -1,5 +1,12 @@
|
||||||
# Changelog
|
# Changelog
|
||||||
|
|
||||||
|
## v1.1.0
|
||||||
|
|
||||||
|
- Fixed a problem with disabled buttons not behaving properly (issue #7).
|
||||||
|
- Added support for `:disabled` pseudo-class for elements with disabled styles (issue #8).
|
||||||
|
- Added support for `:active` and `:focus` for the close utility class (issue #9).
|
||||||
|
- New module: Spinners (component comes in two styles) - part of the extra modules.
|
||||||
|
|
||||||
## v1.0.2
|
## v1.0.2
|
||||||
|
|
||||||
- Refactoring patch (all version will now use vMajor.Minor.Patch instead of just Major.Minor.Patch). Changes will be reflected in the updated links.
|
- Refactoring patch (all version will now use vMajor.Minor.Patch instead of just Major.Minor.Patch). Changes will be reflected in the updated links.
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ You can learn all about using it, its modules and components, as well as see a l
|
||||||
|
|
||||||
To give **mini.css** a try using the default flavor, paste the following code inside your HTML page's `<head>` tag:
|
To give **mini.css** a try using the default flavor, paste the following code inside your HTML page's `<head>` tag:
|
||||||
|
|
||||||
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.0.2/flavors/mini-default.min.css">
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v1.1.0/flavors/mini-default.min.css">
|
||||||
|
|
||||||
Alternatively, you can use one of the other [flavors](https://github.com/Chalarangelo/mini.css/tree/master/flavors). Simply replace the final part of the URL with the flavor's CSS file (minified or not) and you're good to go!
|
Alternatively, you can use one of the other [flavors](https://github.com/Chalarangelo/mini.css/tree/master/flavors). Simply replace the final part of the URL with the flavor's CSS file (minified or not) and you're good to go!
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: Default (mini-default)
|
Flavor name: Default (mini-default)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
mini.css version: v1.0 (September, 2016)
|
mini.css version: v1.1 (October, 2016)
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||||
|
|
@ -1415,6 +1415,61 @@ input[type="radio"]:checked.acrd + label {
|
||||||
background-color: #ea4848;
|
background-color: #ea4848;
|
||||||
color: #eeeeee; }
|
color: #eeeeee; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Mixin for dotted spinner component.
|
||||||
|
Parameters:
|
||||||
|
- $spinner-dots-name : The class name of the dotted spinner component.
|
||||||
|
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
||||||
|
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
||||||
|
Notes:
|
||||||
|
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
||||||
|
suggested that you specify it in the same measurement as the text base.
|
||||||
|
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
||||||
|
and the animation. Some tweaking might be required.
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
Mixin for dotted spinner component.
|
||||||
|
Parameters:
|
||||||
|
- $spinner-round-name : The class name of the round spinner component.
|
||||||
|
- $spinner-round-size : The size of the round spinner component. [1]
|
||||||
|
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
||||||
|
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
||||||
|
- $spinner-round-animation-time : The animation time of the round spinner component.
|
||||||
|
Notes:
|
||||||
|
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
||||||
|
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
||||||
|
specified in border style format.
|
||||||
|
*/
|
||||||
|
.spinner-dots {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 1.5em;
|
||||||
|
vertical-align: bottom; }
|
||||||
|
.spinner-dots:after {
|
||||||
|
display: inline-table;
|
||||||
|
white-space: pre;
|
||||||
|
content: "\A.\A..\A...";
|
||||||
|
animation: spin-dots 1.5s steps(4) infinite; }
|
||||||
|
|
||||||
|
@keyframes spin-dots {
|
||||||
|
to {
|
||||||
|
transform: translateY(-6em); } }
|
||||||
|
.spinner-round {
|
||||||
|
display: inline-block;
|
||||||
|
border: 0.4em solid rgba(34, 34, 34, 0.2);
|
||||||
|
border-left: 0.4em solid #222;
|
||||||
|
transform: translateZ(0);
|
||||||
|
animation: spin-round 1.5s infinite linear; }
|
||||||
|
.spinner-round, .spinner-round:after {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em; }
|
||||||
|
|
||||||
|
@keyframes spin-round {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg); } }
|
||||||
/*
|
/*
|
||||||
Mixin for the carousel component.
|
Mixin for the carousel component.
|
||||||
Parameters:
|
Parameters:
|
||||||
|
|
|
||||||
2
flavors/mini-default.min.css
vendored
2
flavors/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: Default (mini-default)
|
Flavor name: Default (mini-default)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
mini.css version: v1.0 (September, 2016)
|
mini.css version: v1.1 (October, 2016)
|
||||||
*/
|
*/
|
||||||
//====================================================================
|
//====================================================================
|
||||||
//
|
//
|
||||||
|
|
@ -339,7 +339,7 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
|
||||||
$progress-class-name: prg; // Name for the progress class
|
$progress-class-name: prg; // Name for the progress class
|
||||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||||
// Progress and p progress variants colors (you can remove things you
|
// Progress and progress variants colors (you can remove things you
|
||||||
// don't need or define more colors if you need them).
|
// don't need or define more colors if you need them).
|
||||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||||
|
|
@ -356,6 +356,21 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||||
//====================================================================
|
//====================================================================
|
||||||
|
// Variable definitions for the Spinner module (spinner.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Spinner class names.
|
||||||
|
$spinner-dotted-name: spinner-dots; // Name for the dotted spinner class
|
||||||
|
$spinner-round-name: spinner-round; // Name for the round spinner class
|
||||||
|
// Spinner colors.
|
||||||
|
$spinner-round-doughnout: 0.4em solid rgba(34,34,34, 0.2); // Style for the round spinner doughnut
|
||||||
|
$spinner-round-spin: 0.4em solid #222; // Style for the round spinner spinning part
|
||||||
|
// Enable progress (spinner.scss). (Use individual mixins below to use.)
|
||||||
|
@import '../scss/mini-extra/spinner';
|
||||||
|
// Use spinner mixins to create spinners with given specs. For more
|
||||||
|
// information refer to the spinner.scss file to check the definitions.
|
||||||
|
@include make-spinner-dots($spinner-dotted-name, 1.5em, 1.5s);
|
||||||
|
@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||||
|
//====================================================================
|
||||||
// Variable definitions for the Carousel module (_carousel.scss)
|
// Variable definitions for the Carousel module (_carousel.scss)
|
||||||
//====================================================================
|
//====================================================================
|
||||||
// Carousel class names.
|
// Carousel class names.
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: NiteOwl (mini-niteowl)
|
Flavor name: NiteOwl (mini-niteowl)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
mini.css version: v1.0 (September, 2016)
|
mini.css version: v1.1 (October, 2016)
|
||||||
*/
|
*/
|
||||||
/*
|
/*
|
||||||
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
Set font-family, line-height, prevent adjustments of font size after orientation changes in IE and iOS.
|
||||||
|
|
@ -1415,6 +1415,61 @@ input[type="radio"]:checked.acrd + label {
|
||||||
background-color: #e72a2a;
|
background-color: #e72a2a;
|
||||||
color: #f5f5f5; }
|
color: #f5f5f5; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Mixin for dotted spinner component.
|
||||||
|
Parameters:
|
||||||
|
- $spinner-dots-name : The class name of the dotted spinner component.
|
||||||
|
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
||||||
|
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
||||||
|
Notes:
|
||||||
|
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
||||||
|
suggested that you specify it in the same measurement as the text base.
|
||||||
|
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
||||||
|
and the animation. Some tweaking might be required.
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
Mixin for dotted spinner component.
|
||||||
|
Parameters:
|
||||||
|
- $spinner-round-name : The class name of the round spinner component.
|
||||||
|
- $spinner-round-size : The size of the round spinner component. [1]
|
||||||
|
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
||||||
|
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
||||||
|
- $spinner-round-animation-time : The animation time of the round spinner component.
|
||||||
|
Notes:
|
||||||
|
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
||||||
|
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
||||||
|
specified in border style format.
|
||||||
|
*/
|
||||||
|
.spinner-dots {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 1.5em;
|
||||||
|
vertical-align: bottom; }
|
||||||
|
.spinner-dots:after {
|
||||||
|
display: inline-table;
|
||||||
|
white-space: pre;
|
||||||
|
content: "\A.\A..\A...";
|
||||||
|
animation: spin-dots 1.5s steps(4) infinite; }
|
||||||
|
|
||||||
|
@keyframes spin-dots {
|
||||||
|
to {
|
||||||
|
transform: translateY(-6em); } }
|
||||||
|
.spinner-round {
|
||||||
|
display: inline-block;
|
||||||
|
border: 0.4em solid rgba(245, 245, 245, 0.2);
|
||||||
|
border-left: 0.4em solid #f5f5f5;
|
||||||
|
transform: translateZ(0);
|
||||||
|
animation: spin-round 1.5s infinite linear; }
|
||||||
|
.spinner-round, .spinner-round:after {
|
||||||
|
border-radius: 50%;
|
||||||
|
width: 1.5em;
|
||||||
|
height: 1.5em; }
|
||||||
|
|
||||||
|
@keyframes spin-round {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg); } }
|
||||||
/*
|
/*
|
||||||
Mixin for the carousel component.
|
Mixin for the carousel component.
|
||||||
Parameters:
|
Parameters:
|
||||||
|
|
|
||||||
2
flavors/mini-niteowl.min.css
vendored
2
flavors/mini-niteowl.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,7 @@
|
||||||
/*
|
/*
|
||||||
Flavor name: NiteOwl (mini-niteowl)
|
Flavor name: NiteOwl (mini-niteowl)
|
||||||
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
Author: Angelos Chalaris (chalarangelo@gmail.com)
|
||||||
mini.css version: v1.0 (September, 2016)
|
mini.css version: v1.1 (October, 2016)
|
||||||
*/
|
*/
|
||||||
//====================================================================
|
//====================================================================
|
||||||
//
|
//
|
||||||
|
|
@ -339,7 +339,7 @@ $accordion-label-bg-color: $collapse-bg-color; // Background color for t
|
||||||
$progress-class-name: prg; // Name for the progress class
|
$progress-class-name: prg; // Name for the progress class
|
||||||
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
$progress-bar-style1-name: 'green'; // Name for the progress bar style 1 class
|
||||||
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
$progress-bar-style2-name: 'red'; // Name for the progress bar style 2 class
|
||||||
// Progress and p progress variants colors (you can remove things you
|
// Progress and progress variants colors (you can remove things you
|
||||||
// don't need or define more colors if you need them).
|
// don't need or define more colors if you need them).
|
||||||
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
$progress-bg-color: #d7d7d7; // Background color for the progress bar container
|
||||||
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
$progress-bar-color: $btn-alt-color; // Color for the text of the progress bar
|
||||||
|
|
@ -356,6 +356,21 @@ $progress-bar-style2-bg-color: $btn-r-bg-color; // Background color for t
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style1-name, $progress-bar-style1-color, $progress-bar-style1-bg-color);
|
||||||
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
@include make-progress-bar-variant($progress-class-name, $progress-bar-style2-name, $progress-bar-style2-color, $progress-bar-style2-bg-color);
|
||||||
//====================================================================
|
//====================================================================
|
||||||
|
// Variable definitions for the Spinner module (spinner.scss)
|
||||||
|
//====================================================================
|
||||||
|
// Spinner class names.
|
||||||
|
$spinner-dotted-name: spinner-dots; // Name for the dotted spinner class
|
||||||
|
$spinner-round-name: spinner-round; // Name for the round spinner class
|
||||||
|
// Spinner colors.
|
||||||
|
$spinner-round-doughnout: 0.4em solid rgba(245,245,245, 0.2); // Style for the round spinner doughnut
|
||||||
|
$spinner-round-spin: 0.4em solid #f5f5f5; // Style for the round spinner spinning part
|
||||||
|
// Enable progress (spinner.scss). (Use individual mixins below to use.)
|
||||||
|
@import '../scss/mini-extra/spinner';
|
||||||
|
// Use spinner mixins to create spinners with given specs. For more
|
||||||
|
// information refer to the spinner.scss file to check the definitions.
|
||||||
|
@include make-spinner-dots($spinner-dotted-name, 1.5em, 1.5s);
|
||||||
|
@include make-spinner-round($spinner-round-name, 1.5em, $spinner-round-doughnout, $spinner-round-spin, 1.5s);
|
||||||
|
//====================================================================
|
||||||
// Variable definitions for the Carousel module (_carousel.scss)
|
// Variable definitions for the Carousel module (_carousel.scss)
|
||||||
//====================================================================
|
//====================================================================
|
||||||
// Carousel class names.
|
// Carousel class names.
|
||||||
|
|
|
||||||
56
scss/mini-extra/_spinner.scss
Normal file
56
scss/mini-extra/_spinner.scss
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
/*
|
||||||
|
Mixin for dotted spinner component.
|
||||||
|
Parameters:
|
||||||
|
- $spinner-dots-name : The class name of the dotted spinner component.
|
||||||
|
- $spinner-dots-height : The height of the dotted spinner component. [1][2]
|
||||||
|
- $spinner-dots-animation-time : The animation time of the dotted spinner component.
|
||||||
|
Notes:
|
||||||
|
- [1] : The value of $spinner-dots-height can be specified in `em`, `px` etc. but it is
|
||||||
|
suggested that you specify it in the same measurement as the text base.
|
||||||
|
- [2] : The value of $spinner-dots-height will be used for both the size of the component
|
||||||
|
and the animation. Some tweaking might be required.
|
||||||
|
*/
|
||||||
|
@mixin make-spinner-dots($spinner-dots-name, $spinner-dots-height, $spinner-dots-animation-time){
|
||||||
|
.#{$spinner-dots-name}{
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
height: $spinner-dots-height;
|
||||||
|
vertical-align: bottom;
|
||||||
|
&:after{
|
||||||
|
display: inline-table;
|
||||||
|
white-space: pre;
|
||||||
|
content: "\A.\A..\A...";
|
||||||
|
animation: spin-dots $spinner-dots-animation-time steps(4) infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spin-dots { to {transform: translateY(-$spinner-dots-height*4);} }
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Mixin for dotted spinner component.
|
||||||
|
Parameters:
|
||||||
|
- $spinner-round-name : The class name of the round spinner component.
|
||||||
|
- $spinner-round-size : The size of the round spinner component. [1]
|
||||||
|
- $spinner-round-doughnut-style : The doughnut style of the round spinner component. [2]
|
||||||
|
- $spinner-round-spin-style : The spinning part style of the round spinner component. [2]
|
||||||
|
- $spinner-round-animation-time : The animation time of the round spinner component.
|
||||||
|
Notes:
|
||||||
|
- [1] : The value of $spinner-round-size affects both height and width of the component.
|
||||||
|
- [2] : The values of $spinner-round-doughnut-style and $spinner-round-spin-style are styles
|
||||||
|
specified in border style format.
|
||||||
|
*/
|
||||||
|
@mixin make-spinner-round( $spinner-round-name, $spinner-round-size, $spinner-round-doughnut-style,
|
||||||
|
$spinner-round-spin-style, $spinner-round-animation-time ){
|
||||||
|
.#{$spinner-round-name}{
|
||||||
|
display: inline-block;
|
||||||
|
border: $spinner-round-doughnut-style;
|
||||||
|
border-left: $spinner-round-spin-style;
|
||||||
|
transform: translateZ(0);
|
||||||
|
animation: spin-round $spinner-round-animation-time infinite linear;
|
||||||
|
&,&:after{
|
||||||
|
border-radius: 50%;
|
||||||
|
width: $spinner-round-size;
|
||||||
|
height: $spinner-round-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@keyframes spin-round { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue