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

Reprocess CSS to be not minimised.

Browse Source
This commit is contained in:
A McIlwraith
2025-12-23 09:12:49 -05:00
parent 37762504a4
commit cfd23cd1a3
21 changed files with 1071 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3187,8 +3187,13 @@ module.exports = {
/***/ }), /***/ }),
/* 10 */ /* 10 */
/***/ (function(module) { /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ init: function() { return /* binding */ init; }
/* harmony export */ });
/* DS2 core (c) 2024 Alexander McIlwraith /* DS2 core (c) 2024 Alexander McIlwraith
Released under Creative Commons Attribution-ShareAlike 4.0 International Released under Creative Commons Attribution-ShareAlike 4.0 International
*/ */
@@ -3233,99 +3238,116 @@ var chooseTab = function chooseTab(tab) {
}; };
var pushState = 0; var pushState = 0;
var tabsetCount = 0; var tabsetCount = 0;
module.exports = { function init() {
"init": function init() { var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document; var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) { if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.querySelector("[role=tablist]") === null) { if (tabGroup.getAttribute("id") == null) {
if (tabGroup.getAttribute("id") == null) { tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabGroup.setAttribute("id", "tab-group-" + tabsetCount); tabsetCount++;
tabsetCount++; }
} var tabgroup = tabGroup.getAttribute("id");
var tabgroup = tabGroup.getAttribute("id"); var tablist = "";
var tablist = ""; Array.from(tabGroup.children).forEach(function (child) {
Array.from(tabGroup.children).forEach(function (child) { // is details?
// is details? var dtls = child.nodeName == "DETAILS" ? true : false;
var dtls = child.nodeName == "DETAILS" ? true : false;
// get the tab text // get the tab text
var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab"); var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
// if the tab text is not blank // if the tab text is not blank
if (tab !== null) { if (tab !== null) {
var tabID = tab.replace(/\W+/g, "-").toLowerCase(); var tabID = tab.replace(/\W+/g, "-").toLowerCase();
// define the tab panel content // define the tab panel content
var tabPanel = null; var tabPanel = null;
if (dtls) { if (dtls) {
tabPanel = child; tabPanel = child;
tabPanel.setAttribute("open", ""); tabPanel.setAttribute("open", "");
} else {
tabPanel = document.createElement('div');
tabPanel.appendChild(child.cloneNode(true));
}
tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID);
tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID));
child.parentNode.replaceChild(tabPanel, child);
var cls = tablist === "" ? "class='selected'" : "";
tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(cls, " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
} else { } else {
child.classList.add("tab-hidden"); tabPanel = document.createElement('div');
tabPanel.appendChild(child.cloneNode(true));
} }
tabPanel.id = "tab-panel-".concat(tabgroup, "-").concat(tabID);
tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", "tab-".concat(tabgroup, "-").concat(tabID));
child.parentNode.replaceChild(tabPanel, child);
tablist += "<li tabindex=\"0\" role=\"tab\" id=\"tab-".concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
} else {
child.classList.add("tab-hidden");
}
});
var ul = document.createElement('ul');
ul.setAttribute("role", "tablist");
tabGroup.insertBefore(ul, tabGroup.firstChild);
ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
if (tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order")) {
var order = (tabGroup.getAttribute("order") || tabGroup.getAttribute("data-order")).split(",");
var items = Array.from(ul.getElementsByTagName("li"));
items.sort(function (a, b) {
console.log("here");
var aa = order.indexOf(a.textContent.trim());
var bb = order.indexOf(b.textContent.trim());
// Check if both items exist in orderArray
if (aa === -1) return 1; // Move to the end if not found
if (bb === -1) return -1; // Move to the end if not found
return aa - bb; // Sort based on the defined order
}); });
var ul = document.createElement('ul'); ul.innerHTML = '';
ul.setAttribute("role", "tablist"); items.forEach(function (item) {
ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>"); return ul.appendChild(item);
tabGroup.insertBefore(ul, tabGroup.firstChild); });
tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) { }
tab.addEventListener("click", function (evt) { tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
if (pushState == 0) { tab.addEventListener("click", function (evt) {
window.history.pushState({ if (pushState == 0) {
rand: Math.random(),
pushState: pushState,
tab: tab.parentNode.firstChild.getAttribute("id")
}, "", "#".concat(tab.parentNode.firstChild.getAttribute("id")));
pushState++;
}
chooseTab(evt.currentTarget);
window.history.pushState({ window.history.pushState({
rand: Math.random(), rand: Math.random(),
pushState: pushState, pushState: pushState,
tab: tab.getAttribute("id") tab: tab.parentNode.firstChild.getAttribute("id")
}, "", "#".concat(tab.getAttribute("id"))); }, "", "#".concat(tab.parentNode.firstChild.getAttribute("id")));
pushState++; pushState++;
}); }
tab.addEventListener("keypress", function (e) { chooseTab(evt.currentTarget);
e.preventDefault(); window.history.pushState({
if (e.which == 32 || e.which == 13) { rand: Math.random(),
e.currentTarget.dispatchEvent(click); pushState: pushState,
} tab: tab.getAttribute("id")
}); }, "", "#".concat(tab.getAttribute("id")));
pushState++;
}); });
} tab.addEventListener("keypress", function (e) {
if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") { e.preventDefault();
waitForElement(document.location.hash).then(function (el) { if (e.which == 32 || e.which == 13) {
el.scrollIntoView(); e.currentTarget.dispatchEvent(click);
el.focus(); }
el.dispatchEvent(click);
}); });
} });
}); ul.querySelector("li").classList.add("selected");
window.addEventListener("popstate", function (e) { }
e.preventDefault(); if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
if (e.state != null) { waitForElement(document.location.hash).then(function (el) {
chooseTab(document.querySelector("#".concat(e.state.tab))); //el.scrollIntoView();
} else { el.focus();
history.go(-1); el.dispatchEvent(click);
} });
}); }
} });
}; window.addEventListener("popstate", function (e) {
e.preventDefault();
if (e.state != null) {
chooseTab(document.querySelector("#".concat(e.state.tab)));
} else {
history.go(-1);
}
});
}
/***/ }) /***/ })
/******/ ]); /******/ ]);
@@ -3432,7 +3454,6 @@ __webpack_require__.r(__webpack_exports__);
/* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9); /* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(9);
/* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__); /* harmony import */ var _pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_switch_switch_js__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10); /* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10);
/* harmony import */ var _pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__);
// core and prism // core and prism

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

