Merge pull request #779 from nickschot/v2-addon-rework-css

Replace SCSS with plain CSS approach

docs/app/app.js

@@ -2,6 +2,7 @@ import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from 'docs/config/environment';
+import 'ember-mobile-menu/themes/android';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

ember-mobile-menu/package.json

@@ -19,7 +19,8 @@
   "exports": {
     ".": "./dist/index.js",
     "./*": "./dist/*.js",
-    "./addon-main.js": "./addon-main.cjs"
+    "./addon-main.js": "./addon-main.cjs",
+    "./themes/*": "./dist/themes/*.css"
   },
   "files": [
     "addon-main.cjs",

ember-mobile-menu/src/components/mobile-menu-toggle.css

@@ -0,0 +1,3 @@
+.mobile-menu__toggle {
+  cursor: pointer;
+}

ember-mobile-menu/src/components/mobile-menu-toggle.js

@@ -1,4 +1,5 @@
 import Component from '@glimmer/component';
+import './mobile-menu-toggle.css';
 
 const _fn = () => {};
 

ember-mobile-menu/src/components/mobile-menu-wrapper.css

@@ -0,0 +1,51 @@
+@layer ember-mobile-menu {
+  :root {
+    --mobile-menu-wrapper-width: 100%;
+    --mobile-menu-wrapper-min-height: 100vh;
+
+    --mobile-menu-height: 100vh;
+    --mobile-menu-z-index: 2000;
+  }
+}
+
+body.mobile-menu--prevent-scroll {
+  overflow: hidden;
+}
+
+.mobile-menu-wrapper {
+  overflow: hidden;
+  width: var(--mobile-menu-wrapper-width);
+  min-height: var(--mobile-menu-wrapper-min-height);
+  /* Avoid Chrome to see Safari hack */
+}
+@supports (-webkit-touch-callout: none) {
+  .mobile-menu-wrapper {
+    /* The hack for Safari */
+    min-height: -webkit-fill-available;
+  }
+}
+
+.mobile-menu-wrapper--embedded {
+  position: relative;
+  min-height: 100%;
+  min-width: 100%;
+  overflow: hidden;
+}
+.mobile-menu-wrapper--embedded .mobile-menu-wrapper__content {
+  min-height: 100%;
+}
+
+.mobile-menu-wrapper__content {
+  min-height: var(--mobile-menu-wrapper-min-height);
+  position: relative;
+  background: #FFF;
+  will-change: transform, margin-left, margin-right;
+  z-index: 1;
+  touch-action: pan-y;
+}
+.mobile-menu-wrapper__content--shadow {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+.mobile-menu-wrapper__content--ios, .mobile-menu-wrapper__content--reveal, .mobile-menu-wrapper__content--squeeze-reveal {
+  z-index: 2;
+}

ember-mobile-menu/src/components/mobile-menu-wrapper.js

@@ -12,6 +12,7 @@ import { assert } from '@ember/debug';
 import { waitFor } from '@ember/test-waiters';
 import { task } from 'ember-concurrency';
 import Spring from '../spring';
+import './mobile-menu-wrapper.css';
 
 const isIOSDevice =
   typeof window !== 'undefined' &&

ember-mobile-menu/src/components/mobile-menu.css

@@ -0,0 +1,45 @@
+.mobile-menu {
+  position: fixed;
+  top: 0;
+  width: 0;
+}
+
+.mobile-menu.mobile-menu--left {
+  left: 0;
+}
+.mobile-menu.mobile-menu--right {
+  right: 0;
+}
+
+/* variants */
+.mobile-menu--default {
+  z-index: var(--mobile-menu-z-index);
+}
+.mobile-menu--squeeze, .mobile-menu--push {
+  z-index: 2;
+}
+.mobile-menu--ios, .mobile-menu--reveal, .mobile-menu--squeeze-reveal {
+  display: none;
+  z-index: -1;
+}
+.mobile-menu--ios.mobile-menu--dragging, .mobile-menu--ios.mobile-menu--transitioning, .mobile-menu--ios.mobile-menu--open, .mobile-menu--reveal.mobile-menu--dragging, .mobile-menu--reveal.mobile-menu--transitioning, .mobile-menu--reveal.mobile-menu--open, .mobile-menu--squeeze-reveal.mobile-menu--dragging, .mobile-menu--squeeze-reveal.mobile-menu--transitioning, .mobile-menu--squeeze-reveal.mobile-menu--open {
+  display: block;
+  z-index: unset;
+}
+.mobile-menu--ios .mobile-menu__mask, .mobile-menu--reveal .mobile-menu__mask, .mobile-menu--squeeze-reveal .mobile-menu__mask {
+  z-index: 1;
+}
+.mobile-menu--ios.mobile-menu--open .mobile-menu__mask, .mobile-menu--reveal.mobile-menu--open .mobile-menu__mask, .mobile-menu--squeeze-reveal.mobile-menu--open .mobile-menu__mask {
+  display: none;
+}
+
+.mobile-menu-wrapper--embedded .mobile-menu {
+  position: absolute;
+}
+.mobile-menu-wrapper--embedded .mobile-menu__mask, .mobile-menu-wrapper--embedded .mobile-menu.mobile-menu--open, .mobile-menu-wrapper--embedded .mobile-menu.mobile-menu--transitioning, .mobile-menu-wrapper--embedded .mobile-menu.mobile-menu--dragging {
+  width: 100%;
+}
+.mobile-menu-wrapper--embedded .mobile-menu, .mobile-menu-wrapper--embedded .mobile-menu__mask,
+.mobile-menu-wrapper--embedded .mobile-menu .mobile-menu__tray {
+  height: var(--mobile-menu-height);
+}

ember-mobile-menu/src/components/mobile-menu.js

@@ -4,6 +4,7 @@ import { assert } from '@ember/debug';
 import { htmlSafe } from '@ember/template';
 import { use, Resource } from 'ember-could-get-used-to-this';
 import { next } from '@ember/runloop';
+import './mobile-menu.css';
 
 const _fn = function () {};
 class StateResource extends Resource {

ember-mobile-menu/src/components/mobile-menu/mask.css

@@ -0,0 +1,26 @@
+.mobile-menu__mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: none;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  /* Avoid Chrome to see Safari hack */
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  transition: none;
+  touch-action: pan-y;
+  will-change: opacity;
+  visibility: hidden;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
+}
+@supports (-webkit-touch-callout: none) {
+  .mobile-menu__mask {
+    /* The hack for Safari */
+    height: -webkit-fill-available;
+  }
+}

ember-mobile-menu/src/components/mobile-menu/mask.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
+import './mask.css';
 
 const _fn = () => {};
 

ember-mobile-menu/src/components/mobile-menu/tray.css

@@ -0,0 +1,16 @@
+.mobile-menu__tray {
+  position: absolute;
+  top: 0;
+  height: var(--mobile-menu-height);
+  /* Avoid Chrome to see Safari hack */
+  overflow-y: auto;
+  touch-action: pan-y;
+  background: #FFF;
+  will-change: transform;
+}
+@supports (-webkit-touch-callout: none) {
+  .mobile-menu__tray {
+    /* The hack for Safari */
+    height: -webkit-fill-available;
+  }
+}

ember-mobile-menu/src/components/mobile-menu/tray.js

@@ -2,6 +2,7 @@ import Component from '@glimmer/component';
 import { htmlSafe } from '@ember/template';
 import { action } from '@ember/object';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import './tray.css';
 
 /**
  * The tray that resides within the menu. Menu content is placed in here.

ember-mobile-menu/src/themes/android.css

@@ -0,0 +1,51 @@
+@layer ember-mobile-menu {
+  :root {
+    --mobile-menu-header-bg:                 #E04E39;
+
+    --mobile-menu-item-color:                #333;
+    --mobile-menu-item-active-bg:            #EEE;
+    --mobile-menu-item-link-disabled-color:  #6C757D;
+  }
+}
+
+.mobile-menu__tray .mobile-menu__header {
+  min-height: 150px;
+  background: var(--mobile-menu-header-bg);
+  color: #FFF;
+  margin-bottom: 8px;
+}
+.mobile-menu__tray .mobile-menu__header .header__text {
+  padding: 16px;
+}
+.mobile-menu__tray .mobile-menu__header .header__btn {
+  padding: 16px;
+  color: #FFF;
+  text-decoration: none;
+}
+
+.mobile-menu__tray .mobile-menu__nav {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-item a {
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--mobile-menu-item-color);
+  line-height: 1.5;
+  text-decoration: none !important;
+
+  padding: 12px;
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-item a.mobile-menu__nav-link.disabled {
+  color: var(--mobile-menu-item-link-disabled-color);
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-item a.active {
+  background: var(--mobile-menu-item-active-bg);
+}
+.mobile-menu__tray .mobile-menu__nav .mobile-menu__nav-divider {
+  margin: 8px 0;
+  height: 0;
+  border-bottom: 1px solid var(--mobile-menu-item-active-bg);
+}