Merge pull request #44 from rox163/master

Style and alignment updates based on UX feedback

addon/components/frost-select.js

@@ -1,7 +1,6 @@
 import _ from 'lodash'
 import Ember from 'ember'
 import computed, {readOnly} from 'ember-computed-decorators'
-
 import layout from '../templates/components/frost-select'
 
 // TODO: Add typedefs for items

addon/styles/addon.scss

@@ -6,10 +6,10 @@ $frost-input-select-option-row-height: 35px;
 
 @mixin triangle-up($color, $size) {
   border-bottom: $size solid $color;
-  border-left: $size * .8 solid transparent;
-  border-right: $size * .8 solid transparent;
+  border-left: $size solid transparent;
+  border-right: $size solid transparent;
   height: 0;
-  width: 0;
+  width: 25px;
 }
 
 .frost-select {
@@ -23,7 +23,7 @@ $frost-input-select-option-row-height: 35px;
   width: 200px;
 
   .up-arrow {
-    @include triangle-up($frost-select-container-background, 10px);
+    @include triangle-up($frost-select-container-background, 12px);
     display: inline-block;
     left: calc(50% - 15px);
     overflow: visible;
@@ -36,8 +36,9 @@ $frost-input-select-option-row-height: 35px;
 
   .drop-down-container {
     background: $frost-select-container-background;
+    border: 1px solid $frost-color-lgrey-3;
     border-radius: 3px;
-    box-shadow: 0 0 5px 5px transparentize($frost-select-container-shadow, .5);
+    box-shadow: 0 2px 7px 3px transparentize($frost-select-container-shadow, .4);
     left: -1px;
     margin-bottom: 1em;
     opacity: 0;
@@ -70,8 +71,8 @@ $frost-input-select-option-row-height: 35px;
   }
 
   li {
-    border-bottom: solid 1px $frost-color-lgrey-2;
-    color: $frost-input;
+    border-bottom: solid 1px $frost-color-lgrey-3;
+    color: $frost-color-grey-5;
     cursor: pointer;
     display: inline-block;
     height: $frost-input-select-option-row-height;
@@ -87,7 +88,7 @@ $frost-input-select-option-row-height: 35px;
       position: relative;
       top: -2px;
       svg {
-        top: 7px;
+        top: 8px;
         left: 2px;
       }
     }
@@ -98,7 +99,7 @@ $frost-input-select-option-row-height: 35px;
   }
 
   .selected {
-    font-weight: bold;
+    color: $frost-color-grey-2;
   }
 
   .down-arrow {
@@ -132,10 +133,18 @@ $frost-input-select-option-row-height: 35px;
   }
 
   .multi-status {
-    border-top: solid 3px transparentize($frost-select-footer-divider, .88);
-    border-bottom: solid 5px $frost-color-lgrey-2;
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: solid 5px $frost-color-lgrey-3;
     padding: 10px;
+    font-size: $frost-font-m;
 
+    .number-selected {
+      color: $frost-color-grey-5;
+    }
     // TODO frost-button with tertiary style
     .clear {
       color: $frost-button-tertiary;

addon/templates/components/frost-multi-select.hbs

@@ -13,7 +13,6 @@
     <polygon points='7.5,11.4 1.1,5 2.5,3.6 7.5,8.6 12.5,3.6 13.9,5'/>
   </svg>
 </div>
-
 <div class="drop-down-container">
   <div class="multi-status">
     <span class="number-selected">{{selected.length}} selected</span>

package.json

@@ -37,6 +37,7 @@
     "ember-cli-mirage": "^0.1.11",
     "ember-cli-mocha": "0.10.1",
     "ember-cli-notifications": "^3.2.0",
+    "ember-cli-sass": "5.3.0",
     "ember-cli-uglify": "^1.2.0",
     "ember-computed-decorators": "0.2.2",
     "ember-data": "^2.4.0",
@@ -70,4 +71,4 @@
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }
-}
+}

tests/dummy/app/pods/demo/template.hbs

@@ -1,7 +1,5 @@
-
 <div class="section">
   <div class="title">frost-select</div>
-
   <div class="example">
     <div class="title">Local filtering</div>
     <div class="snippet">