|
|
|
|
@ -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,270 +9,216 @@
|
|
|
|
|
/* 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: $color-scrollbar transparent;
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
padding-bottom: .5rem;
|
|
|
|
|
|
|
|
|
|
@include color-scheme(dark) {
|
|
|
|
|
scrollbar-color: $color-scrollbar--dark transparent;
|
|
|
|
|
|
|
|
|
|
// 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);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.row--scroll [class^="col"]{
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.col{
|
|
|
|
|
flex: 0 0 auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Default cols to 100% width when below $media-xs (base 360px)
|
|
|
|
|
.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%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media($media-xs) {
|
|
|
|
|
|
|
|
|
|
// Once a breakpoint has been hit, cols will behave regularly,
|
|
|
|
|
// 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%; }
|
|
|
|
|
.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% }
|
|
|
|
|
|
|
|
|
|
.hidden-xs { display: none }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.container{
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: $width-content;
|
|
|
|
|
padding: rems(22px) rems(16px);
|
|
|
|
|
position: relative; // Default static doesn't like inverse margins atop other block elements
|
|
|
|
|
/* 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;
|
|
|
|
|
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
align-items: flex-start;
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
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: rems(22px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 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, .col iframe{
|
|
|
|
|
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: $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;
|
|
|
|
|
|
|
|
|
|
@include media($media-sm) {
|
|
|
|
|
|
|
|
|
|
// 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%; }
|
|
|
|
|
|
|
|
|
|
/* (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% }
|
|
|
|
|
|
|
|
|
|
.hidden-sm { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
// IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
|
|
|
|
|
// but then I guess I'd need a 'show-md' etc, which has the same problem...
|
|
|
|
|
.hidden-xs { display: unset }
|
|
|
|
|
/* display: flex; */
|
|
|
|
|
/* flex-wrap: wrap; */
|
|
|
|
|
min-height: 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media($media-md){
|
|
|
|
|
|
|
|
|
|
/* (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% }
|
|
|
|
|
|
|
|
|
|
.hidden-md { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
.hidden-xs, .hidden-sm { display: unset }
|
|
|
|
|
.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: $color-text transparent;
|
|
|
|
|
scrollbar-width: thin;
|
|
|
|
|
padding-bottom: rems(8px);
|
|
|
|
|
|
|
|
|
|
@include color-scheme(dark) {
|
|
|
|
|
scrollbar-color: $color-text--dark transparent;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.row--scroll [class^="col"]{}
|
|
|
|
|
|
|
|
|
|
@include media($media-lg) {
|
|
|
|
|
|
|
|
|
|
// Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
|
|
|
|
|
// 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% }
|
|
|
|
|
|
|
|
|
|
.hidden-lg { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
.hidden-xs, .hidden-sm, .hidden-md { display: unset }
|
|
|
|
|
.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,
|
|
|
|
|
.col-7,.col-8,.col-9,.col-10,.col-11,.col-12{
|
|
|
|
|
flex: 0 0 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@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% }
|
|
|
|
|
|
|
|
|
|
.hidden-xl { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
|
|
|
|
|
@include media($media-xs) {
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
// Once a breakpoint has been hit, cols will behave regularly,
|
|
|
|
|
// 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
|
|
|
|
|
@include add-cols('');
|
|
|
|
|
.col-3p5 { flex: 0 0 29.166%; } /* 3 point 5, example for scroll-off page, example. Should be set independantly */
|
|
|
|
|
// Now the actual xs styling
|
|
|
|
|
@include add-cols('-xs');
|
|
|
|
|
|
|
|
|
|
// These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
|
|
|
|
|
.hidden-xs { display: none }
|
|
|
|
|
|
|
|
|
|
/* 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 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media($media-sm) {
|
|
|
|
|
|
|
|
|
|
// 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
|
|
|
|
|
@include add-cols('');
|
|
|
|
|
|
|
|
|
|
/* (100/12) * x = the flex % */
|
|
|
|
|
@include add-cols('-sm');
|
|
|
|
|
|
|
|
|
|
.row--align-center{ align-items: center;}
|
|
|
|
|
.row--justify-center{ justify-content: center; }
|
|
|
|
|
.col--align-center{ align-self: center; align-self: anchor-center}
|
|
|
|
|
.hidden-sm { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
// IN FACT. This may not be needed? Could just be that if it's hidden sm, it's hidden above that too?
|
|
|
|
|
// but then I guess I'd need a 'show-md' etc, which has the same problem...
|
|
|
|
|
.hidden-xs { display: unset }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media($media-md){
|
|
|
|
|
|
|
|
|
|
/* (100/12) * x = the flex % */
|
|
|
|
|
// Medium AND .col-4 over-ridden for the 2nd time, as medium is to be the default 'col' size
|
|
|
|
|
@include add-cols('');
|
|
|
|
|
@include add-cols('-md');
|
|
|
|
|
|
|
|
|
|
/* Sort into col/sm areas with media queries */
|
|
|
|
|
.col-grow, .col-grow-sm
|
|
|
|
|
,.col-fill, .col-fill-sm{
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
}
|
|
|
|
|
.hidden-md { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
.hidden-xs, .hidden-sm { display: unset }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media($media-lg) {
|
|
|
|
|
|
|
|
|
|
// Col DOESN'T Need to be redone here as it's medium default. If a lg/xl are set, that SHOULD overwrite
|
|
|
|
|
// 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 % */
|
|
|
|
|
@include add-cols('-lg');
|
|
|
|
|
|
|
|
|
|
.hidden-lg { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
.hidden-xs, .hidden-sm, .hidden-md { display: unset }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@include media($media-xl) {
|
|
|
|
|
|
|
|
|
|
/* (100/12) * x = the flex % */
|
|
|
|
|
@include add-cols('-xl');
|
|
|
|
|
|
|
|
|
|
.hidden-xl { display: none }
|
|
|
|
|
|
|
|
|
|
// Any overwrites for previous sizes (as using min-width by preference)
|
|
|
|
|
// Not sure how hidden display altering will work with flex/block/inline-block differences though...
|
|
|
|
|
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg { display: unset }
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// These things may want to have an indivual xs,md,lg, etc. as well, but for now, leaving...
|
|
|
|
|
|
|
|
|
|
/* 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;}
|
|
|
|
|
.row--justify-center{ justify-content: 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;
|
|
|
|
|
}
|
|
|
|
|
|
Nathan Steel
8 months ago