Update core.scss.pug (and associated files)
This commit is contained in:
parent
c6e7b616f1
commit
a204f7fc98
File diff suppressed because one or more lines are too long
@ -5,271 +5,18 @@
|
|||||||
This file is generates _core.scss using information in ../pg/_config.pug.
|
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
|
Please make your changes in your _config.pug file so that they are not
|
||||||
overwritten. \n*/\n\n\n`
|
overwritten. \n*/\n\n\n`
|
||||||
|
| !{out}
|
||||||
|
|
||||||
|
|
||||||
include ../_config
|
include ../_config
|
||||||
include _colour-samples
|
include _colour-samples
|
||||||
|
include _core-colour-samples.scss
|
||||||
|
|
||||||
|
- out = `\n\n//colour tokens\n$${colorpfx}: (`
|
||||||
-
|
|
||||||
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}: (`
|
|
||||||
|
|
||||||
each val in generateColourToken
|
each val in generateColourToken
|
||||||
- out += generateSCSS(eval(val), colorpfx)
|
- out += generateSCSS(eval(val), colorpfx)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//- var scss = $colors
|
//- var scss = $colors
|
||||||
| !{generateSCSS(eval(val), colorpfx)}
|
| !{generateSCSS(eval(val), colorpfx)}
|
||||||
|
|
||||||
|
|||||||
@ -74,7 +74,7 @@
|
|||||||
"lighter lighter lighter darker darker darker"
|
"lighter lighter lighter darker darker darker"
|
||||||
"notes notes notes notes notes notes";
|
"notes notes notes notes notes notes";
|
||||||
grid-template-columns: repeat(6, 1fr);
|
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;
|
padding: 1rem;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
max-width: 318px;
|
max-width: 318px;
|
||||||
@ -114,7 +114,7 @@
|
|||||||
display: grid;
|
display: grid;
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
grid-template-rows: repeat(3, max-content);
|
grid-template-rows: 2.5rem repeat(2, max-content);
|
||||||
.result {
|
.result {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
@ -187,7 +187,7 @@
|
|||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
width: 20rem;
|
width: 20rem;
|
||||||
max-width: 318px;
|
max-width: 318px;
|
||||||
height: max-content;
|
height: 10.5rem;
|
||||||
|
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
@ -230,7 +230,6 @@
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
place-self: stretch;
|
place-self: stretch;
|
||||||
text-align: center;
|
|
||||||
span {
|
span {
|
||||||
border: none;
|
border: none;
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user