20
public/patterns/core/breakpoint/index.html
View File

@@ -21,6 +21,7 @@
<p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p> <p>When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. </p>
<tabset id="breakpoints"> <tabset id="breakpoints">
<div tab="scss"> <div tab="scss">
<h2>Example</h2>
<pre class="language-sass">@use "scss/core/breakpoint/breakpoint"; <pre class="language-sass">@use "scss/core/breakpoint/breakpoint";
@include breapoint.break([breakpoint]) { @include breapoint.break([breakpoint]) {
// css here // css here
@@ -28,6 +29,9 @@
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0 //- Licensed under CC BY-SA 4.0
@use 'sass:map';
@use 'sass:string';
// default breakpoints match bootstrap 5 breakpoints. // default breakpoints match bootstrap 5 breakpoints.
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default; $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
@@ -65,30 +69,30 @@ $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 14
$min: 0; $min: 0;
$max: 0; $max: 0;
@if str-length($bp) == 2 { @if string.length($bp) == 2 {
// only a single break point was received // only a single break point was received
$min: map-get($points, $bp); $min: map.get($points, $bp);
$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1)); $max: map.get($points, nth(map.keys($points), index(map.keys($points), $bp) + 1));
} @else { } @else {
@if str-slice($bp, 0, 1) == "-" { @if string.slice($bp, 0, 1) == "-" {
// no lower breakpoint was received // no lower breakpoint was received
$min: null; $min: null;
$max: map-get($points, str-slice($bp, 2, 3)); $max: map.get($points, string.slice($bp, 2, 3));
} @else { } @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 // no upper break point was received
$max: null; $max: null;
} @else { } @else {
$max: map-get($points, str-slice($bp, 4, 5)); $max: map.get($points, string.slice($bp, 4, 5));
} }
} }
} }

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

@@ -291,7 +291,7 @@
</sample-block> </sample-block>
</color-sample> </color-sample>
</color-samples> </color-samples>
<div class="tab-group" id="colors"> <tabset id="colors">
<div data-tab="css"> <div data-tab="css">
<pre class="language-css">:root { <pre class="language-css">:root {
--colour-blue: #2e51a1; --colour-blue: #2e51a1;
@@ -339,6 +339,6 @@
} }
}</pre> }</pre>
</div> </div>
</div> </tabset>
</body> </body>
</html> </html>

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

