Skip to content

Commit 1c80fca

Browse files
mpalourdiompalourdio
committed
SASS all the thiinnnnngssss
1 parent 780d3ee commit 1c80fca

19 files changed

+199
-177
lines changed

‎src/lib/components/_variables.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
$spinkit-spinner-margin: auto !default;
2+
$spinkit-size: 40px !default;
3+
$spinkit-top: 50% !default;
4+
$spinkit-position: relative !default;
5+
6+
$spinner-background-color: #f1f1f1 !default;
7+
$spinner-opacity: .7 !default;
8+
$colored-background-color: #333 !default;

‎src/lib/components/ng-http-loader.component.scss‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
$spinner-background-color: #f1f1f1;
2-
$spinner-opacity: .7;
3-
$colored-background-color: #333;
1+
@import "variables";
42

53
#spinner {
64
top: 0;

src/lib/components/sk-chasing-dots/sk-chasing-dots.component.css renamed to src/lib/components/sk-chasing-dots/sk-chasing-dots.component.scss

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,31 +18,34 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
1818
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
*/
21+
@import "../variables";
2122

2223
.sk-chasing-dots {
23-
top: 50%;
24-
margin: auto;
25-
width: 40px;
26-
height: 40px;
27-
position: relative;
24+
$animationDuration: 2.0s;
25+
26+
top: $spinkit-top;
27+
margin: $spinkit-spinner-margin;
28+
width: $spinkit-size;
29+
height: $spinkit-size;
30+
position: $spinkit-position;
2831
text-align: center;
29-
animation: sk-chasingDotsRotate 2s infinite linear;
30-
}
32+
animation: sk-chasingDotsRotate $animationDuration infinite linear;
3133

32-
.sk-chasing-dots .sk-child {
33-
width: 60%;
34-
height: 60%;
35-
display: inline-block;
36-
position: absolute;
37-
top: 0;
38-
border-radius: 100%;
39-
animation: sk-chasingDotsBounce 2s infinite ease-in-out;
40-
}
34+
.sk-child {
35+
width: 60%;
36+
height: 60%;
37+
display: inline-block;
38+
position: absolute;
39+
top: 0;
40+
border-radius: 100%;
41+
animation: sk-chasingDotsBounce $animationDuration infinite ease-in-out;
42+
}
4143

42-
.sk-chasing-dots .sk-dot2 {
43-
top: auto;
44-
bottom: 0;
45-
animation-delay: -1s;
44+
.sk-dot2 {
45+
top: auto;
46+
bottom: 0;
47+
animation-delay: - $animationDuration/2;
48+
}
4649
}
4750

