From 558d192edb578aa13f676452813c68a405ec45d4 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 1 Oct 2019 17:09:03 -0700 Subject: [PATCH] Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) (#503) * Add 4 extra @modular-spacing steps * Add rounding to modular spacing calculations. --- core/dist/css/decanter.css | 66 +++++++++---------- .../_calculate-modular-spacing.scss | 8 +-- .../_get-modular-spacing-multiplier.scss | 2 +- .../modular-scale/_modular-spacing.scss | 9 ++- .../variables/core/_modular-spacing.scss | 38 ++++++----- 5 files changed, 65 insertions(+), 58 deletions(-) diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css index 602fdf9ee..d0791d2ef 100644 --- a/core/dist/css/decanter.css +++ b/core/dist/css/decanter.css @@ -411,13 +411,13 @@ button, font-size: 1.5625em; } @media only screen and (min-width: 0) { .su-card .su-card__contents > h2 { - margin-bottom: 1.06666672rem; } } + margin-bottom: 1.07rem; } } @media only screen and (min-width: 768px) { .su-card .su-card__contents > h2 { - margin-bottom: 1.20000006rem; } } + margin-bottom: 1.2rem; } } @media only screen and (min-width: 1500px) { .su-card .su-card__contents > h2 { - margin-bottom: 1.26666673rem; } } + margin-bottom: 1.27rem; } } .su-card .su-card__contents > h2 > a { font-weight: 700; -webkit-transition: color 0.3s ease-out; @@ -436,26 +436,26 @@ button, @media only screen and (min-width: 0) { .su-card .su-card__contents .su-link--action, .su-card .su-card__contents > a { - margin-top: 1.06666672rem; } } + margin-top: 1.07rem; } } @media only screen and (min-width: 768px) { .su-card .su-card__contents .su-link--action, .su-card .su-card__contents > a { - margin-top: 1.20000006rem; } } + margin-top: 1.2rem; } } @media only screen and (min-width: 1500px) { .su-card .su-card__contents .su-link--action, .su-card .su-card__contents > a { - margin-top: 1.26666673rem; } } + margin-top: 1.27rem; } } .su-card .su-card__button { text-align: center; } @media only screen and (min-width: 0) { .su-card .su-card__button { - margin-top: 2.31111104rem; } } + margin-top: 2.31rem; } } @media only screen and (min-width: 768px) { .su-card .su-card__button { - margin-top: 2.59999992rem; } } + margin-top: 2.6rem; } } @media only screen and (min-width: 1500px) { .su-card .su-card__button { - margin-top: 2.74444436rem; } } + margin-top: 2.74rem; } } @media only screen and (min-width: 0) and (max-width: 575px) { .su-card .su-card__button .su-button { width: auto; } } @@ -7736,11 +7736,11 @@ button, @media only screen and (min-width: 0) { .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { - margin-right: 2.31111104rem; } + margin-right: 2.31rem; } @supports (grid-column-gap: 20px) { .su-card--horizontal:not(.su-card--link), .su-card--horizontal.su-card--link > a { - grid-column-gap: 2.31111104rem; } + grid-column-gap: 2.31rem; } .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { margin-right: 0; @@ -7748,11 +7748,11 @@ button, @media only screen and (min-width: 576px) { .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { - margin-right: 2.31111104rem; } + margin-right: 2.31rem; } @supports (grid-column-gap: 20px) { .su-card--horizontal:not(.su-card--link), .su-card--horizontal.su-card--link > a { - grid-column-gap: 2.31111104rem; } + grid-column-gap: 2.31rem; } .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { margin-right: 0; @@ -7760,11 +7760,11 @@ button, @media only screen and (min-width: 768px) { .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { - margin-right: 2.59999992rem; } + margin-right: 2.6rem; } @supports (grid-column-gap: 20px) { .su-card--horizontal:not(.su-card--link), .su-card--horizontal.su-card--link > a { - grid-column-gap: 2.59999992rem; } + grid-column-gap: 2.6rem; } .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { margin-right: 0; @@ -7772,11 +7772,11 @@ button, @media only screen and (min-width: 992px) { .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { - margin-right: 2.59999992rem; } + margin-right: 2.6rem; } @supports (grid-column-gap: 20px) { .su-card--horizontal:not(.su-card--link), .su-card--horizontal.su-card--link > a { - grid-column-gap: 2.59999992rem; } + grid-column-gap: 2.6rem; } .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { margin-right: 0; @@ -7784,11 +7784,11 @@ button, @media only screen and (min-width: 1200px) { .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { - margin-right: 2.59999992rem; } + margin-right: 2.6rem; } @supports (grid-column-gap: 20px) { .su-card--horizontal:not(.su-card--link), .su-card--horizontal.su-card--link > a { - grid-column-gap: 2.59999992rem; } + grid-column-gap: 2.6rem; } .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { margin-right: 0; @@ -7796,11 +7796,11 @@ button, @media only screen and (min-width: 1500px) { .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { - margin-right: 2.74444436rem; } + margin-right: 2.74rem; } @supports (grid-column-gap: 20px) { .su-card--horizontal:not(.su-card--link), .su-card--horizontal.su-card--link > a { - grid-column-gap: 2.74444436rem; } + grid-column-gap: 2.74rem; } .su-card--horizontal:not(.su-card--link) > *, .su-card--horizontal.su-card--link > a > * { margin-right: 0; @@ -7886,13 +7886,13 @@ button, background-color: inherit; } @media only screen and (min-width: 0) { .su-card--minimal .su-card__contents { - padding-top: 2.31111104rem; } } + padding-top: 2.31rem; } } @media only screen and (min-width: 768px) { .su-card--minimal .su-card__contents { - padding-top: 2.59999992rem; } } + padding-top: 2.6rem; } } @media only screen and (min-width: 1500px) { .su-card--minimal .su-card__contents { - padding-top: 2.74444436rem; } } + padding-top: 2.74rem; } } @media only screen and (min-width: 0) and (max-width: 575px) { .su-card--minimal .su-card__contents { padding-right: 0; @@ -8032,16 +8032,16 @@ button, color: #ffffff; } @media only screen and (min-width: 0) { .su-global-footer { - padding-top: 2.31111104rem; - padding-bottom: 2.31111104rem; } } + padding-top: 2.31rem; + padding-bottom: 2.31rem; } } @media only screen and (min-width: 768px) { .su-global-footer { - padding-top: 2.59999992rem; - padding-bottom: 2.59999992rem; } } + padding-top: 2.6rem; + padding-bottom: 2.6rem; } } @media only screen and (min-width: 1500px) { .su-global-footer { - padding-top: 2.74444436rem; - padding-bottom: 2.74444436rem; } } + padding-top: 2.74rem; + padding-bottom: 2.74rem; } } .su-global-footer a { color: rgba(255, 255, 255, 0.9); text-decoration: none; @@ -9825,13 +9825,13 @@ a { width: calc(100% - 200px); } } @media only screen and (min-width: 0) { .su-masthead > section:last-of-type { - padding-top: 2.31111104rem; } } + padding-top: 2.31rem; } } @media only screen and (min-width: 768px) { .su-masthead > section:last-of-type { - padding-top: 2.59999992rem; } } + padding-top: 2.6rem; } } @media only screen and (min-width: 1500px) { .su-masthead > section:last-of-type { - padding-top: 2.74444436rem; } } + padding-top: 2.74rem; } } .su-masthead .su-lockup { max-width: -webkit-fit-content; max-width: -moz-fit-content; diff --git a/core/src/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss b/core/src/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss index a7634b6b8..d7e81a251 100644 --- a/core/src/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss +++ b/core/src/scss/utilities/functions/modular-scale/_calculate-modular-spacing.scss @@ -9,16 +9,16 @@ // // The default value for $step is 0, which returns a multiplier value of 1, i.e., calculate-modular-spacing(0, 'xs') = $su-modular-spacing-base at XS breakpoint // -// $step - Integers from -4 to 5 including 0 +// $step - Integers from -4 to 9 including 0 // $breakpoint - One of `xs`, `sm`, `md`, `lg`, `xl`, `2xl` // // Style guide: Functions.ModularScale.calculate-modular-spacing // @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); + @if ($step >= -4 and $step <= 9) { + @return round(get-modular-spacing-base($breakpoint) * get-modular-spacing-multiplier($step) * 100) / 100; } @else { - @error '$step should be an integer between -4 and 5'; + @error '$step should be an integer between -4 and 9'; } } diff --git a/core/src/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss b/core/src/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss index b9bf14cc8..76d8a4665 100644 --- a/core/src/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss +++ b/core/src/scss/utilities/functions/modular-scale/_get-modular-spacing-multiplier.scss @@ -12,7 +12,7 @@ // Style guide: Functions.ModularScale.get-modular-spacing-multiplier // @function get-modular-spacing-multiplier($step: 0) { - @if ($step >= -4 and $step <= 5) { + @if ($step >= -4 and $step <= 9) { @return map-get($su-modular-spacing-multiplier, $step); } } diff --git a/core/src/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/src/scss/utilities/mixins/modular-scale/_modular-spacing.scss index 06040246c..0c2ebb2bb 100644 --- a/core/src/scss/utilities/mixins/modular-scale/_modular-spacing.scss +++ b/core/src/scss/utilities/mixins/modular-scale/_modular-spacing.scss @@ -16,7 +16,8 @@ // - `@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. +// $steps - List (1 to 4 values): Either integer (from -4 to 9 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 @@ -34,14 +35,12 @@ // 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); diff --git a/core/src/scss/utilities/variables/core/_modular-spacing.scss b/core/src/scss/utilities/variables/core/_modular-spacing.scss index 7ab2d7514..5fa16e116 100644 --- a/core/src/scss/utilities/variables/core/_modular-spacing.scss +++ b/core/src/scss/utilities/variables/core/_modular-spacing.scss @@ -49,19 +49,23 @@ $modular-spacing-base: $su-modular-spacing-base !default; // $su-modular-spacing-multiplier // // The multiplier between each modular spacing steps. These numbers are fine-tuned manually and do not follow a modular scale ratio. -// Step 0 correspond to a multiplier of 1. +// Step 0 correspond to a multiplier of 1. There are currently 14 integer steps from -4 to 9. // // Markup: $su-modular-spacing-multiplier: ( -// -4: .16666667, -// -3: .33333333, -// -2: .5, -// -1: .6666667, -// 0: 1, -// 1: 1.4444444, -// 2: 2, -// 3: 2.5, -// 4: 4, -// 5: 6 +// -4: 0.16666667, +// -3: 0.33333333, +// -2: 0.5, +// -1: 0.6666667, +// 0: 1, +// 1: 1.4444444, +// 2: 2, +// 3: 2.5, +// 4: 3.2, +// 5: 4, +// 6: 5, +// 7: 6, +// 8: 7, +// 9: 9 //) !default; // // Styleguide: Variables.Core.Modularspacing.su-modular-spacing-multiplier @@ -70,13 +74,17 @@ $su-modular-spacing-multiplier: ( -4: 0.16666667, -3: 0.33333333, -2: 0.5, - -1: 0.6666667, + -1: 0.66666667, 0: 1, - 1: 1.4444444, + 1: 1.44444444, 2: 2, 3: 2.5, - 4: 4, - 5: 6 + 4: 3.2, + 5: 4, + 6: 5, + 7: 6, + 8: 7, + 9: 9 ) !default; //