@@ -49,7 +49,59 @@ header
a(href="./")= site a(href="./")= site
// Other sections can go here, such as search and directory // Other sections can go here, such as search and directory
</pre> </pre>
<pre class="language-css" tab="css">header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}</pre> <pre class="language-css" tab="css">header {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1.75rem 3.5rem;
grid-template-rows: 1.75rem 3.5rem;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2/4;
overflow: hidden;
}
header svg {
grid-column: 1/-1;
grid-row: 1/-1;
-ms-grid-row-align: stretch;
-ms-grid-column-align: stretch;
place-self: stretch;
}
header svg text {
-webkit-transform: translate(-1rem, 7.25rem);
-ms-transform: translate(-1rem, 7.25rem);
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: sans-serif;
fill: var(--colour-grey-xxl);
}
header > div {
-ms-grid-row: 2;
grid-row: 2;
grid-column: 1/-1;
display: -ms-grid;
display: grid;
grid-column-gap: 1rem;
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
-ms-grid-columns: auto max-content max-content;
grid-template-columns: auto -webkit-max-content -webkit-max-content;
grid-template-columns: auto max-content max-content;
}
header > div .header-title h1 {
margin: 0;
padding: 0 1rem;
}
header > div .header-title h1 a, header > div .header-title h1 a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: sans-serif;
font-size: 2.5rem;
font-size: 32px;
font-weight: 700;
margin: 0;
padding: 0;
text-decoration: none;
}</pre>
<div class="language-sass" tab="scss"> <div class="language-sass" tab="scss">
<pre class="language-sass">@use "scss/core/header/header; <pre class="language-sass">@use "scss/core/header/header;
</pre> </pre>

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

@@ -11,7 +11,7 @@
</script> </script>
</head> </head>
<body data-prismjs-copy-timeout="1500"> <body data-prismjs-copy-timeout="1500">
<div class="tab-group" id="status-report"> <tabset id="status-report">
<div class="status-report status-report-structure" data-tab="by&amp;nbsp;structure"> <div class="status-report status-report-structure" data-tab="by&amp;nbsp;structure">
<table class="custom" role="presentation"> <table class="custom" role="presentation">
<tbody> <tbody>
@@ -20,32 +20,38 @@
</tr> </tr>
<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> <td><span class="status-deprecated">Deprecated</span>
</td>
</tr> </tr>
<tr> <tr>
<td colspan="2">Colours (1)</td> <td colspan="2">Colours (1)</td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=colours"> Colours</a></td> <td><a href="./?p=colours"> Colours</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
<tr> <tr>
<td colspan="2">Components (4)</td> <td colspan="2">Components (4)</td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=components"> Components</a></td> <td><a href="./?p=components"> Components</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete</span>
</td>
<tr> <tr>
<td><a href="./?p=components/sticky-note"> Sticky note</a></td> <td><a href="./?p=components/sticky-note"> Sticky note</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=components/switch"> Switch</a></td> <td><a href="./?p=components/switch"> Switch</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=components/tooltip"> Tooltip</a></td> <td><a href="./?p=components/tooltip"> Tooltip</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
</tr> </tr>
<tr> <tr>
@@ -53,18 +59,22 @@
</tr> </tr>
<tr> <tr>
<td><a href="./?p=layouts"> Layouts</a></td> <td><a href="./?p=layouts"> Layouts</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
<tr> <tr>
<td><a href="./?p=layouts/header"> Header</a></td> <td><a href="./?p=layouts/header"> Header</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=layouts/breakpoint"> Breakpoint</a></td> <td><a href="./?p=layouts/breakpoint"> Breakpoint</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
<tr> <tr>
<td><a href="./?p=layouts/tabs"> Tabs</a></td> <td><a href="./?p=layouts/tabs"> Tabs</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
</tr> </tr>
<tr> <tr>
@@ -72,7 +82,8 @@
</tr> </tr>
<tr> <tr>
<td><a href="./?p=status"> Status</a></td> <td><a href="./?p=status"> Status</a></td>
<td><span class="status-complete">Complete</span></td> <td><span class="status-complete">Complete (Core)</span>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@@ -91,42 +102,62 @@
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td> <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td><span>(core)</span>
</td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=colours">Colours</a></td> <td> <a href="./?p=colours">Colours</a></td>
<td><span>(core)</span>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components">Components</a></td> <td> <a href="./?p=components">Components</a></td>
<td>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/header">Header</a></td> <td> <a href="./?p=layouts/header">Header</a></td>
<td><span>(core)</span>
</td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts">Layouts</a></td> <td> <a href="./?p=layouts">Layouts</a></td>
<td><span>(core)</span>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=status">Status</a></td> <td> <a href="./?p=status">Status</a></td>
<td><span>(core)</span>
</td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td> <td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td><span>(core)</span>
</td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/switch">Switch</a></td> <td> <a href="./?p=components/switch">Switch</a></td>
<td><span>(core)</span>
</td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td> <td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td><span>(core)</span>
</td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td> <td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td><span>(core)</span>
</td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>
@@ -134,6 +165,8 @@
</tr> </tr>
<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>
<td></td> <td></td>
</tr> </tr>
</tbody> </tbody>
@@ -144,62 +177,62 @@
<tbody> <tbody>
<tr> <tr>
<td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td> <td> <a href="./?p=layouts/breakpoint">Breakpoint</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=colours">Colours</a></td> <td> <a href="./?p=colours">Colours</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components">Components</a></td> <td> <a href="./?p=components">Components</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete</span></span></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/header">Header</a></td> <td> <a href="./?p=layouts/header">Header</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts">Layouts</a></td> <td> <a href="./?p=layouts">Layouts</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=status">Status</a></td> <td> <a href="./?p=status">Status</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/sticky-note">Sticky note</a></td> <td> <a href="./?p=components/sticky-note">Sticky note</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/switch">Switch</a></td> <td> <a href="./?p=components/switch">Switch</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td>Components</td> <td>Components</td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=layouts/tabs">Tabs</a></td> <td> <a href="./?p=layouts/tabs">Tabs</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td>Layouts</td> <td>Layouts</td>
</tr> </tr>
<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><span> <span class="status-deprecated">Deprecated</span></span></td>
<td></td> <td></td>
</tr> </tr>
<tr> <tr>
<td> <a href="./?p=components/tooltip">Tooltip</a></td> <td> <a href="./?p=components/tooltip">Tooltip</a></td>
<td><span><span class="status-complete">Complete</span></span></td> <td><span> <span class="status-complete">Complete (Core)</span></span></td>
<td>Components</td> <td>Components</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div> </tabset>
</body> </body>
</html> </html>

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

