bootstrap-generators 3.0.2.2 → 3.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.
Files changed (98) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/Rakefile +7 -6
  4. data/bootstrap-generators.gemspec +1 -1
  5. data/lib/bootstrap/generators/version.rb +1 -1
  6. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.less +354 -164
  7. data/lib/generators/bootstrap/install/templates/assets/stylesheets/bootstrap-variables.scss +359 -165
  8. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.erb +3 -3
  9. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.haml +3 -3
  10. data/lib/generators/bootstrap/install/templates/form_builders/form_builder/_form.html.slim +3 -3
  11. data/lib/generators/bootstrap/install/templates/layouts/starter.html.erb +1 -0
  12. data/lib/generators/bootstrap/install/templates/layouts/starter.html.haml +1 -0
  13. data/lib/generators/bootstrap/install/templates/layouts/starter.html.slim +2 -0
  14. data/readme-template.md.erb +14 -0
  15. data/vendor/assets/fonts/{glyphicons-halflings-regular.eot → bootstrap/glyphicons-halflings-regular.eot} +0 -0
  16. data/vendor/assets/fonts/{glyphicons-halflings-regular.svg → bootstrap/glyphicons-halflings-regular.svg} +0 -0
  17. data/vendor/assets/fonts/{glyphicons-halflings-regular.ttf → bootstrap/glyphicons-halflings-regular.ttf} +0 -0
  18. data/vendor/assets/fonts/{glyphicons-halflings-regular.woff → bootstrap/glyphicons-halflings-regular.woff} +0 -0
  19. data/vendor/assets/javascripts/bootstrap/affix.js +34 -23
  20. data/vendor/assets/javascripts/bootstrap/alert.js +5 -15
  21. data/vendor/assets/javascripts/bootstrap/button.js +24 -26
  22. data/vendor/assets/javascripts/bootstrap/carousel.js +20 -32
  23. data/vendor/assets/javascripts/bootstrap/collapse.js +7 -16
  24. data/vendor/assets/javascripts/bootstrap/dropdown.js +23 -30
  25. data/vendor/assets/javascripts/bootstrap/modal.js +25 -28
  26. data/vendor/assets/javascripts/bootstrap/popover.js +14 -21
  27. data/vendor/assets/javascripts/bootstrap/scrollspy.js +17 -22
  28. data/vendor/assets/javascripts/bootstrap/tab.js +7 -17
  29. data/vendor/assets/javascripts/bootstrap/tooltip.js +52 -39
  30. data/vendor/assets/javascripts/bootstrap/transition.js +11 -19
  31. data/vendor/assets/stylesheets/bootstrap.css +1209 -2476
  32. data/vendor/twitter/bootstrap/less/badges.less +10 -6
  33. data/vendor/twitter/bootstrap/less/breadcrumbs.less +4 -1
  34. data/vendor/twitter/bootstrap/less/button-groups.less +17 -44
  35. data/vendor/twitter/bootstrap/less/buttons.less +10 -13
  36. data/vendor/twitter/bootstrap/less/carousel.less +1 -0
  37. data/vendor/twitter/bootstrap/less/code.less +10 -0
  38. data/vendor/twitter/bootstrap/less/dropdowns.less +31 -10
  39. data/vendor/twitter/bootstrap/less/forms.less +89 -34
  40. data/vendor/twitter/bootstrap/less/glyphicons.less +5 -9
  41. data/vendor/twitter/bootstrap/less/grid.less +36 -29
  42. data/vendor/twitter/bootstrap/less/input-groups.less +40 -19
  43. data/vendor/twitter/bootstrap/less/jumbotron.less +11 -7
  44. data/vendor/twitter/bootstrap/less/labels.less +6 -0
  45. data/vendor/twitter/bootstrap/less/list-group.less +25 -3
  46. data/vendor/twitter/bootstrap/less/mixins.less +140 -72
  47. data/vendor/twitter/bootstrap/less/modals.less +18 -12
  48. data/vendor/twitter/bootstrap/less/navbar.less +65 -73
  49. data/vendor/twitter/bootstrap/less/navs.less +2 -22
  50. data/vendor/twitter/bootstrap/less/normalize.less +139 -122
  51. data/vendor/twitter/bootstrap/less/pager.less +5 -5
  52. data/vendor/twitter/bootstrap/less/pagination.less +6 -3
  53. data/vendor/twitter/bootstrap/less/panels.less +73 -15
  54. data/vendor/twitter/bootstrap/less/print.less +0 -4
  55. data/vendor/twitter/bootstrap/less/progress-bars.less +0 -12
  56. data/vendor/twitter/bootstrap/less/responsive-utilities.less +13 -129
  57. data/vendor/twitter/bootstrap/less/scaffolding.less +17 -2
  58. data/vendor/twitter/bootstrap/less/tables.less +19 -22
  59. data/vendor/twitter/bootstrap/less/theme.less +1 -1
  60. data/vendor/twitter/bootstrap/less/thumbnails.less +9 -3
  61. data/vendor/twitter/bootstrap/less/tooltip.less +1 -1
  62. data/vendor/twitter/bootstrap/less/type.less +123 -106
  63. data/vendor/twitter/bootstrap/less/variables.less +354 -164
  64. data/vendor/twitter/bootstrap/less/wells.less +1 -1
  65. data/vendor/twitter/bootstrap/sass/_badges.scss +10 -6
  66. data/vendor/twitter/bootstrap/sass/_breadcrumbs.scss +4 -1
  67. data/vendor/twitter/bootstrap/sass/_button-groups.scss +15 -42
  68. data/vendor/twitter/bootstrap/sass/_buttons.scss +10 -13
  69. data/vendor/twitter/bootstrap/sass/_carousel.scss +1 -0
  70. data/vendor/twitter/bootstrap/sass/_code.scss +10 -0
  71. data/vendor/twitter/bootstrap/sass/_dropdowns.scss +31 -11
  72. data/vendor/twitter/bootstrap/sass/_forms.scss +88 -34
  73. data/vendor/twitter/bootstrap/sass/_glyphicons.scss +5 -9
  74. data/vendor/twitter/bootstrap/sass/_grid.scss +36 -29
  75. data/vendor/twitter/bootstrap/sass/_input-groups.scss +40 -19
  76. data/vendor/twitter/bootstrap/sass/_jumbotron.scss +11 -7
  77. data/vendor/twitter/bootstrap/sass/_labels.scss +6 -0
  78. data/vendor/twitter/bootstrap/sass/_list-group.scss +25 -3
  79. data/vendor/twitter/bootstrap/sass/_mixins.scss +135 -65
  80. data/vendor/twitter/bootstrap/sass/_modals.scss +17 -11
  81. data/vendor/twitter/bootstrap/sass/_navbar.scss +62 -70
  82. data/vendor/twitter/bootstrap/sass/_navs.scss +1 -21
  83. data/vendor/twitter/bootstrap/sass/_normalize.scss +139 -122
  84. data/vendor/twitter/bootstrap/sass/_pager.scss +4 -4
  85. data/vendor/twitter/bootstrap/sass/_pagination.scss +6 -3
  86. data/vendor/twitter/bootstrap/sass/_panels.scss +72 -14
  87. data/vendor/twitter/bootstrap/sass/_print.scss +0 -4
  88. data/vendor/twitter/bootstrap/sass/_progress-bars.scss +0 -12
  89. data/vendor/twitter/bootstrap/sass/_responsive-utilities.scss +6 -124
  90. data/vendor/twitter/bootstrap/sass/_scaffolding.scss +17 -2
  91. data/vendor/twitter/bootstrap/sass/_tables.scss +7 -18
  92. data/vendor/twitter/bootstrap/sass/_theme.scss +1 -1
  93. data/vendor/twitter/bootstrap/sass/_thumbnails.scss +13 -7
  94. data/vendor/twitter/bootstrap/sass/_tooltip.scss +1 -1
  95. data/vendor/twitter/bootstrap/sass/_type.scss +122 -105
  96. data/vendor/twitter/bootstrap/sass/_variables.scss +359 -165
  97. data/vendor/twitter/bootstrap/sass/_wells.scss +1 -1
  98. metadata +7 -7
