| @mixin base-notification($primaryStyleName : v-Notification) { |
| |
| .#{$primaryStyleName} { |
| background: #999; |
| color: #fff; |
| cursor: pointer; |
| overflow: hidden; |
| padding: 1em; |
| max-width:85%; |
| opacity: .9; |
| filter: alpha(opacity=90); |
| } |
| .#{$primaryStyleName}-caption, |
| .#{$primaryStyleName}-description, |
| .#{$primaryStyleName}-details { |
| display: inline; |
| margin: 0 0.5em 0 0; |
| } |
| .#{$primaryStyleName}-warning { |
| background: orange; |
| } |
| .#{$primaryStyleName}-error { |
| background: red; |
| } |
| .#{$primaryStyleName}-tray { |
| .#{$primaryStyleName}-caption, |
| .#{$primaryStyleName}-description { |
| display: block; |
| } |
| } |
| .#{$primaryStyleName}-system { |
| background-color: red; |
| } |
| .#{$primaryStyleName}-system .#{$primaryStyleName}-caption { |
| display: block; |
| margin: 0; |
| } |
| .#{$primaryStyleName}-animate-out { |
| @include animation(v-notification-animate-out 400ms); |
| } |
| |
| .#{$primaryStyleName} { |
| &.v-position-top { |
| top: 0; |
| } |
| &.v-position-right { |
| right: 0; |
| } |
| &.v-position-bottom { |
| bottom: 0; |
| } |
| &.v-position-left { |
| left: 0; |
| } |
| &.v-position-assistive { |
| top: -9999px; |
| left: -9999px; |
| } |
| } |
| |
| } |
| |
| @include keyframes(v-notification-animate-out) { |
| 100% { |
| opacity: 0; |
| } |
| } |