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

Fix spacing

Browse Source
This commit is contained in:
A McIlwraith
2025-08-03 18:31:00 -04:00
parent 7bcb45d9bc
commit f78b0a4c63
9 changed files with 39 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
prepros.config
View File

@@ -354,17 +354,6 @@
"keep_fnames": false, "keep_fnames": false,
"safari10": false "safari10": false
}, },
"node-sass": {
"indentType": "space",
"allowWildcardImports": false,
"indentWidth": 2,
"linefeed": "lf",
"outputStyle": "expanded",
"precision": 10,
"sourceMap": false,
"removeCharset": false,
"sourceComments": false
},
"png": { "png": {
"quality": 90 "quality": 90
}, },
@@ -442,6 +431,17 @@
"turf": { "turf": {
"rootDir": "" "rootDir": ""
}, },
"node-sass": {
"indentType": "space",
"allowWildcardImports": false,
"indentWidth": 2,
"linefeed": "lf",
"outputStyle": "expanded",
"precision": 10,
"sourceMap": false,
"removeCharset": false,
"sourceComments": false
},
"typescript": { "typescript": {
"allowJs": false, "allowJs": false,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
@@ -1372,6 +1372,12 @@
} }
} }
}, },
{
"file": "src/pg/patterns/core/header/_header.pp",
"config": {
"autoCompile": true
}
},
{ {
"file": "src/pg/patterns/core/sticky-note/_sticky-note.pp", "file": "src/pg/patterns/core/sticky-note/_sticky-note.pp",
"config": { "config": {

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

2
public/index.html
View File

@@ -19,7 +19,7 @@
<div class="container"> <div class="container">
<header> <header>
<!-- The headline banner area --> <!-- The headline banner area -->
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg style="height: 5.5rem; width: 100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<text>DS2 core</text> <text>DS2 core</text>
</svg> </svg>
<div> <div>

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

@@ -22,7 +22,7 @@
<!-- create temp variables and store the design system values--> <!-- create temp variables and store the design system values-->
<header> <header>
<!-- The headline banner area --> <!-- The headline banner area -->
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <svg style="height: 5.5rem; width: 100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<text>[site name]</text> <text>[site name]</text>
</svg> </svg>
<div> <div>
@@ -41,7 +41,7 @@
header header
// The headline banner area // The headline banner area
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true') svg(style="height: 5.5rem; width: 100%" xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site text= site
div div
div.header-title div.header-title

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

@@ -42,7 +42,7 @@
div(tab="[tab title]") div(tab="[tab title]")
div(tab="[tab title]") div(tab="[tab title]")
</pre> </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> <pre class="language-css" tab="css">.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{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-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=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}.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-top:none;border:1px solid #7f7f7f;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}</pre>
<div tab="scss"> <div tab="scss">
<pre class="language-sass">@use "scss/core/tabs/_tabs"; <pre class="language-sass">@use "scss/core/tabs/_tabs";
@include tabs{ @include tabs{
@@ -52,17 +52,18 @@
<pre class="language-sass">// DS2 core (c) 2024 Alexander McIlwraith <pre class="language-sass">// DS2 core (c) 2024 Alexander McIlwraith
// Licensed under CC BY-SA 4.0 // Licensed under CC BY-SA 4.0
$tab-border: #7f7f7f !default; $tab-border: #7f7f7f !default;
$tab-panel-background-color: #FFF !default;
$tab-panel-top-border: #7f7f7f !default;
$tab-panel-top-border-width: 1px !default;
$tab-selected: #FFF !default; $tab-selected: #FFF !default;
$tab-selected-text: #000 !default;
$tab-notselected: #f0f0f0 !default; $tab-notselected: #f0f0f0 !default;
$tab-break: 450px !default; $tab-notselected-text: #000 !default;
@mixin tabs { @mixin tabs {
tabset, .tab-group { tabset, .tab-group {
@media (min-width: $tab-break) { margin: 2rem 0 1rem 0;
margin: 2rem 0 1rem 0;
}
> ul { > ul {
display: flex; display: flex;
margin: 0; margin: 0;
@@ -70,8 +71,6 @@ $tab-break: 450px !default;
li.separator { li.separator {
border-bottom: 1px solid $tab-border;
border-left: 1px solid $tab-border;
display: inline-block; display: inline-block;
margin: .45rem 0 0 0; margin: .45rem 0 0 0;
width: 100%; width: 100%;
@@ -87,11 +86,12 @@ $tab-break: 450px !default;
[role="tab"] { [role="tab"] {
background-color: $tab-selected; background-color: $tab-selected;
border-left: 1px solid $tab-border; border-left: 1px solid $tab-border;
border-top: 1px solid $tab-border; border-right: 1px solid $tab-border;
border-radius: .5rem .5rem 0 0; border-radius: .5rem .5rem 0 0;
border-top: 1px solid $tab-border;
cursor:pointer; cursor:pointer;
margin: 0;
display: inline; display: inline;
margin: 0;
padding: 1rem 1.5rem .14rem 1.5rem; padding: 1rem 1.5rem .14rem 1.5rem;
z-index: 2; z-index: 2;
@@ -101,7 +101,7 @@ $tab-break: 450px !default;
&:not(.selected) { &:not(.selected) {
background-color: $tab-notselected; background-color: $tab-notselected;
border-bottom: 1px solid $tab-border; /// color
} }
span { span {
@@ -112,39 +112,18 @@ $tab-break: 450px !default;
} }
[role="tabpanel"] { [role="tabpanel"] {
background-color: $tab-selected; background-color: $tab-selected;
border: 1px solid $tab-border;
border-top: none; border-top: none;
border: 1px solid $tab-border;
padding: 1rem; padding: 1rem;
z-index: 1; z-index: 1;
@media (min-width: $tab-break) { &:not(.open) {
&[open] summary { display: none;
display: none;
}
}
@media (min-width: $tab-break) {
&:not(.open) {
display: none;
}
} }
@content; @content;
} }
@media (max-width: $tab-break) {
&:has(details) {
[role="tablist"] {
display: none;
}
[role="tabpanel"] {
border: none;
}
}
}
} }
}</pre> }</pre>

2
src/pg/patterns/core/header/_header.pp
View File

@@ -7,7 +7,7 @@
header header
// The headline banner area // The headline banner area
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true') svg(style="height: 5.5rem; width: 100%" xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site text= site
div div
div.header-title div.header-title

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

@@ -7,7 +7,7 @@
header header
// The headline banner area // The headline banner area
svg(height='5.5rem' width='100%' xmlns='http://www.w3.org/2000/svg' aria-hidden='true') svg(style="height: 5.5rem; width: 100%" xmlns='http://www.w3.org/2000/svg' aria-hidden='true')
text= site text= site
div div
div.header-title div.header-title

2
src/pg/patterns/core/tabs/_tabs.scss
View File

@@ -15,7 +15,7 @@ $tab-notselected-text: #000 !default;
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;
> ul { > ul {
display: flex; display: flex;
margin: 0 0 1rem 0; margin: 0;
padding: 0; padding: 0;

2
src/pg/patterns/core/tabs/tabs.css
View File

@@ -1 +1 @@
@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}} .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{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-right:1px solid #7f7f7f;border-radius:0.5rem 0.5rem 0 0;border-top:1px solid #7f7f7f;cursor:pointer;display:inline;margin:0;padding:1rem 1.5rem 0.14rem 1.5rem;z-index:2}.tab-group [role=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}.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-top:none;border:1px solid #7f7f7f;padding:1rem;z-index:1}.tab-group [role=tabpanel]:not(.open),tabset [role=tabpanel]:not(.open){display:none}