Updates
Updates
This commit is contained in:
435
public/patterns/components/sticky-note-core/index.html
Normal file
435
public/patterns/components/sticky-note-core/index.html
Normal file
@@ -0,0 +1,435 @@
|
||||
|
||||
<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>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.
|
||||
</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">
|
||||
<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="scss"> //- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- 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');
|
||||
|
||||
$sticky-colors: (
|
||||
"yellow": #ffffd3,
|
||||
"blue": #94daea,
|
||||
"pink": #fa728b,
|
||||
"green": #bbfbc0 ) !default;
|
||||
|
||||
@mixin sticky-note {
|
||||
sticky-note-wrapper {
|
||||
box-sizing: border-box;
|
||||
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
height: .5rem;
|
||||
position: relative;
|
||||
width: .5rem;
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
sticky-note {
|
||||
cursor: grab;
|
||||
display: grid;
|
||||
float: left;
|
||||
font-size: 1rem;
|
||||
height: 13rem;
|
||||
left: 0;
|
||||
place-items: stretch;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 13rem;
|
||||
z-index: 100;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
//width: 15rem;
|
||||
// background-color: green;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
//width: 20rem;
|
||||
// background-color: blue;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
//width: 30rem;
|
||||
// background-color: yellow;
|
||||
}
|
||||
&.right {
|
||||
float: right;
|
||||
}
|
||||
@content;
|
||||
|
||||
> div {
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
&:nth-child(1) {
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
|
||||
display: grid;
|
||||
margin: 2rem 1rem .25rem .36rem;
|
||||
width: calc(100% - 1rem);
|
||||
|
||||
}
|
||||
&:nth-child(2) {
|
||||
clip-path: url(#stickyClip);
|
||||
display: grid;
|
||||
font-family: "Kalam", cursive;
|
||||
font-style: 1rem;
|
||||
font-weight: 300;
|
||||
line-height: 1.25rem;
|
||||
padding: 1rem;
|
||||
place-items: center;
|
||||
text-align: center;
|
||||
// not adding this because maybe we want the sticky note text to be able to be selected and copied.
|
||||
// user-select: none;
|
||||
> * {
|
||||
font-family: "Kalam", cursive !important;
|
||||
font-style: normal !important;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
max-width: 13rem;
|
||||
min-width: 13rem;
|
||||
width: 1rem;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
font-size: 1.75rem;
|
||||
max-width: 21rem;
|
||||
min-height: 21rem;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
font-size: 2.5rem;
|
||||
max-width: 26rem;
|
||||
min-height: 26rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// default colour
|
||||
> div:nth-child(2) {
|
||||
$sticky-color: 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%
|
||||
);
|
||||
}
|
||||
// all class colors
|
||||
@each $class, $sticky-color in $sticky-colors {
|
||||
&.#{$class} > div:nth-child(2) {
|
||||
@if $class != nth(map.keys($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%
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:has(sticky-note:hover) {
|
||||
background-color: #{nth(map.values($sticky-colors), 1)};
|
||||
border: 1px solid black;
|
||||
|
||||
}
|
||||
@each $class, $sticky-color in $sticky-colors {
|
||||
&:has(sticky-note.#{$class}:hover) {
|
||||
background-color: $sticky-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<pre class="language-js" data-tab="js"> //- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
const font = {
|
||||
size: 0
|
||||
}
|
||||
|
||||
const pos = {
|
||||
x: 0,
|
||||
y: 0
|
||||
}
|
||||
|
||||
function drag(sticky) {
|
||||
sticky.onmousedown = event => {
|
||||
// get the position within the sticky
|
||||
pos.x = (event.clientX - sticky.offsetLeft);
|
||||
pos.y = (event.clientY - sticky.offsetTop);
|
||||
|
||||
// on mouse move, move the sticky to the position, minus the offset, of the mouse
|
||||
document.onmousemove = documentEvent => {
|
||||
sticky.style.top = (documentEvent.clientY - pos.y) + 'px';
|
||||
sticky.style.left = (documentEvent.clientX - pos.x) + 'px';
|
||||
sticky.setAttribute("moved", "true");
|
||||
}
|
||||
// when done, remove mouse move and mouse up handlers.
|
||||
document.onmouseup = () => {
|
||||
document.onmouseup = null;
|
||||
document.onmousemove = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function waitForElement(selector) {
|
||||
return new Promise(resolve => {
|
||||
if (document.querySelector(selector)) {
|
||||
return resolve(document.querySelector(selector));
|
||||
}
|
||||
|
||||
const observer = new MutationObserver(mutations => {
|
||||
if (document.querySelector(selector)) {
|
||||
observer.disconnect();
|
||||
resolve(document.querySelector(selector));
|
||||
}
|
||||
});
|
||||
|
||||
// If you get "parameter 1 is not of type 'Node'" error, see https://stackoverflow.com/a/77855838/492336
|
||||
observer.observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const checkBottom = (attach) => {
|
||||
// check if top or bottom
|
||||
if (attach.y < 0) {
|
||||
attach.ys = "bottom";
|
||||
attach.y = attach.y * -1;
|
||||
}
|
||||
}
|
||||
|
||||
const setStickyPostions = (s, attach) => {
|
||||
// set
|
||||
s.style[attach.ys] = `${attach.y}px`;
|
||||
s.style[attach.xs] = `${attach.x}px`;
|
||||
s.style.display = "grid";
|
||||
}
|
||||
|
||||
const css = (el, attr) => {
|
||||
let st = ""
|
||||
Object.entries(attr).forEach(val => {
|
||||
const [key, value] = val;
|
||||
st += `${key}: ${value}; `;
|
||||
})
|
||||
el.setAttribute("style",st.trim());
|
||||
}
|
||||
|
||||
const setupStickies = () => {
|
||||
let stickies = document.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
if (s.style.position !== "absolute") {
|
||||
|
||||
let wrapper = document.createElement("sticky-note-wrapper");
|
||||
|
||||
s.parentNode.insertBefore(wrapper, s);
|
||||
wrapper.appendChild(s);
|
||||
|
||||
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
|
||||
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
|
||||
}
|
||||
calculateStickyPosition(s);
|
||||
drag(s);
|
||||
s.ondblclick = (e) => {
|
||||
if (e.ctrlKey) {
|
||||
calculateStickyPosition(s);
|
||||
} else {
|
||||
// add one click select
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calculateStickyPosition = (s) => {
|
||||
let float = s.getAttribute("float");
|
||||
let p = s.parentNode.getBoundingClientRect()
|
||||
switch (float) {
|
||||
case "left":
|
||||
css(s, {left: (p.left * -1) + "px"})
|
||||
break;
|
||||
case "right":
|
||||
css(s, { left: (Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) - p.left - s.offsetWidth - (font.size * 2)) + "px" });
|
||||
break;
|
||||
}
|
||||
|
||||
let offset = s.getAttribute("offset");
|
||||
if (offset !== null) {
|
||||
offset = offset.trim().split(" ");
|
||||
css(s, {top: offset[0], left: offset[1] })
|
||||
}
|
||||
}
|
||||
|
||||
export function init(callback){
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
setupStickies();
|
||||
|
||||
let stickies = document.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
|
||||
})
|
||||
|
||||
window.onresize = () => {
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
let stickies = document.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
calculateStickyPosition(s);
|
||||
});
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
<h2>Example</h2>
|
||||
<p class="switch">
|
||||
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span>
|
||||
@@ -37,7 +40,10 @@
|
||||
[role=switch][aria-checked=true] > span {
|
||||
margin-left: calc(1.5rem - 5%);
|
||||
}</pre>
|
||||
<pre class="language-css" data-tab="scss">@use "sass:math";
|
||||
<pre class="language-css" data-tab="scss">//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
@use "sass:math";
|
||||
|
||||
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
|
||||
$switch-background: #e9e9ea !default; // switch background when switched left (off / false)
|
||||
@@ -70,7 +76,9 @@ $switch-height: 1.5rem !default;
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<pre class="language-js" data-tab="js">
|
||||
<pre class="language-js" data-tab="js">//- DS2 core (c) 2024 Alexander McIlwraith
|
||||
//- Licensed under CC BY-SA 4.0
|
||||
|
||||
function flip(e) {
|
||||
let sw = e.currentTarget;
|
||||
switch(sw.getAttribute("aria-checked")) {
|
||||
|
||||
361
public/patterns/components/tooltip-core/index.html
Normal file
361
public/patterns/components/tooltip-core/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user