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

Update references to new breakpoint tokens #146

Closed
blackfalcon opened this issue Mar 27, 2023 · 0 comments · Fixed by #153
Closed

Update references to new breakpoint tokens #146

blackfalcon opened this issue Mar 27, 2023 · 0 comments · Fixed by #153
Assignees
Labels
Milestone

Comments

@blackfalcon
Copy link
Member

Is your feature request related to a problem? Please describe.

The following code is out of spec due to the newly created breakpoint tokens.

/// Standard breakpoint to support resolutions greater than 1232px.
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
/// .foo {
/// @include auro_breakpoint--lg {
/// ...
/// }
/// }
@mixin auro_breakpoint--lg {
@media screen and (min-width: $auro-breakpoint-lg) {
@content;
}
}
/// Standard breakpoint to support resolutions greater than 1024px.
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
/// .foo {
/// @include auro_breakpoint--md {
/// ...
/// }
/// }
@mixin auro_breakpoint--md {
@media screen and (min-width: $auro-breakpoint-md) {
@content;
}
}
/// Standard breakpoint to support resolutions greater than 660px.
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
/// .foo {
/// @include auro_breakpoint--sm {
/// ...
/// }
/// }
@mixin auro_breakpoint--sm {
@media screen and (min-width: $auro-breakpoint-sm) {
@content;
}
}
/// Open format mixin to define any breakpoint.
///
/// See also: [Media_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)
///
/// Compatibility: [css-mediaqueries](https://caniuse.com/#feat=css-mediaqueries\)
/// @example scss - import mixin file
/// @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Auro breakpoint tokens
/// $auro-breakpoint-sm: 660px;
/// $auro-breakpoint-md: 1024px;
/// $auro-breakpoint-lg: 1232px;

Describe the solution you'd like

All relative code to breakpoints requires updates.

Relative information

See the following issue and linked PR

Exit criteria

This issue can be closed once all the breakpoint code and documentation in WCSS is updated to meet this new spec.

@blackfalcon blackfalcon added this to the Grid System milestone Mar 27, 2023
@jordanjones243 jordanjones243 self-assigned this May 10, 2023
@jordanjones243 jordanjones243 linked a pull request May 10, 2023 that will close this issue
6 tasks
jordanjones243 added a commit that referenced this issue May 10, 2023
BREAKING CHANGE: The pixel values for sm, md and lg breakpoints have been altered.
blackfalcon pushed a commit that referenced this issue May 23, 2023
# [4.5.0](v4.4.0...v4.5.0) (2023-05-23)

### Features

* **breakpoint:** add new auro breakpoints [#146](#146) ([3f15e34](3f15e34))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants