Update: (Fixes #447) Forms in ios have shadow on top due to default b…

…rowser styles Update: Firefox input[type="range"] shouldn't have background and border Update: Atlas Form inputs should have `font-size: 1rem` to prevent zoom on focus in mobile
liferay · Jan 24, 2018 · c816472 · c816472
1 parent 949bee5
commit c816472
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/clay/src/scss/atlas/variables/_forms.scss b/packages/clay/src/scss/atlas/variables/_forms.scss
@@ -1,3 +1,5 @@
+$input-font-size-mobile: 1rem !default; // 16px
+
 $input-label-font-size: 0.8125rem !default; // 13px
 $input-label-font-weight: $font-weight-semi-bold !default;
 $input-label-margin-bottom: 0.25rem !default; // 4px

diff --git a/packages/clay/src/scss/components/_forms.scss b/packages/clay/src/scss/components/_forms.scss
@@ -93,6 +93,17 @@ label {
 		}
 	}
 
+	&[type="range"] {
+		background-color: transparent;
+		border-color: transparent;
+	}
+
+	&:not([type="range"]) {
+		@media screen and (-webkit-min-device-pixel-ratio: 0) {
+			-webkit-appearance: none;
+		}
+	}
+
 	&::-ms-clear,
 	&::-ms-reveal {
 		display: none;