Adding support for spin.js 2.0.1

hakimel · Jun 5, 2014 · 2841c1f · 2841c1f
1 parent ec575ed
commit 2841c1f
Show file tree

Hide file tree

Showing 9 changed files with 57 additions and 57 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 .DS_Store
-node_modules
+node_modules
+bower_components
diff --git a/bower.json b/bower.json
@@ -1,16 +1,11 @@
 {
   "name": "ladda",
   "version": "0.9.3",
-  "main": ["./dist/ladda.min.js","./dist/ladda.min.css"],
+  "main": [
+    "./dist/ladda.min.js",
+    "./dist/ladda.min.css"
+  ],
   "dependencies": {
-    "spin.js": "1.3.x"
-  },
-  "devDependencies": {
-    "grunt-contrib-jshint": "~0.2.0",
-    "grunt-contrib-uglify": "~0.1.1",
-    "grunt-contrib-watch": "~0.2.0",
-    "grunt-contrib-sass": "~0.2.2",
-    "grunt-contrib-connect": "~0.2.0",
-    "grunt": "~0.4.0"
+    "spin.js": "~2.0.1"
   }
 }
diff --git a/css/ladda.scss b/css/ladda.scss
@@ -12,6 +12,7 @@
  */
 
 $spinnerSize: 32px;
+//$spinnerSize: 6px;
 
 
 /*************************************
@@ -70,7 +71,7 @@ $spinnerSize: 32px;
 	width: $spinnerSize;
 	height: $spinnerSize;
 	top: 50%;
-	margin-top: -$spinnerSize/2;
+	margin-top: 0;
 	opacity: 0;
 	pointer-events: none;
 }
@@ -127,12 +128,13 @@ $spinnerSize: 32px;
 
 .ladda-button[data-style=expand-right] {
 	.ladda-spinner {
-		right: 14px;
+		//right: 14px;
+		right: $spinnerSize/-2 + 10;
 	}
 
 	&[data-size="s"] .ladda-spinner,
 	&[data-size="xs"] .ladda-spinner {
-		right: 4px;
+		right: $spinnerSize/-2 + 4;
 	}
 
 	&[data-loading] {
@@ -156,7 +158,7 @@ $spinnerSize: 32px;
 
 .ladda-button[data-style=expand-left] {
 	.ladda-spinner {
-		left: 14px;
+		left: $spinnerSize/2 + 10;
 	}
 
 	&[data-size="s"] .ladda-spinner,
@@ -189,15 +191,15 @@ $spinnerSize: 32px;
 	.ladda-spinner {
 		top: -$spinnerSize;
 		left: 50%;
-		margin-left: -$spinnerSize/2;
+		margin-left: 0;
 	}
 
 	&[data-loading] {
 		padding-top: 54px;
 
 		.ladda-spinner {
 			opacity: 1;
-			top: 14px;
+			top: ($spinnerSize/ 2) + 10;
 			margin-top: 0;
 		}
 
@@ -223,7 +225,7 @@ $spinnerSize: 32px;
  	.ladda-spinner {
  		top: 62px;
  		left: 50%;
- 		margin-left: -$spinnerSize/2;
+ 		margin-left: 0;
  	}
 
  	&[data-size="s"] .ladda-spinner,
@@ -257,7 +259,7 @@ $spinnerSize: 32px;
 	}
 	.ladda-spinner {
 		left: 100%;
-		margin-left: -$spinnerSize/2;
+		margin-left: 0;
 	}
 
 	&[data-loading] {
@@ -268,6 +270,7 @@ $spinnerSize: 32px;
 		.ladda-spinner {
 			opacity: 1;
 			left: 50%;
+			//margin-left: 0
 		}
 	}
 }
@@ -284,7 +287,8 @@ $spinnerSize: 32px;
 	}
 	.ladda-spinner {
 		right: 100%;
-		margin-left: -$spinnerSize/2;
+		margin-left: 0;
+		left: $spinnerSize/2
 	}
 
 	&[data-loading] {
@@ -311,7 +315,7 @@ $spinnerSize: 32px;
 	}
 	.ladda-spinner {
 		left: 50%;
-		margin-left: -$spinnerSize/2;
+		margin-left: 0;
 		margin-top: 1em;
 	}
 
@@ -322,7 +326,7 @@ $spinnerSize: 32px;
 		}
 		.ladda-spinner {
 			opacity: 1;
-			margin-top: -$spinnerSize/2;
+			margin-top: 0;
 		}
 	}
 }
@@ -339,7 +343,7 @@ $spinnerSize: 32px;
 	}
 	.ladda-spinner {
 		left: 50%;
-		margin-left: -$spinnerSize/2;
+		margin-left: 0;
 		margin-top: -2em;
 	}
 
@@ -350,7 +354,7 @@ $spinnerSize: 32px;
 		}
 		.ladda-spinner {
 			opacity: 1;
-			margin-top: -$spinnerSize/2;
+			margin-top: 0;
 		}
 	}
 }
@@ -365,7 +369,7 @@ $spinnerSize: 32px;
 }
 	.ladda-button[data-style=zoom-out] .ladda-spinner {
 		left: 50%;
-		margin-left: -$spinnerSize/2;
+		margin-left: $spinnerSize;
 
 		@include transform( scale( 2.5 ) );
 	}
@@ -381,6 +385,7 @@ $spinnerSize: 32px;
 }
 .ladda-button[data-style=zoom-out][data-loading] .ladda-spinner {
 	opacity: 1;
+	margin-left: 0;
 
 	@include transform( none );
 }
@@ -395,7 +400,7 @@ $spinnerSize: 32px;
 }
 	.ladda-button[data-style=zoom-in] .ladda-spinner {
 		left: 50%;
-		margin-left: -$spinnerSize/2;
+		margin-left: $spinnerSize/-2;
 
 		@include transform( scale( 0.2 ) );
 	}
@@ -411,6 +416,7 @@ $spinnerSize: 32px;
 }
 .ladda-button[data-style=zoom-in][data-loading] .ladda-spinner {
 	opacity: 1;
+	margin-left: 0;
 
 	@include transform( none );
 }
@@ -426,7 +432,7 @@ $spinnerSize: 32px;
 }
 	.ladda-button[data-style=contract] .ladda-spinner {
 		left: 50%;
-		margin-left: -16px;
+		margin-left: 0;
 	}
 
 .ladda-button[data-style=contract][data-loading] {
@@ -454,7 +460,7 @@ $spinnerSize: 32px;
 }
 	.ladda-button[data-style=contract-overlay] .ladda-spinner {
 		left: 50%;
-		margin-left: -16px;
+		margin-left: 0;
 	}
 
 .ladda-button[data-style=contract-overlay][data-loading] {

diff --git a/dist/ladda-themeless.min.css b/dist/ladda-themeless.min.css