diff --git a/app/styles/_general.scss b/app/styles/_general.scss index 2e98b9b574..99ae559a42 100644 --- 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 index 4a675ec795..078c7a529d 100644 --- 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 index 66328482ff..d159c24b28 100644 --- 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; +}