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

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

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

@@ -22,7 +22,7 @@
<!-- create temp variables and store the design system values-->
<header>
<!-- The headline banner area -->
<svg style="height: 5.5rem; width: 100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<text>[site name]</text>
</svg>
<div>
@@ -41,7 +41,7 @@
header
// The headline banner area
svg(style="height: 5.5rem; width: 100%" xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site
div
div.header-title

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

@@ -26,7 +26,7 @@
<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";
@@ -38,7 +38,7 @@
@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;
}

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

@@ -123,11 +123,8 @@ $tab-notselected-text: #000 !default;
&:not(.open) {
display: none;
}
@content;
}
@content;
}
}</pre>
</div>

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

@@ -33,161 +33,7 @@
<pre class="language-html" tab="html"><a href="#">Link with a tool tip<span role="tooltip" inert="inert" tip-position="right">Tool tip content</span></a></pre>
<pre class="language-pug" tab="pug">a(href="#") Link with a tool tip
span(role="tooltip" inert tip-position="right") Tool tip content</pre>
<pre class="language-css" tab="css">/* Position Options
- top / block-start
- right / inline-end
- bottom / block-end
- left / inline-start
*/
[role=tooltip] {
background: #fff;
border-radius: 0.5rem;
color: #000;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
font-size: 1rem;
font-weight: 400;
inline-size: -webkit-max-content;
inline-size: -moz-max-content;
inline-size: max-content;
line-height: initial;
margin: 0;
max-inline-size: 25rem;
opacity: 0;
padding: 0.75rem 1.5rem;
pointer-events: none;
position: absolute;
text-align: start;
-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
-ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
will-change: filter;
z-index: 10;
}
[role=tooltip]::before {
clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px);
content: "; Has tooltip: ";
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[role=tooltip]::after {
background: #fff;
content: "";
inset: 0;
-webkit-mask: var(--tooltip-pointer);
mask: var(--tooltip-pointer);
position: absolute;
z-index: -1;
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]) {
text-align: center;
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])) {
inset-inline-start: 50%;
inset-block-end: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1);
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after {
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
inset-block-end: -1rem;
-webkit-border-after: 1rem solid transparent;
border-block-end: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=right],
[tip-position=inline-end]) {
inset-inline-start: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%;
--tooltip-y: 50%;
}
[role=tooltip]:is([tip-position=right],
[tip-position=inline-end])::after {
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
inset-inline-start: -1rem;
-webkit-border-start: 1rem solid transparent;
border-inline-start: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=bottom],
[tip-position=block-end]) {
inset-inline-start: 50%;
inset-block-start: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1);
}
[role=tooltip]:is([tip-position=bottom],
[tip-position=block-end])::after {
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
inset-block-start: -1rem;
-webkit-border-before: 1rem solid transparent;
border-block-start: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=left],
[tip-position=inline-start]) {
inset-inline-end: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%;
--tooltip-y: 50%;
}
[role=tooltip]:is([tip-position=left],
[tip-position=inline-start])::after {
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
inset-inline-end: -1rem;
-webkit-border-end: 1rem solid transparent;
border-inline-end: 1rem solid transparent;
}
@media (prefers-color-scheme: dark) {
[role=tooltip] {
background: #1f2127;
color: #fff;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
}
[role=tooltip]::after {
background: #1f2127;
}
}
:has(> [role=tooltip]) {
position: relative;
}
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
opacity: 1;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
@media (prefers-reduced-motion: no-preference) {
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
--tooltip-y: 3px;
}
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
--tooltip-x: calc(-1 * -3px * -1);
}
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
--tooltip-y: -3px;
}
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
--tooltip-x: calc(-1 * 3px * -1);
}
}</pre>
<pre class="language-css" tab="css">[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}</pre>
<div tab="scss">
<pre class="language-sass">@use "scss/core/tooltip/_tooltip";
@include tooltip;</pre>
@@ -222,6 +68,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
background: $tooltip-light-background;
border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground;
display: none;
filter: $tooltip-light-drop-shadow;
$font-family: $font-body;
font-size: 1rem;
@@ -345,6 +192,7 @@ $tooltip-pointer-top: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000
:has(> [role="tooltip"]) {
position: relative;
&:is(:hover, :focus-visible, :active) > [role="tooltip"] {
display: block;
opacity: 1;
transition-delay: 300ms;
}

19
src/pg/patterns/core/breakpoint/_breakpoint.scss
View File

@@ -1,6 +1,9 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@use 'sass:map';
@use 'sass:string';
// default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@@ -38,30 +41,30 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 14
$min: 0;
$max: 0;
@if str-length($bp) == 2 {
@if string.length($bp) == 2 {
// only a single break point was received
$min: map-get($points, $bp);
$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
$min: map.get($points, $bp);
$max: map.get($points, nth(map.keys($points), index(map.keys($points), $bp) + 1));
} @else {
@if str-slice($bp, 0, 1) == "-" {
@if string.slice($bp, 0, 1) == "-" {
// no lower breakpoint was received
$min: null;
$max: map-get($points, str-slice($bp, 2, 3));
$max: map.get($points, string.slice($bp, 2, 3));
} @else {
$min: map-get($points, unquote(str-slice($bp, 0, 2)));
$min: map.get($points, string.unquote(string.slice($bp, 0, 2)));
@if str-length($bp) == 3 {
@if string.length($bp) == 3 {
// no upper break point was received
$max: null;
} @else {
$max: map-get($points, str-slice($bp, 4, 5));
$max: map.get($points, string.slice($bp, 4, 5));
}
}
}

2
src/pg/patterns/core/header/_header.pp
View File

@@ -7,7 +7,7 @@
header
// The headline banner area
svg(style="height: 5.5rem; width: 100%" xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site
div
div.header-title

4
src/pg/patterns/core/header/header.scss
View File

@@ -5,5 +5,5 @@
// this file should not be minified
@import "_header.scss";
@include header;
@use "_header.scss";
@include header.header;

38
src/pg/patterns/core/sticky-note/_sticky-note.scss
View File

@@ -4,7 +4,7 @@
@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,
@@ -112,34 +112,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;
}

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

@@ -1 +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: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}
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}

4
src/pg/patterns/core/sticky-note/sticky-note.scss
View File

@@ -1,5 +1,5 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@import "_sticky-note";
@include sticky-note;
@use "_sticky-note";
@include sticky-note.sticky-note;

4
src/pg/patterns/core/switch/switch.scss
View File

@@ -1,2 +1,2 @@
@import "_switch.scss";
@include switch;
@use "_switch.scss";
@include switch.switch;

4
src/pg/patterns/core/tabs/tabs.scss
View File

@@ -1,5 +1,5 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@import "_tabs.scss";
@include tabs;
@use "_tabs.scss";
@include tabs.tabs;

156
src/pg/patterns/core/tooltip/tooltip.css
View File

@@ -1,155 +1 @@
/* Position Options
- top / block-start
- right / inline-end
- bottom / block-end
- left / inline-start
*/
[role=tooltip] {
background: #fff;
border-radius: 0.5rem;
color: #000;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.15)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.15));
font-size: 1rem;
font-weight: 400;
inline-size: -webkit-max-content;
inline-size: -moz-max-content;
inline-size: max-content;
line-height: initial;
margin: 0;
max-inline-size: 25rem;
opacity: 0;
padding: 0.75rem 1.5rem;
pointer-events: none;
position: absolute;
text-align: start;
-webkit-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
-ms-transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease;
transition: opacity 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
will-change: filter;
z-index: 10;
}
[role=tooltip]::before {
clip-path: inset(50%);
clip: rect(1px, 1px, 1px, 1px);
content: "; Has tooltip: ";
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
[role=tooltip]::after {
background: #fff;
content: "";
inset: 0;
-webkit-mask: var(--tooltip-pointer);
mask: var(--tooltip-pointer);
position: absolute;
z-index: -1;
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]),
[tip-position=bottom],
[tip-position=block-end]) {
text-align: center;
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position])) {
inset-inline-start: 50%;
inset-block-end: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1);
}
[role=tooltip]:is([tip-position=top],
[tip-position=block-start],
:not([tip-position]))::after {
--tooltip-pointer: conic-gradient(from -30deg at bottom, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) bottom/100% 50% no-repeat;
inset-block-end: -1rem;
-webkit-border-after: 1rem solid transparent;
border-block-end: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=right],
[tip-position=inline-end]) {
inset-inline-start: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%;
--tooltip-y: 50%;
}
[role=tooltip]:is([tip-position=right],
[tip-position=inline-end])::after {
--tooltip-pointer: conic-gradient(from 60deg at left, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) left/50% 100% no-repeat;
inset-inline-start: -1rem;
-webkit-border-start: 1rem solid transparent;
border-inline-start: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=bottom],
[tip-position=block-end]) {
inset-inline-start: 50%;
inset-block-start: calc(100% + 0.75rem + 1rem);
--tooltip-x: calc(50% * -1);
}
[role=tooltip]:is([tip-position=bottom],
[tip-position=block-end])::after {
--tooltip-pointer: conic-gradient(from 150deg at top, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) top/100% 50% no-repeat;
inset-block-start: -1rem;
-webkit-border-before: 1rem solid transparent;
border-block-start: 1rem solid transparent;
}
[role=tooltip]:is([tip-position=left],
[tip-position=inline-start]) {
inset-inline-end: calc(100% + 1.5rem + 1rem);
inset-block-end: 50%;
--tooltip-y: 50%;
}
[role=tooltip]:is([tip-position=left],
[tip-position=inline-start])::after {
--tooltip-pointer: conic-gradient(from -120deg at right, rgba(0, 0, 0, 0), #000 1deg 60deg, rgba(0, 0, 0, 0) 61deg) right/50% 100% no-repeat;
inset-inline-end: -1rem;
-webkit-border-end: 1rem solid transparent;
border-inline-end: 1rem solid transparent;
}
@media (prefers-color-scheme: dark) {
[role=tooltip] {
background: #1f2127;
color: #fff;
-webkit-filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
filter: drop-shadow(0 3px 3px hsla(0, 0%, 0%, 0.5)) drop-shadow(0 12px 12px hsla(0, 0%, 0%, 0.5));
}
[role=tooltip]::after {
background: #1f2127;
}
}
:has(> [role=tooltip]) {
position: relative;
}
:has(> [role=tooltip]):is(:hover, :focus-visible, :active) > [role=tooltip] {
opacity: 1;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}
@media (prefers-reduced-motion: no-preference) {
:has(> [role=tooltip]:is([tip-position=top], [tip-position=block-start], :not([tip-position]))):not(:hover):not(:active) [role=tooltip] {
--tooltip-y: 3px;
}
:has(> [role=tooltip]:is([tip-position=right], [tip-position=inline-end])):not(:hover):not(:active) [role=tooltip] {
--tooltip-x: calc(-1 * -3px * -1);
}
:has(> [role=tooltip]:is([tip-position=bottom], [tip-position=block-end])):not(:hover):not(:active) [role=tooltip] {
--tooltip-y: -3px;
}
:has(> [role=tooltip]:is([tip-position=left], [tip-position=inline-start])):not(:hover):not(:active) [role=tooltip] {
--tooltip-x: calc(-1 * 3px * -1);
}
}
[role=tooltip]{background:#fff;border-radius:0.5rem;color:#000;display:none;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.15)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.15));font-size:1rem;font-weight:400;inline-size:-webkit-max-content;inline-size:-moz-max-content;inline-size:max-content;line-height:initial;margin:0;max-inline-size:25rem;opacity:0;padding:0.75rem 1.5rem;pointer-events:none;position:absolute;text-align:start;-webkit-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-ms-transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));transform:translate(var(--tooltip-x,0)) translateY(var(--tooltip-y,0));-webkit-transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,-webkit-transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease;transition:opacity 0.2s ease,transform 0.2s ease,-webkit-transform 0.2s ease;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:filter;z-index:10}[role=tooltip]:before{clip-path:inset(50%);clip:rect(1px,1px,1px,1px);content:"; Has tooltip: ";height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}[role=tooltip]:after{background:#fff;content:"";inset:0;-webkit-mask:var(--tooltip-pointer);mask:var(--tooltip-pointer);position:absolute;z-index:-1}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]),[tip-position=bottom],[tip-position=block-end]){text-align:center}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])){inset-inline-start:50%;inset-block-end:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position])):after{--tooltip-pointer:conic-gradient(from -30deg at bottom,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) bottom/100% 50% no-repeat;inset-block-end:-1rem;-webkit-border-after:1rem solid transparent;border-block-end:1rem solid transparent}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]){inset-inline-start:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=right],[tip-position=inline-end]):after{--tooltip-pointer:conic-gradient(from 60deg at left,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) left/50% 100% no-repeat;inset-inline-start:-1rem;-webkit-border-start:1rem solid transparent;border-inline-start:1rem solid transparent}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]){inset-inline-start:50%;inset-block-start:calc(100% + 0.75rem + 1rem);--tooltip-x:calc(50% * -1)}[role=tooltip]:is([tip-position=bottom],[tip-position=block-end]):after{--tooltip-pointer:conic-gradient(from 150deg at top,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) top/100% 50% no-repeat;inset-block-start:-1rem;-webkit-border-before:1rem solid transparent;border-block-start:1rem solid transparent}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]){inset-inline-end:calc(100% + 1.5rem + 1rem);inset-block-end:50%;--tooltip-y:50%}[role=tooltip]:is([tip-position=left],[tip-position=inline-start]):after{--tooltip-pointer:conic-gradient(from -120deg at right,rgba(0,0,0,0),#000 1deg 60deg,rgba(0,0,0,0) 61deg) right/50% 100% no-repeat;inset-inline-end:-1rem;-webkit-border-end:1rem solid transparent;border-inline-end:1rem solid transparent}@media (prefers-color-scheme:dark){[role=tooltip]{background:#1f2127;color:#fff;-webkit-filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5));filter:drop-shadow(0 3px 3px hsla(0,0%,0%,0.5)) drop-shadow(0 12px 12px hsla(0,0%,0%,0.5))}[role=tooltip]:after{background:#1f2127}}:has(>[role=tooltip]){position:relative}:has(>[role=tooltip]):is(:hover,:focus-visible,:active)>[role=tooltip]{display:block;opacity:1;-webkit-transition-delay:300ms;transition-delay:300ms}@media (prefers-reduced-motion:no-preference){:has(>[role=tooltip]:is([tip-position=top],[tip-position=block-start],:not([tip-position]))):not(:hover):not(:active) [role=tooltip]{--tooltip-y:3px}:has(>[role=tooltip]:is([tip-position=right],[tip-position=inline-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * -3px * -1)}:has(>[role=tooltip]:is([tip-position=bottom],[tip-position=block-end])):not(:hover):not(:active) [role=tooltip]{--tooltip-y:-3px}:has(>[role=tooltip]:is([tip-position=left],[tip-position=inline-start])):not(:hover):not(:active) [role=tooltip]{--tooltip-x:calc(-1 * 3px * -1)}}

4
src/pg/patterns/core/tooltip/tooltip.scss
View File

@@ -1,5 +1,5 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
@import "_tooltip.scss";
@include tooltip;
@use "_tooltip.scss";
@include tooltip.tooltip;