bootstrap-generators 3.0.2.2 → 3.1.0

Sign up to get free protection for your applications and to get access to all the features.
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
+ }