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.