gamv/ds2-core
1
0
Fork 0
Code Issues 10 Releases 9 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
Download Patch File Download Diff File Expand all files Collapse all files

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