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 {
@ -38,14 +38,14 @@
gap: 1rem;
margin-bottom: 1rem;
@include breakpoints.break(-lg) {
@include breakpoint.break(-lg) {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 100%;
width: 100%;
}
@include breakpoints.break(-sm) {
@include breakpoint.break(-sm) {
grid-template-columns: auto;
width: 100%;
max-width: 100%;
@ -69,7 +69,7 @@
width: 20rem;
max-width: 318px;
@include breakpoints.break(-lg) {
@include breakpoint.break(-lg) {
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.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@mixin breakpoint-debug {
@mixin debug {
body::before, body::after {
background-color: #555;
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 {
@ -50,14 +50,14 @@
gap: 1rem;
margin-bottom: 1rem;
@include breakpoints.break(-lg) {
@include breakpoint.break(-lg) {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-width: 100%;
width: 100%;
}
@include breakpoints.break(-sm) {
@include breakpoint.break(-sm) {
grid-template-columns: auto;
width: 100%;
max-width: 100%;
@ -81,7 +81,7 @@
width: 20rem;
max-width: 318px;
@include breakpoints.break(-lg) {
@include breakpoint.break(-lg) {
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/switch/_switch";
@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/tabs/_tabs";
@use "../pg/patterns/core/status/_status";
@ -43,11 +43,11 @@ $tooltip-dark-allow: false;
html {
font-family: $font-body;
font-size: $font-size;
@include breakpoints.break(-md) {
@include breakpoint.break(-md) {
font-size: calc($font-size + 2pt);
}
&.show-breakpoints {
@include breakpoints.breakpoint-debug;
@include breakpoint.debug;
}
}
@ -91,7 +91,7 @@ body {
color: var(--colour-white);
text-decoration: none;
}
@include breakpoints.break(md-) {
@include breakpoint.break(md-) {
display: initial;
}
}
@ -116,7 +116,7 @@ body {
grid-column: 1 / -1;
grid-row: 4;
@include breakpoints.break(-md) {
@include breakpoint.break(-md) {
grid-row: 3;
padding: 0;
}
@ -124,7 +124,7 @@ body {
@supports(grid-area: auto) {
display: grid;
grid-template-columns: 1rem repeat(2, auto) 1rem;
@include breakpoints.break(md-) {
@include breakpoint.break(md-) {
grid-template-columns: auto repeat(2, 22rem) auto;
}
}