diff --git a/addon/components/frost-select.js b/addon/components/frost-select.js
index 64d1763..827e5ae 100644
--- a/addon/components/frost-select.js
+++ b/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
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index fb2572d..fa9e2be 100644
--- a/addon/styles/addon.scss
+++ b/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;
diff --git a/addon/templates/components/frost-multi-select.hbs b/addon/templates/components/frost-multi-select.hbs
index dbf3c50..c165b08 100644
--- a/addon/templates/components/frost-multi-select.hbs
+++ b/addon/templates/components/frost-multi-select.hbs
@@ -13,7 +13,6 @@