|
1
|
// Name: Notification
|
|
2
|
// Description: Component to create notification messages
|
|
3
|
//
|
|
4
|
// Component: `uk-notification`
|
|
5
|
//
|
|
6
|
// Sub-objects: `uk-notification-message`
|
|
7
|
//
|
|
8
|
// Adopted: `uk-notification-close`
|
|
9
|
//
|
|
10
|
// Modifiers: `uk-notification-top-center`
|
|
11
|
// `uk-notification-top-right`
|
|
12
|
// `uk-notification-bottom-left`
|
|
13
|
// `uk-notification-bottom-center`
|
|
14
|
// `uk-notification-bottom-right`
|
|
15
|
// `uk-notification-message-primary`
|
|
16
|
// `uk-notification-message-success`
|
|
17
|
// `uk-notification-message-warning`
|
|
18
|
// `uk-notification-message-danger`
|
|
19
|
//
|
|
20
|
// ========================================================================
|
|
21
|
|
|
22
|
|
|
23
|
// Variables
|
|
24
|
// ========================================================================
|
|
25
|
|
|
26
|
@notification-position: 10px;
|
|
27
|
@notification-z-index: @global-z-index + 40;
|
|
28
|
@notification-width: 350px;
|
|
29
|
|
|
30
|
@notification-message-margin-bottom: 10px;
|
|
31
|
@notification-message-padding: @global-small-gutter;
|
|
32
|
@notification-message-background: @global-muted-background;
|
|
33
|
@notification-message-color: @global-color;
|
|
34
|
@notification-message-font-size: @global-medium-font-size;
|
|
35
|
@notification-message-line-height: 1.4;
|
|
36
|
|
|
37
|
@notification-close-top: @notification-message-padding + 5px;
|
|
38
|
@notification-close-right: @notification-message-padding;
|
|
39
|
|
|
40
|
@notification-message-primary-color: @global-primary-background;
|
|
41
|
@notification-message-success-color: @global-success-background;
|
|
42
|
@notification-message-warning-color: @global-warning-background;
|
|
43
|
@notification-message-danger-color: @global-danger-background;
|
|
44
|
|
|
45
|
|
|
46
|
/* ========================================================================
|
|
47
|
Component: Notification
|
|
48
|
========================================================================== */
|
|
49
|
|
|
50
|
/*
|
|
51
|
* 1. Set position
|
|
52
|
* 2. Dimensions
|
|
53
|
*/
|
|
54
|
|
|
55
|
.uk-notification {
|
|
56
|
/* 1 */
|
|
57
|
position: fixed;
|
|
58
|
top: @notification-position;
|
|
59
|
left: @notification-position;
|
|
60
|
z-index: @notification-z-index;
|
|
61
|
/* 2 */
|
|
62
|
box-sizing: border-box;
|
|
63
|
width: @notification-width;
|
|
64
|
.hook-notification;
|
|
65
|
}
|
|
66
|
|
|
67
|
|
|
68
|
/* Position modifiers
|
|
69
|
========================================================================== */
|
|
70
|
|
|
71
|
.uk-notification-top-right,
|
|
72
|
.uk-notification-bottom-right {
|
|
73
|
left: auto;
|
|
74
|
right: @notification-position;
|
|
75
|
}
|
|
76
|
|
|
77
|
.uk-notification-top-center,
|
|
78
|
.uk-notification-bottom-center {
|
|
79
|
left: 50%;
|
|
80
|
margin-left: (@notification-width / -2);
|
|
81
|
}
|
|
82
|
|
|
83
|
.uk-notification-bottom-left,
|
|
84
|
.uk-notification-bottom-right,
|
|
85
|
.uk-notification-bottom-center {
|
|
86
|
top: auto;
|
|
87
|
bottom: @notification-position;
|
|
88
|
}
|
|
89
|
|
|
90
|
|
|
91
|
/* Responsiveness
|
|
92
|
========================================================================== */
|
|
93
|
|
|
94
|
/* Phones portrait and smaller */
|
|
95
|
@media (max-width: @breakpoint-xsmall-max) {
|
|
96
|
|
|
97
|
.uk-notification {
|
|
98
|
left: @notification-position;
|
|
99
|
right: @notification-position;
|
|
100
|
width: auto;
|
|
101
|
margin: 0;
|
|
102
|
}
|
|
103
|
|
|
104
|
}
|
|
105
|
|
|
106
|
|
|
107
|
/* Message
|
|
108
|
========================================================================== */
|
|
109
|
|
|
110
|
.uk-notification-message {
|
|
111
|
position: relative;
|
|
112
|
margin-bottom: @notification-message-margin-bottom;
|
|
113
|
padding: @notification-message-padding;
|
|
114
|
background: @notification-message-background;
|
|
115
|
color: @notification-message-color;
|
|
116
|
font-size: @notification-message-font-size;
|
|
117
|
line-height: @notification-message-line-height;
|
|
118
|
cursor: pointer;
|
|
119
|
.hook-notification-message;
|
|
120
|
}
|
|
121
|
|
|
122
|
|
|
123
|
/* Close
|
|
124
|
* Adopts `uk-close`
|
|
125
|
========================================================================== */
|
|
126
|
|
|
127
|
.uk-notification-close {
|
|
128
|
display: none;
|
|
129
|
position: absolute;
|
|
130
|
top: @notification-close-top;
|
|
131
|
right: @notification-close-right;
|
|
132
|
.hook-notification-close;
|
|
133
|
}
|
|
134
|
|
|
135
|
.uk-notification-message:hover .uk-notification-close { display: block; }
|
|
136
|
|
|
137
|
|
|
138
|
/* Style modifiers
|
|
139
|
========================================================================== */
|
|
140
|
|
|
141
|
/*
|
|
142
|
* Primary
|
|
143
|
*/
|
|
144
|
|
|
145
|
.uk-notification-message-primary {
|
|
146
|
color: @notification-message-primary-color;
|
|
147
|
.hook-notification-message-primary;
|
|
148
|
}
|
|
149
|
|
|
150
|
/*
|
|
151
|
* Success
|
|
152
|
*/
|
|
153
|
|
|
154
|
.uk-notification-message-success {
|
|
155
|
color: @notification-message-success-color;
|
|
156
|
.hook-notification-message-success;
|
|
157
|
}
|
|
158
|
|
|
159
|
/*
|
|
160
|
* Warning
|
|
161
|
*/
|
|
162
|
|
|
163
|
.uk-notification-message-warning {
|
|
164
|
color: @notification-message-warning-color;
|
|
165
|
.hook-notification-message-warning;
|
|
166
|
}
|
|
167
|
|
|
168
|
/*
|
|
169
|
* Danger
|
|
170
|
*/
|
|
171
|
|
|
172
|
.uk-notification-message-danger {
|
|
173
|
color: @notification-message-danger-color;
|
|
174
|
.hook-notification-message-danger;
|
|
175
|
}
|
|
176
|
|
|
177
|
|
|
178
|
// Hooks
|
|
179
|
// ========================================================================
|
|
180
|
|
|
181
|
.hook-notification-misc;
|
|
182
|
|
|
183
|
.hook-notification() {}
|
|
184
|
.hook-notification-message() {}
|
|
185
|
.hook-notification-close() {}
|
|
186
|
.hook-notification-message-primary() {}
|
|
187
|
.hook-notification-message-success() {}
|
|
188
|
.hook-notification-message-warning() {}
|
|
189
|
.hook-notification-message-danger() {}
|
|
190
|
.hook-notification-misc() {}
|