|
|
|
|
@ -1,4 +1,5 @@
|
|
|
|
|
@use '../utilities/main_utilities' as *;
|
|
|
|
|
@use "sass:math";
|
|
|
|
|
|
|
|
|
|
/* https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ */
|
|
|
|
|
/* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
|
|
|
|
|
@ -8,14 +9,34 @@
|
|
|
|
|
/* 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 */
|
|
|
|
|
|
|
|
|
|
// Add the content to whichever col-xx-xx
|
|
|
|
|
@mixin col-width($width: 100%) {
|
|
|
|
|
flex: 0 0 $width* 1%; // *1% just to make it a % value, #{$width}% wasn't working
|
|
|
|
|
max-width: $width * 1%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Add all the cols 1..12 of -xs -md -xl, etc. to stylesheet/media without needing to copy/paste or mass modify
|
|
|
|
|
// Just convienient
|
|
|
|
|
@mixin add-cols($modifier: ''){ // $modifier: '-md', etc.
|
|
|
|
|
$max-cols: 12;
|
|
|
|
|
$col-width: math.div(100,$max-cols); // 100/12 = 8.33% Then multiply this by the current col count 1..12
|
|
|
|
|
|
|
|
|
|
@for $i from 1 through 12 {
|
|
|
|
|
$width: $col-width * $i;
|
|
|
|
|
.col#{$modifier}-#{$i} {
|
|
|
|
|
@include col-width($width);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container{
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: $width-content;
|
|
|
|
|
padding: 1.4rem 1rem;
|
|
|
|
|
padding: rems(22px) rems(16px);
|
|
|
|
|
position: relative; // Default static doesn't like inverse margins atop other block elements
|
|
|
|
|
/* overflow: auto; */
|
|
|
|
|
}
|
|
|
|
|
.container--no-topgap{
|
|
|
|
|
@ -30,20 +51,26 @@ html{
|
|
|
|
|
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-gap: rems(19px); /* In-case of flex-wrap content, space it out. Padding left+right */
|
|
|
|
|
|
|
|
|
|
// margin-right: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
|
|
|
|
|
// margin-left: -#{$grid-gap}; // Negative margin equal to the padding on cols, to allow elements not in col to be used 1:1 in rows
|
|
|
|
|
margin-right: #{$grid-gap--numeric * -.5}rem;
|
|
|
|
|
margin-left: #{$grid-gap--numeric * -.5}rem;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.row+.row{
|
|
|
|
|
margin-top: 1.4rem;
|
|
|
|
|
margin-top: rems(22px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* To make (first level) elements fit within the flex container (h1s, paras, etc. don't use all space by default) */
|
|
|
|
|
@ -55,7 +82,7 @@ html{
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
/* inline elements */
|
|
|
|
|
.col img{
|
|
|
|
|
.col img, .col iframe{
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
height: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
@ -66,12 +93,14 @@ html{
|
|
|
|
|
/* 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 */
|
|
|
|
|
// padding-right: $grid-gap; /* ~20px gap = 20/16(OLD html size) / 2(as 2 elems next to each other should equat the gap = 0.62625 */
|
|
|
|
|
// padding-left: $grid-gap; /* In place of gap, so it can be full width rows */
|
|
|
|
|
padding-right: #{$grid-gap--numeric * .5}rem;
|
|
|
|
|
padding-left: #{$grid-gap--numeric * .5}rem;
|
|
|
|
|
|
|
|
|
|
/* display: flex; */
|
|
|
|
|
/* flex-wrap: wrap; */
|
|
|
|
|
min-height: 0.125rem;
|
|
|
|
|
min-height: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -80,21 +109,17 @@ html{
|
|
|
|
|
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: $color-scrollbar transparent;
|
|
|
|
|
scrollbar-color: $color-text transparent;
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
padding-bottom: .5rem;
|
|
|
|
|
padding-bottom: rems(8px);
|
|
|
|
|
|
|
|
|
|
@include color-scheme(dark) {
|
|
|
|
|
scrollbar-color: $color-scrollbar--dark transparent;
|
|
|
|
|
scrollbar-color: $color-text--dark transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.row--scroll [class^="col"]{
|
|
|
|
|
.row--scroll [class^="col"]{}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.col{
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.col{ flex: 0 1 auto; } // Just allow shrink, no grow
|
|
|
|
|
|
|
|
|
|
// Default cols to 100% width when below $media-xs (base 360px)
|
|
|
|
|
.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,
|
|
|
|
|
@ -108,33 +133,10 @@ html{
|
|
|
|
|
// but will be overwritten/cascaded by their xs,md,lg, etc. counterparts
|
|
|
|
|
// This is duplicated at md, as the 'default' col will be medium, needed here in-case people just
|
|
|
|
|
// use .col-4, etc. as an end-all be-all
|
|
|
|
|
.col-1 { flex: 0 0 8.33%; }
|
|
|
|
|
.col-2 { flex: 0 0 16.66%; }
|
|
|
|
|
.col-3 { flex: 0 0 25%; }
|
|
|
|
|
@include add-cols('');
|
|
|
|
|
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
|
|
|
|
|
.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%; }
|
|
|
|
|
|
|
|
|
|
// Now the actual xs styling
|
|
|
|
|
.col-xs-1 { flex: 0 0 8.33% }
|
|
|
|
|
.col-xs-2 { flex: 0 0 16.66% }
|
|
|
|
|
.col-xs-3 { flex: 0 0 25% }
|
|
|
|
|
.col-xs-4 { flex: 0 0 33.33% }
|
|
|
|
|
.col-xs-5 { flex: 0 0 41.66% }
|
|
|
|
|
.col-xs-6 { flex: 0 0 50% }
|
|
|
|
|
.col-xs-7 { flex: 0 0 58.33% }
|
|
|
|
|
.col-xs-8 { flex: 0 0 66.66% }
|
|
|
|
|
.col-xs-9 { flex: 0 0 75% }
|
|
|
|
|
.col-xs-10 { flex: 0 0 83.33% }
|
|
|
|
|
.col-xs-11 { flex: 0 0 91.66% }
|
|
|
|
|
.col-xs-12 { flex: 0 0 100% }
|
|
|
|
|
@include add-cols('-xs');
|
|
|
|
|
|
|
|
|
|
.hidden-xs { display: none }
|
|
|
|
|
|
|
|
|
|
@ -144,33 +146,10 @@ html{
|
|
|
|
|
|
|
|
|
|
// THINK .col-3 will need to be re-cascaded each time, otherwise the sm/md will overwrite for ever
|
|
|
|
|
// if it's recascaded here for instance, any .col-xs that have .col- will be replaced by the (default) col size
|
|
|
|
|
.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, example. Should be set independantly */
|
|
|
|
|
.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%; }
|
|
|
|
|
@include add-cols('');
|
|
|
|
|
|
|
|
|
|
/* (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-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% }
|
|
|
|
|
@include add-cols('-sm');
|
|
|
|
|
|
|
|
|
|
.hidden-sm { display: none }
|
|
|
|
|
|
|
|
|
|
@ -186,18 +165,8 @@ html{
|
|
|
|
|
|
|
|
|
|
/* (100/12) * x = the flex % */
|
|
|
|
|
// Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
|
|
|
|
|
.col-md-1, .col-1 { flex: 0 0 8.33% }
|
|
|
|
|
.col-md-2, .col-2 { flex: 0 0 16.66% }
|
|
|
|
|
.col-md-3, .col-3 { flex: 0 0 25% }
|
|
|
|
|
.col-md-4, .col-4 { flex: 0 0 33.33% }
|
|
|
|
|
.col-md-5, .col-5 { flex: 0 0 41.66% }
|
|
|
|
|
.col-md-6, .col-6 { flex: 0 0 50% }
|
|
|
|
|
.col-md-7, .col-7 { flex: 0 0 58.33% }
|
|
|
|
|
.col-md-8, .col-8 { flex: 0 0 66.66% }
|
|
|
|
|
.col-md-9, .col-9 { flex: 0 0 75% }
|
|
|
|
|
.col-md-10, .col-10 { flex: 0 0 83.33% }
|
|
|
|
|
.col-md-11, .col-11 { flex: 0 0 91.66% }
|
|
|
|
|
.col-md-12, .col-12 { flex: 0 0 100% }
|
|
|
|
|
@include add-cols('');
|
|
|
|
|
@include add-cols('-md');
|
|
|
|
|
|
|
|
|
|
.hidden-md { display: none }
|
|
|
|
|
|
|
|
|
|
@ -213,18 +182,7 @@ html{
|
|
|
|
|
// each time. So should be good. Reckon I need mixins/functions to replicate this grid though, as it's a
|
|
|
|
|
// little uhhhh, jank and repetative atm
|
|
|
|
|
/* (100/12) * x = the flex % */
|
|
|
|
|
.col-lg-1 { flex: 0 0 8.33% }
|
|
|
|
|
.col-lg-2 { flex: 0 0 16.66% }
|
|
|
|
|
.col-lg-3 { flex: 0 0 25% }
|
|
|
|
|
.col-lg-4 { flex: 0 0 33.33% }
|
|
|
|
|
.col-lg-5 { flex: 0 0 41.66% }
|
|
|
|
|
.col-lg-6 { flex: 0 0 50% }
|
|
|
|
|
.col-lg-7 { flex: 0 0 58.33% }
|
|
|
|
|
.col-lg-8 { flex: 0 0 66.66% }
|
|
|
|
|
.col-lg-9 { flex: 0 0 75% }
|
|
|
|
|
.col-lg-10 { flex: 0 0 83.33% }
|
|
|
|
|
.col-lg-11 { flex: 0 0 91.66% }
|
|
|
|
|
.col-lg-12 { flex: 0 0 100% }
|
|
|
|
|
@include add-cols('-lg');
|
|
|
|
|
|
|
|
|
|
.hidden-lg { display: none }
|
|
|
|
|
|
|
|
|
|
@ -237,18 +195,7 @@ html{
|
|
|
|
|
@include media($media-xl) {
|
|
|
|
|
|
|
|
|
|
/* (100/12) * x = the flex % */
|
|
|
|
|
.col-xl-1 { flex: 0 0 8.33% }
|
|
|
|
|
.col-xl-2 { flex: 0 0 16.66% }
|
|
|
|
|
.col-xl-3 { flex: 0 0 25% }
|
|
|
|
|
.col-xl-4 { flex: 0 0 33.33% }
|
|
|
|
|
.col-xl-5 { flex: 0 0 41.66% }
|
|
|
|
|
.col-xl-6 { flex: 0 0 50% }
|
|
|
|
|
.col-xl-7 { flex: 0 0 58.33% }
|
|
|
|
|
.col-xl-8 { flex: 0 0 66.66% }
|
|
|
|
|
.col-xl-9 { flex: 0 0 75% }
|
|
|
|
|
.col-xl-10 { flex: 0 0 83.33% }
|
|
|
|
|
.col-xl-11 { flex: 0 0 91.66% }
|
|
|
|
|
.col-xl-12 { flex: 0 0 100% }
|
|
|
|
|
@include add-cols('-xl');
|
|
|
|
|
|
|
|
|
|
.hidden-xl { display: none }
|
|
|
|
|
|
|
|
|
|
|
Nathan Steel
8 months ago