SASS all the thiinnnnngssss

mpalourdio · Oct 13, 2018 · 1c80fca · 1c80fca
1 parent 780d3ee
commit 1c80fca
Show file tree

Hide file tree

Showing 19 changed files with 199 additions and 177 deletions.
diff --git a/src/lib/components/_variables.scss b/src/lib/components/_variables.scss
@@ -0,0 +1,8 @@
+$spinkit-spinner-margin: auto !default;
+$spinkit-size: 40px !default;
+$spinkit-top: 50% !default;
+$spinkit-position: relative !default;
+
+$spinner-background-color: #f1f1f1 !default;
+$spinner-opacity: .7 !default;
+$colored-background-color: #333 !default;
diff --git a/src/lib/components/ng-http-loader.component.scss b/src/lib/components/ng-http-loader.component.scss
@@ -1,6 +1,4 @@
-$spinner-background-color: #f1f1f1;
-$spinner-opacity: .7;
-$colored-background-color: #333;
+@import "variables";
 
 #spinner {
     top: 0;

diff --git a/...hasing-dots/sk-chasing-dots.component.css → ...asing-dots/sk-chasing-dots.component.scss b/...hasing-dots/sk-chasing-dots.component.css → ...asing-dots/sk-chasing-dots.component.scss
@@ -18,31 +18,34 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+@import "../variables";
 
 .sk-chasing-dots {
-    top: 50%;
-    margin: auto;
-    width: 40px;
-    height: 40px;
-    position: relative;
+    $animationDuration: 2.0s;
+
+    top: $spinkit-top;
+    margin: $spinkit-spinner-margin;
+    width: $spinkit-size;
+    height: $spinkit-size;
+    position: $spinkit-position;
     text-align: center;
-    animation: sk-chasingDotsRotate 2s infinite linear;
-}
+    animation: sk-chasingDotsRotate $animationDuration infinite linear;
 
-.sk-chasing-dots .sk-child {
-    width: 60%;
-    height: 60%;
-    display: inline-block;
-    position: absolute;
-    top: 0;
-    border-radius: 100%;
-    animation: sk-chasingDotsBounce 2s infinite ease-in-out;
-}
+    .sk-child {
+        width: 60%;
+        height: 60%;
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        border-radius: 100%;
+        animation: sk-chasingDotsBounce $animationDuration infinite ease-in-out;
+    }
 
