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

Fixes #34 some issues with breakpoints

Browse Source
This commit is contained in:
A McIlwraith 2025-06-10 16:20:24 -04:00
parent 8fe6e39440
commit b44b17d830
16 changed files with 107 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/index.html
View File

@ -76,8 +76,8 @@
<h1 class="status-complete"><span>Header <h1 class="status-complete"><span>Header
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="layouts-breakpoints" data-name="breakpoints" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoints" style="height: 100vh"> <article id="layouts-breakpoint" data-name="breakpoint" data-status="complete" data-template="pug" data-core="true" data-path="layouts/breakpoint" style="height: 100vh">
<h1 class="status-complete"><span>Breakpoints <h1 class="status-complete"><span>Breakpoint
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1> <tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article> </article>
<article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh"> <article id="layouts-tabs" data-name="tabs" data-status="complete" data-template="pug" data-core="true" data-path="layouts/tabs" style="height: 100vh">

14
public/patterns/core/breakpoints/index.html → public/patterns/core/breakpoint/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@ -14,8 +21,8 @@
<p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p> <p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
<tabset id="breakpoints"> <tabset id="breakpoints">
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "[path-to]/breakpoints"; <pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
@include break([breakpoint]) { @include breapoint.break([breakpoint]) {
// css here // css here
}</pre> }</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
@ -24,12 +31,13 @@
// 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;
content: "bigger than extra large"; content: "bigger than extra large";
display: grid; display: grid;
font-family: sans-serif;
font-size: 25px; font-size: 25px;
grid-template-columns: auto; grid-template-columns: auto;
padding: 25px; padding: 25px;

7
public/patterns/core/colours/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>

9
public/patterns/core/header/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@ -44,7 +51,7 @@ header
</pre> </pre>
<pre class="language-css" tab="css">header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}</pre> <pre class="language-css" tab="css">header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}</pre>
<div class="language-sass" tab="scss"> <div class="language-sass" tab="scss">
<pre class="language-sass">@import "scss/core/header/header; <pre class="language-sass">@use "scss/core/header/header;
</pre> </pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0 //- Licensed under CC BY-SA 4.0

13
public/patterns/core/status/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="status-report"> <div class="tab-group" id="status-report">
@ -52,7 +59,7 @@
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=layouts/breakpoints"> Breakpoints</a></td> <td><a href="./?p=layouts/breakpoint"> Breakpoint</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete</span></td>
</tr> </tr>
<tr> <tr>
@ -83,7 +90,7 @@
<td colspan="2"><span class="status-complete">Complete (10)</span></td> <td colspan="2"><span class="status-complete">Complete (10)</span></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td> <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
@ -136,7 +143,7 @@
<table role="presentation"> <table role="presentation">
<tbody> <tbody>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoints">Breakpoints</a></td> <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span><span class="status-complete">Complete</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>

