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.
- checksums.yaml +4 -4
- data/.travis.yml +2 -2
- data/CHANGELOG.md +5 -0
- data/LICENSE +1 -1
- data/README.md +3 -3
- data/Rakefile +11 -8
- data/assets/javascripts/bootstrap.js +61 -48
- data/assets/javascripts/bootstrap.min.js +4 -4
- data/assets/javascripts/bootstrap/alert.js +2 -2
- data/assets/javascripts/bootstrap/button.js +4 -2
- data/assets/javascripts/bootstrap/carousel.js +10 -6
- data/assets/javascripts/bootstrap/collapse.js +2 -2
- data/assets/javascripts/bootstrap/dropdown.js +12 -8
- data/assets/javascripts/bootstrap/modal.js +9 -12
- data/assets/javascripts/bootstrap/popover.js +2 -2
- data/assets/javascripts/bootstrap/scrollspy.js +4 -3
- data/assets/javascripts/bootstrap/tab.js +2 -2
- data/assets/javascripts/bootstrap/tooltip.js +2 -2
- data/assets/javascripts/bootstrap/util.js +8 -3
- data/assets/stylesheets/_bootstrap-grid.scss +2 -41
- data/assets/stylesheets/_bootstrap-reboot.scss +1 -0
- data/assets/stylesheets/_bootstrap.scss +5 -7
- data/assets/stylesheets/bootstrap/_alert.scss +1 -10
- data/assets/stylesheets/bootstrap/_breadcrumb.scss +25 -10
- data/assets/stylesheets/bootstrap/_button-group.scss +22 -12
- data/assets/stylesheets/bootstrap/_buttons.scss +14 -11
- data/assets/stylesheets/bootstrap/_card.scss +59 -30
- data/assets/stylesheets/bootstrap/_carousel.scss +25 -24
- data/assets/stylesheets/bootstrap/_close.scss +3 -0
- data/assets/stylesheets/bootstrap/_code.scss +6 -7
- data/assets/stylesheets/bootstrap/_custom-forms.scss +144 -105
- data/assets/stylesheets/bootstrap/_custom.scss +4 -0
- data/assets/stylesheets/bootstrap/_dropdown.scss +10 -24
- data/assets/stylesheets/bootstrap/_forms.scss +97 -185
- data/assets/stylesheets/bootstrap/_grid.scss +9 -46
- data/assets/stylesheets/bootstrap/_images.scss +3 -4
- data/assets/stylesheets/bootstrap/_input-group.scss +25 -26
- data/assets/stylesheets/bootstrap/_list-group.scss +33 -50
- data/assets/stylesheets/bootstrap/_media.scss +4 -5
- data/assets/stylesheets/bootstrap/_mixins.scss +1 -2
- data/assets/stylesheets/bootstrap/_modal.scss +13 -27
- data/assets/stylesheets/bootstrap/_nav.scss +18 -23
- data/assets/stylesheets/bootstrap/_navbar.scss +54 -26
- data/assets/stylesheets/bootstrap/_normalize.scss +164 -168
- data/assets/stylesheets/bootstrap/_pagination.scss +1 -1
- data/assets/stylesheets/bootstrap/_popover.scss +12 -5
- data/assets/stylesheets/bootstrap/_print.scss +93 -65
- data/assets/stylesheets/bootstrap/_progress.scss +43 -54
- data/assets/stylesheets/bootstrap/_reboot.scss +59 -13
- data/assets/stylesheets/bootstrap/_tables.scss +32 -27
- data/assets/stylesheets/bootstrap/_tags.scss +77 -0
- data/assets/stylesheets/bootstrap/_tooltip.scss +7 -5
- data/assets/stylesheets/bootstrap/_type.scss +22 -29
- data/assets/stylesheets/bootstrap/_utilities.scss +9 -95
- data/assets/stylesheets/bootstrap/_variables.scss +302 -139
- data/assets/stylesheets/bootstrap/mixins/_background-variant.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_buttons.scss +22 -9
- data/assets/stylesheets/bootstrap/mixins/_cards.scss +8 -2
- data/assets/stylesheets/bootstrap/mixins/_forms.scss +7 -4
- data/assets/stylesheets/bootstrap/mixins/_gradients.scss +4 -4
- data/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +37 -11
- data/assets/stylesheets/bootstrap/mixins/_grid.scss +18 -9
- data/assets/stylesheets/bootstrap/mixins/_hover.scss +10 -9
- data/assets/stylesheets/bootstrap/mixins/_pagination.scss +2 -3
- data/assets/stylesheets/bootstrap/mixins/_progress.scss +5 -0
- data/assets/stylesheets/bootstrap/mixins/_reset-text.scss +2 -3
- data/assets/stylesheets/bootstrap/mixins/_screen-reader.scss +1 -1
- data/assets/stylesheets/bootstrap/mixins/_tab-focus.scss +3 -3
- data/assets/stylesheets/bootstrap/mixins/{_label.scss → _tag.scss} +2 -2
- data/assets/stylesheets/bootstrap/mixins/_text-hide.scss +1 -1
- data/assets/stylesheets/bootstrap/{_utilities-background.scss → utilities/_background.scss} +1 -4
- data/assets/stylesheets/bootstrap/utilities/_clearfix.scss +3 -0
- data/assets/stylesheets/bootstrap/utilities/_display.scss +13 -0
- data/assets/stylesheets/bootstrap/utilities/_flex.scss +37 -0
- data/assets/stylesheets/bootstrap/utilities/_pulls.scss +13 -0
- data/assets/stylesheets/bootstrap/utilities/_screenreaders.scss +11 -0
- data/assets/stylesheets/bootstrap/{_utilities-spacing.scss → utilities/_spacing.scss} +4 -0
- data/assets/stylesheets/bootstrap/utilities/_text.scss +51 -0
- data/assets/stylesheets/bootstrap/{_utilities-responsive.scss → utilities/_visibility.scss} +9 -1
- data/bootstrap.gemspec +1 -1
- data/lib/bootstrap.rb +6 -6
- data/lib/bootstrap/engine.rb +2 -0
- data/lib/bootstrap/version.rb +2 -2
- data/tasks/updater/network.rb +3 -1
- data/templates/project/_bootstrap-variables.scss +303 -140
- data/test/dummy_rails/config/boot.rb +1 -1
- data/test/gemfiles/rails_4_2.gemfile +4 -4
- data/test/gemfiles/rails_5_0.gemfile +12 -0
- data/test/rails_test.rb +1 -1
- data/test/support/dummy_rails_integration.rb +2 -2
- metadata +19 -14
- data/assets/stylesheets/bootstrap/_labels.scss +0 -77
- data/assets/stylesheets/bootstrap/_pager.scss +0 -57
- data/assets/stylesheets/bootstrap/mixins/_center-block.scss +0 -7
- 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:
|
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:
|
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:
|
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: -
|
57
|
+
margin-bottom: -$nav-tabs-border-width;
|
58
58
|
|
59
59
|
+ .nav-item {
|
60
|
-
margin-left:
|
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-
|
68
|
-
@include border-radius($
|
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:
|
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: $
|
125
|
+
color: $nav-pills-active-link-color;
|
119
126
|
cursor: default;
|
120
|
-
background-color: $
|
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:
|
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-
|
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:
|
73
|
-
padding-bottom:
|
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:
|
89
|
+
width: $border-width;
|
90
90
|
padding-top: .425rem;
|
91
91
|
padding-bottom: .425rem;
|
92
|
-
margin-right: $navbar-padding-
|
93
|
-
margin-left: $navbar-padding-
|
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
|
1
|
+
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */
|
2
2
|
|
3
3
|
//
|
4
|
-
// 1.
|
5
|
-
// 2. Prevent
|
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
|
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
|
-
//
|
28
|
-
//
|
29
|
-
//
|
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
|
-
|
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
|
-
//
|
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;
|
59
|
-
vertical-align: baseline; // 2
|
54
|
+
display: inline-block;
|
60
55
|
}
|
61
56
|
|
62
57
|
//
|
63
|
-
//
|
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
|
-
//
|
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
|
-
|
78
|
-
|
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
|
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
|
-
//
|
95
|
-
//
|
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
|
-
|
100
|
-
|
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
|
-
//
|
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:
|
114
|
+
border-bottom: none; // 1
|
115
|
+
text-decoration: underline; // 2
|
116
|
+
text-decoration: underline dotted; // 2
|
116
117
|
}
|
117
118
|
|
118
119
|
//
|
119
|
-
//
|
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:
|
125
|
+
font-weight: inherit;
|
125
126
|
}
|
126
127
|
|
127
128
|
//
|
128
|
-
//
|
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
|
-
//
|
137
|
-
// contexts in Firefox
|
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
|
-
//
|
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
|
-
//
|
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
|
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
|
197
|
+
// Remove the border on images inside links in IE 10-.
|
187
198
|
//
|
188
199
|
|
189
200
|
img {
|
190
|
-
border:
|
201
|
+
border-style: none;
|
191
202
|
}
|
192
203
|
|
193
204
|
//
|
194
|
-
//
|
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
|
-
//
|
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
|
-
|
217
|
-
|
218
|
-
|
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
|
-
//
|
229
|
+
// Add the correct margin in IE 8.
|
223
230
|
//
|
224
231
|
|
225
|
-
|
226
|
-
|
232
|
+
figure {
|
233
|
+
margin: 1em 40px;
|
227
234
|
}
|
228
235
|
|
229
236
|
//
|
230
|
-
//
|
237
|
+
// 1. Add the correct box sizing in Firefox.
|
238
|
+
// 2. Show the overflow in Edge and IE.
|
231
239
|
//
|
232
240
|
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
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
|
-
//
|
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
|
-
|
262
|
-
font: inherit; // 2
|
263
|
-
margin: 0; // 3
|
258
|
+
font: inherit;
|
264
259
|
}
|
265
260
|
|
266
261
|
//
|
267
|
-
//
|
262
|
+
// Restore the font weight unset by the previous rule.
|
268
263
|
//
|
269
264
|
|
270
|
-
|
271
|
-
|
265
|
+
optgroup {
|
266
|
+
font-weight: bold;
|
272
267
|
}
|
273
268
|
|
274
269
|
//
|
275
|
-
//
|
276
|
-
//
|
277
|
-
//
|
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
|
-
|
283
|
-
|
276
|
+
input, // 1
|
277
|
+
select { // 2
|
278
|
+
overflow: visible;
|
284
279
|
}
|
285
280
|
|
286
281
|
//
|
287
|
-
//
|
288
|
-
//
|
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
|
-
|
296
|
-
|
297
|
-
|
298
|
-
|
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
|
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
|
316
|
-
|
317
|
-
|
318
|
-
padding: 0;
|
298
|
+
button,
|
299
|
+
select { // 1
|
300
|
+
text-transform: none;
|
319
301
|
}
|
320
302
|
|
321
303
|
//
|
322
|
-
//
|
323
|
-
// the UA stylesheet.
|
304
|
+
// Change the cursor in all browsers (opinionated).
|
324
305
|
//
|
325
306
|
|
326
|
-
|
327
|
-
|
307
|
+
button,
|
308
|
+
[type="button"],
|
309
|
+
[type="reset"],
|
310
|
+
[type="submit"] {
|
311
|
+
cursor: pointer;
|
328
312
|
}
|
329
313
|
|
330
314
|
//
|
331
|
-
//
|
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
|
-
|
339
|
-
|
340
|
-
box-sizing: border-box; // 1
|
341
|
-
padding: 0; // 2
|
318
|
+
[disabled] {
|
319
|
+
cursor: default;
|
342
320
|
}
|
343
321
|
|
344
322
|
//
|
345
|
-
//
|
346
|
-
//
|
347
|
-
//
|
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
|
-
|
351
|
-
|
352
|
-
|
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
|
-
//
|
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
|
-
|
361
|
-
|
362
|
-
|
339
|
+
button::-moz-focus-inner,
|
340
|
+
input::-moz-focus-inner {
|
341
|
+
border: 0;
|
342
|
+
padding: 0;
|
363
343
|
}
|
364
344
|
|
365
345
|
//
|
366
|
-
//
|
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
|
-
|
372
|
-
input
|
373
|
-
|
349
|
+
button:-moz-focusring,
|
350
|
+
input:-moz-focusring {
|
351
|
+
outline: 1px dotted ButtonText;
|
374
352
|
}
|
375
353
|
|
376
354
|
//
|
377
|
-
//
|
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
|
388
|
-
// 2.
|
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
|
-
|
393
|
-
|
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
|
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
|
-
//
|
406
|
-
//
|
389
|
+
// 1. Add the correct box sizing in IE 10-.
|
390
|
+
// 2. Remove the padding in IE 10-.
|
407
391
|
//
|
408
392
|
|
409
|
-
|
410
|
-
|
393
|
+
[type="checkbox"],
|
394
|
+
[type="radio"] {
|
395
|
+
box-sizing: border-box; // 1
|
396
|
+
padding: 0; // 2
|
411
397
|
}
|
412
398
|
|
413
|
-
//
|
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
|
-
//
|
409
|
+
// Correct the odd appearance of search inputs in Chrome and Safari.
|
418
410
|
//
|
419
411
|
|
420
|
-
|
421
|
-
|
422
|
-
border-spacing: 0;
|
412
|
+
[type="search"] {
|
413
|
+
-webkit-appearance: textfield;
|
423
414
|
}
|
424
415
|
|
425
|
-
|
426
|
-
|
427
|
-
|
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
|
}
|