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

Fixed bugs and updated structure

Browse Source
This commit is contained in:
A McIlwraith
2024-07-14 16:18:52 -04:00
parent 51c2c569b8
commit 9c15304340
60 changed files with 4120 additions and 1405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/.DS_Store vendored
View File

Binary file not shown.

2
public/assets/jquery-min.js vendored
View File

File diff suppressed because one or more lines are too long

3389
public/assets/scaffolding-min.js vendored
View File

File diff suppressed because one or more lines are too long

1186
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

52
public/download.php Normal file
View File

@@ -0,0 +1,52 @@
<?php
function recursor($dir, $type) {
$result = array();
// create the pattern to get the type
$x = "/_*.";
for ($i = 0; $i < strlen($type); $i++){
$x .= "[" . strtolower($type[$i]) . strtoupper($type[$i]) ."]";
}
// get the directories
foreach(glob($dir . "/*") as $d) {
if ( is_dir( $d ) ) {
// find the files in each directory
foreach (glob($d . $x) as $f) {
$result[] = $f;
}
// $more = recursor($d, $type);
// $result = array_merge($result, $more);
$result = array_merge($result, recursor($d, $type));
}
}
return $result;
}
$allowed_types = ["scss", "js"];
$patterns = dirname(dirname(__file__)) . "/src/pg/patterns";
if (!isset($_SERVER['QUERY_STRING']) || !in_array($_SERVER['QUERY_STRING'], $allowed_types)) {
echo "File extension type is not defined. Ensure that you have added ?[file extension] to the URL. If you have defined a file extension and it is not allowed, you'll need to contact the an administrator to get the requested files.";
die();
}
$type = $_SERVER['QUERY_STRING'];
$file_list = recursor($patterns, $type);
$f = tmpfile();
$t = stream_get_meta_data($f)['uri'];
$z = new ZipArchive();
$zf = $z->open($t, ZipArchive::CREATE);
foreach($file_list as $f) {
$z->addFile($f, preg_replace('/^.*?patterns\//', '', $f));
}
$z->close();
header('Content-type: application/zip');
header(sprintf('Content-Disposition: attachment; filename="%s.zip"', $type));
echo(file_get_contents($t)); ?>

44
public/index.html
View File