71
public/patterns/core/sticky-note/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@ -22,7 +29,7 @@
<pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}</pre> <pre class="language-css" data-tab="css"> @import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap");sticky-note-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;border-radius:50%;display:inline-block;height:0.5rem;position:relative;width:0.5rem}sticky-note-wrapper *{-webkit-box-sizing:border-box;box-sizing:border-box}sticky-note-wrapper sticky-note{cursor:-webkit-grab;cursor:grab;display:-ms-grid;display:grid;float:left;font-size:1rem;height:13rem;left:0;place-items:stretch;position:absolute;top:0;width:13rem;z-index:100}sticky-note-wrapper sticky-note:active{cursor:-webkit-grabbing;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}sticky-note-wrapper sticky-note.right{float:right}sticky-note-wrapper sticky-note>div{-ms-grid-row:1;grid-row:1;-ms-grid-column:1;grid-column:1}sticky-note-wrapper sticky-note>div:first-child{background-color:rgba(0,0,0,0.25);-webkit-box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);box-shadow:-2px 2px 15px 0 rgba(0,0,0,0.5);display:-ms-grid;display:grid;margin:2rem 1rem 0.25rem 0.36rem;width:calc(100% - 1rem)}sticky-note-wrapper sticky-note>div:nth-child(2){clip-path:url(#stickyClip);display:-ms-grid;display:grid;font-family:"Kalam",cursive;font-style:1rem;font-weight:300;line-height:1.25rem;padding:1rem;place-items:center;text-align:center}sticky-note-wrapper sticky-note>div:nth-child(2)>*{font-family:"Kalam",cursive!important;font-style:normal!important;font-weight:300!important}@media screen and (max-width:1024px){sticky-note-wrapper sticky-note>div:nth-child(2){max-width:13rem;min-width:13rem;width:1rem}}@media screen and (max-width:768px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:1.75rem;max-width:21rem;min-height:21rem}}@media screen and (max-width:640px){sticky-note-wrapper sticky-note>div:nth-child(2){font-size:2.5rem;max-width:26rem;min-height:26rem}}sticky-note-wrapper sticky-note>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#ffffdd),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,#ffffc9),to(#ffffba));background:linear-gradient(180deg,#ffffdd 0%,#ffffd3 2%,#ffffd3 12%,#ffffc9 75%,#ffffba 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#9dddec),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,#8bd7e8),to(#7fd3e6));background:linear-gradient(180deg,#9dddec 0%,#94daea 2%,#94daea 12%,#8bd7e8 75%,#7fd3e6 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#fa7c93),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,#fa6883),to(#f95977));background:linear-gradient(180deg,#fa7c93 0%,#fa728b 2%,#fa728b 12%,#fa6883 75%,#f95977 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(#c5fcc9),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,#b1fab7),to(#a3faaa));background:linear-gradient(180deg,#c5fcc9 0%,#bbfbc0 2%,#bbfbc0 12%,#b1fab7 75%,#a3faaa 100%)}sticky-note-wrapper:has(sticky-note:hover){background-color:#ffffd3;border:1px solid black}sticky-note-wrapper:has(sticky-note.yellow:hover){background-color:#ffffd3}sticky-note-wrapper:has(sticky-note.blue:hover){background-color:#94daea}sticky-note-wrapper:has(sticky-note.pink:hover){background-color:#fa728b}sticky-note-wrapper:has(sticky-note.green:hover){background-color:#bbfbc0}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] ); <pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] );
@import "scss/core/switch/_sticky-note"; @use "scss/core/switch/_sticky-note";
@include sticky-note; @include sticky-note;
</pre> </pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
@ -279,38 +286,40 @@ const calculateStickyPosition = (s) => {
} }
} }
export function init(p = document){ module.exports = {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px","")); init: (p = document) => {
p.querySelectorAll("sticky-note").forEach((s) => {
if (s.querySelectorAll("svg").length == 0) {
let wrapper = document.createElement("sticky-note-wrapper");
s.parentNode.insertBefore(wrapper, s);
wrapper.appendChild(s);
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
}
calculateStickyPosition(s);
drag(s);
s.ondblclick = (e) => {
if (e.ctrlKey) {
calculateStickyPosition(s);
} else {
// add one click select
}
}
})
window.onresize = () => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px","")); font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => { p.querySelectorAll("sticky-note").forEach((s) => {
if (s.querySelectorAll("svg").length == 0) {
let wrapper = document.createElement("sticky-note-wrapper");
s.parentNode.insertBefore(wrapper, s);
wrapper.appendChild(s);
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
}
calculateStickyPosition(s); calculateStickyPosition(s);
}); drag(s);
s.ondblclick = (e) => {
if (e.ctrlKey) {
calculateStickyPosition(s);
} else {
// add one click select
}
}
})
window.onresize = () => {
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
let stickies = p.querySelectorAll("sticky-note");
stickies.forEach((s) => {
calculateStickyPosition(s);
});
}
} }
}</pre> }</pre>
</div> </div>

9
public/patterns/core/switch/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@ -20,7 +27,7 @@
<pre class="language-pug" tab="pug">span#example-id(role="switch")</pre> <pre class="language-pug" tab="pug">span#example-id(role="switch")</pre>
<pre class="language-css" tab="css">[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}</pre> <pre class="language-css" tab="css">[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "scss/core/switch/_switch"; <pre class="language-sass">@use "scss/core/switch/_switch";
@include switch; @include switch;
</pre> </pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith

2
public/patterns/core/tabs/index.html
View File

@ -44,7 +44,7 @@
</pre> </pre>
<pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre> <pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "scss/core/tabs/_tabs"; <pre class="language-sass">@use "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
// optional content block // optional content block
}; };

