From 2e2e59a411637e2d790b659504ba78be25d9d50a Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Thu, 14 Mar 2019 12:51:13 -0700 Subject: [PATCH 1/3] add grid-media-modular to cut down on modular-spacing media queries --- core/css/decanter.css | 48 ------------------- .../_calculate-modular-spacing.scss | 2 +- .../modular-scale/_modular-spacing.scss | 2 +- core/scss/utilities/variables/core/_grid.scss | 13 +++++ 4 files changed, 15 insertions(+), 50 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 5b3826f61..0a434a4e8 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6757,22 +6757,10 @@ button, .su-card__contents { padding: 3.2rem; } } -@media only screen and (min-width: 576px) { - .su-card__contents { - padding: 3.2rem; } } - @media only screen and (min-width: 768px) { .su-card__contents { padding: 3.6rem; } } -@media only screen and (min-width: 992px) { - .su-card__contents { - padding: 3.6rem; } } - -@media only screen and (min-width: 1200px) { - .su-card__contents { - padding: 3.6rem; } } - @media only screen and (min-width: 1500px) { .su-card__contents { padding: 3.8rem; } } @@ -6945,26 +6933,11 @@ button, padding-top: 3.2rem; padding-bottom: 3.2rem; padding-left: 3.2rem; } } - @media only screen and (min-width: 576px) { - .su-card--horizontal img { - padding-top: 3.2rem; - padding-bottom: 3.2rem; - padding-left: 3.2rem; } } @media only screen and (min-width: 768px) { .su-card--horizontal img { padding-top: 3.6rem; padding-bottom: 3.6rem; padding-left: 3.6rem; } } - @media only screen and (min-width: 992px) { - .su-card--horizontal img { - padding-top: 3.6rem; - padding-bottom: 3.6rem; - padding-left: 3.6rem; } } - @media only screen and (min-width: 1200px) { - .su-card--horizontal img { - padding-top: 3.6rem; - padding-bottom: 3.6rem; - padding-left: 3.6rem; } } @media only screen and (min-width: 1500px) { .su-card--horizontal img { padding-top: 3.8rem; @@ -7089,22 +7062,10 @@ button, .su-global-footer { padding-top: 2.31111104rem; padding-bottom: 2.31111104rem; } } - @media only screen and (min-width: 576px) { - .su-global-footer { - padding-top: 2.31111104rem; - padding-bottom: 2.31111104rem; } } @media only screen and (min-width: 768px) { .su-global-footer { padding-top: 2.59999992rem; padding-bottom: 2.59999992rem; } } - @media only screen and (min-width: 992px) { - .su-global-footer { - padding-top: 2.59999992rem; - padding-bottom: 2.59999992rem; } } - @media only screen and (min-width: 1200px) { - .su-global-footer { - padding-top: 2.59999992rem; - padding-bottom: 2.59999992rem; } } @media only screen and (min-width: 1500px) { .su-global-footer { padding-top: 2.74444436rem; @@ -7152,18 +7113,9 @@ button, @media only screen and (min-width: 0) { .su-global-footer .su-global-footer__brand { margin-bottom: 0.8rem; } } - @media only screen and (min-width: 576px) { - .su-global-footer .su-global-footer__brand { - margin-bottom: 0.8rem; } } @media only screen and (min-width: 768px) { .su-global-footer .su-global-footer__brand { margin-bottom: 0.9rem; } } - @media only screen and (min-width: 992px) { - .su-global-footer .su-global-footer__brand { - margin-bottom: 0.9rem; } } - @media only screen and (min-width: 1200px) { - .su-global-footer .su-global-footer__brand { - margin-bottom: 0.9rem; } } @media only screen and (min-width: 1500px) { .su-global-footer .su-global-footer__brand { margin-bottom: 0.95rem; } } diff --git a/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss b/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss index 49eb0ced1..05f0b455c 100644 --- a/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss +++ b/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss @@ -14,7 +14,7 @@ // // Style guide: Functions.ModularScale.calculate-modular-spacing // -@function calculate-modular-spacing($step: 0, $breakpoint: 'xl') { +@function calculate-modular-spacing($step: 0, $breakpoint: 'md') { @if ($step >= -4 and $step <= 5) { @return get-modular-spacing-base($breakpoint) * get-modular-spacing-multiplier($step); } @else { diff --git a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss index b9d19c191..7b3a7deda 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss @@ -20,7 +20,7 @@ // Style guide: Mixins.Modular.modular-spacing // -@mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media) { +@mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media-modular) { @each $key, $breakpoint in $grid { @include grid-media($key) { @if length($steps) == 1 { diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 85c33870c..8c5e988c0 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -53,6 +53,19 @@ $grid-media-only: ( '2xl': $breakpoint-2xl ) !default; +// $grid-media-modular +// +// A sass map of breakpoints sized keyed with the breakpoint shortcode for generating modular-spacing media queries. +// Some breakpoints are skipped because the modular-spacing-base are the same for certain breakpoints. +// +// Style guide: Variables.Core.grid-media-modular +// +$grid-media-modular: ( + 'xs': $breakpoint-xs, + 'md': $breakpoint-md, + '2xl': $breakpoint-2xl +) !default; + // $responsive-columns-default // // A sass map of css grid columns keyed with breakpoint media queries. 2 column. From a72838acb94f0f4ef8d8ef9356d0e0d2e01de827 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Thu, 14 Mar 2019 15:41:39 -0700 Subject: [PATCH 2/3] Remove grid-media-modular, but change @modular-spacing mixin to only write media query if modular base is not the same as previous breakpoint --- .../_calculate-modular-spacing.scss | 2 +- .../modular-scale/_modular-spacing.scss | 94 +++++++++++-------- core/scss/utilities/variables/core/_grid.scss | 13 --- 3 files changed, 56 insertions(+), 53 deletions(-) diff --git a/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss b/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss index 05f0b455c..49eb0ced1 100644 --- a/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss +++ b/core/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss @@ -14,7 +14,7 @@ // // Style guide: Functions.ModularScale.calculate-modular-spacing // -@function calculate-modular-spacing($step: 0, $breakpoint: 'md') { +@function calculate-modular-spacing($step: 0, $breakpoint: 'xl') { @if ($step >= -4 and $step <= 5) { @return get-modular-spacing-base($breakpoint) * get-modular-spacing-multiplier($step); } @else { diff --git a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss index 7b3a7deda..09ed7877e 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss @@ -20,52 +20,68 @@ // Style guide: Mixins.Modular.modular-spacing // -@mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media-modular) { - @each $key, $breakpoint in $grid { - @include grid-media($key) { - @if length($steps) == 1 { - #{$type}: (calculate-modular-spacing($steps, $key)); - } @else if length($steps) == 2 { - @if nth($steps, 1) != null { - #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key)); - #{$type}-bottom: (calculate-modular-spacing(nth($steps, 1), $key)); - } +@mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media) { + $bp_list: map-keys($grid); // get a list of all breakpoint keys in $grid + $number_bp: length($bp_list); // find total number of breakpoints in our grid - @if nth($steps, 2) != null { - #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key)); - #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key)); - } - } @else if length($steps) == 3 { - @if nth($steps, 1) != null { - #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key)); - } + @for $i from 1 through $number_bp { + $current_base: get-modular-spacing-base(nth($bp_list, $i)); // get modular-spacing base value for current breakpoint + $previous_base: 1000; // initialize $previous_base - @if nth($steps, 2) != null { - #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key)); - #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key)); - } + // if $i is not 1, replace $previous_base with modular-spacing base value for previous breakpoint + @if $i != 1 { + $previous_base: get-modular-spacing-base(nth($bp_list, $i - 1)); + } - @if nth($steps, 3) != null { - #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key)); - } - } @else if length($steps) == 4 { - @if nth($steps, 1) != null { - #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key)); - } + // Only write media query if $i = 1 or if $current_base is different from $previous_base + @if $current_base != $previous_base { + $key: nth($bp_list, $i); - @if nth($steps, 2) != null { - #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key)); - } + @include grid-media($key) { + @if length($steps) == 1 { + #{$type}: (calculate-modular-spacing($steps, $key)); + } @else if length($steps) == 2 { + @if nth($steps, 1) != null { + #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key)); + #{$type}-bottom: (calculate-modular-spacing(nth($steps, 1), $key)); + } - @if nth($steps, 3) != null { - #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key)); - } + @if nth($steps, 2) != null { + #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key)); + #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key)); + } + } @else if length($steps) == 3 { + @if nth($steps, 1) != null { + #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key)); + } + + @if nth($steps, 2) != null { + #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key)); + #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key)); + } + + @if nth($steps, 3) != null { + #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key)); + } + } @else if length($steps) == 4 { + @if nth($steps, 1) != null { + #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key)); + } + + @if nth($steps, 2) != null { + #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key)); + } + + @if nth($steps, 3) != null { + #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key)); + } - @if nth($steps, 4) != null { - #{$type}-left: (calculate-modular-spacing(nth($steps, 4), $key)); + @if nth($steps, 4) != null { + #{$type}-left: (calculate-modular-spacing(nth($steps, 4), $key)); + } + } @else if length($steps) > 4 or length($steps) == 0 { + @error '$steps should have 1 to 4 values'; } - } @else if length($steps) > 4 or length($steps) == 0 { - @error '$steps should have 1 to 4 values'; } } } diff --git a/core/scss/utilities/variables/core/_grid.scss b/core/scss/utilities/variables/core/_grid.scss index 8c5e988c0..85c33870c 100644 --- a/core/scss/utilities/variables/core/_grid.scss +++ b/core/scss/utilities/variables/core/_grid.scss @@ -53,19 +53,6 @@ $grid-media-only: ( '2xl': $breakpoint-2xl ) !default; -// $grid-media-modular -// -// A sass map of breakpoints sized keyed with the breakpoint shortcode for generating modular-spacing media queries. -// Some breakpoints are skipped because the modular-spacing-base are the same for certain breakpoints. -// -// Style guide: Variables.Core.grid-media-modular -// -$grid-media-modular: ( - 'xs': $breakpoint-xs, - 'md': $breakpoint-md, - '2xl': $breakpoint-2xl -) !default; - // $responsive-columns-default // // A sass map of css grid columns keyed with breakpoint media queries. 2 column. From 9ca958a31ebc968e81ec3a926797ca00ff852118 Mon Sep 17 00:00:00 2001 From: Shea McKinney Date: Sun, 17 Mar 2019 12:03:24 -0700 Subject: [PATCH 3/3] Comment formatting. --- .../modular-scale/_modular-spacing.scss | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss index 09ed7877e..562949fc0 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss @@ -3,10 +3,12 @@ // // @modular-spacing // -// A mixin for adding spacing (margin or padding) between elements or between an element and the edge of its container. -// The amount of spacing is returned using a unitless scaling system with a curated scale. +// A mixin for adding spacing (margin or padding) between elements or between an +// element and the edge of its container. The amount of spacing is returned +// using a unitless scaling system with a curated scale. // -// Please see core/scss/utilities/variables/core/_modular-spacing.scss for variable maps. +// Please see core/scss/utilities/variables/core/_modular-spacing.scss for +// variable maps. // // **Examples:** // - `@include modular-spacing(3);` @@ -21,19 +23,25 @@ // @mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media) { - $bp_list: map-keys($grid); // get a list of all breakpoint keys in $grid - $number_bp: length($bp_list); // find total number of breakpoints in our grid + // Get a list of all breakpoint keys in $grid. + $bp_list: map-keys($grid); + // Find total number of breakpoints in our grid. + $number_bp: length($bp_list); @for $i from 1 through $number_bp { - $current_base: get-modular-spacing-base(nth($bp_list, $i)); // get modular-spacing base value for current breakpoint - $previous_base: 1000; // initialize $previous_base + // Get modular-spacing base value for current breakpoint. + $current_base: get-modular-spacing-base(nth($bp_list, $i)); + // Initialize $previous_base. + $previous_base: null; - // if $i is not 1, replace $previous_base with modular-spacing base value for previous breakpoint + // If $i is not 1, replace $previous_base with modular-spacing base value + // for previous breakpoint. @if $i != 1 { $previous_base: get-modular-spacing-base(nth($bp_list, $i - 1)); } - // Only write media query if $i = 1 or if $current_base is different from $previous_base + // Only write media query if $i = 1 or if $current_base is different from + // $previous_base. @if $current_base != $previous_base { $key: nth($bp_list, $i);