Remove -size-root so we can respect user prefs on browser default font-size

bd38a2a2 · Mark Otto · Mark Otto · 2ea7e388 · bd38a2a2 · bd38a2a2
Commit bd38a2a2 authored 8 years ago by Mark Otto Committed by Mark Otto 8 years ago
Hide whitespace changes
Inline Side-by-side

Showing

with 8 additions and 9 deletions
+8 -9
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -134,8 +134,8 @@
  font-size: $font-size-base;
  background-color: $popover-title-bg;
  border-bottom: $popover-border-width solid darken($popover-title-bg, 5%);
-  $offset-border-width: ($border-width / $font-size-root);
-  @include border-radius(($border-radius-lg - $offset-border-width) ($border-radius-lg - $offset-border-width) 0 0);
+  $offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
+  @include border-top-radius($offset-border-width);

  &:empty {
    display: none;

--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -55,8 +55,10 @@ html {
 //

 html {
-  // Sets a specific default `font-size` for user with `rem` type scales.
-  font-size: $font-size-root;
+  // We assume no initial pixel `font-size` for accessibility reasons. This
+  // allows web visitors to customize their browser default font-size, making
+  // your project more inclusive and accessible to everyone.
+
  // As a side-effect of setting the @viewport above,
  // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use.
  // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive,
@@ -65,12 +67,12 @@ html {
  // See https://github.com/twbs/bootstrap/issues/18543
  // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383/
  -ms-overflow-style: scrollbar;
+
  // Changes the default tap highlight to be completely transparent in iOS.
  -webkit-tap-highlight-color: rgba(0,0,0,0);
 }

 body {
-  // Make the `body` use the `font-size-root`
  font-family: $font-family-base;
  font-size: $font-size-base;
  font-weight: $font-weight-base;

--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -249,10 +249,7 @@ $font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
 $font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:       $font-family-sans-serif !default;

-// Pixel value used to responsively scale all typography. Applied to the `<html>` element.
-$font-size-root: 16px !default;
-
-$font-size-base: 1rem !default;
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:   1.25rem !default;
 $font-size-sm:   .875rem !default;
 $font-size-xs:   .75rem !default;