4851
@keyframes sk-chasingDotsRotate {

‎src/lib/components/sk-chasing-dots/sk-chasing-dots.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
1313
@Component({
1414
selector: 'sk-chasing-dots',
1515
templateUrl: './sk-chasing-dots.component.html',
16-
styleUrls: ['./sk-chasing-dots.component.css']
16+
styleUrls: ['./sk-chasing-dots.component.scss']
1717
})
1818
export class SkChasingDotsComponent extends AbstractLoader {
1919
}

src/lib/components/sk-cube-grid/sk-cube-grid.component.css renamed to src/lib/components/sk-cube-grid/sk-cube-grid.component.scss

Lines changed: 42 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -18,63 +18,58 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
1818
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
*/
21+
@import "../variables";
2122

2223
.sk-cube-grid {
23-
position: relative;
24-
top: 50%;
25-
width: 40px;
26-
height: 40px;
27-
margin: auto;
28-
}
29-
30-
.sk-cube-grid .sk-cube {
31-
width: 33%;
32-
height: 33%;
33-
float: left;
34-
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
35-
}
36-
37-
.sk-cube-grid .sk-cube1 {
38-
animation-delay: 0.2s;
39-
}
40-
41-
.sk-cube-grid .sk-cube2 {
42-
animation-delay: 0.3s;
43-
}
24+
$delayRange: 0.4s;
4425

45-
.sk-cube-grid .sk-cube3 {
46-
animation-delay: 0.4s;
47-
}
48-
49-
.sk-cube-grid .sk-cube4 {
50-
animation-delay: 0.1s;
51-
}
52-
53-
.sk-cube-grid .sk-cube5 {
54-
animation-delay: 0.2s;
55-
}
56-
57-
.sk-cube-grid .sk-cube6 {
58-
animation-delay: 0.3s;
59-
}
26+
position: $spinkit-position;
27+
top: $spinkit-top;
28+
width: $spinkit-size;
29+
height: $spinkit-size;
30+
margin: $spinkit-spinner-margin;
6031

61-
.sk-cube-grid .sk-cube7 {
62-
animation-delay: 0s;
63-
}
64-
65-
.sk-cube-grid .sk-cube8 {
66-
animation-delay: 0.1s;
67-
}
32+
.sk-cube {
33+
width: 33.33%;
34+
height: 33.33%;
35+
float: left;
36+
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
37+
}
6838

69-
.sk-cube-grid .sk-cube9 {
70-
animation-delay: 0.2s;
39+
.sk-cube1 {
40+
animation-delay: $delayRange * 0.50
41+
}
42+
.sk-cube2 {
43+
animation-delay: $delayRange * 0.75
44+
}
45+
.sk-cube3 {
46+
animation-delay: $delayRange
47+
}
48+
.sk-cube4 {
49+
animation-delay: $delayRange * 0.25
50+
}
51+
.sk-cube5 {
52+
animation-delay: $delayRange * 0.50
53+
}
54+
.sk-cube6 {
55+
animation-delay: $delayRange * 0.75
56+
}
57+
.sk-cube7 {
58+
animation-delay: 0.0s
59+
}
60+
.sk-cube8 {
61+
animation-delay: $delayRange * 0.25
62+
}
63+
.sk-cube9 {
64+
animation-delay: $delayRange * 0.50
65+
}
7166
}
7267

7368
@keyframes sk-cubeGridScaleDelay {
7469
0%, 70%, 100% {
75-
transform: scale3D(1, 1, 1);
70+
transform: scale3D(1.0, 1.0, 1.0)
7671
}
7772
35% {
78-
transform: scale3D(0, 0, 1);
73+
transform: scale3D(0.0, 0.0, 1.0)
7974
}
8075
}

‎src/lib/components/sk-cube-grid/sk-cube-grid.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
1313
@Component({
1414
selector: 'sk-cube-grid',
1515
templateUrl: './sk-cube-grid.component.html',
16-
styleUrls: ['./sk-cube-grid.component.css']
16+
styleUrls: ['./sk-cube-grid.component.scss']
1717
})
1818
export class SkCubeGridComponent extends AbstractLoader {
1919
}

‎src/lib/components/sk-double-bounce/sk-double-bounce.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,6 @@
2020
-->
2121

2222
<div class="sk-double-bounce" [class.colored]="!backgroundColor">
23-
<div class="double-bounce1" [style.background-color]='backgroundColor'></div>
24-
<div class="double-bounce2" [style.background-color]='backgroundColor'></div>
23+
<div class="sk-child sk-double-bounce1" [style.background-color]='backgroundColor'></div>
24+
<div class="sk-child sk-double-bounce2" [style.background-color]='backgroundColor'></div>
2525
</div>

src/lib/components/sk-double-bounce/sk-double-bounce.component.css renamed to src/lib/components/sk-double-bounce/sk-double-bounce.component.scss

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,35 +18,52 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
1818
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
*/
21+
@import "../variables";
2122

2223
.sk-double-bounce {
23-
top: 50%;
24-
width: 40px;
25-
height: 40px;
26-
position: relative;
27-
margin: auto;
24+
top: $spinkit-top;
25+
width: $spinkit-size;
26+
height: $spinkit-size;
27+
position: $spinkit-position;
28+
margin: $spinkit-spinner-margin;
2829
}
2930

30-
.double-bounce1, .double-bounce2 {
31+
.sk-double-bounce .sk-child {
3132
width: 100%;
3233
height: 100%;
3334
border-radius: 50%;
35+
background-color: #333;
3436
opacity: 0.6;
3537
position: absolute;
3638
top: 0;
3739
left: 0;
38-
animation: sk-bounce 2.0s infinite ease-in-out;
40+
-webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
41+
animation: sk-doubleBounce 2s infinite ease-in-out;
3942
}
4043

41-
.double-bounce2 {
44+
.sk-double-bounce .sk-double-bounce2 {
45+
-webkit-animation-delay: -1.0s;
4246
animation-delay: -1.0s;
4347
}
4448

45-
@keyframes sk-bounce {
49+
@-webkit-keyframes sk-doubleBounce {
4650
0%, 100% {
47-
transform: scale(0.0);
51+
-webkit-transform: scale(0);
52+
transform: scale(0);
4853
}
4954
50% {
50-
transform: scale(1.0);
55+
-webkit-transform: scale(1);
56+
transform: scale(1);
57+
}
58+
}
59+
60+
@keyframes sk-doubleBounce {
61+
0%, 100% {
62+
-webkit-transform: scale(0);
63+
transform: scale(0);
64+
}
65+
50% {
66+
-webkit-transform: scale(1);
67+
transform: scale(1);
5168
}
5269
}

‎src/lib/components/sk-double-bounce/sk-double-bounce.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
1313
@Component({
1414
selector: 'sk-double-bounce',
1515
templateUrl: './sk-double-bounce.component.html',
16-
styleUrls: ['./sk-double-bounce.component.css']
16+
styleUrls: ['./sk-double-bounce.component.scss']
1717
})
1818
export class SkDoubleBounceComponent extends AbstractLoader {
1919
}

src/lib/components/sk-rotating-plane/sk-rotating-plane.component.css renamed to src/lib/components/sk-rotating-plane/sk-rotating-plane.component.scss

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,17 +18,18 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
1818
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
1919
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
2020
*/
21+
@import "../variables";
2122

2223
.sk-rotating-plane {
23-
position: relative;
24-
top: 50%;
25-
width: 40px;
26-
height: 40px;
27-
margin: auto;
28-
animation: sk-rotateplane 1.2s infinite ease-in-out;
24+
position: $spinkit-position;
25+
top: $spinkit-top;
26+
width: $spinkit-size;
27+
height: $spinkit-size;
28+
margin: $spinkit-spinner-margin;
29+
animation: sk-rotatePlane 1.2s infinite ease-in-out;
2930
}
3031

31-
@keyframes sk-rotateplane {
32+
@keyframes sk-rotatePlane {
3233
0% {
3334
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
3435
}

0 commit comments

Comments
 (0)