Comments (6)
@jackmatt2, it is an Ember CLI issue: ember-cli/ember-cli#2363
I'm running into a different issue with Sass. My project relies on ember-cli-compass-compiler
because i prefer Ruby Sass to libsass.
ember-cli-compass-compiler
cannot be used together with broccoli-sass
. This wasn't an issue in Ember CLI 0.1.15 and below, but after upgrading to Ember CLI 0.2.0 i have no option but to remove ember-cli-notifications
. :(
It's a huge disappointment, after ember-cli-notifications
proved itself to be a simple and useful addon.
So my request is either to switch to plain CSS stylesheets or somehow make the Sass compiler configurable, allowing to switch between broccoli-sass
, broccoli-ruby-sass
and ember-cli-compass-compiler
.
from ember-cli-notifications.
@jackmatt2 I ran into this problem as well, and to rectify it for the time being, I just added a blank app.scss file to my styles directory.
from ember-cli-notifications.
I'm going to change the way the SCSS is handled when I have some time.
from ember-cli-notifications.
There's another issue with broccoli-sass
: joliss/broccoli-sass#52
I wish i didn't have this dependency in my project, ember-cli-notifications
is the only addon that requires it.
from ember-cli-notifications.
I have had to alter the addon manually to remove the sass files and instead use regular css code. Simply adding an empty app.scss
did not work for me, I continued to get other errors.
@ynnoj here is the plain CSS that is working for me.
@-webkit-keyframes notification-show{0%{opacity:0;-webkit-transform:perspective(450px) translate(0,-30px) rotateX(90deg);transform:perspective(450px) translate(0,-30px) rotateX(90deg)}100%{opacity:1;-webkit-transform:perspective(450px) translate(0,0) rotateX(0deg);transform:perspective(450px) translate(0,0) rotateX(0deg)}}@keyframes notification-show{0%{opacity:0;-webkit-transform:perspective(450px) translate(0,-30px) rotateX(90deg);transform:perspective(450px) translate(0,-30px) rotateX(90deg)}100%{opacity:1;-webkit-transform:perspective(450px) translate(0,0) rotateX(0deg);transform:perspective(450px) translate(0,0) rotateX(0deg)}}@-webkit-keyframes notification-shrink{0%{opacity:0;max-height:800px;margin-bottom:2px;-webkit-transform:scale(0.8);transform:scale(0.8)}100%{opacity:0;max-height:0;margin-bottom:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@keyframes notification-shrink{0%{opacity:0;max-height:800px;margin-bottom:2px;-webkit-transform:scale(0.8);transform:scale(0.8)}100%{opacity:0;max-height:0;margin-bottom:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@-webkit-keyframes notification-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@keyframes notification-hide{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}100%{opacity:0;-webkit-transform:scale(0.8);transform:scale(0.8)}}@-webkit-keyframes notification-countdown{0%{width:100%}100%{width:0}}@keyframes notification-countdown{0%{opacity:1;width:100%}100%{opacity:0;width:0}}.notifications-container{position:fixed;top:10px;right:0;left:0;z-index:1060;width:80%;max-width:400px;margin:auto}.notification{font:14px Helvetica,sans-serif;position:relative;overflow:hidden;border-radius:4px;margin-bottom:2px;max-height:800px;color:#fff;-webkit-animation:notification-hide 250ms cubic-bezier(0.33859,-.42,1,-.22),notification-shrink 250ms 250ms cubic-bezier(0.5,0,0,1);animation:notification-hide 250ms cubic-bezier(0.33859,-.42,1,-.22),notification-shrink 250ms 250ms cubic-bezier(0.5,0,0,1)}.notification.in{-webkit-animation:notification-show 180ms cubic-bezier(0.175,.885,.32,1.27499);animation:notification-show 180ms cubic-bezier(0.175,.885,.32,1.27499)}.notification-icon{position:absolute;left:0;top:0;height:100%;width:30px;color:rgba(255,255,255,.74);text-align:center}.notification-icon span{position:relative;top:10px}.notification-content{padding-top:10px;padding-bottom:10px;padding-left:40px}.notification-content.dismissable{padding-right:30px}.notification-close{position:absolute;top:10px;right:10px;opacity:.3;cursor:pointer}.notification-close:focus,.notification-close:hover{opacity:1}.notification-countdown{position:absolute;bottom:0;width:0;height:4px;-webkit-animation:notification-countdown linear 1;animation:notification-countdown linear 1}.notification.info{background-color:#3ea2ff}.notification.info .notification-icon{background-color:#067cea}.notification.info .notification-countdown{background-color:#71bbff}.notification.info .notification-close{color:#067cea}.notification.success{background-color:#64ce83}.notification.success .notification-icon{background-color:#3da95c}.notification.success .notification-countdown{background-color:#8bdaa2}.notification.success .notification-close{color:#3da95c}.notification.error{background-color:#e74c3c}.notification.error .notification-icon{background-color:#ba2c1d}.notification.error .notification-countdown{background-color:#ed7669}.notification.error .notification-close{color:#ba2c1d}.notification.warning{background-color:#ff7f48}.notification.warning .notification-icon{background-color:#f44e06}.notification.warning .notification-countdown{background-color:#ffa37b}.notification.warning .notification-close{color:#f44e06}
Can I suggest converting to this until ember-cli
is fixed?
from ember-cli-notifications.
@jackmatt2 I hope to get to this over the weekend or next week.
from ember-cli-notifications.
Related Issues (20)
- Installation broken with Ember Octane Blueprint HOT 8
- production build fails if css minification is enabled HOT 2
- Not working on IE since 5.0.0-0 at least HOT 26
- Octane Support? HOT 2
- Can we have config for notification count / limit for number of visible notifications? HOT 1
- "on" modifier not working in ember-cli v3.6 HOT 7
- links in notifications doesn't redirect to links' target HOT 3
- Details/Summary won't expand/collapse in notifications
- `content` array is leaking between tests
- Compile Error on is not a modifier: Helpers may not be used in the element form. HOT 2
- Mistake in interactive documentation page HOT 1
- DEPRECATION: getWithDefault HOT 1
- Issue with using [email protected] in a node alpine docker container HOT 1
- Make animation duration configurable HOT 1
- Assertion Failed: Attempting to inject an unknown injection: 'service:notification-messages' HOT 3
- Fallback behaviours has been deprecated, using `this` HOT 3
- Add aria-hidden and role attribute to svg icons
- Typo in CSS variable name (--ecn-container-max-with)
- Outdated postcss-preset-env HOT 2
- ember-on-modifier deprecation warnings
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-cli-notifications.