|
Daniel@0
|
1 @import "../config.less";
|
|
Daniel@0
|
2
|
|
Daniel@0
|
3 .notification {
|
|
Daniel@0
|
4 position: relative;
|
|
Daniel@0
|
5 padding-top: 10px;
|
|
Daniel@0
|
6 cursor: default;
|
|
Daniel@0
|
7 z-index: @z-index_notifications + 1;
|
|
Daniel@0
|
8
|
|
Daniel@0
|
9
|
|
Daniel@0
|
10 &_state_pre-shown {
|
|
Daniel@0
|
11 }
|
|
Daniel@0
|
12
|
|
Daniel@0
|
13 &_state_shown {
|
|
Daniel@0
|
14 }
|
|
Daniel@0
|
15
|
|
Daniel@0
|
16 &_state_pre-hidden {
|
|
Daniel@0
|
17
|
|
Daniel@0
|
18 }
|
|
Daniel@0
|
19
|
|
Daniel@0
|
20 &_state_hidden {
|
|
Daniel@0
|
21
|
|
Daniel@0
|
22 }
|
|
Daniel@0
|
23
|
|
Daniel@0
|
24 // ==================================
|
|
Daniel@0
|
25 &__body {
|
|
Daniel@0
|
26 .font_small();
|
|
Daniel@0
|
27
|
|
Daniel@0
|
28 position: absolute;
|
|
Daniel@0
|
29 bottom: 0;
|
|
Daniel@0
|
30 right: 0;
|
|
Daniel@0
|
31
|
|
Daniel@0
|
32 background: #eee;
|
|
Daniel@0
|
33 border: 1px solid #ccc;
|
|
Daniel@0
|
34 border-top-left-radius: @--border-radius;
|
|
Daniel@0
|
35 border-bottom-left-radius: @--border-radius;
|
|
Daniel@0
|
36 width: @notification--width;
|
|
Daniel@0
|
37 z-index: @z-index_notifications + 2;
|
|
Daniel@0
|
38 }
|
|
Daniel@0
|
39
|
|
Daniel@0
|
40 &_state_shown &__body {
|
|
Daniel@0
|
41 }
|
|
Daniel@0
|
42
|
|
Daniel@0
|
43 // ==================================
|
|
Daniel@0
|
44 &__closer {
|
|
Daniel@0
|
45 position: absolute;
|
|
Daniel@0
|
46 right: 0;
|
|
Daniel@0
|
47 top: 0;
|
|
Daniel@0
|
48 bottom: 0;
|
|
Daniel@0
|
49 width: @notification--closer-width;
|
|
Daniel@0
|
50
|
|
Daniel@0
|
51 background: #F5F5F5;
|
|
Daniel@0
|
52 color: #ccc;
|
|
Daniel@0
|
53 cursor: default;
|
|
Daniel@0
|
54 z-index: @z-index_notifications + 3;
|
|
Daniel@0
|
55 }
|
|
Daniel@0
|
56 &__closer::before {
|
|
Daniel@0
|
57 content: "x";
|
|
Daniel@0
|
58 display: block;
|
|
Daniel@0
|
59 margin-top: 6px;
|
|
Daniel@0
|
60 text-align: center;
|
|
Daniel@0
|
61 }
|
|
Daniel@0
|
62 &__closer:hover {
|
|
Daniel@0
|
63 color: #999;
|
|
Daniel@0
|
64 background: #fff;
|
|
Daniel@0
|
65 }
|
|
Daniel@0
|
66 // ttl = time to live
|
|
Daniel@0
|
67 &_ttl_5 &__closer::before {content: "5"}
|
|
Daniel@0
|
68 &_ttl_4 &__closer::before {content: "4"}
|
|
Daniel@0
|
69 &_ttl_3 &__closer::before {content: "3"}
|
|
Daniel@0
|
70 &_ttl_2 &__closer::before {content: "2"}
|
|
Daniel@0
|
71 &_ttl_1 &__closer::before {content: "1"}
|
|
Daniel@0
|
72 &_ttl_0 &__closer::before {content: "0"}
|
|
Daniel@0
|
73
|
|
Daniel@0
|
74 &_ttl-frozen:hover &__closer::before {
|
|
Daniel@0
|
75 content: "x" !important;
|
|
Daniel@0
|
76 }
|
|
Daniel@0
|
77
|
|
Daniel@0
|
78 // Things look differently for warning messages
|
|
Daniel@0
|
79 &_type_warning &__body {
|
|
Daniel@0
|
80 background: #FFEED0;
|
|
Daniel@0
|
81 }
|
|
Daniel@0
|
82 &_type_warning &__closer {
|
|
Daniel@0
|
83 background: #FFF8F5;
|
|
Daniel@0
|
84 }
|
|
Daniel@0
|
85 &_type_warning &__closer:hover {
|
|
Daniel@0
|
86 color: #CA9;
|
|
Daniel@0
|
87 }
|
|
Daniel@0
|
88
|
|
Daniel@0
|
89 // Things look differently for error messages
|
|
Daniel@0
|
90 &_type_error &__body {
|
|
Daniel@0
|
91 background: #FFD5D5;
|
|
Daniel@0
|
92 }
|
|
Daniel@0
|
93 &_type_error &__closer {
|
|
Daniel@0
|
94 background: #FFF5F5;
|
|
Daniel@0
|
95 }
|
|
Daniel@0
|
96 &_type_error &__closer:hover {
|
|
Daniel@0
|
97 color: #C88;
|
|
Daniel@0
|
98 }
|
|
Daniel@0
|
99
|
|
Daniel@0
|
100 // ==================================
|
|
Daniel@0
|
101 &__content {
|
|
Daniel@0
|
102 padding: 6px 10px;
|
|
Daniel@0
|
103 margin-right: @notification--closer-width;
|
|
Daniel@0
|
104 }
|
|
Daniel@0
|
105
|
|
Daniel@0
|
106 &_no-padding &__content {
|
|
Daniel@0
|
107 padding: 0px;
|
|
Daniel@0
|
108 }
|
|
Daniel@0
|
109
|
|
Daniel@0
|
110 &__content b {
|
|
Daniel@0
|
111 font-weight: bold;
|
|
Daniel@0
|
112 }
|
|
Daniel@0
|
113 } |
