route53web 0.1.0
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.
- data/.document +5 -0
- data/.rspec +1 -0
- data/Gemfile +14 -0
- data/Gemfile.lock +58 -0
- data/LICENSE.txt +20 -0
- data/README.md +40 -0
- data/README.rdoc +19 -0
- data/Rakefile +39 -0
- data/VERSION +1 -0
- data/lib/config/aws.yml +3 -0
- data/lib/config/aws.yml.sample +3 -0
- data/lib/public/.DS_Store +0 -0
- data/lib/public/css/lib/bootstrap.less +23 -0
- data/lib/public/css/lib/forms.less +369 -0
- data/lib/public/css/lib/patterns.less +751 -0
- data/lib/public/css/lib/preboot.less +271 -0
- data/lib/public/css/lib/reset.less +146 -0
- data/lib/public/css/lib/scaffolding.less +204 -0
- data/lib/public/css/lib/tables.less +148 -0
- data/lib/public/css/lib/type.less +188 -0
- data/lib/public/css/route53web.less +81 -0
- data/lib/public/js/jquery.js +8981 -0
- data/lib/public/js/less.js +16 -0
- data/lib/public/js/route53web.js +72 -0
- data/lib/route53web.rb +93 -0
- data/lib/views/_editor.haml +2 -0
- data/lib/views/_tabs.haml +4 -0
- data/lib/views/_zone.haml +5 -0
- data/lib/views/_zone_select.haml +9 -0
- data/lib/views/index.haml +42 -0
- data/lib/views/records/_a.haml +14 -0
- data/lib/views/records/_cname.haml +14 -0
- data/lib/views/records/_mx.haml +18 -0
- data/lib/views/records/_ns.haml +13 -0
- data/lib/views/records/_soa.haml +1 -0
- data/lib/views/records/_txt.haml +16 -0
- data/spec/config_spec.rb +12 -0
- data/spec/spec_helper.rb +12 -0
- metadata +177 -0
@@ -0,0 +1,751 @@
|
|
1
|
+
/* Patterns.less
|
2
|
+
* Repeatable UI elements outside the base styles provided from the scaffolding
|
3
|
+
* ---------------------------------------------------------------------------- */
|
4
|
+
|
5
|
+
|
6
|
+
// TOPBAR
|
7
|
+
// ------
|
8
|
+
|
9
|
+
// Topbar for Branding and Nav
|
10
|
+
.topbar {
|
11
|
+
height: 40px;
|
12
|
+
position: fixed;
|
13
|
+
top: 0;
|
14
|
+
left: 0;
|
15
|
+
right: 0;
|
16
|
+
z-index: 10000;
|
17
|
+
overflow: visible;
|
18
|
+
|
19
|
+
// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present
|
20
|
+
.fill {
|
21
|
+
background:#222;
|
22
|
+
#gradient > .vertical(#333, #222);
|
23
|
+
@shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1);
|
24
|
+
.box-shadow(@shadow);
|
25
|
+
}
|
26
|
+
|
27
|
+
// Links get text shadow
|
28
|
+
a {
|
29
|
+
color: @grayLight;
|
30
|
+
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
|
31
|
+
}
|
32
|
+
|
33
|
+
// Hover and active states
|
34
|
+
a:hover,
|
35
|
+
ul li.active a {
|
36
|
+
background-color: #333;
|
37
|
+
background-color: rgba(255,255,255,.05);
|
38
|
+
color: @white;
|
39
|
+
text-decoration: none;
|
40
|
+
}
|
41
|
+
|
42
|
+
// Website name
|
43
|
+
h3 {
|
44
|
+
position:relative;
|
45
|
+
a {
|
46
|
+
float: left;
|
47
|
+
display: block;
|
48
|
+
padding: 8px 20px 12px;
|
49
|
+
margin-left: -20px; // negative indent to left-align the text down the page
|
50
|
+
color: @white;
|
51
|
+
font-size: 20px;
|
52
|
+
font-weight: 200;
|
53
|
+
line-height: 1;
|
54
|
+
}
|
55
|
+
}
|
56
|
+
|
57
|
+
// Search Form
|
58
|
+
form {
|
59
|
+
float: left;
|
60
|
+
margin: 5px 0 0 0;
|
61
|
+
position: relative;
|
62
|
+
.opacity(100);
|
63
|
+
input {
|
64
|
+
background-color: #444;
|
65
|
+
background-color: rgba(255,255,255,.3);
|
66
|
+
#font > .sans-serif(13px, normal, 1);
|
67
|
+
width: 220px;
|
68
|
+
padding: 4px 9px;
|
69
|
+
color: #fff;
|
70
|
+
color: rgba(255,255,255,.75);
|
71
|
+
border: 1px solid #111;
|
72
|
+
.border-radius(4px);
|
73
|
+
@shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25);
|
74
|
+
.box-shadow(@shadow);
|
75
|
+
.transition(none);
|
76
|
+
|
77
|
+
// Placeholder text gets special styles; can't be bundled together though for some reason
|
78
|
+
&:-moz-placeholder {
|
79
|
+
color: @grayLighter;
|
80
|
+
}
|
81
|
+
&::-webkit-input-placeholder {
|
82
|
+
color: @grayLighter;
|
83
|
+
}
|
84
|
+
// Hover states
|
85
|
+
&:hover {
|
86
|
+
background-color: @grayLight;
|
87
|
+
background-color: rgba(255,255,255,.5);
|
88
|
+
color: #fff;
|
89
|
+
}
|
90
|
+
// Focus states (we use .focused since IE8 and down doesn't support :focus)
|
91
|
+
&:focus,
|
92
|
+
&.focused {
|
93
|
+
outline: none;
|
94
|
+
background-color: #fff;
|
95
|
+
color: @grayDark;
|
96
|
+
text-shadow: 0 1px 0 #fff;
|
97
|
+
border: 0;
|
98
|
+
padding: 5px 10px;
|
99
|
+
.box-shadow(0 0 3px rgba(0,0,0,.15));
|
100
|
+
}
|
101
|
+
}
|
102
|
+
}
|
103
|
+
|
104
|
+
// Navigation
|
105
|
+
ul {
|
106
|
+
display: block;
|
107
|
+
float: left;
|
108
|
+
margin: 0 10px 0 0;
|
109
|
+
position: relative;
|
110
|
+
&.secondary-nav {
|
111
|
+
float: right;
|
112
|
+
margin-left: 10px;
|
113
|
+
margin-right: 0;
|
114
|
+
}
|
115
|
+
li {
|
116
|
+
display: block;
|
117
|
+
float: left;
|
118
|
+
font-size: 13px;
|
119
|
+
a {
|
120
|
+
display: block;
|
121
|
+
float: none;
|
122
|
+
padding: 10px 10px 11px;
|
123
|
+
line-height: 19px;
|
124
|
+
text-decoration: none;
|
125
|
+
&:hover {
|
126
|
+
color: #fff;
|
127
|
+
text-decoration: none;
|
128
|
+
}
|
129
|
+
}
|
130
|
+
&.active a {
|
131
|
+
background-color: #222;
|
132
|
+
background-color: rgba(0,0,0,.5);
|
133
|
+
}
|
134
|
+
}
|
135
|
+
|
136
|
+
// Dropdowns
|
137
|
+
&.primary-nav li ul {
|
138
|
+
left: 0;
|
139
|
+
}
|
140
|
+
&.secondary-nav li ul {
|
141
|
+
right: 0;
|
142
|
+
}
|
143
|
+
li.menu {
|
144
|
+
position: relative;
|
145
|
+
a.menu {
|
146
|
+
&:after {
|
147
|
+
width: 0px;
|
148
|
+
height: 0px;
|
149
|
+
display: inline-block;
|
150
|
+
content: "↓";
|
151
|
+
text-indent: -99999px;
|
152
|
+
vertical-align: top;
|
153
|
+
margin-top: 8px;
|
154
|
+
margin-left: 4px;
|
155
|
+
border-left: 4px solid transparent;
|
156
|
+
border-right: 4px solid transparent;
|
157
|
+
border-top: 4px solid #fff;
|
158
|
+
.opacity(50);
|
159
|
+
}
|
160
|
+
}
|
161
|
+
&.open {
|
162
|
+
a.menu,
|
163
|
+
a:hover {
|
164
|
+
background-color: #444;
|
165
|
+
background-color: rgba(255,255,255,.1);
|
166
|
+
*background-color: #444; /* IE6-7 */
|
167
|
+
color: #fff;
|
168
|
+
}
|
169
|
+
ul {
|
170
|
+
display: block;
|
171
|
+
li {
|
172
|
+
a {
|
173
|
+
background-color: transparent;
|
174
|
+
font-weight: normal;
|
175
|
+
&:hover {
|
176
|
+
background-color: rgba(255,255,255,.1);
|
177
|
+
*background-color: #444; /* IE6-7 */
|
178
|
+
color: #fff;
|
179
|
+
}
|
180
|
+
}
|
181
|
+
&.active a {
|
182
|
+
background-color: rgba(255,255,255,.1);
|
183
|
+
font-weight: bold;
|
184
|
+
}
|
185
|
+
}
|
186
|
+
}
|
187
|
+
}
|
188
|
+
}
|
189
|
+
li ul {
|
190
|
+
background-color: #333;
|
191
|
+
float: left;
|
192
|
+
display: none;
|
193
|
+
position: absolute;
|
194
|
+
top: 40px;
|
195
|
+
min-width: 160px;
|
196
|
+
max-width: 220px;
|
197
|
+
_width: 160px;
|
198
|
+
margin-left: 0;
|
199
|
+
margin-right: 0;
|
200
|
+
padding: 0;
|
201
|
+
text-align: left;
|
202
|
+
border: 0;
|
203
|
+
zoom: 1;
|
204
|
+
.border-radius(0 0 5px 5px);
|
205
|
+
.box-shadow(0 1px 2px rgba(0,0,0,0.6));
|
206
|
+
li {
|
207
|
+
float: none;
|
208
|
+
clear: both;
|
209
|
+
display: block;
|
210
|
+
background: none;
|
211
|
+
font-size: 12px;
|
212
|
+
a {
|
213
|
+
display: block;
|
214
|
+
padding: 6px 15px;
|
215
|
+
clear: both;
|
216
|
+
font-weight: normal;
|
217
|
+
line-height: 19px;
|
218
|
+
color: #bbb;
|
219
|
+
&:hover {
|
220
|
+
background-color: #333;
|
221
|
+
background-color: rgba(255,255,255,.25);
|
222
|
+
color: #fff;
|
223
|
+
}
|
224
|
+
}
|
225
|
+
|
226
|
+
// Dividers (basically an hr)
|
227
|
+
&.divider {
|
228
|
+
height: 1px;
|
229
|
+
overflow: hidden;
|
230
|
+
background: #222;
|
231
|
+
background: rgba(0,0,0,.2);
|
232
|
+
border-bottom: 1px solid rgba(255,255,255,.1);
|
233
|
+
margin: 5px 0;
|
234
|
+
}
|
235
|
+
|
236
|
+
// Section separaters
|
237
|
+
span {
|
238
|
+
clear: both;
|
239
|
+
display: block;
|
240
|
+
background: rgba(0,0,0,.2);
|
241
|
+
padding: 6px 15px;
|
242
|
+
cursor: default;
|
243
|
+
color: @gray;
|
244
|
+
border-top: 1px solid rgba(0,0,0,.2);
|
245
|
+
}
|
246
|
+
}
|
247
|
+
}
|
248
|
+
}
|
249
|
+
}
|
250
|
+
|
251
|
+
|
252
|
+
// PAGE HEADERS
|
253
|
+
// ------------
|
254
|
+
|
255
|
+
.hero-unit {
|
256
|
+
background-color: #f5f5f5;
|
257
|
+
margin-top: 60px;
|
258
|
+
margin-bottom: 30px;
|
259
|
+
padding: 60px;
|
260
|
+
.border-radius(6px);
|
261
|
+
h1 {
|
262
|
+
margin-bottom: 0;
|
263
|
+
font-size: 60px;
|
264
|
+
line-height: 1;
|
265
|
+
letter-spacing: -1px;
|
266
|
+
}
|
267
|
+
p {
|
268
|
+
font-size: 18px;
|
269
|
+
font-weight: 200;
|
270
|
+
line-height: @baseline * 1.5;
|
271
|
+
}
|
272
|
+
}
|
273
|
+
footer {
|
274
|
+
margin-top: @baseline - 1;
|
275
|
+
padding-top: @baseline - 1;
|
276
|
+
border-top: 1px solid #eee;
|
277
|
+
}
|
278
|
+
|
279
|
+
// PAGE HEADERS
|
280
|
+
// ------------
|
281
|
+
|
282
|
+
.page-header {
|
283
|
+
margin-bottom: @baseline - 1;
|
284
|
+
border-bottom: 1px solid #ddd;
|
285
|
+
.box-shadow(0 1px 0 rgba(255,255,255,.5));
|
286
|
+
h1 {
|
287
|
+
margin-bottom: (@baseline / 2) - 1px;
|
288
|
+
}
|
289
|
+
}
|
290
|
+
|
291
|
+
// BUTTON STYLES
|
292
|
+
// -------------
|
293
|
+
|
294
|
+
|
295
|
+
// Base .btn styles
|
296
|
+
.btn {
|
297
|
+
// Button Base
|
298
|
+
cursor: pointer;
|
299
|
+
display: inline-block;
|
300
|
+
#gradient > .vertical-three-colors(#fff, #fff, 0.25, darken(#fff, 10%));
|
301
|
+
padding: 5px 14px 6px;
|
302
|
+
text-shadow: 0 1px 1px rgba(255,255,255,.75);
|
303
|
+
color: #333;
|
304
|
+
font-size: 13px;
|
305
|
+
line-height: normal;
|
306
|
+
border: 1px solid #ccc;
|
307
|
+
border-bottom-color: #bbb;
|
308
|
+
.border-radius(4px);
|
309
|
+
@shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
|
310
|
+
.box-shadow(@shadow);
|
311
|
+
|
312
|
+
&:hover {
|
313
|
+
background-position: 0 -15px;
|
314
|
+
color: #333;
|
315
|
+
text-decoration: none;
|
316
|
+
}
|
317
|
+
|
318
|
+
// Primary Button Type
|
319
|
+
&.primary {
|
320
|
+
color:#fff;
|
321
|
+
.gradientBar(@blue, @blueDark)
|
322
|
+
}
|
323
|
+
|
324
|
+
// Transitions
|
325
|
+
.transition(.1s linear all);
|
326
|
+
|
327
|
+
// Active and Disabled states
|
328
|
+
&.disabled {
|
329
|
+
cursor: default;
|
330
|
+
background-image: none;
|
331
|
+
.opacity(65);
|
332
|
+
}
|
333
|
+
|
334
|
+
&:disabled {
|
335
|
+
// disabled pseudo can't be included with .disabled
|
336
|
+
// def because IE8 and below will drop it ;_;
|
337
|
+
cursor: default;
|
338
|
+
background-image: none;
|
339
|
+
.opacity(65);
|
340
|
+
}
|
341
|
+
|
342
|
+
&:active {
|
343
|
+
@shadow: inset 0 3px 7px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.05);
|
344
|
+
.box-shadow(@shadow);
|
345
|
+
}
|
346
|
+
|
347
|
+
// Button Sizes
|
348
|
+
&.large {
|
349
|
+
font-size: 16px;
|
350
|
+
line-height: normal;
|
351
|
+
padding: 9px 14px 9px;
|
352
|
+
.border-radius(6px);
|
353
|
+
}
|
354
|
+
|
355
|
+
&.small {
|
356
|
+
padding: 7px 9px 7px;
|
357
|
+
font-size: 11px;
|
358
|
+
}
|
359
|
+
|
360
|
+
}
|
361
|
+
|
362
|
+
// Help Firefox not be a jerk about adding extra padding to buttons
|
363
|
+
button.btn,
|
364
|
+
input[type=submit].btn {
|
365
|
+
&::-moz-focus-inner {
|
366
|
+
padding: 0;
|
367
|
+
border: 0;
|
368
|
+
}
|
369
|
+
}
|
370
|
+
|
371
|
+
|
372
|
+
|
373
|
+
// ERROR STYLES
|
374
|
+
// ------------
|
375
|
+
|
376
|
+
// Base alert styles
|
377
|
+
.alert-message {
|
378
|
+
.gradientBar(#fceec1, #eedc94); // warning by default
|
379
|
+
margin-bottom: @baseline;
|
380
|
+
padding: 7px 14px;
|
381
|
+
color: @grayDark;
|
382
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
383
|
+
border-width: 1px;
|
384
|
+
border-style: solid;
|
385
|
+
.border-radius(4px);
|
386
|
+
.box-shadow(inset 0 1px 0 rgba(255,255,255,.25));
|
387
|
+
|
388
|
+
// Remove extra margin from content
|
389
|
+
h5 {
|
390
|
+
line-height: @baseline;
|
391
|
+
}
|
392
|
+
p {
|
393
|
+
margin-bottom: 0;
|
394
|
+
}
|
395
|
+
div {
|
396
|
+
margin-top: 5px;
|
397
|
+
margin-bottom: 2px;
|
398
|
+
line-height: 28px;
|
399
|
+
}
|
400
|
+
.btn {
|
401
|
+
// Provide actions with buttons
|
402
|
+
.box-shadow(0 1px 0 rgba(255,255,255,.25));
|
403
|
+
}
|
404
|
+
.close {
|
405
|
+
float: right;
|
406
|
+
margin-top: -2px;
|
407
|
+
color: @black;
|
408
|
+
font-size: 20px;
|
409
|
+
font-weight: bold;
|
410
|
+
text-shadow: 0 1px 0 rgba(255,255,255,1);
|
411
|
+
.opacity(20);
|
412
|
+
&:hover {
|
413
|
+
color: @black;
|
414
|
+
text-decoration: none;
|
415
|
+
.opacity(40);
|
416
|
+
}
|
417
|
+
}
|
418
|
+
|
419
|
+
&.block-message {
|
420
|
+
background-image: none;
|
421
|
+
background-color: lighten(#fceec1, 5%);
|
422
|
+
padding: 14px;
|
423
|
+
border-color: #fceec1;
|
424
|
+
.box-shadow(none);
|
425
|
+
|
426
|
+
p {
|
427
|
+
margin-right: 30px;
|
428
|
+
}
|
429
|
+
.alert-actions {
|
430
|
+
margin-top: 5px;
|
431
|
+
}
|
432
|
+
&.error,
|
433
|
+
&.success,
|
434
|
+
&.info {
|
435
|
+
color: @grayDark;
|
436
|
+
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
437
|
+
}
|
438
|
+
&.error {
|
439
|
+
background-color: lighten(#f56a66, 25%);
|
440
|
+
border-color: lighten(#f56a66, 20%);
|
441
|
+
}
|
442
|
+
&.success {
|
443
|
+
background-color: lighten(#62c462, 30%);
|
444
|
+
border-color: lighten(#62c462, 25%);
|
445
|
+
}
|
446
|
+
&.info {
|
447
|
+
background-color: lighten(#6bd0ee, 25%);
|
448
|
+
border-color: lighten(#6bd0ee, 20%);
|
449
|
+
}
|
450
|
+
}
|
451
|
+
}
|
452
|
+
|
453
|
+
// NAVIGATION
|
454
|
+
// ----------
|
455
|
+
|
456
|
+
// Common tab and pill styles
|
457
|
+
.tabs,
|
458
|
+
.pills {
|
459
|
+
margin: 0 0 20px;
|
460
|
+
padding: 0;
|
461
|
+
.clearfix();
|
462
|
+
li {
|
463
|
+
display: inline;
|
464
|
+
a {
|
465
|
+
float: left;
|
466
|
+
width: auto;
|
467
|
+
}
|
468
|
+
}
|
469
|
+
}
|
470
|
+
|
471
|
+
// Basic Tabs
|
472
|
+
.tabs {
|
473
|
+
width: 100%;
|
474
|
+
border-bottom: 1px solid @grayLight;
|
475
|
+
li {
|
476
|
+
a {
|
477
|
+
margin-bottom: -1px;
|
478
|
+
margin-right: 2px;
|
479
|
+
padding: 0 15px;
|
480
|
+
line-height: (@baseline * 2) - 1;
|
481
|
+
.border-radius(3px 3px 0 0);
|
482
|
+
&:hover {
|
483
|
+
background-color: @grayLighter;
|
484
|
+
border-bottom: 1px solid @grayLight;
|
485
|
+
}
|
486
|
+
}
|
487
|
+
&.active a {
|
488
|
+
background-color: #fff;
|
489
|
+
padding: 0 14px;
|
490
|
+
border: 1px solid #ccc;
|
491
|
+
border-bottom: 0;
|
492
|
+
color: @gray;
|
493
|
+
}
|
494
|
+
}
|
495
|
+
}
|
496
|
+
|
497
|
+
// Basic pill nav
|
498
|
+
.pills {
|
499
|
+
li {
|
500
|
+
a {
|
501
|
+
margin: 5px 3px 5px 0;
|
502
|
+
padding: 0 15px;
|
503
|
+
text-shadow: 0 1px 1px #fff;
|
504
|
+
line-height: 30px;
|
505
|
+
.border-radius(15px);
|
506
|
+
&:hover {
|
507
|
+
background: @linkColorHover;
|
508
|
+
color: #fff;
|
509
|
+
text-decoration: none;
|
510
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
511
|
+
}
|
512
|
+
}
|
513
|
+
&.active a {
|
514
|
+
background: @linkColor;
|
515
|
+
color: #fff;
|
516
|
+
text-shadow: 0 1px 1px rgba(0,0,0,.25);
|
517
|
+
}
|
518
|
+
}
|
519
|
+
}
|
520
|
+
|
521
|
+
|
522
|
+
// PAGINATION
|
523
|
+
// ----------
|
524
|
+
|
525
|
+
.pagination {
|
526
|
+
height: @baseline * 2;
|
527
|
+
margin: @baseline 0;
|
528
|
+
ul {
|
529
|
+
float: left;
|
530
|
+
margin: 0;
|
531
|
+
border: 1px solid #ddd;
|
532
|
+
border: 1px solid rgba(0,0,0,.15);
|
533
|
+
.border-radius(3px);
|
534
|
+
.box-shadow(0 1px 2px rgba(0,0,0,.05));
|
535
|
+
li {
|
536
|
+
display: inline;
|
537
|
+
a {
|
538
|
+
float: left;
|
539
|
+
padding: 0 14px;
|
540
|
+
line-height: (@baseline * 2) - 2;
|
541
|
+
border-right: 1px solid;
|
542
|
+
border-right-color: #ddd;
|
543
|
+
border-right-color: rgba(0,0,0,.15);
|
544
|
+
*border-right-color: #ddd; /* IE6-7 */
|
545
|
+
text-decoration: none;
|
546
|
+
}
|
547
|
+
a:hover,
|
548
|
+
&.active a {
|
549
|
+
background-color: lighten(@blue, 45%);
|
550
|
+
}
|
551
|
+
&.disabled a,
|
552
|
+
&.disabled a:hover {
|
553
|
+
background-color: transparent;
|
554
|
+
color: @grayLight;
|
555
|
+
}
|
556
|
+
&.next a {
|
557
|
+
border: 0;
|
558
|
+
}
|
559
|
+
}
|
560
|
+
}
|
561
|
+
}
|
562
|
+
|
563
|
+
|
564
|
+
// WELLS
|
565
|
+
// -----
|
566
|
+
|
567
|
+
.well {
|
568
|
+
background-color: #f5f5f5;
|
569
|
+
margin-bottom: 20px;
|
570
|
+
padding: 19px;
|
571
|
+
min-height: 20px;
|
572
|
+
border: 1px solid #eee;
|
573
|
+
border: 1px solid rgba(0,0,0,.05);
|
574
|
+
.border-radius(4px);
|
575
|
+
.box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
|
576
|
+
}
|
577
|
+
|
578
|
+
|
579
|
+
// MODALS
|
580
|
+
// ------
|
581
|
+
|
582
|
+
.modal-backdrop {
|
583
|
+
background-color: rgba(0,0,0,.5);
|
584
|
+
position: fixed;
|
585
|
+
top: 0;
|
586
|
+
left: 0;
|
587
|
+
right: 0;
|
588
|
+
bottom: 0;
|
589
|
+
z-index: 1000;
|
590
|
+
}
|
591
|
+
.modal {
|
592
|
+
position: fixed;
|
593
|
+
top: 50%;
|
594
|
+
left: 50%;
|
595
|
+
z-index: 2000;
|
596
|
+
width: 560px;
|
597
|
+
margin: -280px 0 0 -250px;
|
598
|
+
background-color: @white;
|
599
|
+
border: 1px solid #999;
|
600
|
+
border: 1px solid rgba(0,0,0,.3);
|
601
|
+
*border: 1px solid #999; /* IE6-7 */
|
602
|
+
.border-radius(6px);
|
603
|
+
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
604
|
+
.background-clip(padding-box);
|
605
|
+
.modal-header {
|
606
|
+
border-bottom: 1px solid #eee;
|
607
|
+
padding: 5px 20px;
|
608
|
+
.close {
|
609
|
+
position: absolute;
|
610
|
+
right: 10px;
|
611
|
+
top: 10px;
|
612
|
+
color: #999;
|
613
|
+
line-height:10px;
|
614
|
+
font-size: 18px;
|
615
|
+
}
|
616
|
+
}
|
617
|
+
.modal-body {
|
618
|
+
padding: 20px;
|
619
|
+
}
|
620
|
+
.modal-footer {
|
621
|
+
background-color: #f5f5f5;
|
622
|
+
padding: 14px 20px 15px;
|
623
|
+
border-top: 1px solid #ddd;
|
624
|
+
.border-radius(0 0 6px 6px);
|
625
|
+
.box-shadow(inset 0 1px 0 #fff);
|
626
|
+
.clearfix();
|
627
|
+
margin-bottom: 0;
|
628
|
+
.btn {
|
629
|
+
float: right;
|
630
|
+
margin-left: 10px;
|
631
|
+
}
|
632
|
+
}
|
633
|
+
}
|
634
|
+
|
635
|
+
|
636
|
+
// POPOVER ARROWS
|
637
|
+
// --------------
|
638
|
+
|
639
|
+
#popoverArrow {
|
640
|
+
.above(@arrowWidth: 5px) {
|
641
|
+
bottom: 0;
|
642
|
+
left: 50%;
|
643
|
+
margin-left: -@arrowWidth;
|
644
|
+
border-left: @arrowWidth solid transparent;
|
645
|
+
border-right: @arrowWidth solid transparent;
|
646
|
+
border-top: @arrowWidth solid #000;
|
647
|
+
}
|
648
|
+
.left(@arrowWidth: 5px) {
|
649
|
+
top: 50%;
|
650
|
+
right: 0;
|
651
|
+
margin-top: -@arrowWidth;
|
652
|
+
border-top: @arrowWidth solid transparent;
|
653
|
+
border-bottom: @arrowWidth solid transparent;
|
654
|
+
border-left: @arrowWidth solid #000;
|
655
|
+
}
|
656
|
+
.below(@arrowWidth: 5px) {
|
657
|
+
top: 0;
|
658
|
+
left: 50%;
|
659
|
+
margin-left: -@arrowWidth;
|
660
|
+
border-left: @arrowWidth solid transparent;
|
661
|
+
border-right: @arrowWidth solid transparent;
|
662
|
+
border-bottom: @arrowWidth solid #000;
|
663
|
+
}
|
664
|
+
.right(@arrowWidth: 5px) {
|
665
|
+
top: 50%;
|
666
|
+
left: 0;
|
667
|
+
margin-top: -@arrowWidth;
|
668
|
+
border-top: @arrowWidth solid transparent;
|
669
|
+
border-bottom: @arrowWidth solid transparent;
|
670
|
+
border-right: @arrowWidth solid #000;
|
671
|
+
}
|
672
|
+
}
|
673
|
+
|
674
|
+
// TWIPSY
|
675
|
+
// ------
|
676
|
+
|
677
|
+
.twipsy {
|
678
|
+
display: block;
|
679
|
+
position: absolute;
|
680
|
+
visibility: visible;
|
681
|
+
padding: 5px;
|
682
|
+
font-size: 11px;
|
683
|
+
z-index: 1000;
|
684
|
+
.opacity(80);
|
685
|
+
&.above .twipsy-arrow { #popoverArrow > .above(); }
|
686
|
+
&.left .twipsy-arrow { #popoverArrow > .left(); }
|
687
|
+
&.below .twipsy-arrow { #popoverArrow > .below(); }
|
688
|
+
&.right .twipsy-arrow { #popoverArrow > .right(); }
|
689
|
+
.twipsy-inner {
|
690
|
+
padding: 3px 8px;
|
691
|
+
background-color: #000;
|
692
|
+
color: white;
|
693
|
+
text-align: center;
|
694
|
+
max-width: 200px;
|
695
|
+
text-decoration: none;
|
696
|
+
.border-radius(4px);
|
697
|
+
}
|
698
|
+
.twipsy-arrow {
|
699
|
+
position: absolute;
|
700
|
+
width: 0;
|
701
|
+
height: 0;
|
702
|
+
}
|
703
|
+
}
|
704
|
+
|
705
|
+
|
706
|
+
// POPOVERS
|
707
|
+
// --------
|
708
|
+
|
709
|
+
.popover {
|
710
|
+
position: absolute;
|
711
|
+
top: 0;
|
712
|
+
left: 0;
|
713
|
+
z-index: 1000;
|
714
|
+
padding: 5px;
|
715
|
+
display: none;
|
716
|
+
&.above .arrow { #popoverArrow > .above(); }
|
717
|
+
&.right .arrow { #popoverArrow > .right(); }
|
718
|
+
&.below .arrow { #popoverArrow > .below(); }
|
719
|
+
&.left .arrow { #popoverArrow > .left(); }
|
720
|
+
.arrow {
|
721
|
+
position: absolute;
|
722
|
+
width: 0;
|
723
|
+
height: 0;
|
724
|
+
}
|
725
|
+
.inner {
|
726
|
+
background-color: #333;
|
727
|
+
background-color: rgba(0,0,0,.8);
|
728
|
+
*background-color: #333; /* IE 6-7 */
|
729
|
+
padding: 3px;
|
730
|
+
overflow: hidden;
|
731
|
+
width: 280px;
|
732
|
+
.border-radius(6px);
|
733
|
+
.box-shadow(0 3px 7px rgba(0,0,0,0.3));
|
734
|
+
}
|
735
|
+
.title {
|
736
|
+
background-color: #f5f5f5;
|
737
|
+
padding: 9px 15px;
|
738
|
+
line-height: 1;
|
739
|
+
.border-radius(3px 3px 0 0);
|
740
|
+
border-bottom:1px solid #eee;
|
741
|
+
}
|
742
|
+
.content {
|
743
|
+
background-color: @white;
|
744
|
+
padding: 14px;
|
745
|
+
.border-radius(0 0 3px 3px);
|
746
|
+
.background-clip(padding-box);
|
747
|
+
p, ul, ol {
|
748
|
+
margin-bottom: 0;
|
749
|
+
}
|
750
|
+
}
|
751
|
+
}
|