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
*/
@ -15,16 +15,19 @@ $tooltip-dark-allow: false;
// 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
// your pattern.
@import "core";
@import "../pg/patterns/core/sticky-note/_sticky-note";
@import "../pg/patterns/core/switch/_switch";
@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 "core" as *;
@use "../../node_modules/prismjs/themes/prism";
@use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
@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;
}
@ -32,19 +35,19 @@ $tooltip-dark-allow: false;
html {
font-family: $font-body;
font-size: $font-size;
@include break(-md) {
@include breakpoints.break(-md) {
font-size: calc($font-size + 2pt);
}
&.show-breakpoints {
@include breakpoint-debug;
@include breakpoints.breakpoint-debug;
}
}
@include core-colour-samples;
// @include core-colour-samples;
@include tooltip;
@include sticky-note;
@include status;
@include tooltip.tooltip;
@include sticky-note.sticky-note;
@include status.status;
article[data-status=deprecated]:not(.show-deprecated) {
display: none;
@ -65,7 +68,7 @@ body {
margin: 0 auto;
width: 100vw;
@include header;
@include header.header;
nav {
background-color: var(--colour-blue);
@ -84,7 +87,7 @@ body {
color: var(--colour-white);
text-decoration: none;
}
@include break(md-) {
@include breakpoints.break(md-) {
display: initial;
}
}
@ -98,7 +101,7 @@ body {
grid-row: 3;
grid-template-columns: auto repeat(2, max-content);
text-align: right;
@include switch;
@include switch.switch;
label {
text-align: left;;
}
@ -109,7 +112,7 @@ body {
grid-column: 1 / -1;
grid-row: 4;
@include break(-md) {
@include breakpoints.break(-md) {
grid-row: 3;
padding: 0;
}
@ -117,7 +120,7 @@ body {
@supports(grid-area: auto) {
display: grid;
grid-template-columns: 1rem repeat(2, auto) 1rem;
@include break(md-) {
@include breakpoints.break(md-) {
grid-template-columns: auto repeat(2, 22rem) auto;
}
}
@ -135,7 +138,7 @@ body {
display: none;
}
@include tabs {
@include tabs.tabs {
pre {
background-color: var(--colour-black-5);
font-size: .8rem;
@ -150,15 +153,12 @@ body {
display: grid;
grid-gap: .5rem;
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";