Skip to content

Conversation

@RobinRadic
Copy link

@RobinRadic RobinRadic commented Sep 16, 2019

When currently using the body.display--compact class, it makes ALL child elements having the font-size. This means that all get overridden unless specifically set in css.

I think this should be more like how bootstrap does set the website font-size, which can be seen in _reboot.scss:

body {
  // Make the `body` use the `font-size-root`
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  // Go easy on the eyes and use something other than `#000` for text
  color: $body-color;
  // By default, `<body>` has no `background-color` so we set one as a best practice.
  background-color: $body-bg;
}

Should use the same way if you want global font-size adjustments. This pull request does exactly that.

@RobinRadic
Copy link
Author

Once you use the body.display--compact style ALL elements will have this style:

@media (min-width: 992px)
body.display--compact * {
    font-size: 14px;
}

So if you'd like to set the font size of any other element with css, you'd be writing something like this:

.breadcrumb-item a,
@media (min-width: 992px) body.display--compact .breadcrumb-item a {
    font-size: 12px;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant