Update patterns use paths to match what download.php gives
This commit is contained in:
parent
3292729d53
commit
ea92f5e7ac
@ -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":
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -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;
|
||||
@ -113,5 +101,6 @@ $font-weight: 700 !default;
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</tabset>
|
||||
</body>
|
||||
</html>
|
||||
@ -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 ]"</code> or <code class="language-html inline">offset="[ top | left ]"</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="[ right | left ]"</code> or <code class="language-html inline">offset="[ top | left ]"</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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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";
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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")
|
||||
div.language-sass(tab="scss")
|
||||
|
||||
pre.language-sass.
|
||||
@import "scss/core/header/header;
|
||||
|
||||
pre.language-sass
|
||||
include _header.scss
|
||||
@ -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 ]"] or #[code.language-html.inline offset="[ top | left ]"]. 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="[ right | left ]"] or #[code.language-html.inline offset="[ top | left ]"]. 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)
|
||||
|
||||
@ -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}
|
||||
@ -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)
|
||||
|
||||
@ -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%)}
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user