bootstrap 4.0.0.alpha3 → 4.0.0.alpha3.1

Sign up to get free protection for your applications and to get access to all the features.

Potentially problematic release.


This version of bootstrap might be problematic. Click here for more details.

Files changed (95) hide show
  1. checksums.yaml +4 -4
  2. data/.travis.yml +2 -2
  3. data/CHANGELOG.md +5 -0
  4. data/LICENSE +1 -1
  5. data/README.md +3 -3
  6. data/Rakefile +11 -8
  7. data/assets/javascripts/bootstrap.js +61 -48
  8. data/assets/javascripts/bootstrap.min.js +4 -4
  9. data/assets/javascripts/bootstrap/alert.js +2 -2
  10. data/assets/javascripts/bootstrap/button.js +4 -2
  11. data/assets/javascripts/bootstrap/carousel.js +10 -6
  12. data/assets/javascripts/bootstrap/collapse.js +2 -2
  13. data/assets/javascripts/bootstrap/dropdown.js +12 -8
  14. data/assets/javascripts/bootstrap/modal.js +9 -12
  15. data/assets/javascripts/bootstrap/popover.js +2 -2
  16. data/assets/javascripts/bootstrap/scrollspy.js +4 -3
  17. data/assets/javascripts/bootstrap/tab.js +2 -2
  18. data/assets/javascripts/bootstrap/tooltip.js +2 -2
  19. data/assets/javascripts/bootstrap/util.js +8 -3
  20. data/assets/stylesheets/_bootstrap-grid.scss +2 -41
  21. data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
  22. data/assets/stylesheets/_bootstrap.scss +5 -7
  23. data/assets/stylesheets/bootstrap/_alert.scss +1 -10
  24. data/assets/stylesheets/bootstrap/_breadcrumb.scss +25 -10
  25. data/assets/stylesheets/bootstrap/_button-group.scss +22 -12
  26. data/assets/stylesheets/bootstrap/_buttons.scss +14 -11
  27. data/assets/stylesheets/bootstrap/_card.scss +59 -30
  28. data/assets/stylesheets/bootstrap/_carousel.scss +25 -24
  29. data/assets/stylesheets/bootstrap/_close.scss +3 -0
  30. data/assets/stylesheets/bootstrap/_code.scss +6 -7
  31. data/assets/stylesheets/bootstrap/_custom-forms.scss +144 -105
  32. data/assets/stylesheets/bootstrap/_custom.scss +4 -0
  33. data/assets/stylesheets/bootstrap/_dropdown.scss +10 -24
  34. data/assets/stylesheets/bootstrap/_forms.scss +97 -185
  35. data/assets/stylesheets/bootstrap/_grid.scss +9 -46
  36. data/assets/stylesheets/bootstrap/_images.scss +3 -4
  37. data/assets/stylesheets/bootstrap/_input-group.scss +25 -26
  38. data/assets/stylesheets/bootstrap/_list-group.scss +33 -50
  39. data/assets/stylesheets/bootstrap/_media.scss +4 -5
  40. data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
  41. data/assets/stylesheets/bootstrap/_modal.scss +13 -27
  42. data/assets/stylesheets/bootstrap/_nav.scss +18 -23
  43. data/assets/stylesheets/bootstrap/_navbar.scss +54 -26
  44. data/assets/stylesheets/bootstrap/_normalize.scss +164 -168
  45. data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
  46. data/assets/stylesheets/bootstrap/_popover.scss +12 -5
  47. data/assets/stylesheets/bootstrap/_print.scss +93 -65
  48. data/assets/stylesheets/bootstrap/_progress.scss +43 -54
  49. data/assets/stylesheets/bootstrap/_reboot.scss +59 -13
  50. data/assets/stylesheets/bootstrap/_tables.scss +32 -27
  51. data/assets/stylesheets/bootstrap/_tags.scss +77 -0
  52. data/assets/stylesheets/bootstrap/_tooltip.scss +7 -5
  53. data/assets/stylesheets/bootstrap/_type.scss +22 -29
  54. data/assets/stylesheets/bootstrap/_utilities.scss +9 -95
  55. data/assets/stylesheets/bootstrap/_variables.scss +302 -139
  56. data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +1 -1
  57. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +22 -9
  58. data/assets/stylesheets/bootstrap/mixins/_cards.scss +8 -2
  59. data/assets/stylesheets/bootstrap/mixins/_forms.scss +7 -4
  60. data/assets/stylesheets/bootstrap/mixins/_gradients.scss +4 -4
  61. data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +37 -11
  62. data/assets/stylesheets/bootstrap/mixins/_grid.scss +18 -9
  63. data/assets/stylesheets/bootstrap/mixins/_hover.scss +10 -9
  64. data/assets/stylesheets/bootstrap/mixins/_pagination.scss +2 -3
  65. data/assets/stylesheets/bootstrap/mixins/_progress.scss +5 -0
  66. data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -3
  67. data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +1 -1
  68. data/assets/stylesheets/bootstrap/mixins/_tab-focus.scss +3 -3
  69. data/assets/stylesheets/bootstrap/mixins/{_label.scss → _tag.scss} +2 -2
  70. data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +1 -1
  71. data/assets/stylesheets/bootstrap/{_utilities-background.scss → utilities/_background.scss} +1 -4
  72. data/assets/stylesheets/bootstrap/utilities/_clearfix.scss +3 -0
  73. data/assets/stylesheets/bootstrap/utilities/_display.scss +13 -0
  74. data/assets/stylesheets/bootstrap/utilities/_flex.scss +37 -0
  75. data/assets/stylesheets/bootstrap/utilities/_pulls.scss +13 -0
  76. data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +11 -0
  77. data/assets/stylesheets/bootstrap/{_utilities-spacing.scss → utilities/_spacing.scss} +4 -0
  78. data/assets/stylesheets/bootstrap/utilities/_text.scss +51 -0
  79. data/assets/stylesheets/bootstrap/{_utilities-responsive.scss → utilities/_visibility.scss} +9 -1
  80. data/bootstrap.gemspec +1 -1
  81. data/lib/bootstrap.rb +6 -6
  82. data/lib/bootstrap/engine.rb +2 -0
  83. data/lib/bootstrap/version.rb +2 -2
  84. data/tasks/updater/network.rb +3 -1
  85. data/templates/project/_bootstrap-variables.scss +303 -140
  86. data/test/dummy_rails/config/boot.rb +1 -1
  87. data/test/gemfiles/rails_4_2.gemfile +4 -4
  88. data/test/gemfiles/rails_5_0.gemfile +12 -0
  89. data/test/rails_test.rb +1 -1
  90. data/test/support/dummy_rails_integration.rb +2 -2
  91. metadata +19 -14
  92. data/assets/stylesheets/bootstrap/_labels.scss +0 -77
  93. data/assets/stylesheets/bootstrap/_pager.scss +0 -57
  94. data/assets/stylesheets/bootstrap/mixins/_center-block.scss +0 -7
  95. data/test/gemfiles/rails_head.gemfile +0 -20
