Ember basic dropdown w/ sass

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

html, body {
 min-height: 100vh;
}

body {
  margin: 12px 16px;
  font-size: 12pt;
}

.ember-basic-dropdown-trigger {
	border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  line-height: 2;
  text-overflow: ellipsis;
  min-height: 2em;
  user-select: none;
  -webkit-user-select: none;
  color: inherit;
  padding: 0 16px 0 8px;
}
.ember-basic-dropdown-content {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    line-height: 2;
    border-radius: 4px;
    box-shadow: rgba(0,0,0,.172549) 0 6px 12px 0;
    overflow: hidden;
    color: inherit;
}

@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);
  }
}
.slide-fade.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-below .15s;
}
.slide-fade.ember-basic-dropdown-content--below.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-below .15s reverse;
}
.slide-fade.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-in {
  animation: drop-fade-above .15s;
}
.slide-fade.ember-basic-dropdown-content--above.ember-basic-dropdown--transitioning-out {
  animation: drop-fade-above .15s reverse;
}

templates.application.hbs

<div id="ember-basic-dropdown-wormhole"></div>
<h1>Ember basic dropdown@0.19.3</h1>
<span>Overlay style is EBD's own style compiled from <strong>SASS</strong></span>
<br>
<br>

{{#basic-dropdown matchTriggerWidth=true as |dd|}}
      {{#dd.trigger}}Click me!{{/dd.trigger}}
      {{#dd.content class="slide-fade" overlay=true}}
      	<ul>
        	<li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
          <li>Option 5</li>
        </ul>
      {{/dd.content}}
{{/basic-dropdown}}

twiddle.json

{
  "version": "0.10.7",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.0",
    "ember-data": "2.10.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
  },
  "addons": {
  	"ember-basic-dropdown": "0.19.3"
  }
}