fixed mobile header styles (#148)

uniplaces · Aug 28, 2018 · 943e045 · 943e045
1 parent c9a63db
commit 943e045
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 42 deletions.
diff --git a/src/index.html b/src/index.html
@@ -32,13 +32,13 @@
 
             <li class="header__mobile-nav__separator"></li>
 
+            <li class="header__mobile-nav__button">List your place</li>
+            <li class="header__mobile-nav__button">Help</li>
             <li class="header__mobile-nav__button">Sign up</li>
-            <li class="header__mobile-nav__button">Log in</li>
-            <li class="header__mobile-nav__button">Become a landlord</li>
+            <li class="header__mobile-nav__button">Sign in</li>
 
             <li class="header__mobile-nav__separator"></li>
 
-            <li class="header__mobile-nav__button">Help</li>
 
             <li class="header__mobile-nav__button header__mobile-nav__button--dropdown">En</li>
 
@@ -92,7 +92,9 @@
             <button class="header__nav__button">Exit</button>
         </nav>
 
-        <div class="header__mobile-button">Menu</div>
+        <div class="header__mobile-button">
+            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m2 15.5v2h20v-2zm0-5v2h20v-2zm0-5v2h20v-2z"/><path d="m0 0h24v24h-24z" fill="none"/></svg>
+        </div>
     </div>
 </header>
 

diff --git a/src/styles/_components/_header.scss b/src/styles/_components/_header.scss
@@ -254,42 +254,12 @@ $header-height: 60px;
         position: relative;
         display: none;
         z-index: 3;
-        padding-right: 20px;
         @include font("IntervalNextReg");
         font-size: em(15px);
         text-transform: uppercase;
 
-        &:before,
-        &:after {
-            content: " ";
-            position: absolute;
-            display: block;
-            top: 11px;
-            right: 0;
-
-            width: 8px;
-            height: 1px;
-
-            background-color: color('feedback', 'text');
-        }
-
-        &:before {
-            transform: rotate(-45deg);
-        }
-
-        &:after {
-            right: 5px;
-            transform: rotate(45deg);
-        }
-
-        &--active {
-            &:before {
-                transform: rotate(45deg);
-            }
-
-            &:after {
-                transform: rotate(-45deg);
-            }
+        svg {
+            fill: #0083e4;
         }
 
         @include breakpoint(small) {
@@ -360,23 +330,21 @@ $header-height: 60px;
 
         &__button {
             display: table;
-            padding: 24px 0;
-            @include font("IntervalNextBook");
-            font-size: em(24px);
-            color: color('feedback', 'text');
+            padding: 12px 24px;
+            font-size: em(16px);
+            color: #253036;
         }
 
         &__separator {
             height: 1px;
-            margin: 6px 0;
+            margin: 32px 0;
             background-color: color('primary', 'divider');
         }
 
         &__button--dropdown {
             position: relative;
             margin-bottom: 0;
             padding-bottom: 32px;
-            border-bottom: 1px solid color('primary', 'divider');
 
             &:before,
             &:after {