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

[core] Fix Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.

Browse Source
This commit is contained in:
A McIlwraith
2025-12-20 10:24:57 -05:00
parent f7a343b626
commit d3f25a5ef1
16 changed files with 94 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,19 +26,19 @@
<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: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"> 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(rgb(255,255,221.2)),color-stop(2%,#ffffd3),color-stop(12%,#ffffd3),color-stop(75%,rgb(255,255,200.8)),to(rgb(255,255,185.5)));background:linear-gradient(180deg,rgb(255,255,221.2) 0%,#ffffd3 2%,#ffffd3 12%,rgb(255,255,200.8) 75%,rgb(255,255,185.5) 100%)}sticky-note-wrapper sticky-note.blue>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(156.5265625,220.9484375,235.6734375)),color-stop(2%,#94daea),color-stop(12%,#94daea),color-stop(75%,rgb(139.4734375,215.0515625,232.3265625)),to(rgb(126.68359375,210.62890625,229.81640625)));background:linear-gradient(180deg,rgb(156.5265625,220.9484375,235.6734375) 0%,#94daea 2%,#94daea 12%,rgb(139.4734375,215.0515625,232.3265625) 75%,rgb(126.68359375,210.62890625,229.81640625) 100%)}sticky-note-wrapper sticky-note.pink>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(250.3493150685,123.8506849315,147.104109589)),color-stop(2%,#fa728b),color-stop(12%,#fa728b),color-stop(75%,rgb(249.6506849315,104.1493150685,130.895890411)),to(rgb(249.1267123288,89.3732876712,118.7397260274)));background:linear-gradient(180deg,rgb(250.3493150685,123.8506849315,147.104109589) 0%,#fa728b 2%,#fa728b 12%,rgb(249.6506849315,104.1493150685,130.895890411) 75%,rgb(249.1267123288,89.3732876712,118.7397260274) 100%)}sticky-note-wrapper sticky-note.green>div:nth-child(2){background:-webkit-gradient(linear,left top,left bottom,from(rgb(196.6333333333,251.5666666667,200.925)),color-stop(2%,#bbfbc0),color-stop(12%,#bbfbc0),color-stop(75%,rgb(177.3666666667,250.4333333333,183.075)),to(rgb(162.9166666667,249.5833333333,169.6875)));background:linear-gradient(180deg,rgb(196.6333333333,251.5666666667,200.925) 0%,#bbfbc0 2%,#bbfbc0 12%,rgb(177.3666666667,250.4333333333,183.075) 75%,rgb(162.9166666667,249.5833333333,169.6875) 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] );
@use "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
//- Licensed under CC BY-SA 4.0
@use 'sass:color';
@use "sass:map";
@use 'sass:list';
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
// @import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');
$sticky-colors: (
"yellow": #ffffd3,
@@ -146,34 +146,52 @@ $sticky-colors: (
// default colour
> div:nth-child(2) {
$sticky-color: nth(map.values($sticky-colors), 1);
$sticky-color: list.nth(map.values($sticky-colors), 1);
// background: linear-gradient(
// 180deg,
// lighten($sticky-color, 2%) 0%,
// $sticky-color 2%,
// $sticky-color 12%,
// darken($sticky-color, 2%) 75%,
// darken($sticky-color, 5%) 100%
// );
background: linear-gradient(
180deg,
lighten($sticky-color, 2%) 0%,
color.adjust($sticky-color, $lightness: 2%) 0%,
$sticky-color 2%,
$sticky-color 12%,
darken($sticky-color, 2%) 75%,
darken($sticky-color, 5%) 100%
color.adjust($sticky-color, $lightness: -2%) 75%,
color.adjust($sticky-color, $lightness: -5%) 100%
);
}
// all class colors
@each $class, $sticky-color in $sticky-colors {
&.#{$class} > div:nth-child(2) {
@if $class != nth(map.keys($sticky-colors), 1) {
@if $class != list.nth(map.keys($sticky-colors), 1) {
background: linear-gradient(
180deg,
lighten($sticky-color, 2%) 0%,
color.adjust($sticky-color, $lightness: 2%) 0%,
$sticky-color 2%,
$sticky-color 12%,
darken($sticky-color, 2%) 75%,
darken($sticky-color, 5%) 100%
);
color.adjust($sticky-color, $lightness: -2%) 75%,
color.adjust($sticky-color, $lightness: -5%) 100%
);
// background: linear-gradient(
// 180deg,
// lighten($sticky-color, 2%) 0%,
// $sticky-color 2%,
// $sticky-color 12%,
// darken($sticky-color, 2%) 75%,
// darken($sticky-color, 5%) 100%
// );
}
}
}
}
&:has(sticky-note:hover) {
background-color: #{nth(map.values($sticky-colors), 1)};
background-color: #{list.nth(map.values($sticky-colors), 1)};
border: 1px solid black;
}