bootswatch-rails 0.0.12 → 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/.gitignore CHANGED
@@ -15,3 +15,4 @@ spec/reports
15
15
  test/tmp
16
16
  test/version_tmp
17
17
  tmp
18
+ .rvmrc
@@ -1,5 +1,5 @@
1
1
  module Bootswatch
2
2
  module Rails
3
- VERSION = "0.0.12"
3
+ VERSION = "0.1.0"
4
4
  end
5
5
  end
@@ -15,7 +15,7 @@
15
15
  // -----------------------------------------------------
16
16
 
17
17
  .navbar-inner {
18
- @include gradient-vertical-three-colors($navbarBackground, $navbarBackground, 90%, $navbarBackgroundHighlight);
18
+ @include gradient-vertical-three-colors($navbarBackground, $navbarBackground, .9, $navbarBackgroundHighlight);
19
19
  }
20
20
 
21
21
  .navbar .nav .active > a,
@@ -54,7 +54,7 @@
54
54
  // -----------------------------------------------------
55
55
 
56
56
  .btn {
57
- @include gradient-vertical-three-colors($white, $white, 5%, darken($white, 0%));
57
+ @include gradient-vertical-three-colors($white, $white, .05, darken($white, 0%));
58
58
  $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
59
59
  @include box-shadow($shadow);
60
60
 
@@ -40,7 +40,12 @@ blockquote {
40
40
  // SCAFFOLDING
41
41
  // -----------------------------------------------------
42
42
 
43
+ html {
44
+ min-height: 100%;
45
+ }
46
+
43
47
  body {
48
+ min-height: 100%;
44
49
  @include gradient-vertical ($bodyBackground, #252A30);
45
50
  }
46
51
 
@@ -1,90 +1,437 @@
1
+ // Bootswatch.less
1
2
  // Swatch: Simplex
2
- // Version: 2.0.2
3
+ // Version: 2.1.1
3
4
  // -----------------------------------------------------
4
5
 
6
+ $boxShadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
7
+
5
8
  // TYPOGRAPHY
6
9
  // -----------------------------------------------------
7
10
 
8
- h6 {
9
- color: $black;
11
+ @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,700');
12
+
13
+ // SCAFFOLDING
14
+ // -----------------------------------------------------
15
+
16
+ hr {
17
+ border-bottom: none;
10
18
  }
11
19
 
12
20
  // NAVBAR
13
21
  // -----------------------------------------------------
14
22
 
15
- .navbar .brand, .subnav a {
16
- color: $navbarText;
17
- }
23
+ .navbar {
24
+
25
+ .navbar-inner {
26
+ @include box-shadow(none);
27
+ }
28
+
29
+ .brand {
30
+ padding: 12px 20px 8px;
31
+ font-family: $headingsFontFamily;
32
+ font-weight: bold;
33
+
34
+ &:hover {
35
+ color: $linkColor;
36
+ }
37
+ }
38
+
39
+ .nav > li > a {
40
+ padding: 13px 15px 6px;
41
+ font-family: $headingsFontFamily;
42
+ font-weight: bold;
43
+ text-shadow: none;
44
+
45
+ &:hover {
46
+ text-decoration: none;
47
+ }
48
+ }
49
+
50
+ .nav .active > a,
51
+ .nav .active > a:hover {
52
+ background-color: transparent;
53
+ }
54
+
55
+ .navbar-text {
56
+ padding: 13px 15px 7px;
57
+ line-height: 19px;
58
+ font-family: $headingsFontFamily;
59
+ color: $grayLight;
60
+ }
18
61
 
19
- .navbar .nav .active > a,
20
- .navbar .nav .active > a:hover {
21
- background-color: $grayDarker;
22
- color: $white;
62
+ .divider-vertical {
63
+ height: $navbarHeight - 1;
64
+ background-color: $hrBorder;
65
+ }
66
+
67
+ .navbar-search {
68
+ margin-top: 5px;
69
+
70
+ input[type="text"] {
71
+ margin-bottom: 5px;
72
+ }
73
+ }
74
+
75
+ .dropdown-menu a {
76
+ font-family: $headingsFontFamily;
77
+ }
23
78
  }
24
79
 
25
- .navbar .nav > li > a {
26
- text-shadow: none;
27
- &:hover {
80
+ .navbar-inverse {
81
+
82
+ .navbar-inner {
83
+ @include box-shadow(none);
84
+ }
85
+
86
+ .brand:hover {
28
87
  color: $white;
29
- background-color: rgba(255, 255, 255, 0.2);
30
88
  }
31
89
  }
32
90
 
33
- .subnav .nav > li > a {
34
- border-left: 0px solid white !important;
35
- border-right: 0px solid white !important;
36
- color: $grayDark;
91
+
92
+ @media (max-width: $navbarCollapseWidth) {
93
+
94
+ .navbar .nav-collapse {
95
+
96
+ .nav li > a {
97
+ color: $textColor;
98
+
99
+ &:hover {
100
+ background-image: none;
101
+ background-color: $dropdownLinkBackgroundHover;
102
+ }
103
+ }
104
+
105
+ .nav .active > a {
106
+ @include box-shadow(none);
107
+ }
108
+
109
+ .navbar-form,
110
+ .navbar-search {
111
+ border-top: 1px solid rgba(128, 128, 128, 0.3);
112
+ border-bottom: 1px solid rgba(128, 128, 128, 0.3);
113
+ }
114
+ }
115
+
116
+ .navbar-inverse .nav-collapse {
117
+
118
+ .nav li > a {
119
+ color: $white;
120
+
121
+ &:hover {
122
+ background-color: rgba(255, 255, 255, 0.1) !important;
123
+ }
124
+ }
125
+
126
+ .nav-header {
127
+ color: rgba(255, 255, 255, 0.7);
128
+ }
129
+ }
37
130
  }
38
131
 
39
- .btn-navbar:hover {
40
- background-color: darken($white, 20%);
41
- background-position: 0 0;
132
+ div.subnav {
133
+
134
+ background-image: none;
135
+ background-color: $navbarBackground;
136
+ border-bottom: 1px solid transparent;
137
+ @include box-shadow($boxShadow);
138
+ font-family: $headingsFontFamily;
139
+
140
+ &.subnav-fixed {
141
+ @include box-shadow(#{inset 0 5px #fff, $boxShadow});
142
+ }
143
+
144
+ .nav > li > a {
145
+ padding: 14px 12px 10px;
146
+ border-left-color: transparent;
147
+ border-right-color: transparent;
148
+ color: $navbarText;
149
+ font-weight: bold;
150
+
151
+ &:hover {
152
+ background-color: transparent;
153
+ color: $linkColor;
154
+ }
155
+ }
156
+
157
+ .nav > li.active > a,
158
+ .nav > li.active > a:hover {
159
+ border-left-color: transparent;
160
+ border-right-color: transparent;
161
+ background-color: transparent;
162
+ @include box-shadow(none);
163
+ color: $linkColor;
164
+ }
42
165
  }
43
166
 
44
- // FORMS
167
+ // NAV
45
168
  // -----------------------------------------------------
46
169
 
47
- .search-query {
48
- border: 1px solid #CCC;
49
- @include border-radius(2px);
170
+ .nav .nav-header {
171
+ font-size: 13px;
172
+ font-weight: normal;
173
+ text-transform: none;
174
+ }
175
+
176
+ .nav-tabs {
177
+
178
+ & > li > a {
179
+ background-color: darken($bodyBackground, 3%);
180
+ border: 1px solid #ccc;
181
+ color: $textColor;
182
+
183
+ &:hover {
184
+ border: 1px solid #ccc;
185
+ background-color: $dropdownLinkBackgroundHover;
186
+ color: $linkColor;
187
+ }
188
+ }
189
+
190
+ & > li.active > a,
191
+ & > li.active > a:hover {
192
+ background-color: $bodyBackground;
193
+ }
194
+
195
+ .dropdown {
196
+
197
+ .dropdown-toggle .caret {
198
+ border-top-color: $textColor;
199
+ border-bottom-color: $textColor;
200
+ opacity: 1;
201
+ }
202
+
203
+ &:hover .dropdown-toggle .caret {
204
+ border-top-color: $linkColor;
205
+ border-bottom-color: $linkColor;
206
+ }
207
+ }
208
+
209
+ .dropdown.open .dropdown-toggle {
210
+
211
+ background-color: $dropdownLinkBackgroundHover;
212
+ border-color: #ccc;
213
+ color: $linkColor;
214
+
215
+ .caret,
216
+ &:hover .caret {
217
+ border-top-color: $linkColor;
218
+ border-bottom-color: $linkColor;
219
+ opacity: 1;
220
+ }
221
+ }
222
+
223
+ .dropdown-menu {
224
+
225
+ @include border-radius(0);
226
+
227
+ a {
228
+ padding: 8px 15px 3px;
229
+ }
230
+ }
231
+ }
232
+
233
+ .tabbable {
234
+
235
+ .nav-tabs > li > a,
236
+ .nav-tabs > li > a:hover {
237
+ border: 1px solid #ccc;
238
+ }
239
+
240
+ .nav-tabs > li.active > a {
241
+ border-bottom: 1px solid transparent;
242
+ }
243
+
244
+ &.tabs-below > .nav-tabs > li.active > a,
245
+ &.tabs-left > .nav-tabs > li.active > a,
246
+ &.tabs-right > .nav-tabs > li.active > a {
247
+ border-bottom: 1px solid #ccc;
248
+ }
249
+ }
250
+
251
+ .nav-pills {
252
+
253
+ li > a {
254
+ color: $textColor;
255
+
256
+ &:hover {
257
+ background-color: $dropdownLinkBackgroundHover;
258
+ color: $linkColor;
259
+ }
260
+ }
261
+
262
+ li.active > a,
263
+ li.active > a:hover {
264
+ background-color: $dropdownLinkBackgroundHover;
265
+ color: $linkColor;
266
+ }
267
+
268
+ .dropdown .dropdown-toggle .caret {
269
+ border-top-color: $textColor;
270
+ border-bottom-color: $textColor;
271
+ opacity: 1;
272
+ }
273
+
274
+ .dropdown .dropdown-toggle:hover .caret {
275
+ border-top-color: $linkColor;
276
+ border-bottom-color: $linkColor;
277
+ }
278
+
279
+ .dropdown.open .dropdown-toggle,
280
+ .dropdown.open:hover .dropdown-toggle {
281
+ background-color: $dropdownLinkBackgroundHover;
282
+ color: $linkColor;
283
+
284
+ .caret {
285
+ border-top-color: $linkColor;
286
+ border-bottom-color: $linkColor;
287
+ }
288
+ }
289
+ }
290
+
291
+ .nav-list {
292
+
293
+ li > a {
294
+ color: $textColor;
295
+
296
+ &:hover {
297
+ background-color: $dropdownLinkBackgroundHover;
298
+ color: $linkColor;
299
+ }
300
+ }
301
+
302
+ li.active > a,
303
+ li.active > a:hover {
304
+ background-color: $dropdownLinkBackgroundHover;
305
+ color: $linkColor;
306
+ }
307
+ }
308
+
309
+ .breadcrumb {
310
+ @include box-shadow(#{$boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1)});
311
+ border: 0px solid transparent;
312
+
313
+ li {
314
+ padding-top: 5px;
315
+ text-shadow: none;
316
+ }
317
+
318
+ a {
319
+ text-shadow: none;
320
+ }
321
+
322
+ a:hover {
323
+ text-decoration: none;
324
+ }
50
325
  }
51
326
 
327
+ .pagination {
328
+
329
+ li > a {
330
+ padding: 4px 14px 0;
331
+ color: $textColor;
332
+
333
+ &:hover {
334
+ background-color: $dropdownLinkBackgroundHover;
335
+ color: $linkColor;
336
+ }
337
+ }
338
+
339
+ li.active > a {
340
+ background-color: $dropdownLinkBackgroundHover;
341
+ color: $linkColor;
342
+ }
343
+ }
344
+
345
+
52
346
  // BUTTONS
53
347
  // -----------------------------------------------------
54
348
 
55
349
  .btn {
56
- @include border-radius(2px);
57
- @include gradient-vertical-three-colors($white, $white, 25%, darken($white, 10%));
350
+ padding-top: .6em;
351
+ font-family: $headingsFontFamily;
352
+ font-weight: bold;
58
353
  }
59
354
 
60
- .btn-primary {
61
- @include buttonBackground(lighten($btnPrimaryBackground, 5%), $btnPrimaryBackground);
62
- }
355
+ // TABLES
356
+ // -----------------------------------------------------
357
+
358
+ // FORMS
359
+ // -----------------------------------------------------
63
360
 
64
- .btn-warning {
65
- @include buttonBackground(lighten($orange, 5%), $orange);
361
+ legend {
362
+ border-bottom: 1px solid #ddd;
363
+ font-family: $headingsFontFamily;
66
364
  }
67
365
 
68
- .btn-danger {
69
- @include buttonBackground(lighten($red, 5%), $red);
366
+ .navbar-search .search-query {
367
+ border: 1px solid #ddd;
368
+ @include border-radius(0);
369
+ background-color: $bodyBackground;
370
+ color: $gray;
70
371
  }
71
372
 
72
- .btn-success {
73
- @include buttonBackground(lighten($green, 5%), $green);
373
+ .help-inline, .help-block {
374
+ font-size: 13px;
74
375
  }
75
376
 
76
- .btn-info {
77
- @include buttonBackground(lighten(#5bc0de, 5%), #5bc0de);
377
+ .input-append .btn,
378
+ .input-prepend .btn {
379
+ line-height: 16px;
78
380
  }
79
381
 
80
- .btn-inverse {
81
- @include buttonBackground(lighten($purple, 5%), $purple);
382
+ // DROPDOWNS
383
+ // -----------------------------------------------------
384
+
385
+ // ALERTS, LABELS, BADGES
386
+ // -----------------------------------------------------
387
+
388
+ .label {
389
+ padding: 4px 4px 3px;
390
+ margin-left: 1px;
391
+ margin-right: 1px;
392
+ line-height: 26px;
393
+ font-weight: normal;
82
394
  }
83
395
 
84
396
  // MISCELLANEOUS
85
397
  // -----------------------------------------------------
86
398
 
87
- // Make icons gray
88
399
  i[class^="icon-"]{
89
- opacity: 0.6;
400
+ opacity: 0.5;
401
+ vertical-align: -2px;
402
+ }
403
+
404
+ .well {
405
+ @include box-shadow(#{$boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1)});
406
+ border: none;
407
+ }
408
+
409
+ .hero-unit {
410
+ background-color: $navbarBackground;
411
+ @include box-shadow(#{$boxShadow, -1px -1px 0 rgba(0, 0, 0, 0.1)});
412
+ }
413
+
414
+ .thumbnail {
415
+ padding: 10px;
416
+ background-color: $white;
417
+ }
418
+
419
+ .progress {
420
+ @include gradient-vertical(#e0e0e0, #e8e8e8);
90
421
  }
422
+
423
+ .modal-header {
424
+ border-bottom: none;
425
+ }
426
+
427
+ .modal-header,
428
+ .modal-body {
429
+ background-color: $navbarBackground;
430
+ }
431
+
432
+ .modal-footer {
433
+ background-color: $bodyBackground;
434
+ }
435
+
436
+ // MEDIA QUERIES
437
+ // -----------------------------------------------------