Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change compact display selector to adjust font size only on the body … #48

Open
wants to merge 1 commit into
base: 1.2
Choose a base branch
from

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
1 participant