Material theme

Material theme

Like with bootstrap, it's not a lot of code to create a material-design theme using the available SASS variables and a couple animations before importing the styles of the addon.

$ember-power-select-material-active-color: rgb(16, 108, 200) !default;

$ember-power-select-default-border-radius: none;
$ember-power-select-border-color: #9e9e9e;
$ember-power-select-trigger-border: none;
$ember-power-select-trigger-border-bottom: 1px solid #9e9e9e;
$ember-power-select-active-trigger-border: none;
$ember-power-select-active-trigger-border-bottom: 2px solid $ember-power-select-material-active-color;

$ember-power-select-dropdown-border: none;
$ember-power-select-highlighted-color: inherit;
$ember-power-select-highlighted-background: #eee;
$ember-power-select-selected-background: #e1e1e1;
$ember-power-select-line-height: 2.5;
$ember-power-select-focus-outline: none;
$ember-power-select-dropdown-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
$ember-power-select-search-field-border: none;
$ember-power-select-search-field-focus-border: none;
$ember-power-select-multiple-option-border: none;
$ember-power-select-multiple-option-border-radius: 15px;
$ember-power-select-multiple-option-padding: 0 10px;
$ember-power-select-multiple-option-line-height: 2;
@keyframes drop-fade-below {
  0%   {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(3px);
  }
}
@keyframes drop-fade-above {
  0%   {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(-3px);
  }
}
.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-below .15s;
}
.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-below .15s reverse;
}

// When opening above the trigger
.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-above .15s;
}
.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-above .15s reverse;
}
.ember-power-select-placeholder {
  transition: transform 0.2s, color 0.2s;
  transform-origin: 0 0;
  .ember-power-select-trigger--active & {
    transform: scale(0.7) translateY(-10px);
    color: $ember-power-select-material-active-color;
  }
}

@import 'ember-power-select';

Regular selects without search

Country
City

Regular selects with search

Country

Multiple selects with search

Groups

Choose a number

Select with clear btn

Country


This theme doesn't attempt to provide totally accurate replica of the angular directive, but it's a good start.

To use it in your app, SASS users should import the theme before importing the main stylesheet:

@import 'ember-power-select/themes/material';
@import 'ember-power-select';

As with the bootstrap one, this skin comes pre-compiled in the app, apps that don't use SASS can include it from the ember-cli-build.js file.

var app = new EmberApp(defaults, {
  'ember-power-select': {
    theme: 'material'
  }
});

In the next section we're going to explain how come this select can be animated without any javascript!