Merge pull request #54 from CastleCSS/feature/select-arrow-issues

Rollback issue #48

Author: dariusrosendahl

sass/component/select.scss

@@ -1,5 +1,3 @@
-// Customselect styling
-
 .select {
 	position: relative;
 	display: inline-block;
@@ -27,7 +25,8 @@
 
 			~ .select-arrow {
 				&:after {
-					transform: rotate(90deg) scaleX(-1);
+					margin-left: -3px;
+					transform: rotate(-90deg);
 				}
 			}
 		}
@@ -49,18 +48,20 @@
 }
 
 .select-arrow {
-	position: absolute; top: 0;  right: 0;
+	position: absolute; top: 50%; right: 0;
 	width: $input-height; height: $input-height;
+	transform: translateY(-50%);
 	transition: $input-transition;
-	line-height: $input-height;
-	text-align: center;
 	pointer-events: none;
 
 	&:after {
 		content: $select-arrow;
+		box-sizing: border-box;
 		display: block;
 		width: $input-height; height: $input-height;
-		transform: rotate(90deg) scaleX(1);
+		line-height: $input-height;
+		text-align: center;
+		transform: rotate(90deg);
 		transform-origin: center;
 	}
 }