@@ -22,7 +22,12 @@
22
22
  right: 0;
23
23
  bottom: 0;
24
24
  left: 0;
25
- z-index: @zindex-modal-background;
25
+ z-index: @zindex-modal;
26
+ -webkit-overflow-scrolling: touch;
27
+
28
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
29
+ // https://github.com/twbs/bootstrap/pull/10951.
30
+ outline: 0;
26
31
 
27
32
  // When fading in the modal, animate it to slide down
28
33
  &.fade .modal-dialog {
@@ -35,11 +40,8 @@
35
40
  // Shell div to position the modal with bottom padding
36
41
  .modal-dialog {
37
42
  position: relative;
38
- margin-left: auto;
39
- margin-right: auto;
40
43
  width: auto;
41
- padding: 10px;
42
- z-index: (@zindex-modal-background + 10);
44
+ margin: 10px;
43
45
  }
44
46
 
45
47
  // Actual modal
@@ -62,11 +64,11 @@
62
64
  right: 0;
63
65
  bottom: 0;
64
66
  left: 0;
65
- z-index: (@zindex-modal-background - 10);
67
+ z-index: @zindex-modal-background;
66
68
  background-color: @modal-backdrop-bg;
67
69
  // Fade for backdrop
68
70
  &.fade { .opacity(0); }
69
- &.in { .opacity(.5); }
71
+ &.in { .opacity(@modal-backdrop-opacity); }
70
72
  }
