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

switch core to use @use(fixes #31)

Browse Source
This commit is contained in:
A McIlwraith 2025-05-14 18:04:28 -04:00
parent 9db11f3f97
commit 6d8b9d0e47
2 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

54
src/scss/scaffolding.scss
View File

@ -1,4 +1,4 @@
/* /* ----------------------------------------------------------
* Variables * Variables
*/ */
@ -15,16 +15,19 @@ $tooltip-dark-allow: false;
// We recommend explicitly using the underscore when referring to pattern scss // We recommend explicitly using the underscore when referring to pattern scss
// as you may have also created a version that compiles to css to display in // as you may have also created a version that compiles to css to display in
// your pattern. // your pattern.
@import "core"; @use "core" as *;
@use "../../node_modules/prismjs/themes/prism";
@import "../pg/patterns/core/sticky-note/_sticky-note"; @use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@import "../pg/patterns/core/switch/_switch"; @use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
@import "../pg/patterns/core/tooltip/_tooltip";
@import "../pg/patterns/core/breakpoints/_breakpoints";
@import "../pg/patterns/core/header/_header";
@import "../pg/patterns/core/tabs/_tabs";
@import "../pg/patterns/core/status/_status";
@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/header/_header";
@use "../pg/patterns/core/tabs/_tabs";
@use "../pg/patterns/core/status/_status";
use
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
@ -32,19 +35,19 @@ $tooltip-dark-allow: false;
html { html {
font-family: $font-body; font-family: $font-body;
font-size: $font-size; font-size: $font-size;
@include break(-md) { @include breakpoints.break(-md) {
font-size: calc($font-size + 2pt); font-size: calc($font-size + 2pt);
} }
&.show-breakpoints { &.show-breakpoints {
@include breakpoint-debug; @include breakpoints.breakpoint-debug;
} }
} }
@include core-colour-samples; // @include core-colour-samples;
@include tooltip; @include tooltip.tooltip;
@include sticky-note; @include sticky-note.sticky-note;
@include status; @include status.status;
article[data-status=deprecated]:not(.show-deprecated) { article[data-status=deprecated]:not(.show-deprecated) {
display: none; display: none;
@ -65,7 +68,7 @@ body {
margin: 0 auto; margin: 0 auto;
width: 100vw; width: 100vw;
@include header; @include header.header;
nav { nav {
background-color: var(--colour-blue); background-color: var(--colour-blue);
@ -84,7 +87,7 @@ body {
color: var(--colour-white); color: var(--colour-white);
text-decoration: none; text-decoration: none;
} }
@include break(md-) { @include breakpoints.break(md-) {
display: initial; display: initial;
} }
} }
@ -98,7 +101,7 @@ body {
grid-row: 3; grid-row: 3;
grid-template-columns: auto repeat(2, max-content); grid-template-columns: auto repeat(2, max-content);
text-align: right; text-align: right;
@include switch; @include switch.switch;
label { label {
text-align: left;; text-align: left;;
} }
@ -109,7 +112,7 @@ body {
grid-column: 1 / -1; grid-column: 1 / -1;
grid-row: 4; grid-row: 4;
@include break(-md) { @include breakpoints.break(-md) {
grid-row: 3; grid-row: 3;
padding: 0; padding: 0;
} }
@ -117,7 +120,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 break(md-) { @include breakpoints.break(md-) {
grid-template-columns: auto repeat(2, 22rem) auto; grid-template-columns: auto repeat(2, 22rem) auto;
} }
} }
@ -135,7 +138,7 @@ body {
display: none; display: none;
} }
@include tabs { @include tabs.tabs {
pre { pre {
background-color: var(--colour-black-5); background-color: var(--colour-black-5);
font-size: .8rem; font-size: .8rem;
@ -150,15 +153,12 @@ body {
display: grid; display: grid;
grid-gap: .5rem; grid-gap: .5rem;
grid-template-columns: max-content auto; grid-template-columns: max-content auto;
@include switch; @include switch.switch;
} }
} }
} }
} }
} }
// keep your prism modules
@import "../../node_modules/prismjs/themes/prism";
@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";