feat: Drop Sass dependency

README.md

@@ -10,6 +10,7 @@ Unlike some other modal libraries for Ember, ember-modal-dialog uses solutions l
 
 - [Live Demo and Test Examples](#live-demo-and-test-examples)
 - [Including In An Ember Application](#including-in-an-ember-application)
+- [Upgrading](#upgrading)
 - [Controller-bound Usage](#controller-bound-usage)
 - [Routable Usage](#routable-usage)
 - [Configurable Properties](#configurable-properties)
@@ -48,13 +49,14 @@ Here is the simplest way to get started with ember-modal-dialog:
 
 ```sh
 ember install ember-modal-dialog
-ember install ember-cli-sass
 ```
 
-**app.scss**
-```scss
-@import "ember-modal-dialog/ember-modal-structure";
-@import "ember-modal-dialog/ember-modal-appearance";
+Then import the CSS files
+
+**app.css**
+```css
+@import "ember-modal-dialog/ember-modal-structure.css";
+@import "ember-modal-dialog/ember-modal-appearance.css";
 ```
 
 **application.hbs**
@@ -64,6 +66,14 @@ ember install ember-cli-sass
 {{/modal-dialog}}
 ```
 
+## Upgrading
+
+Earlier versions of `ember-modal-dialog` required `ember-cli-sass` and an `app.scss` file to import styling.
+
+Please be aware this is no longer the case.
+
+Existing applications should continue to work correctly but if you were using `ember-cli-sass` solely due to `ember-modal-dialog` it might be worthwhile removing `ember-cli-sass` completely and just importing the styles directly into `app.css` instead, as shown above.
+
 ## Controller-bound Usage
 
 Here is a more useful example of how to conditionally display a modal based on a user interaction.
@@ -187,7 +197,7 @@ This can be customized (see `overlayPosition`).
 
 ## Positioning
 
-With the default SCSS provided, your modal will be centered in the viewport. By adjusting the CSS, you can adjust this logic.
+With the default CSS provided, your modal will be centered in the viewport. By adjusting the CSS, you can adjust this logic.
 
 Pass a `tetherTarget` in order to position our modal in relation to the target and enable your modal remain positioned near their targets when users scroll or resize the window.
 
@@ -247,20 +257,22 @@ module.exports = function(environment) {
 
 ## Configuring Styles
 
-The addon packages default styles for modal structure and appearance. To use these styles, install ember-cli-sass and import the relevant SCSS file(s) in `app.scss`.
+You can import the CSS files directly
 
-```sh
-> ember install ember-cli-sass
+**app.css**
+```css
+@import "ember-modal-dialog/ember-modal-structure.css";
+@import "ember-modal-dialog/ember-modal-appearance.css";
 ```
 
+If you’re using SASS then just import the CSS slightly differently
+
 **app.scss**
 ```scss
 @import "ember-modal-dialog/ember-modal-structure";
 @import "ember-modal-dialog/ember-modal-appearance";
 ```
 
-If you would prefer not to use Sass, just grab the contents of these files and adapt them for your needs -- there is not much there.
-
 ## Keyboard shortcuts
 
 A quick-and-dirty way to implement keyboard shortcuts (e.g. to dismiss your modals with `escape`) is to subclass the dialog and attach keyboard events:

app/styles/ember-modal-dialog/ember-modal-appearance.scss → app/styles/ember-modal-dialog/ember-modal-appearance.css

@@ -5,5 +5,5 @@
   padding: 10px;
 }
 .ember-modal-overlay.translucent {
-  background-color: rgba(#808080, .77);
+  background-color: rgba(128, 128, 128, .77);
 }

app/styles/ember-modal-dialog/ember-modal-structure.css

@@ -0,0 +1,45 @@
+.ember-modal-dialog {
+  z-index: 51;
+  position: fixed;
+}
+
+.ember-modal-dialog.emd-in-place {
+  position: static;
+}
+
+.ember-modal-wrapper.emd-static.emd-wrapper-target-attachment-center .ember-modal-dialog {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ember-modal-wrapper.emd-animatable.emd-wrapper-target-attachment-center .ember-modal-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ember-modal-wrapper.emd-animatable .ember-modal-dialog {
+  position: relative;
+}
+
+.ember-modal-overlay {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+}

package.json

@@ -41,7 +41,6 @@
     "ember-cli-htmlbars-inline-precompile": "^1.0.3",
     "ember-cli-inject-live-reload": "^1.8.2",
     "ember-cli-release": "^1.0.0-beta.2",
-    "ember-cli-sass": "^10.0.1",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-template-lint": "^1.0.0-beta.1",
     "ember-cli-uglify": "^2.1.0",
@@ -63,8 +62,7 @@
     "liquid-tether": "^2.0.7",
     "liquid-wormhole": "^2.1.5",
     "loader.js": "^4.7.0",
-    "qunit-dom": "^0.8.0",
-    "sass": "^1.20.1"
+    "qunit-dom": "^0.8.0"
   },
   "engines": {
     "node": "6.* || 8.* || >= 10.*"

tests/dummy/app/styles/app.scss → tests/dummy/app/styles/app.css

@@ -1,33 +1,38 @@
 @import "ember-modal-dialog/ember-modal-structure";
 @import "ember-modal-dialog/ember-modal-appearance";
-@import "tomorrow-night-eighties";
+@import "_tomorrow-night-eighties";
 
 body {
   font-family: sans-serif;
   font-size: 12px;
   margin: 0;
 }
+
+
 .ApplicationRoute {
   margin: 20px;
-  &-summary {
-    font-size: 1.1rem;
-    margin-bottom: 10px;
-  }
-  &-nav {
-    margin-bottom: 20px;
-    padding: 0;
-  }
-  &-nav > li {
-    display: inline-block;
-    &::after {
-      content: ' | ';
-    }
-    &:last-child {
-      &::after {
-        content: '';
-      }
-    }
-  }
+}
+
+.ApplicationRoute-summary {
+  font-size: 1.1rem;
+  margin-bottom: 10px;
+}
+
+.ApplicationRoute-nav {
+  margin-bottom: 20px;
+  padding: 0;
+}
+
+.ApplicationRoute-nav > li {
+  display: inline-block;
+}
+
+.ApplicationRoute-nav > li::after {
+  content: ' | ';
+}
+
+.ApplicationRoute-nav > li:last-child::after {
+  content: '';
 }
 
 .example {
@@ -78,10 +83,9 @@ h2 {
 // END-SNIPPET
 
 // BEGIN-SNIPPET custom-styles
-$theme-color: #0f9d58;
 
 .custom-styles-overlay {
-  background-color: rgba($theme-color, .77);
+  background-color: rgba(15, 157, 88, .77);
 }
 
 .custom-styles-overlay,
@@ -104,7 +108,7 @@ $theme-color: #0f9d58;
   width: 300px;
 
   h1 {
-    color: $theme-color;
+    color: #0f9d58;
   }
 }
 // END-SNIPPET

tests/dummy/config/deprecation-workflow.js

@@ -1,3 +1,4 @@
+/*global self*/
 self.deprecationWorkflow = self.deprecationWorkflow || {};
 self.deprecationWorkflow.config = {
   workflow: [