11
public/patterns/core/tooltip/index.html
View File

@ -2,6 +2,13 @@
<html> <html>
<head> <head>
<title>Pattern</title> <title>Pattern</title>
<script>
let u = document.location.href.substring(0, document.location.href.search(/patterns/i));
let p = document.location.pathname.substring(document.location.pathname.search(/patterns/i));
p = p.replace(/\/$|\/index\.html/i, "").substring(9);
window.location = u + "?p=" + p;
</script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<h2>What is it</h2> <h2>What is it</h2>
@ -182,11 +189,12 @@
} }
}</pre> }</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@import "scss/core/tooltip/_tooltip"; <pre class="language-sass">@use "scss/core/tooltip/_tooltip";
@include tooltip;</pre> @include tooltip;</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0 //- Licensed under CC BY-SA 4.0
$font-body: sans-serif !default;
$tooltip-border-radius: .5rem !default; $tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default; $tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default; $tooltip-dark-background: #1f2127 !default;
@ -215,6 +223,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
border-radius: $tooltip-border-radius; border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground; color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow; filter: $tooltip-light-drop-shadow;
$font-family: $font-body;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
inline-size: max-content; inline-size: max-content;

3
src/pg/_config.pug
View File

@ -2,6 +2,7 @@
- var lang = "en-uk" - var lang = "en-uk"
- var colorpfx = "colour" - var colorpfx = "colour"
- var headings = ["What is it", "When to use it", "How to use it"] - var headings = ["What is it", "When to use it", "How to use it"]
- var downloadExtensions = ["js", "pug", "scss"]
- var generateColourToken = ["colours"] - var generateColourToken = ["colours"]
- -
@ -49,7 +50,7 @@
core: true, core: true,
}, },
{ {
name: "breakpoints", name: "breakpoint",
status: "complete", status: "complete",
core: true, core: true,
}, },

6
src/pg/patterns/core/breakpoint/index.pug
View File

@ -21,10 +21,10 @@ block content
div(tab="scss") div(tab="scss")
+h(3) +h(3)
pre.language-sass. pre.language-sass.
@import "scss/core/breakpoints/breakpoints"; @use "scss/core/breakpoint/breakpoint";
@include break([breakpoint]) { @include breapoint.break([breakpoint]) {
// css here // css here
} }
+h(4) +h(4)
pre.language-sass pre.language-sass
include _breakpoints.scss include _breakpoint.scss

2
src/pg/patterns/core/header/index.pug
View File

@ -32,7 +32,7 @@ block content
div.language-sass(tab="scss") div.language-sass(tab="scss")
pre.language-sass. pre.language-sass.
@import "scss/core/header/header; @use "scss/core/header/header;
pre.language-sass pre.language-sass
include _header.scss include _header.scss

2
src/pg/patterns/core/sticky-note/index.pug
View File

@ -26,7 +26,7 @@ block content
+h(3) +h(3)
pre.language-sass. pre.language-sass.
$sticky-colors: ( [sass map with your own defined colours] ); $sticky-colors: ( [sass map with your own defined colours] );
@import "scss/core/switch/_sticky-note"; @use "scss/core/switch/_sticky-note";
@include sticky-note; @include sticky-note;
+h(4) +h(4)

2
src/pg/patterns/core/switch/index.pug
View File

@ -30,7 +30,7 @@ block content
div(tab="scss") div(tab="scss")
+h(3) +h(3)
pre.language-sass. pre.language-sass.
@import "scss/core/switch/_switch"; @use "scss/core/switch/_switch";
@include switch; @include switch;
+h(4) +h(4)

2
src/pg/patterns/core/tabs/index.pug
View File

@ -42,7 +42,7 @@ block content
div(tab="scss") div(tab="scss")
+h(3) +h(3)
pre.language-sass. pre.language-sass.
@import "scss/core/tabs/_tabs"; @use "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
// optional content block // optional content block
}; };

2
src/pg/patterns/core/tooltip/index.pug
View File

@ -43,7 +43,7 @@ block content
div(tab="scss") div(tab="scss")
+h(3) +h(3)
pre.language-sass. pre.language-sass.
@import "scss/core/tooltip/_tooltip"; @use "scss/core/tooltip/_tooltip";
@include tooltip; @include tooltip;
+h(4) +h(4)
pre.language-sass pre.language-sass