@mixin chameleon-notification($primaryStyleName : v-Notification) { div.#{$primaryStyleName} { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; font-size: 16px; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.7); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.7); box-shadow: 0 2px 5px rgba(0,0,0,.7); //IE8 does not support rgba, using just rgb background:rgb(255,255,255) url(../img/grad-light-top.png) repeat-x; background:rgba(255,255,255,.90) url(../img/grad-light-top.png) repeat-x; } .#{$primaryStyleName} p { line-height: 1.3; } div.#{$primaryStyleName}-warning { background-color: #fffec8; color: #574734; border: 2px solid #fee3af; } div.#{$primaryStyleName}-warning h1 { padding-left: 44px; background: transparent url(../../img/label-warning-icon-big.png) no-repeat 0 50%; } div.#{$primaryStyleName}-error { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); background: #c22f24 url(../../img/error-close.png) no-repeat right top; border: 2px solid #ca3030; } div.#{$primaryStyleName}-error h1 { padding-left: 44px; background: transparent url(../../img/label-error-icon-big.png) no-repeat 0 50%; } div.#{$primaryStyleName}-tray { color: #fff; margin: 0 5px 5px 0; background: #3b3b3b url(../../img/grad-light-top2.png) repeat-x; border: 1px solid #5b5b5b; padding: 0.8em 0.9em; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.5); } .#{$primaryStyleName}-tray h1 { font-size: 14px; line-height: 18px; } .#{$primaryStyleName}-tray p { font-size: 12px; font-weight: normal; } div.#{$primaryStyleName}-system { color: #fff; border: none; background-color: #b40000; } }