gamv/ds2-core
1
0
Fork 0
Code Issues 9 Releases 9 Activity

Move breakpoints to breakpoint for easier @use

Browse Source
This commit is contained in:
A McIlwraith 2025-06-09 20:44:21 -04:00
parent 5f050066e9
commit 8fe6e39440
5 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pg/core/_core-colour-samples.scss
View File

@ -1,4 +1,4 @@
@use "../pg/patterns/core/breakpoints/breakpoints"; @use "../pg/patterns/core/breakpoint/breakpoint";
@mixin core-colour-samples { @mixin core-colour-samples {
@ -38,14 +38,14 @@
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@include breakpoints.break(-lg) { @include breakpoint.break(-lg) {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
@include breakpoints.break(-sm) { @include breakpoint.break(-sm) {
grid-template-columns: auto; grid-template-columns: auto;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -69,7 +69,7 @@
width: 20rem; width: 20rem;
max-width: 318px; max-width: 318px;
@include breakpoints.break(-lg) { @include breakpoint.break(-lg) {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }

2
src/pg/patterns/core/breakpoints/_breakpoints.scss → src/pg/patterns/core/breakpoint/_breakpoint.scss
View File

@ -4,7 +4,7 @@
// default breakpoints match bootstrap 5 breakpoints. // default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default; $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@mixin breakpoint-debug { @mixin debug {
body::before, body::after { body::before, body::after {
background-color: #555; background-color: #555;
color: white; color: white;

0
src/pg/patterns/core/breakpoints/index.pug → src/pg/patterns/core/breakpoint/index.pug
View File

8
src/scss/_core.scss
View File

@ -10,7 +10,7 @@
*/ */
@use "../pg/patterns/core/breakpoints/breakpoints"; @use "../pg/patterns/core/breakpoint/breakpoint";
@mixin core-colour-samples { @mixin core-colour-samples {
@ -50,14 +50,14 @@
gap: 1rem; gap: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
@include breakpoints.break(-lg) { @include breakpoint.break(-lg) {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
@include breakpoints.break(-sm) { @include breakpoint.break(-sm) {
grid-template-columns: auto; grid-template-columns: auto;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
@ -81,7 +81,7 @@
width: 20rem; width: 20rem;
max-width: 318px; max-width: 318px;
@include breakpoints.break(-lg) { @include breakpoint.break(-lg) {
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
} }

12
src/scss/scaffolding.scss
View File

@ -23,7 +23,7 @@ $tooltip-dark-allow: false;
@use "../pg/patterns/core/sticky-note/_sticky-note"; @use "../pg/patterns/core/sticky-note/_sticky-note";
@use "../pg/patterns/core/switch/_switch"; @use "../pg/patterns/core/switch/_switch";
@use "../pg/patterns/core/tooltip/_tooltip"; @use "../pg/patterns/core/tooltip/_tooltip";
@use "../pg/patterns/core/breakpoints/_breakpoints"; @use "../pg/patterns/core/breakpoint/_breakpoint";
@use "../pg/patterns/core/header/_header"; @use "../pg/patterns/core/header/_header";
@use "../pg/patterns/core/tabs/_tabs"; @use "../pg/patterns/core/tabs/_tabs";
@use "../pg/patterns/core/status/_status"; @use "../pg/patterns/core/status/_status";
@ -43,11 +43,11 @@ $tooltip-dark-allow: false;
html { html {
font-family: $font-body; font-family: $font-body;
font-size: $font-size; font-size: $font-size;
@include breakpoints.break(-md) { @include breakpoint.break(-md) {
font-size: calc($font-size + 2pt); font-size: calc($font-size + 2pt);
} }
&.show-breakpoints { &.show-breakpoints {
@include breakpoints.breakpoint-debug; @include breakpoint.debug;
} }
} }
@ -91,7 +91,7 @@ body {
color: var(--colour-white); color: var(--colour-white);
text-decoration: none; text-decoration: none;
} }
@include breakpoints.break(md-) { @include breakpoint.break(md-) {
display: initial; display: initial;
} }
} }
@ -116,7 +116,7 @@ body {
grid-column: 1 / -1; grid-column: 1 / -1;
grid-row: 4; grid-row: 4;
@include breakpoints.break(-md) { @include breakpoint.break(-md) {
grid-row: 3; grid-row: 3;
padding: 0; padding: 0;
} }
@ -124,7 +124,7 @@ body {
@supports(grid-area: auto) { @supports(grid-area: auto) {
display: grid; display: grid;
grid-template-columns: 1rem repeat(2, auto) 1rem; grid-template-columns: 1rem repeat(2, auto) 1rem;
@include breakpoints.break(md-) { @include breakpoint.break(md-) {
grid-template-columns: auto repeat(2, 22rem) auto; grid-template-columns: auto repeat(2, 22rem) auto;
} }
} }