move patterns and javascript to core directories

This commit is contained in:
A McIlwraith 2024-07-13 10:16:32 -04:00
parent 426f92cfd0
commit 4532389e3d
50 changed files with 55 additions and 1006 deletions

View File

@ -191,262 +191,6 @@
},
"buffers":
[
{
"file": "src/pg/core/_master-index.pug",
"settings":
{
"buffer_size": 1848,
"encoding": "UTF-8",
"line_ending": "Windows"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "../"
},
"AwAAAAgAAAAAAAAACQAAAAAAAAAAAAAACQAAAAAAAAAKAAAAAAAAAAAAAAAKAAAAAAAAAAsAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAACAAAAAAAAAAIAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/colours-core/index.pug",
"settings":
{
"buffer_size": 141,
"encoding": "UTF-8",
"line_ending": "Unix"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAAA4AAAAAAAAADwAAAAAAAAAAAAAADwAAAAAAAAAQAAAAAAAAAAAAAAAQAAAAAAAAABEAAAAAAAAAAAAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAADgAAAAAAAAAOAAAAAAAAAAAAAAAAAPC/"
],
[
6,
1,
"insert",
{
"characters": "core/"
},
"BQAAAEIAAAAAAAAAQwAAAAAAAAAAAAAAQwAAAAAAAABEAAAAAAAAAAAAAABEAAAAAAAAAEUAAAAAAAAAAAAAAEUAAAAAAAAARgAAAAAAAAAAAAAARgAAAAAAAABHAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAQgAAAAAAAABCAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/status-core/index.pug",
"settings":
{
"buffer_size": 4216,
"encoding": "UTF-8",
"line_ending": "Windows"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "../"
},
"AwAAAA4AAAAAAAAADwAAAAAAAAAAAAAADwAAAAAAAAAQAAAAAAAAAAAAAAAQAAAAAAAAABEAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAADgAAAAAAAAAOAAAAAAAAAAAAAAAAAPC/"
],
[
4,
3,
"left_delete",
null,
"AwAAABAAAAAAAAAAEAAAAAAAAAABAAAALw8AAAAAAAAADwAAAAAAAAABAAAALg4AAAAAAAAADgAAAAAAAAABAAAALg",
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
],
[
5,
1,
"insert",
{
"characters": "core/"
},
"BQAAAA4AAAAAAAAADwAAAAAAAAAAAAAADwAAAAAAAAAQAAAAAAAAAAAAAAAQAAAAAAAAABEAAAAAAAAAAAAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAADgAAAAAAAAAOAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/layouts/tabs-core/index.pug",
"settings":
{
"buffer_size": 1262,
"encoding": "UTF-8",
"line_ending": "Windows"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAAGEAAAAAAAAAYgAAAAAAAAAAAAAAYgAAAAAAAABjAAAAAAAAAAAAAABjAAAAAAAAAGQAAAAAAAAAAAAAAGQAAAAAAAAAZQAAAAAAAAAAAAAAZQAAAAAAAABmAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAYQAAAAAAAABhAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/layouts/header-core/index.pug",
"settings":
{
"buffer_size": 512,
"encoding": "UTF-8",
"line_ending": "Windows"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/layouts/breakpoints-core/index.pug",
"settings":
{
"buffer_size": 385,
"encoding": "UTF-8",
"line_ending": "Unix"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/components/tooltip-core/index.pug",
"settings":
{
"buffer_size": 583,
"encoding": "UTF-8",
"line_ending": "Unix"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/components/switch-core/index.pug",
"settings":
{
"buffer_size": 497,
"encoding": "UTF-8",
"line_ending": "Unix"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/patterns/components/sticky-note-core/index.pug",
"settings":
{
"buffer_size": 966,
"encoding": "UTF-8",
"line_ending": "Unix"
},
"undo_stack":
[
[
3,
1,
"insert",
{
"characters": "core/"
},
"BQAAABEAAAAAAAAAEgAAAAAAAAAAAAAAEgAAAAAAAAATAAAAAAAAAAAAAAATAAAAAAAAABQAAAAAAAAAAAAAABQAAAAAAAAAFQAAAAAAAAAAAAAAFQAAAAAAAAAWAAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAEQAAAAAAAAARAAAAAAAAAAAAAAAAAPC/"
]
]
},
{
"file": "src/pg/_config.pug",
"settings":
{
"buffer_size": 2309,
"encoding": "UTF-8",
"line_ending": "Windows"
},
"undo_stack":
[
[
4,
1,
"left_delete",
null,
"AQAAAJwAAAAAAAAAnAAAAAAAAAABAAAACg",
"AQAAAAAAAAABAAAAnQAAAAAAAACdAAAAAAAAAAAAAAAAADBA"
],
[
5,
1,
"insert",
{
"characters": "\n"
},
"AQAAAJwAAAAAAAAAnQAAAAAAAAAAAAAA",
"AQAAAAAAAAABAAAAnAAAAAAAAACcAAAAAAAAAAAAAAAAAPC/"
]
]
}
],
"build_system": "",
"build_system_choices":
@ -536,17 +280,37 @@
},
"expanded_folders":
[
"/Users/am/Desktop/ds2 core",
"/Users/am/Desktop/ds2 core/public",
"/Users/am/Desktop/ds2 core/public/assets",
"/Users/am/Desktop/ds2 core/src",
"/Users/am/Desktop/ds2 core/src/js",
"/Users/am/Desktop/ds2 core/src/pg",
"/Users/am/Desktop/ds2 core/src/pg/patterns",
"/Users/am/Desktop/ds2 core/src/scss"
"/Users/am/Desktop/ds2-core",
"/Users/am/Desktop/ds2-core/src",
"/Users/am/Desktop/ds2-core/src/pg",
"/Users/am/Desktop/ds2-core/src/pg/patterns",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/sticky-note",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/switch",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/tooltip"
],
"file_history":
[
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/switch/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/sticky-note/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/layouts/breakpoints/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/layouts/header/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/layouts/tabs/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/components/tooltip/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/status/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/core/colours/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/core/_master-index.pug",
"/Users/am/Desktop/ds2-core/src/pg/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/_config.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/components/sticky-note-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/components/switch-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/components/tooltip-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/layouts/breakpoints-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/layouts/header-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/layouts/tabs-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/status-core/index.pug",
"/Users/am/Desktop/ds2-core/src/pg/patterns/colours-core/index.pug",
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/sticky-note-core/_sticky-note.js",
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/_tabs.js",
"/Users/am/Desktop/ds2 core/src/pg/_master-index.pug",
@ -655,36 +419,18 @@
"/Users/am/Desktop/my DS2/src/pg/patterns/layouts/breakpoints/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/notifications/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/spacing.css",
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/colours/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/pages/portfolio/portfolio-item/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/components/images/image/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/components/images/sprite/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/pages/portfolio/portfolio-landing/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/pages/portfolio-item/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/border-radius/index.pug",
"/Users/am/Desktop/my DS2/src/pg/_master-index.pug",
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/textarea/untitled.pug",
"/Users/am/Desktop/my DS2/src/pg/index.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/components/sticky-note/index.pug",
"/Users/am/Desktop/my DS2/src/pg/_master-pattern.pug",
"/Users/am/Desktop/my DS2/src/pg/patterns/other-docs/status/index.pug",
"/Users/am/Desktop/My DS2/src/pg/patterns/other-docs/status/_status.scss",
"/Volumes/am/www/test/assets/public/img/feature/index.php",
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/header/index.pug",
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/header/_header.pug",
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/header/_header.js",
"/Users/am/Desktop/My DS2/README.md",
"/Users/am/Desktop/My DS2/todo.md"
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/colours/index.pug"
],
"find":
{
"height": 38.0
"height": 26.0
},
"find_in_files":
{
"height": 179.0,
"where_history":
[
"<open files>"
]
},
"find_state":
@ -692,6 +438,8 @@
"case_sensitive": false,
"find_history":
[
"../core/_master-pattern.pug",
"../core",
"hide-deprecated",
"deprecated",
"ajx",
@ -740,6 +488,7 @@
"regex": false,
"replace_history":
[
"../../core/_master-pattern.pug",
"colors",
"core.cookie.get",
"core.cookie.set"
@ -757,317 +506,6 @@
{
"sheets":
[
{
"buffer": 0,
"file": "src/pg/core/_master-index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 1848,
"regions":
{
},
"selection":
[
[
11,
11
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 9,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 1,
"file": "src/pg/patterns/colours-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 141,
"regions":
{
},
"selection":
[
[
71,
71
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 8,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 2,
"file": "src/pg/patterns/status-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 4216,
"regions":
{
},
"selection":
[
[
19,
19
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 7,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 3,
"file": "src/pg/patterns/layouts/tabs-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 1262,
"regions":
{
},
"selection":
[
[
102,
102
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 6,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 4,
"file": "src/pg/patterns/layouts/header-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 512,
"regions":
{
},
"selection":
[
[
22,
22
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 5,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 5,
"file": "src/pg/patterns/layouts/breakpoints-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 385,
"regions":
{
},
"selection":
[
[
22,
22
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 4,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 6,
"file": "src/pg/patterns/components/tooltip-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 583,
"regions":
{
},
"selection":
[
[
22,
22
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 3,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 7,
"file": "src/pg/patterns/components/switch-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 497,
"regions":
{
},
"selection":
[
[
22,
22
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 2,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 8,
"file": "src/pg/patterns/components/sticky-note-core/index.pug",
"semi_transient": false,
"settings":
{
"buffer_size": 966,
"regions":
{
},
"selection":
[
[
22,
22
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 1,
"stack_multiselect": false,
"type": "text"
},
{
"buffer": 9,
"file": "src/pg/_config.pug",
"selected": true,
"semi_transient": false,
"settings":
{
"buffer_size": 2309,
"regions":
{
},
"selection":
[
[
157,
157
]
],
"settings":
{
"syntax": "Packages/Pug/Syntaxes/Pug.sublime-syntax",
"tab_size": 4,
"translate_tabs_to_spaces": false
},
"translation.x": 0.0,
"translation.y": 0.0,
"zoom_level": 1.0
},
"stack_index": 0,
"stack_multiselect": false,
"type": "text"
}
]
}
],
@ -1118,7 +556,7 @@
"project": "ds2 core.sublime-project",
"replace":
{
"height": 48.0
"height": 68.0
},
"save_all_on_build": false,
"select_file":

File diff suppressed because one or more lines are too long

View File

@ -1,361 +0,0 @@
<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>

View File

@ -173,7 +173,7 @@ module.exports = {
document.querySelectorAll("article").forEach((a) => {
if ( a.getAttribute("data-template") != "none" ) {
let path = "patterns/" + a.getAttribute("data-path") + (a.getAttribute("data-core") == "true" ? "-core" : "") + "/index.html";
let path = "patterns/" + (a.getAttribute("data-core") == "true" ? "core/" : "") + a.getAttribute("data-path") + "/index.html";
const ASYNC = true;
let ajx = new XMLHttpRequest();
ajx.onreadystatechange = () => {

View File

@ -1,5 +1,5 @@
// core and prism
import * as core from './_core.js';
import * as core from './core/_core.js';
import * as Prism from "../../node_modules/prismjs/prism";
import '../../node_modules/prismjs/components/prism-json';
import '../../node_modules/prismjs/components/prism-pug';
@ -8,9 +8,9 @@ import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
// import pattern stuff.
import * as swtch from "../pg/patterns/components/switch-core/_switch.js";
import * as stickynote from "../pg/patterns/components/sticky-note-core/_sticky-note.js";
import * as tabs from "../pg/patterns/layouts/tabs-core/_tabs.js";
import * as swtch from "../pg/patterns/core/components/switch/_switch.js";
import * as stickynote from "../pg/patterns/core/components/sticky-note/_sticky-note.js";
import * as tabs from "../pg/patterns/core/layouts/tabs/_tabs.js";
// init core
core.init({
@ -24,34 +24,6 @@ core.init({
}
});
// handler for the deprecated switch
/*
// selectable content
jQuery.fn.OneClickSelect = function () {
return jQuery(this).on('click', function () {
// In here, "this" is the element
var range, selection;
if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
} else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(this);
range.select();
}
});
};
*/
jQuery(document).ready(function($){
// show deprecated switch
function flipDeprecated() {

View File

@ -8,7 +8,7 @@ block head
link(rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)")
block header
include patterns/layouts/header-core/_header.pug
include patterns/core/layouts/header/_header.pug
nav
ul

View File

@ -1,7 +0,0 @@
extends ../../core/_master-pattern
block content
include ../../core/_colour-samples
h2 Primary colours
+colour-samples(colours, "colors")

View File

@ -0,0 +1,7 @@
extends ../../../core/_master-pattern
block content
include ../../../core/_colour-samples
h2 Primary colours
+colour-samples(colours, "colors")

View File

@ -1,4 +1,4 @@
extends ../../../core/_master-pattern.pug
extends ../../../../core/_master-pattern.pug
block content
+h(0)
+h(1)

View File

@ -1,4 +1,4 @@
extends ../../../core/_master-pattern.pug
extends ../../../../core/_master-pattern.pug
block content

View File

@ -1,4 +1,4 @@
extends ../../../core/_master-pattern.pug
extends ../../../../core/_master-pattern.pug
block content

View File

@ -1,4 +1,4 @@
extends ../../../core/_master-pattern.pug
extends ../../../../core/_master-pattern.pug
block content

View File

@ -1,7 +1,7 @@
//- DS2 core (c) 2024 Alexander McIlwraith
//- Licensed under CC BY-SA 4.0
extends ../../../core/_master-pattern.pug
extends ../../../../core/_master-pattern.pug
block content

View File

@ -1,4 +1,4 @@
extends ../../core/_master-pattern.pug
extends ../../../core/_master-pattern.pug
block content
-