-.sk-chasing-dots .sk-dot2 {
-    top: auto;
-    bottom: 0;
-    animation-delay: -1s;
+    .sk-dot2 {
+        top: auto;
+        bottom: 0;
+        animation-delay: - $animationDuration/2;
+    }
 }
 
 @keyframes sk-chasingDotsRotate {

diff --git a/src/lib/components/sk-chasing-dots/sk-chasing-dots.component.ts b/src/lib/components/sk-chasing-dots/sk-chasing-dots.component.ts
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
 @Component({
     selector: 'sk-chasing-dots',
     templateUrl: './sk-chasing-dots.component.html',
-    styleUrls: ['./sk-chasing-dots.component.css']
+    styleUrls: ['./sk-chasing-dots.component.scss']
 })
 export class SkChasingDotsComponent extends AbstractLoader {
 }
diff --git a/...s/sk-cube-grid/sk-cube-grid.component.css → .../sk-cube-grid/sk-cube-grid.component.scss b/...s/sk-cube-grid/sk-cube-grid.component.css → .../sk-cube-grid/sk-cube-grid.component.scss
@@ -18,63 +18,58 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+@import "../variables";
 
 .sk-cube-grid {
-    position: relative;
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    margin: auto;
-}
-
-.sk-cube-grid .sk-cube {
-    width: 33%;
-    height: 33%;
-    float: left;
-    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
-}
-
-.sk-cube-grid .sk-cube1 {
-    animation-delay: 0.2s;
-}
-
-.sk-cube-grid .sk-cube2 {
-    animation-delay: 0.3s;
-}
+    $delayRange: 0.4s;
 
-.sk-cube-grid .sk-cube3 {
-    animation-delay: 0.4s;
-}
-
-.sk-cube-grid .sk-cube4 {
-    animation-delay: 0.1s;
-}
-
-.sk-cube-grid .sk-cube5 {
-    animation-delay: 0.2s;
-}
-
-.sk-cube-grid .sk-cube6 {
-    animation-delay: 0.3s;
-}
+    position: $spinkit-position;
+    top: $spinkit-top;
+    width: $spinkit-size;
+    height: $spinkit-size;
+    margin: $spinkit-spinner-margin;
 
-.sk-cube-grid .sk-cube7 {
-    animation-delay: 0s;
-}
-
-.sk-cube-grid .sk-cube8 {
-    animation-delay: 0.1s;
-}
+    .sk-cube {
+        width: 33.33%;
+        height: 33.33%;
+        float: left;
+        animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
+    }
 
-.sk-cube-grid .sk-cube9 {
-    animation-delay: 0.2s;
+    .sk-cube1 {
+        animation-delay: $delayRange * 0.50
+    }
+    .sk-cube2 {
+        animation-delay: $delayRange * 0.75
+    }
+    .sk-cube3 {
+        animation-delay: $delayRange
+    }
+    .sk-cube4 {
+        animation-delay: $delayRange * 0.25
+    }
+    .sk-cube5 {
+        animation-delay: $delayRange * 0.50
+    }
+    .sk-cube6 {
+        animation-delay: $delayRange * 0.75
+    }
+    .sk-cube7 {
+        animation-delay: 0.0s
+    }
+    .sk-cube8 {
+        animation-delay: $delayRange * 0.25
+    }
+    .sk-cube9 {
+        animation-delay: $delayRange * 0.50
+    }
 }
 
 @keyframes sk-cubeGridScaleDelay {
     0%, 70%, 100% {
-        transform: scale3D(1, 1, 1);
+        transform: scale3D(1.0, 1.0, 1.0)
     }
     35% {
-        transform: scale3D(0, 0, 1);
+        transform: scale3D(0.0, 0.0, 1.0)
     }
 }
diff --git a/src/lib/components/sk-cube-grid/sk-cube-grid.component.ts b/src/lib/components/sk-cube-grid/sk-cube-grid.component.ts
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
 @Component({
     selector: 'sk-cube-grid',
     templateUrl: './sk-cube-grid.component.html',
-    styleUrls: ['./sk-cube-grid.component.css']
+    styleUrls: ['./sk-cube-grid.component.scss']
 })
 export class SkCubeGridComponent extends AbstractLoader {
 }
diff --git a/src/lib/components/sk-double-bounce/sk-double-bounce.component.html b/src/lib/components/sk-double-bounce/sk-double-bounce.component.html
@@ -20,6 +20,6 @@
 -->
 
 <div class="sk-double-bounce" [class.colored]="!backgroundColor">
-    <div class="double-bounce1" [style.background-color]='backgroundColor'></div>
-    <div class="double-bounce2" [style.background-color]='backgroundColor'></div>
+    <div class="sk-child sk-double-bounce1" [style.background-color]='backgroundColor'></div>
+    <div class="sk-child sk-double-bounce2" [style.background-color]='backgroundColor'></div>
 </div>
diff --git a/...ble-bounce/sk-double-bounce.component.css → ...le-bounce/sk-double-bounce.component.scss b/...ble-bounce/sk-double-bounce.component.css → ...le-bounce/sk-double-bounce.component.scss
@@ -18,35 +18,52 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+@import "../variables";
 
 .sk-double-bounce {
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    position: relative;
-    margin: auto;
+    top: $spinkit-top;
+    width: $spinkit-size;
+    height: $spinkit-size;
+    position: $spinkit-position;
+    margin: $spinkit-spinner-margin;
 }
 
-.double-bounce1, .double-bounce2 {
+.sk-double-bounce .sk-child {
     width: 100%;
     height: 100%;
     border-radius: 50%;
+    background-color: #333;
     opacity: 0.6;
     position: absolute;
     top: 0;
     left: 0;
-    animation: sk-bounce 2.0s infinite ease-in-out;
+    -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
+    animation: sk-doubleBounce 2s infinite ease-in-out;
 }
 
-.double-bounce2 {
+.sk-double-bounce .sk-double-bounce2 {
+    -webkit-animation-delay: -1.0s;
     animation-delay: -1.0s;
 }
 
-@keyframes sk-bounce {
+@-webkit-keyframes sk-doubleBounce {
     0%, 100% {
-        transform: scale(0.0);
+        -webkit-transform: scale(0);
+        transform: scale(0);
     }
     50% {
-        transform: scale(1.0);
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
+
+@keyframes sk-doubleBounce {
+    0%, 100% {
+        -webkit-transform: scale(0);
+        transform: scale(0);
+    }
+    50% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
     }
 }
diff --git a/src/lib/components/sk-double-bounce/sk-double-bounce.component.ts b/src/lib/components/sk-double-bounce/sk-double-bounce.component.ts
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
 @Component({
     selector: 'sk-double-bounce',
     templateUrl: './sk-double-bounce.component.html',
-    styleUrls: ['./sk-double-bounce.component.css']
+    styleUrls: ['./sk-double-bounce.component.scss']
 })
 export class SkDoubleBounceComponent extends AbstractLoader {
 }
diff --git a/...ing-plane/sk-rotating-plane.component.css → ...ng-plane/sk-rotating-plane.component.scss b/...ing-plane/sk-rotating-plane.component.css → ...ng-plane/sk-rotating-plane.component.scss
@@ -18,17 +18,18 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+@import "../variables";
 
 .sk-rotating-plane {
-    position: relative;
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    margin: auto;
-    animation: sk-rotateplane 1.2s infinite ease-in-out;
+    position: $spinkit-position;
+    top: $spinkit-top;
+    width: $spinkit-size;
+    height: $spinkit-size;
+    margin: $spinkit-spinner-margin;
+    animation: sk-rotatePlane 1.2s infinite ease-in-out;
 }
 
-@keyframes sk-rotateplane {
+@keyframes sk-rotatePlane {
     0% {
         transform: perspective(120px) rotateX(0deg) rotateY(0deg);
     }

diff --git a/src/lib/components/sk-rotating-plane/sk-rotating-plane.component.ts b/src/lib/components/sk-rotating-plane/sk-rotating-plane.component.ts
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
 @Component({
     selector: 'sk-rotating-plane',
     templateUrl: './sk-rotating-plane.component.html',
-    styleUrls: ['./sk-rotating-plane.component.css']
+    styleUrls: ['./sk-rotating-plane.component.scss']
 })
 export class SkRotatingPlaneComponent extends AbstractLoader {
 }
diff --git a/...nner-pulse/sk-spinner-pulse.component.css → ...ner-pulse/sk-spinner-pulse.component.scss b/...nner-pulse/sk-spinner-pulse.component.css → ...ner-pulse/sk-spinner-pulse.component.scss
@@ -18,23 +18,24 @@ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */
+@import "../variables";
 
 .sk-spinner-pulse {
-    position: relative;
-    top: 50%;
-    width: 40px;
-    height: 40px;
-    margin: auto;
+    position: $spinkit-position;
+    top: $spinkit-top;
+    width: $spinkit-size;
+    height: $spinkit-size;
+    margin: $spinkit-spinner-margin;
     border-radius: 100%;
-    animation: sk-pulseScaleOut 1s infinite ease-in-out;
+    animation: sk-pulseScaleOut 1.0s infinite ease-in-out;
 }
 
 @keyframes sk-pulseScaleOut {
     0% {
         transform: scale(0);
     }
     100% {
-        transform: scale(1);
+        transform: scale(1.0);
         opacity: 0;
     }
 }
diff --git a/src/lib/components/sk-spinner-pulse/sk-spinner-pulse.component.ts b/src/lib/components/sk-spinner-pulse/sk-spinner-pulse.component.ts
@@ -13,7 +13,7 @@ import { AbstractLoader } from '../abstract.loader.component';
 @Component({
     selector: 'sk-spinner-pulse',
     templateUrl: './sk-spinner-pulse.component.html',
-    styleUrls: ['./sk-spinner-pulse.component.css']
+    styleUrls: ['./sk-spinner-pulse.component.scss']
 })
 export class SkSpinnerPulseComponent extends AbstractLoader {
 }