Fixed styling issues in address forms

songzxDev · Mar 17, 2018 · f9ca370 · f9ca370
1 parent fba1b2e
commit f9ca370
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 33 deletions.
diff --git a/shop/static/shop/css/_django-angular.scss b/shop/static/shop/css/_django-angular.scss
@@ -16,39 +16,17 @@
 }
 
 form {
-	.ng-invalid-bound.ng-pristine, .ng-invalid.ng-dirty {
+	.ng-invalid-bound.ng-pristine, .ng-invalid.ng-dirty, &.ng-submitted .ng-invalid {
 		border-color: #e9322d;
 	}
 	.ng-invalid-bound.ng-pristine:focus, .ng-invalid.ng-dirty:focus {
 		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
 	}
-}
-
-shop-auth-form {
-	.ng-invalid.ng-touched {
-		border-color: #e9322d;
+	label.djng-field-required::after {
+		content: "\00a0*";
 	}
-}
-
-.shop-form-error {
-	position: absolute;
-	list-style: none;
-	top: 0;
-	right: 5px;
-	li {
-		color: #e9322d;
-		font-weight: bold;
-		white-space: nowrap;
-		padding-left: 8px;
-		padding-right: 4px;
-		border: 1px dotted #e9322d;
-		border-radius: 3px;
-		background: #f2dede;
-		opacity: 0.85;
-		&::before {
-			content: "\2716";
-			margin-right: 10px;
-		}
+	.has-feedback .form-control {
+		padding-right: 12px;
 	}
 }
 
@@ -80,18 +58,20 @@ ul.djng-form-errors, ul.djng-field-errors {
 	}
 }
 
-label.djng-field-required::after {
-	content: "\00a0*";
-}
-
 ul.djng-field-errors {
 	position: absolute;
-	li.invalid:before {
+	li.invalid::before {
 		content: "\2716";
 		margin-right: 10px;
 	}
-	li.valid:before {
+	li.valid::before {
 		color: #00c900;
 		content: "\2714";
 	}
 }
+
+button.btn > i {
+	width: 1.5em;
+	display: inline-block;
+	text-align: center;
+}
diff --git a/shop/static/shop/css/_django-shop.scss b/shop/static/shop/css/_django-shop.scss
@@ -39,3 +39,31 @@ table tr {
 		list-style: none;
 	}
 }
+
+shop-auth-form {
+	.ng-invalid.ng-touched {
+		border-color: #e9322d;
+	}
+}
+
+.shop-form-error {
+	position: absolute;
+	list-style: none;
+	top: 0;
+	right: 5px;
+	li {
+		color: #e9322d;
+		font-weight: bold;
+		white-space: nowrap;
+		padding-left: 8px;
+		padding-right: 4px;
+		border: 1px dotted #e9322d;
+		border-radius: 3px;
+		background: #f2dede;
+		opacity: 0.85;
+		&::before {
+			content: "\2716";
+			margin-right: 10px;
+		}
+	}
+}
diff --git a/shop/templates/shop/checkout/billing-address-form.html b/shop/templates/shop/checkout/billing-address-form.html
@@ -35,7 +35,9 @@
 			</select>
 		</div>
 	{% endif %}
+	{% spaceless %}
 		{{ billing_address_form.as_div }}
+	{% endspaceless %}
 	{% if billing_address_form.multi_addr %}
 		<div class="form-group" ng-show="billing_address.siblings_summary.length>1 || billing_address.siblings_summary.length>0 && billing_address.active_priority=='add'">
 			<button class="btn btn-danger btn-xs" ng-click="deleteSiblingAddress()">

diff --git a/shop/templates/shop/checkout/shipping-address-form.html b/shop/templates/shop/checkout/shipping-address-form.html
@@ -36,7 +36,9 @@
 			</select>
 		</div>
 	{% endif %}
+	{% spaceless %}
 		{{ shipping_address_form.as_div }}
+	{% endspaceless %}
 	{% if shipping_address_form.multi_addr %}
 		<div class="form-group" ng-show="shipping_address.siblings_summary.length>1 || shipping_address.siblings_summary.length>0 && shipping_address.active_priority=='add'">
 			<button class="btn btn-danger btn-xs" ng-click="deleteSiblingAddress()">