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