165 lines
3.3 KiB
SCSS
165 lines
3.3 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';
|
|
|
|
// 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.
|
|
@use "core" as *;
|
|
@use "../../node_modules/prismjs/themes/prism";
|
|
@use "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
|
|
@use "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";
|
|
|
|
@use "../pg/patterns/core/sticky-note/_sticky-note";
|
|
@use "../pg/patterns/core/switch/_switch";
|
|
@use "../pg/patterns/core/tooltip/_tooltip";
|
|
@use "../pg/patterns/core/breakpoints/_breakpoints";
|
|
@use "../pg/patterns/core/header/_header";
|
|
@use "../pg/patterns/core/tabs/_tabs";
|
|
@use "../pg/patterns/core/status/_status";
|
|
use
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-family: $font-body;
|
|
font-size: $font-size;
|
|
@include breakpoints.break(-md) {
|
|
font-size: calc($font-size + 2pt);
|
|
}
|
|
&.show-breakpoints {
|
|
@include breakpoints.breakpoint-debug;
|
|
}
|
|
}
|
|
|
|
// @include core-colour-samples;
|
|
|
|
@include tooltip.tooltip;
|
|
@include sticky-note.sticky-note;
|
|
@include status.status;
|
|
|
|
article[data-status=deprecated]:not(.show-deprecated) {
|
|
display: none;
|
|
}
|
|
|
|
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.header;
|
|
|
|
nav {
|
|
background-color: var(--colour-blue);
|
|
grid-column: 2 / 4;
|
|
display: none;
|
|
|
|
ul {
|
|
margin: 1rem 0;
|
|
|
|
li {
|
|
display: inline-block;
|
|
margin-right: 1rem;
|
|
}
|
|
}
|
|
a {
|
|
color: var(--colour-white);
|
|
text-decoration: none;
|
|
}
|
|
@include breakpoints.break(md-) {
|
|
display: initial;
|
|
}
|
|
}
|
|
|
|
|
|
p.info-switches {
|
|
align-items: center;
|
|
display: grid;
|
|
gap: .25rem;
|
|
grid-column: 2 / 4;
|
|
grid-row: 3;
|
|
grid-template-columns: auto repeat(2, max-content);
|
|
text-align: right;
|
|
@include switch.switch;
|
|
label {
|
|
text-align: left;;
|
|
}
|
|
|
|
}
|
|
main {
|
|
display: block;
|
|
grid-column: 1 / -1;
|
|
grid-row: 4;
|
|
|
|
@include breakpoints.break(-md) {
|
|
grid-row: 3;
|
|
padding: 0;
|
|
}
|
|
|
|
@supports(grid-area: auto) {
|
|
display: grid;
|
|
grid-template-columns: 1rem repeat(2, auto) 1rem;
|
|
@include breakpoints.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;
|
|
margin-top: 2rem;
|
|
min-width: 0;
|
|
|
|
&.status-deprecated {
|
|
display: none;
|
|
}
|
|
|
|
@include tabs.tabs {
|
|
pre {
|
|
background-color: var(--colour-black-5);
|
|
font-size: .8rem;
|
|
code:not(.inline) {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
};
|
|
p.switch {
|
|
align-items: center;
|
|
display: grid;
|
|
grid-gap: .5rem;
|
|
grid-template-columns: max-content auto;
|
|
@include switch.switch;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|