Added spinner module

This commit is contained in:
Angelos Chalaris 2016-10-04 13:57:30 +03:00
parent 203100b465
commit 0139657e94
9 changed files with 212 additions and 9 deletions

View file

@ -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.

View file

@ -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!

View file

@ -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:

File diff suppressed because one or more lines are too long

View file

@ -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.

View file

@ -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:

File diff suppressed because one or more lines are too long

View file

@ -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.

View 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);} }
}