diff options
author | Kai Faust <kai@fullstacklabs.co> | 2016-11-09 06:40:24 -0800 |
---|---|---|
committer | Harrison Healey <harrisonmhealey@gmail.com> | 2016-11-09 09:40:24 -0500 |
commit | 4b3eceee7015af12750e6f73f11bb0969c8d5c41 (patch) | |
tree | 54da8745aa75783dff73cfb91b60c58e0d75a334 /webapp/sass/responsive/_mobile.scss | |
parent | 13dcccc60bba90f0883aae63e72aac896a6f553c (diff) | |
download | chat-4b3eceee7015af12750e6f73f11bb0969c8d5c41.tar.gz chat-4b3eceee7015af12750e6f73f11bb0969c8d5c41.tar.bz2 chat-4b3eceee7015af12750e6f73f11bb0969c8d5c41.zip |
PLT-4602 Fix misaligned close button and fix Android icon rendering bug (#4492)
* PLT-4602 Fix horizontal alignment for .close__button
Reduce negative left margin to fix miscalculated center-positioning.
* PLT-4602 Fix dropdown close icon rendering bug on Android
The combination of using a unicode character and a pseudo element was
too problematic, so I added a new custom icon svg CLOSE_ICON that
renders consistently on all browsers.
* PLT-4602 Use font-family fix, remove <svg>
You were correct @hmhealey, the problem was that the unicode characters
were rendering as different fonts: Open Sans and Helvetica Neue!
Diffstat (limited to 'webapp/sass/responsive/_mobile.scss')
-rw-r--r-- | webapp/sass/responsive/_mobile.scss | 49 |
1 files changed, 27 insertions, 22 deletions
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss index b66189c8b..8fff2853c 100644 --- a/webapp/sass/responsive/_mobile.scss +++ b/webapp/sass/responsive/_mobile.scss @@ -38,21 +38,24 @@ padding: 15px 20px 100px; } - .close__icon { - @include border-radius(50%); - border: 1px solid $white; - bottom: 25px; - color: $white; + .close { + font-family: 'Open Sans', sans-serif; display: block; - font-size: 23px; - font-weight: 300; + position: fixed; + bottom: 25px; height: 30px; + width: 30px; + margin-left: -15px; left: 50%; - line-height: 23px; - margin-left: -25px; - position: fixed; + font-size: 23px; + line-height: 27px; + border-radius: 50%; + border: 1px solid $white; text-align: center; - width: 30px; + opacity: 1; + text-shadow: none; + color: white; + font-weight: 200; } } @@ -752,22 +755,24 @@ top: 42px; width: 100%; - &:after { - @include border-radius(50%); - border: 1px solid $white; - bottom: 25px; - color: $white; - content: '\D7'; + .close { + font-family: 'Open Sans', sans-serif; display: block; - font-size: 23px; - font-weight: 300; + position: fixed; + bottom: 25px; height: 30px; + width: 30px; + margin-left: -15px; left: 50%; + font-size: 23px; line-height: 27px; - margin-left: -25px; - position: fixed; + border-radius: 50%; + border: 1px solid $white; text-align: center; - width: 30px; + opacity: 1; + text-shadow: none; + color: white; + font-weight: 200; } > li { |