fix(style): remove end padding from text inputs

mozilla · Nov 14, 2014 · 07dacd9 · 07dacd9
1 parent 6b2341e
commit 07dacd9
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 36 deletions.
diff --git a/app/styles/_general.scss b/app/styles/_general.scss
@@ -119,7 +119,7 @@ header {
   h1,
   h2,
   h3 {
-    @include header-font();
+    @include headerFont();
     line-height: 1em;
     margin: 0;
   }
@@ -143,7 +143,6 @@ header {
   }
 }
 
-
 #legal-header {
   h2 {
     margin: 0 0 30px 0;
@@ -156,8 +155,6 @@ header {
   }
 }
 
-
-
 #legal-footer {
   bottom: 0;
   margin: 10px 0;
@@ -321,6 +318,24 @@ html[dir='rtl'] .tooltip-below::before,
   top: -7px;
 }
 
+html[dir='ltr'] {
+  input[type='email'],
+  input[type='text'],
+  input[type='password'] {
+      @include formElement();
+      padding: 0 0 0 $input-left-right-padding;
+  }
+}
+
+html[dir='rtl'] {
+  input[type='email'],
+  input[type='text'],
+  input[type='password'] {
+      @include formElement();
+      padding: 0  $input-left-right-padding 0 0;
+  }
+}
+
 .input-row {
   margin-bottom: 15px;
   position: relative;
@@ -340,26 +355,13 @@ html[dir='rtl'] .tooltip-below::before,
     @include font();
   }
 
-  input[type='text'],
   input[type='email'],
-  input[type='password'],
+  input[type='text'] {
+  }
+
   select {
-    // kills inset shadow on iOS browsers
-    -webkit-appearance: none;
-    background-color: $mobile-html-background-color;
-    border: 1px solid $input-row-border-color;
-    border-radius: $big-border-radius;
-    box-shadow: inset 0 1px 1px $input-row-box-shadow-color;
-    color: $input-text-color;
-    font-size: $medium-font;
-    height: 45px;
-    outline: none;
+    @include formElement();
     padding: 0 $input-left-right-padding;
-    position: relative;
-    transition-duration: $short-transition;
-    transition-property: border-color;
-    width: 100%;
-    z-index: 2;
   }
 
   input::-webkit-input-placeholder,
@@ -624,7 +626,6 @@ button::-moz-focus-inner {
   width: 45%;
 }
 
-
 .description {
   font-size: $medium-font;
 }
@@ -666,9 +667,6 @@ ul.links {
   }
 }
 
-
-
-
 .privacy-links,
 .privacy-links a {
   color: $input-placeholder-color;
@@ -698,8 +696,8 @@ ul.links {
    * The password class is used instead of type because the field's type can
    * change from password to text.
    */
-  input[type='password'],
-  input[type='text'] {
+  input[type='password'].password,
+  input[type='text'].password {
     padding-right: 75px;
   }
 

diff --git a/app/styles/_media_queries.scss b/app/styles/_media_queries.scss
@@ -49,14 +49,16 @@ only screen and (orientation:landscape) and (min-width:481px) and (max-height:48
     margin: 5px 0;
     text-align: center;
   }
-
-  .input-row input[type='text'],
-  .input-row input[type='email'],
-  .input-row input[type='password'],
-  .input-row select {
-    border-radius: $small-border-radius;
-    font-size: $base-font + $media-adjustment;
-    height: 40px;
+  html[dir='ltr'],
+  html[dir='rtl'] {
+    .input-row input[type='text'],
+    .input-row input[type='email'],
+    .input-row input[type='password'],
+    .input-row select {
+      border-radius: $small-border-radius;
+      font-size: $base-font + $media-adjustment;
+      height: 40px;
+    }
   }
 
   .select-row {

diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
@@ -51,6 +51,24 @@ $avatar-size: 240px;
   font-family: $default-font;
 }
 
-@mixin header-font() {
+@mixin headerFont() {
   font-family: $header-font;
 }
+
+@mixin formElement() {
+  // kills inset shadow on iOS browsers
+  -webkit-appearance: none;
+  background-color: $mobile-html-background-color;
+  border: 1px solid $input-row-border-color;
+  border-radius: $big-border-radius;
+  box-shadow: inset 0 1px 1px $input-row-box-shadow-color;
+  color: $input-text-color;
+  font-size: $medium-font;
+  height: 45px;
+  outline: none;
+  position: relative;
+  transition-duration: $short-transition;
+  transition-property: border-color;
+  width: 100%;
+  z-index: 2;
+}