@@ -8,9 +8,14 @@
<link rel="icon" href="https://assets.gamv.ca/favicon.svg" media="(prefers-color-scheme:no-preference),(prefers-color-scheme:light)">
<link rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)">
<link href="assets/scaffolding.css" rel="stylesheet">
<script src="assets/jquery-min.js"></script>
</head>
<body><a class="skip" href="#main">Skip to main content</a>
<body>
<!--
DS2 core (c) 2024 Alexander McIlwraith
Core licensed under CC BY-SA 4.0
--><a class="skip" href="#main">Skip to main content</a>
<div class="container">
<header>
<!-- The headline banner area -->
@@ -19,15 +24,14 @@
</svg>
<div>
<div class="header-title">
<h1> <a>DS2 core</a></h1>
<h1> <a href="./">DS2 core</a></h1>
</div>
<!-- Other sections can go here, such as search and directory-->
</div>
</header>
<nav>
<ul>
<li> <a href="./">Home</a></li>
<li><a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></li>
<li><a href="./?p=this-pattern-doesnt-exist">This pattern doesn't exist</a></li>
<li><a href="./?p=colours">Colours</a></li>
<li><a href="./?p=components">Components</a></li>
<li><a href="./?p=layouts">Layouts</a></li>
@@ -39,47 +43,47 @@
</p>
<main id="main">
<h1>DS2 core</h1>
<article class="status-deprecated" id="this-pattern-doesn't-exist" data-path="this-pattern-doesn't-exist" data-template="pug" data-pattern="this-pattern-doesn't-exist" data-status="deprecated" data-core="false">
<article id="this-pattern-doesnt-exist" data-name="this pattern doesn't exist" data-status="deprecated" data-template="pug" data-core="false" data-path="this-pattern-doesnt-exist">
<h1 class="status-deprecated"><span>This pattern doesn't exist
<tool-tip role="tooltip" inert="inert" tip-position="right">Deprecated</tool-tip></span></h1>
</article>
<article id="colours" data-path="colours" data-template="pug" data-pattern="colours" data-status="complete" data-core="true">
<article id="colours" data-name="colours" data-status="complete" data-template="pug" data-core="true" data-path="colours">
<h1 class="status-complete"><span>Colours
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="components" data-path="components" data-template="none" data-pattern="components" data-status="complete" data-core="false">
<article id="components" data-name="components" data-status="complete" data-template="none" data-core="false" data-path="components">
<h1 class="status-complete"><span>Components
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="components-sticky-note" data-path="components/sticky-note" data-template="pug" data-pattern="sticky-note" data-status="in-progress" data-core="true">
<h1 class="status-in-progress"><span>Sticky note
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
<article id="components-sticky-note" data-name="sticky-note" data-status="complete" data-template="pug" data-core="true" data-path="components/sticky-note">
<h1 class="status-complete"><span>Sticky note
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="components-switch" data-path="components/switch" data-template="pug" data-pattern="switch" data-status="in-progress" data-core="true">
<article id="components-switch" data-name="switch" data-status="in-progress" data-template="pug" data-core="true" data-path="components/switch">
<h1 class="status-in-progress"><span>Switch
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
</article>
<article id="components-tooltip" data-path="components/tooltip" data-template="pug" data-pattern="tooltip" data-status="in-progress" data-core="true">
<article id="components-tooltip" data-name="tooltip" data-status="in-progress" data-template="pug" data-core="true" data-path="components/tooltip">
<h1 class="status-in-progress"><span>Tooltip
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
</article>
<article id="layouts" data-path="layouts" data-template="none" data-pattern="layouts" data-status="complete" data-core="true">
<article id="layouts" data-name="layouts" data-status="complete" data-template="none" data-core="true" data-path="layouts">
<h1 class="status-complete"><span>Layouts
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>
<article id="layouts-header" data-path="layouts/header" data-template="pug" data-pattern="header" data-status="in-progress" data-core="true">
<article id="layouts-header" data-name="header" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/header">
<h1 class="status-in-progress"><span>Header
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
</article>
<article id="layouts-breakpoints" data-path="layouts/breakpoints" data-template="pug" data-pattern="breakpoints" data-status="in-progress" data-core="true">
<article id="layouts-breakpoints" data-name="breakpoints" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/breakpoints">
<h1 class="status-in-progress"><span>Breakpoints
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
</article>
<article id="layouts-tabs" data-path="layouts/tabs" data-template="pug" data-pattern="tabs" data-status="complete" data-core="true">
<h1 class="status-complete"><span>Tabs
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
<article id="layouts-tabs" data-name="tabs" data-status="in-progress" data-template="pug" data-core="true" data-path="layouts/tabs">
<h1 class="status-in-progress"><span>Tabs
<tool-tip role="tooltip" inert="inert" tip-position="right">In progress</tool-tip></span></h1>
</article>
<article id="status" data-path="status" data-template="pug" data-pattern="status" data-status="complete" data-core="true">
<article id="status" data-name="status" data-status="complete" data-template="pug" data-core="true" data-path="status">
<h1 class="status-complete"><span>Status
<tool-tip role="tooltip" inert="inert" tip-position="right">Complete</tool-tip></span></h1>
</article>

0
public/patterns/core/layouts/breakpoints/index.html → public/patterns/core/breakpoints/index.html
View File

9
public/patterns/core/colours/index.html
View File

