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.

Sign up for GitHub

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

feat: allow breakpoints to be overriden by products #3599

Merged
merged 2 commits into from
Feb 4, 2025
+31 −45
Merged

feat: allow breakpoints to be overriden by products #3599

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
65c258f
feat: allow breakpoints to be overriden by products
davidsauntson Jan 30, 2025
db71602
docs: changelog
davidsauntson Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
**Fix**
- Make breakpoints configurable by products


## v6.4.0

### 22 January 2025
Expand Down
38 changes: 10 additions & 28 deletions scss/2-tools/_breakpoints.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
@use 'sass:list';
@use 'sass:map';
@use '../1-settings/breakpoints' as breakpoint-settings;
@import '../1-settings/breakpoints';

// Name of the next breakpoint (null for the last one)
@function cads-breakpoint-next(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints,
$breakpoint-names: map.keys(breakpoint-settings.$cads-breakpoints)
$breakpoints: $cads-breakpoints,
$breakpoint-names: map.keys($cads-breakpoints)
) {
$n: list.index($breakpoint-names, $name);

Expand All @@ -18,31 +18,22 @@
}

// Minimum breakpoint width (null for the first one)
@function cads-breakpoint-min(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints
) {
@function cads-breakpoint-min($name, $breakpoints: $cads-breakpoints) {
$min: map.get($breakpoints, $name);

@return if($min != 0, $min, null);
}

// Maximum breakpoint width (null for the last one)
@function cads-breakpoint-max(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints
) {
@function cads-breakpoint-max($name, $breakpoints: $cads-breakpoints) {
$next: cads-breakpoint-next($name, $breakpoints);

@return if($next, cads-breakpoint-min($next, $breakpoints) - 0.02px, null);
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin cads-media-breakpoint-up(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints
) {
@mixin cads-media-breakpoint-up($name, $breakpoints: $cads-breakpoints) {
$min: cads-breakpoint-min($name, $breakpoints);

@if $min {
Expand All @@ -56,10 +47,7 @@

// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin cads-media-breakpoint-down(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints
) {
@mixin cads-media-breakpoint-down($name, $breakpoints: $cads-breakpoints) {
$max: cads-breakpoint-max($name, $breakpoints);

@if $max {
Expand All @@ -76,7 +64,7 @@
@mixin cads-media-breakpoint-between(
$lower,
$upper,
$breakpoints: breakpoint-settings.$cads-breakpoints
$breakpoints: $cads-breakpoints
) {
$min: cads-breakpoint-min($lower, $breakpoints);
$max: cads-breakpoint-max($upper, $breakpoints);
Expand All @@ -99,10 +87,7 @@
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply ONLY to the given breakpoint.
@mixin cads-media-breakpoint-only(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints
) {
@mixin cads-media-breakpoint-only($name, $breakpoints: $cads-breakpoints) {
$min: cads-breakpoint-min($name, $breakpoints);
$max: cads-breakpoint-max($name, $breakpoints);

Expand All @@ -122,9 +107,6 @@
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
@function cads-breakpoint-infix(
$name,
$breakpoints: breakpoint-settings.$cads-breakpoints
) {
@function cads-breakpoint-infix($name, $breakpoints: $cads-breakpoints) {
@return if(cads-breakpoint-min($name, $breakpoints) == null, '', '-#{$name}');
}
6 changes: 3 additions & 3 deletions scss/2-tools/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@use '../2-tools/breakpoints' as breakpoints;
@import '../2-tools/breakpoints';

@mixin cads-typographic-scale-text() {
font-size: 1.125rem;
line-height: 1.75rem;

@include breakpoints.cads-media-breakpoint-down(sm) {
@include cads-media-breakpoint-down(sm) {
font-size: 1rem;
line-height: 1.625rem;
}
Expand All @@ -14,7 +14,7 @@
font-size: 1rem;
line-height: 1.625rem;

@include breakpoints.cads-media-breakpoint-down(sm) {
@include cads-media-breakpoint-down(sm) {
font-size: 0.875rem;
line-height: 1.5rem;
}
Expand Down
28 changes: 14 additions & 14 deletions scss/7-utilities/_visibility.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@use '../1-settings/breakpoints' as breakpoint-settings;
@use '../2-tools/breakpoints' as breakpoint-tools;
@use '../2-tools/visibility' as visibility-tools;
@import '../1-settings/breakpoints';
@import '../2-tools/breakpoints';

// @define hide
.cads-hide {
Expand Down Expand Up @@ -41,7 +41,7 @@
.cads-show-md-up {
display: none !important;

@include breakpoint-tools.cads-media-breakpoint-up(md) {
@include cads-media-breakpoint-up(md) {
display: inherit !important;
}
}
Expand All @@ -50,7 +50,7 @@
.cads-show-md-down {
display: inherit !important;

@include breakpoint-tools.cads-media-breakpoint-up(md) {
@include cads-media-breakpoint-up(md) {
display: none !important;
}
}
Expand All @@ -59,14 +59,14 @@
.cads-show-md-only {
display: none !important;

@include breakpoint-tools.cads-media-breakpoint-only(md) {
@include cads-media-breakpoint-only(md) {
display: inherit !important;
}
}

// @define hide-md-up
.cads-hide-md-up {
@include breakpoint-tools.cads-media-breakpoint-up(md) {
@include cads-media-breakpoint-up(md) {
display: none !important;
}
}
Expand All @@ -75,14 +75,14 @@
.cads-hide-md-down {
display: none !important;

@include breakpoint-tools.cads-media-breakpoint-up(md) {
@include cads-media-breakpoint-up(md) {
display: inherit !important;
}
}

// @define hide-md-only
.cads-hide-md-only {
@include breakpoint-tools.cads-media-breakpoint-only(md) {
@include cads-media-breakpoint-only(md) {
display: none !important;
}
}
Expand All @@ -91,7 +91,7 @@
.cads-show-lg-up {
display: none !important;

@include breakpoint-tools.cads-media-breakpoint-up(lg) {
@include cads-media-breakpoint-up(lg) {
display: inherit !important;
}
}
Expand All @@ -100,7 +100,7 @@
.cads-show-lg-down {
display: inherit !important;

@include breakpoint-tools.cads-media-breakpoint-up(lg) {
@include cads-media-breakpoint-up(lg) {
display: none !important;
}
}
Expand All @@ -109,14 +109,14 @@
.cads-show-lg-only {
display: none !important;

@include breakpoint-tools.cads-media-breakpoint-only(lg) {
@include cads-media-breakpoint-only(lg) {
display: inherit !important;
}
}

// @define hide-lg-up
.cads-hide-lg-up {
@include breakpoint-tools.cads-media-breakpoint-up(lg) {
@include cads-media-breakpoint-up(lg) {
display: none !important;
}
}
Expand All @@ -125,14 +125,14 @@
.cads-hide-lg-down {
display: none !important;

@include breakpoint-tools.cads-media-breakpoint-up(lg) {
@include cads-media-breakpoint-up(lg) {
display: inherit !important;
}
}

// @define hide-lg-only
.cads-hide-lg-only {
@include breakpoint-tools.cads-media-breakpoint-only(lg) {
@include cads-media-breakpoint-only(lg) {
display: none !important;
}
}