@@ -23,7 +23,7 @@
23
23
  @include plain-hover-focus {
24
24
  color: $nav-disabled-link-hover-color;
25
25
  cursor: $cursor-disabled;
26
- background-color: transparent;
26
+ background-color: $nav-disabled-link-hover-bg;
27
27
  }
28
28
  }
29
29
  }
@@ -38,7 +38,7 @@
38
38
 
39
39
  .nav-item + .nav-item,
40
40
  .nav-link + .nav-link {
41
- margin-left: 1rem;
41
+ margin-left: $nav-item-inline-spacer;
42
42
  }
43
43
  }
44
44
 
@@ -48,24 +48,24 @@
48
48
  //
49
49
 
50
50
  .nav-tabs {
51
- border-bottom: 1px solid $nav-tabs-border-color;
51
+ border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
52
52
  @include clearfix();
53
53
 
54
54
  .nav-item {
55
55
  float: left;
56
56
  // Make the list-items overlay the bottom border
57
- margin-bottom: -1px;
57
+ margin-bottom: -$nav-tabs-border-width;
58
58
 
59
59
  + .nav-item {
60
- margin-left: .2rem;
60
+ margin-left: $nav-item-margin;
61
61
  }
62
62
  }
63
63
 
64
64
  .nav-link {
65
65
  display: block;
66
66
  padding: $nav-link-padding;
67
- border: $nav-tabs-link-border-width solid transparent;
68
- @include border-radius($border-radius $border-radius 0 0);
67
+ border: $nav-tabs-border-width solid transparent;
68
+ @include border-top-radius($nav-tabs-border-radius);
69
69
 
70
70
  @include hover-focus {
71
71
  border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
@@ -88,6 +88,13 @@
88
88
  border-color: $nav-tabs-active-link-hover-border-color $nav-tabs-active-link-hover-border-color transparent;
89
89
  }
90
90
  }
91
+
92
+ .dropdown-menu {
93
+ // Make dropdown border overlap tab border
94
+ margin-top: -$nav-tabs-border-width;
95
+ // Remove the top rounded corners here since there is a hard edge above the menu
96
+ @include border-top-radius(0);
97
+ }
91
98
  }
