YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made loader animation, missing animation mixins.

Browse Source
This commit is contained in:
Dominic Masters
2018-05-08 08:33:13 +10:00
parent 0544c198e8
commit b1d29476c5
3 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
public/styles/objects/_loader.scss
View File

@ -3,15 +3,30 @@
* Styles for the animated loader.
*
* Dependencies:
* styles/settings/animation.scss
* styles/tools/_animation.scss
* styles/tools/_transform.scss
*
* Version:
* 1.0.0 - 2018/05/08
*/
@include t-keyframes(o-loader--spin) {
0% {
@include t-rotate(0deg);
}
100% {
@include t-rotate(360deg);
}
}
.o-loader {
display: block;
width: 32px;
height: 32px;
width: 64px;
height: 64px;
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
@ -19,12 +34,14 @@
@include t-translate(-50%, -50%);
&__image {
animation-name: k-loader;
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
animation-iteration-count: infinite;
animation-duration: 1s;
@include t-animation-name(o-loader--spin);
@include t-animation-iteration-count(infinite);
@include t-animation-timing-function($s-animation--ease-in-out);
@include t-animation-duration(0.75s);
width: 100%;
height: 100%;
> * {
stroke: $s-color--loader;
}

2
public/styles/settings/colors.scss
View File

@ -32,4 +32,4 @@ $s-color--navbar__bar-hover: $s-color--pastel-blue;
$s-color--navbar__bar-active: $s-color--pastel-green;
//loader
$s-color--loader: #CCC;
$s-color--loader: $s-color--swatch-blue;

25
public/styles/tools/_animation.scss
View File

@ -23,17 +23,26 @@
}
}
@mixin t-animation-name($animation_name) {
@include t-prefix-property("animation-name", $animation_name, webkit moz spec);
@mixin t-animation-name($name) {
@include t-prefix-property("animation-name", $name, webkit moz spec);
}
@mixin t-animation-delay($animation_name) {
@include t-prefix-property("animation-delay", $animation_name, webkit moz spec);
@mixin t-animation-delay($delay) {
@include t-prefix-property("animation-delay", $delay, webkit moz spec);
}
@mixin t-animation-duration($animation_name) {
@include t-prefix-property("animation-duration", $animation_name, webkit moz spec);
@mixin t-animation-duration($duration) {
@include t-prefix-property("animation-duration", $duration, webkit moz spec);
}
@mixin t-animation-fill-mode($animation_name) {
@include t-prefix-property("animation-fill-mode", $animation_name, webkit moz spec);
@mixin t-animation-fill-mode($fills) {
@include t-prefix-property("animation-fill-mode", $fills, webkit moz spec);
}
@mixin t-animation-iteration-count($iterations) {
@include t-prefix-property("animation-iteration-count", $iterations, webkit moz spec);
}
@mixin t-animation-timing-function($bezier) {
@include t-prefix-property("animation-timing-function", $bezier, webkit moz spec);
}