From 15ac70808e2437b8b418de79f00b0e18dbd7185d Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Wed, 28 Oct 2020 15:56:28 +0100 Subject: [PATCH 01/11] WIP: grid package --- gulpfile.babel.js | 9 +- src/styles/_prefrix.scss | 1 + src/styles/core/grid/_breakpoints.scss | 41 ++++++ src/styles/core/grid/_grid-ie.scss | 0 src/styles/core/grid/_grid-mixins.scss | 175 ++++++++++++++++++++++++ src/styles/core/grid/_grid-vars.scss | 33 +++++ src/styles/core/grid/_grid.scss | 40 ++++++ src/styles/elements/c-global-style.scss | 4 + 8 files changed, 301 insertions(+), 2 deletions(-) create mode 100644 src/styles/_prefrix.scss create mode 100644 src/styles/core/grid/_breakpoints.scss create mode 100644 src/styles/core/grid/_grid-ie.scss create mode 100644 src/styles/core/grid/_grid-mixins.scss create mode 100644 src/styles/core/grid/_grid-vars.scss create mode 100644 src/styles/core/grid/_grid.scss diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 9ebf639..06788b9 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -40,7 +40,7 @@ selectorParser.registerNestingOperators('>', '+', '~'); selectorParser.registerAttrEqualityMods('^', '$', '*', '~'); selectorParser.enableSubstitutes(); -const build = series(clean, initFolders, initFonts, initImages, initIcons, initFavicons, initTheme); +const build = series(clean, initFolders, initFonts, initImages, initIcons, initFavicons, initTheme, copyScss); const start = series(build, serve, watches); export { @@ -86,7 +86,7 @@ function initFolders(cb) { fs.remove(outputFolder); setTimeout(() => { - ['fonts', 'images', 'styles'].map(folder => { + ['fonts', 'images', 'styles', 'newStyles'].map(folder => { fs.mkdirSync(`${outputFolder}/${folder}`, { recursive: true }); }); }); @@ -377,6 +377,11 @@ function generateFontFace(file, props) { src: url("${filename}.woff") format("woff")\n}\n`; } +function copyScss() { + return src(['src/styles/**/*','src/newStyles/**/*']) + .pipe(dest(`${outputFolder}/scss/`)); +} + function copyImages() { return src('src/images/*.svg') .pipe(dest(`${outputFolder}/images/`)); diff --git a/src/styles/_prefrix.scss b/src/styles/_prefrix.scss new file mode 100644 index 0000000..2b2a4a5 --- /dev/null +++ b/src/styles/_prefrix.scss @@ -0,0 +1 @@ +$prefix: '.sdds' !default; \ No newline at end of file diff --git a/src/styles/core/grid/_breakpoints.scss b/src/styles/core/grid/_breakpoints.scss new file mode 100644 index 0000000..5dbdc6b --- /dev/null +++ b/src/styles/core/grid/_breakpoints.scss @@ -0,0 +1,41 @@ +/* +Small: sm - 320px 4 col +Medium: md - 672px 8 col +Large: lg - 1065px 16 col +XLarge: xlg - 1312px 16 col +XXLarge: xxlg - 1584px 16 col +*/ + +$sdds-grid-breakpoints: ( + sm: ( + columns: 4, + margin: 0, + width: 320px, + size: 15% + ), + md: ( + columns: 8, + margin: 8px, + width: 672px, + size: 7.5% + ), + lg: ( + columns: 16, + margin: 16px, + width: 1056px, + size: 3.1% + ), + xlg: ( + columns: 16, + margin: 16px, + width: 1312px, + size: 3.75% + ), + xxlg: ( + columns: 16, + margin: 24px, + width: 1584px, + size: 4.2% + ), +) !default; + diff --git a/src/styles/core/grid/_grid-ie.scss b/src/styles/core/grid/_grid-ie.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss new file mode 100644 index 0000000..a6bc8cd --- /dev/null +++ b/src/styles/core/grid/_grid-mixins.scss @@ -0,0 +1,175 @@ +@import '../../prefrix'; +@import 'breakpoints'; + +//FIXME: Remove for dev +.outside { + height: 60px; +} + +@mixin grid-container($prefix) { + #{$prefix}-container { + // padding-left: $spacing-layout-02; + // padding-right: $spacing-layout-02; + margin-left: auto; + margin-right: auto; + width: 100%; + max-width: 198rem; + + //FIXME: Remove for dev + font-size: 16px; + background-color:#f5e3e3; + } + +} + +@mixin grid-row($prefix) { + #{$prefix}-row { + display:flex; + flex-wrap: wrap; + + //FIXME: Remove for dev + background-color: #ff9999; + outline: 1px dashed blue; + } +} + +@mixin grid-col($prefix) { + // xl-1? + #{$prefix}-col-xxl-1 { + margin-left: $spacing-layout-01; //gutter WIP + margin-right: $spacing-layout-01; //gutter WIP + padding-right: $spacing-layout-01; //padding WIP + padding-left: $spacing-layout-01; //padding WIP + flex-grow: 0; + flex-shrink: 0; + flex-basis: 4.167%; + max-width: 4.167%; + display: block; + + //FIXME: Remove for dev + background-color: #ffffff; + outline: 1px dashed green; + + //FIXME create mixin + &.gutterless { + flex-basis: 6.25%; + max-width: 6.25%; + margin-right: 0; //gutter WIP + margin-left: 0; //gutter WIP + } + } + + #{$prefix}-col-xlg-1 { + margin-left: $spacing-layout-01; //gutter WIP + margin-right: $spacing-layout-01; //gutter WIP + padding-right: $spacing-layout-01; //padding WIP + padding-left: $spacing-layout-01; //padding WIP + flex-grow: 0; + flex-shrink: 0; + flex-basis: 3.75%; + max-width: 3.75%; + display: block; + + //FIXME: Remove for dev + background-color: #ffffff; + outline: 1px dashed green; + + //FIXME create mixin + &.gutterless { + flex-basis: 6.25%; + max-width: 6.25%; + margin-right: 0; //gutter WIP + margin-left: 0; //gutter WIP + } + } + + #{$prefix}-col-lg-1 { + margin-left: $spacing-layout-01; //gutter WIP + margin-right: $spacing-layout-01; //gutter WIP + padding-right: $spacing-layout-01; //padding WIP + padding-left: $spacing-layout-01; //padding WIP + flex-grow: 0; + flex-shrink: 0; + flex-basis: 3.1%; + max-width: 3.1%; + display: block; + + //FIXME: Remove for dev + background-color: #ffffff; + outline: 1px dashed green; + + //FIXME create mixin + &.gutterless { + flex-basis: 6.25%; + max-width: 6.25%; + margin-right: 0; //gutter WIP + margin-left: 0; //gutter WIP + } + } + + #{$prefix}-col-md-1 { + margin-left: $spacing-layout-01; //gutter WIP + margin-right: $spacing-layout-01; //gutter WIP + padding-right: $spacing-layout-01; //padding WIP + padding-left: $spacing-layout-01; //padding WIP + flex-grow: 0; + flex-shrink: 0; + flex-basis: 7.5%; + max-width: 7.5%; + display: block; + + //FIXME: Remove for dev + background-color: #ffffff; + outline: 1px dashed green; + + //FIXME create mixin + &.gutterless { + flex-basis: 12.5%; + max-width: 12.5%; + margin-right: 0; //gutter WIP + margin-left: 0; //gutter WIP + } + } + + #{$prefix}-col-sm-1 { + margin-left: $spacing-layout-01; //gutter WIP + margin-right: $spacing-layout-01; //gutter WIP + padding-right: $spacing-layout-01; //padding WIP + padding-left: $spacing-layout-01; //padding WIP + flex-grow: 0; + flex-shrink: 0; + flex-basis: 15%; + max-width: 15%; + display: block; + + //FIXME: Remove for dev + background-color: #ffffff; + outline: 1px dashed green; + + //FIXME create mixin + &.gutterless { + flex-basis: 25%; + max-width: 25%; + margin-right: 0; //gutter WIP + margin-left: 0; //gutter WIP + } + } + + +} + + +@mixin grid-container-breakpoints($prefix, $breakpoints) { + + @each $key, $values in $breakpoints { + $breakpoint-margin: map-get($values, 'margin'); + $breakpoint-width: map-get($values, 'width'); + @media (min-width: $breakpoint-width ) { + #{$prefix}-container { + padding-right: $breakpoint-margin; + padding-left: $breakpoint-margin; + } + } + } +} + diff --git a/src/styles/core/grid/_grid-vars.scss b/src/styles/core/grid/_grid-vars.scss new file mode 100644 index 0000000..03cd72e --- /dev/null +++ b/src/styles/core/grid/_grid-vars.scss @@ -0,0 +1,33 @@ +// @import '../../prefrix'; +@import 'grid-mixins'; + +//FIXME: remove Just as reference to understand +$base-unit: 8px; //FIXME: needs to be implemented in scania-theme + +:root { + font-size: $base-unit; +} + +// Layout scale +// 1 rem = 8px; +$spacing-layout-01: 2rem; // 16px +$spacing-layout-02: 3rem; // 24px +$spacing-layout-03: 4rem; // 32px +$spacing-layout-04: 6rem; // 48px +$spacing-layout-05: 8rem; // 64px +$spacing-layout-06: 12rem; // 96px; +$spacing-layout-07: 16rem; // 128px +$spacing-layout-08: 20rem; // 160px + +// Element scale +// 1 rem = 8px; +$spacing-element-01: 0.25rem; //2px +$spacing-element-02: 0.5rem; //4px +$spacing-element-03: 1rem; //8px +$spacing-element-04: 1.5rem; //12 +$spacing-element-05: 2rem; //16 px +$spacing-element-06: 3rem; //24 px +$spacing-element-07: 4rem; //32px +$spacing-element-08: 5rem; //40px +$spacing-element-09: 6rem; //48px + diff --git a/src/styles/core/grid/_grid.scss b/src/styles/core/grid/_grid.scss new file mode 100644 index 0000000..2122bf1 --- /dev/null +++ b/src/styles/core/grid/_grid.scss @@ -0,0 +1,40 @@ +@import 'grid-vars'; +@import 'grid-mixins'; +@import '../../prefrix'; +@import 'breakpoints'; + +// Prefix +/* +prefix: sdds-x-x +container, col, row + prefix-col-s + prefix-col-md + prefix-col-lg + prefix-col-xlg + prefix-col-xxlg +*/ + +/* +FIXME: what to do +container +col x 6 +gutter +margin +offsets +*/ + +// Container WIP +@include grid-container($prefix); + +//Container breakpoints WIP +@include grid-container-breakpoints($prefix, $sdds-grid-breakpoints); + +// Gutter WIP + +// Margin WIP + +@include grid-row($prefix); + +// Col WIP +@include grid-col($prefix); + diff --git a/src/styles/elements/c-global-style.scss b/src/styles/elements/c-global-style.scss index 8b220ef..3727db1 100644 --- a/src/styles/elements/c-global-style.scss +++ b/src/styles/elements/c-global-style.scss @@ -26,6 +26,10 @@ @import '../utilities/loading.scss'; @import '../utilities/typography.scss'; + +//grid +@import '../core/grid/grid'; + $components: badge, list-group-item; $componentsLight: alert, table; From 889f20cab8c2d4bee2c550d5a3fd29dd8fb47ba3 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Fri, 30 Oct 2020 16:48:01 +0100 Subject: [PATCH 02/11] WIP: grid system --- src/styles/core/grid/_breakpoints.scss | 71 ++++++-- src/styles/core/grid/_grid-ie.scss | 1 + src/styles/core/grid/_grid-mixins.scss | 224 +++++++++++-------------- src/styles/core/grid/_grid-vars.scss | 2 +- src/styles/core/grid/_grid.scss | 6 +- 5 files changed, 160 insertions(+), 144 deletions(-) diff --git a/src/styles/core/grid/_breakpoints.scss b/src/styles/core/grid/_breakpoints.scss index 5dbdc6b..bf62873 100644 --- a/src/styles/core/grid/_breakpoints.scss +++ b/src/styles/core/grid/_breakpoints.scss @@ -6,36 +6,85 @@ XLarge: xlg - 1312px 16 col XXLarge: xxlg - 1584px 16 col */ +//TODO: Add rem instead of px $sdds-grid-breakpoints: ( sm: ( + width: 320px, columns: 4, + size: 0.15, margin: 0, - width: 320px, - size: 15% + padding: 8px, + gutter: 32px ), md: ( - columns: 8, - margin: 8px, width: 672px, - size: 7.5% + columns: 8, + size: 0.075, + margin: 16px, + padding: 8px, + gutter: 32px ), lg: ( + width: 1056px, columns: 16, + size: 0.03125, margin: 16px, - width: 1056px, - size: 3.1% + padding: 8px, + gutter: 32px ), xlg: ( + width: 1312px, columns: 16, + size: 0.0375, margin: 16px, - width: 1312px, - size: 3.75% + padding: 16px, + gutter: 32px ), xxlg: ( + width: 1584px, columns: 16, + size: 0.0416666666666667, margin: 24px, - width: 1584px, - size: 4.2% + padding: 16px, + gutter: 32px ), ) !default; +//TODO: add gutterless as map +$sdds-grid-breakpoints-gutterless: ( + sm: ( + width: 320px, + columns: 4, + size: 0.25, + margin: 0, + padding: 8px + ), + md: ( + width: 672px, + columns: 8, + size: 0.125, + margin: 16px, + padding: 16px + ), + lg: ( + width: 1056px, + columns: 16, + size: 0.0625, + margin: 16px, + padding: 16px + ), + xlg: ( + width: 1312px, + columns: 16, + size: 0.0625, + margin: 16px, + padding: 16px + ), + xxlg: ( + width: 1584px, + columns: 16, + size: 0.0625, + margin: 24px, + padding: 16px + ), +) !default; \ No newline at end of file diff --git a/src/styles/core/grid/_grid-ie.scss b/src/styles/core/grid/_grid-ie.scss index e69de29..211cd6e 100644 --- a/src/styles/core/grid/_grid-ie.scss +++ b/src/styles/core/grid/_grid-ie.scss @@ -0,0 +1 @@ +//IE 11 support \ No newline at end of file diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index a6bc8cd..d1d3900 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -1,23 +1,25 @@ @import '../../prefrix'; @import 'breakpoints'; -//FIXME: Remove for dev +//FIXME: Remove this, debug .outside { - height: 60px; + height: 80px; + background-color:#ecd8d8; + outline: 1px solid #4c0808; } + + @mixin grid-container($prefix) { #{$prefix}-container { - // padding-left: $spacing-layout-02; - // padding-right: $spacing-layout-02; margin-left: auto; margin-right: auto; width: 100%; max-width: 198rem; - //FIXME: Remove for dev + //FIXME: Remove this, debug font-size: 16px; - background-color:#f5e3e3; + background-color:#ef5252; } } @@ -27,149 +29,111 @@ display:flex; flex-wrap: wrap; - //FIXME: Remove for dev - background-color: #ff9999; + //FIXME: Remove this, debug + background-color: white; outline: 1px dashed blue; } } -@mixin grid-col($prefix) { - // xl-1? - #{$prefix}-col-xxl-1 { - margin-left: $spacing-layout-01; //gutter WIP - margin-right: $spacing-layout-01; //gutter WIP - padding-right: $spacing-layout-01; //padding WIP - padding-left: $spacing-layout-01; //padding WIP - flex-grow: 0; - flex-shrink: 0; - flex-basis: 4.167%; - max-width: 4.167%; - display: block; - - //FIXME: Remove for dev - background-color: #ffffff; - outline: 1px dashed green; - - //FIXME create mixin - &.gutterless { - flex-basis: 6.25%; - max-width: 6.25%; - margin-right: 0; //gutter WIP - margin-left: 0; //gutter WIP - } - } +@mixin grid-container-breakpoints($prefix, $breakpoints) { - #{$prefix}-col-xlg-1 { - margin-left: $spacing-layout-01; //gutter WIP - margin-right: $spacing-layout-01; //gutter WIP - padding-right: $spacing-layout-01; //padding WIP - padding-left: $spacing-layout-01; //padding WIP - flex-grow: 0; - flex-shrink: 0; - flex-basis: 3.75%; - max-width: 3.75%; - display: block; - - //FIXME: Remove for dev - background-color: #ffffff; - outline: 1px dashed green; - - //FIXME create mixin - &.gutterless { - flex-basis: 6.25%; - max-width: 6.25%; - margin-right: 0; //gutter WIP - margin-left: 0; //gutter WIP - } - } + @each $key, $values in $breakpoints { - #{$prefix}-col-lg-1 { - margin-left: $spacing-layout-01; //gutter WIP - margin-right: $spacing-layout-01; //gutter WIP - padding-right: $spacing-layout-01; //padding WIP - padding-left: $spacing-layout-01; //padding WIP - flex-grow: 0; - flex-shrink: 0; - flex-basis: 3.1%; - max-width: 3.1%; - display: block; - - //FIXME: Remove for dev - background-color: #ffffff; - outline: 1px dashed green; - - //FIXME create mixin - &.gutterless { - flex-basis: 6.25%; - max-width: 6.25%; - margin-right: 0; //gutter WIP - margin-left: 0; //gutter WIP - } - } + $breakpoint-margin: map-get($values, 'margin'); + $breakpoint-width: map-get($values, 'width'); - #{$prefix}-col-md-1 { - margin-left: $spacing-layout-01; //gutter WIP - margin-right: $spacing-layout-01; //gutter WIP - padding-right: $spacing-layout-01; //padding WIP - padding-left: $spacing-layout-01; //padding WIP - flex-grow: 0; - flex-shrink: 0; - flex-basis: 7.5%; - max-width: 7.5%; - display: block; - - //FIXME: Remove for dev - background-color: #ffffff; - outline: 1px dashed green; - - //FIXME create mixin - &.gutterless { - flex-basis: 12.5%; - max-width: 12.5%; - margin-right: 0; //gutter WIP - margin-left: 0; //gutter WIP + @media (min-width: $breakpoint-width ) { + #{$prefix}-container { + padding-right: $breakpoint-margin; + padding-left: $breakpoint-margin; + } } } +} + +@mixin grid-col-sizes($breakpoints) { + + // Size + @each $sizes, $values in $breakpoints { + $breakpoint-columns: map-get($values, 'columns'); + $breakpoint-size: map-get($values, 'size'); + $breakpoint-gutter: map-get($values, 'gutter'); + $breakpoint-padding: map-get($values, 'padding'); + $breakpoint-width: map-get($values, 'width'); + + // Each column for everysize + @for $i from 1 through $breakpoint-columns { + + #{$prefix}-col-#{$sizes}-#{$i} { + display: block; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 100%; + max-width: 100%; + } + + @media (min-width: $breakpoint-width ) { + #{$prefix}-col-#{$sizes}-#{$i} { + @include grid-col-size($breakpoint-size, $i); + @include grid-col-padding($breakpoint-padding); + @include grid-gutters($breakpoint-gutter); + + //FIXME: Remove this, debug + background-color: #ffafaf; + outline: 1px solid red; - #{$prefix}-col-sm-1 { - margin-left: $spacing-layout-01; //gutter WIP - margin-right: $spacing-layout-01; //gutter WIP - padding-right: $spacing-layout-01; //padding WIP - padding-left: $spacing-layout-01; //padding WIP - flex-grow: 0; - flex-shrink: 0; - flex-basis: 15%; - max-width: 15%; - display: block; - - //FIXME: Remove for dev - background-color: #ffffff; - outline: 1px dashed green; - - //FIXME create mixin - &.gutterless { - flex-basis: 25%; - max-width: 25%; - margin-right: 0; //gutter WIP - margin-left: 0; //gutter WIP + } + } } } +} +@mixin grid-col-padding($padding) { + padding: 0 $padding; +} +@mixin grid-col-size($size, $i) { + + display: block; + flex-grow: 0; + flex-shrink: 0; + flex-basis: percentage($size * $i + 0.02083 * ($i - 1)); + max-width: percentage($size * $i + 0.02083 * ($i - 1) ); } +@mixin grid-gutters($gutter) { + margin: 0 $gutter / 2; +} -@mixin grid-container-breakpoints($prefix, $breakpoints) { +//Gutterless col sizes +@mixin grid-gutterless-col($breakpoints) { - @each $key, $values in $breakpoints { - $breakpoint-margin: map-get($values, 'margin'); + // Size + @each $sizes, $values in $breakpoints { + $breakpoint-columns: map-get($values, 'columns'); + $breakpoint-size: map-get($values, 'size'); + $breakpoint-gutter: map-get($values, 'gutter'); + $breakpoint-padding: map-get($values, 'padding'); $breakpoint-width: map-get($values, 'width'); - @media (min-width: $breakpoint-width ) { - #{$prefix}-container { - padding-right: $breakpoint-margin; - padding-left: $breakpoint-margin; + + // Each column for everysize + @for $i from 1 through $breakpoint-columns { + + @media (min-width: $breakpoint-width ) { + #{$prefix}-col-#{$sizes}-#{$i}.gutterless { + display: block; + flex-grow: 0; + flex-shrink: 0; + flex-basis: percentage($breakpoint-size * $i); + max-width: percentage($breakpoint-size * $i); + padding: 0 $breakpoint-padding; + margin: 0; + + //FIXME: Remove this, debug + background-color: #ffafaf; + outline: 1px solid red; } + } } } -} - +} \ No newline at end of file diff --git a/src/styles/core/grid/_grid-vars.scss b/src/styles/core/grid/_grid-vars.scss index 03cd72e..d677253 100644 --- a/src/styles/core/grid/_grid-vars.scss +++ b/src/styles/core/grid/_grid-vars.scss @@ -1,7 +1,7 @@ // @import '../../prefrix'; @import 'grid-mixins'; -//FIXME: remove Just as reference to understand +//FIXME: remove Just as reference to understand, Remove this, debug $base-unit: 8px; //FIXME: needs to be implemented in scania-theme :root { diff --git a/src/styles/core/grid/_grid.scss b/src/styles/core/grid/_grid.scss index 2122bf1..1c7d666 100644 --- a/src/styles/core/grid/_grid.scss +++ b/src/styles/core/grid/_grid.scss @@ -32,9 +32,11 @@ offsets // Gutter WIP // Margin WIP - @include grid-row($prefix); // Col WIP -@include grid-col($prefix); +// @include grid-col($prefix); //FIXME: to be removed +@include grid-col-sizes($sdds-grid-breakpoints); + +@include grid-gutterless-col($sdds-grid-breakpoints-gutterless); From df016703ebe3be29d052fca6bf872dd93fdff544 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Mon, 2 Nov 2020 17:02:24 +0100 Subject: [PATCH 03/11] WIP: cols and offset added --- src/styles/core/grid/_breakpoints.scss | 25 +++++------ src/styles/core/grid/_grid-mixins.scss | 59 ++++++++++++++++---------- src/styles/core/grid/_grid.scss | 8 +--- 3 files changed, 47 insertions(+), 45 deletions(-) diff --git a/src/styles/core/grid/_breakpoints.scss b/src/styles/core/grid/_breakpoints.scss index bf62873..397f26b 100644 --- a/src/styles/core/grid/_breakpoints.scss +++ b/src/styles/core/grid/_breakpoints.scss @@ -11,7 +11,6 @@ $sdds-grid-breakpoints: ( sm: ( width: 320px, columns: 4, - size: 0.15, margin: 0, padding: 8px, gutter: 32px @@ -19,7 +18,6 @@ $sdds-grid-breakpoints: ( md: ( width: 672px, columns: 8, - size: 0.075, margin: 16px, padding: 8px, gutter: 32px @@ -27,7 +25,6 @@ $sdds-grid-breakpoints: ( lg: ( width: 1056px, columns: 16, - size: 0.03125, margin: 16px, padding: 8px, gutter: 32px @@ -35,7 +32,6 @@ $sdds-grid-breakpoints: ( xlg: ( width: 1312px, columns: 16, - size: 0.0375, margin: 16px, padding: 16px, gutter: 32px @@ -43,7 +39,6 @@ $sdds-grid-breakpoints: ( xxlg: ( width: 1584px, columns: 16, - size: 0.0416666666666667, margin: 24px, padding: 16px, gutter: 32px @@ -55,36 +50,36 @@ $sdds-grid-breakpoints-gutterless: ( sm: ( width: 320px, columns: 4, - size: 0.25, margin: 0, - padding: 8px + padding: 16px, + gutter: 0 ), md: ( width: 672px, columns: 8, - size: 0.125, margin: 16px, - padding: 16px + padding: 16px, + gutter: 0px ), lg: ( width: 1056px, columns: 16, - size: 0.0625, margin: 16px, - padding: 16px + padding: 16px, + gutter: 0px ), xlg: ( width: 1312px, columns: 16, - size: 0.0625, margin: 16px, - padding: 16px + padding: 16px, + gutter: 0px ), xxlg: ( width: 1584px, columns: 16, - size: 0.0625, margin: 24px, - padding: 16px + padding: 16px, + gutter: 0px ), ) !default; \ No newline at end of file diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index d1d3900..1117637 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -4,12 +4,11 @@ //FIXME: Remove this, debug .outside { height: 80px; + word-break: break-all; background-color:#ecd8d8; outline: 1px solid #4c0808; } - - @mixin grid-container($prefix) { #{$prefix}-container { margin-left: auto; @@ -56,7 +55,6 @@ // Size @each $sizes, $values in $breakpoints { $breakpoint-columns: map-get($values, 'columns'); - $breakpoint-size: map-get($values, 'size'); $breakpoint-gutter: map-get($values, 'gutter'); $breakpoint-padding: map-get($values, 'padding'); $breakpoint-width: map-get($values, 'width'); @@ -74,9 +72,8 @@ @media (min-width: $breakpoint-width ) { #{$prefix}-col-#{$sizes}-#{$i} { - @include grid-col-size($breakpoint-size, $i); - @include grid-col-padding($breakpoint-padding); - @include grid-gutters($breakpoint-gutter); + @include grid-col-size($breakpoint-columns, $i); + @include grid-gutters($breakpoint-gutter, $breakpoint-padding); //FIXME: Remove this, debug background-color: #ffafaf; @@ -88,21 +85,17 @@ } } -@mixin grid-col-padding($padding) { - padding: 0 $padding; -} - -@mixin grid-col-size($size, $i) { - +@mixin grid-col-size($columns, $i) { display: block; flex-grow: 0; flex-shrink: 0; - flex-basis: percentage($size * $i + 0.02083 * ($i - 1)); - max-width: percentage($size * $i + 0.02083 * ($i - 1) ); + flex-basis: percentage(($i / $columns)); + max-width: percentage(($i / $columns)); } -@mixin grid-gutters($gutter) { - margin: 0 $gutter / 2; +@mixin grid-gutters($gutter, $breakpoint-padding) { + $padding: $gutter / 2 + $breakpoint-padding; + padding: 0 $padding; } //Gutterless col sizes @@ -111,7 +104,6 @@ // Size @each $sizes, $values in $breakpoints { $breakpoint-columns: map-get($values, 'columns'); - $breakpoint-size: map-get($values, 'size'); $breakpoint-gutter: map-get($values, 'gutter'); $breakpoint-padding: map-get($values, 'padding'); $breakpoint-width: map-get($values, 'width'); @@ -121,12 +113,8 @@ @media (min-width: $breakpoint-width ) { #{$prefix}-col-#{$sizes}-#{$i}.gutterless { - display: block; - flex-grow: 0; - flex-shrink: 0; - flex-basis: percentage($breakpoint-size * $i); - max-width: percentage($breakpoint-size * $i); - padding: 0 $breakpoint-padding; + @include grid-col-size($breakpoint-columns, $i); + @include grid-gutters($breakpoint-gutter, $breakpoint-padding); margin: 0; //FIXME: Remove this, debug @@ -136,4 +124,29 @@ } } } +} + +@mixin grid-offset-col($breakpoints) { + + @each $sizes, $values in $breakpoints { + $breakpoint-columns: map-get($values, 'columns'); + $breakpoint-gutter: map-get($values, 'gutter'); + $breakpoint-padding: map-get($values, 'padding'); + $breakpoint-width: map-get($values, 'width'); + + // Each column for everysize + @for $i from 1 through $breakpoint-columns { + + @media (min-width: $breakpoint-width ) { + #{$prefix}-col-#{$sizes}-#{$i}-offset { + @include grid-offset($breakpoint-columns, $i); + } + } + } + } +} + +@mixin grid-offset($columns, $i) { + $index: $i; + margin-left: percentage(($index / $columns)); } \ No newline at end of file diff --git a/src/styles/core/grid/_grid.scss b/src/styles/core/grid/_grid.scss index 1c7d666..3a53e87 100644 --- a/src/styles/core/grid/_grid.scss +++ b/src/styles/core/grid/_grid.scss @@ -23,20 +23,14 @@ margin offsets */ -// Container WIP @include grid-container($prefix); -//Container breakpoints WIP @include grid-container-breakpoints($prefix, $sdds-grid-breakpoints); -// Gutter WIP - -// Margin WIP @include grid-row($prefix); -// Col WIP -// @include grid-col($prefix); //FIXME: to be removed @include grid-col-sizes($sdds-grid-breakpoints); @include grid-gutterless-col($sdds-grid-breakpoints-gutterless); +@include grid-offset-col($sdds-grid-breakpoints); From 2da80d444bed56a522da335ac86d7185f00475e9 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Tue, 3 Nov 2020 16:34:57 +0100 Subject: [PATCH 04/11] WIP: changed name of mixins --- src/styles/core/grid/_grid-mixins.scss | 10 ++++------ src/styles/core/grid/_grid.scss | 2 +- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index 1117637..89003ed 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -3,7 +3,7 @@ //FIXME: Remove this, debug .outside { - height: 80px; + height: 50px; word-break: break-all; background-color:#ecd8d8; outline: 1px solid #4c0808; @@ -50,7 +50,7 @@ } } -@mixin grid-col-sizes($breakpoints) { +@mixin grid-make-col($breakpoints) { // Size @each $sizes, $values in $breakpoints { @@ -98,7 +98,6 @@ padding: 0 $padding; } -//Gutterless col sizes @mixin grid-gutterless-col($breakpoints) { // Size @@ -109,7 +108,7 @@ $breakpoint-width: map-get($values, 'width'); // Each column for everysize - @for $i from 1 through $breakpoint-columns { + @for $i from 1 through $breakpoint-columns { @media (min-width: $breakpoint-width ) { #{$prefix}-col-#{$sizes}-#{$i}.gutterless { @@ -147,6 +146,5 @@ } @mixin grid-offset($columns, $i) { - $index: $i; - margin-left: percentage(($index / $columns)); + margin-left: percentage(($i / $columns)); } \ No newline at end of file diff --git a/src/styles/core/grid/_grid.scss b/src/styles/core/grid/_grid.scss index 3a53e87..b955142 100644 --- a/src/styles/core/grid/_grid.scss +++ b/src/styles/core/grid/_grid.scss @@ -29,7 +29,7 @@ offsets @include grid-row($prefix); -@include grid-col-sizes($sdds-grid-breakpoints); +@include grid-make-col($sdds-grid-breakpoints); @include grid-gutterless-col($sdds-grid-breakpoints-gutterless); From 44d356dba09a83fd3e3c7ae01ba4f37f4ebe0547 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Tue, 3 Nov 2020 16:41:01 +0100 Subject: [PATCH 05/11] WIP : fix for gulp --- gulpfile.babel.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 06788b9..03c106a 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -40,7 +40,7 @@ selectorParser.registerNestingOperators('>', '+', '~'); selectorParser.registerAttrEqualityMods('^', '$', '*', '~'); selectorParser.enableSubstitutes(); -const build = series(clean, initFolders, initFonts, initImages, initIcons, initFavicons, initTheme, copyScss); +const build = series(clean, initFolders, initFonts, initImages, initIcons, initFavicons, initTheme); const start = series(build, serve, watches); export { @@ -86,7 +86,7 @@ function initFolders(cb) { fs.remove(outputFolder); setTimeout(() => { - ['fonts', 'images', 'styles', 'newStyles'].map(folder => { + ['fonts', 'images', 'styles'].map(folder => { fs.mkdirSync(`${outputFolder}/${folder}`, { recursive: true }); }); }); @@ -253,12 +253,12 @@ function initFavicons() { } async function initTheme(cb) { - let theme = { + let theme = { [themeName]: { components: { default: { }, ie: { } } } }; - let themeNoRefs = { + let themeNoRefs = { [themeName]: { components: { default: { }, ie: { } } } @@ -377,11 +377,6 @@ function generateFontFace(file, props) { src: url("${filename}.woff") format("woff")\n}\n`; } -function copyScss() { - return src(['src/styles/**/*','src/newStyles/**/*']) - .pipe(dest(`${outputFolder}/scss/`)); -} - function copyImages() { return src('src/images/*.svg') .pipe(dest(`${outputFolder}/images/`)); From 7d1ef182c98ec711dc3d645c100987a26d729797 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Wed, 4 Nov 2020 14:20:48 +0100 Subject: [PATCH 06/11] Grid system - Column - Rows - container - Including sizing and media rules for different screens --- src/styles/core/grid/_breakpoints.scss | 67 ++++++++++++-------------- src/styles/core/grid/_grid-mixins.scss | 41 ++++++++++------ src/styles/core/grid/_grid-vars.scss | 25 +++++----- src/styles/core/grid/_grid.scss | 29 ++++------- 4 files changed, 80 insertions(+), 82 deletions(-) diff --git a/src/styles/core/grid/_breakpoints.scss b/src/styles/core/grid/_breakpoints.scss index 397f26b..9dab380 100644 --- a/src/styles/core/grid/_breakpoints.scss +++ b/src/styles/core/grid/_breakpoints.scss @@ -1,85 +1,82 @@ -/* -Small: sm - 320px 4 col -Medium: md - 672px 8 col -Large: lg - 1065px 16 col -XLarge: xlg - 1312px 16 col -XXLarge: xxlg - 1584px 16 col +@import 'grid-vars'; +/* Grid breakpoints used for setting up every grid in different sizes + - All values most be added + - Contains gutterless grid breakpoints also */ -//TODO: Add rem instead of px +//TODO: Add rem instead of px, map doesn't give correct rem value, need a converter $sdds-grid-breakpoints: ( sm: ( width: 320px, columns: 4, margin: 0, - padding: 8px, - gutter: 32px + padding: $spacing-layout-01, + gutter: $spacing-layout-04 ), md: ( width: 672px, columns: 8, - margin: 16px, - padding: 8px, - gutter: 32px + margin: $spacing-layout-02, + padding: $spacing-layout-01, + gutter: $spacing-layout-04 ), lg: ( width: 1056px, columns: 16, - margin: 16px, - padding: 8px, - gutter: 32px + margin: $spacing-layout-02, + padding: $spacing-layout-01, + gutter: $spacing-layout-04 ), xlg: ( width: 1312px, columns: 16, - margin: 16px, - padding: 16px, - gutter: 32px + margin: $spacing-layout-02, + padding: $spacing-layout-02, + gutter: $spacing-layout-04 ), xxlg: ( width: 1584px, columns: 16, - margin: 24px, - padding: 16px, - gutter: 32px + margin: $spacing-layout-03, + padding: $spacing-layout-02, + gutter: $spacing-layout-04 ), ) !default; -//TODO: add gutterless as map $sdds-grid-breakpoints-gutterless: ( sm: ( width: 320px, columns: 4, margin: 0, - padding: 16px, + padding: $spacing-layout-02, gutter: 0 ), md: ( width: 672px, columns: 8, - margin: 16px, - padding: 16px, - gutter: 0px + margin: $spacing-layout-02, + padding: $spacing-layout-02, + gutter: 0 ), lg: ( width: 1056px, columns: 16, - margin: 16px, - padding: 16px, - gutter: 0px + margin: $spacing-layout-02, + padding: $spacing-layout-02, + gutter: 0 ), xlg: ( width: 1312px, columns: 16, - margin: 16px, - padding: 16px, - gutter: 0px + margin: $spacing-layout-02, + padding: $spacing-layout-02, + gutter: 0 ), xxlg: ( width: 1584px, columns: 16, - margin: 24px, - padding: 16px, - gutter: 0px + margin: $spacing-layout-03, + padding: $spacing-layout-02, + gutter: 0 ), ) !default; \ No newline at end of file diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index 89003ed..c5a85ba 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -9,6 +9,7 @@ outline: 1px solid #4c0808; } +// Containers @mixin grid-container($prefix) { #{$prefix}-container { margin-left: auto; @@ -23,33 +24,37 @@ } -@mixin grid-row($prefix) { - #{$prefix}-row { - display:flex; - flex-wrap: wrap; - - //FIXME: Remove this, debug - background-color: white; - outline: 1px dashed blue; - } -} - +// Grid breakpoints @mixin grid-container-breakpoints($prefix, $breakpoints) { @each $key, $values in $breakpoints { $breakpoint-margin: map-get($values, 'margin'); $breakpoint-width: map-get($values, 'width'); + @debug $breakpoint-width; @media (min-width: $breakpoint-width ) { - #{$prefix}-container { - padding-right: $breakpoint-margin; - padding-left: $breakpoint-margin; - } + #{$prefix}-container { + padding-right: $breakpoint-margin; + padding-left: $breakpoint-margin; + } } } } +// Rows +@mixin grid-row($prefix) { + #{$prefix}-row { + display:flex; + flex-wrap: wrap; + + //FIXME: Remove this, debug + background-color: white; + outline: 1px dashed blue; + } +} + +// Columns @mixin grid-make-col($breakpoints) { // Size @@ -85,19 +90,23 @@ } } +// Column size calculation @mixin grid-col-size($columns, $i) { display: block; flex-grow: 0; flex-shrink: 0; + // Index divided by amount of the columns flex-basis: percentage(($i / $columns)); max-width: percentage(($i / $columns)); } +// Gutters @mixin grid-gutters($gutter, $breakpoint-padding) { $padding: $gutter / 2 + $breakpoint-padding; padding: 0 $padding; } +// Gutterless columns @mixin grid-gutterless-col($breakpoints) { // Size @@ -125,6 +134,7 @@ } } +// Column offset @mixin grid-offset-col($breakpoints) { @each $sizes, $values in $breakpoints { @@ -145,6 +155,7 @@ } } +// Offset calculation @mixin grid-offset($columns, $i) { margin-left: percentage(($i / $columns)); } \ No newline at end of file diff --git a/src/styles/core/grid/_grid-vars.scss b/src/styles/core/grid/_grid-vars.scss index d677253..b66612a 100644 --- a/src/styles/core/grid/_grid-vars.scss +++ b/src/styles/core/grid/_grid-vars.scss @@ -1,26 +1,25 @@ -// @import '../../prefrix'; -@import 'grid-mixins'; - //FIXME: remove Just as reference to understand, Remove this, debug +//Testing only $base-unit: 8px; //FIXME: needs to be implemented in scania-theme +//FIXME: Remove, for dev :root { font-size: $base-unit; } -// Layout scale // 1 rem = 8px; -$spacing-layout-01: 2rem; // 16px -$spacing-layout-02: 3rem; // 24px -$spacing-layout-03: 4rem; // 32px -$spacing-layout-04: 6rem; // 48px -$spacing-layout-05: 8rem; // 64px -$spacing-layout-06: 12rem; // 96px; -$spacing-layout-07: 16rem; // 128px -$spacing-layout-08: 20rem; // 160px +// Layout scale +$spacing-layout-01: 1rem; // 8px +$spacing-layout-02: 2rem; // 16px +$spacing-layout-03: 3rem; // 24px +$spacing-layout-04: 4rem; // 32px +$spacing-layout-05: 6rem; // 48px +$spacing-layout-06: 8rem; // 64px +$spacing-layout-07: 12rem; // 96px +$spacing-layout-08: 16rem; // 128px +$spacing-layout-09: 20rem; // 160px // Element scale -// 1 rem = 8px; $spacing-element-01: 0.25rem; //2px $spacing-element-02: 0.5rem; //4px $spacing-element-03: 1rem; //8px diff --git a/src/styles/core/grid/_grid.scss b/src/styles/core/grid/_grid.scss index b955142..1d38149 100644 --- a/src/styles/core/grid/_grid.scss +++ b/src/styles/core/grid/_grid.scss @@ -1,36 +1,27 @@ -@import 'grid-vars'; -@import 'grid-mixins'; @import '../../prefrix'; @import 'breakpoints'; - -// Prefix -/* -prefix: sdds-x-x -container, col, row - prefix-col-s - prefix-col-md - prefix-col-lg - prefix-col-xlg - prefix-col-xxlg -*/ +@import 'grid-vars'; +@import 'grid-mixins'; /* -FIXME: what to do -container -col x 6 -gutter -margin -offsets +Mixin file for create grid layout, container, rows and columns +Setting up grid layout based on breakpoint maping */ +// Container for the gridsystem @include grid-container($prefix); +//Setup breakpoints for the container @include grid-container-breakpoints($prefix, $sdds-grid-breakpoints); +// Row which columns are places @include grid-row($prefix); +// Create columns @include grid-make-col($sdds-grid-breakpoints); +//Creates gutterless columns @include grid-gutterless-col($sdds-grid-breakpoints-gutterless); +// Adding offset classes for the grid @include grid-offset-col($sdds-grid-breakpoints); From 3f54a808909fe1d60ab8f3a30e9d31bd916be45b Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Wed, 4 Nov 2020 14:21:21 +0100 Subject: [PATCH 07/11] Remove debugger in grid file --- src/styles/core/grid/_grid-mixins.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index c5a85ba..924f774 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -31,7 +31,6 @@ $breakpoint-margin: map-get($values, 'margin'); $breakpoint-width: map-get($values, 'width'); - @debug $breakpoint-width; @media (min-width: $breakpoint-width ) { #{$prefix}-container { From 0ec0a49950a8dcb9a1200bc29cce314c8d647336 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Wed, 4 Nov 2020 14:58:40 +0100 Subject: [PATCH 08/11] added node v14 in github actions --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index f3ce5af..f345e15 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -9,7 +9,7 @@ jobs: strategy: matrix: - node-version: [10.x, 12.x] + node-version: [10.x, 12.x, 14.x] steps: - uses: actions/checkout@v1 From 1a64a639c0379cc0f9409a77b20edb715e184e95 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Wed, 4 Nov 2020 15:02:03 +0100 Subject: [PATCH 09/11] removed node v14 test --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index f345e15..f3ce5af 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -9,7 +9,7 @@ jobs: strategy: matrix: - node-version: [10.x, 12.x, 14.x] + node-version: [10.x, 12.x] steps: - uses: actions/checkout@v1 From daa9fccab39e634cd0cc715364fc77f41c5fb6bb Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Mon, 9 Nov 2020 11:42:53 +0100 Subject: [PATCH 10/11] Added full-width container - Fixed responsiveness - added base unit 4px - rename prefix file - added screensizes --- src/styles/{_prefrix.scss => _prefix.scss} | 0 src/styles/core/grid/_grid-mixins.scss | 43 ++++++++++++++++----- src/styles/core/grid/_grid-vars.scss | 44 ++++++++++++---------- src/styles/core/grid/_grid.scss | 3 +- 4 files changed, 60 insertions(+), 30 deletions(-) rename src/styles/{_prefrix.scss => _prefix.scss} (100%) diff --git a/src/styles/_prefrix.scss b/src/styles/_prefix.scss similarity index 100% rename from src/styles/_prefrix.scss rename to src/styles/_prefix.scss diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index 924f774..6151412 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -1,4 +1,4 @@ -@import '../../prefrix'; +@import '../../prefix'; @import 'breakpoints'; //FIXME: Remove this, debug @@ -15,7 +15,17 @@ margin-left: auto; margin-right: auto; width: 100%; - max-width: 198rem; + max-width: $screen-xxl; + + //FIXME: Remove this, debug + font-size: 16px; + background-color:#ef5252; + } + + #{$prefix}-container-fluid { + margin-left: auto; + margin-right: auto; + width: 100%; //FIXME: Remove this, debug font-size: 16px; @@ -38,6 +48,17 @@ padding-left: $breakpoint-margin; } } + + @include grid-container-full-width-breakpoints($prefix,$breakpoint-width,$breakpoint-margin); + } +} + +@mixin grid-container-full-width-breakpoints($prefix,$breakpoint-width,$breakpoint-margin) { + @media (min-width: $breakpoint-width) { + #{$prefix}-container-fluid { + padding-right: $breakpoint-margin; + padding-left: $breakpoint-margin; + } } } @@ -66,13 +87,7 @@ // Each column for everysize @for $i from 1 through $breakpoint-columns { - #{$prefix}-col-#{$sizes}-#{$i} { - display: block; - flex-grow: 0; - flex-shrink: 0; - flex-basis: 100%; - max-width: 100%; - } + @include grid-col-size-full-width($prefix, $sizes, $i); @media (min-width: $breakpoint-width ) { #{$prefix}-col-#{$sizes}-#{$i} { @@ -89,6 +104,16 @@ } } +// Column size when it goes below it's breakpoint +@mixin grid-col-size-full-width($prefix, $sizes, $i) { + #{$prefix}-col-#{$sizes}-#{$i} { + display: block; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 100%; + } +} + // Column size calculation @mixin grid-col-size($columns, $i) { display: block; diff --git a/src/styles/core/grid/_grid-vars.scss b/src/styles/core/grid/_grid-vars.scss index b66612a..94cad38 100644 --- a/src/styles/core/grid/_grid-vars.scss +++ b/src/styles/core/grid/_grid-vars.scss @@ -1,6 +1,6 @@ //FIXME: remove Just as reference to understand, Remove this, debug //Testing only -$base-unit: 8px; //FIXME: needs to be implemented in scania-theme +$base-unit: 4px; //FIXME: needs to be implemented in scania-theme //FIXME: Remove, for dev :root { @@ -9,24 +9,30 @@ $base-unit: 8px; //FIXME: needs to be implemented in scania-theme // 1 rem = 8px; // Layout scale -$spacing-layout-01: 1rem; // 8px -$spacing-layout-02: 2rem; // 16px -$spacing-layout-03: 3rem; // 24px -$spacing-layout-04: 4rem; // 32px -$spacing-layout-05: 6rem; // 48px -$spacing-layout-06: 8rem; // 64px -$spacing-layout-07: 12rem; // 96px -$spacing-layout-08: 16rem; // 128px -$spacing-layout-09: 20rem; // 160px +$spacing-layout-01: 2rem; // 8px +$spacing-layout-02: 4rem; // 16px +$spacing-layout-03: 6rem; // 24px +$spacing-layout-04: 8rem; // 32px +$spacing-layout-05: 12rem; // 48px +$spacing-layout-06: 16rem; // 64px +$spacing-layout-07: 24rem; // 96px +$spacing-layout-08: 32rem; // 128px +$spacing-layout-09: 40rem; // 160px // Element scale -$spacing-element-01: 0.25rem; //2px -$spacing-element-02: 0.5rem; //4px -$spacing-element-03: 1rem; //8px -$spacing-element-04: 1.5rem; //12 -$spacing-element-05: 2rem; //16 px -$spacing-element-06: 3rem; //24 px -$spacing-element-07: 4rem; //32px -$spacing-element-08: 5rem; //40px -$spacing-element-09: 6rem; //48px +$spacing-element-01: 0.5rem; // 2px +$spacing-element-02: 1rem; // 4px +$spacing-element-03: 2rem; // 8px +$spacing-element-04: 3rem; // 12px +$spacing-element-05: 4rem; // 16px +$spacing-element-06: 5rem; // 20px +$spacing-element-07: 6rem; // 24px +$spacing-element-08: 8rem; // 32px +$spacing-element-09: 10rem; // 40px +$spacing-element-10: 12rem; // 48px +$screen-s: 80rem; //320px +$screen-md: 164rem; // 672px +$screen-l: 264rem; //1056px +$screen-xl: 328rem; //1312px +$screen-xxl: 396rem; //1584px \ No newline at end of file diff --git a/src/styles/core/grid/_grid.scss b/src/styles/core/grid/_grid.scss index 1d38149..ac69758 100644 --- a/src/styles/core/grid/_grid.scss +++ b/src/styles/core/grid/_grid.scss @@ -1,6 +1,5 @@ -@import '../../prefrix'; +@import '../../prefix'; @import 'breakpoints'; -@import 'grid-vars'; @import 'grid-mixins'; /* From f8c32280591974ba34c8cbaf67429099f53404c9 Mon Sep 17 00:00:00 2001 From: Marcus Mena Date: Mon, 9 Nov 2020 12:58:40 +0100 Subject: [PATCH 11/11] Removed all debugg code --- src/styles/_prefix.scss | 1 + src/styles/core/grid/_grid-mixins.scss | 29 +------------------------- src/styles/core/grid/_grid-vars.scss | 13 ++++-------- 3 files changed, 6 insertions(+), 37 deletions(-) diff --git a/src/styles/_prefix.scss b/src/styles/_prefix.scss index 2b2a4a5..5bb99fc 100644 --- a/src/styles/_prefix.scss +++ b/src/styles/_prefix.scss @@ -1 +1,2 @@ +// Standardize prefixed using for different classes and css rules $prefix: '.sdds' !default; \ No newline at end of file diff --git a/src/styles/core/grid/_grid-mixins.scss b/src/styles/core/grid/_grid-mixins.scss index 6151412..01b5ed6 100644 --- a/src/styles/core/grid/_grid-mixins.scss +++ b/src/styles/core/grid/_grid-mixins.scss @@ -1,14 +1,6 @@ @import '../../prefix'; @import 'breakpoints'; -//FIXME: Remove this, debug -.outside { - height: 50px; - word-break: break-all; - background-color:#ecd8d8; - outline: 1px solid #4c0808; -} - // Containers @mixin grid-container($prefix) { #{$prefix}-container { @@ -16,20 +8,12 @@ margin-right: auto; width: 100%; max-width: $screen-xxl; - - //FIXME: Remove this, debug - font-size: 16px; - background-color:#ef5252; } #{$prefix}-container-fluid { margin-left: auto; margin-right: auto; width: 100%; - - //FIXME: Remove this, debug - font-size: 16px; - background-color:#ef5252; } } @@ -53,6 +37,7 @@ } } +// Grid breakpoints for full-width @mixin grid-container-full-width-breakpoints($prefix,$breakpoint-width,$breakpoint-margin) { @media (min-width: $breakpoint-width) { #{$prefix}-container-fluid { @@ -67,10 +52,6 @@ #{$prefix}-row { display:flex; flex-wrap: wrap; - - //FIXME: Remove this, debug - background-color: white; - outline: 1px dashed blue; } } @@ -94,10 +75,6 @@ @include grid-col-size($breakpoint-columns, $i); @include grid-gutters($breakpoint-gutter, $breakpoint-padding); - //FIXME: Remove this, debug - background-color: #ffafaf; - outline: 1px solid red; - } } } @@ -148,10 +125,6 @@ @include grid-col-size($breakpoint-columns, $i); @include grid-gutters($breakpoint-gutter, $breakpoint-padding); margin: 0; - - //FIXME: Remove this, debug - background-color: #ffafaf; - outline: 1px solid red; } } } diff --git a/src/styles/core/grid/_grid-vars.scss b/src/styles/core/grid/_grid-vars.scss index 94cad38..5c52735 100644 --- a/src/styles/core/grid/_grid-vars.scss +++ b/src/styles/core/grid/_grid-vars.scss @@ -1,13 +1,8 @@ -//FIXME: remove Just as reference to understand, Remove this, debug -//Testing only -$base-unit: 4px; //FIXME: needs to be implemented in scania-theme +/* + Contains spacing variables for the layout +*/ -//FIXME: Remove, for dev -:root { - font-size: $base-unit; -} - -// 1 rem = 8px; +// 1 rem = 4px; // Layout scale $spacing-layout-01: 2rem; // 8px $spacing-layout-02: 4rem; // 16px