feat(breakpoints): media query mixin offset options

[snorrekim]

• Adds global or parameter customization for mixins allAbove() and allBelow()

Global customization:

Will only works for the app's own stylesheets, won't retroactively affect imported Eufemia components.

@import '@dnb/eufemia/style/core/utilities.scss';

// allAbove() and allBelow() will subtract -10em from the size
$breakpoint-offset: -10em;

// the sizes 'medium' and 'large' for allAbove() and allBelow() are changed.
$breakpoints: map-merge(
  $breakpints,
  (
    'medium': 40em,
    'large': 90em,
  )
);

Mixin parameter

@import '@dnb/eufemia/style/core/utilities.scss';

@include allAbove($size: small, $offset: 10em) {
  // adds 10em to $size
}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
eufemia	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 20, 2023 11:31am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 0a01538:

Sandbox	Source
eufemia-starter	Configuration

[tujoworker]

Nice addition, Snorre!

I think, it should be possible for the global offset to give different offsets per media query size. It would be at least useful. Lets say, on a small screen, a menu is not visible, then we don't want an offset.

[snorrekim]

Nice addition, Snorre!

I think, it should be possible for the global offset to give different offsets per media query size. It would be at least useful. Lets say, on a small screen, a menu is not visible, then we don't want an offset.

I think that would be covered by having access to the $breakpoints list. If you need to, say, offset everything except small by 10em, then you could change small to be 10em smaller. Or if you need a different offset for all of the sizes, you might as well edit all the $breakpoints. And you can edit the breakpoints based on their existing value if you want as well.

$breakpoints: map-merge(
  $breakpints,
  (
    'medium': map-get($breakpoints, medium) + 10em,
    'large': map-get($breakpoints, large) + 5em,
  )
);

[tujoworker]

🎉 This PR is included in version 10.11.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