Initial Commit
This commit is contained in:
248
src/scss/_color-samples.scss
Normal file
248
src/scss/_color-samples.scss
Normal file
@@ -0,0 +1,248 @@
|
||||
@mixin color-samples {
|
||||
|
||||
#copystatus {
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
div {
|
||||
border-radius: 1rem;
|
||||
border: 1px solid green;
|
||||
left: -50%;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
&::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
display: block;
|
||||
}
|
||||
&.succeeded {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
color: black;
|
||||
}
|
||||
&.failed {
|
||||
background-color: white;
|
||||
border-color: #f00;
|
||||
color: #f00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
color-samples {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
|
||||
|
||||
@include break(-lg) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include break(-sm) {
|
||||
grid-template-columns: auto;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
color-sample {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
border: 1px solid #CCC;
|
||||
display: grid;
|
||||
font-family: inherit;
|
||||
gap: .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";
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(2, 1.5rem) 10rem repeat(3, max-content); // 3rem repeat(2, 2rem) 1.5rem repeat(3, max-content);
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
|
||||
@include break(-lg) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
name {
|
||||
align-self: start;
|
||||
font-size: 1.25rem;
|
||||
grid-area: name;
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
rgb {
|
||||
grid-area: rgb;
|
||||
white-space: nowrap;
|
||||
}
|
||||
hex {
|
||||
grid-area: hex;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> accessibility {
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
accessibility {
|
||||
grid-area: acc;
|
||||
grid-row: 3;
|
||||
padding: .5rem 0;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: 2.5rem repeat(2, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
display: grid;
|
||||
grid-tempate-columns: auto;
|
||||
grid-template-rows: repeat(2, max-content);
|
||||
align-self: start;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
span {
|
||||
grid-row: 1;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .9rem;
|
||||
}
|
||||
small {
|
||||
text-align: center;
|
||||
grid-row: 2;
|
||||
grid-column: 1 / -1;
|
||||
font-size: .75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sample-block {
|
||||
align-self: start;
|
||||
grid-column: span 3;
|
||||
grid-row: 4;
|
||||
color-pill {
|
||||
display: grid;
|
||||
grid-gap: .5rem;
|
||||
grid-template-columns: 20px max-content auto;
|
||||
:nth-child(1) {
|
||||
align-self: center;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #CCC;
|
||||
display: inline-block;
|
||||
height: 10px;
|
||||
width: 20px;
|
||||
}
|
||||
span {
|
||||
cursor: pointer;
|
||||
.tooltip-tc {
|
||||
padding: .5rem;
|
||||
width: 20rem;
|
||||
max-width: 318px;
|
||||
height: 10.5rem;
|
||||
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-rows: repeat(3, max-content);
|
||||
.result {
|
||||
align-items: center;
|
||||
border-radius: .5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
border: 1px solid #ccc;
|
||||
padding: 0 1rem;
|
||||
text-align: center;
|
||||
&.accwaa, &.accwaaa {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
&.accbaa, &.accbaaa {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
span{ border: none;
|
||||
&:nth-child(2) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aa, .aaa {
|
||||
align-self: center;
|
||||
display: block;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.acchb {
|
||||
grid-column: 2;
|
||||
}
|
||||
.acchb, .acchw {
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
place-self: stretch;
|
||||
span {
|
||||
border: none;
|
||||
font-size: .9rem;
|
||||
width: 100%;
|
||||
&::after, &::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
small {
|
||||
font-size: .75rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
notes {
|
||||
border-top: 1px solid #ccc;
|
||||
grid-column: 1 / -1;
|
||||
padding-top: .5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
149
src/scss/_old.scss
Normal file
149
src/scss/_old.scss
Normal file
@@ -0,0 +1,149 @@
|
||||
|
||||
|
||||
// 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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
81
src/scss/common/_layout.scss
Normal file
81
src/scss/common/_layout.scss
Normal file
@@ -0,0 +1,81 @@
|
||||
$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;
|
||||
}
|
||||
}
|
||||
79
src/scss/common/_sprites.scss
Normal file
79
src/scss/common/_sprites.scss
Normal file
File diff suppressed because one or more lines are too long
229
src/scss/scaffolding.scss
Normal file
229
src/scss/scaffolding.scss
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user