From 14ce471311fee2830be3cbd3a90179015f513719 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Thu, 27 Oct 2016 18:10:05 +0500
Subject: Updating shift UI changes (#4326)

* Updating shift UI changes

* Adding border to last account settings item

* Fixing modals
---
 webapp/sass/responsive/_mobile.scss | 64 ++++++++++++++++++++++++++++++++-----
 1 file changed, 56 insertions(+), 8 deletions(-)

(limited to 'webapp/sass/responsive')

diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 87ee837d1..b8d54715a 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -10,6 +10,50 @@
 
     .filtered-user-list {
         max-height: 65vh !important;
+
+        .filter-button {
+            .btn {
+                width: 100%;
+            }
+        }
+    }
+
+    #header-popover {
+        @include box-shadow(none);
+        background: alpha-color($black, .8);
+        border: none;
+        height: 100%;
+        max-width: 100%;
+        position: fixed;
+        top: 47px;
+        width: 100%;
+
+        .arrow {
+            display: none;
+        }
+
+        .popover-content {
+            color: $white;
+            font-size: 15px;
+            padding: 15px 20px 100px;
+        }
+
+        .close__icon {
+            @include border-radius(50%);
+            border: 1px solid $white;
+            bottom: 25px;
+            color: $white;
+            display: block;
+            font-size: 23px;
+            font-weight: 300;
+            height: 30px;
+            left: 50%;
+            line-height: 23px;
+            margin-left: -25px;
+            position: fixed;
+            text-align: center;
+            width: 30px;
+        }
     }
 
     .app__body {
@@ -493,6 +537,10 @@
             }
 
             .settings-modal {
+                .modal-body {
+                    min-height: 100%;
+                }
+
                 &.display--content {
                     .modal-header {
                         display: none;
@@ -598,7 +646,7 @@
                     .nav {
                         > li {
                             > a {
-                                border-top: 1px solid transparent;
+                                border-bottom: 1px solid transparent;
                                 font-size: 1.1em;
                                 line-height: 2.7;
 
@@ -742,20 +790,20 @@
 
                 &:after {
                     @include border-radius(50%);
-                    background: alpha-color($black, .8);
-                    border-bottom: 1px solid alpha-color($white, .3);
+                    border: 1px solid $white;
                     bottom: 25px;
                     color: $white;
-                    content: '×';
+                    content: '\D7';
                     display: block;
-                    font-size: 30px;
-                    height: 50px;
+                    font-size: 23px;
+                    font-weight: 300;
+                    height: 30px;
                     left: 50%;
-                    line-height: 50px;
+                    line-height: 27px;
                     margin-left: -25px;
                     position: fixed;
                     text-align: center;
-                    width: 50px;
+                    width: 30px;
                 }
 
                 > li {
-- 
cgit v1.2.3-1-g7c22