12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667 |
- @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;
- }
- }
|