ds2-core/src/scss/scaffolding.scss

/*
 *    colours
 */
$colors: (	
	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,
);
:root {
	@each $name, $colour in $colors {
		--#{$name}: #{$colour};
	}
}



/*
 *    Fonts
 */
$font-heading: Helvetica, Arial, sans-serif;
$font-body: Helvetica, Arial, sans-serif;
$font-size: 14pt;


// $breakwidth: "lg";
// $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 1088px, xl: 1200px );

// cleaned up to here

// $sprite-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20500%20400%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3B%22%3E%0A%20%20%20%20%3Cg%20id%3D%22icons%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Row-4%22%20serif%3Aid%3D%22Row%204%22%20transform%3D%22matrix%281%2C0%2C0%2C1%2C2%2C2%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22ZIP%22%20transform%3D%22matrix%284.17391%2C0%2C0%2C4.17391%2C86.9565%2C-13.0435%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Page%22%20transform%3D%22matrix%280.224814%2C0%2C0%2C0.23%2C-15.051%2C52%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%280.385801%2C0%2C0%2C0.386406%2C418.35%2C101.08%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23_Image1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22196px%22%20height%3D%22256px%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CclipPath%20id%3D%22_clip2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M420.713%2C102.452L463.667%2C102.452C473.201%2C109.226%20484.09%2C119.343%20491.542%2C130.373L491.542%2C196.453L420.713%2C196.453L420.713%2C102.452Z%22%20clip-rule%3D%22nonzero%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FclipPath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20clip-path%3D%22url%28%23_clip2%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%281.06569%2C-0%2C-0%2C1.04167%2C-27.8518%2C-214.583%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23_Image3%22%20x%3D%22424.315%22%20y%3D%22306.914%22%20width%3D%2266.463px%22%20height%3D%2290.241px%22%20transform%3D%22matrix%280.991981%2C0%2C0%2C0.991659%2C0%2C0%29%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%280.153596%2C0%2C0%2C0.154321%2C461.252%2C100%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23_Image4%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22213px%22%20height%3D%22212px%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CclipPath%20id%3D%22_clip5%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M463.667%2C102.452C474.039%2C110.001%20483.915%2C119.299%20491.542%2C130.373C486.602%2C125.243%20479.829%2C122.505%20471.791%2C122.856C472.741%2C113.343%20469.072%2C107.2%20463.667%2C102.452Z%22%20clip-rule%3D%22nonzero%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FclipPath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20clip-path%3D%22url%28%23_clip5%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20transform%3D%22matrix%281.06569%2C-0%2C-0%2C1.04167%2C-27.8518%2C-214.583%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20xlink%3Ahref%3D%22%23_Image6%22%20x%3D%22476.09%22%20y%3D%22306.578%22%20width%3D%2
// $codecopywidth: 1.3rem;
// $codemaxwidth: calc(100% - #{$codecopywidth});
// $accent-color: var(--colour-green);
// $accent-grey: #4c4d4f;
// $accent-lgrey: red;

$statuses: (
	"not-started": transparent,
	"in-progress": var(--color-blue-l),
	"complete": var(--color-blue), 
	"needs-review": orange,
	"deprecated": red,
);

// ----------------------------------------------------------

@import "color-samples";

@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";



// @include breakpoint-debug;
* {
	box-sizing: border-box;
}

@include color-samples;
@include status;



html {
	font-size: $font-size;
	font-family: $font-body;
	@include break(-md) {
		font-size: calc($font-size + 2pt);
	}
}

// statuses
h1[class^="status"], h2[class^="status"], span[class^="status"] {
	&::after {
		$size: 1.5rem;
		border-radius: 50%;
		border: 1px solid #CCC;
		content: " ";
		display: inline-block;
		height: $size;
		margin-left: .5rem;
		position: relative;
		top: 2px;
		width: $size;
	}
} 
@each $name, $color in $statuses {
	.status-#{$name}::after {
		background-color: $color;
	}
}
// / statuses



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;
			}
		}


		main {
			grid-row: 4;
			@include break(-md) {
				grid-row: 3;
				padding: 0;
			}
			display: block;
			padding: 0 1rem;
			grid-column: 2 / 4;

			// @include main-grid-4col;

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

.tooltip-tc.color-accessibility {
    display: none;
}

@import "../../node_modules/prismjs/themes/prism";
@import "../../node_modules/prismjs/plugins/toolbar/prism-toolbar";
@import "../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers";