From b3d011a3bd9525345ec62da1db008328de6f5a83 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 6 Mar 2019 10:00:01 -0800 Subject: [PATCH] Tweaking modular-spacing mixin to be more user friendly (#309) * Modular-spacing tweak - uses padding/margin shorthand and consolidate media queries * doc and error message * CC FIXUP --- core/css/decanter.css | 72 +++++-------------- .../components/card/_card--horizontal.scss | 4 +- core/scss/components/card/_card.scss | 2 +- .../global-footer/_global-footer.scss | 5 +- .../modular-scale/_modular-spacing.scss | 62 +++++++++++++--- 5 files changed, 75 insertions(+), 70 deletions(-) diff --git a/core/css/decanter.css b/core/css/decanter.css index 570e73ec3..f61967338 100644 --- a/core/css/decanter.css +++ b/core/css/decanter.css @@ -6924,58 +6924,34 @@ button, -ms-grid-column: 1; } @media only screen and (min-width: 0) { .su-card--horizontal img { + 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; + padding-bottom: 3.8rem; padding-left: 3.8rem; } } - @media only screen and (min-width: 0) { - .su-card--horizontal img { - padding-top: 3.2rem; } } - @media only screen and (min-width: 576px) { - .su-card--horizontal img { - padding-top: 3.2rem; } } - @media only screen and (min-width: 768px) { - .su-card--horizontal img { - padding-top: 3.6rem; } } - @media only screen and (min-width: 992px) { - .su-card--horizontal img { - padding-top: 3.6rem; } } - @media only screen and (min-width: 1200px) { - .su-card--horizontal img { - padding-top: 3.6rem; } } - @media only screen and (min-width: 1500px) { - .su-card--horizontal img { - padding-top: 3.8rem; } } - @media only screen and (min-width: 0) { - .su-card--horizontal img { - padding-bottom: 3.2rem; } } - @media only screen and (min-width: 576px) { - .su-card--horizontal img { - padding-bottom: 3.2rem; } } - @media only screen and (min-width: 768px) { - .su-card--horizontal img { - padding-bottom: 3.6rem; } } - @media only screen and (min-width: 992px) { - .su-card--horizontal img { - padding-bottom: 3.6rem; } } - @media only screen and (min-width: 1200px) { - .su-card--horizontal img { - padding-bottom: 3.6rem; } } - @media only screen and (min-width: 1500px) { - .su-card--horizontal img { - padding-bottom: 3.8rem; } } .su-card--horizontal .su-card__contents { -ms-grid-row: 2; -ms-grid-column: 1; } @@ -7093,39 +7069,27 @@ button, color: #ffffff; } @media only screen and (min-width: 0) { .su-global-footer { - padding-top: 2.31111104rem; } } - @media only screen and (min-width: 576px) { - .su-global-footer { - padding-top: 2.31111104rem; } } - @media only screen and (min-width: 768px) { - .su-global-footer { - padding-top: 2.59999992rem; } } - @media only screen and (min-width: 992px) { - .su-global-footer { - padding-top: 2.59999992rem; } } - @media only screen and (min-width: 1200px) { - .su-global-footer { - padding-top: 2.59999992rem; } } - @media only screen and (min-width: 1500px) { - .su-global-footer { - padding-top: 2.74444436rem; } } - @media only screen and (min-width: 0) { - .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; padding-bottom: 2.74444436rem; } } .su-global-footer a { color: rgba(255, 255, 255, 0.9); diff --git a/core/scss/components/card/_card--horizontal.scss b/core/scss/components/card/_card--horizontal.scss index 898ada9f9..09bf4f14e 100644 --- a/core/scss/components/card/_card--horizontal.scss +++ b/core/scss/components/card/_card--horizontal.scss @@ -39,9 +39,7 @@ // Modular padding. img { - @include modular-spacing(2, 'padding-left'); - @include modular-spacing(2, 'padding-top'); - @include modular-spacing(2, 'padding-bottom'); + @include modular-spacing('padding', 2 null 2 2); -ms-grid-row: 1; -ms-grid-column: 1; } diff --git a/core/scss/components/card/_card.scss b/core/scss/components/card/_card.scss index f7a15ab8e..a2a81c832 100644 --- a/core/scss/components/card/_card.scss +++ b/core/scss/components/card/_card.scss @@ -25,7 +25,7 @@ // Card contents spacing. .su-card__contents { - @include modular-spacing(2); + @include modular-spacing('padding', 2); // Ensure no bottom padding on last item. *:last-child { diff --git a/core/scss/components/global-footer/_global-footer.scss b/core/scss/components/global-footer/_global-footer.scss index b22d4db5a..70276acae 100644 --- a/core/scss/components/global-footer/_global-footer.scss +++ b/core/scss/components/global-footer/_global-footer.scss @@ -12,8 +12,7 @@ // Global styles for the global footer. .su-global-footer { - @include modular-spacing(1, 'padding-top'); - @include modular-spacing(1, 'padding-bottom'); + @include modular-spacing('padding', 1 null); background-color: $color-cardinal-red; color: $color-white; @@ -38,7 +37,7 @@ // The Logo. .su-global-footer__brand { @include padding(0.5rem null null); - @include modular-spacing(-2, 'margin-bottom'); + @include modular-spacing('margin', null null -2); text-align: center; a { diff --git a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss index ce3b625b1..1817f90d3 100644 --- a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss +++ b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss @@ -8,21 +8,65 @@ // // Please see core/scss/utilities/variables/core/_modular-spacing.scss for variable maps. // -// $step - Integers from -4 to 5 including 0. Default for $step is 0 which returns the modular spacing base value. -// -// $property - CSS margin or padding property including directional properties, e.g., margin-left, padding-top etc. -// // **Examples:** -// - `@include modular-spacing(0, 'margin')` -// - `@include modular-spacing(-3, 'padding-top')` -// - `@include modular-spacing(4, 'margin-left');` +// - `@include modular-spacing(3);` +// - `@include modular-spacing('padding', 2 null)` +// - `@include modular-spacing('margin', 0 -4 1 2)` +// +// $type - String: Spacing type, either 'padding' or 'margin'. +// $steps - List (1 to 4 values): Either integer (from -4 to 5 including 0) or null. Follows the shorthand notation of padding/margin. Use null to skip a side. +// A value of 0 returns the modular spacing base value for that breakpoint. // // Style guide: Mixins.Modular.modular-spacing // -@mixin modular-spacing($step: 0, $property: 'padding', $grid: $grid-media) { + +@mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media) { @each $key, $breakpoint in $grid { @include grid-media($key) { - #{$property}: (calculate-modular-spacing($step, $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, 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)); + } + } @else if length($steps) > 4 or length($step) == 0 { + @error '$steps should have 1 to 4 values'; + } } } }