196 lines
3.7 KiB
SCSS
196 lines
3.7 KiB
SCSS
/*
|
|
* Variables
|
|
*/
|
|
|
|
$font-heading: elvetica, Arial, sans-serif;
|
|
$font-body: Helvetica, Arial, sans-serif;
|
|
$font-size: 14pt;
|
|
|
|
$tooltip-dark-allow: false;
|
|
|
|
// ----------------------------------------------------------
|
|
|
|
@use 'sass:math';
|
|
|
|
@import "core";
|
|
|
|
// 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 "color-samples";
|
|
|
|
@import "../pg/patterns/components/sticky-note-core/_sticky-note";
|
|
@import "../pg/patterns/components/tooltip-core/_tooltip";
|
|
@import "../pg/patterns/components/switch-core/_switch";
|
|
|
|
@import "../pg/patterns/layouts/breakpoints-core/_breakpoints";
|
|
@import "../pg/patterns/layouts/header-core/_header";
|
|
@import "../pg/patterns/layouts/tabs-core/_tabs";
|
|
|
|
|
|
|
|
@import "../pg/patterns/status-core/_status";
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: $font-body;
|
|
font-size: $font-size;
|
|
@include break(-md) {
|
|
font-size: calc($font-size + 2pt);
|
|
}
|
|
}
|
|
|
|
@include status;
|
|
@include color-samples;
|
|
@include tooltip;
|
|
@include sticky-note;
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
a.skip {
|
|
position: absolute;
|
|
left: -9999px;
|
|
}
|
|
|
|
|
|
.container {
|
|
|
|
|
|
display: grid;
|
|
grid-template-columns: auto repeat(2, 22rem) auto;
|
|
margin: 0 auto;
|
|
width: 100vw;
|
|
|
|
@include header;
|
|
|
|
|
|
nav {
|
|
background-color: var(--color-blue);
|
|
grid-column: 2 / 4;
|
|
display: none;
|
|
ul {
|
|
margin: 1rem 0;
|
|
li {
|
|
display: inline-block;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
a {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
@include break(md-) {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
|
|
p.deprecated-switch {
|
|
grid-row: 3;
|
|
// @include break(-md) {
|
|
// grid-row: 2;
|
|
// grid-column: 2 / 4;
|
|
// }
|
|
grid-column: 2 / 4;
|
|
text-align: right;
|
|
// align-items: center;
|
|
// display: grid;
|
|
// grid-gap: .5rem;
|
|
// grid-template-columns: auto max-content max-content;
|
|
// grid-area: dp;
|
|
// margin: 1rem .25rem;
|
|
@include switch;
|
|
|
|
}
|
|
main {
|
|
grid-row: 4;
|
|
@include break(-md) {
|
|
grid-row: 3;
|
|
padding: 0;
|
|
}
|
|
display: block;
|
|
padding: 0 1rem;
|
|
// grid-area: main;
|
|
grid-column: 1 / -1;
|
|
|
|
@supports(grid-area: auto) {
|
|
display: grid;
|
|
grid-template-columns: 1rem repeat(2, auto) 1rem;
|
|
@include break(md-) {
|
|
grid-template-columns: auto repeat(2, 22rem) auto;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
grid-column: 2 / 4;
|
|
}
|
|
|
|
article {
|
|
grid-column: 2 / 4;
|
|
min-width: 0;
|
|
margin-top: 2rem;
|
|
|
|
&.status-deprecated {
|
|
display: none;
|
|
}
|
|
|
|
@include tabs {
|
|
pre {
|
|
background-color: var(--colour-black-5);
|
|
font-size: .8rem;
|
|
}
|
|
};
|
|
p.switch {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-gap: .5rem;
|
|
grid-template-columns: max-content auto;
|
|
@include switch;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.good-bad {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
|
|
@include break (-md) {
|
|
grid-template-columns: auto;
|
|
grid-template-rows: repeat(2, max-content);
|
|
}
|
|
|
|
> fieldset {
|
|
border-style: solid;
|
|
border-width: .5rem;
|
|
border-color: var(--colour-error);
|
|
padding: 1.5rem;
|
|
margin: 1rem 0;
|
|
legend {
|
|
background-color: white;
|
|
font-weight: bold;
|
|
padding: 0 1rem;
|
|
position: relative;
|
|
left: -1.5rem;
|
|
|
|
}
|
|
&:nth-child(1) {
|
|
border-color: var(--colour-green);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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";
|
|
|