92
99
 
93
100
 
@@ -102,7 +109,7 @@
102
109
  float: left;
103
110
 
104
111
  + .nav-item {
105
- margin-left: .2rem;
112
+ margin-left: $nav-item-margin;
106
113
  }
107
114
  }
108
115
 
@@ -115,9 +122,9 @@
115
122
  .nav-link.active,
116
123
  .nav-item.open .nav-link {
117
124
  @include plain-hover-focus {
118
- color: $component-active-color;
125
+ color: $nav-pills-active-link-color;
119
126
  cursor: default;
120
- background-color: $component-active-bg;
127
+ background-color: $nav-pills-active-link-bg;
121
128
  }
122
129
  }
123
130
  }
@@ -128,7 +135,7 @@
128
135
  float: none;
129
136
 
130
137
  + .nav-item {
131
- margin-top: .2rem;
138
+ margin-top: $nav-item-margin;
132
139
  margin-left: 0;
133
140
  }
134
141
  }
@@ -148,15 +155,3 @@
148
155
  display: block;
149
156
  }
150
157
  }
151
-
152
-
153
- //
154
- // Dropdowns
155
- //
156
-
157
- .nav-tabs .dropdown-menu {
158
- // Make dropdown border overlap tab border
159
- margin-top: -1px;
160
- // Remove the top rounded corners here since there is a hard edge above the menu
161
- @include border-top-radius(0);
162
- }
@@ -5,7 +5,7 @@
5
5
 
