styles: remove shadow from fieldSwitch

vue-generators · Aug 9, 2016 · e0ea478 · e0ea478
1 parent 49d122e
commit e0ea478
Showing 1 changed file with 100 additions and 100 deletions.
diff --git a/src/fields/fieldSwitch.vue b/src/fields/fieldSwitch.vue
@@ -36,107 +36,107 @@
 
 <style lang="sass">
 
-$field-switch-width: 120px;
+	$field-switch-width: 120px;
+	$field-switch-height: 30px;
 
-.vue-form-generator .field-switch { 
-	.field-wrap label {
-		position: relative;
-		display: block;
-		vertical-align: top;
-		width: $field-switch-width;
-		height: 30px;
-		padding: 3px;
-		margin: 0 10px 10px 0;
-		background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
-		background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
-		border-radius: 18px;
-		box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
-		cursor: pointer;
-	}
-	input {
-		position: absolute;
-		top: 0;
-		left: 0;
-		opacity: 0;
-	}
-	.label {
-		position: relative;
-		display: block;
-		height: inherit;
-		font-size: 10px;
-		text-transform: uppercase;
-		background: #eceeef;
-		border-radius: inherit;
-		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
-	}
-	.label:before, .label:after {
-		position: absolute;
-		top: 50%;
-		margin-top: -.5em;
-		line-height: 1;
-		-webkit-transition: inherit;
-		-moz-transition: inherit;
-		-o-transition: inherit;
-		transition: inherit;
-	}
-	.label:before {
-		content: attr(data-off);
-		right: 11px;
-		color: #aaaaaa;
-		text-shadow: 0 1px rgba(255, 255, 255, 0.5);
-	}
-	.label:after {
-		content: attr(data-on);
-		left: 11px;
-		color: #FFFFFF;
-		text-shadow: 0 1px rgba(0, 0, 0, 0.2);
-		opacity: 0;
-	}
-	input:checked ~ .label {
-		background: #E1B42B;
-		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
-	}
-	input:checked ~ .label:before {
-		opacity: 0;
-	}
-	input:checked ~ .label:after {
-		opacity: 1;
-	}
+	.vue-form-generator .field-switch { 
 
-	.handle {
-		position: absolute;
-		top: 4px;
-		left: 4px;
-		width: 28px;
-		height: 28px;
-		background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
-		background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
-		border-radius: 100%;
-		box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
-	}
-	.handle:before {
-		content: "";
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		margin: -6px 0 0 -6px;
-		width: 12px;
-		height: 12px;
-		background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
-		background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
-		border-radius: 6px;
-		box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
-	}
-	input:checked ~ .handle {
-		left: $field-switch-width - 32px;
-		left: calc(100% - 32px);
-		box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
-	}
-	 
-	/* Transition
-	========================== */
-	.label, .handle {
-		transition: all 0.3s ease;
+		.field-wrap label {
+			position: relative;
+			display: block;
+			vertical-align: top;
+			width: $field-switch-width;
+			height: $field-switch-height;
+			padding: 0;
+			margin: 0 10px 10px 0;
+			border-radius: $field-switch-height / 2;
+			box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+			cursor: pointer;
+		}
+		input {
+			position: absolute;
+			top: 0;
+			left: 0;
+			opacity: 0;
+		}
+		.label {
+			position: relative;
+			display: block;
+			height: inherit;
+			font-size: 10px;
+			text-transform: uppercase;
+			background: #eceeef;
+			border-radius: inherit;
+			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
+		}
+		.label:before, .label:after {
+			position: absolute;
+			top: 50%;
+			margin-top: -.5em;
+			line-height: 1;
+			-webkit-transition: inherit;
+			-moz-transition: inherit;
+			-o-transition: inherit;
+			transition: inherit;
+		}
+		.label:before {
+			content: attr(data-off);
+			right: 11px;
+			color: #aaaaaa;
+			text-shadow: 0 1px rgba(255, 255, 255, 0.5);
+		}
+		.label:after {
+			content: attr(data-on);
+			left: 11px;
+			color: #FFFFFF;
+			text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+			opacity: 0;
+		}
+		input:checked ~ .label {
+			background: #E1B42B;
+			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
+		}
+		input:checked ~ .label:before {
+			opacity: 0;
+		}
+		input:checked ~ .label:after {
+			opacity: 1;
+		}
+
+		.handle {
+			position: absolute;
+			top: 1px;
+			left: 1px;
+			width: $field-switch-height - 2px;
+			height: $field-switch-height - 2px;
+			background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
+			background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
+			border-radius: 100%;
+			box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
+		}
+		.handle:before {
+			content: "";
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			margin: -6px 0 0 -6px;
+			width: 12px;
+			height: 12px;
+			background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
+			background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
+			border-radius: 6px;
+			box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
+		}
+		input:checked ~ .handle {
+			left: $field-switch-width - ($field-switch-height - 1px);
+			left: calc(100% - ($field-switch-height - 1px));
+			box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
+		}
+		 
+		/* Transition
+		========================== */
+		.label, .handle {
+			transition: all 0.3s ease;
+		}
 	}
-}
 </style>