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

Update patterns use paths to match what download.php gives

Browse Source
This commit is contained in:
A McIlwraith 2024-07-29 19:12:22 -04:00
parent 3292729d53
commit ea92f5e7ac
16 changed files with 54 additions and 365 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ds2 core.sublime-workspace
View File

@ -284,11 +284,7 @@
"/Users/am/Desktop/ds2-core/src",
"/Users/am/Desktop/ds2-core/src/pg",
"/Users/am/Desktop/ds2-core/src/pg/patterns",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/sticky-note",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/switch",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/tooltip"
"/Users/am/Desktop/ds2-core/src/pg/patterns/core"
],
"file_history":
[
@ -423,7 +419,7 @@
],
"find":
{
"height": 26.0
"height": 24.0
},
"find_in_files":
{
@ -511,7 +507,7 @@
],
"incremental_find":
{
"height": 26.0
"height": 24.0
},
"input":
{
@ -556,7 +552,7 @@
"project": "ds2 core.sublime-project",
"replace":
{
"height": 68.0
"height": 44.0
},
"save_all_on_build": false,
"select_file":

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

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

@ -9,11 +9,9 @@
<h2>When to use it</h2>
<p>Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages. </p>
<h2>How to use it</h2>
<p>Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the
<pre class="inline language-js">core: true </pre> and create your own pattern in the location you wish it in your design system.
</p>
<div class="tab-group" id="header">
<pre class="language-html" data-tab="html">
<p>Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the <code class="inline language-js">core: true </code> and create your own pattern in the location you wish it in your design system. </p>
<tabset id="header">
<pre class="language-html" tab="html">
<!-- create temp variables and store the design system values-->
<header>
<!-- The headline banner area -->
@ -27,20 +25,7 @@
<!-- Other sections can go here, such as search and directory-->
</div>
</header></pre>
<pre class="language-html" data-tab="html">
<header>
<!-- The headline banner area -->
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<text>DS2 core</text>
</svg>
<div>
<div class="header-title">
<h1> <a href="./">DS2 core</a></h1>
</div>
<!-- Other sections can go here, such as search and directory-->
</div>
</header></pre>
<pre class="language-pug" data-tab="pug">//- DS2 core (c) 2024 Alexander McIlwraith
<pre class="language-pug" tab="pug">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
//- required variables
@ -57,8 +42,11 @@ header
a(href="./")= site
// Other sections can go here, such as search and directory
</pre>
<pre class="language-css" data-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-sass" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
<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">
<pre class="language-sass">@import "scss/core/header/header;
</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$header-bg-color: var(--colour-grey-xxl) !default;
@ -112,6 +100,7 @@ $font-weight: 700 !default;
}
}
}</pre>
</div>
</div>
</tabset>
</body>
</html>

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

@ -9,7 +9,7 @@
<h2>When to use it</h2>
<p>Use a sticky when you want to make a note without adding it to the content. </p>
<h2>How to use it</h2>
<p>Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either <code class="language-html inline">float="[ right | left &#93;"</code> or <code class="language-html inline">offset="[ top | left &#93;"</code>. Offset will take negative values in any web measurement unit.
<p>Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either <code class="language-html inline">float="&#91; right | left &#93;"</code> or <code class="language-html inline">offset="&#91; top | left &#93;"</code>. Offset will take negative values in any web measurement unit.
<sticky-note class="blue" offset="-10rem 1rem">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note>
<sticky-note float="right">You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).</sticky-note>
</p>
@ -19,136 +19,12 @@
<sticky-note class="blue" float="right">This <strong>is</strong> a sample sticky. You can drag it out of the way if you need to see the content under it.</sticky-note></pre>
<pre class="language-pug" tab="pug">sticky-note(float="right").blue This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.</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:nth-child(1) {
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">
<pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] );
@import "[path to]/_sticky-note";
@include sticky-note;</pre>
@import "scss/core/switch/_sticky-note";
@include sticky-note;
</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@ -303,7 +179,7 @@ $sticky-colors: (
}</pre>
</div>
<div tab="js">
<pre class="language-js">import * as stickynote from "[path to]]/_sticky-note.js";
<pre class="language-js">import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
stickynote.init()
</pre>
<pre class="language-js">//- DS2 core (c) 2024 Alexander McIlwraith

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

@ -18,34 +18,9 @@
<div class="tab-group" id="switches">
<pre class="language-html" tab="html"><span id="example-id" role="switch"></span></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">
<pre class="language-sass">@import "[path to]/_switch";
<pre class="language-sass">@import "scss/core/switch/_switch";
@include switch;
</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
@ -87,7 +62,7 @@ $switch-height: 1.5rem !default;
</div>
<div tab="js">
<pre class="language-js">// Note that switch is a reserved word.
import * as swtch from "[path to]]/_switch.js";
import * as swtch from "./js/core/switch/_switch.js";
swtch.init();
</pre>
<pre class="language-js">//- DS2 core (c) 2024 Alexander McIlwraith

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

