diff options
| author | Mark Otto <[email protected]> | 2020-04-14 04:57:11 -0700 |
|---|---|---|
| committer | GitHub <[email protected]> | 2020-04-14 13:57:11 +0200 |
| commit | 4efc1c462da3be1ef7f6716436349ee67be60ee6 (patch) | |
| tree | 40ca17ccecb64154e3331313bd2292347b32cdc9 /scss | |
| parent | e2afbbfa828418dd93c8de8c1c2ce60361d04fbf (diff) | |
| download | bootstrap-4efc1c462da3be1ef7f6716436349ee67be60ee6.tar.xz bootstrap-4efc1c462da3be1ef7f6716436349ee67be60ee6.zip | |
Redo display headings (#30568)
- Convert to Sass map
- Consolidate font-weights into single option (matching line-height for them)
- Add two new sizes and create a new scale
- Update migration docs
Co-authored-by: Martijn Cuppens <[email protected]>
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/_type.scss | 25 | ||||
| -rw-r--r-- | scss/_variables.scss | 23 |
2 files changed, 19 insertions, 29 deletions
diff --git a/scss/_type.scss b/scss/_type.scss index 7726b7b21..efa2c8155 100644 --- a/scss/_type.scss +++ b/scss/_type.scss @@ -32,25 +32,12 @@ } // Type display classes -.display-1 { - @include font-size($display1-size); - font-weight: $display1-weight; - line-height: $display-line-height; -} -.display-2 { - @include font-size($display2-size); - font-weight: $display2-weight; - line-height: $display-line-height; -} -.display-3 { - @include font-size($display3-size); - font-weight: $display3-weight; - line-height: $display-line-height; -} -.display-4 { - @include font-size($display4-size); - font-weight: $display4-weight; - line-height: $display-line-height; +@each $display, $font-size in $display-font-sizes { + .display-#{$display} { + @include font-size($font-size); + font-weight: $display-font-weight; + line-height: $display-line-height; + } } // diff --git a/scss/_variables.scss b/scss/_variables.scss index 6597e10ad..5539f3172 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -411,16 +411,19 @@ $headings-font-weight: 500 !default; $headings-line-height: 1.2 !default; $headings-color: null !default; -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; -$display-line-height: $headings-line-height !default; +// scss-docs-start display-headings +$display-font-sizes: ( + 1: 5rem, + 2: 4.5rem, + 3: 4rem, + 4: 3.5rem, + 5: 3rem, + 6: 2.5rem +) !default; + +$display-font-weight: 300 !default; +$display-line-height: $headings-line-height !default; +// scss-docs-end display-headings $lead-font-size: $font-size-base * 1.25 !default; $lead-font-weight: 300 !default; |