71
73
 
72
74
  // Modal header
@@ -100,7 +102,7 @@
100
102
  padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding;
101
103
  text-align: right; // right align buttons
102
104
  border-top: 1px solid @modal-footer-border-color;
103
- .clearfix(); // clear it in case folks use .pull-* classes on buttons
105
+ &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons
104
106
 
105
107
  // Properly space out buttons
106
108
  .btn + .btn {
@@ -118,15 +120,19 @@
118
120
  }
119
121
 
120
122
  // Scale up the modal
121
- @media screen and (min-width: @screen-sm-min) {
123
+ @media (min-width: @screen-sm-min) {
122
124
 
125
+ // Automatically set modal's width for larger viewports
123
126
  .modal-dialog {
124
- width: 600px;
125
- padding-top: 30px;
126
- padding-bottom: 30px;
127
+ width: @modal-md;
128
+ margin: 30px auto;
127
129
  }
128
130
  .modal-content {
129
131
  .box-shadow(0 5px 15px rgba(0,0,0,.5));
130
132
  }
131
133
 
134
+ // Modal sizes
135
+ .modal-sm { width: @modal-sm; }
136
+ .modal-lg { width: @modal-lg; }
137
+
132
138
  }
@@ -15,7 +15,7 @@
15
15
  border: 1px solid transparent;
16
16
 
17
17
  // Prevent floats from breaking the navbar
18
- .clearfix();
18
+ &:extend(.clearfix all);
19
19
 
20
20
  @media (min-width: @grid-float-breakpoint) {
21
21
  border-radius: @navbar-border-radius;
@@ -29,7 +29,7 @@
29
29
  // styling of responsive aspects.
30
30
 
31
31
  .navbar-header {
32
- .clearfix();
32
+ &:extend(.clearfix all);
33
33
 
34
34
  @media (min-width: @grid-float-breakpoint) {
35
35
  float: left;
@@ -48,13 +48,13 @@
48
48
  // content for the user's viewport.
49
49
 
50
50
  .navbar-collapse {
51
- max-height: 340px;
51
+ max-height: @navbar-collapse-max-height;
52
52
  overflow-x: visible;
53
53
  padding-right: @navbar-padding-horizontal;
54
54
  padding-left: @navbar-padding-horizontal;
55
55
  border-top: 1px solid transparent;
56
56
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
57
- .clearfix();
57
+ &:extend(.clearfix all);
58
58
  -webkit-overflow-scrolling: touch;
59
59
 
60
60
  &.in {
@@ -74,18 +74,16 @@
74
74
  }
75
75
 
76
76
  &.in {
77
- overflow-y: auto;
77
+ overflow-y: visible;
78
78
  }
79
79
 
80
- // Account for first and last children spacing
81
- .navbar-nav.navbar-left:first-child {
82
- margin-left: -@navbar-padding-horizontal;
83
- }
84
- .navbar-nav.navbar-right:last-child {
85
- margin-right: -@navbar-padding-horizontal;
86
- }
87
- .navbar-text:last-child {
88
- margin-right: 0;
80
+ // Undo the collapse side padding for navbars with containers to ensure
81
+ // alignment of right-aligned contents.
82
+ .navbar-fixed-top &,
83
+ .navbar-static-top &,
84
+ .navbar-fixed-bottom & {
85
+ padding-left: 0;
86
+ padding-right: 0;
89
87
  }
90
88
  }
91
89
  }
@@ -95,14 +93,17 @@
95
93
  //
96
94
  // When a container is present, change the behavior of the header and collapse.
97
95
 
98
- .container > .navbar-header,
99
- .container > .navbar-collapse {
100
- margin-right: -@navbar-padding-horizontal;
101
- margin-left: -@navbar-padding-horizontal;
96
+ .container,
97
+ .container-fluid {
98
+ > .navbar-header,
99
+ > .navbar-collapse {
100
+ margin-right: -@navbar-padding-horizontal;
101
+ margin-left: -@navbar-padding-horizontal;
102
102
 
103
- @media (min-width: @grid-float-breakpoint) {
104
- margin-right: 0;
105
- margin-left: 0;
103
+ @media (min-width: @grid-float-breakpoint) {
104
+ margin-right: 0;
105
+ margin-left: 0;
106
+ }
106
107
  }
107
108
  }
108
109
 
@@ -154,6 +155,7 @@
154
155
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
155
156
  font-size: @font-size-large;
156
157
  line-height: @line-height-computed;
158
+ height: @line-height-computed;
157
159
 
158
160
  &:hover,
159
161
  &:focus {
@@ -161,7 +163,8 @@
161
163
  }
162
164
 
163
165
  @media (min-width: @grid-float-breakpoint) {
164
- .navbar > .container & {
166
+ .navbar > .container &,
167
+ .navbar > .container-fluid & {
165
168
  margin-left: -@navbar-padding-horizontal;
166
169
  }
167
170
  }
@@ -180,9 +183,16 @@
180
183
  padding: 9px 10px;
181
184
  .navbar-vertical-align(34px);
182
185
  background-color: transparent;
186
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
183
187
  border: 1px solid transparent;
184
188
  border-radius: @border-radius-base;
185
189
 
190
+ // We remove the `outline` here, but later compensate by attaching `:hover`
191
+ // styles to `:focus`.
192
+ &:focus {
193
+ outline: none;
194
+ }
195
+
186
196
  // Bars
187
197
  .icon-bar {
188
198
  display: block;
@@ -202,7 +212,7 @@
202
212
 
203
213
  // Navbar nav links
204
214
  //
205
- // Builds on top of the `.nav` components with it's own modifier class to make
215
+ // Builds on top of the `.nav` components with its own modifier class to make
206
216
  // the nav the full height of the horizontal nav (above 768px).
207
217
 
208
218
  .navbar-nav {
@@ -214,7 +224,7 @@
214
224
  line-height: @line-height-computed;
215
225
  }
216
226
 
217
- @media (max-width: @screen-xs-max) {
227
+ @media (max-width: @grid-float-breakpoint-max) {
218
228
  // Dropdowns get custom display when collapsed
219
229
  .open .dropdown-menu {
220
230
  position: static;
@@ -246,12 +256,15 @@
246
256
  > li {
247
257
  float: left;
248
258
  > a {
249
- padding-top: ((@navbar-height - @line-height-computed) / 2);
250
- padding-bottom: ((@navbar-height - @line-height-computed) / 2);
259
+ padding-top: @navbar-padding-vertical;
260
+ padding-bottom: @navbar-padding-vertical;
251
261
  }
252
262
  }
253
- }
254
263
 
264
+ &.navbar-right:last-child {
265
+ margin-right: -@navbar-padding-horizontal;
266
+ }
267
+ }
255
268
  }
256
269
 
257
270
 
@@ -285,7 +298,7 @@
285
298
  .form-inline();
286
299
 
287
300
  .form-group {
288
- @media (max-width: @screen-xs-max) {
301
+ @media (max-width: @grid-float-breakpoint-max) {
289
302
  margin-bottom: 5px;
290
303
  }
291
304
  }
@@ -302,6 +315,11 @@
302
315
  padding-top: 0;
303
316
  padding-bottom: 0;
304
317
  .box-shadow(none);
318
+
319
+ // Outdent the form if last child to line up with content down the page
320
+ &.navbar-right:last-child {
321
+ margin-right: -@navbar-padding-horizontal;
322
+ }
305
323
  }
306
324
  }
307
325
 
@@ -318,13 +336,6 @@
318
336
  .border-bottom-radius(0);
319
337
  }
320
338
 
321
- // Right aligned menus need alt position
322
- .navbar-nav.pull-right > li > .dropdown-menu,
323
- .navbar-nav > li > .dropdown-menu.pull-right {
324
- left: auto;
325
- right: 0;
326
- }
327
-
328
339
 
329
340
  // Buttons in navbars
330
341
  //
@@ -332,6 +343,13 @@
332
343
 
333
344
  .navbar-btn {
334
345
  .navbar-vertical-align(@input-height-base);
346
+
347
+ &.btn-sm {
348
+ .navbar-vertical-align(@input-height-small);
349
+ }
350
+ &.btn-xs {
351
+ .navbar-vertical-align(22);
352
+ }
335
353
  }
336
354
 
337
355
 
@@ -340,12 +358,17 @@
340
358
  // Add a class to make any element properly align itself vertically within the navbars.
341
359
 
342
360
  .navbar-text {
343
- float: left;
344
361
  .navbar-vertical-align(@line-height-computed);
345
362
 
346
363
  @media (min-width: @grid-float-breakpoint) {
364
+ float: left;
347
365
  margin-left: @navbar-padding-horizontal;
348
366
  margin-right: @navbar-padding-horizontal;
367
+
368
+ // Outdent the form if last child to line up with content down the page
369
+ &.navbar-right:last-child {
370
+ margin-right: 0;
371
+ }
349
372
  }
350
373
  }
351
374
 
@@ -414,15 +437,8 @@
414
437
  border-color: @navbar-default-border;
415
438
  }
416
439
 
417
- // Dropdown menu items and carets
440
+ // Dropdown menu items
418
441
  .navbar-nav {
419
- // Caret should match text color on hover
420
- > .dropdown > a:hover .caret,
421
- > .dropdown > a:focus .caret {
422
- border-top-color: @navbar-default-link-hover-color;
423
- border-bottom-color: @navbar-default-link-hover-color;
424
- }
425
-
426
442
  // Remove background color from open dropdown
427
443
  > .open > a {
428
444
  &,
@@ -430,19 +446,10 @@
430
446
  &:focus {
431
447
  background-color: @navbar-default-link-active-bg;
432
448
  color: @navbar-default-link-active-color;
433
- .caret {
434
- border-top-color: @navbar-default-link-active-color;
435
- border-bottom-color: @navbar-default-link-active-color;
436
- }
437
449
  }
438
450
  }
439
- > .dropdown > a .caret {
440
- border-top-color: @navbar-default-link-color;
441
- border-bottom-color: @navbar-default-link-color;
442
- }
443
451
 
444
-
445
- @media (max-width: @screen-xs-max) {
452
+ @media (max-width: @grid-float-breakpoint-max) {
446
453
  // Dropdowns get custom display when collapsed
447
454
  .open .dropdown-menu {
448
455
  > li > a {
@@ -561,31 +568,16 @@
561
568
  color: @navbar-inverse-link-active-color;
562
569
  }
563
570
  }
564
- > .dropdown > a:hover .caret {
565
- border-top-color: @navbar-inverse-link-hover-color;
566
- border-bottom-color: @navbar-inverse-link-hover-color;
567
- }
568
- > .dropdown > a .caret {
569
- border-top-color: @navbar-inverse-link-color;
570
- border-bottom-color: @navbar-inverse-link-color;
571
- }
572
- > .open > a {
573
- &,
574
- &:hover,
575
- &:focus {
576
- .caret {
577
- border-top-color: @navbar-inverse-link-active-color;
578
- border-bottom-color: @navbar-inverse-link-active-color;
579
- }
580
- }
581
- }
582
571
 
583
- @media (max-width: @screen-xs-max) {
572
+ @media (max-width: @grid-float-breakpoint-max) {
584
573
  // Dropdowns get custom display
585
574
  .open .dropdown-menu {
586
575
  > .dropdown-header {
587
576
  border-color: @navbar-inverse-border;
588
577
  }
578
+ .divider {
579
+ background-color: @navbar-inverse-border;
580
+ }
589
581
  > li > a {
590
582
  color: @navbar-inverse-link-color;
591
583
  &:hover,
@@ -10,7 +10,7 @@
10
10
  margin-bottom: 0;
11
11
  padding-left: 0; // Override default ul/ol
12
12
  list-style: none;
13
- .clearfix();
13
+ &:extend(.clearfix all);
14
14
 
15
15
  > li {
16
16
  position: relative;
@@ -48,11 +48,6 @@
48
48
  &:focus {
49
49
  background-color: @nav-link-hover-bg;
50
50
  border-color: @link-color;
51
-
52
- .caret {
53
- border-top-color: @link-hover-color;
54
- border-bottom-color: @link-hover-color;
55
- }
56
51
  }
57
52
  }
58
53
 
@@ -96,7 +91,7 @@
96
91
  }
97
92
  }
98
93
 
99
- // Active state, and it's :hover to override normal :hover
94
+ // Active state, and its :hover to override normal :hover
100
95
  &.active > a {
101
96
  &,
102
97
  &:hover,
@@ -138,11 +133,6 @@
138
133
  &:focus {
139
134
  color: @nav-pills-active-link-hover-color;
140
135
  background-color: @nav-pills-active-link-hover-bg;
141
-
142
- .caret {
143
- border-top-color: @nav-pills-active-link-hover-color;
144
- border-bottom-color: @nav-pills-active-link-hover-color;
145
- }
146
136
  }
147
137
  }
148
138
  }
@@ -243,16 +233,6 @@
243
233
  // Dropdowns
244
234
  // -------------------------
245
235
 
246
- // Make dropdown carets use link color in navs
247
- .nav .caret {
248
- border-top-color: @link-color;
249
- border-bottom-color: @link-color;
250
- }
251
- .nav a:hover .caret {
252
- border-top-color: @link-hover-color;
253
- border-bottom-color: @link-hover-color;
254
- }
255
-
256
236
  // Specific dropdowns
257
237
  .nav-tabs .dropdown-menu {
258
238
  // make dropdown border overlap tab border
@@ -1,6 +1,25 @@
1
- /*! normalize.css v2.1.3 | MIT License | git.io/normalize */
1
+ /*! normalize.css v3.0.0 | MIT License | git.io/normalize */
2
+
3
+ //
4
+ // 1. Set default font family to sans-serif.
5
+ // 2. Prevent iOS text size adjust after orientation change, without disabling
6
+ // user zoom.
7
+ //
8
+
9
+ html {
10
+ font-family: sans-serif; // 1
11
+ -ms-text-size-adjust: 100%; // 2
12
+ -webkit-text-size-adjust: 100%; // 2
13
+ }
14
+
15
+ //
16
+ // Remove default margin.
17
+ //
18
+
19
+ body {
20
+ margin: 0;
21
+ }
2
22
 
3
- // ==========================================================================
4
23
  // HTML5 display definitions
5
24
  // ==========================================================================
6
25
 
@@ -24,13 +43,16 @@ summary {
24
43
  }
25
44
 
26
45
  //
27
- // Correct `inline-block` display not defined in IE 8/9.
46
+ // 1. Correct `inline-block` display not defined in IE 8/9.
47
+ // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
28
48
  //
29
49
 
30
50
  audio,
31
51
  canvas,
52
+ progress,
32
53
  video {
33
- display: inline-block;
54
+ display: inline-block; // 1
55
+ vertical-align: baseline; // 2
34
56
  }
35
57
 
36
58
  //
@@ -53,31 +75,6 @@ template {
53
75
  display: none;
54
76
  }
55
77
 
56
- // ==========================================================================
57
- // Base
58
- // ==========================================================================
59
-
60
- //
61
- // 1. Set default font family to sans-serif.
62
- // 2. Prevent iOS text size adjust after orientation change, without disabling
63
- // user zoom.
64
- //
65
-
66
- html {
67
- font-family: sans-serif; // 1
68
- -ms-text-size-adjust: 100%; // 2
69
- -webkit-text-size-adjust: 100%; // 2
70
- }
71
-
72
- //
73
- // Remove default margin.
74
- //
75
-
76
- body {
77
- margin: 0;
78
- }
79
-
80
- // ==========================================================================
81
78
  // Links
82
79
  // ==========================================================================
83
80
 
@@ -89,14 +86,6 @@ a {
89
86
  background: transparent;
90
87
  }
91
88
 
92
- //
93
- // Address `outline` inconsistency between Chrome and other browsers.
94
- //
95
-
96
- a:focus {
97
- outline: thin dotted;
98
- }
99
-
100
89
  //
101
90
  // Improve readability when focused and also mouse hovered in all browsers.
102
91
  //
@@ -106,19 +95,8 @@ a:hover {
106
95
  outline: 0;
107
96
  }
108
97
 
98
+ // Text-level semantics
109
99
  // ==========================================================================
110
- // Typography
111
- // ==========================================================================
112
-
113
- //
114
- // Address variable `h1` font-size and margin within `section` and `article`
115
- // contexts in Firefox 4+, Safari 5, and Chrome.
116
- //
117
-
118
- h1 {
119
- font-size: 2em;
120
- margin: 0.67em 0;
121
- }
122
100
 
123
101
  //
124
102
  // Address styling not present in IE 8/9, Safari 5, and Chrome.
@@ -146,13 +124,13 @@ dfn {
146
124
  }
147
125
 
148
126
  //
149
- // Address differences between Firefox and other browsers.
127
+ // Address variable `h1` font-size and margin within `section` and `article`
128
+ // contexts in Firefox 4+, Safari 5, and Chrome.
150
129
  //
151
130
 
152
- hr {
153
- -moz-box-sizing: content-box;
154
- box-sizing: content-box;
155
- height: 0;
131
+ h1 {
132
+ font-size: 2em;
133
+ margin: 0.67em 0;
156
134
  }
157
135
 
158
136
  //
@@ -164,34 +142,6 @@ mark {
164
142
  color: #000;
165
143
  }
166
144
 
167
- //
168
- // Correct font family set oddly in Safari 5 and Chrome.
169
- //
170
-
171
- code,
172
- kbd,
173
- pre,
174
- samp {
175
- font-family: monospace, serif;
176
- font-size: 1em;
177
- }
178
-
179
- //
180
- // Improve readability of pre-formatted text in all browsers.
181
- //
182
-
183
- pre {
184
- white-space: pre-wrap;
185
- }
186
-
187
- //
188
- // Set consistent quote types.
189
- //
190
-
191
- q {
192
- quotes: "\201C" "\201D" "\2018" "\2019";
193
- }
194
-
195
145
  //
196
146
  // Address inconsistent and variable font size in all browsers.
197
147
  //
@@ -220,7 +170,6 @@ sub {
220
170
  bottom: -0.25em;
221
171
  }
222
172
 
223
- // ==========================================================================
224
173
  // Embedded content
225
174
  // ==========================================================================
226
175
 
@@ -240,8 +189,7 @@ svg:not(:root) {
240
189
  overflow: hidden;
241
190
  }
242
191
 
243
- // ==========================================================================
244
- // Figures
192
+ // Grouping content
245
193
  // ==========================================================================
246
194
 
247
195
  //
@@ -249,63 +197,77 @@ svg:not(:root) {
249
197
  //
250
198
 
251
199
  figure {
252
- margin: 0;
200
+ margin: 1em 40px;
253
201
  }
254
202
 
255
- // ==========================================================================
256
- // Forms
257
- // ==========================================================================
203
+ //
204
+ // Address differences between Firefox and other browsers.
205
+ //
206
+
207
+ hr {
208
+ -moz-box-sizing: content-box;
209
+ box-sizing: content-box;
210
+ height: 0;
211
+ }
258
212
 
259
213
  //
260
- // Define consistent border, margin, and padding.
214
+ // Contain overflow in all browsers.
261
215
  //
262
216
 
263
- fieldset {
264
- border: 1px solid #c0c0c0;
265
- margin: 0 2px;
266
- padding: 0.35em 0.625em 0.75em;
217
+ pre {
218
+ overflow: auto;
267
219
  }
268
220
 
269
221
  //
270
- // 1. Correct `color` not being inherited in IE 8/9.
271
- // 2. Remove padding so people aren't caught out if they zero out fieldsets.
222
+ // Address odd `em`-unit font size rendering in all browsers.
272
223
  //
273
224
 
274
- legend {
275
- border: 0; // 1
276
- padding: 0; // 2
225
+ code,
226
+ kbd,
227
+ pre,
228
+ samp {
229
+ font-family: monospace, monospace;
230
+ font-size: 1em;
277
231
  }
278
232
 
233
+ // Forms
234
+ // ==========================================================================
235
+
236
+ //
237
+ // Known limitation: by default, Chrome and Safari on OS X allow very limited
238
+ // styling of `select`, unless a `border` property is set.
239
+ //
240
+
279
241
  //
280
- // 1. Correct font family not being inherited in all browsers.
281
- // 2. Correct font size not being inherited in all browsers.
242
+ // 1. Correct color not being inherited.
243
+ // Known issue: affects color of disabled elements.
244
+ // 2. Correct font properties not being inherited.
282
245
  // 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
283
246
  //
284
247
 
285
248
  button,
286
249
  input,
250
+ optgroup,
287
251
  select,
288
252
  textarea {
289
- font-family: inherit; // 1
290
- font-size: 100%; // 2
253
+ color: inherit; // 1
254
+ font: inherit; // 2
291
255
  margin: 0; // 3
292
256
  }
293
257
 
294
258
  //
295
- // Address Firefox 4+ setting `line-height` on `input` using `!important` in
296
- // the UA stylesheet.
259
+ // Address `overflow` set to `hidden` in IE 8/9/10.
297
260
  //
298
261
 
299
- button,
300
- input {
301
- line-height: normal;
262
+ button {
263
+ overflow: visible;
302
264
  }
303
265
 
304
266
  //
305
267
  // Address inconsistent `text-transform` inheritance for `button` and `select`.
306
268
  // All other form control elements do not inherit `text-transform` values.
307
- // Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
308
- // Correct `select` style inheritance in Firefox 4+ and Opera.
269
+ // Correct `button` style inheritance in Firefox, IE 8+, and Opera
270
+ // Correct `select` style inheritance in Firefox.
309
271
  //
310
272
 
311
273
  button,
@@ -338,6 +300,28 @@ html input[disabled] {
338
300
  cursor: default;
339
301
  }
340
302
 
303
+ //
304
+ // Remove inner padding and border in Firefox 4+.
305
+ //
306
+
307
+ button::-moz-focus-inner,
308
+ input::-moz-focus-inner {
309
+ border: 0;
310
+ padding: 0;
311
+ }
312
+
313
+ //
314
+ // Address Firefox 4+ setting `line-height` on `input` using `!important` in
315
+ // the UA stylesheet.
316
+ //
317
+
318
+ input {
319
+ line-height: normal;
320
+ }
321
+
322
+ //
323
+ // It's recommended that you don't attempt to style these elements.
324
+ // Firefox's implementation doesn't respect box-sizing, padding, or width.
341
325
  //
342
326
  // 1. Address box sizing set to `content-box` in IE 8/9/10.
343
327
  // 2. Remove excess padding in IE 8/9/10.
@@ -349,6 +333,17 @@ input[type="radio"] {
349
333
  padding: 0; // 2
350
334
  }
351
335
 
336
+ //
337
+ // Fix the cursor style for Chrome's increment/decrement buttons. For certain
338
+ // `font-size` values of the `input`, it causes the cursor style of the
339
+ // decrement button to change from `default` to `text`.
340
+ //
341
+
342
+ input[type="number"]::-webkit-inner-spin-button,
343
+ input[type="number"]::-webkit-outer-spin-button {
344
+ height: auto;
345
+ }
346
+
352
347
  //
353
348
  // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
354
349
  // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
@@ -363,8 +358,9 @@ input[type="search"] {
363
358
  }
364
359
 
365
360
  //
366
- // Remove inner padding and search cancel button in Safari 5 and Chrome
367
- // on OS X.
361
+ // Remove inner padding and search cancel button in Safari and Chrome on OS X.
362
+ // Safari (but not Chrome) clips the cancel button when the search input has
363
+ // padding (and `textfield` appearance).
368
364
  //
369
365
 
370
366
  input[type="search"]::-webkit-search-cancel-button,
@@ -373,26 +369,42 @@ input[type="search"]::-webkit-search-decoration {
373
369
  }
374
370
 
375
371
  //
376
- // Remove inner padding and border in Firefox 4+.
372
+ // Define consistent border, margin, and padding.
377
373
  //
378
374
 
379
- button::-moz-focus-inner,
380
- input::-moz-focus-inner {
381
- border: 0;
382
- padding: 0;
375
+ fieldset {
376
+ border: 1px solid #c0c0c0;
377
+ margin: 0 2px;
378
+ padding: 0.35em 0.625em 0.75em;
383
379
  }
384
380
 
385
381
  //
386
- // 1. Remove default vertical scrollbar in IE 8/9.
387
- // 2. Improve readability and alignment in all browsers.
382
+ // 1. Correct `color` not being inherited in IE 8/9.
383
+ // 2. Remove padding so people aren't caught out if they zero out fieldsets.
384
+ //
385
+
386
+ legend {
387
+ border: 0; // 1
388
+ padding: 0; // 2
389
+ }
390
+
391
+ //
392
+ // Remove default vertical scrollbar in IE 8/9.
388
393
  //
389
394
 
390
395
  textarea {
391
- overflow: auto; // 1
392
- vertical-align: top; // 2
396
+ overflow: auto;
397
+ }
398
+
399
+ //
400
+ // Don't inherit the `font-weight` (applied by a rule above).
401
+ // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
402
+ //
403
+
404
+ optgroup {
405
+ font-weight: bold;
393
406
  }
394
407
 
395
- // ==========================================================================
396
408
  // Tables
397
409
  // ==========================================================================
398
410
 
@@ -404,3 +416,8 @@ table {
404
416
  border-collapse: collapse;
405
417
  border-spacing: 0;
406
418
  }
419
+
420
+ td,
421
+ th {
422
+ padding: 0;
423
+ }