Updates
Updates
This commit is contained in:
68
src/scss/_core.scss
Normal file
68
src/scss/_core.scss
Normal file
@@ -0,0 +1,68 @@
|
||||
// This file is geneated by ../pg/_config.pug. Please make your changes there so they are not overwritten
|
||||
|
||||
$colors: (
|
||||
color-blue: #2e51a1,
|
||||
color-blue-l: #5c7abf,
|
||||
color-blue-xl: #b2c3ec,
|
||||
color-blue-d: #133176,
|
||||
color-blue-xd: #031235,
|
||||
|
||||
color-oj: #f0b031,
|
||||
color-oj-l: #ffcc67,
|
||||
color-oj-xl: #ffe4ad,
|
||||
color-oj-d: #cb8906,
|
||||
color-oj-xd: #9d6900,
|
||||
|
||||
color-raspberry: #da2c5b,
|
||||
color-raspberry-l: #ed5e85,
|
||||
color-raspberry-xl: #f9a4bb,
|
||||
color-raspberry-d: #9f0c34,
|
||||
color-raspberry-xd: #400011,
|
||||
|
||||
color-lime: #cde92f,
|
||||
color-lime-l: #e2f963,
|
||||
color-lime-xl: #effca6,
|
||||
color-lime-d: #9bb40b,
|
||||
color-lime-xd: #607100,
|
||||
|
||||
color-grey: #7f7f7f,
|
||||
color-grey-l: #b2b2b2,
|
||||
color-grey-xl: #d8d8d8,
|
||||
color-grey-xxl: #f0f0f0,
|
||||
color-white: #fff,
|
||||
color-page: #fff,
|
||||
color-light: #fff,
|
||||
color-grey-d: #4c4c4c,
|
||||
color-grey-xd: #4c4c4c,
|
||||
color-black: #000,
|
||||
color-dark: #000,
|
||||
|
||||
color-error: #a00109,
|
||||
color-error-text: #fff,
|
||||
|
||||
color-warn: #a38301,
|
||||
color-warn-text: #fff,
|
||||
|
||||
color-notify: #599601,
|
||||
color-notify-text: #fff,
|
||||
|
||||
color-info: #b2c3ec,
|
||||
color-info-text: #000,
|
||||
);
|
||||
:root {
|
||||
@each $name, $color in $colors {
|
||||
--#{$name}: #{$color};
|
||||
}
|
||||
}
|
||||
|
||||
@import "color-samples";
|
||||
|
||||
|
||||
$statuses: (
|
||||
"not-started": transparent,
|
||||
"another-status": red,
|
||||
"in-progress": var(--color-oj),
|
||||
"complete": var(--color-lime),
|
||||
"needs-review": var(--color-oj-xd),
|
||||
"deprecated": var(--color-raspberry),
|
||||
);
|
||||
@@ -1,149 +0,0 @@
|
||||
|
||||
|
||||
// all the really old stuff
|
||||
|
||||
|
||||
// body {
|
||||
// $hh: 75px;
|
||||
// $ww: 200px;
|
||||
// display: grid;
|
||||
// grid-template-columns: $ww calc(100vw - (#{$ww} ) );
|
||||
// grid-template-rows: $hh calc(100vh - #{$hh});
|
||||
// overflow: hidden;
|
||||
// margin: 0;
|
||||
|
||||
// header {
|
||||
// align-self: stretch;
|
||||
// color: var(--colour-white);
|
||||
// display: grid;
|
||||
// place-items: end;
|
||||
// background-color: var(--colour-green);
|
||||
// grid-column: 1 / -1;
|
||||
// grid-row: 1;
|
||||
// div {
|
||||
// padding: .5rem;
|
||||
// }
|
||||
// h1 {
|
||||
// margin: 0;
|
||||
// padding: 0;
|
||||
// text-align: right;
|
||||
// font-family: $font-heading;
|
||||
// }
|
||||
// }
|
||||
// main {
|
||||
// display: inherit;
|
||||
// // grid-gap: 1rem;
|
||||
// grid-template-columns: inherit;
|
||||
// grid-column: 1 / -1;
|
||||
// aside {
|
||||
|
||||
// grid-column: 1;
|
||||
// place-items: stretch;
|
||||
// background-color: var(--colour-green);
|
||||
// > ul {
|
||||
// overflow-x: hidden;
|
||||
// overflow-y: scroll;
|
||||
// max-height: calc(100vh - (75px + 2rem));
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 0 !important
|
||||
// }
|
||||
// }
|
||||
// ul {
|
||||
// list-style-type: none;
|
||||
// padding: 0 0 .75rem 0;
|
||||
// li {
|
||||
|
||||
// @each $name, $colour in $statuses {
|
||||
// .status-#{$name}::after {
|
||||
// background-color: var(--colour-#{$colour});
|
||||
// border: 1px solid var(--colour-black-3);
|
||||
// border-radius: 50%;
|
||||
// content: " ";
|
||||
// display: inline-block;
|
||||
// height: .5rem;
|
||||
// margin-left: .5rem;
|
||||
// width: .5rem;
|
||||
// }
|
||||
// }
|
||||
// .status- { // don't show a border if a no status informatoin is actually included
|
||||
// border: none;
|
||||
// }
|
||||
|
||||
// details {
|
||||
// padding: 0 0 0 .5rem;
|
||||
// > summary {
|
||||
// color: var(--colour-white);
|
||||
// list-style: none;
|
||||
// display: grid;
|
||||
// grid-template-columns: auto max-content;
|
||||
|
||||
// }
|
||||
// summary::after {
|
||||
// content: '►\00a0';
|
||||
// place-self: center;
|
||||
// }
|
||||
// &[open] summary:after {
|
||||
// content: "▼\00a0";
|
||||
// place-self: center;
|
||||
// }
|
||||
// ul li {
|
||||
// padding: 0 0 0 .5rem;
|
||||
|
||||
// &.active {
|
||||
// background-color: var(--colour-white);
|
||||
// a {
|
||||
// color: var(--colour-black);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// a {
|
||||
// color: var(--colour-white);
|
||||
// display: block;
|
||||
// font-family: $font-body;
|
||||
// padding: .25rem;
|
||||
// text-decoration: none;
|
||||
// &:hover {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// }
|
||||
// &.active { // (li)
|
||||
// summary {
|
||||
// background-color: var(--colour-white);
|
||||
// a {
|
||||
// color: var(--colour-black);
|
||||
// }
|
||||
// }
|
||||
// details {
|
||||
// summary {
|
||||
// &::after {
|
||||
// color: var(--colour-black);
|
||||
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// section {
|
||||
// grid-column: 2;
|
||||
// align-items: stretch;
|
||||
// justify-content: stretch;
|
||||
// padding: 1.5rem 0 1.5rem 1.5rem;
|
||||
// object {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// }
|
||||
// h1 {
|
||||
// font-family: $font-heading;
|
||||
// padding: 0;
|
||||
// margin:0 0 .5rem 0;
|
||||
// }
|
||||
// p {
|
||||
// @extend h1;
|
||||
// margin:0 0 1rem 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -1,81 +0,0 @@
|
||||
$grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px ) !default;
|
||||
|
||||
@mixin rainbow {
|
||||
@include break(xs) { --am-bp: 'xs'; background-color: rgba(yellow, .1); }
|
||||
@include break(sm) { --am-bp: 'sm'; background-color: rgba(green, .1); }
|
||||
@include break(md) { --am-bp: 'md'; background-color: rgba(blue, .1); }
|
||||
@include break(lg) { --am-bp: 'lg'; background-color: rgba(indigo, .1); }
|
||||
@include break(xl) { --am-bp: 'xl'; background-color: rgba(violet, .1); }
|
||||
}
|
||||
|
||||
|
||||
@mixin break($bps, $points: $grid-breakpoints) {
|
||||
|
||||
@each $bp in $bps {
|
||||
|
||||
$min: 0;
|
||||
$max: 0;
|
||||
|
||||
@if str-length($bp) == 2 {
|
||||
|
||||
// only a single break point was received
|
||||
$min: map-get($points, $bp);
|
||||
@if $bp == "xl" {
|
||||
// just in case the single breakpoint is extra large,
|
||||
// we have an extra large to end of 10million-1.
|
||||
$max: 9999999px;
|
||||
} @else {
|
||||
$max: map-get($points, nth(map-keys($points), index(map-keys($points), $bp) + 1));
|
||||
}
|
||||
|
||||
} @else {
|
||||
|
||||
|
||||
@if str-slice($bp, 0, 1) == "-" {
|
||||
// no lower breakpoint was received
|
||||
$min: null;
|
||||
$max: map-get($points, str-slice($bp, 2, 3));
|
||||
|
||||
} @else {
|
||||
|
||||
$min: map-get($points, unquote(str-slice($bp, 0, 2)));
|
||||
|
||||
|
||||
@if str-length($bp) == 3 {
|
||||
// no upper break point was received
|
||||
$max: null;
|
||||
} @else {
|
||||
$max: map-get($points, str-slice($bp, 4, 5));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $min != null and $max != null {
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@mixin cf {
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user