Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 8fe6e39440 | |||
| 5f050066e9 | |||
| 0b5e54faa6 | |||
| 6d8b9d0e47 | |||
| 9db11f3f97 | |||
| df95905fe0 | |||
| 89870edaaf | |||
| ca3f9970a9 | |||
| d5cbcb5807 | |||
| a204f7fc98 | |||
| c6e7b616f1 | |||
| 2a060106bc | |||
| e2c05ac338 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -1 +1,2 @@
|
||||
.DS_Store
|
||||
ds2 core.sublime-workspace
|
||||
@@ -100,4 +100,4 @@ You will now be able to include the .pp file in your pattern's index file while
|
||||
|
||||
|
||||
## Credits
|
||||
This framework includes [PrismJS](https://prismjs.com/) for code syntax highlighting. PrismJS is released under the [MIT license](https://opensource.org/licenses/MIT)>
|
||||
This framework includes [PrismJS](https://prismjs.com/) for code syntax highlighting. PrismJS is released under the [MIT license](https://opensource.org/licenses/MIT).
|
||||
|
||||
@@ -1,600 +0,0 @@
|
||||
{
|
||||
"auto_complete":
|
||||
{
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"Quer",
|
||||
"querySelectorAll"
|
||||
],
|
||||
[
|
||||
"get",
|
||||
"getAttribute"
|
||||
],
|
||||
[
|
||||
"query",
|
||||
"querySelectorAll"
|
||||
],
|
||||
[
|
||||
"to",
|
||||
"toContent"
|
||||
],
|
||||
[
|
||||
"tos",
|
||||
"toSentenceCase"
|
||||
],
|
||||
[
|
||||
"sticky",
|
||||
"sticky-note"
|
||||
],
|
||||
[
|
||||
"back",
|
||||
"background-color"
|
||||
],
|
||||
[
|
||||
"setAttr",
|
||||
"setAttributes"
|
||||
],
|
||||
[
|
||||
"post",
|
||||
"positionSticky"
|
||||
],
|
||||
[
|
||||
"grid-",
|
||||
"grid-column"
|
||||
],
|
||||
[
|
||||
"of",
|
||||
"offsetWidth"
|
||||
],
|
||||
[
|
||||
"fun",
|
||||
"function"
|
||||
],
|
||||
[
|
||||
"grid-template",
|
||||
"grid-template-columns"
|
||||
],
|
||||
[
|
||||
"text",
|
||||
"text-decoration"
|
||||
],
|
||||
[
|
||||
"text-",
|
||||
"text-decoration"
|
||||
],
|
||||
[
|
||||
"grid-template-",
|
||||
"grid-template-columns"
|
||||
],
|
||||
[
|
||||
"bakc",
|
||||
"background-color"
|
||||
],
|
||||
[
|
||||
"copyco",
|
||||
"copycolour"
|
||||
],
|
||||
[
|
||||
"ar",
|
||||
"article"
|
||||
],
|
||||
[
|
||||
"toS",
|
||||
"toSentenceCase"
|
||||
],
|
||||
[
|
||||
"bacg",
|
||||
"background-color"
|
||||
],
|
||||
[
|
||||
"acc",
|
||||
"accent-grey"
|
||||
],
|
||||
[
|
||||
"_",
|
||||
"_POST"
|
||||
],
|
||||
[
|
||||
"json",
|
||||
"json_encode"
|
||||
],
|
||||
[
|
||||
"font",
|
||||
"font-heading"
|
||||
],
|
||||
[
|
||||
"border",
|
||||
"border-radius"
|
||||
],
|
||||
[
|
||||
"background-o",
|
||||
"background-position"
|
||||
],
|
||||
[
|
||||
"lang",
|
||||
"language\tAttr"
|
||||
],
|
||||
[
|
||||
"Emai",
|
||||
"EMAIL_FOLDER"
|
||||
],
|
||||
[
|
||||
"tem",
|
||||
"template"
|
||||
],
|
||||
[
|
||||
"G",
|
||||
"GetParentFolderName"
|
||||
],
|
||||
[
|
||||
"out",
|
||||
"outFile"
|
||||
],
|
||||
[
|
||||
"with",
|
||||
"With"
|
||||
],
|
||||
[
|
||||
"Write",
|
||||
"WriteFile"
|
||||
],
|
||||
[
|
||||
"File",
|
||||
"FileExists"
|
||||
],
|
||||
[
|
||||
"font-",
|
||||
"font-weight"
|
||||
],
|
||||
[
|
||||
"list-st",
|
||||
"list-style-type"
|
||||
],
|
||||
[
|
||||
"html",
|
||||
"html5\tSimple HTML5 Boilerplate"
|
||||
],
|
||||
[
|
||||
"backgroun",
|
||||
"background-color"
|
||||
],
|
||||
[
|
||||
"background-",
|
||||
"background-color"
|
||||
],
|
||||
[
|
||||
"place",
|
||||
"place_content"
|
||||
],
|
||||
[
|
||||
"string",
|
||||
"stringify"
|
||||
],
|
||||
[
|
||||
"cor",
|
||||
"corpbiege"
|
||||
],
|
||||
[
|
||||
"inner",
|
||||
"innerWidth"
|
||||
],
|
||||
[
|
||||
"program",
|
||||
"programcontent"
|
||||
],
|
||||
[
|
||||
"corp",
|
||||
"corpgreen"
|
||||
]
|
||||
]
|
||||
},
|
||||
"buffers":
|
||||
[
|
||||
],
|
||||
"build_system": "",
|
||||
"build_system_choices":
|
||||
[
|
||||
],
|
||||
"build_varint": "",
|
||||
"command_palette":
|
||||
{
|
||||
"height": 89.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"key",
|
||||
"Preferences: Key Bindings"
|
||||
],
|
||||
[
|
||||
"live",
|
||||
"MarkdownLivePreview: Open Preview"
|
||||
],
|
||||
[
|
||||
"markdown",
|
||||
"MarkdownLivePreview: Open Settings"
|
||||
],
|
||||
[
|
||||
"install",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"packages",
|
||||
"Package Control: Discover Packages"
|
||||
],
|
||||
[
|
||||
"Package Control: ",
|
||||
"Package Control: Discover Packages"
|
||||
],
|
||||
[
|
||||
"insta",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"Package Control: install",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"package",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"compare",
|
||||
"Compare with..."
|
||||
],
|
||||
[
|
||||
"install\t",
|
||||
"Package Control: Install Package"
|
||||
],
|
||||
[
|
||||
"list",
|
||||
"Package Control: List Packages"
|
||||
],
|
||||
[
|
||||
"jav",
|
||||
"Set Syntax: JavaScript"
|
||||
],
|
||||
[
|
||||
"diff",
|
||||
"Set Syntax: Diff"
|
||||
]
|
||||
],
|
||||
"width": 444.0
|
||||
},
|
||||
"console":
|
||||
{
|
||||
"height": 0.0,
|
||||
"history":
|
||||
[
|
||||
]
|
||||
},
|
||||
"distraction_free":
|
||||
{
|
||||
"menu_visible": true,
|
||||
"show_minimap": false,
|
||||
"show_open_files": false,
|
||||
"show_tabs": false,
|
||||
"side_bar_visible": false,
|
||||
"status_bar_visible": false
|
||||
},
|
||||
"expanded_folders":
|
||||
[
|
||||
"/Users/am/Desktop/ds2-core",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/patterns"
|
||||
],
|
||||
"file_history":
|
||||
[
|
||||
"/Users/am/Desktop/ds2-core/src/js/scaffolding.js",
|
||||
"/Users/am/Desktop/ds2-core/src/js/core/_core.js",
|
||||
"/Users/am/Desktop/ds2-core/Readme.md",
|
||||
"/Users/am/Desktop/ds2-core/src/pg/core/_colour-samples.pug",
|
||||
"/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",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/_config.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/scss/scaffolding.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/index.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/js/scaffolding.js",
|
||||
"/Users/am/Desktop/ds2 core/src/js/_core.js",
|
||||
"/Users/am/Desktop/ds2 core/public/assets/scaffolding-min.js",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/header-core/_header.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/header-core/_header.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/header-core/header.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/tooltip-core/_tooltip.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/tooltip-core/tooltip.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/switch-core/_switch.js",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/sticky-note-core/sticky-note.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/components/sticky-note-core/_sticky-note.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/colours-core/index.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/_color-samples.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/tabs.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/breakpoints-core/_breakpoints.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/_tabs-jquery.js",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/index.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/_tabs.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/tabs-core/_tabs.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/scss/_color-samples.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/js/_color-samples.js",
|
||||
"/Users/am/Desktop/ds2 core/public/assets/scaffolding.css",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/status-core/_status.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/status-core/index.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/patterns/layouts/header-core/index.pug",
|
||||
"/Users/am/Desktop/ds2 core/src/js/_geturlvars.js",
|
||||
"/Users/am/Desktop/ds2 core/src/js/_core-cookies.js",
|
||||
"/Users/am/Desktop/My DS2/src/js/scaffolding.js",
|
||||
"/Users/am/Desktop/ds2 core/Readme.md",
|
||||
"/Users/am/Desktop/My DS2/src/scss/_color-samples.scss",
|
||||
"/Users/am/Desktop/My DS2/src/scss/scaffolding.scss",
|
||||
"/Users/am/Desktop/My DS2/public/assets/scaffolding.css",
|
||||
"/Users/am/Desktop/My DS2/src/pg/_config.pug",
|
||||
"/Users/am/Desktop/My DS2/src/scss/_core.scss",
|
||||
"/Users/am/Desktop/ds2 core/src/pg/_core.scss.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/_master-pattern.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/_color-samples.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/other-docs/status/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/_core.scss.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/_master-index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/visual-design/spacing/index.pug",
|
||||
"/Users/am/Desktop/statuses.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/sticky-note/_sticky-note.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/sticky-note/_sticky-note.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/sticky-note/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/js/_oneClickSelect.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/_tabs.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/_tabs-module.js",
|
||||
"/Users/am/Desktop/tabs-module-old.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/esc6 tabs.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/tabs-module.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/_tabs.scss",
|
||||
"/Users/am/Desktop/My DS2/public/assets/scaffolding-min.js",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/tabs.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/sticky-note/sticky-note.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/text/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/other-docs/flex-box/_flex-box.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/other-docs/grid/_grid.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/_config.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/button/_button.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/text/_text.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/text/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/_form-fields.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/textarea/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/textarea/_textarea.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/button/button.css",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/form-fields.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/button/button.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/form-fields/button/index.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/text/text.pug",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/text/text.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/form-fields.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/progress-bar/_progress-bar.scss",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/components/form-fields/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/scss/scaffolding.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/sticky-note/_sticky-note.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/sticky-note/_sticky-note.js",
|
||||
"/Users/am/Desktop/my DS2/src/js/scaffolding.js",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/layouts/main-navigation/_main-navigation.js",
|
||||
"/Users/am/Desktop/my DS2/src/pg/_core.scss.pug",
|
||||
"/Users/am/Desktop/my DS2/public/assets/scaffolding.css",
|
||||
"/Users/am/Desktop/My DS2/src/pg/patterns/layouts/tabs/_tabs.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/_color-samples.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/layouts/tabs/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/_spacing.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/typography/_content.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/spacing/spacing.scss",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/typography/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/site-identifiers/favicon-and-browser-tab/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/visual-design/site-identifiers/monogram/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/switch/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/tooltip/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/link/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/components/progress-bar/index.pug",
|
||||
"/Users/am/Desktop/my DS2/src/pg/patterns/layouts/main-navigation/index.pug"
|
||||
],
|
||||
"find":
|
||||
{
|
||||
"height": 24.0
|
||||
},
|
||||
"find_in_files":
|
||||
{
|
||||
"height": 179.0,
|
||||
"where_history":
|
||||
[
|
||||
"<open files>"
|
||||
]
|
||||
},
|
||||
"find_state":
|
||||
{
|
||||
"case_sensitive": false,
|
||||
"find_history":
|
||||
[
|
||||
"oneClickSelect",
|
||||
"../core/_master-pattern.pug",
|
||||
"../core",
|
||||
"hide-deprecated",
|
||||
"deprecated",
|
||||
"ajx",
|
||||
"console.log",
|
||||
"setupStickies",
|
||||
"document.querySelector",
|
||||
"renderPatterns",
|
||||
"xhr",
|
||||
"xhttp",
|
||||
"document.querySelector",
|
||||
"classList",
|
||||
"core.",
|
||||
"innerHTML",
|
||||
"core.",
|
||||
"generateSCSS",
|
||||
"showMessage(",
|
||||
"core.showMessage",
|
||||
"core.colours",
|
||||
"core.colors",
|
||||
"status-",
|
||||
"header",
|
||||
"status:",
|
||||
"status",
|
||||
"core: \"true\",",
|
||||
"1rem",
|
||||
"main-grid-4col",
|
||||
"@include main-grid-4col;",
|
||||
"components",
|
||||
"layouts",
|
||||
"alert",
|
||||
"colour",
|
||||
"main-grid",
|
||||
"{\n\t\t\t\t\tname: \"header\",\n\t\t\t\t\tstatus: \"complete\",\n\t\t\t\t\tcore: true,\n\t\t\t\t}, ",
|
||||
"colours",
|
||||
"get.vars.",
|
||||
"get.",
|
||||
"colours.",
|
||||
"cookie.get",
|
||||
"cookie.set",
|
||||
"cookie",
|
||||
"function"
|
||||
],
|
||||
"highlight": false,
|
||||
"in_selection": false,
|
||||
"preserve_case": false,
|
||||
"regex": false,
|
||||
"replace_history":
|
||||
[
|
||||
"../../core/_master-pattern.pug",
|
||||
"colors",
|
||||
"core.cookie.get",
|
||||
"core.cookie.set"
|
||||
],
|
||||
"reverse": false,
|
||||
"scrollbar_highlights": true,
|
||||
"show_context": true,
|
||||
"use_buffer2": true,
|
||||
"use_gitignore": true,
|
||||
"whole_word": false,
|
||||
"wrap": false
|
||||
},
|
||||
"groups":
|
||||
[
|
||||
{
|
||||
"sheets":
|
||||
[
|
||||
]
|
||||
}
|
||||
],
|
||||
"incremental_find":
|
||||
{
|
||||
"height": 24.0
|
||||
},
|
||||
"input":
|
||||
{
|
||||
"height": 209.0
|
||||
},
|
||||
"layout":
|
||||
{
|
||||
"cells":
|
||||
[
|
||||
[
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
1
|
||||
]
|
||||
],
|
||||
"cols":
|
||||
[
|
||||
0.0,
|
||||
1.0
|
||||
],
|
||||
"rows":
|
||||
[
|
||||
0.0,
|
||||
1.0
|
||||
]
|
||||
},
|
||||
"menu_visible": true,
|
||||
"output.diff_views":
|
||||
{
|
||||
"height": 339.0
|
||||
},
|
||||
"output.exec":
|
||||
{
|
||||
"height": 147.0
|
||||
},
|
||||
"output.find_results":
|
||||
{
|
||||
"height": 0.0
|
||||
},
|
||||
"pinned_build_system": "",
|
||||
"project": "ds2 core.sublime-project",
|
||||
"replace":
|
||||
{
|
||||
"height": 44.0
|
||||
},
|
||||
"save_all_on_build": false,
|
||||
"select_file":
|
||||
{
|
||||
"height": 0.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
],
|
||||
"width": 0.0
|
||||
},
|
||||
"select_project":
|
||||
{
|
||||
"height": 500.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
[
|
||||
"",
|
||||
"D:\\Projects\\apps\\Apps Website.sublime-project"
|
||||
]
|
||||
],
|
||||
"width": 380.0
|
||||
},
|
||||
"select_symbol":
|
||||
{
|
||||
"height": 274.0,
|
||||
"last_filter": "",
|
||||
"selected_items":
|
||||
[
|
||||
],
|
||||
"width": 592.0
|
||||
},
|
||||
"selected_group": 0,
|
||||
"settings":
|
||||
{
|
||||
},
|
||||
"show_minimap": false,
|
||||
"show_open_files": true,
|
||||
"show_tabs": true,
|
||||
"side_bar_visible": true,
|
||||
"side_bar_width": 254.0,
|
||||
"status_bar_visible": true,
|
||||
"template_settings":
|
||||
{
|
||||
}
|
||||
}
|
||||
148
public/assets/scaffolding-min.js
vendored
148
public/assets/scaffolding-min.js
vendored
@@ -3014,13 +3014,8 @@ Prism.languages.webmanifest = Prism.languages.json;
|
||||
|
||||
/***/ }),
|
||||
/* 8 */
|
||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
||||
/***/ (function(module) {
|
||||
|
||||
"use strict";
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ init: function() { return /* binding */ init; }
|
||||
/* harmony export */ });
|
||||
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
||||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
||||
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
||||
@@ -3122,35 +3117,37 @@ var calculateStickyPosition = function calculateStickyPosition(s) {
|
||||
});
|
||||
}
|
||||
};
|
||||
function init() {
|
||||
var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
|
||||
p.querySelectorAll("sticky-note").forEach(function (s) {
|
||||
if (s.querySelectorAll("svg").length == 0) {
|
||||
var wrapper = document.createElement("sticky-note-wrapper");
|
||||
s.parentNode.insertBefore(wrapper, s);
|
||||
wrapper.appendChild(s);
|
||||
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
|
||||
s.innerHTML = "<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>".concat(s.innerHTML, "</div></div>");
|
||||
}
|
||||
calculateStickyPosition(s);
|
||||
drag(s);
|
||||
s.ondblclick = function (e) {
|
||||
if (e.ctrlKey) {
|
||||
calculateStickyPosition(s);
|
||||
} else {
|
||||
// add one click select
|
||||
}
|
||||
};
|
||||
});
|
||||
window.onresize = function () {
|
||||
module.exports = {
|
||||
init: function init() {
|
||||
var p = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
|
||||
var stickies = p.querySelectorAll("sticky-note");
|
||||
stickies.forEach(function (s) {
|
||||
p.querySelectorAll("sticky-note").forEach(function (s) {
|
||||
if (s.querySelectorAll("svg").length == 0) {
|
||||
var wrapper = document.createElement("sticky-note-wrapper");
|
||||
s.parentNode.insertBefore(wrapper, s);
|
||||
wrapper.appendChild(s);
|
||||
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
|
||||
s.innerHTML = "<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>".concat(s.innerHTML, "</div></div>");
|
||||
}
|
||||
calculateStickyPosition(s);
|
||||
drag(s);
|
||||
s.ondblclick = function (e) {
|
||||
if (e.ctrlKey) {
|
||||
calculateStickyPosition(s);
|
||||
} else {
|
||||
// add one click select
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
}
|
||||
window.onresize = function () {
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px", ""));
|
||||
var stickies = p.querySelectorAll("sticky-note");
|
||||
stickies.forEach(function (s) {
|
||||
calculateStickyPosition(s);
|
||||
});
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
/***/ }),
|
||||
/* 9 */
|
||||
@@ -3226,27 +3223,47 @@ var waitForElement = function waitForElement(selector) {
|
||||
});
|
||||
});
|
||||
};
|
||||
var tabsetCount = 0;
|
||||
function init() {
|
||||
var container = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : document;
|
||||
var spacer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
||||
var args = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
|
||||
container.querySelectorAll(".tab-group, tabset").forEach(function (tabGroup) {
|
||||
if (tabGroup.querySelector("[role=tablist]") === null) {
|
||||
if (tabGroup.getAttribute("id") == null) {
|
||||
tabGroup.setAttribute("id", "tab-group-" + tabsetCount);
|
||||
tabsetCount++;
|
||||
}
|
||||
var tabgroup = tabGroup.getAttribute("id");
|
||||
var tablist = "";
|
||||
Array.from(tabGroup.children).forEach(function (child) {
|
||||
var tab = child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
// is details?
|
||||
var dtls = child.nodeName == "DETAILS" ? true : false;
|
||||
|
||||
// get the tab text
|
||||
var tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
|
||||
// if the tab text is not blank
|
||||
if (tab !== null) {
|
||||
var tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||
var tabPanel = document.createElement('div');
|
||||
|
||||
// define the tab panel content
|
||||
var tabPanel = null;
|
||||
if (dtls) {
|
||||
tabPanel = child;
|
||||
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));
|
||||
tabPanel.appendChild(child.cloneNode(true));
|
||||
child.parentNode.replaceChild(tabPanel, child);
|
||||
tablist += "<li tabindex=\"0\" role=\"tab\" ".concat(tablist === "" ? "class='selected'" : "", " id=\"tab-").concat(tabgroup, "-").concat(tabID, "\"><span>").concat(tab, "</span></li>");
|
||||
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 {
|
||||
child.classList.add("tab-hidden");
|
||||
}
|
||||
@@ -3256,28 +3273,35 @@ function init() {
|
||||
ul.innerHTML = spacer != true ? "".concat(tablist) : "".concat(tablist, "<li role=\"separator\" class=\"separator\"></li>");
|
||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
||||
tabGroup.querySelectorAll('[role="tab"]').forEach(function (tab) {
|
||||
tab.addEventListener("click", function (e) {
|
||||
if (e.altKey && typeof args.altModifier == "function") {
|
||||
args.altModifier(tab);
|
||||
} else if (e.shiftKey && typeof args.shiftModifier == "function") {
|
||||
args.shiftModifier(tab);
|
||||
} else if (e.metaKey && typeof args.metaModifier == "function") {
|
||||
args.metaModifier(tab);
|
||||
} else {
|
||||
var siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(function (sibling) {
|
||||
return sibling.classList.remove("selected");
|
||||
});
|
||||
tab.classList.add("selected");
|
||||
var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
|
||||
return child.getAttribute("role") === "tabpanel";
|
||||
});
|
||||
tabPanels.forEach(function (panel) {
|
||||
return panel.classList.remove("open");
|
||||
});
|
||||
var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
}
|
||||
tab.addEventListener("click", function (evt) {
|
||||
// if (evt.altKey && typeof args.altModifier == "function") {
|
||||
// args.altModifier(tab, evt);
|
||||
// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
|
||||
// args.shiftModifier(tab, evt);
|
||||
// } else if (evt.metaKey && typeof args.metaModifier == "function") {
|
||||
// args.metaModifier(tab, evt);
|
||||
// } else {
|
||||
var siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(function (sibling) {
|
||||
return sibling.classList.remove("selected");
|
||||
});
|
||||
tab.classList.add("selected");
|
||||
var urlPath = window.location;
|
||||
urlPath.hash = evt.currentTarget.getAttribute("id");
|
||||
window.history.pushState({
|
||||
"pageTitle": window.title + " : " + evt.currentTarget.innerHTML
|
||||
}, "", urlPath.toString());
|
||||
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
|
||||
|
||||
var tabPanels = Array.from(tab.parentNode.parentNode.children).filter(function (child) {
|
||||
return child.getAttribute("role") === "tabpanel";
|
||||
});
|
||||
tabPanels.forEach(function (panel) {
|
||||
return panel.classList.remove("open");
|
||||
});
|
||||
var tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
//}
|
||||
});
|
||||
tab.addEventListener("keypress", function (e) {
|
||||
e.preventDefault();
|
||||
@@ -3290,10 +3314,17 @@ function init() {
|
||||
if (document.location.hash != "" && document.location.hash.substring(0, 5) == "#tab-") {
|
||||
waitForElement(document.location.hash).then(function (el) {
|
||||
el.scrollIntoView();
|
||||
el.focus();
|
||||
el.dispatchEvent(click);
|
||||
});
|
||||
}
|
||||
});
|
||||
addEventListener("hashchange", function (evt) {
|
||||
document.querySelector(window.location.hash).dispatchEvent(click);
|
||||
|
||||
// window.location.hash
|
||||
// console.log(window.location.hash)
|
||||
});
|
||||
}
|
||||
|
||||
/***/ })
|
||||
@@ -3397,6 +3428,7 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(7);
|
||||
/* harmony import */ var _node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_node_modules_prismjs_components_prism_sass__WEBPACK_IMPORTED_MODULE_6__);
|
||||
/* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(8);
|
||||
/* harmony import */ var _pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_pg_patterns_core_sticky_note_sticky_note_js__WEBPACK_IMPORTED_MODULE_7__);
|
||||
/* 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_tabs_tabs_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10);
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -42,58 +42,7 @@
|
||||
div(tab="[tab title]")
|
||||
div(tab="[tab title]")
|
||||
</pre>
|
||||
<pre class="language-css" tab="css">tabset, .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
tabset > ul, .tab-group > ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
tabset > ul li.separator, .tab-group > ul li.separator {
|
||||
border-bottom: 1px solid #7f7f7f;
|
||||
border-left: 1px solid #7f7f7f;
|
||||
display: inline-block;
|
||||
margin: 0.45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
tabset .tab-hidden, .tab-group .tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
tabset [role=tab], .tab-group [role=tab] {
|
||||
background-color: #FFF;
|
||||
border-left: 1px solid #7f7f7f;
|
||||
border-top: 1px solid #7f7f7f;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem 0.14rem 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
|
||||
border-right: 1px solid #7f7f7f;
|
||||
}
|
||||
tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #7f7f7f;
|
||||
}
|
||||
tabset [role=tab] span, .tab-group [role=tab] span {
|
||||
display: block;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
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>
|
||||
<pre class="language-css" tab="css">@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}</pre>
|
||||
<div tab="scss">
|
||||
<pre class="language-sass">@import "scss/core/tabs/_tabs";
|
||||
@include tabs{
|
||||
@@ -103,18 +52,23 @@ tabset [role=tabpanel]:not(.open), .tab-group [role=tabpanel]:not(.open) {
|
||||
<pre class="language-sass">// DS2 core (c) 2024 Alexander McIlwraith
|
||||
// Licensed under CC BY-SA 4.0
|
||||
|
||||
|
||||
$tab-border: #7f7f7f !default;
|
||||
$tab-selected: #FFF !default;
|
||||
$tab-notselected: #f0f0f0 !default;
|
||||
$tab-break: 450px !default;
|
||||
|
||||
@mixin tabs {
|
||||
tabset, .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
@media (min-width: $tab-break) {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
> ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
li.separator {
|
||||
border-bottom: 1px solid $tab-border;
|
||||
border-left: 1px solid $tab-border;
|
||||
@@ -124,6 +78,8 @@ $tab-notselected: #f0f0f0 !default;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
@@ -161,12 +117,35 @@ $tab-notselected: #f0f0f0 !default;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
@media (min-width: $tab-break) {
|
||||
&[open] summary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $tab-break) {
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@content;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: $tab-break) {
|
||||
&:has(details) {
|
||||
[role="tablist"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[role="tabpanel"] {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
@@ -205,28 +184,53 @@ const waitForElement = (selector) => {
|
||||
});
|
||||
}
|
||||
|
||||
let tabsetCount = 0;
|
||||
|
||||
export function 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");
|
||||
let tablist = "";
|
||||
|
||||
Array.from(tabGroup.children).forEach(child => {
|
||||
const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
|
||||
// is details?
|
||||
let dtls = child.nodeName == "DETAILS" ? true : false;
|
||||
|
||||
// get the tab text
|
||||
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
|
||||
// if the tab text is not blank
|
||||
if (tab !== null) {
|
||||
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||
const tabPanel = document.createElement('div');
|
||||
|
||||
|
||||
// define the tab panel content
|
||||
let tabPanel = null;
|
||||
if (dtls) {
|
||||
tabPanel = child;
|
||||
tabPanel.setAttribute("open", "");
|
||||
} else {
|
||||
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}`);
|
||||
tabPanel.appendChild(child.cloneNode(true));
|
||||
child.parentNode.replaceChild(tabPanel, child);
|
||||
tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
|
||||
let cls = tablist === "" ? "class='selected'" : "";
|
||||
tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
|
||||
} else {
|
||||
child.classList.add("tab-hidden");
|
||||
}
|
||||
@@ -238,25 +242,32 @@ export function init(container = document, spacer = true, args = {}) {
|
||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
||||
|
||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||
tab.addEventListener("click", (e) => {
|
||||
if (e.altKey && typeof args.altModifier == "function") {
|
||||
args.altModifier(tab);
|
||||
} else if (e.shiftKey && typeof args.shiftModifier == "function") {
|
||||
args.shiftModifier(tab);
|
||||
} else if (e.metaKey && typeof args.metaModifier == "function") {
|
||||
args.metaModifier(tab);
|
||||
} else {
|
||||
const siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(sibling => sibling.classList.remove("selected"));
|
||||
tab.classList.add("selected");
|
||||
tab.addEventListener("click", (evt) => {
|
||||
// if (evt.altKey && typeof args.altModifier == "function") {
|
||||
// args.altModifier(tab, evt);
|
||||
// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
|
||||
// args.shiftModifier(tab, evt);
|
||||
// } else if (evt.metaKey && typeof args.metaModifier == "function") {
|
||||
// args.metaModifier(tab, evt);
|
||||
// } else {
|
||||
const siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(sibling => sibling.classList.remove("selected"));
|
||||
tab.classList.add("selected");
|
||||
|
||||
const tabPanels = Array.from(tab.parentNode.parentNode.children)
|
||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
||||
|
||||
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
}
|
||||
let urlPath = window.location;
|
||||
urlPath.hash = evt.currentTarget.getAttribute("id");
|
||||
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
|
||||
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
|
||||
|
||||
|
||||
const tabPanels = Array.from(tab.parentNode.parentNode.children)
|
||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
||||
|
||||
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
//}
|
||||
});
|
||||
|
||||
|
||||
@@ -272,13 +283,21 @@ export function init(container = document, spacer = true, args = {}) {
|
||||
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
|
||||
waitForElement(document.location.hash).then((el) => {
|
||||
el.scrollIntoView();
|
||||
el.focus();
|
||||
el.dispatchEvent(click);
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
</pre>
|
||||
|
||||
addEventListener("hashchange", (evt) => {
|
||||
document.querySelector(window.location.hash).dispatchEvent(click);
|
||||
|
||||
// window.location.hash
|
||||
// console.log(window.location.hash)
|
||||
})
|
||||
|
||||
|
||||
}</pre>
|
||||
</div>
|
||||
</tabset>
|
||||
</body>
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "../pg/patterns/core/breakpoint/breakpoint";
|
||||
|
||||
@mixin core-colour-samples {
|
||||
|
||||
#copystatus {
|
||||
@@ -36,14 +38,14 @@
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include break(-lg) {
|
||||
@include breakpoint.break(-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include break(-sm) {
|
||||
@include breakpoint.break(-sm) {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -67,7 +69,7 @@
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
|
||||
@include break(-lg) {
|
||||
@include breakpoint.break(-lg) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@@ -5,271 +5,18 @@
|
||||
This file is generates _core.scss using information in ../pg/_config.pug.
|
||||
Please make your changes in your _config.pug file so that they are not
|
||||
overwritten. \n*/\n\n\n`
|
||||
| !{out}
|
||||
|
||||
|
||||
include ../_config
|
||||
include _colour-samples
|
||||
include _core-colour-samples.scss
|
||||
|
||||
|
||||
-
|
||||
out +=`@mixin core-colour-samples {
|
||||
|
||||
#copystatus {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
div {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid green;
|
||||
left: -50%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
&.succeeded {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
color: black;
|
||||
}
|
||||
&.failed {
|
||||
background-color: white;
|
||||
border-color: #f00;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color-samples {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include break(-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include break(-sm) {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
color-sample {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #CCC;
|
||||
display: grid;
|
||||
font-family: inherit;
|
||||
gap: .5rem;
|
||||
grid-template-areas: "name name name hex hex hex"
|
||||
"name name name rgb rgb rgb"
|
||||
"acc acc acc acc acc acc"
|
||||
"lighter lighter lighter darker darker darker"
|
||||
"notes notes notes notes notes notes";
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
|
||||
@include break(-lg) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
name {
|
||||
align-self: start;
|
||||
font-size: 1.25rem;
|
||||
grid-area: name;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
rgb {
|
||||
grid-area: rgb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
hex {
|
||||
grid-area: hex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> accessibility {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
accessibility {
|
||||
grid-area: acc;
|
||||
grid-row: 3;
|
||||
padding: .5rem 0;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
display: grid;
|
||||
grid-tempate-columns: auto;
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
span {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .9rem;
|
||||
}
|
||||
small {
|
||||
text-align: center;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sample-block {
|
||||
align-self: start;
|
||||
grid-column: span 3;
|
||||
grid-row: 4;
|
||||
color-pill {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
grid-template-columns: 20px max-content auto;
|
||||
:nth-child(1) {
|
||||
align-self: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CCC;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
.tooltip-tc {
|
||||
padding: .5rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
height: max-contents;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span{ border: none;
|
||||
&:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
place-self: stretch;
|
||||
text-align: center;
|
||||
span {
|
||||
border: none;
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
small {
|
||||
font-size: .75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
notes {
|
||||
border-top: 1px solid #ccc;
|
||||
grid-column: 1 / -1;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}`
|
||||
|
||||
|
||||
|
||||
|
||||
- out += `\n\n//colour tokens\n$${colorpfx}: (`
|
||||
- out = `\n\n//colour tokens\n$${colorpfx}: (`
|
||||
|
||||
each val in generateColourToken
|
||||
- out += generateSCSS(eval(val), colorpfx)
|
||||
|
||||
|
||||
|
||||
|
||||
//- var scss = $colors
|
||||
| !{generateSCSS(eval(val), colorpfx)}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
// default breakpoints match bootstrap 5 breakpoints.
|
||||
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
|
||||
|
||||
@mixin breakpoint-debug {
|
||||
@mixin debug {
|
||||
body::before, body::after {
|
||||
background-color: #555;
|
||||
color: white;
|
||||
@@ -95,37 +95,39 @@ const calculateStickyPosition = (s) => {
|
||||
}
|
||||
}
|
||||
|
||||
export function init(p = document){
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
|
||||
p.querySelectorAll("sticky-note").forEach((s) => {
|
||||
if (s.querySelectorAll("svg").length == 0) {
|
||||
|
||||
let wrapper = document.createElement("sticky-note-wrapper");
|
||||
|
||||
s.parentNode.insertBefore(wrapper, s);
|
||||
wrapper.appendChild(s);
|
||||
|
||||
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
|
||||
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
|
||||
}
|
||||
calculateStickyPosition(s);
|
||||
drag(s);
|
||||
s.ondblclick = (e) => {
|
||||
if (e.ctrlKey) {
|
||||
calculateStickyPosition(s);
|
||||
} else {
|
||||
// add one click select
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.onresize = () => {
|
||||
module.exports = {
|
||||
init: (p = document) => {
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
let stickies = p.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
|
||||
p.querySelectorAll("sticky-note").forEach((s) => {
|
||||
if (s.querySelectorAll("svg").length == 0) {
|
||||
|
||||
let wrapper = document.createElement("sticky-note-wrapper");
|
||||
|
||||
s.parentNode.insertBefore(wrapper, s);
|
||||
wrapper.appendChild(s);
|
||||
|
||||
s.setAttribute("content", s.innerHTML.replace(/"/g, "\""));
|
||||
s.innerHTML = `<div><svg width='0' height='0'><defs><clipPath id='stickyClip' clipPathUnits='objectBoundingBox'><path d='M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0' stroke-linejoin='round' stroke-linecap='square' /></clipPath></defs></svg></div><div><div>${s.innerHTML}</div></div>`;
|
||||
}
|
||||
calculateStickyPosition(s);
|
||||
});
|
||||
drag(s);
|
||||
s.ondblclick = (e) => {
|
||||
if (e.ctrlKey) {
|
||||
calculateStickyPosition(s);
|
||||
} else {
|
||||
// add one click select
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
window.onresize = () => {
|
||||
font.size = parseFloat(getComputedStyle(document.documentElement).fontSize.replace("px",""));
|
||||
let stickies = p.querySelectorAll("sticky-note");
|
||||
stickies.forEach((s) => {
|
||||
calculateStickyPosition(s);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -30,28 +30,53 @@ const waitForElement = (selector) => {
|
||||
});
|
||||
}
|
||||
|
||||
let tabsetCount = 0;
|
||||
|
||||
export function 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");
|
||||
let tablist = "";
|
||||
|
||||
Array.from(tabGroup.children).forEach(child => {
|
||||
const tab = child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
|
||||
// is details?
|
||||
let dtls = child.nodeName == "DETAILS" ? true : false;
|
||||
|
||||
// get the tab text
|
||||
let tab = dtls ? child.querySelector("summary").innerHTML : child.getAttribute("tab") || child.getAttribute("data-tab");
|
||||
|
||||
// if the tab text is not blank
|
||||
if (tab !== null) {
|
||||
const tabID = tab.replace(/\W+/g, "-").toLowerCase();
|
||||
const tabPanel = document.createElement('div');
|
||||
|
||||
|
||||
// define the tab panel content
|
||||
let tabPanel = null;
|
||||
if (dtls) {
|
||||
tabPanel = child;
|
||||
tabPanel.setAttribute("open", "");
|
||||
} else {
|
||||
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}`);
|
||||
tabPanel.appendChild(child.cloneNode(true));
|
||||
child.parentNode.replaceChild(tabPanel, child);
|
||||
tablist += `<li tabindex="0" role="tab" ${tablist === "" ? "class='selected'" : ""} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
|
||||
let cls = tablist === "" ? "class='selected'" : "";
|
||||
tablist += `<li tabindex="0" role="tab" ${cls} id="tab-${tabgroup}-${tabID}"><span>${tab}</span></li>`;
|
||||
} else {
|
||||
child.classList.add("tab-hidden");
|
||||
}
|
||||
@@ -63,25 +88,32 @@ export function init(container = document, spacer = true, args = {}) {
|
||||
tabGroup.insertBefore(ul, tabGroup.firstChild);
|
||||
|
||||
tabGroup.querySelectorAll('[role="tab"]').forEach(tab => {
|
||||
tab.addEventListener("click", (e) => {
|
||||
if (e.altKey && typeof args.altModifier == "function") {
|
||||
args.altModifier(tab);
|
||||
} else if (e.shiftKey && typeof args.shiftModifier == "function") {
|
||||
args.shiftModifier(tab);
|
||||
} else if (e.metaKey && typeof args.metaModifier == "function") {
|
||||
args.metaModifier(tab);
|
||||
} else {
|
||||
const siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(sibling => sibling.classList.remove("selected"));
|
||||
tab.classList.add("selected");
|
||||
tab.addEventListener("click", (evt) => {
|
||||
// if (evt.altKey && typeof args.altModifier == "function") {
|
||||
// args.altModifier(tab, evt);
|
||||
// } else if (evt.shiftKey && typeof args.shiftModifier == "function") {
|
||||
// args.shiftModifier(tab, evt);
|
||||
// } else if (evt.metaKey && typeof args.metaModifier == "function") {
|
||||
// args.metaModifier(tab, evt);
|
||||
// } else {
|
||||
const siblings = Array.from(tab.parentNode.children);
|
||||
siblings.forEach(sibling => sibling.classList.remove("selected"));
|
||||
tab.classList.add("selected");
|
||||
|
||||
const tabPanels = Array.from(tab.parentNode.parentNode.children)
|
||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
||||
|
||||
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
}
|
||||
let urlPath = window.location;
|
||||
urlPath.hash = evt.currentTarget.getAttribute("id");
|
||||
window.history.pushState({"pageTitle": window.title + " : " + evt.currentTarget.innerHTML},"", urlPath.toString());
|
||||
// window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
|
||||
|
||||
|
||||
const tabPanels = Array.from(tab.parentNode.parentNode.children)
|
||||
.filter(child => child.getAttribute("role") === "tabpanel");
|
||||
tabPanels.forEach(panel => panel.classList.remove("open"));
|
||||
|
||||
const tabPanelId = tab.getAttribute("id").replace("tab", "tab-panel");
|
||||
document.getElementById(tabPanelId).classList.add("open");
|
||||
//}
|
||||
});
|
||||
|
||||
|
||||
@@ -97,9 +129,18 @@ export function init(container = document, spacer = true, args = {}) {
|
||||
if (document.location.hash != "" && document.location.hash.substring(0,5) == "#tab-") {
|
||||
waitForElement(document.location.hash).then((el) => {
|
||||
el.scrollIntoView();
|
||||
el.focus();
|
||||
el.dispatchEvent(click);
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addEventListener("hashchange", (evt) => {
|
||||
document.querySelector(window.location.hash).dispatchEvent(click);
|
||||
|
||||
// window.location.hash
|
||||
// console.log(window.location.hash)
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
@@ -1,69 +1,99 @@
|
||||
// DS2 core (c) 2024 Alexander McIlwraith
|
||||
// Licensed under CC BY-SA 4.0
|
||||
|
||||
$tab-border: #7f7f7f !default;
|
||||
$tab-selected: #FFF !default;
|
||||
$tab-notselected: #f0f0f0 !default;
|
||||
|
||||
@mixin tabs {
|
||||
tabset, .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
> ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li.separator {
|
||||
border-bottom: 1px solid $tab-border;
|
||||
border-left: 1px solid $tab-border;
|
||||
display: inline-block;
|
||||
margin: .45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[role="tab"] {
|
||||
background-color: $tab-selected;
|
||||
border-left: 1px solid $tab-border;
|
||||
border-top: 1px solid $tab-border;
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
cursor:pointer;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem .14rem 1.5rem;
|
||||
z-index: 2;
|
||||
|
||||
&:last-of-type {
|
||||
border-right: 1px solid $tab-border;
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
background-color: $tab-notselected;
|
||||
border-bottom: 1px solid $tab-border;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
}
|
||||
[role="tabpanel"] {
|
||||
background-color: $tab-selected;
|
||||
border: 1px solid $tab-border;
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
@content;
|
||||
|
||||
}
|
||||
}
|
||||
// DS2 core (c) 2024 Alexander McIlwraith
|
||||
// Licensed under CC BY-SA 4.0
|
||||
|
||||
|
||||
$tab-border: #7f7f7f !default;
|
||||
$tab-selected: #FFF !default;
|
||||
$tab-notselected: #f0f0f0 !default;
|
||||
$tab-break: 450px !default;
|
||||
|
||||
@mixin tabs {
|
||||
tabset, .tab-group {
|
||||
@media (min-width: $tab-break) {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
> ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
|
||||
li.separator {
|
||||
border-bottom: 1px solid $tab-border;
|
||||
border-left: 1px solid $tab-border;
|
||||
display: inline-block;
|
||||
margin: .45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[role="tab"] {
|
||||
background-color: $tab-selected;
|
||||
border-left: 1px solid $tab-border;
|
||||
border-top: 1px solid $tab-border;
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
cursor:pointer;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem .14rem 1.5rem;
|
||||
z-index: 2;
|
||||
|
||||
&:last-of-type {
|
||||
border-right: 1px solid $tab-border;
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
background-color: $tab-notselected;
|
||||
border-bottom: 1px solid $tab-border;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
}
|
||||
[role="tabpanel"] {
|
||||
background-color: $tab-selected;
|
||||
border: 1px solid $tab-border;
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
@media (min-width: $tab-break) {
|
||||
&[open] summary {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $tab-break) {
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@content;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: $tab-break) {
|
||||
&:has(details) {
|
||||
[role="tablist"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[role="tabpanel"] {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,52 +1 @@
|
||||
tabset, .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
tabset > ul, .tab-group > ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
tabset > ul li.separator, .tab-group > ul li.separator {
|
||||
border-bottom: 1px solid #7f7f7f;
|
||||
border-left: 1px solid #7f7f7f;
|
||||
display: inline-block;
|
||||
margin: 0.45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
tabset .tab-hidden, .tab-group .tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
tabset [role=tab], .tab-group [role=tab] {
|
||||
background-color: #FFF;
|
||||
border-left: 1px solid #7f7f7f;
|
||||
border-top: 1px solid #7f7f7f;
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem 0.14rem 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
tabset [role=tab]:last-of-type, .tab-group [role=tab]:last-of-type {
|
||||
border-right: 1px solid #7f7f7f;
|
||||
}
|
||||
tabset [role=tab]:not(.selected), .tab-group [role=tab]:not(.selected) {
|
||||
background-color: #f0f0f0;
|
||||
border-bottom: 1px solid #7f7f7f;
|
||||
}
|
||||
tabset [role=tab] span, .tab-group [role=tab] span {
|
||||
display: block;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
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;
|
||||
}
|
||||
@media (min-width:450px){.tab-group,tabset{margin:2rem 0 1rem 0}}.tab-group>ul,tabset>ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin:0;padding:0}.tab-group>ul li.separator,tabset>ul li.separator{border-bottom:1px solid #7f7f7f;border-left:1px solid #7f7f7f;display:inline-block;margin:0.45rem 0 0 0;width:100%}.tab-group .tab-hidden,tabset .tab-hidden{display:none}.tab-group [role=tab],tabset [role=tab]{background-color:#FFF;border-left:1px solid #7f7f7f;border-top:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;cursor:pointer;margin:0;display:inline;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=tab]:last-of-type,tabset [role=tab]:last-of-type{border-right:1px solid #7f7f7f}.tab-group [role=tab]:not(.selected),tabset [role=tab]:not(.selected){background-color:#f0f0f0;border-bottom:1px solid #7f7f7f}.tab-group [role=tab] span,tabset [role=tab] span{display:block;margin:0 0 0.5rem 0}.tab-group [role=tabpanel],tabset [role=tabpanel]{background-color:#FFF;border:1px solid #7f7f7f;border-top:none;padding:1rem;z-index:1}@media (min-width:450px){.tab-group [role=tabpanel][open] summary,tabset [role=tabpanel][open] summary{display:none}}@media (min-width:450px){.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}}@media (max-width:450px){.tab-group:has(details) [role=tablist],tabset:has(details) [role=tablist]{display:none}.tab-group:has(details) [role=tabpanel],tabset:has(details) [role=tabpanel]{border:none}}
|
||||
@@ -10,6 +10,8 @@
|
||||
*/
|
||||
|
||||
|
||||
@use "../pg/patterns/core/breakpoint/breakpoint";
|
||||
|
||||
@mixin core-colour-samples {
|
||||
|
||||
#copystatus {
|
||||
@@ -48,14 +50,14 @@
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
@include break(-lg) {
|
||||
@include breakpoint.break(-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include break(-sm) {
|
||||
@include breakpoint.break(-sm) {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
@@ -74,12 +76,12 @@
|
||||
"lighter lighter lighter darker darker darker"
|
||||
"notes notes notes notes notes notes";
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1.5rem) repeat(4, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
|
||||
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
|
||||
@include break(-lg) {
|
||||
@include breakpoint.break(-lg) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
@@ -114,7 +116,7 @@
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
grid-template-rows: 2.5rem repeat(2, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
@@ -187,7 +189,7 @@
|
||||
padding: .5rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
height: max-contents;
|
||||
height: 10.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
@@ -230,7 +232,6 @@
|
||||
display: block;
|
||||
width: 100%;
|
||||
place-self: stretch;
|
||||
text-align: center;
|
||||
span {
|
||||
border: none;
|
||||
font-size: .9rem;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
/*
|
||||
/* ----------------------------------------------------------
|
||||
* Variables
|
||||
*/
|
||||
|
||||
@@ -15,15 +15,26 @@ $tooltip-dark-allow: false;
|
||||
// We recommend explicitly using the underscore when referring to pattern scss
|
||||
// as you may have also created a version that compiles to css to display in
|
||||
// your pattern.
|
||||
@import "core";
|
||||
@use "core";
|
||||
@use "../../node_modules/prismjs/themes/prism";
|
||||
@use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
||||
@use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
||||
|
||||
@use "../pg/patterns/core/sticky-note/_sticky-note";
|
||||
@use "../pg/patterns/core/switch/_switch";
|
||||
@use "../pg/patterns/core/tooltip/_tooltip";
|
||||
@use "../pg/patterns/core/breakpoint/_breakpoint";
|
||||
@use "../pg/patterns/core/header/_header";
|
||||
@use "../pg/patterns/core/tabs/_tabs";
|
||||
@use "../pg/patterns/core/status/_status";
|
||||
|
||||
|
||||
@include core.core-colour-samples;
|
||||
@include tooltip.tooltip;
|
||||
@include sticky-note.sticky-note;
|
||||
@include status.status;
|
||||
|
||||
|
||||
@import "../pg/patterns/core/sticky-note/_sticky-note";
|
||||
@import "../pg/patterns/core/switch/_switch";
|
||||
@import "../pg/patterns/core/tooltip/_tooltip";
|
||||
@import "../pg/patterns/core/breakpoints/_breakpoints";
|
||||
@import "../pg/patterns/core/header/_header";
|
||||
@import "../pg/patterns/core/tabs/_tabs";
|
||||
@import "../pg/patterns/core/status/_status";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
@@ -32,19 +43,15 @@ $tooltip-dark-allow: false;
|
||||
html {
|
||||
font-family: $font-body;
|
||||
font-size: $font-size;
|
||||
@include break(-md) {
|
||||
@include breakpoint.break(-md) {
|
||||
font-size: calc($font-size + 2pt);
|
||||
}
|
||||
&.show-breakpoints {
|
||||
@include breakpoint-debug;
|
||||
@include breakpoint.debug;
|
||||
}
|
||||
}
|
||||
|
||||
@include core-colour-samples;
|
||||
|
||||
@include tooltip;
|
||||
@include sticky-note;
|
||||
@include status;
|
||||
|
||||
article[data-status=deprecated]:not(.show-deprecated) {
|
||||
display: none;
|
||||
@@ -65,7 +72,7 @@ body {
|
||||
margin: 0 auto;
|
||||
width: 100vw;
|
||||
|
||||
@include header;
|
||||
@include header.header;
|
||||
|
||||
nav {
|
||||
background-color: var(--colour-blue);
|
||||
@@ -84,7 +91,7 @@ body {
|
||||
color: var(--colour-white);
|
||||
text-decoration: none;
|
||||
}
|
||||
@include break(md-) {
|
||||
@include breakpoint.break(md-) {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
@@ -98,7 +105,7 @@ body {
|
||||
grid-row: 3;
|
||||
grid-template-columns: auto repeat(2, max-content);
|
||||
text-align: right;
|
||||
@include switch;
|
||||
@include switch.switch;
|
||||
label {
|
||||
text-align: left;;
|
||||
}
|
||||
@@ -109,7 +116,7 @@ body {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 4;
|
||||
|
||||
@include break(-md) {
|
||||
@include breakpoint.break(-md) {
|
||||
grid-row: 3;
|
||||
padding: 0;
|
||||
}
|
||||
@@ -117,7 +124,7 @@ body {
|
||||
@supports(grid-area: auto) {
|
||||
display: grid;
|
||||
grid-template-columns: 1rem repeat(2, auto) 1rem;
|
||||
@include break(md-) {
|
||||
@include breakpoint.break(md-) {
|
||||
grid-template-columns: auto repeat(2, 22rem) auto;
|
||||
}
|
||||
}
|
||||
@@ -135,7 +142,7 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@include tabs {
|
||||
@include tabs.tabs {
|
||||
pre {
|
||||
background-color: var(--colour-black-5);
|
||||
font-size: .8rem;
|
||||
@@ -150,15 +157,12 @@ body {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
grid-template-columns: max-content auto;
|
||||
@include switch;
|
||||
@include switch.switch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// keep your prism modules
|
||||
@import "../../node_modules/prismjs/themes/prism";
|
||||
@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
||||
@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user