0
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-28 20:52:21 +01:00

Reboot & Type cleanup (#28698)

- Line height & font family from html were directly overridden by body, so they were redundant thus removed
- The remaining properties are moved to body
- Shim for IE10 tags removed
- hr cleanup
  - Combined styles from reboot & type
  - Changed from borders to background
    - This allows us to keep the color inherited.
    - Opacity can be used to change the intensity
    - Size attribute will not change the height instead of making the hr look like an input field
  - Better variable names
- headings cleanup
  - Moved all element styling to reboot
  - Type will now extend the element styling. This way we will save some redundant code
- small & mark are also moved to reboot. type does not contain any element styling anymore
- font weight removed from small, this did not really made sense
This commit is contained in:
Martijn Cuppens 2019-04-30 10:00:34 +02:00 committed by XhmikosR
parent f36890d1cd
commit 09c99fe6e7
3 changed files with 93 additions and 68 deletions

View File

@ -10,39 +10,26 @@
// Document
//
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Change the default tap highlight to be completely transparent in iOS.
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
*,
*::before,
*::after {
box-sizing: border-box; // 1
box-sizing: border-box;
}
html {
font-family: sans-serif; // 2
line-height: 1.15; // 3
-webkit-text-size-adjust: 100%; // 4
-webkit-tap-highlight-color: rgba($black, 0); // 5
}
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
// TODO: remove in v5
// stylelint-disable-next-line selector-list-comma-newline-after
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
// Shim for IE11
main {
display: block;
}
// Body
//
// 1. Remove the margin in all browsers.
// 2. As a best practice, apply a default `background-color`.
// 3. Set an explicit initial text-align value so that we can later use
// 2. Set an explicit initial text-align value so that we can later use
// the `inherit` value on things like `<th>` elements.
// 3. As a best practice, apply a default `background-color`.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Change the default tap highlight to be completely transparent in iOS.
body {
margin: 0; // 1
font-family: $font-family-base;
@ -50,8 +37,10 @@ body {
font-weight: $font-weight-base;
line-height: $line-height-base;
color: $body-color;
text-align: left; // 3
background-color: $body-bg; // 2
text-align: left; // 2
background-color: $body-bg; // 3
-webkit-text-size-adjust: 100%; // 4
-webkit-tap-highlight-color: rgba($black, 0); // 5
}
// Future-proof rule: in browsers that support :focus-visible, suppress the focus outline
@ -70,13 +59,20 @@ body {
// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.
// 1. Reset Firefox's gray color
// 2. Set correct height and prevent the `size` attribute to make the `hr` look like an input field
// See https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_hr_size
hr {
box-sizing: content-box; // 1
height: 0; // 1
overflow: visible; // 2
margin: $hr-margin-y 0;
color: $hr-color; // 1
background-color: currentColor;
border: 0;
opacity: $hr-opacity;
}
hr:not([size]) {
height: $hr-height; // 2
}
@ -88,12 +84,46 @@ hr {
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
// stylelint-disable-next-line selector-list-comma-newline-after
h1, h2, h3, h4, h5, h6 {
%heading {
margin-top: 0;
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
}
h1 {
@extend %heading;
@include font-size($h1-font-size);
}
h2 {
@extend %heading;
@include font-size($h2-font-size);
}
h3 {
@extend %heading;
@include font-size($h3-font-size);
}
h4 {
@extend %heading;
@include font-size($h4-font-size);
}
h5 {
@extend %heading;
@include font-size($h5-font-size);
}
h6 {
@extend %heading;
@include font-size($h6-font-size);
}
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
@ -159,7 +189,7 @@ strong {
}
small {
@include font-size(80%); // Add the correct font size in all browsers
@include font-size($small-font-size); // Add the correct font size in all browsers
}
//
@ -426,6 +456,11 @@ legend {
white-space: normal; // 1
}
mark {
padding: $mark-padding;
background-color: $mark-bg;
}
progress {
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
}

View File

@ -3,22 +3,30 @@
//
// Headings
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: $headings-margin-bottom;
font-family: $headings-font-family;
font-weight: $headings-font-weight;
line-height: $headings-line-height;
color: $headings-color;
.h1 {
@extend h1;
}
.h2 {
@extend h2;
}
.h3 {
@extend h3;
}
.h4 {
@extend h4;
}
.h5 {
@extend h5;
}
.h6 {
@extend h6;
}
h1, .h1 { @include font-size($h1-font-size); }
h2, .h2 { @include font-size($h2-font-size); }
h3, .h3 { @include font-size($h3-font-size); }
h4, .h4 { @include font-size($h4-font-size); }
h5, .h5 { @include font-size($h5-font-size); }
h6, .h6 { @include font-size($h6-font-size); }
.lead {
@include font-size($lead-font-size);
@ -47,36 +55,17 @@ h6, .h6 { @include font-size($h6-font-size); }
line-height: $display-line-height;
}
//
// Horizontal rules
//
hr {
margin-top: $hr-margin-y;
margin-bottom: $hr-margin-y;
border: 0;
border-top: $hr-border-width solid $hr-border-color;
}
//
// Emphasis
//
small,
.small {
@include font-size($small-font-size);
font-weight: $font-weight-normal;
@extend small;
}
mark,
.mark {
padding: $mark-padding;
background-color: $mark-bg;
@extend mark;
}
//
// Lists
//

View File

@ -323,8 +323,9 @@ $blockquote-small-color: $gray-600 !default;
$blockquote-small-font-size: $small-font-size !default;
$blockquote-font-size: $font-size-base * 1.25 !default;
$hr-border-color: rgba($black, .1) !default;
$hr-border-width: $border-width !default;
$hr-color: inherit !default;
$hr-height: $border-width !default;
$hr-opacity: .25 !default;
$mark-padding: .2em !default;