@@ -26,8 +26,133 @@
<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> <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. <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> | 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"> 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> <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: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(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"> <div tab="scss">
<h2>Example</h2>
<pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] ); <pre class="language-sass">$sticky-colors: ( [sass map with your own defined colours] );
@use "scss/core/switch/_sticky-note"; @use "scss/core/switch/_sticky-note";
@include sticky-note; @include sticky-note;
@@ -204,6 +329,7 @@ $sticky-colors: (
}</pre> }</pre>
</div> </div>
<div tab="js"> <div tab="js">
<h2>Example</h2>
<pre class="language-js">import * as stickynote from ""./js/core/sticky-note/_sticky-note.js"; <pre class="language-js">import * as stickynote from ""./js/core/sticky-note/_sticky-note.js";
stickynote.init() stickynote.init()
</pre> </pre>

33
public/patterns/core/switch/index.html
View File

@@ -22,11 +22,37 @@
<p class="switch"> <p class="switch">
<label for="example-switch">Switch label (states the on state)</label><span id="example-switch" role="switch"></span> <label for="example-switch">Switch label (states the on state)</label><span id="example-switch" role="switch"></span>
</p> </p>
<div class="tab-group" id="switches"> <tabset id="switches">
<pre class="language-html" tab="html"><span id="example-id" role="switch"></span></pre> <pre class="language-html" tab="html"><span id="example-id" role="switch"></span></pre>
<pre class="language-pug" tab="pug">span#example-id(role="switch")</pre> <pre class="language-pug" tab="pug">span#example-id(role="switch")</pre>
<pre class="language-css" tab="css">[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)}</pre> <pre class="language-css" tab="css">[role=switch] {
display: -ms-inline-grid;
display: inline-grid;
border: 1px solid #2e51a1;
background-color: #d8d8d8;
border-radius: 0.75rem;
height: 1.5rem;
width: 3rem;
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch] > span {
display: inline-block;
background-color: white;
border-radius: 50%;
margin: 2%;
width: calc(1.5rem - 2%);
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch][aria-checked=true] {
background-color: #2e51a1;
}
[role=switch][aria-checked=true] > span {
margin-left: calc(1.5rem - 5%);
}</pre>
<div tab="scss"> <div tab="scss">
<h2>Example</h2>
<pre class="language-sass">@use "scss/core/switch/_switch"; <pre class="language-sass">@use "scss/core/switch/_switch";
@include switch; @include switch;
</pre> </pre>
@@ -68,6 +94,7 @@ $switch-height: 1.5rem !default;
}</pre> }</pre>
</div> </div>
<div tab="js"> <div tab="js">
<h2>Example</h2>
<pre class="language-js">// Note that switch is a reserved word. <pre class="language-js">// Note that switch is a reserved word.
import * as swtch from "./js/core/switch/_switch.js"; import * as swtch from "./js/core/switch/_switch.js";
swtch.init(); swtch.init();
@@ -104,6 +131,6 @@ module.exports = {
} }
</pre> </pre>
</div> </div>
</div> </tabset>
</body> </body>
</html> </html>

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