@ -80,7 +80,7 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
display: none;
}</pre>
<div tab="scss">
<pre class="language-sass">@import "[path to]/_tabs";
<pre class="language-sass">@import "scss/core/tabs/_tabs";
@include tabs{
// optional content block
};
@ -156,7 +156,7 @@ $tab-notselected: #f0f0f0 !default;
}</pre>
</div>
<div tab="js">
<pre class="language-js">import * as tabs from "[path to]/_tabs.js";
<pre class="language-js">import * as tabs from "./js/core/tabs/_tabs.js";
tabs.init();</pre>
<pre class="language-js">/* DS2 core (c) 2024 Alexander McIlwraith
import * as tabs from "../pg/patterns/layouts/tabs/_tabs.js";

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

@ -182,7 +182,7 @@
}
}</pre>
<div tab="scss">
<pre class="language-sass">@import "[path to]/_tooltip";
<pre class="language-sass">@import "scss/core/tooltip/_tooltip";
@include tooltip;</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0

1
src/pg/patterns/core/breakpoints/_breakpoints.scss
View File

@ -10,6 +10,7 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 14
color: white;
content: "bigger than extra large";
display: grid;
font-family: sans-serif;
font-size: 25px;
grid-template-columns: auto;
padding: 25px;

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

@ -21,7 +21,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
@import "[path-to]/breakpoints";
@import "scss/core/breakpoints/breakpoints";
@include break([breakpoint]) {
// css here
}

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

@ -10,10 +10,10 @@ block content
p Use a header at the top of every page. The 'front page' of a site may have a different header than the rest of the pages.
+h(2)
p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[pre.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system.
p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[code.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system.
div.tab-group#header
pre.language-html(data-tab="html")
tabset#header
pre.language-html(tab="html")
// create temp variables and store the design system values
- var tmpsite= site
- var tmproot= root
@ -25,12 +25,14 @@ block content
//- reset variables to original values
- site= tmpsite
- root= tmproot
pre.language-html(data-tab="html")
include _header.pug
pre.language-pug(data-tab="pug")
pre.language-pug(tab="pug")
include _header.pp
pre.language-css(data-tab="css")
pre.language-css(tab="css")
include header.css
pre.language-sass(data-tab="scss")
include _header.scss
div.language-sass(tab="scss")
pre.language-sass.
@import "scss/core/header/header;
pre.language-sass
include _header.scss

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

@ -8,9 +8,8 @@ block content
+h(1)
p Use a sticky when you want to make a note without adding it to the content.
+h(2)
p Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either #[code.language-html.inline float="[ right | left &#93;"] or #[code.language-html.inline offset="[ top | left &#93;"]. Offset will take negative values in any web measurement unit.
sticky-note.blue(offset="-10rem 1rem") This #[strong is] a sample sticky.
| You can drag it out of the way if you need to see the content under it.
p Uses absolute positioning. Passing an optional element to the init function will initialise tabs within that element. You can move the position using either #[code.language-html.inline float="&#91; right | left &#93;"] or #[code.language-html.inline offset="&#91; top | left &#93;"]. Offset will take negative values in any web measurement unit.
sticky-note.blue(offset="-10rem 1rem") This #[strong is] a sample sticky. You can drag it out of the way if you need to see the content under it.
sticky-note(float="right") You will notice when you hover over the sticky, it shows a dot in the colour of the sticky in the position where the sticky note refers to (assuming you haven't dragged it and scrolled that location off the screen).
p If you wish to create a custom element, that extends another HTML element, the native element has to be extended in customElements.define(). Custom elements that inherit native elements are also known as "type extension custom elements".
@ -27,15 +26,16 @@ block content
+h(3)
pre.language-sass.
$sticky-colors: ( [sass map with your own defined colours] );
@import "[path to]/_sticky-note";
@import "scss/core/switch/_sticky-note";
@include sticky-note;
+h(4)
pre.language-sass
include _sticky-note.scss
div(tab="js")
+h(3)
pre.language-js.
import * as stickynote from "[path to]]/_sticky-note.js";
import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
stickynote.init()
+h(4)

127
src/pg/patterns/core/sticky-note/sticky-note.css
View File

@ -1,126 +1 @@
@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:nth-child(1) {
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;
}
@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}

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

@ -30,7 +30,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
@import "[path to]/_switch";
@import "scss/core/switch/_switch";
@include switch;
+h(4)
@ -40,7 +40,7 @@ block content
+h(3)
pre.language-js.
// Note that switch is a reserved word.
import * as swtch from "[path to]]/_switch.js";
import * as swtch from "./js/core/switch/_switch.js";
swtch.init();
+h(4)

27
src/pg/patterns/core/switch/switch.css
View File

@ -1,26 +1 @@
[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%);
}
[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%)}

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

@ -33,7 +33,7 @@ block content
div(tab="scss")
+h(3)
pre.language-sass.
@import "[path to]/_tabs";
@import "scss/core/tabs/_tabs";
@include tabs{
// optional content block
};
@ -44,7 +44,7 @@ block content
div(tab="js")
+h(3)
pre.language-js.
import * as tabs from "[path to]/_tabs.js";
import * as tabs from "./js/core/tabs/_tabs.js";
tabs.init();
+h(4)
pre.language-js

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

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