Add new dropdown (#84)

uniplaces · Jan 31, 2017 · 72b87d1 · 72b87d1
1 parent 03e4471
commit 72b87d1
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 120 deletions.
diff --git a/src/styles/_common/_colors.scss b/src/styles/_common/_colors.scss
@@ -119,7 +119,14 @@ $palette: (
     'critical-background': #def6f9,
     'pending-text': #ff6b6b,
     'pending-background': #ffe1e1
-  )
+  ),
+  'dropdown': {
+    'primary': #224251,
+    'background': #ffffff,
+    'border': #d1d5da,
+    'active': #66d5ff,
+    'item-hover': #dbf5ff
+  }
 );
 
 $primary-color-key: 'primary' !default;

diff --git a/src/styles/_components/_header.scss b/src/styles/_components/_header.scss
@@ -457,122 +457,3 @@ $header-height: 60px;
         }
     }
 }
-
-@mixin dropdown() {
-    position: relative;
-    height: 100%;
-
-    &:last-child &-button {
-        border-right: 2px solid color('borders');
-        border-left: 2px solid color('borders');
-    }
-
-    @include breakpoint(small) {
-        width: 100%;
-    }
-
-    &__wrapper {
-        position: absolute;
-        display: none;
-        min-width: 225px;
-        right: 0;
-        top: 59px;
-        z-index: 3;
-        box-shadow: 0 1px 2px 0 rgba(176, 176, 176, 0.21);
-        border: 1px solid color('borders');
-
-        @include breakpoint(small) {
-            display: block;
-            width: 100%;
-            max-width: 100%;
-            padding-left: 25px;
-            background-color: color('background');
-            border-top: 0;
-            overflow: hidden;
-            overflow-y: scroll;
-        }
-    }
-
-    &,
-    &-button {
-        position: relative;
-        height: 100%;
-        font-size: em(12px);
-        text-transform: uppercase;
-        color: color('text', 'title');
-        will-change: background-color;
-    }
-
-    &-button {
-        padding-right: 40px;
-
-        @include breakpoint(small) {
-            width: 100%;
-            border: 1px solid color('borders');
-        }
-
-        &:before,
-        &:after {
-            content: "";
-            position: absolute;
-            display: block;
-            width: 7px;
-            height: 1px;
-            top: 50%;
-            background-color: color('text', 'title');
-        }
-
-        &:before {
-            right: 29px;
-            transform: rotate(45deg);
-        }
-
-        &:after {
-            right: 24px;
-            transform: rotate(-45deg);
-        }
-
-        &--active {
-            background-color: color('background', 'modal');
-
-            &:before {
-                transform: rotate(-45deg);
-            }
-
-            &:after {
-                transform: rotate(45deg);
-            }
-        }
-
-        @include breakpoint(small) {
-            background-color: transparent;
-
-            &:before,
-            &:after {
-                display: none;
-            }
-        }
-    }
-
-    &__item {
-        height: 55px;
-        padding: 20px;
-        font-size: em(13px);
-        text-align: left;
-        background-color: color('dropdown');
-
-        &:hover {
-            cursor: pointer;
-            background-color: color('dropdown', 'hover');
-        }
-
-        @include breakpoint(small) {
-            background-color: color('background');
-            padding-left: 45px;
-        }
-    }
-
-    &-button--active + &__wrapper {
-        display: block;
-    }
-}
diff --git a/src/styles/_components/_inputs.scss b/src/styles/_components/_inputs.scss
@@ -598,3 +598,84 @@ $checkbox-size: 32px;
         outline: none;
     }
 }
+
+@mixin dropdown() {
+    width: 100%;
+    height: 56px;
+    background-color: color('dropdown', 'background');
+    position: relative;
+    display: inline-block;
+
+    @include font("IntervalNextBook");
+    font-size: em(20px);
+    color: color('dropdown');
+    line-height: 54px;
+
+    &__button {
+        width: 100%;
+        padding-left: 18px;
+        border-radius: 4px;
+        border: solid 2px color('dropdown', 'border');
+        will-change: border-color;
+
+        &:before,
+        &:after {
+            content: " ";
+            position: absolute;
+            display: block;
+            width: 8px;
+            height: 2px;
+            top: 50%;
+            background-color: color('dropdown');
+            will-change: background-color;
+        }
+
+        &:before {
+            right: 20px;
+            transform: rotate(45deg);
+        }
+
+        &:after {
+            right: 15px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    &__wrapper {
+        position: relative;
+        display: block;
+        width: 100%;
+        max-height: 170px;
+        border: solid 2px color('dropdown', 'border');
+        border-radius: 4px;
+        margin-top: 4px;
+    }
+
+    &__item {
+        width: 100%;
+        height: 54px;
+        background-color: color('dropdown', 'background');
+        will-change: background-color;
+        padding-left: 18px;
+
+        &:hover {
+            background-color: color('dropdown', 'item-hover');
+        }
+    }
+
+    &--active {
+        .uni-dropdown__button {
+            border-color: color('dropdown', 'active');
+
+            &:before,
+            &:after {
+                background-color: color('dropdown', 'active');
+                transform: rotate(-45deg);
+            }
+
+            &:after {
+                transform: rotate(45deg);
+            }
+        }
+    }
+}