Initial Commit
This commit is contained in:
BIN
public/.DS_Store
vendored
Normal file
BIN
public/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
public/assets/.DS_Store
vendored
Normal file
BIN
public/assets/.DS_Store
vendored
Normal file
Binary file not shown.
2
public/assets/jquery-min.js
vendored
Normal file
2
public/assets/jquery-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
public/assets/scaffolding-min.js
vendored
Normal file
1
public/assets/scaffolding-min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
921
public/assets/scaffolding.css
Normal file
921
public/assets/scaffolding.css
Normal file
@@ -0,0 +1,921 @@
|
||||
/*
|
||||
* colours
|
||||
*/
|
||||
:root {
|
||||
--color-blue: #2e51a1;
|
||||
--color-blue-l: #5c7abf;
|
||||
--color-blue-xl: #b2c3ec;
|
||||
--color-blue-d: #133176;
|
||||
--color-blue-xd: #031235;
|
||||
--color-grey: #7f7f7f;
|
||||
--color-grey-l: #b2b2b2;
|
||||
--color-grey-xl: #d8d8d8;
|
||||
--color-grey-xxl: #f0f0f0;
|
||||
--color-grey-d: #4c4c4c;
|
||||
--color-grey-xd: #4c4c4c;
|
||||
}
|
||||
|
||||
/*
|
||||
* Fonts
|
||||
*/
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#copystatus {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
}
|
||||
#copystatus div {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid green;
|
||||
left: -50%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#copystatus div::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
#copystatus div.succeeded {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
color: black;
|
||||
}
|
||||
#copystatus div.failed {
|
||||
background-color: white;
|
||||
border-color: #f00;
|
||||
color: #f00;
|
||||
}
|
||||
|
||||
color-samples {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
color-samples {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 576px) {
|
||||
color-samples {
|
||||
-ms-grid-columns: auto;
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
color-samples color-sample {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #CCC;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
font-family: inherit;
|
||||
gap: 0.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";
|
||||
-ms-grid-columns: 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr 0.5rem 1fr;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
-ms-grid-rows: 1.5rem 0.5rem 1.5rem 0.5rem 10rem 0.5rem max-content 0.5rem max-content 0.5rem max-content;
|
||||
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, -webkit-max-content);
|
||||
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content);
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
color-samples color-sample {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
color-samples color-sample name {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-row-span: 3;
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 5;
|
||||
-ms-grid-row-align: start;
|
||||
align-self: start;
|
||||
font-size: 1.25rem;
|
||||
grid-area: name;
|
||||
}
|
||||
color-samples color-sample name span {
|
||||
cursor: pointer;
|
||||
}
|
||||
color-samples color-sample rgb {
|
||||
-ms-grid-row: 3;
|
||||
-ms-grid-column: 7;
|
||||
-ms-grid-column-span: 5;
|
||||
grid-area: rgb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
color-samples color-sample hex {
|
||||
-ms-grid-row: 1;
|
||||
-ms-grid-column: 7;
|
||||
-ms-grid-column-span: 5;
|
||||
grid-area: hex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
color-samples color-sample > accessibility {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
color-samples color-sample accessibility {
|
||||
-ms-grid-row: 5;
|
||||
-ms-grid-column: 1;
|
||||
-ms-grid-column-span: 11;
|
||||
grid-area: acc;
|
||||
-ms-grid-row: 3;
|
||||
grid-row: 3;
|
||||
padding: 0.5rem 0;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
-ms-grid-rows: 2.5rem (-webkit-max-content)[2];
|
||||
-ms-grid-rows: 2.5rem (max-content)[2];
|
||||
grid-template-rows: 2.5rem repeat(2, -webkit-max-content);
|
||||
grid-template-rows: 2.5rem repeat(2, max-content);
|
||||
}
|
||||
color-samples color-sample accessibility .result {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
color-samples color-sample accessibility .result.accwaa, color-samples color-sample accessibility .result.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
color-samples color-sample accessibility .result.accbaa, color-samples color-sample accessibility .result.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
color-samples color-sample accessibility .result span:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
color-samples color-sample accessibility .aa, color-samples color-sample accessibility .aaa {
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
color-samples color-sample accessibility .acchb {
|
||||
-ms-grid-column: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
color-samples color-sample accessibility .acchb, color-samples color-sample accessibility .acchw {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-tempate-columns: auto;
|
||||
-ms-grid-rows: (-webkit-max-content)[2];
|
||||
-ms-grid-rows: (max-content)[2];
|
||||
grid-template-rows: repeat(2, -webkit-max-content);
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
-ms-grid-row-align: start;
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
color-samples color-sample accessibility .acchb span, color-samples color-sample accessibility .acchw span {
|
||||
-ms-grid-row: 1;
|
||||
grid-row: 1;
|
||||
grid-column: 1/-1;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
color-samples color-sample accessibility .acchb small, color-samples color-sample accessibility .acchw small {
|
||||
text-align: center;
|
||||
-ms-grid-row: 2;
|
||||
grid-row: 2;
|
||||
grid-column: 1/-1;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
color-samples color-sample sample-block {
|
||||
-ms-grid-row-align: start;
|
||||
align-self: start;
|
||||
-ms-grid-column-span: 3;
|
||||
grid-column: span 3;
|
||||
-ms-grid-row: 4;
|
||||
grid-row: 4;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
-ms-grid-columns: 20px -webkit-max-content auto;
|
||||
-ms-grid-columns: 20px max-content auto;
|
||||
grid-template-columns: 20px -webkit-max-content auto;
|
||||
grid-template-columns: 20px max-content auto;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill :nth-child(1) {
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CCC;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span {
|
||||
cursor: pointer;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc {
|
||||
padding: 0.5rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
height: 10.5rem;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
-ms-grid-columns: (1fr)[3];
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
-ms-grid-rows: (-webkit-max-content)[3];
|
||||
-ms-grid-rows: (max-content)[3];
|
||||
grid-template-rows: repeat(3, -webkit-max-content);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .result {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
border-radius: 0.5rem;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaa, color-samples color-sample sample-block color-pill span .tooltip-tc .result.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaa, color-samples color-sample sample-block color-pill span .tooltip-tc .result.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .result span {
|
||||
border: none;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .result span:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .aa, color-samples color-sample sample-block color-pill span .tooltip-tc .aaa {
|
||||
-ms-flex-item-align: center;
|
||||
-ms-grid-row-align: center;
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .acchb {
|
||||
-ms-grid-column: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .acchb, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw {
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
-ms-grid-row-align: stretch;
|
||||
-ms-grid-column-align: stretch;
|
||||
place-self: stretch;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span {
|
||||
border: none;
|
||||
font-size: 0.9rem;
|
||||
width: 100%;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span::after, color-samples color-sample sample-block color-pill span .tooltip-tc .acchb span::before, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span::after, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw span::before {
|
||||
display: none;
|
||||
}
|
||||
color-samples color-sample sample-block color-pill span .tooltip-tc .acchb small, color-samples color-sample sample-block color-pill span .tooltip-tc .acchw small {
|
||||
font-size: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
color-samples color-sample notes {
|
||||
border-top: 1px solid #ccc;
|
||||
grid-column: 1/-1;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
div.status-report p.heading, div.status-report td[colspan="2"] {
|
||||
font-size: 1.125rem;
|
||||
font-weight: bolder !important;
|
||||
grid-column: 1/-1;
|
||||
margin: 2rem 0 0.5rem 0;
|
||||
padding-top: 1.5rem !important;
|
||||
}
|
||||
div.status-report td:not([colspan="2"]) span {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: auto 1rem;
|
||||
grid-template-columns: auto 1rem;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
div.status-report td:not([colspan="2"]) span span[class^=status]::after {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
div.status-report .contain {
|
||||
max-width: 100%;
|
||||
width: 30rem;
|
||||
}
|
||||
div.status-report .contain ul {
|
||||
margin: 0 0 1rem 0;
|
||||
padding: 0;
|
||||
}
|
||||
div.status-report .contain ul li {
|
||||
list-style-type: none;
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
div.status-report .contain ul li ul {
|
||||
padding: 0.5rem 0 0 1rem;
|
||||
}
|
||||
div.status-report .contain ul li > span {
|
||||
float: right;
|
||||
margin: 0 1rem 0 0;
|
||||
width: 8rem;
|
||||
}
|
||||
div.status-report .contain ul li > span span[class^=status]::after {
|
||||
height: 1rem !important;
|
||||
width: 1rem !important;
|
||||
float: right;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 14pt;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 16pt;
|
||||
}
|
||||
}
|
||||
|
||||
h1[class^=status]::after, h2[class^=status]::after, span[class^=status]::after {
|
||||
border-radius: 50%;
|
||||
border: 1px solid #CCC;
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.status-not-started::after {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.status-in-progress::after {
|
||||
background-color: var(--color-blue-l);
|
||||
}
|
||||
|
||||
.status-complete::after {
|
||||
background-color: var(--color-blue);
|
||||
}
|
||||
|
||||
.status-needs-review::after {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.status-deprecated::after {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body a.skip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
}
|
||||
body .container {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: auto (22rem)[2] auto;
|
||||
grid-template-columns: auto repeat(2, 22rem) auto;
|
||||
margin: 0 auto;
|
||||
width: 100vw;
|
||||
}
|
||||
body .container header {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-rows: 1.75rem 3.5rem;
|
||||
grid-template-rows: 1.75rem 3.5rem;
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
overflow: hidden;
|
||||
}
|
||||
body .container header svg {
|
||||
grid-column: 1/-1;
|
||||
grid-row: 1/-1;
|
||||
-ms-grid-row-align: stretch;
|
||||
-ms-grid-column-align: stretch;
|
||||
place-self: stretch;
|
||||
}
|
||||
body .container header svg text {
|
||||
-webkit-transform: translate(-1rem, 7.25rem);
|
||||
-ms-transform: translate(-1rem, 7.25rem);
|
||||
transform: translate(-1rem, 7.25rem);
|
||||
font-size: 10rem;
|
||||
font-weight: 1000;
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
fill: var(--color-grey-xl);
|
||||
}
|
||||
body .container header > div {
|
||||
-ms-grid-row: 2;
|
||||
grid-row: 2;
|
||||
grid-column: 1/-1;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-column-gap: 1rem;
|
||||
-ms-grid-columns: auto -webkit-max-content -webkit-max-content;
|
||||
-ms-grid-columns: auto max-content max-content;
|
||||
grid-template-columns: auto -webkit-max-content -webkit-max-content;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
}
|
||||
body .container header > div .header-title h1 {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
body .container header > div .header-title h1 a, body .container header > div .header-title h1 a:visited {
|
||||
border-bottom: none;
|
||||
color: var(--colour-black);
|
||||
font-family: Helvetica, Arial, sans-serif;
|
||||
font-size: 2.5rem;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
body .container nav {
|
||||
background-color: var(--color-blue);
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
display: none;
|
||||
}
|
||||
body .container nav ul {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
body .container nav ul li {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
body .container nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
body .container nav {
|
||||
display: initial;
|
||||
}
|
||||
}
|
||||
body .container main {
|
||||
-ms-grid-row: 4;
|
||||
grid-row: 4;
|
||||
display: block;
|
||||
padding: 0 1rem;
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
body .container main {
|
||||
-ms-grid-row: 3;
|
||||
grid-row: 3;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
body .container main h1, body .container main h2, body .container main h3, body .container main h4, body .container main h5, body .container main h6 {
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
}
|
||||
body .container main article {
|
||||
-ms-grid-column: 2;
|
||||
-ms-grid-column-span: 2;
|
||||
grid-column: 2/4;
|
||||
min-width: 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
body .container main article.status-deprecated {
|
||||
display: none;
|
||||
}
|
||||
body .container main article .tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
body .container main article .tab-group > ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body .container main article .tab-group > ul li.separator {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
display: inline-block;
|
||||
margin: 0.45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
body .container main article .tab-group .tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
body .container main article .tab-group [role=tab] {
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
border-top: 1px solid var(--color-grey);
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem 0.14rem 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
body .container main article .tab-group [role=tab]:last-of-type {
|
||||
border-right: 1px solid var(--color-grey);
|
||||
}
|
||||
body .container main article .tab-group [role=tab]:not(.selected) {
|
||||
background-color: var(--color-grey-xxl);
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
}
|
||||
body .container main article .tab-group [role=tab] span {
|
||||
display: block;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
body .container main article .tab-group [role=tabpanel] {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-grey);
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
body .container main article .tab-group [role=tabpanel]:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
body .container main article .tab-group [role=tabpanel] pre {
|
||||
background-color: var(--colour-black-5);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
body .container main article p.switch {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
grid-gap: 0.5rem;
|
||||
-ms-grid-columns: -webkit-max-content auto;
|
||||
-ms-grid-columns: max-content auto;
|
||||
grid-template-columns: -webkit-max-content auto;
|
||||
grid-template-columns: max-content auto;
|
||||
}
|
||||
body .container main article p.switch [role=switch] {
|
||||
display: -ms-inline-grid;
|
||||
display: inline-grid;
|
||||
border: 1px solid #2e51a1;
|
||||
background-color: #e9e9ea;
|
||||
border-radius: 0.75rem;
|
||||
height: 1.5rem;
|
||||
width: 3rem;
|
||||
-webkit-transition: all 500ms;
|
||||
transition: all 500ms;
|
||||
}
|
||||
body .container main article p.switch [role=switch] > span {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
margin: 2%;
|
||||
width: calc(1.5rem - 2%);
|
||||
-webkit-transition: all 500ms;
|
||||
transition: all 500ms;
|
||||
}
|
||||
body .container main article p.switch [role=switch][aria-checked=true] {
|
||||
background-color: #2e51a1;
|
||||
}
|
||||
body .container main article p.switch [role=switch][aria-checked=true] > span {
|
||||
margin-left: calc(1.5rem - 5%);
|
||||
}
|
||||
|
||||
.good-bad {
|
||||
display: -ms-grid;
|
||||
display: grid;
|
||||
-ms-grid-columns: (1fr)[2];
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.good-bad {
|
||||
-ms-grid-columns: auto;
|
||||
grid-template-columns: auto;
|
||||
-ms-grid-rows: (-webkit-max-content)[2];
|
||||
-ms-grid-rows: (max-content)[2];
|
||||
grid-template-rows: repeat(2, -webkit-max-content);
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
}
|
||||
}
|
||||
.good-bad > fieldset {
|
||||
border-style: solid;
|
||||
border-width: 0.5rem;
|
||||
border-color: var(--colour-error);
|
||||
padding: 1.5rem;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
.good-bad > fieldset legend {
|
||||
background-color: white;
|
||||
font-weight: bold;
|
||||
padding: 0 1rem;
|
||||
position: relative;
|
||||
left: -1.5rem;
|
||||
}
|
||||
.good-bad > fieldset:nth-child(1) {
|
||||
border-color: var(--colour-green);
|
||||
}
|
||||
|
||||
.tooltip-tc.color-accessibility {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection,
|
||||
code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*=language-]::-moz-selection, pre[class*=language-] ::-moz-selection, code[class*=language-]::-moz-selection, code[class*=language-] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*=language-]::selection, pre[class*=language-] ::selection,
|
||||
code[class*=language-]::selection, code[class*=language-] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
/* Code blocks */
|
||||
pre[class*=language-] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*=language-],
|
||||
pre[class*=language-] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*=language-] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
/* This background color was intended by the author of this theme. */
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
div.code-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0.3em;
|
||||
right: 0.2em;
|
||||
-webkit-transition: opacity 0.3s ease-in-out;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
div.code-toolbar:hover > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Separate line b/c rules are thrown out if selector is invalid.
|
||||
IE11 and old Edge versions don't support :focus-within. */
|
||||
div.code-toolbar:focus-within > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
-webkit-user-select: none; /* for button */
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span {
|
||||
color: #bbb;
|
||||
font-size: 0.8em;
|
||||
padding: 0 0.5em;
|
||||
background: #f5f2f0;
|
||||
background: rgba(224, 224, 224, 0.2);
|
||||
-webkit-box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a:hover,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > a:focus,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button:hover,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > button:focus,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span:hover,
|
||||
div.code-toolbar > .toolbar > .toolbar-item > span:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre[class*=language-].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*=language-].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
50
public/index.html
Normal file
50
public/index.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title data-site="DS2 core">DS2 core</title>
|
||||
<link rel="icon" href="https://assets.gamv.ca/favicon.svg" media="(prefers-color-scheme:no-preference),(prefers-color-scheme:light)">
|
||||
<link rel="icon" href="https://assets.gamv.ca/favicon-dark.svg" media="(prefers-color-scheme:dark)">
|
||||
<link href="assets/scaffolding.css" rel="stylesheet">
|
||||
<script src="assets/jquery-min.js"></script>
|
||||
</head>
|
||||
<body><a class="skip" href="#main">Skip to main content</a>
|
||||
<div class="container">
|
||||
<header>
|
||||
<!-- The headline banner area -->
|
||||
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<text>DS2 core</text>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="header-title">
|
||||
<h1> <a href=".">DS2 core</a></h1>
|
||||
</div>
|
||||
<!-- Other sections can go here, such as search and directory-->
|
||||
</div>
|
||||
</header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li> <a href="./">Home</a></li>
|
||||
<li><a href="./?p=colours">Colours</a></li>
|
||||
<li><a href="./?p=components">Components</a></li>
|
||||
<li><a href="./?p=layouts">Layouts</a></li>
|
||||
<li><a href="./?p=status">Status</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<main id="main">
|
||||
<h1>DS2 core</h1>
|
||||
<article id="colours" data-path="colours" data-template="pug" data-pattern="colours" data-status="complete" data-core="true"></article>
|
||||
<article id="components" data-path="components" data-template="none" data-pattern="components" data-status="in-progress" data-core="false"></article>
|
||||
<article id="components-switch" data-path="components/switch" data-template="pug" data-pattern="switch" data-status="in-progress" data-core="true"></article>
|
||||
<article id="layouts" data-path="layouts" data-template="none" data-pattern="layouts" data-status="complete" data-core="false"></article>
|
||||
<article id="layouts-breakpoints" data-path="layouts/breakpoints" data-template="pug" data-pattern="breakpoints" data-status="complete" data-core="true"></article>
|
||||
<article id="layouts-header" data-path="layouts/header" data-template="pug" data-pattern="header" data-status="complete" data-core="true"></article>
|
||||
<article id="layouts-tabs" data-path="layouts/tabs" data-template="pug" data-pattern="tabs" data-status="complete" data-core="true"></article>
|
||||
<article id="status" data-path="status" data-template="pug" data-pattern="status" data-status="complete" data-core="true"></article>
|
||||
</main>
|
||||
</div>
|
||||
<script src="assets/scaffolding-min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
329
public/patterns/colours-core/index.html
Normal file
329
public/patterns/colours-core/index.html
Normal file
@@ -0,0 +1,329 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<color-samples>
|
||||
<color-sample data-color="rgb( 46, 81, 161)" style="background-color: rgb( 46, 81, 161); color: #FFF">
|
||||
<name data-hex="#2e51a1" data-rgb="rgb( 46, 81, 161)" data-token="--colour-blue"><span>Blue</span></name>
|
||||
<hex>#2e51a1</hex>
|
||||
<rgb>rgb(46,81,161)</rgb>
|
||||
<accessibility>
|
||||
<div class="acchb"> <span>color & black </span><small>2.8:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>7.5:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb( 46, 81, 161)">✓ </span><span style="color: rgb( 46, 81, 161)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb( 46, 81, 161)">✓ </span><span style="color: rgb( 46, 81, 161)">✓</span>
|
||||
</div>
|
||||
</accessibility>
|
||||
<sample-block>
|
||||
<color-pill data-hex="#5c7abf" data-rgb="rgb( 92,122,191)" data-token="--colour-blue-l"> <span style="background-color: rgb( 92,122,191)">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>5:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>4.2:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb( 92,122,191)">✓</span><span style="color: rgb( 92,122,191)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span style="color: rgb( 92,122,191)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span style="color: rgb( 92,122,191)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>blue-l</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#b2c3ec" data-rgb="rgb(178,195,236)" data-token="--colour-blue-xl"> <span style="background-color: rgb(178,195,236)">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>11.9:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>1.8:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(178,195,236)">✓</span><span style="color: rgb(178,195,236)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(178,195,236)">✓ </span><span style="color: rgb(178,195,236)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>blue-xl</span>
|
||||
</color-pill>
|
||||
</sample-block>
|
||||
<sample-block>
|
||||
<color-pill data-hex="#133176" data-rgb="rgb( 19, 49,118)" data-token="--colour-blue-d"> <span style="background-color: rgb( 19, 49,118)">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>1.7:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>12.1:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb( 19, 49,118)">✓ </span><span style="color: rgb( 19, 49,118)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb( 19, 49,118)">✓ </span><span style="color: rgb( 19, 49,118)">✓</span>
|
||||
</div>
|
||||
</div></span><span>blue-d</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#031235" data-rgb="rgb( 3, 18, 53)" data-token="--colour-blue-xd"> <span style="background-color: rgb( 3, 18, 53)">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>1.1:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>18.4:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb( 3, 18, 53)">✓ </span><span style="color: rgb( 3, 18, 53)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb( 3, 18, 53)">✓ </span><span style="color: rgb( 3, 18, 53)">✓</span>
|
||||
</div>
|
||||
</div></span><span>blue-xd</span>
|
||||
</color-pill>
|
||||
</sample-block>
|
||||
</color-sample>
|
||||
<color-sample data-color="rgb(127, 127, 127)" style="background-color: rgb(127, 127, 127); color: #000">
|
||||
<name data-hex="#7f7f7f" data-rgb="rgb(127, 127, 127)" data-token="--colour-grey"><span>Grey</span></name>
|
||||
<hex>#7f7f7f</hex>
|
||||
<rgb>rgb(127,127,127)</rgb>
|
||||
<accessibility>
|
||||
<div class="acchb"> <span>color & black </span><small>5.2:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>4:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(127, 127, 127)">✓</span><span style="color: rgb(127, 127, 127)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span style="color: rgb(127, 127, 127)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span style="color: rgb(127, 127, 127)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</accessibility>
|
||||
<sample-block>
|
||||
<color-pill data-hex="#b2b2b2" data-rgb="rgb(178, 178, 178)" data-token="--colour-grey-l"> <span style="background-color: #b2b2b2">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>9.9:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>2.1:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(178, 178, 178)">✓</span><span style="color: rgb(178, 178, 178)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(178, 178, 178)">✓ </span><span style="color: rgb(178, 178, 178)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>Light</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#d8d8d8" data-rgb="rgb(216, 216, 216)" data-token="--colour-grey-xl"> <span style="background-color: #d8d8d8">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>14.7:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>1.4:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(216, 216, 216)">✓</span><span style="color: rgb(216, 216, 216)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(216, 216, 216)">✓ </span><span style="color: rgb(216, 216, 216)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>Lighter</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#f0f0f0" data-rgb="rgb(240, 240, 240)" data-token="--colour-grey-xxl"> <span style="background-color: #f0f0f0">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>18.4:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>1.1:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(240, 240, 240)">✓</span><span style="color: rgb(240, 240, 240)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(240, 240, 240)">✓ </span><span style="color: rgb(240, 240, 240)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>Lightest</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-white"> <span style="background-color: #FFF">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>White</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-page"> <span style="background-color: #FFF">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>Default page</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#FFF" data-rgb="rgb(255, 255, 255)" data-token="--colour-light"> <span style="background-color: #FFF">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>21:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>1:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span style="color: rgb(255, 255, 255)">✓</span><span style="color: rgb(255, 255, 255)">✓</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span style="color: rgb(255, 255, 255)">✓ </span><span style="color: rgb(255, 255, 255)">✓</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
</div></span><span>Light</span>
|
||||
</color-pill>
|
||||
</sample-block>
|
||||
<sample-block>
|
||||
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-d"> <span style="background-color: #4c4c4c">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
||||
</div>
|
||||
</div></span><span>Dark</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#4c4c4c" data-rgb="rgb(76, 76, 76)" data-token="--colour-grey-xd"> <span style="background-color: #4c4c4c">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>2.4:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>8.6:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb(76, 76, 76)">✓ </span><span style="color: rgb(76, 76, 76)">✓</span>
|
||||
</div>
|
||||
</div></span><span>Darker</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-black"> <span style="background-color: #000">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
||||
</div>
|
||||
</div></span><span>Black</span>
|
||||
</color-pill>
|
||||
<color-pill data-hex="#000" data-rgb="rgb(0, 0, 0)" data-token="--colour-dark"> <span style="background-color: #000">
|
||||
<div class="tooltip-tc color-accessibility" role="tooltip" inert="inert" tip-position="bottom">
|
||||
<div class="acchb"> <span>color & black </span><small>1:1</small></div>
|
||||
<div class="acchw"> <span>color & white </span><small>21:1</small></div>
|
||||
<div class="aa">WCAG 2.0 AA </div>
|
||||
<div class="accbaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
||||
</div>
|
||||
<div class="aaa">WCAG 2.0 AAA </div>
|
||||
<div class="accbaaa result"><span>✗ </span><span>✗</span>
|
||||
</div>
|
||||
<div class="accwaaa result"><span style="color: rgb(0, 0, 0)">✓ </span><span style="color: rgb(0, 0, 0)">✓</span>
|
||||
</div>
|
||||
</div></span><span>Dark</span>
|
||||
</color-pill>
|
||||
</sample-block>
|
||||
</color-sample>
|
||||
</color-samples>
|
||||
<div class="tab-group" id="colours">
|
||||
<div data-tab="css">
|
||||
<pre class="language-css">:root {
|
||||
--colour-blue: #2e51a1;
|
||||
--colour-blue-l: #5c7abf;
|
||||
--colour-blue-xl: #b2c3ec;
|
||||
--colour-blue-d: #133176;
|
||||
--colour-blue-xd: #031235;
|
||||
|
||||
--colour-grey: #7f7f7f;
|
||||
--colour-grey-l: #b2b2b2;
|
||||
--colour-grey-xl: #d8d8d8;
|
||||
--colour-grey-xxl: #f0f0f0;
|
||||
--colour-white: #FFF;
|
||||
--colour-page: #FFF;
|
||||
--colour-light: #FFF;
|
||||
--colour-grey-d: #4c4c4c;
|
||||
--colour-grey-xd: #4c4c4c;
|
||||
--colour-black: #000;
|
||||
--colour-dark: #000;
|
||||
}</pre>
|
||||
</div>
|
||||
<div data-tab="scss">
|
||||
<pre class="language-css">$colour: (
|
||||
colour-blue: #2e51a1,
|
||||
colour-blue-l: #5c7abf,
|
||||
colour-blue-xl: #b2c3ec,
|
||||
colour-blue-d: #133176,
|
||||
colour-blue-xd: #031235,
|
||||
|
||||
colour-grey: #7f7f7f,
|
||||
colour-grey-l: #b2b2b2,
|
||||
colour-grey-xl: #d8d8d8,
|
||||
colour-grey-xxl: #f0f0f0,
|
||||
colour-white: #FFF,
|
||||
colour-page: #FFF,
|
||||
colour-light: #FFF,
|
||||
colour-grey-d: #4c4c4c,
|
||||
colour-grey-xd: #4c4c4c,
|
||||
colour-black: #000,
|
||||
colour-dark: #000,
|
||||
);
|
||||
:root {
|
||||
@each $name, $color in $colour {
|
||||
--#{$name}: #{$color};
|
||||
}
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
101
public/patterns/components/switch-core/index.html
Normal file
101
public/patterns/components/switch-core/index.html
Normal file
@@ -0,0 +1,101 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<h2>Example</h2>
|
||||
<p class="switch">
|
||||
<label for="example-switch">Switch label</label><span id="example-switch" role="switch"></span>
|
||||
</p>
|
||||
<div class="tab-group" id="switches">
|
||||
<pre class="language-html" data-tab="html"><span id="example-id" role="switch"></span></pre>
|
||||
<pre class="language-pug" data-tab="pug">span#example-id(role="switch")</pre>
|
||||
<pre class="language-css" data-tab="css">[role=switch] {
|
||||
display: -ms-inline-grid;
|
||||
display: inline-grid;
|
||||
border: 1px solid #2e51a1;
|
||||
background-color: #e9e9ea;
|
||||
border-radius: 0.75rem;
|
||||
height: 1.5rem;
|
||||
width: 3rem;
|
||||
-webkit-transition: all 500ms;
|
||||
transition: all 500ms;
|
||||
}
|
||||
[role=switch] > span {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
margin: 2%;
|
||||
width: calc(1.5rem - 2%);
|
||||
-webkit-transition: all 500ms;
|
||||
transition: all 500ms;
|
||||
}
|
||||
[role=switch][aria-checked=true] {
|
||||
background-color: #2e51a1;
|
||||
}
|
||||
[role=switch][aria-checked=true] > span {
|
||||
margin-left: calc(1.5rem - 5%);
|
||||
}</pre>
|
||||
<pre class="language-css" data-tab="scss">@use "sass:math";
|
||||
|
||||
$switch-accent: #2e51a1 !default; // switch background when switched right (on/ true)
|
||||
$switch-background: #e9e9ea !default; // switch background when switched left (off / false)
|
||||
$switch-color: #ffffff !default; // the colour of the switch
|
||||
$switch-height: 1.5rem !default;
|
||||
|
||||
@mixin switch {
|
||||
[role='switch'] {
|
||||
display: inline-grid;
|
||||
border: 1px solid $switch-accent;
|
||||
background-color: $switch-background;
|
||||
border-radius: math.div($switch-height, 2);
|
||||
height: $switch-height;
|
||||
width: #{$switch-height * 2};
|
||||
transition: all 500ms;
|
||||
> span {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
margin: 2%;
|
||||
width: calc(#{$switch-height} - 2%);
|
||||
transition: all 500ms;
|
||||
}
|
||||
|
||||
&[aria-checked="true"] {
|
||||
background-color: $switch-accent;
|
||||
> span {
|
||||
margin-left: calc(#{$switch-height} - 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<pre class="language-js" data-tab="js">
|
||||
function flip(e) {
|
||||
let sw = e.currentTarget;
|
||||
switch(sw.getAttribute("aria-checked")) {
|
||||
case "true":
|
||||
sw.setAttribute("aria-checked", "false");
|
||||
break;
|
||||
case "false":
|
||||
sw.setAttribute("aria-checked", "true");
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
function init(callback){
|
||||
let sw = document.querySelectorAll("[role='switch']");
|
||||
for (let i=0; i < sw.length; i++) {
|
||||
sw[i].innerHTML = "<span></span>";
|
||||
sw[i].setAttribute("aria-checked", "false");
|
||||
sw[i].setAttribute("tabindex", "0");
|
||||
sw[i].addEventListener("click", flip, false);
|
||||
sw[i].addEventListener("keypress", flip, false);
|
||||
}
|
||||
}
|
||||
|
||||
export {init};</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
76
public/patterns/layouts/header-core/index.html
Normal file
76
public/patterns/layouts/header-core/index.html
Normal file
@@ -0,0 +1,76 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<div class="tab-group" id="header">
|
||||
<pre class="language-html" data-tab="html">
|
||||
<!-- create temp variables and store the design system values-->
|
||||
<header>
|
||||
<!-- The headline banner area -->
|
||||
<svg height="5.5rem" width="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<text>[site name]</text>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="header-title">
|
||||
<h1> <a href="[site root]">[site name]</a></h1>
|
||||
</div>
|
||||
<!-- Other sections can go here, such as search and directory-->
|
||||
</div>
|
||||
</header></pre>
|
||||
<pre class="language-sass" data-tab="scss">$header-bg-color: var(--color-grey-xl) !default;
|
||||
$font-heading: sans-serif !default;
|
||||
$font-weight: 700 !default;
|
||||
|
||||
@mixin header {
|
||||
header {
|
||||
display: grid;
|
||||
grid-template-rows: 1.75rem 3.5rem;
|
||||
grid-column: 2 / 4;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 1 / -1;
|
||||
place-self: stretch;
|
||||
text {
|
||||
transform: translate(-1rem, 7.25rem);
|
||||
font-size: 10rem;
|
||||
font-weight: 1000;
|
||||
font-family: $font-heading;
|
||||
fill: $header-bg-color;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
|
||||
display: grid;
|
||||
grid-column-gap: 1rem;
|
||||
grid-template-columns: auto max-content max-content;
|
||||
|
||||
.header-title {
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0 1rem;
|
||||
a, a:visited {
|
||||
border-bottom: none;
|
||||
color: var(--colour-black);
|
||||
font-family: $font-heading;
|
||||
font-size: 2.5rem;
|
||||
font-size: 32px;
|
||||
font-weight: $font-weight;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<pre class="language-css" data-tab="css">header{display:-ms-grid;display:grid;-ms-grid-rows:1.75rem 3.5rem;grid-template-rows:1.75rem 3.5rem;-ms-grid-column:2;-ms-grid-column-span:2;grid-column:2/4;overflow:hidden}header svg{grid-column:1/-1;grid-row:1/-1;-ms-grid-row-align:stretch;-ms-grid-column-align:stretch;place-self:stretch}header svg text{-webkit-transform:translate(-1rem,7.25rem);-ms-transform:translate(-1rem,7.25rem);transform:translate(-1rem,7.25rem);font-size:10rem;font-weight:1000;font-family:sans-serif;fill:var(--color-grey-xl)}header>div{-ms-grid-row:2;grid-row:2;grid-column:1/-1;display:-ms-grid;display:grid;grid-column-gap:1rem;-ms-grid-columns:auto -webkit-max-content -webkit-max-content;-ms-grid-columns:auto max-content max-content;grid-template-columns:auto -webkit-max-content -webkit-max-content;grid-template-columns:auto max-content max-content}header>div .header-title h1{margin:0;padding:0 1rem}header>div .header-title h1 a,header>div .header-title h1 a:visited{border-bottom:none;color:var(--colour-black);font-family:sans-serif;font-size:2.5rem;font-size:32px;font-weight:700;margin:0;padding:0;text-decoration:none}</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
161
public/patterns/layouts/tabs-core/index.html
Normal file
161
public/patterns/layouts/tabs-core/index.html
Normal file
@@ -0,0 +1,161 @@
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<title>Pattern</title>
|
||||
</head>
|
||||
<body data-prismjs-copy-timeout="1500">
|
||||
<p>The tabbed user interface enables users to jump to their target section quickly. Tabs present like logically group information on the same page. Information should </p>
|
||||
<ul>
|
||||
<li>be logically chunked and ordered</li>
|
||||
<li>be arallel in nature</li>
|
||||
<li>show user's context</li>
|
||||
<li>obvious where they begin and end </li>
|
||||
</ul>
|
||||
<p>Users should not need to see content of multiple tabs simultaneously and the user should be able to easily recognise where they are within the content. </p>
|
||||
<p>The tab module is untested, but contains a modularized version of the jQuery code, so that it can be called on demand. It is what is used in the design system so that the JavaScript can be called at run time (after loading content).</p>
|
||||
<div class="tab-group" id="tabs">
|
||||
<pre class="language-html" data-tab="html"><div class="tab-group" id="[unique name]">
|
||||
<div data-tab="[tab title]"></div>
|
||||
<div data-tab="[tab title]"></div>
|
||||
...
|
||||
</div>
|
||||
</pre>
|
||||
<pre class="language-css" data-tab="css">.tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
}
|
||||
.tab-group > ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.tab-group > ul li.separator {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
display: inline-block;
|
||||
margin: 0.45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tab-group .tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
.tab-group [role=tab] {
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
border-top: 1px solid var(--color-grey);
|
||||
border-radius: 0.5rem 0.5rem 0 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem 0.14rem 1.5rem;
|
||||
z-index: 2;
|
||||
}
|
||||
.tab-group [role=tab]:last-of-type {
|
||||
border-right: 1px solid var(--color-grey);
|
||||
}
|
||||
.tab-group [role=tab]:not(.selected) {
|
||||
background-color: var(--color-grey-xxl);
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
}
|
||||
.tab-group [role=tab] span {
|
||||
display: block;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
.tab-group [role=tabpanel] {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-grey);
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
}
|
||||
.tab-group [role=tabpanel]:not(.open) {
|
||||
display: none;
|
||||
}</pre>
|
||||
<pre class="language-css" data-tab="scss">@mixin tabs {
|
||||
.tab-group {
|
||||
margin: 2rem 0 1rem 0;
|
||||
> ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
li.separator {
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
display: inline-block;
|
||||
margin: .45rem 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[role="tab"] {
|
||||
background-color: var(--color-white);
|
||||
border-left: 1px solid var(--color-grey);
|
||||
border-top: 1px solid var(--color-grey);
|
||||
border-radius: .5rem .5rem 0 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
padding: 1rem 1.5rem .14rem 1.5rem;
|
||||
z-index: 2;
|
||||
|
||||
&:last-of-type {
|
||||
border-right: 1px solid var(--color-grey);
|
||||
}
|
||||
|
||||
&:not(.selected) {
|
||||
background-color: var(--color-grey-xxl);
|
||||
border-bottom: 1px solid var(--color-grey);
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin: 0 0 .5rem 0;
|
||||
}
|
||||
|
||||
}
|
||||
[role="tabpanel"] {
|
||||
background-color: var(--color-white);
|
||||
border: 1px solid var(--color-grey);
|
||||
border-top: none;
|
||||
padding: 1rem;
|
||||
z-index: 1;
|
||||
|
||||
&:not(.open) {
|
||||
display: none;
|
||||
}
|
||||
@content;
|
||||
|
||||
}
|
||||
}
|
||||
}</pre>
|
||||
<pre class="language-css" data-tab="js">export function tabs($) {
|
||||
$(".tab-group").each(function(){
|
||||
let tabgroup = $(this).attr("id"),
|
||||
tablist = "";
|
||||
$(this).children("*").each(function(){
|
||||
let tab = $(this).attr("data-tab");
|
||||
if (typeof tab !== 'undefined' && tab !== false) {
|
||||
let tabID = tab.replace(/\W+/g,"-").toLowerCase();
|
||||
$(this).wrap(`<div id="tab-panel-${tabgroup + "-" + tabID }" ${(tablist == "" ? "class='open'" : "")} role="tabpanel" tabindex="0" aria-labeledby="tab-${tabgroup + "-" + tabID }"></div>`);
|
||||
tablist += `<li tabindex="0" role="tab" ${(tablist == "" ? "class='selected'" : "")} id="tab-${tabgroup + "-" + tab.replace(/\W+/g,"-").toLowerCase()}"><span>${tab}</span></li>`;
|
||||
} else {
|
||||
$(this).addClass("tab-hidden");
|
||||
}
|
||||
|
||||
})
|
||||
$(this).prepend(`<ul role="tablist">${tablist}<li role="separator" class="separator"></li></ul>`);
|
||||
})
|
||||
$('[role="tab"]').on("click", function(){
|
||||
$(this).parent().children('[role="tab"]').removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
$(this).parent().parent().children('[role="tabpanel"]').removeClass("open");
|
||||
$("#" + $(this).attr("id").replace("tab", "tab-panel")).addClass("open");
|
||||
})
|
||||
}</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user