Migrate CSS code to SCSS
Nathan Steel
9 months ago
parent
07a102bcf7
commit
a0dc973723
@ -1,208 +0,0 @@
|
|||||||
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
|
|
||||||
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
|
||||||
/* https://stackoverflow.com/a/45059944 */
|
|
||||||
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
|
|
||||||
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
|
|
||||||
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
|
|
||||||
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
|
|
||||||
|
|
||||||
html{
|
|
||||||
font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--sm: 0;
|
|
||||||
--md: 0;
|
|
||||||
--lg: 0;
|
|
||||||
}
|
|
||||||
:root {
|
|
||||||
--active-brightness: 0.85;
|
|
||||||
--border-radius: 8px;
|
|
||||||
--box-shadow: 0px 2px 8px;
|
|
||||||
--color-accent: #dae9f6;
|
|
||||||
--color-bg: #fff;
|
|
||||||
--color-bg-secondary: #e9e9e9;
|
|
||||||
--color-link: #118bee;
|
|
||||||
--color-secondary: #508ce2;
|
|
||||||
--color-secondary-accent: #dee9fa;
|
|
||||||
--color-shadow: #f4f4f4;
|
|
||||||
--color-table: #118bee;
|
|
||||||
--color-text: #000;
|
|
||||||
--color-text-secondary: #999;
|
|
||||||
--color-scrollbar: #cacae8;
|
|
||||||
--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
|
||||||
--hover-brightness: 1.2;
|
|
||||||
--justify-important: center;
|
|
||||||
--justify-normal: left;
|
|
||||||
--line-height: 1.5;
|
|
||||||
--width-card: 285px;
|
|
||||||
--width-card-medium: 460px;
|
|
||||||
--width-card-wide: 800px;
|
|
||||||
--width-content: 1080px;
|
|
||||||
}
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root[color-mode="user"] {
|
|
||||||
--color-accent: #0097fc;
|
|
||||||
--color-bg: #333;
|
|
||||||
--color-bg-secondary: #555;
|
|
||||||
--color-link: #0097fc;
|
|
||||||
--color-secondary: #e20de9;
|
|
||||||
--color-secondary-accent: #e20de9;
|
|
||||||
--color-shadow: #bbbbbb20;
|
|
||||||
--color-table: #0097fc;
|
|
||||||
--color-text: #f7f7f7;
|
|
||||||
--color-text-secondary: #aaa;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.container{
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: var(--width-content);
|
|
||||||
padding: 1.4rem 1rem;
|
|
||||||
/* overflow: auto; */
|
|
||||||
}
|
|
||||||
.container--no-topgap{
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
.container--no-botgap{
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
.container--no-gap{
|
|
||||||
/* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.row {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: flex-start;
|
|
||||||
flex-direction: row;
|
|
||||||
row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
|
|
||||||
}
|
|
||||||
|
|
||||||
.row+.row{
|
|
||||||
margin-top: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
|
|
||||||
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
|
|
||||||
/* .col>*{ */
|
|
||||||
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
|
|
||||||
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
|
|
||||||
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* inline elements */
|
|
||||||
.col img{
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
|
|
||||||
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
|
|
||||||
.row [class^="col"]{
|
|
||||||
padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
|
|
||||||
padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
|
|
||||||
|
|
||||||
/* display: flex; */
|
|
||||||
/* flex-wrap: wrap; */
|
|
||||||
min-height: 0.125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.row--scroll{
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
|
|
||||||
justify-content: left;
|
|
||||||
/* Scrollbar stuff */
|
|
||||||
scrollbar-color: #444 transparent;
|
|
||||||
scrollbar-width: thin;
|
|
||||||
padding-bottom: .5rem;
|
|
||||||
}
|
|
||||||
.row--scroll [class^="col"]{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.col{
|
|
||||||
flex: 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col-1,
|
|
||||||
.col-2,
|
|
||||||
.col-3,
|
|
||||||
.col-4,
|
|
||||||
.col-5,
|
|
||||||
.col-6,
|
|
||||||
.col-7,
|
|
||||||
.col-8,
|
|
||||||
.col-9,
|
|
||||||
.col-10,
|
|
||||||
.col-11,
|
|
||||||
.col-12 {
|
|
||||||
flex: 0 0 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* (100/12) * x = the flex % */
|
|
||||||
.col-sm-1 { flex: 0 0 8.33%; }
|
|
||||||
.col-sm-2 { flex: 0 0 16.66%; }
|
|
||||||
.col-sm-3 { flex: 0 0 25%; }
|
|
||||||
.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
|
|
||||||
.col-sm-4 { flex: 0 0 33.33%; }
|
|
||||||
.col-sm-5 { flex: 0 0 41.66%; }
|
|
||||||
.col-sm-6 { flex: 0 0 50%; }
|
|
||||||
.col-sm-7 { flex: 0 0 58.33%; }
|
|
||||||
.col-sm-8 { flex: 0 0 66.66%; }
|
|
||||||
.col-sm-9 { flex: 0 0 75%; }
|
|
||||||
.col-sm-10 { flex: 0 0 83.33%; }
|
|
||||||
.col-sm-11 { flex: 0 0 91.66%; }
|
|
||||||
.col-sm-12 { flex: 0 0 100%; }
|
|
||||||
|
|
||||||
.hidden-sm {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 33.75rem) { /* ~540px */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 45rem) { /* ~720px */
|
|
||||||
.col-1 { flex: 0 0 8.33%; }
|
|
||||||
.col-2 { flex: 0 0 16.66%; }
|
|
||||||
.col-3 { flex: 0 0 25%; }
|
|
||||||
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
|
|
||||||
.col-4 { flex: 0 0 33.33%; }
|
|
||||||
.col-5 { flex: 0 0 41.66%; }
|
|
||||||
.col-6 { flex: 0 0 50%; }
|
|
||||||
.col-7 { flex: 0 0 58.33%; }
|
|
||||||
.col-8 { flex: 0 0 66.66%; }
|
|
||||||
.col-9 { flex: 0 0 75%; }
|
|
||||||
.col-10 { flex: 0 0 83.33%; }
|
|
||||||
.col-11 { flex: 0 0 91.66%; }
|
|
||||||
.col-12 { flex: 0 0 100%; }
|
|
||||||
|
|
||||||
.hidden-sm { display: block; }
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 60em) { /* ~960px */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Try to avoid !important, have each rule set to keep track of */
|
|
||||||
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
|
|
||||||
padding: 0; /* In-case elements want to be full-width, touching, etc */
|
|
||||||
}
|
|
||||||
|
|
||||||
.row--align-center{ align-items: center;}
|
|
||||||
.col--align-center{ align-self: center; align-self: anchor-center}
|
|
||||||
|
|
||||||
/* Sort into col/sm areas with media queries */
|
|
||||||
.col-grow, .col-grow-sm
|
|
||||||
,.col-fill, .col-fill-sm{
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sourceRoot":"","sources":[],"names":[],"mappings":"","file":"main.css"}
|
||||||
File diff suppressed because one or more lines are too long
@ -1,503 +0,0 @@
|
|||||||
/* Based on MVP.css v1.15 - https://github.com/andybrewer/mvp */
|
|
||||||
/* Altered to BEM, with other changes, and my own flex-box grid system */
|
|
||||||
|
|
||||||
*{
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
html{scroll-behavior: smooth}
|
|
||||||
@media (prefers-reduced-motion: reduce){
|
|
||||||
html{scroll-behavior: auto}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer fixed to bottom */
|
|
||||||
html,body{height: 100%}
|
|
||||||
body{display: flex;flex-direction: column;}
|
|
||||||
main, .main{ flex: 1 0 auto }
|
|
||||||
|
|
||||||
|
|
||||||
/* Layout */
|
|
||||||
body {
|
|
||||||
background: var(--color-bg);
|
|
||||||
color: var(--color-text);
|
|
||||||
font-family: var(--font-family);
|
|
||||||
line-height: var(--line-height);
|
|
||||||
margin: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Alerts */
|
|
||||||
.alert{
|
|
||||||
background: var(--color-secondary-accent);
|
|
||||||
border-left: 4px solid var(--color-secondary);
|
|
||||||
border-right: 4px solid var(--color-secondary);
|
|
||||||
padding: .1rem .8rem;
|
|
||||||
margin-bottom:.5rem;
|
|
||||||
}
|
|
||||||
.alert--error{
|
|
||||||
background: #f05870;
|
|
||||||
border-color: #e90d30;
|
|
||||||
}
|
|
||||||
.alert--warning{
|
|
||||||
background: #e8e85b;
|
|
||||||
border-color: #ddde11;
|
|
||||||
}
|
|
||||||
.alert--success{
|
|
||||||
background: #60c572;
|
|
||||||
border-color: #18ab34;
|
|
||||||
}
|
|
||||||
/* /Alerts */
|
|
||||||
hr{
|
|
||||||
background-color: var(--color-bg-secondary);
|
|
||||||
border: none;
|
|
||||||
height: 1px;
|
|
||||||
width: 100%;
|
|
||||||
max-width: var(--width-content);
|
|
||||||
margin: .5rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
section img,
|
|
||||||
article img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
section pre {
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Cards is a row */
|
|
||||||
/* Best to do this with grid, but there's less browser support... */
|
|
||||||
.card{
|
|
||||||
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
|
|
||||||
border: 1px solid var(--color-bg-secondary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
|
||||||
padding: 1.25rem;
|
|
||||||
/* flex: 0 0 var(--width-card); */
|
|
||||||
background: #FFF;
|
|
||||||
|
|
||||||
display: block !important; /* Unset row/col default */
|
|
||||||
}
|
|
||||||
.card:hover {
|
|
||||||
box-shadow: var(--box-shadow) var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
.row--cards{
|
|
||||||
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
|
|
||||||
}
|
|
||||||
.row--cards .card{
|
|
||||||
height: 100%; /* To make multiple cards next to each other 'same' height */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Nav */
|
|
||||||
.nav a{
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.nav a{
|
|
||||||
color: #CCC;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Lists */
|
|
||||||
ol li,
|
|
||||||
ul li {
|
|
||||||
padding: 0.2rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-bullet-point{
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
/* Inline lists */
|
|
||||||
.inline-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-list li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0.5rem;
|
|
||||||
position: relative;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
.inline-list>li{ /* Only affects first level li */
|
|
||||||
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
|
|
||||||
/* Nav/inline-list Dropdown */
|
|
||||||
.inline-list li:hover ul {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ?? maybe change */
|
|
||||||
.inline-list li ul {
|
|
||||||
background: var(--color-bg);
|
|
||||||
border: 1px solid var(--color-bg-secondary);
|
|
||||||
border-top: 10px solid transparent;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
display: none;
|
|
||||||
height: auto;
|
|
||||||
padding: .5rem 1rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
|
|
||||||
white-space: nowrap;
|
|
||||||
width: auto;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
/* Centre */
|
|
||||||
/* left: 50%;
|
|
||||||
transform: translate(-50%, 0); */
|
|
||||||
/* Left */
|
|
||||||
left: 0;
|
|
||||||
/* Right */
|
|
||||||
/* transform: translate(-50%, 0); */
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-list li ul::before {
|
|
||||||
/* fill gap above to make mousing over them easier */
|
|
||||||
/* background-color: green; */
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: -0.5rem;
|
|
||||||
height: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inline-list li ul li,
|
|
||||||
.inline-list li ul li a {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Typography */
|
|
||||||
p {
|
|
||||||
padding: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
p+p, h1+p{ /* Para after para should space out */
|
|
||||||
margin-top: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
|
|
||||||
padding: 0.1rem;
|
|
||||||
background: #ff8c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
small {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
code,samp {
|
|
||||||
font-family: monospace;
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
color: var(--color-text);
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0.1rem;
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
margin: .5rem 0;
|
|
||||||
padding: 0.5rem 2rem;
|
|
||||||
display: block;
|
|
||||||
font-size: .9rem;
|
|
||||||
line-height: 1.3rem;
|
|
||||||
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
color: var(--color-text);
|
|
||||||
overflow-x: auto;
|
|
||||||
|
|
||||||
white-space: pre-wrap;
|
|
||||||
border: 1px solid #c1cfda;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
details {
|
|
||||||
margin: .7rem 0;
|
|
||||||
}
|
|
||||||
details summary {
|
|
||||||
margin-bottom: .8rem;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Links */
|
|
||||||
a{
|
|
||||||
color: var(--color-link);
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
filter: brightness(var(--hover-brightness));
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
filter: brightness(var(--active-brightness));
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Buttons/Inputs */
|
|
||||||
.button,
|
|
||||||
button,
|
|
||||||
input[type="submit"]
|
|
||||||
{
|
|
||||||
background: #FEFEFE;
|
|
||||||
border: 2px solid var(--color-link);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
display: inline-block;
|
|
||||||
font-size: .9rem;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: var(--line-height);
|
|
||||||
margin-top: 0.5rem;
|
|
||||||
padding: .6rem 1.2rem;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button + .button,
|
|
||||||
button + button{
|
|
||||||
margin-left: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--small,
|
|
||||||
button.button--small,
|
|
||||||
input[type="submit"].button--small{
|
|
||||||
padding: .2rem 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button,
|
|
||||||
button,
|
|
||||||
input[type="submit"]
|
|
||||||
{
|
|
||||||
font-family: var(--font-family);
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover,
|
|
||||||
button:hover,
|
|
||||||
input[type="submit"]:hover
|
|
||||||
{
|
|
||||||
cursor: pointer;
|
|
||||||
filter: brightness(var(--hover-brightness));
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:active,
|
|
||||||
button:active,
|
|
||||||
input[type="submit"]:active
|
|
||||||
{
|
|
||||||
filter: brightness(var(--active-brightness));
|
|
||||||
}
|
|
||||||
|
|
||||||
.button--blue,
|
|
||||||
button.button--blue,
|
|
||||||
input[type="submit"].button--blue
|
|
||||||
{
|
|
||||||
background-color: var(--color-link);
|
|
||||||
color: var(--color-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Images */
|
|
||||||
figure {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure figcaption {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Forms */
|
|
||||||
button:disabled,
|
|
||||||
input:disabled {
|
|
||||||
background: var(--color-bg-secondary);
|
|
||||||
border-color: var(--color-bg-secondary);
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
button[disabled]:hover,
|
|
||||||
input[type="submit"][disabled]:hover {
|
|
||||||
filter: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
border: 1px solid var(--color-bg-secondary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
|
||||||
display: block;
|
|
||||||
max-width: var(--width-card-wide);
|
|
||||||
min-width: var(--width-card);
|
|
||||||
padding: 1.5rem;
|
|
||||||
text-align: var(--justify-normal);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
form header {
|
|
||||||
margin: 1.5rem 0;
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
label,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
display: block;
|
|
||||||
font-size: inherit;
|
|
||||||
max-width: var(--width-card-wide);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="checkbox"]+label,
|
|
||||||
input[type="radio"]+label {
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: normal;
|
|
||||||
position: relative;
|
|
||||||
top: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
padding: 0.4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
border: 1px solid var(--color-bg-secondary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"],
|
|
||||||
input[type="password"]
|
|
||||||
textarea {
|
|
||||||
width: calc(100% - 1.6rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[readonly],
|
|
||||||
textarea[readonly] {
|
|
||||||
background-color: var(--color-bg-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: 0.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Popups */
|
|
||||||
.modal{
|
|
||||||
border: 1px solid var(--color-bg-secondary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
box-shadow: var(--box-shadow) var(--color-shadow);
|
|
||||||
position: fixed;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 50%;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tables */
|
|
||||||
.table-container{
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border: 1px solid var(--color-bg-secondary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
border-spacing: 0;
|
|
||||||
max-width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
text-align: left;
|
|
||||||
border-collapse: collapse;
|
|
||||||
overflow-wrap: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
table td,
|
|
||||||
table th,
|
|
||||||
table tr {
|
|
||||||
padding: 0.4rem 0.8rem;
|
|
||||||
text-align: var(--justify-important);
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr {
|
|
||||||
background-color: var(--color-table);
|
|
||||||
/* border-radius: var(--border-radius); */
|
|
||||||
color: var(--color-bg);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
table thead tr {
|
|
||||||
border-top-left-radius: var(--border-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody tr:nth-child(even) {
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
}
|
|
||||||
tbody tr:nth-child(odd) {
|
|
||||||
background-color: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Quotes */
|
|
||||||
blockquote {
|
|
||||||
display: block;
|
|
||||||
font-size: x-large;
|
|
||||||
line-height: var(--line-height);
|
|
||||||
margin: 1rem auto;
|
|
||||||
max-width: var(--width-card-medium);
|
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
text-align: var(--justify-important);
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote footer{
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
display: block;
|
|
||||||
font-size: small;
|
|
||||||
line-height: var(--line-height);
|
|
||||||
padding: 1.5rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Misc helpers */
|
|
||||||
.tar{ text-align: right; }
|
|
||||||
|
|
||||||
.no-padd{ padding: 0; }
|
|
||||||
|
|
||||||
/* Tags */
|
|
||||||
.tag{
|
|
||||||
background-color: var(--color-secondary);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
color: var(--color-bg);
|
|
||||||
font-size: xx-small;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 0.2rem 1rem;
|
|
||||||
position: relative;
|
|
||||||
top:-2px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.banner{
|
|
||||||
background: #eee;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.hide{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Links */
|
||||||
|
a{
|
||||||
|
color: $color-link;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
filter: brightness($hover-brightness);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
filter: brightness($active-brightness);
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
html{scroll-behavior: smooth}
|
||||||
|
@media (prefers-reduced-motion: reduce){
|
||||||
|
html{scroll-behavior: auto}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer fixed to bottom */
|
||||||
|
html,body{height: 100%}
|
||||||
|
body{display: flex;flex-direction: column;}
|
||||||
|
main, .main{ flex: 1 0 auto }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: $color-bg;
|
||||||
|
color: $color-text;
|
||||||
|
font-family: $font-family;
|
||||||
|
line-height: $line-height;
|
||||||
|
overflow-x: hidden;
|
||||||
|
@include reset; /* Margin 0, padding 0. Testing new @use/@forward as globals aren't allowed... */
|
||||||
|
}
|
||||||
@ -0,0 +1,166 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
|
||||||
|
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
||||||
|
/* https://stackoverflow.com/a/45059944 */
|
||||||
|
/* Flex grid, done similarly to a float: left. So content needs to be within the grid */
|
||||||
|
/* -ms-grid-columns: 1fr (20px 1fr)[3]; */
|
||||||
|
/* grid-template-columns: 1fr repeat(3, 20px 1fr); */
|
||||||
|
/* Would prefer to use grid, but there's less support for earlier browsers, so using flex (for now) */
|
||||||
|
|
||||||
|
html{
|
||||||
|
font-size: 18px; /* rem based on this (root element), em is based on the parent element of wherever the change is */
|
||||||
|
}
|
||||||
|
|
||||||
|
.container{
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: $width-content;
|
||||||
|
padding: 1.4rem 1rem;
|
||||||
|
/* overflow: auto; */
|
||||||
|
}
|
||||||
|
.container--no-topgap{
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
.container--no-botgap{
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
.container--no-gap{
|
||||||
|
/* Still has right/left padding, otherwise page looks odd. Can be omitted with no-padd */
|
||||||
|
padding-bottom: 0;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.row {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: row;
|
||||||
|
row-gap: 1.25rem; /* In-case of flex-wrap content, space it out. Padding left+right */
|
||||||
|
}
|
||||||
|
|
||||||
|
.row+.row{
|
||||||
|
margin-top: 1.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
|
||||||
|
/* Would use :not(x y z) for exceptions, but no i.e. support, and poor support on "older" browsers */
|
||||||
|
/* .col>*{ */
|
||||||
|
.col>address, .col>article, .col>aside, .col>blockquote, .col>canvas, .col>dd, .col>div, .col>dl, .col>dt, .col>fieldset, .col>figcaption,
|
||||||
|
.col>figure, .col>footer, .col>form, .col>h1, .col>h2, .col>h3, .col>h4, .col>h5, .col>h6, .col>header, .col>hr, .col>li, .col>main,
|
||||||
|
.col>main, .col>nav, .col>noscript, .col>ol, .col>p, .col>pre, .col>section, .col>table, .col>tfoot, .col>ul, .col>video{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
/* inline elements */
|
||||||
|
.col img{
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Col elements with row should be flex elements to allow flex (eg. section, etc are block by default) */
|
||||||
|
/* MAYBE REMOVE THIS, IF YOU WANT ROW FUNCTIONALITY IN A ROW, ADD ANOTHER ROW!!! */
|
||||||
|
.row [class^="col"]{
|
||||||
|
padding-right: 0.625rem; /* ~20px gap = 20/16(html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
|
||||||
|
padding-left: 0.625rem; /* In place of gap, so it can be full width rows */
|
||||||
|
|
||||||
|
/* display: flex; */
|
||||||
|
/* flex-wrap: wrap; */
|
||||||
|
min-height: 0.125rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.row--scroll{
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: scroll; /* Used instead of auto, as auto changed the height of elements if a tabgroup toggled */
|
||||||
|
justify-content: left;
|
||||||
|
/* Scrollbar stuff */
|
||||||
|
scrollbar-color: #444 transparent;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
padding-bottom: .5rem;
|
||||||
|
}
|
||||||
|
.row--scroll [class^="col"]{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.col{
|
||||||
|
flex: 0 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1,
|
||||||
|
.col-2,
|
||||||
|
.col-3,
|
||||||
|
.col-4,
|
||||||
|
.col-5,
|
||||||
|
.col-6,
|
||||||
|
.col-7,
|
||||||
|
.col-8,
|
||||||
|
.col-9,
|
||||||
|
.col-10,
|
||||||
|
.col-11,
|
||||||
|
.col-12 {
|
||||||
|
flex: 0 0 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* (100/12) * x = the flex % */
|
||||||
|
.col-sm-1 { flex: 0 0 8.33%; }
|
||||||
|
.col-sm-2 { flex: 0 0 16.66%; }
|
||||||
|
.col-sm-3 { flex: 0 0 25%; }
|
||||||
|
.col-sm-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
|
||||||
|
.col-sm-4 { flex: 0 0 33.33%; }
|
||||||
|
.col-sm-5 { flex: 0 0 41.66%; }
|
||||||
|
.col-sm-6 { flex: 0 0 50%; }
|
||||||
|
.col-sm-7 { flex: 0 0 58.33%; }
|
||||||
|
.col-sm-8 { flex: 0 0 66.66%; }
|
||||||
|
.col-sm-9 { flex: 0 0 75%; }
|
||||||
|
.col-sm-10 { flex: 0 0 83.33%; }
|
||||||
|
.col-sm-11 { flex: 0 0 91.66%; }
|
||||||
|
.col-sm-12 { flex: 0 0 100%; }
|
||||||
|
|
||||||
|
.hidden-sm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 33.75rem) { /* ~540px */
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 45rem) { /* ~720px */
|
||||||
|
.col-1 { flex: 0 0 8.33%; }
|
||||||
|
.col-2 { flex: 0 0 16.66%; }
|
||||||
|
.col-3 { flex: 0 0 25%; }
|
||||||
|
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page */
|
||||||
|
.col-4 { flex: 0 0 33.33%; }
|
||||||
|
.col-5 { flex: 0 0 41.66%; }
|
||||||
|
.col-6 { flex: 0 0 50%; }
|
||||||
|
.col-7 { flex: 0 0 58.33%; }
|
||||||
|
.col-8 { flex: 0 0 66.66%; }
|
||||||
|
.col-9 { flex: 0 0 75%; }
|
||||||
|
.col-10 { flex: 0 0 83.33%; }
|
||||||
|
.col-11 { flex: 0 0 91.66%; }
|
||||||
|
.col-12 { flex: 0 0 100%; }
|
||||||
|
|
||||||
|
.hidden-sm { display: block; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 60em) { /* ~960px */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Try to avoid !important, have each rule set to keep track of */
|
||||||
|
.no-padd, .row.no-padd [class^="col"], .row [class^="col"].no-padd{
|
||||||
|
padding: 0; /* In-case elements want to be full-width, touching, etc */
|
||||||
|
}
|
||||||
|
|
||||||
|
.row--align-center{ align-items: center;}
|
||||||
|
.col--align-center{ align-self: center; align-self: anchor-center}
|
||||||
|
|
||||||
|
/* Sort into col/sm areas with media queries */
|
||||||
|
.col-grow, .col-grow-sm
|
||||||
|
,.col-fill, .col-fill-sm{
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Images */
|
||||||
|
figure {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure figcaption {
|
||||||
|
color: $color-text-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
section img,
|
||||||
|
article img {
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
@use 'thanks';
|
||||||
|
|
||||||
|
@use 'reset';
|
||||||
|
@use 'base';
|
||||||
|
@use 'grid';
|
||||||
|
|
||||||
|
@use 'typography';
|
||||||
|
@use 'anchor';
|
||||||
|
@use 'image';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
// With CSS inspired or taken from:
|
||||||
|
// https://github.com/andybrewer/mvp
|
||||||
|
// https://piccalil.li/blog/a-more-modern-css-reset/
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
p {
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
p+p, h1+p{ /* Para after para should space out */
|
||||||
|
margin-top: .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
mark, .highlight{ /* Useful for search result highlighting, and general hightlights that aren't strong */
|
||||||
|
padding: 0.1rem;
|
||||||
|
background: #ff8c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
color: $color-text-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr{
|
||||||
|
background-color: $color-bg-secondary;
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: $width-content;
|
||||||
|
margin: .5rem auto;
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
details {
|
||||||
|
margin: .7rem 0;
|
||||||
|
}
|
||||||
|
details summary {
|
||||||
|
margin-bottom: .8rem;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
.alert{
|
||||||
|
background: $color-secondary-accent;
|
||||||
|
border-left: 4px solid $color-secondary;
|
||||||
|
border-right: 4px solid $color-secondary;
|
||||||
|
padding: .1rem .8rem;
|
||||||
|
margin-bottom:.5rem;
|
||||||
|
}
|
||||||
|
.alert--error{
|
||||||
|
background: #f05870;
|
||||||
|
border-color: #e90d30;
|
||||||
|
}
|
||||||
|
.alert--warning{
|
||||||
|
background: #e8e85b;
|
||||||
|
border-color: #ddde11;
|
||||||
|
}
|
||||||
|
.alert--success{
|
||||||
|
background: #60c572;
|
||||||
|
border-color: #18ab34;
|
||||||
|
}
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
.banner{
|
||||||
|
width: 100%;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
@ -0,0 +1,73 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Buttons/Inputs */
|
||||||
|
.button,
|
||||||
|
button,
|
||||||
|
input[type="submit"]
|
||||||
|
{
|
||||||
|
background: #FEFEFE;
|
||||||
|
border: 2px solid $color-link;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: .9rem;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: $line-height;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
padding: .6rem 1.2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button + .button,
|
||||||
|
button + button{
|
||||||
|
margin-left: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--small,
|
||||||
|
button.button--small,
|
||||||
|
input[type="submit"].button--small{
|
||||||
|
padding: .2rem 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button,
|
||||||
|
button,
|
||||||
|
input[type="submit"]
|
||||||
|
{
|
||||||
|
font-family: $font-family;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
button:hover,
|
||||||
|
input[type="submit"]:hover
|
||||||
|
{
|
||||||
|
cursor: pointer;
|
||||||
|
filter: brightness($hover-brightness);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active,
|
||||||
|
button:active,
|
||||||
|
input[type="submit"]:active
|
||||||
|
{
|
||||||
|
filter: brightness($active-brightness);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--blue,
|
||||||
|
button.button--blue,
|
||||||
|
input[type="submit"].button--blue
|
||||||
|
{
|
||||||
|
background-color: $color-link;
|
||||||
|
color: $color-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button--disabled,
|
||||||
|
button:disabled,
|
||||||
|
input:disabled {
|
||||||
|
background: $color-bg-secondary;
|
||||||
|
border-color: $color-bg-secondary;
|
||||||
|
color: $color-text-secondary;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.button--disabled:hover,
|
||||||
|
button[disabled]:hover,
|
||||||
|
input[type="submit"][disabled]:hover {
|
||||||
|
filter: none;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Cards is a row */
|
||||||
|
/* Best to do this with grid, but there's less browser support... */
|
||||||
|
.card{
|
||||||
|
/* As not using grid atm, no solution to keep cards the same size when flex-wrapped */
|
||||||
|
border: 1px solid $color-bg-secondary;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
box-shadow: $box-shadow $color-shadow;
|
||||||
|
padding: 1.25rem;
|
||||||
|
/* flex: 0 0 $width-card; */
|
||||||
|
background: #FFF;
|
||||||
|
|
||||||
|
display: block !important; /* Unset row/col default */
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
box-shadow: $box-shadow $color-bg-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row--cards{
|
||||||
|
align-items: stretch; /* For cards to be "same height", requires the height 100% on card */
|
||||||
|
}
|
||||||
|
.row--cards .card{
|
||||||
|
height: 100%; /* To make multiple cards next to each other 'same' height */
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
code,samp {
|
||||||
|
font-family: monospace;
|
||||||
|
background-color: $color-accent;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $color-text;
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0.1rem;
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
}
|
||||||
|
pre {
|
||||||
|
margin: .5rem 0;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
display: block;
|
||||||
|
font-size: .9rem;
|
||||||
|
line-height: 1.3rem;
|
||||||
|
|
||||||
|
background-color: $color-accent;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $color-text;
|
||||||
|
overflow-x: auto;
|
||||||
|
|
||||||
|
white-space: pre-wrap;
|
||||||
|
border: 1px solid #c1cfda;
|
||||||
|
}
|
||||||
|
|
||||||
|
section pre {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
form {
|
||||||
|
border: 1px solid $color-bg-secondary;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
box-shadow: $box-shadow $color-shadow;
|
||||||
|
display: block;
|
||||||
|
max-width: $width-card-wide;
|
||||||
|
min-width: $width-card;
|
||||||
|
padding: 1.5rem;
|
||||||
|
text-align: $justify-normal;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
form header {
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
label,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
display: block;
|
||||||
|
font-size: inherit;
|
||||||
|
max-width: $width-card-wide;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="checkbox"]+label,
|
||||||
|
input[type="radio"]+label {
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: normal;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
padding: 0.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
border: 1px solid $color-bg-secondary;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"],
|
||||||
|
input[type="password"]
|
||||||
|
textarea {
|
||||||
|
width: calc(100% - 1.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
input[readonly],
|
||||||
|
textarea[readonly] {
|
||||||
|
background-color: $color-bg-secondary;
|
||||||
|
}
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Lists */
|
||||||
|
ol li,
|
||||||
|
ul li {
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-bullet-point{
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Inline lists */
|
||||||
|
.inline-list {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin-left: -0.5rem; /* To offset the start of li margin. Little jank */
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-list li {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 0 0.5rem;
|
||||||
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.inline-list>li{ /* Only affects first level li */
|
||||||
|
padding: 0; /* So that dropdowns, and nav areas aren't messed up by 'random' padding that on standard list items */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* DROPDOWN(S), CHANGE CLASS to dropdown, ALSO ADD MEGAMENU STYLING */
|
||||||
|
/* Nav/inline-list Dropdown */
|
||||||
|
.inline-list li:hover ul {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ?? maybe change */
|
||||||
|
.inline-list li ul {
|
||||||
|
background: $color-bg;
|
||||||
|
border: 1px solid $color-bg-secondary;
|
||||||
|
border-top: 10px solid transparent;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
display: none;
|
||||||
|
height: auto;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 2rem; /* THIS IS UNIQUE FOR EACH USE-CASE, WILL NEED ALTERING PER */
|
||||||
|
white-space: nowrap;
|
||||||
|
width: auto;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
/* Centre */
|
||||||
|
/* left: 50%;
|
||||||
|
transform: translate(-50%, 0); */
|
||||||
|
/* Left */
|
||||||
|
left: 0;
|
||||||
|
/* Right */
|
||||||
|
/* transform: translate(-50%, 0); */
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-list li ul::before {
|
||||||
|
/* fill gap above to make mousing over them easier */
|
||||||
|
/* background-color: green; */
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: -0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inline-list li ul li,
|
||||||
|
.inline-list li ul li a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
@use 'button';
|
||||||
|
@use 'card';
|
||||||
|
@use 'form';
|
||||||
|
@use 'alert';
|
||||||
|
@use 'list';
|
||||||
|
@use 'modal';
|
||||||
|
@use 'quote';
|
||||||
|
@use 'table';
|
||||||
|
@use 'tag';
|
||||||
|
@use 'code';
|
||||||
|
@use 'banner';
|
||||||
|
@use 'accordion';
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Popups */
|
||||||
|
.modal{
|
||||||
|
border: 1px solid $color-bg-secondary;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
box-shadow: $box-shadow $color-shadow;
|
||||||
|
position: fixed;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
width: 50%;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Quotes */
|
||||||
|
blockquote {
|
||||||
|
display: block;
|
||||||
|
font-size: x-large;
|
||||||
|
line-height: $line-height;
|
||||||
|
margin: 1rem auto;
|
||||||
|
max-width: $width-card-medium;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
text-align: $justify-important;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote footer{
|
||||||
|
color: $color-text-secondary;
|
||||||
|
display: block;
|
||||||
|
font-size: small;
|
||||||
|
line-height: $line-height;
|
||||||
|
padding: 1.5rem 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Tables */
|
||||||
|
.table-container{
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border: 1px solid $color-bg-secondary;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
border-spacing: 0;
|
||||||
|
max-width: 100%;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
text-align: left;
|
||||||
|
border-collapse: collapse;
|
||||||
|
overflow-wrap: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
table td,
|
||||||
|
table th,
|
||||||
|
table tr {
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
text-align: $justify-important;
|
||||||
|
}
|
||||||
|
|
||||||
|
table thead tr {
|
||||||
|
background-color: $color-table;
|
||||||
|
/* border-radius: $border-radius; */
|
||||||
|
color: $color-bg;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
table thead tr {
|
||||||
|
border-top-left-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
|
tbody tr:nth-child(even) {
|
||||||
|
background-color: $color-accent;
|
||||||
|
}
|
||||||
|
tbody tr:nth-child(odd) {
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Tags */
|
||||||
|
.tag{
|
||||||
|
background-color: $color-secondary;
|
||||||
|
border-radius: $border-radius;
|
||||||
|
color: $color-bg;
|
||||||
|
font-size: xx-small;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.2rem 1rem;
|
||||||
|
position: relative;
|
||||||
|
top:-2px;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Misc helpers */
|
||||||
|
.tar{ text-align: right; }
|
||||||
|
|
||||||
|
.no-padd{ padding: 0; }
|
||||||
|
|
||||||
|
.hide{ display: none; }
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
@use 'header';
|
||||||
|
@use 'footer';
|
||||||
|
@use 'nav';
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
/* Nav */
|
||||||
|
.nav a{
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.nav a{
|
||||||
|
color: #CCC;
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
// Variables first 'cause you never know where you'll need 'em
|
||||||
|
// @use 'utilities/main_utilities';
|
||||||
|
|
||||||
|
// Get the reset it
|
||||||
|
@use 'base/main_base';
|
||||||
|
@use 'component/main_component';
|
||||||
|
@use 'layout/main_layout';
|
||||||
|
@use 'page/main_page';
|
||||||
|
|
||||||
|
@use 'helpers/main_helpers';
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
@use '../utilities/main_utilities' as *;
|
||||||
|
|
||||||
|
// Page specific stuff
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
@forward 'variables';
|
||||||
|
@forward 'mixins';
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
@mixin reset {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
// Variables
|
||||||
|
$media-xs: 0;
|
||||||
|
$media-sm: 0;
|
||||||
|
$media-md: 0;
|
||||||
|
$media-lg: 0;
|
||||||
|
$media-xl: 0;
|
||||||
|
|
||||||
|
$active-brightness: .85;
|
||||||
|
$hover-brightness: 1.2;
|
||||||
|
|
||||||
|
$border-radius: 8px;
|
||||||
|
$box-shadow: 0 2px 8px;
|
||||||
|
$color-accent: #dae9f6;
|
||||||
|
$color-accent--dark: #0097fc;
|
||||||
|
$color-bg: #fff;
|
||||||
|
$color-bg--dark: #333;
|
||||||
|
$color-bg-secondary: #e9e9e9;
|
||||||
|
$color-bg-secondary--dark: #555;
|
||||||
|
$color-link: #118bee;
|
||||||
|
$color-link--dark: #0097fc;
|
||||||
|
$color-secondary: #508ce2;
|
||||||
|
$color-secondary--dark: #e20de9;
|
||||||
|
$color-secondary-accent: #dee9fa;
|
||||||
|
$color-secondary-accent--dark: #e20de9;
|
||||||
|
$color-shadow: #f4f4f4;
|
||||||
|
$color-shadow--dark: #bbbbbb20;
|
||||||
|
$color-table: #118bee;
|
||||||
|
$color-table--dark: #0097fc;
|
||||||
|
$color-text: #000;
|
||||||
|
$color-text--dark: #f7f7f7;
|
||||||
|
$color-text-secondary: #999;
|
||||||
|
$color-text-secondary--dark: #aaa;
|
||||||
|
|
||||||
|
$color-scrollbar: #cacae8;
|
||||||
|
$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||||
|
|
||||||
|
$justify-important: center;
|
||||||
|
$justify-normal: left;
|
||||||
|
$line-height: 1.5;
|
||||||
|
$width-card: 285px;
|
||||||
|
$width-card-medium: 460px;
|
||||||
|
$width-card-wide: 800px;
|
||||||
|
$width-content: 1080px;
|
||||||
Loading…
Reference in New Issue