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 @@ -