@@ -4,7 +4,14 @@
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>Primary colours</h2>
<h2>What is it</h2>
<p>Colours are used to represent your site and are an implementation of your brand's visual identity. </p>
<h2>When to use it</h2>
<p>Colours are used throughout your patterns. </p>
<h2>How to use it</h2>
<p>Hover over the colour gradient sample pills to view the accessibility information for each colour sample against black and white. </p>
<p>Click on the colour name or the colour gradient sample pills to copy the colour to your clipboard. A regular click will copy the hex code, a shift+click will copy the RGB code, the alt key (or Mac option&nbsp;&#8997; key) will copy the colour token, and the meta key (Windows key or Mac command&nbsp;&#8984; key) will copy a CSS colour var. </p>
<h3>Primary colours</h3>
<color-samples>
<color-sample data-color="rgb( 46, 81, 161)" style="background-color: rgb( 46, 81, 161); color: #FFF">
<name data-hex="#2e51a1" data-rgb="rgb( 46, 81, 161)" data-token="--colour-blue"><span>Blue</span></name>

5
public/patterns/core/layouts/header/index.html → public/patterns/core/header/index.html
View File

@@ -4,6 +4,9 @@
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<h2>When to use it</h2>
<h2>How to use it</h2>
<div class="tab-group" id="header">
<pre class="language-html" data-tab="html">
<!-- create temp variables and store the design system values-->
@@ -14,7 +17,7 @@
</svg>
<div>
<div class="header-title">
<h1> <a href="[site root]">[site name]</a></h1>
<h1> <a href="./">[site name]</a></h1>
</div>
<!-- Other sections can go here, such as search and directory-->
</div>

24
public/patterns/core/status/index.html
View File

@@ -12,7 +12,7 @@
<td colspan="2">This pattern doesn't exist (1)</td>
</tr>
<tr>
<td><a href="./?p=this-pattern-doesn't-exist"> This pattern doesn't exist</a></td>
<td><a href="./?p=this pattern doesn't exist"> This pattern doesn't exist</a></td>
<td><span class="status-deprecated">Deprecated</span></td>
</tr>
<tr>
@@ -30,7 +30,7 @@
<td><span class="status-complete">Complete</span></td>
<tr>
<td><a href="./?p=components/sticky-note"> Sticky note</a></td>
<td><span class="status-in-progress">In progress</span></td>
<td><span class="status-complete">Complete</span></td>
</tr>
<tr>
<td><a href="./?p=components/switch"> Switch</a></td>
@@ -57,7 +57,7 @@
</tr>
<tr>
<td><a href="./?p=layouts/tabs"> Tabs</a></td>
<td><span class="status-complete">Complete</span></td>
<td><span class="status-in-progress">In progress</span></td>
</tr>
</tr>
<tr>
@@ -88,12 +88,12 @@
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td>
</tr>
<tr>
<td> <a href="./?p=components/switch">Switch</a></td>
<td>Components</td>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td>
@@ -119,14 +119,14 @@
<td></td>
</tr>
<tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td>Layouts</td>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td>Components</td>
</tr>
<tr>
<td colspan="2"><span class="status-deprecated">Deprecated (1)</span></td>
</tr>
<tr>
<td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
<td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
<td></td>
</tr>
</tbody>
@@ -167,7 +167,7 @@
</tr>
<tr>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td>Components</td>
</tr>
<tr>
@@ -177,11 +177,11 @@
</tr>
<tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td><span><span class="status-complete">Complete</span></span></td>
<td><span><span class="status-in-progress">In Progress</span></span></td>
<td>Layouts</td>
</tr>
<tr>
<td> <a href="./?p=this-pattern-doesn't-exist">This pattern doesn't exist</a></td>
<td> <a href="./?p=this pattern doesn't exist">This pattern doesn't exist</a></td>
<td><span><span class="status-deprecated">Deprecated</span></span></td>
<td></td>
</tr>

15
public/patterns/core/components/sticky-note/index.html → public/patterns/core/sticky-note/index.html
View File

@@ -5,15 +5,20 @@
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<p>Sticky notes provide a way to attach information. They are a DS2 core pattern for making notes. </p>
<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.
<sticky-note class="blue" float="right">This <strong>is</strong> a test</sticky-note>You might need to add relative positioning to it's container.
<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>
</p>
<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". </p>
<sticky-note>another one</sticky-note>
<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". </p>
<div class="tab-group" id="sticky-note">
<sticky-note>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>
<tabset id="sticky-note">
<pre class="language-html" tab="html">
<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</strong> 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;
@@ -423,6 +428,6 @@ export function init(p = document){
});
}
}</pre>
</div>
</tabset>
</body>
</html>

22
public/patterns/core/components/switch/index.html → public/patterns/core/switch/index.html
View File

