gamv/ds2-core
1
0
Fork 0
Code Issues 12 Releases 8 Activity

Update core.scss.pug (and associated files)

Browse Source
This commit is contained in:
A McIlwraith 2025-02-04 10:30:15 -05:00
parent c6e7b616f1
commit a204f7fc98
3 changed files with 8 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/scaffolding.css
View File

File diff suppressed because one or more lines are too long

261
src/pg/core/core.scss.pug
View File

@ -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)}

7
src/scss/_core.scss
View File

@ -74,7 +74,7 @@
"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;
@ -114,7 +114,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 +187,7 @@
padding: .5rem;
width: 20rem;
max-width: 318px;
height: max-content;
height: 10.5rem;
display: grid;
gap: .5rem;
@ -230,7 +230,6 @@
display: block;
width: 100%;
place-self: stretch;
text-align: center;
span {
border: none;
font-size: .9rem;