Styles

Since this component doesn't any visual theme, you can apply styles to it just with plain CSS or even adding the classes your favourite CSS framework gives you.

If don't use any css pre-processor this is all. If you do use SASS or LESS, the addon will know it and will have to @import the styles explicitly. This gives you the chance to set a few variables that Ember Basic Dropdown will use.

There is only four variables you can tweak (Sass syntax)

$ember-basic-dropdown-content-background-color: #fff !default;
$ember-basic-dropdown-content-z-index: 1000 !default;
$ember-basic-dropdown-overlay-background: rgba(0, 0, 0, 0.5) !default;
$ember-basic-dropdown-overlay-pointer-events: none !default;

If by example you want to change the colour of the overlay to be blue, you could do this in your app.scss/app.less.

// Define your variables first
$ember-basic-dropdown-overlay-background: rgba(#3b5998, 0.5);

// Then import the styles, which will use your variable
@import 'ember-basic-dropdown';

In the next sections we'll give in more involved customizations.