editing themes

Author: ahmad-sa3d

css/switcher.css

@@ -236,16 +236,15 @@ background: linear-gradient(#e4e4e4, #f9f9f9);
 /* ------------  THEME iPHONE ------------ */
 .swraper.iphone
 {
-	border-radius: 9999px;
 	-webkit-box-shadow: 0 0 0 1px #999;
 	        box-shadow: 0 0 0 1px #999;
 	border: 1px solid #999;
 }
 
 .swraper.iphone .stoggler
 {
-	-webkit-box-shadow: inset -2px 2px 5px rgba(0, 0, 0, 0.4);
-		box-shadow: inset -2px 2px 5px rgba(0, 0, 0, 0.4);
+	-webkit-box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.4), inset 2px 2px 3px rgba( 0, 0, 0, .2 );
+		box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba( 0, 0, 0, .2 );
 	background: #ECECEC;
 
 	color: #828282;
@@ -268,9 +267,9 @@ background: linear-gradient(#e4e4e4, #f9f9f9);
 	border-radius: 50px;
 	background: -webkit-linear-gradient(#d1d1d1 0%, #fafafa 100%);
 	background: -o-linear-gradient(#d1d1d1 0%, #fafafa 100%);
-	background: linear-gradient(#d1d1d1 0%, #fafafa 100%);
-	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.6);
-	        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #ffffff, 0 0 3px rgba(0, 0, 0, 0.6);
+	background: radial-gradient( circle, #fefefe 0%, #fefefe 20%, #cfcfcf 21%, #cfcfcf 22%, #fefefe 26%, #fefefe 50%, #dedede 51%, #dedede 56%, #fefefe 59% );
+
+	border: 1px solid #999;
 }
 
 .swraper.iphone .stoggler .sblob:hover{}
@@ -323,6 +322,7 @@ background: linear-gradient(#e4e4e4, #f9f9f9);
 
 
 
+
 body{
 	/*background: #444;*/
 	vertical-align: middle;

index.html

@@ -35,7 +35,7 @@
 					// reverse: true,
 					theme: 'iphone',
 					width: 70,
-					blobOffset: 0,
+					blobOffset: 1,
 
 
 				});
@@ -74,6 +74,13 @@
 						theme: 'flat',
 						// blobOffset: 3,
 					});
+
+				$('.test :checkbox').switcher(
+					{
+						theme: 'material',
+						// blobOffset: 3,
+					});
+
 			};
 
 
@@ -129,6 +136,15 @@ <h4>Hoppies</h4>
 					<input type="checkbox" name="drawing" value="1" disabled/>
 				</div>
 
+				<div class="test">
+					<h4>Testing Material</h4>
+				
+					<label >singing </label>
+					<input type="checkbox" name="singing" value="1" checked /><br />
+					<label >drawing </label>
+					<input type="checkbox" name="drawing" value="1"/>
+				</div>
+
 			</section>
 
 

js/switcher.js

@@ -15,7 +15,7 @@
 		$blob: $( '<span>', {'class': 'sblob'} ),
 
 		// Allowed Themes
-		themes: [ 'light', 'modern', 'dark', 'iphone', 'flat' ],
+		themes: [ 'light', 'modern', 'dark', 'iphone', 'flat', 'material' ],
 
 	};