real-world-css-libraries 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,447 @@
1
+ /* https://github.com/arashmanteghi/simptip/blob/master/simptip.css */
2
+ /* SimpTip v1.0.4
3
+ // A simple CSS tooltip made with Sass
4
+ // source: https://github.com/arashmanteghi/simptip/
5
+ // ducoment: http://arashm.net/lab/simptip/
6
+ // by @ArashManteghi - http://arashm.net */
7
+ /********************************* Core ******************************/
8
+ [data-tooltip] {
9
+ position: relative;
10
+ display: inline-block;
11
+ -webkit-box-sizing: content-box;
12
+ -moz-box-sizing: content-box;
13
+ box-sizing: content-box;
14
+ }
15
+ [data-tooltip]:before, [data-tooltip]:after {
16
+ position: absolute;
17
+ visibility: hidden;
18
+ opacity: 0;
19
+ z-index: 999999;
20
+ -webkit-box-sizing: content-box;
21
+ -moz-box-sizing: content-box;
22
+ box-sizing: content-box;
23
+ -webkit-transform: translate3d(0, 0, 0);
24
+ -moz-transform: translate3d(0, 0, 0);
25
+ transform: translate3d(0, 0, 0);
26
+ }
27
+ [data-tooltip]:before {
28
+ content: '';
29
+ border: 6px solid transparent;
30
+ }
31
+ [data-tooltip]:after {
32
+ height: 22px;
33
+ padding: 11px 11px 0 11px;
34
+ font-size: 13px;
35
+ line-height: 11px;
36
+ content: attr(data-tooltip);
37
+ white-space: nowrap;
38
+ }
39
+ [data-tooltip].simptip-position-top:before {
40
+ border-top-color: #323232;
41
+ }
42
+ [data-tooltip].simptip-position-top:after {
43
+ background-color: #323232;
44
+ color: #ecf0f1;
45
+ }
46
+ [data-tooltip].simptip-position-bottom:before {
47
+ border-bottom-color: #323232;
48
+ }
49
+ [data-tooltip].simptip-position-bottom:after {
50
+ background-color: #323232;
51
+ color: #ecf0f1;
52
+ }
53
+ [data-tooltip].simptip-position-left:before {
54
+ border-left-color: #323232;
55
+ }
56
+ [data-tooltip].simptip-position-left:after {
57
+ background-color: #323232;
58
+ color: #ecf0f1;
59
+ }
60
+ [data-tooltip].simptip-position-right:before {
61
+ border-right-color: #323232;
62
+ }
63
+ [data-tooltip].simptip-position-right:after {
64
+ background-color: #323232;
65
+ color: #ecf0f1;
66
+ }
67
+ [data-tooltip].simptip-position-top.half-arrow:before {
68
+ border-right: 7px solid #323232;
69
+ }
70
+ [data-tooltip].simptip-position-bottom.half-arrow:before {
71
+ border-right: 7px solid #323232;
72
+ }
73
+ [data-tooltip]:hover, [data-tooltip]:focus {
74
+ background-color: transparent;
75
+ }
76
+ [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after {
77
+ opacity: 1;
78
+ visibility: visible;
79
+ }
80
+
81
+ /******************************* Position ****************************/
82
+ .simptip-position-right:before, .simptip-position-left:before, .simptip-position-right:after, .simptip-position-left:after {
83
+ bottom: 50%;
84
+ }
85
+ .simptip-position-right:before, .simptip-position-left:before {
86
+ margin-bottom: -5px;
87
+ }
88
+ .simptip-position-right:after, .simptip-position-left:after {
89
+ margin-bottom: -14.66667px;
90
+ }
91
+ .half-arrow.simptip-position-right:before, .half-arrow.simptip-position-left:before {
92
+ bottom: 16px;
93
+ border-style: none;
94
+ border-top: 7px solid transparent;
95
+ }
96
+ .simptip-multiline.simptip-position-right:before, .simptip-multiline.simptip-position-left:before, .simptip-multiline.simptip-position-right:after, .simptip-multiline.simptip-position-left:after {
97
+ -webkit-transform: translateY(50%);
98
+ -moz-transform: translateY(50%);
99
+ -ms-transform: translateY(50%);
100
+ -o-transform: translateY(50%);
101
+ transform: translateY(50%);
102
+ -webkit-filter: blur(0px);
103
+ filter: blur(0px);
104
+ margin-bottom: 0;
105
+ }
106
+ .simptip-multiline.simptip-position-right:before, .simptip-multiline.simptip-position-left:before {
107
+ margin-bottom: 0;
108
+ }
109
+ .simptip-multiline.half-arrow.simptip-position-right:before, .simptip-multiline.half-arrow.simptip-position-left:before {
110
+ margin-bottom: -2px;
111
+ }
112
+
113
+ .simptip-position-right:before, .simptip-position-right:after {
114
+ left: 100%;
115
+ }
116
+ .simptip-position-right:before {
117
+ margin-left: -2px;
118
+ }
119
+ .simptip-position-right:after {
120
+ margin-left: 10px;
121
+ }
122
+ .simptip-position-right.simptip-movable:before {
123
+ margin-left: -10px;
124
+ }
125
+ .simptip-position-right.simptip-movable:after {
126
+ margin-left: 2px;
127
+ }
128
+ .simptip-position-right.simptip-movable:hover:before, .simptip-position-right.simptip-movable:hover:after {
129
+ -webkit-transform: translateX(10px);
130
+ -moz-transform: translateX(10px);
131
+ -ms-transform: translateX(10px);
132
+ -o-transform: translateX(10px);
133
+ transform: translateX(10px);
134
+ }
135
+ .simptip-position-right.simptip-movable.half-arrow:before {
136
+ margin-left: -5px;
137
+ }
138
+ .simptip-position-right.simptip-movable.simptip-multiline:hover:before, .simptip-position-right.simptip-movable.simptip-multiline:hover:after {
139
+ -webkit-transform: translate(10px, 50%);
140
+ -moz-transform: translate(10px, 50%);
141
+ -ms-transform: translate(10px, 50%);
142
+ -o-transform: translate(10px, 50%);
143
+ transform: translate(10px, 50%);
144
+ }
145
+ .simptip-position-right.half-arrow:before {
146
+ margin-left: 3px;
147
+ border-right: 7px solid #323232;
148
+ }
149
+
150
+ .simptip-position-left:before, .simptip-position-left:after {
151
+ right: 100%;
152
+ }
153
+ .simptip-position-left:before {
154
+ margin-right: -2px;
155
+ }
156
+ .simptip-position-left:after {
157
+ margin-right: 10px;
158
+ }
159
+ .simptip-position-left.simptip-movable:before {
160
+ margin-right: -10px;
161
+ }
162
+ .simptip-position-left.simptip-movable:after {
163
+ margin-right: 2px;
164
+ }
165
+ .simptip-position-left.simptip-movable:hover:before, .simptip-position-left.simptip-movable:hover:after {
166
+ -webkit-transform: translateX(-10px);
167
+ -moz-transform: translateX(-10px);
168
+ -ms-transform: translateX(-10px);
169
+ -o-transform: translateX(-10px);
170
+ transform: translateX(-10px);
171
+ }
172
+ .simptip-position-left.simptip-movable.half-arrow:before {
173
+ margin-right: -5px;
174
+ }
175
+ .simptip-position-left.simptip-movable.simptip-multiline:hover:before, .simptip-position-left.simptip-movable.simptip-multiline:hover:after {
176
+ -webkit-transform: translate(-10px, 50%);
177
+ -moz-transform: translate(-10px, 50%);
178
+ -ms-transform: translate(-10px, 50%);
179
+ -o-transform: translate(-10px, 50%);
180
+ transform: translate(-10px, 50%);
181
+ }
182
+ .simptip-position-left.half-arrow:before {
183
+ margin-right: 3px;
184
+ border-left: 7px solid #323232;
185
+ }
186
+
187
+ .simptip-position-bottom:before, .simptip-position-top:before, .simptip-position-bottom:after, .simptip-position-top:after {
188
+ left: 50%;
189
+ -webkit-transform: translateX(-50%);
190
+ -moz-transform: translateX(-50%);
191
+ -ms-transform: translateX(-50%);
192
+ -o-transform: translateX(-50%);
193
+ transform: translateX(-50%);
194
+ }
195
+ .simptip-position-bottom:after, .simptip-position-top:after {
196
+ width: auto;
197
+ }
198
+ .half-arrow.simptip-position-bottom:before, .half-arrow.simptip-position-top:before {
199
+ border-style: none;
200
+ border-right: 7px solid #323232;
201
+ }
202
+
203
+ .simptip-position-bottom:before, .simptip-position-bottom:after {
204
+ top: 100%;
205
+ }
206
+ .simptip-position-bottom:before {
207
+ margin-top: -5px;
208
+ }
209
+ .simptip-position-bottom:after {
210
+ margin-top: 7px;
211
+ }
212
+ .simptip-position-bottom:hover:before, .simptip-position-bottom:hover:after {
213
+ -webkit-transform: translate(-50%, 0);
214
+ -moz-transform: translate(-50%, 0);
215
+ -ms-transform: translate(-50%, 0);
216
+ -o-transform: translate(-50%, 0);
217
+ transform: translate(-50%, 0);
218
+ }
219
+ .simptip-position-bottom.simptip-movable:before {
220
+ margin-top: -15px;
221
+ }
222
+ .simptip-position-bottom.simptip-movable:after {
223
+ margin-top: -3px;
224
+ }
225
+ .simptip-position-bottom.simptip-movable:hover:before, .simptip-position-bottom.simptip-movable:hover:after {
226
+ -webkit-transform: translate(-50%, 10px);
227
+ -moz-transform: translate(-50%, 10px);
228
+ -ms-transform: translate(-50%, 10px);
229
+ -o-transform: translate(-50%, 10px);
230
+ transform: translate(-50%, 10px);
231
+ }
232
+ .simptip-position-bottom.simptip-movable.half-arrow:before {
233
+ margin-top: -10px;
234
+ }
235
+ .simptip-position-bottom.half-arrow:before {
236
+ margin-top: 0;
237
+ border-top: 7px solid transparent;
238
+ }
239
+
240
+ .simptip-position-top:before, .simptip-position-top:after {
241
+ bottom: 100%;
242
+ }
243
+ .simptip-position-top:before {
244
+ margin-bottom: -5px;
245
+ }
246
+ .simptip-position-top:after {
247
+ margin-bottom: 7px;
248
+ }
249
+ .simptip-position-top:hover:before, .simptip-position-top:hover:after {
250
+ -webkit-transform: translate(-50%, 0px);
251
+ -moz-transform: translate(-50%, 0px);
252
+ -ms-transform: translate(-50%, 0px);
253
+ -o-transform: translate(-50%, 0px);
254
+ transform: translate(-50%, 0px);
255
+ }
256
+ .simptip-position-top.simptip-movable:before {
257
+ margin-bottom: -15px;
258
+ }
259
+ .simptip-position-top.simptip-movable:after {
260
+ margin-bottom: -3px;
261
+ }
262
+ .simptip-position-top.simptip-movable:hover:before, .simptip-position-top.simptip-movable:hover:after {
263
+ -webkit-transform: translate(-50%, -10px);
264
+ -moz-transform: translate(-50%, -10px);
265
+ -ms-transform: translate(-50%, -10px);
266
+ -o-transform: translate(-50%, -10px);
267
+ transform: translate(-50%, -10px);
268
+ }
269
+ .simptip-position-top.simptip-movable.half-arrow:before {
270
+ margin-bottom: -10px;
271
+ }
272
+ .simptip-position-top.half-arrow:before {
273
+ margin-bottom: 0;
274
+ border-bottom: 7px solid transparent;
275
+ }
276
+
277
+ /******************************* Features ****************************/
278
+ .simptip-movable:before, .simptip-movable:after {
279
+ -webkit-transition: all 0.1s linear;
280
+ -moz-transition: all 0.1s linear;
281
+ -o-transition: all 0.1s linear;
282
+ -ms-transition: all 0.1s linear;
283
+ transition: all 0.1s linear;
284
+ }
285
+
286
+ .simptip-smooth:after {
287
+ -webkit-border-radius: 4px;
288
+ border-radius: 4px;
289
+ }
290
+
291
+ .simptip-fade:before, .simptip-fade:after {
292
+ -webkit-transition: opacity 0.2s linear, visibility 0.2s linear;
293
+ -moz-transition: opacity 0.2s linear, visibility 0.2s linear;
294
+ -o-transition: opacity 0.2s linear, visibility 0.2s linear;
295
+ -ms-transition: opacity 0.2s linear, visibility 0.2s linear;
296
+ transition: opacity 0.2s linear, visibility 0.2s linear;
297
+ }
298
+
299
+ .simptip-multiline:after {
300
+ height: auto;
301
+ width: 150px;
302
+ padding: 11px;
303
+ line-height: 19px;
304
+ white-space: normal;
305
+ text-align: left;
306
+ }
307
+
308
+ /**************************** Diverse Colors *************************/
309
+ .simptip-success.simptip-position-top:before {
310
+ border-top-color: #62c462;
311
+ }
312
+ .simptip-success.simptip-position-top:after {
313
+ background-color: #62c462;
314
+ color: #ecf0f1;
315
+ }
316
+ .simptip-success.simptip-position-bottom:before {
317
+ border-bottom-color: #62c462;
318
+ }
319
+ .simptip-success.simptip-position-bottom:after {
320
+ background-color: #62c462;
321
+ color: #ecf0f1;
322
+ }
323
+ .simptip-success.simptip-position-left:before {
324
+ border-left-color: #62c462;
325
+ }
326
+ .simptip-success.simptip-position-left:after {
327
+ background-color: #62c462;
328
+ color: #ecf0f1;
329
+ }
330
+ .simptip-success.simptip-position-right:before {
331
+ border-right-color: #62c462;
332
+ }
333
+ .simptip-success.simptip-position-right:after {
334
+ background-color: #62c462;
335
+ color: #ecf0f1;
336
+ }
337
+ .simptip-success.simptip-position-top.half-arrow:before {
338
+ border-right: 7px solid #62c462;
339
+ }
340
+ .simptip-success.simptip-position-bottom.half-arrow:before {
341
+ border-right: 7px solid #62c462;
342
+ }
343
+
344
+ .simptip-info.simptip-position-top:before {
345
+ border-top-color: #5bc0de;
346
+ }
347
+ .simptip-info.simptip-position-top:after {
348
+ background-color: #5bc0de;
349
+ color: #ecf0f1;
350
+ }
351
+ .simptip-info.simptip-position-bottom:before {
352
+ border-bottom-color: #5bc0de;
353
+ }
354
+ .simptip-info.simptip-position-bottom:after {
355
+ background-color: #5bc0de;
356
+ color: #ecf0f1;
357
+ }
358
+ .simptip-info.simptip-position-left:before {
359
+ border-left-color: #5bc0de;
360
+ }
361
+ .simptip-info.simptip-position-left:after {
362
+ background-color: #5bc0de;
363
+ color: #ecf0f1;
364
+ }
365
+ .simptip-info.simptip-position-right:before {
366
+ border-right-color: #5bc0de;
367
+ }
368
+ .simptip-info.simptip-position-right:after {
369
+ background-color: #5bc0de;
370
+ color: #ecf0f1;
371
+ }
372
+ .simptip-info.simptip-position-top.half-arrow:before {
373
+ border-right: 7px solid #5bc0de;
374
+ }
375
+ .simptip-info.simptip-position-bottom.half-arrow:before {
376
+ border-right: 7px solid #5bc0de;
377
+ }
378
+
379
+ .simptip-danger.simptip-position-top:before {
380
+ border-top-color: #e74c3c;
381
+ }
382
+ .simptip-danger.simptip-position-top:after {
383
+ background-color: #e74c3c;
384
+ color: #ecf0f1;
385
+ }
386
+ .simptip-danger.simptip-position-bottom:before {
387
+ border-bottom-color: #e74c3c;
388
+ }
389
+ .simptip-danger.simptip-position-bottom:after {
390
+ background-color: #e74c3c;
391
+ color: #ecf0f1;
392
+ }
393
+ .simptip-danger.simptip-position-left:before {
394
+ border-left-color: #e74c3c;
395
+ }
396
+ .simptip-danger.simptip-position-left:after {
397
+ background-color: #e74c3c;
398
+ color: #ecf0f1;
399
+ }
400
+ .simptip-danger.simptip-position-right:before {
401
+ border-right-color: #e74c3c;
402
+ }
403
+ .simptip-danger.simptip-position-right:after {
404
+ background-color: #e74c3c;
405
+ color: #ecf0f1;
406
+ }
407
+ .simptip-danger.simptip-position-top.half-arrow:before {
408
+ border-right: 7px solid #e74c3c;
409
+ }
410
+ .simptip-danger.simptip-position-bottom.half-arrow:before {
411
+ border-right: 7px solid #e74c3c;
412
+ }
413
+
414
+ .simptip-warning.simptip-position-top:before {
415
+ border-top-color: #e67e22;
416
+ }
417
+ .simptip-warning.simptip-position-top:after {
418
+ background-color: #e67e22;
419
+ color: #ecf0f1;
420
+ }
421
+ .simptip-warning.simptip-position-bottom:before {
422
+ border-bottom-color: #e67e22;
423
+ }
424
+ .simptip-warning.simptip-position-bottom:after {
425
+ background-color: #e67e22;
426
+ color: #ecf0f1;
427
+ }
428
+ .simptip-warning.simptip-position-left:before {
429
+ border-left-color: #e67e22;
430
+ }
431
+ .simptip-warning.simptip-position-left:after {
432
+ background-color: #e67e22;
433
+ color: #ecf0f1;
434
+ }
435
+ .simptip-warning.simptip-position-right:before {
436
+ border-right-color: #e67e22;
437
+ }
438
+ .simptip-warning.simptip-position-right:after {
439
+ background-color: #e67e22;
440
+ color: #ecf0f1;
441
+ }
442
+ .simptip-warning.simptip-position-top.half-arrow:before {
443
+ border-right: 7px solid #e67e22;
444
+ }
445
+ .simptip-warning.simptip-position-bottom.half-arrow:before {
446
+ border-right: 7px solid #e67e22;
447
+ }