@@ -5,6 +5,7 @@
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<p>Switches are used to toggle application state between two mutually exlusive values. </p>
<h2>When to use it</h2>
<h2>How to use it</h2>
<h2>Example</h2>
@@ -91,19 +92,18 @@ function flip(e) {
}
};
function init(callback){
let sw = document.querySelectorAll("[role='switch']");
for (let i=0; i < sw.length; i++) {
sw[i].innerHTML = "<span></span>";
sw[i].setAttribute("aria-checked", "false");
sw[i].setAttribute("tabindex", "0");
sw[i].addEventListener("click", flip, false);
sw[i].addEventListener("keypress", flip, false);
module.exports = {
init: (p = document) => {
p.querySelectorAll("[role='switch']").forEach((sw) => {
sw.innerHTML = "<span></span>";
sw.setAttribute("aria-checked", "false");
sw.setAttribute("tabindex", "0");
sw.addEventListener("click", flip, false);
sw.addEventListener("keypress", flip, false);
})
}
}
export {init};</pre>
</pre>
</div>
</body>
</html>

0
public/patterns/core/layouts/tabs/index.html → public/patterns/core/tabs/index.html
View File

361
public/patterns/core/tooltip/index.html Normal file
View File

@@ -0,0 +1,361 @@
<html>
<head>
<title>Pattern</title>
</head>
<body data-prismjs-copy-timeout="1500">
<h2>What is it</h2>
<h2>When to use it</h2>
<h2>How to use it</h2>
<p>Either form works. Place this inside another element for the tooltip to be "linked to that element."</p>
<p>Tool tip positions are: </p>
<ul>
<li>top / block-start</li>
<li>right / inline-end</li>
<li>bottom / block-end</li>
<li>left / inline-start</li>
</ul>
<div class="tab-group" id="tooltip">
<pre class="language-html" data-tab="html"><a href="#">Link with a tool tip
<div role="tooltip" inert="inert" tip-position="bottom">Tool tip content</div></a><a href="#">Link with a tool tip
<tool-tip role="tooltip" inert="inert" tip-position="bottom">Tool tip content</tool-tip></a></pre>
<pre class="language-pug" data-tab="pug">a(href="#") Link with a tool tip
div(role="tooltip" inert tip-position="bottom") Tool tip content
a(href="#") Link with a tool tip
tool-tip(role="tooltip" inert tip-position="bottom") Tool tip content</pre>
<pre class="language-css" data-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" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
$tooltip-border-radius: .5rem !default;
$tooltip-dark-allow: true !default;
$tooltip-dark-background: #1f2127 !default;
$tooltip-dark-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 50%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 50%)) !default;
$tooltip-dark-foreground: #fff !default;
$tooltip-light-background: #fff !default;
$tooltip-light-drop-shadow: drop-shadow(0 3px 3px hsl(0 0% 0% / 15%)) drop-shadow(0 12px 12px hsl(0 0% 0% / 15%)) !default;
$tooltip-light-foreground: #000 !default;
$tooltip-padding-sides: 1.5rem !default;
$tooltip-padding-top-bottom: 0.75rem !default;
$tooltip-pointer-size: 1rem !default;
$tooltip-pointer-bottom: 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 !default;
$tooltip-pointer-left: 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 !default;
$tooltip-pointer-right: 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 !default;
$tooltip-pointer-top: 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 !default;
/* Position Options
- top / block-start
- right / inline-end
- bottom / block-end
- left / inline-start
*/
@mixin tooltip {
[role="tooltip"] {
background: $tooltip-light-background;
border-radius: $tooltip-border-radius;
color: $tooltip-light-foreground;
filter: $tooltip-light-drop-shadow;
font-size: 1rem;
font-weight: 400;
inline-size: max-content;
line-height: initial;
margin: 0;
max-inline-size: 25rem;
opacity: 0;
padding: $tooltip-padding-top-bottom $tooltip-padding-sides;
pointer-events: none;
position: absolute;
text-align: start;
transform: translate(var(--tooltip-x, 0)) translateY(var(--tooltip-y, 0));
transition: opacity 0.2s ease, transform 0.2s ease;
user-select: none;
will-change: filter;
z-index: 10;
&::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;
}
&::after {
background: $tooltip-light-background;
content: "";
inset: 0;
mask: var(--tooltip-pointer);
position: absolute;
z-index: -1;
}
&:is( [tip-position="top"],
[tip-position="block-start"],
:not([tip-position]),
[tip-position="bottom"],
[tip-position="block-end"]
) {
text-align: center;
}
&:is( [tip-position="top"],
[tip-position="block-start"],
:not([tip-position])
) {
inset-inline-start: 50%;
inset-block-end: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
--tooltip-x: calc(50% * -1);
&::after {
--tooltip-pointer: #{$tooltip-pointer-bottom};
inset-block-end: calc($tooltip-pointer-size * -1);
border-block-end: $tooltip-pointer-size solid transparent;
}
}
&:is( [tip-position="right"],
[tip-position="inline-end"]
) {
inset-inline-start: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
inset-block-end: 50%;
--tooltip-y: 50%;
&::after {
--tooltip-pointer: #{$tooltip-pointer-left};
inset-inline-start: calc($tooltip-pointer-size * -1);
border-inline-start: $tooltip-pointer-size solid transparent;
}
}
&:is( [tip-position="bottom"],
[tip-position="block-end"]
) {
inset-inline-start: 50%;
inset-block-start: calc(100% + $tooltip-padding-top-bottom + $tooltip-pointer-size);
--tooltip-x: calc(50% * -1);
&::after {
--tooltip-pointer: #{$tooltip-pointer-top};
inset-block-start: calc($tooltip-pointer-size * -1);
border-block-start: $tooltip-pointer-size solid transparent;
}
}
&:is( [tip-position="left"],
[tip-position="inline-start"]
) {
inset-inline-end: calc(100% + $tooltip-padding-sides + $tooltip-pointer-size);
inset-block-end: 50%;
--tooltip-y: 50%;
&::after {
--tooltip-pointer: #{$tooltip-pointer-right};
inset-inline-end: calc($tooltip-pointer-size * -1);
-webkit-border-end: $tooltip-pointer-size solid transparent;
border-inline-end: $tooltip-pointer-size solid transparent;
}
}
@if ($tooltip-dark-allow == true ) {
@media (prefers-color-scheme: dark) {
background: $tooltip-dark-background;
color: $tooltip-dark-foreground;
filter: $tooltip-dark-drop-shadow;
&::after {
background: $tooltip-dark-background;
}
}
}
}
:has(> [role="tooltip"]) {
position: relative;
&:is(:hover, :focus-visible, :active) > [role="tooltip"] {
opacity: 1;
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>
</body>
</html>