@@ -23,27 +23,76 @@
</ul> </ul>
<p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p> <p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p>
<h2>How to use it</h2> <h2>How to use it</h2>
<p>The structure of the tab set is defined in html. There are two forms supported. Adding a class of <code class="inline">.tab-group</code> to the container element will work in place of the <code class="inline">tabset</code> tag, and the tab panels can be defined using either <code class="inline">tab=""</code> or <code class="inline">data-tab=""</code>. Passing an optional element to the init function will initialise tabs within that element. </p> <p>The structure of the tab set is defined in html. There are two forms supported. Adding a class of <code class="inline">.tab-group</code> to the container element will work in place of the <code class="inline">tabset</code> tag, and the tab panels can be defined using either <code class="inline">tab=""</code> or <code class="inline">data-tab=""</code>. Passing an optional element to the init function will initialise tabs within that element. Adding a <code class="inline">order=""</code> or <code class="inline">data-order=""</code> element to the tabset you can have the tabs sorted in a consistent order across tabsets.</p>
<p>The tab initalize function now takes a new function parameter in the form of an third argument is an object that can take the following callbacks: </p> <h2>Example</h2>
<ul> <pre class="language-pug" tab="pug">tabset(order="tab2, tab1")
<li>altModifer (When the altKey is used)</li> div(tab="tab1")
<li>shiftModifier (When the shift key is used)</li> div(tab="tab2")
<li>metaModifier (When the Windows key or Apple key is used)</li> </pre>
</ul>
<p>You can use these callbacks to create a custom event to get the tab information. </p>
<p>Note: There is a new core function (core.getTabPath) that will generate the query string and url hash for use in DS2 Core. You may wish to update your scaffolding.js file to make use of this functionality. </p>
<tabset id="tabs"> <tabset id="tabs">
<pre class="language-html" tab="html"> <pre class="language-html" tab="html">
<tabset id="uniqueID"> <tabset id="uniqueID" order="tab title 2,tab title 1">
<div tab="[tab title]"></div> <div tab="[tab title 1]"></div>
<div tab="[tab title]"></div> <div tab="[tab title 2]"></div>
</tabset></pre> </tabset></pre>
<pre class="language-pug" tab="pug">tabset#uniqueID <pre class="language-pug" tab="pug">tabset#uniqueID(order="tab title 2,tab title 1")
div(tab="[tab title]") div(tab="[tab title 1]")
div(tab="[tab title]") div(tab="[tab title 2]")
</pre> </pre>
<pre class="language-css" tab="css">.tab-group,tabset{margin:2rem 0 1rem 0}.tab-group [role=tablist],tabset [role=tablist]{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group [role=tablist] li.separator,tabset [role=tablist] li.separator{border-bottom:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group [role=tablist] li[role=tab],tabset [role=tablist] li[role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tablist] li[role=tab]:last-of-type,tabset [role=tablist] li[role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab]:not(.selected),tabset [role=tablist] li[role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tablist] li[role=tab] span,tabset [role=tablist] li[role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre> <pre class="language-css" tab="css">tabset, .tab-group {
margin: 2rem 0 1rem 0;
}
tabset [role=tablist], .tab-group [role=tablist] {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
}
tabset [role=tablist] li.separator, .tab-group [role=tablist] li.separator {
border-bottom: 1px solid #7f7f7f;
display: inline-block;
margin: 0.45rem 0 0 0;
width: 100%;
}
tabset [role=tablist] li[role=tab], .tab-group [role=tablist] li[role=tab] {
background-color: #FFF;
border-left: 1px solid #7f7f7f;
border-right: 1px solid #7f7f7f;
border-radius: 0.5rem 0.5rem 0 0;
border-top: 1px solid #7f7f7f;
cursor: pointer;
display: inline;
margin: 0;
padding: 1rem 1.5rem 0.14rem 1.5rem;
z-index: 2;
}
tabset [role=tablist] li[role=tab]:last-of-type, .tab-group [role=tablist] li[role=tab]:last-of-type {
border-right: 1px solid #7f7f7f;
}
tabset [role=tablist] li[role=tab]:not(.selected), .tab-group [role=tablist] li[role=tab]:not(.selected) {
background-color: #f0f0f0;
border-bottom: 1px solid #7f7f7f;
}
tabset [role=tablist] li[role=tab] span, .tab-group [role=tablist] li[role=tab] span {
display: block;
margin: 0 0 0.5rem 0;
}
tabset .tab-hidden, .tab-group .tab-hidden {
display: none;
}
tabset [role=tabpanel], .tab-group [role=tabpanel] {
background-color: #FFF;
border: 1px solid #7f7f7f;
border-top: none;
padding: 1rem;
z-index: 1;
}
tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
display: none;
}</pre>
<div tab="scss"> <div tab="scss">
<h2>Example</h2>
<pre class="language-sass">@use "scss/core/tabs/_tabs"; <pre class="language-sass">@use "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
// optional content block // optional content block
@@ -129,6 +178,7 @@ $tab-notselected-text: #000 !default;
}</pre> }</pre>
</div> </div>
<div tab="js"> <div tab="js">
<h2>Example</h2>
<pre class="language-js">import * as tabs from "./js/core/tabs/_tabs.js"; <pre class="language-js">import * as tabs from "./js/core/tabs/_tabs.js";
tabs.init();</pre> tabs.init();</pre>
<pre class="language-js">/* DS2 core (c) 2024 Alexander McIlwraith <pre class="language-js">/* DS2 core (c) 2024 Alexander McIlwraith
@@ -177,101 +227,118 @@ const chooseTab = (tab) => {
let pushState = 0; let pushState = 0;
let tabsetCount = 0; let tabsetCount = 0;
module.exports = {
"init": (container = document, spacer = true, args = {}) => {
container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
const tabgroup = tabGroup.getAttribute("id"); export function init(container = document, spacer = true, args = {}) {
let tablist = ""; container.querySelectorAll(".tab-group, tabset").forEach(tabGroup => {
if (tabGroup.querySelector("[role=tablist]") === null) {
if (tabGroup.getAttribute("id") == null) {
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
tabsetCount++;
}
Array.from(tabGroup.children).forEach(child => { const tabgroup = tabGroup.getAttribute("id");
let tablist = "";
// is details? Array.from(tabGroup.children).forEach(child => {
let dtls = child.nodeName == "DETAILS" ? true : false;
// get the tab text // is details?
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab"); let dtls = child.nodeName == "DETAILS" ? true : false;
// if the tab text is not blank // get the tab text
if (tab !== null) { let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
// define the tab panel content // if the tab text is not blank
let tabPanel = null; if (tab !== null) {
if (dtls) { const tabID = tab.replace(/\W+/g, "-").toLowerCase();
tabPanel = child;
tabPanel.setAttribute("open", "");
} else {
tabPanel = document.createElement('div');
tabPanel.appendChild(child.cloneNode(true));
}
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`; // define the tab panel content
tabPanel.className = tablist === "" ? "open" : ""; let tabPanel = null;
tabPanel.setAttribute("role", "tabpanel"); if (dtls) {
tabPanel.setAttribute("tabindex", "0"); tabPanel = child;
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`); tabPanel.setAttribute("open", "");
child.parentNode.replaceChild(tabPanel, child);
let cls = tablist === "" ? "class='selected'" : "";
tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
} else { } else {
child.classList.add("tab-hidden"); tabPanel = document.createElement('div');
tabPanel.appendChild(child.cloneNode(true));
} }
tabPanel.id = `tab-panel-${tabgroup}-${tabID}`;
tabPanel.className = tablist === "" ? "open" : "";
tabPanel.setAttribute("role", "tabpanel");
tabPanel.setAttribute("tabindex", "0");
tabPanel.setAttribute("aria-labelledby", `tab-${tabgroup}-${tabID}`);
child.parentNode.replaceChild(tabPanel, child);
tablist += `<li tabindex="0" role="tab" id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
} else {
child.classList.add("tab-hidden");
}
});
const ul = document.createElement('ul');
ul.setAttribute("role", "tablist");
tabGroup.insertBefore(ul, tabGroup.firstChild);
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`;
if ( tabGroup.hasAttribute("order") || tabGroup.hasAttribute("data-order") ) {
let order = (tabGroup.getAttribute("order") || tabGroup.getAttribute("data-order")).split(",");
const items = Array.from(ul.getElementsByTagName("li"));
items.sort((a, b) => {
console.log("here")
const aa = order.indexOf(a.textContent.trim());
const bb = order.indexOf(b.textContent.trim());
// Check if both items exist in orderArray
if (aa === -1) return 1; // Move to the end if not found
if (bb === -1) return -1; // Move to the end if not found
return aa - bb; // Sort based on the defined order
}); });
const ul = document.createElement('ul'); ul.innerHTML = '';
ul.setAttribute("role", "tablist"); items.forEach(item => ul.appendChild(item));
ul.innerHTML = spacer != true ? `${tablist}` : `${tablist}<li role="separator" class="separator"></li>`; }
tabGroup.insertBefore(ul, tabGroup.firstChild);
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => { tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
tab.addEventListener("click", (evt) => { tab.addEventListener("click", (evt) => {
if (pushState == 0) { if (pushState == 0) {
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`); window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.parentNode.firstChild.getAttribute("id")}, "", `#${tab.parentNode.firstChild.getAttribute("id")}`);
pushState++;
}
chooseTab(evt.currentTarget);
window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
pushState++; pushState++;
}); }
tab.addEventListener("keypress", (e) => { chooseTab(evt.currentTarget);
e.preventDefault(); window.history.pushState({rand: Math.random(), pushState: pushState, tab: tab.getAttribute("id")}, "", `#${tab.getAttribute("id")}`);
if( e.which == 32 || e.which == 13 ) { pushState++;
e.currentTarget.dispatchEvent(click);
}
})
}); });
}
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") { tab.addEventListener("keypress", (e) => {
waitForElement(document.location.hash).then((el) => { e.preventDefault();
el.scrollIntoView(); if( e.which == 32 || e.which == 13 ) {
el.focus(); e.currentTarget.dispatchEvent(click);
el.dispatchEvent(click); }
}); })
} });
}); ul.querySelector("li").classList.add("selected");
}
window.addEventListener("popstate", function (e) { if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
e.preventDefault(); waitForElement(document.location.hash).then((el) => {
if (e.state != null) { //el.scrollIntoView();
chooseTab(document.querySelector(`#${e.state.tab}`)); el.focus();
} else { el.dispatchEvent(click);
history.go(-1); });
} }
}); });
} window.addEventListener("popstate", function (e) {
e.preventDefault();
if (e.state != null) {
chooseTab(document.querySelector(`#${e.state.tab}`));
} else {
history.go(-1);
}
});
} }
</pre> </pre>
</div> </div>
</tabset> </tabset>

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

@@ -33,8 +33,165 @@
<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-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 <pre class="language-pug" tab="pug">a(href="#") Link with a tool tip
span(role="tooltip" inert tip-position="right") Tool tip content</pre> span(role="tooltip" inert tip-position="right") Tool tip content</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> <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;
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"> <div tab="scss">
<h2>Example</h2>
<pre class="language-sass">@use "scss/core/tooltip/_tooltip"; <pre class="language-sass">@use "scss/core/tooltip/_tooltip";
@include tooltip;</pre> @include tooltip;</pre>
<pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">//- DS2 core (c) 2024 Alexander McIlwraith

2
src/pg/core/_colour-samples.pug
View File

@@ -240,7 +240,7 @@ mixin colour-samples(colors, theid)
notes= colors[i].note notes= colors[i].note
- } - }
div.tab-group(id= theid ) tabset(id= theid order= taborder)
- csstab = csstab == undefined ? "css" : csstab - csstab = csstab == undefined ? "css" : csstab
- scsstab = scsstab == undefined ? "scss" : scsstab - scsstab = scsstab == undefined ? "scss" : scsstab

2
src/pg/patterns/core/breakpoint/index.pug
View File

@@ -17,7 +17,7 @@ block content
p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across.
tabset#breakpoints tabset#breakpoints(order= taborder)
div(tab="scss") div(tab="scss")
+h(3) +h(3)
pre.language-sass. pre.language-sass.

54
src/pg/patterns/core/header/header.css
View File

@@ -1 +1,53 @@
header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--colour-grey-xxl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none} header {
display: -ms-grid;
display: grid;
-ms-grid-rows: 1.75rem 3.5rem;
grid-template-rows: 1.75rem 3.5rem;
-ms-grid-column: 2;
-ms-grid-column-span: 2;
grid-column: 2/4;
overflow: hidden;
}
header svg {
grid-column: 1/-1;
grid-row: 1/-1;
-ms-grid-row-align: stretch;
-ms-grid-column-align: stretch;
place-self: stretch;
}
header svg text {
-webkit-transform: translate(-1rem, 7.25rem);
-ms-transform: translate(-1rem, 7.25rem);
transform: translate(-1rem, 7.25rem);
font-size: 10rem;
font-weight: 1000;
font-family: sans-serif;
fill: var(--colour-grey-xxl);
}
header > div {
-ms-grid-row: 2;
grid-row: 2;
grid-column: 1/-1;
display: -ms-grid;
display: grid;
grid-column-gap: 1rem;
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
-ms-grid-columns: auto max-content max-content;
grid-template-columns: auto -webkit-max-content -webkit-max-content;
grid-template-columns: auto max-content max-content;
}
header > div .header-title h1 {
margin: 0;
padding: 0 1rem;
}
header > div .header-title h1 a, header > div .header-title h1 a:visited {
border-bottom: none;
color: var(--colour-black);
font-family: sans-serif;
font-size: 2.5rem;
font-size: 32px;
font-weight: 700;
margin: 0;
padding: 0;
text-decoration: none;
}

2
src/pg/patterns/core/header/index.pug
View File

@@ -12,7 +12,7 @@ block content
+h(2) +h(2)
p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[code.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system. p Place the header at the top of the page after the skip to main content link. You will likely want to replace core header should be replaced with your own site's header. To do this, remove the #[code.inline.language-js core: true ] and create your own pattern in the location you wish it in your design system.
tabset#header tabset#header(order= taborder)
pre.language-html(tab="html") pre.language-html(tab="html")
// create temp variables and store the design system values // create temp variables and store the design system values
- var tmpsite= site - var tmpsite= site

2
src/pg/patterns/core/status/index.pug
View File

@@ -49,7 +49,7 @@ block content
- return count; - return count;
- } - }
div.tab-group#status-report tabset#status-report(order= taborder)
div.status-report.status-report-structure(data-tab="by&nbsp;structure") div.status-report.status-report-structure(data-tab="by&nbsp;structure")
table.custom(role="presentation") table.custom(role="presentation")
tbody tbody

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

@@ -15,7 +15,7 @@ block content
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 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".
tabset#sticky-note tabset#sticky-note(order= taborder)
pre.language-html(tab="html") pre.language-html(tab="html")
include _sticky-note.pug include _sticky-note.pug
pre.language-pug(tab="pug") pre.language-pug(tab="pug")

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

@@ -1 +1,125 @@
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} 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(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;
}

2
src/pg/patterns/core/switch/index.pug
View File

@@ -20,7 +20,7 @@ block content
label(for="example-switch") Switch label (states the on state) label(for="example-switch") Switch label (states the on state)
span#example-switch(role="switch") span#example-switch(role="switch")
div#switches.tab-group tabset#switches(order= taborder)
pre.language-html(tab="html") pre.language-html(tab="html")
include _switch.pug include _switch.pug
pre.language-pug(tab="pug") pre.language-pug(tab="pug")

27
src/pg/patterns/core/switch/switch.css
View File

@@ -1 +1,26 @@
[role=switch]{display:-ms-inline-grid;display:inline-grid;border:1px solid #2e51a1;background-color:#d8d8d8;border-radius:0.75rem;height:1.5rem;width:3rem;-webkit-transition:all 500ms;transition:all 500ms}[role=switch]>span{display:inline-block;background-color:white;border-radius:50%;margin:2%;width:calc(1.5rem - 2%);-webkit-transition:all 500ms;transition:all 500ms}[role=switch][aria-checked=true]{background-color:#2e51a1}[role=switch][aria-checked=true]>span{margin-left:calc(1.5rem - 5%)} [role=switch] {
display: -ms-inline-grid;
display: inline-grid;
border: 1px solid #2e51a1;
background-color: #d8d8d8;
border-radius: 0.75rem;
height: 1.5rem;
width: 3rem;
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch] > span {
display: inline-block;
background-color: white;
border-radius: 50%;
margin: 2%;
width: calc(1.5rem - 2%);
-webkit-transition: all 500ms;
transition: all 500ms;
}
[role=switch][aria-checked=true] {
background-color: #2e51a1;
}
[role=switch][aria-checked=true] > span {
margin-left: calc(1.5rem - 5%);
}

2
src/pg/patterns/core/tooltip/index.pug
View File

@@ -33,7 +33,7 @@ block content
include _tooltip.pug include _tooltip.pug
tabset#tooltip tabset#tooltip(order= taborder)
pre.language-html(tab="html") pre.language-html(tab="html")
include _tooltip.pug include _tooltip.pug
pre.language-pug(tab="pug") pre.language-pug(tab="pug")

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

@@ -1 +1,157 @@
[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)}} /* Position Options
- top / block-start
- right / inline-end
- bottom / block-end
- left / inline-start
*/
[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);
}
}