6
6
  .navbar {
7
7
  position: relative;
8
- padding: $navbar-padding-vertical $navbar-padding-horizontal;
8
+ padding: $navbar-padding-y $navbar-padding-x;
9
9
  @include clearfix;
10
10
 
11
11
  @include media-breakpoint-up(sm) {
@@ -69,8 +69,8 @@
69
69
 
70
70
  .navbar-brand {
71
71
  float: left;
72
- padding-top: .25rem;
73
- padding-bottom: .25rem;
72
+ padding-top: $navbar-brand-padding-y;
73
+ padding-bottom: $navbar-brand-padding-y;
74
74
  margin-right: 1rem;
75
75
  font-size: $font-size-lg;
76
76
 
@@ -86,11 +86,11 @@
86
86
 
87
87
  .navbar-divider {
88
88
  float: left;
89
- width: 1px;
89
+ width: $border-width;
90
90
  padding-top: .425rem;
91
91
  padding-bottom: .425rem;
92
- margin-right: $navbar-padding-horizontal;
93
- margin-left: $navbar-padding-horizontal;
92
+ margin-right: $navbar-padding-x;
93
+ margin-left: $navbar-padding-x;
94
94
  overflow: hidden;
95
95
 
96
96
  &::before {
@@ -117,26 +117,6 @@
117
117
  }
118
118
  }
119
119
 
120
- // Custom override for
121
- .navbar-toggleable {
122
- &-xs {
123
- @include media-breakpoint-up(sm) {
124
- display: block !important;
125
- }
126
- }
127
- &-sm {
128
- @include media-breakpoint-up(md) {
129
- display: block !important;
130
- }
131
- }
132
- &-md {
133
- @include media-breakpoint-up(lg) {
134
- display: block !important;
135
- }
136
- }
137
- }
138
-
139
-
140
120
  // Navigation
141
121
  //
142
122
  // Custom navbar navigation built on the base `.nav` styles.
@@ -228,3 +208,51 @@
228
208
  background-color: rgba(255,255,255,.075);
229
209
  }
230
210
  }
211
+
212
+
213
+ // Navbar toggleable
214
+ //
215
+ // Custom override for collapse plugin in navbar.
216
+
217
+ // scss-lint:disable ImportantRule
218
+ .navbar-toggleable {
219
+ &-xs {
220
+ @include clearfix;
221
+ @include media-breakpoint-down(xs) {
222
+ .navbar-nav .nav-item {
223
+ float: none;
224
+ margin-left: 0;
225
+ }
226
+ }
227
+ @include media-breakpoint-up(sm) {
228
+ display: block !important;
229
+ }
230
+ }
231
+
232
+ &-sm {
233
+ @include clearfix;
234
+ @include media-breakpoint-down(sm) {
235
+ .navbar-nav .nav-item {
236
+ float: none;
237
+ margin-left: 0;
238
+ }
239
+ }
240
+ @include media-breakpoint-up(md) {
241
+ display: block !important;
242
+ }
243
+ }
244
+
245
+ &-md {
246
+ @include clearfix;
247
+ @include media-breakpoint-down(md) {
248
+ .navbar-nav .nav-item {
249
+ float: none;
250
+ margin-left: 0;
251
+ }
252
+ }
253
+ @include media-breakpoint-up(lg) {
254
+ display: block !important;
255
+ }
256
+ }
257
+ }
258
+ // scss-lint:enable ImportantRule
@@ -1,9 +1,8 @@
1
- /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
1
+ /*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
2
2
 
3
3
  //
4
- // 1. Set default font family to sans-serif.
5
- // 2. Prevent iOS and IE text size adjust after device orientation change,
6
- // without disabling user zoom.
4
+ // 1. Change the default font family in all browsers (opinionated).
5
+ // 2. Prevent adjustments of font size after orientation changes in IE and iOS.
7
6
  //
8
7
 
9
8
  html {
@@ -13,7 +12,7 @@ html {
13
12
  }
14
13
 
15
14
  //
16
- // Remove default margin.
15
+ // Remove the margin in all browsers (opinionated).
17
16
  //
18
17
 
19
18
  body {
@@ -24,44 +23,39 @@ body {
24
23
  // ==========================================================================
25
24
 
26
25
  //
27
- // Correct `block` display not defined for any HTML5 element in IE 8/9.
28
- // Correct `block` display not defined for `details` or `summary` in IE 10/11
29
- // and Firefox.
30
- // Correct `block` display not defined for `main` in IE 11.
26
+ // Add the correct display in IE 9-.
27
+ // 1. Add the correct display in Edge, IE, and Firefox.
28
+ // 2. Add the correct display in IE.
31
29
  //
32
30
 
33
31
  article,
34
32
  aside,
35
- details,
33
+ details, // 1
36
34
  figcaption,
37
35
  figure,
38
36
  footer,
39
37
  header,
40
- hgroup,
41
- main,
38
+ main, // 2
42
39
  menu,
43
40
  nav,
44
41
  section,
45
- summary {
42
+ summary { // 1
46
43
  display: block;
47
44
  }
48
45
 
49
46
  //
50
- // 1. Correct `inline-block` display not defined in IE 8/9.
51
- // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
47
+ // Add the correct display in IE 9-.
52
48
  //
53
49
 
54
50
  audio,
55
51
  canvas,
56
52
  progress,
57
53
  video {
58
- display: inline-block; // 1
59
- vertical-align: baseline; // 2
54
+ display: inline-block;
60
55
  }
61
56
 
62
57
  //
63
- // Prevent modern browsers from displaying `audio` without controls.
64
- // Remove excess height in iOS 5 devices.
58
+ // Add the correct display in iOS 4-7.
65
59
  //
66
60
 
67
61
  audio:not([controls]) {
@@ -70,12 +64,20 @@ audio:not([controls]) {
70
64
  }
71
65
 
72
66
  //
73
- // Address `[hidden]` styling not present in IE 8/9/10.
74
- // Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
67
+ // Add the correct vertical alignment in Chrome, Firefox, and Opera.
75
68
  //
76
69
 
77
- [hidden],
78
- template {
70
+ progress {
71
+ vertical-align: baseline;
72
+ }
73
+
74
+ //
75
+ // Add the correct display in IE 10-.
76
+ // 1. Add the correct display in IE.
77
+ //
78
+
79
+ template, // 2
80
+ [hidden] {
79
81
  display: none;
80
82
  }
81
83
 
@@ -83,7 +85,7 @@ template {
83
85
  // ==========================================================================
84
86
 
85
87
  //
86
- // Remove the gray background color from active links in IE 10.
88
+ // Remove the gray background on active links in IE 10.
87
89
  //
88
90
 
89
91
  a {
@@ -91,41 +93,49 @@ a {
91
93
  }
92
94
 
93
95
  //
94
- // Improve readability of focused elements when they are also in an
95
- // active/hover state.
96
+ // Remove the outline on focused links when they are also active or hovered
97
+ // in all browsers (opinionated).
96
98
  //
97
99
 
98
- a {
99
- &:active {
100
- outline: 0;
101
- }
102
- &:hover {
103
- outline: 0;
104
- }
100
+ a:active,
101
+ a:hover {
102
+ outline-width: 0;
105
103
  }
106
104
 
107
105
  // Text-level semantics
108
106
  // ==========================================================================
109
107
 
110
108
  //
111
- // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
109
+ // 1. Remove the bottom border in Firefox 39-.
110
+ // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
112
111
  //
113
112
 
114
113
  abbr[title] {
115
- border-bottom: 1px dotted;
114
+ border-bottom: none; // 1
115
+ text-decoration: underline; // 2
116
+ text-decoration: underline dotted; // 2
116
117
  }
117
118
 
118
119
  //
119
- // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
120
+ // Prevent the duplicate application of `bolder` by the next rule in Safari 6.
120
121
  //
121
122
 
122
123
  b,
123
124
  strong {
124
- font-weight: bold;
125
+ font-weight: inherit;
125
126
  }
126
127
 
127
128
  //
128
- // Address styling not present in Safari and Chrome.
129
+ // Add the correct font weight in Chrome, Edge, and Safari.
130
+ //
131
+
132
+ b,
133
+ strong {
134
+ font-weight: bolder;
135
+ }
136
+
137
+ //
138
+ // Add the correct font style in Android 4.3-.
129
139
  //
130
140
 
131
141
  dfn {
@@ -133,8 +143,8 @@ dfn {
133
143
  }
134
144
 
135
145
  //
136
- // Address variable `h1` font-size and margin within `section` and `article`
137
- // contexts in Firefox 4+, Safari, and Chrome.
146
+ // Correct the font size and margin on `h1` elements within `section` and
147
+ // `article` contexts in Chrome, Firefox, and Safari.
138
148
  //
139
149
 
140
150
  h1 {
@@ -143,16 +153,16 @@ h1 {
143
153
  }
144
154
 
145
155
  //
146
- // Address styling not present in IE 8/9.
156
+ // Add the correct background and color in IE 9-.
147
157
  //
148
158
 
149
159
  mark {
150
- background: #ff0;
160
+ background-color: #ff0;
151
161
  color: #000;
152
162
  }
153
163
 
154
164
  //
155
- // Address inconsistent and variable font size in all browsers.
165
+ // Add the correct font size in all browsers.
156
166
  //
157
167
 
158
168
  small {
@@ -160,7 +170,8 @@ small {
160
170
  }
161
171
 
162
172
  //
163
- // Prevent `sub` and `sup` affecting `line-height` in all browsers.
173
+ // Prevent `sub` and `sup` elements from affecting the line height in
174
+ // all browsers.
164
175
  //
165
176
 
166
177
  sub,
@@ -171,27 +182,27 @@ sup {
171
182
  vertical-align: baseline;
172
183
  }
173
184
 
174
- sup {
175
- top: -0.5em;
176
- }
177
-
178
185
  sub {
179
186
  bottom: -0.25em;
180
187
  }
181
188
 
189
+ sup {
190
+ top: -0.5em;
191
+ }
192
+
182
193
  // Embedded content
183
194
  // ==========================================================================
184
195
 
185
196
  //
186
- // Remove border when inside `a` element in IE 8/9/10.
197
+ // Remove the border on images inside links in IE 10-.
187
198
  //
188
199
 
189
200
  img {
190
- border: 0;
201
+ border-style: none;
191
202
  }
192
203
 
193
204
  //
194
- // Correct overflow not hidden in IE 9/10/11.
205
+ // Hide the overflow in IE.
195
206
  //
196
207
 
197
208
  svg:not(:root) {
@@ -202,179 +213,146 @@ svg:not(:root) {
202
213
  // ==========================================================================
203
214
 
204
215
  //
205
- // Address margin not present in IE 8/9 and Safari.
206
- //
207
-
208
- figure {
209
- margin: 1em 40px;
210
- }
211
-
212
- //
213
- // Address differences between Firefox and other browsers.
216
+ // 1. Correct the inheritance and scaling of font size in all browsers.
217
+ // 2. Correct the odd `em` font sizing in all browsers.
214
218
  //
215
219
 
216
- hr {
217
- box-sizing: content-box;
218
- height: 0;
220
+ code,
221
+ kbd,
222
+ pre,
223
+ samp {
224
+ font-family: monospace, monospace; // 1
225
+ font-size: 1em; // 2
219
226
  }
220
227
 
221
228
  //
222
- // Contain overflow in all browsers.
229
+ // Add the correct margin in IE 8.
223
230
  //
224
231
 
225
- pre {
226
- overflow: auto;
232
+ figure {
233
+ margin: 1em 40px;
227
234
  }
228
235
 
229
236
  //
230
- // Address odd `em`-unit font size rendering in all browsers.
237
+ // 1. Add the correct box sizing in Firefox.
238
+ // 2. Show the overflow in Edge and IE.
231
239
  //
232
240
 
233
- code,
234
- kbd,
235
- pre,
236
- samp {
237
- font-family: monospace, monospace;
238
- font-size: 1em;
241
+ hr {
242
+ box-sizing: content-box; // 1
243
+ height: 0; // 1
244
+ overflow: visible; // 2
239
245
  }
240
246
 
241
247
  // Forms
242
248
  // ==========================================================================
243
249
 
244
250
  //
245
- // Known limitation: by default, Chrome and Safari on OS X allow very limited
246
- // styling of `select`, unless a `border` property is set.
247
- //
248
-
249
- //
250
- // 1. Correct color not being inherited.
251
- // Known issue: affects color of disabled elements.
252
- // 2. Correct font properties not being inherited.
253
- // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
251
+ // Change font properties to `inherit` in all browsers (opinionated).
254
252
  //
255
253
 
256
254
  button,
257
255
  input,
258
- optgroup,
259
256
  select,
260
257
  textarea {
261
- color: inherit; // 1
262
- font: inherit; // 2
263
- margin: 0; // 3
258
+ font: inherit;
264
259
  }
265
260
 
266
261
  //
267
- // Address `overflow` set to `hidden` in IE 8/9/10/11.
262
+ // Restore the font weight unset by the previous rule.
268
263
  //
269
264
 
270
- button {
271
- overflow: visible;
265
+ optgroup {
266
+ font-weight: bold;
272
267
  }
273
268
 
274
269
  //
275
- // Address inconsistent `text-transform` inheritance for `button` and `select`.
276
- // All other form control elements do not inherit `text-transform` values.
277
- // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
278
- // Correct `select` style inheritance in Firefox.
270
+ // Show the overflow in IE.
271
+ // 1. Show the overflow in Edge.
272
+ // 2. Show the overflow in Edge, Firefox, and IE.
279
273
  //
280
274
 
281
275
  button,
282
- select {
283
- text-transform: none;
276
+ input, // 1
277
+ select { // 2
278
+ overflow: visible;
284
279
  }
285
280
 
286
281
  //
287
- // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
288
- // and `video` controls.
289
- // 2. Correct inability to style clickable `input` types in iOS.
290
- // 3. Improve usability and consistency of cursor style between image-type
291
- // `input` and others.
282
+ // Remove the margin in Safari.
283
+ // 1. Remove the margin in Firefox and Safari.
292
284
  //
293
285
 
294
286
  button,
295
- html input[type="button"], // 1
296
- input[type="reset"],
297
- input[type="submit"] {
298
- -webkit-appearance: button; // 2
299
- cursor: pointer; // 3
300
- }
301
-
302
- //
303
- // Re-set default cursor for disabled elements.
304
- //
305
-
306
- button[disabled],
307
- html input[disabled] {
308
- cursor: default;
287
+ input,
288
+ select,
289
+ textarea { // 1
290
+ margin: 0;
309
291
  }
310
292
 
311
293
  //
312
- // Remove inner padding and border in Firefox 4+.
294
+ // Remove the inheritence of text transform in Edge, Firefox, and IE.
295
+ // 1. Remove the inheritence of text transform in Firefox.
313
296
  //
314
297
 
315
- button::-moz-focus-inner,
316
- input::-moz-focus-inner {
317
- border: 0;
318
- padding: 0;
298
+ button,
299
+ select { // 1
300
+ text-transform: none;
319
301
  }
320
302
 
321
303
  //
322
- // Address Firefox 4+ setting `line-height` on `input` using `!important` in
323
- // the UA stylesheet.
304
+ // Change the cursor in all browsers (opinionated).
324
305
  //
325
306
 
326
- input {
327
- line-height: normal;
307
+ button,
308
+ [type="button"],
309
+ [type="reset"],
310
+ [type="submit"] {
311
+ cursor: pointer;
328
312
  }
329
313
 
330
314
  //
331
- // It's recommended that you don't attempt to style these elements.
332
- // Firefox's implementation doesn't respect box-sizing, padding, or width.
333
- //
334
- // 1. Address box sizing set to `content-box` in IE 8/9/10.
335
- // 2. Remove excess padding in IE 8/9/10.
315
+ // Restore the default cursor to disabled elements unset by the previous rule.
336
316
  //
337
317
 
338
- input[type="checkbox"],
339
- input[type="radio"] {
340
- box-sizing: border-box; // 1
341
- padding: 0; // 2
318
+ [disabled] {
319
+ cursor: default;
342
320
  }
343
321
 
344
322
  //
345
- // Fix the cursor style for Chrome's increment/decrement buttons. For certain
346
- // `font-size` values of the `input`, it causes the cursor style of the
347
- // decrement button to change from `default` to `text`.
323
+ // 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
324
+ // controls in Android 4.
325
+ // 2. Correct the inability to style clickable types in iOS.
348
326
  //
349
327
 
350
- input[type="number"]::-webkit-inner-spin-button,
351
- input[type="number"]::-webkit-outer-spin-button {
352
- height: auto;
328
+ button,
329
+ html [type="button"], // 1
330
+ [type="reset"],
331
+ [type="submit"] {
332
+ -webkit-appearance: button; // 2
353
333
  }
354
334
 
355
335
  //
356
- // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
357
- // 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
336
+ // Remove the inner border and padding in Firefox.
358
337
  //
359
338
 
360
- input[type="search"] {
361
- -webkit-appearance: textfield; // 1
362
- box-sizing: content-box; //2
339
+ button::-moz-focus-inner,
340
+ input::-moz-focus-inner {
341
+ border: 0;
342
+ padding: 0;
363
343
  }
364
344
 
365
345
  //
366
- // Remove inner padding and search cancel button in Safari and Chrome on OS X.
367
- // Safari (but not Chrome) clips the cancel button when the search input has
368
- // padding (and `textfield` appearance).
346
+ // Restore the focus styles unset by the previous rule.
369
347
  //
370
348
 
371
- input[type="search"]::-webkit-search-cancel-button,
372
- input[type="search"]::-webkit-search-decoration {
373
- -webkit-appearance: none;
349
+ button:-moz-focusring,
350
+ input:-moz-focusring {
351
+ outline: 1px dotted ButtonText;
374
352
  }
375
353
 
376
354
  //
377
- // Define consistent border, margin, and padding.
355
+ // Change the border, margin, and padding in all browsers (opinionated).
378
356
  //
379
357
 
380
358
  fieldset {
@@ -384,17 +362,23 @@ fieldset {
384
362
  }
385
363
 
386
364
  //
387
- // 1. Correct `color` not being inherited in IE 8/9/10/11.
388
- // 2. Remove padding so people aren't caught out if they zero out fieldsets.
365
+ // 1. Correct the text wrapping in Edge and IE.
366
+ // 2. Correct the color inheritance from `fieldset` elements in IE.
367
+ // 3. Remove the padding so developers are not caught out when they zero out
368
+ // `fieldset` elements in all browsers.
389
369
  //
390
370
 
391
371
  legend {
392
- border: 0; // 1
393
- padding: 0; // 2
372
+ box-sizing: border-box; // 1
373
+ color: inherit; // 2
374
+ display: table; // 1
375
+ max-width: 100%; // 1
376
+ padding: 0; // 3
377
+ white-space: normal; // 1
394
378
  }
395
379
 
396
380
  //
397
- // Remove default vertical scrollbar in IE 8/9/10/11.
381
+ // Remove the default vertical scrollbar in IE.
398
382
  //
399
383
 
400
384
  textarea {
@@ -402,27 +386,39 @@ textarea {
402
386
  }
403
387
 
404
388
  //
405
- // Don't inherit the `font-weight` (applied by a rule above).
406
- // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
389
+ // 1. Add the correct box sizing in IE 10-.
390
+ // 2. Remove the padding in IE 10-.
407
391
  //
408
392
 
409
- optgroup {
410
- font-weight: bold;
393
+ [type="checkbox"],
394
+ [type="radio"] {
395
+ box-sizing: border-box; // 1
396
+ padding: 0; // 2
411
397
  }
412
398
 
413
- // Tables
414
- // ==========================================================================
399
+ //
400
+ // Correct the cursor style of increment and decrement buttons in Chrome.
401
+ //
402
+
403
+ [type="number"]::-webkit-inner-spin-button,
404
+ [type="number"]::-webkit-outer-spin-button {
405
+ height: auto;
406
+ }
415
407
 
416
408
  //
417
- // Remove most spacing between table cells.
409
+ // Correct the odd appearance of search inputs in Chrome and Safari.
418
410
  //
419
411
 
420
- table {
421
- border-collapse: collapse;
422
- border-spacing: 0;
412
+ [type="search"] {
413
+ -webkit-appearance: textfield;
423
414
  }
424
415
 
425
- td,
426
- th {
427
- padding: 0;
416
+ //
417
+ // Remove the inner padding and cancel buttons in Chrome on OS X and
418
+ // Safari on OS X.
419
+ //
420
+
421
+ [type="search"]::-webkit-search-cancel-button,
422
+ [type="search"]::-webkit-search-decoration {
423
+ -webkit-appearance: none;
428
424
  }