Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) #503

Merged
merged 2 commits into from
Oct 2, 2019

Conversation

yvonnetangsu
Copy link
Member

@yvonnetangsu yvonnetangsu commented Oct 1, 2019

READY FOR REVIEW

Summary

  • Size of existing @modular-spacing between step 3 and 4, 4 and 5 are too big, need to add in-between spacers, and add additional spacers to account for wider range of spacing needs.
    Screen Shot 2019-10-01 at 2 15 50 PM

New spacers:

@modular-spacing 4 (change)
3XL: Base * 3.2

@modular-spacing 5 (change)
4XL: Base * 4

@modular-spacing 6 (new)
5XL: Base * 5

@modular-spacing 7 (new)
6XL: Base * 6

@modular-spacing 8 (new)
7XL: Base * 7

@modular-spacing 9 (new)
8XL: Base * 9

  • Round the result modular-spacing values to 2 decimals.

Needed By (Date)

  • N/A

Urgency

  • N/A

Steps to Test

  1. Pull this branch and compile styleguide
  2. Test the @modular-spacing mixin by passing in the newly added integer steps, e.g., in scss/components/_cards.scss, apply @modular-spacing('padding', 9 8 7 6) to .su-card__contents, check the rendered padding value matches the ones in the screenshot above at all 3 breakpoint ranges.

Affected Projects or Products

  • Decanter
  • Redwood

Associated Issues and/or People

@yvonnetangsu yvonnetangsu changed the title Modify and add 4 new modular-spacing steps Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) Oct 1, 2019
@yvonnetangsu yvonnetangsu self-assigned this Oct 1, 2019
@yvonnetangsu yvonnetangsu requested a review from sherakama October 1, 2019 21:52
Copy link
Member

@sherakama sherakama left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code looks good to me.

@sherakama sherakama merged commit 558d192 into master Oct 2, 2019
@sherakama sherakama deleted the 492-add-modular-spacer branch October 2, 2019 00:09
yvonnetangsu added a commit that referenced this pull request Oct 2, 2019
* master:
  Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) (#503)
yvonnetangsu added a commit that referenced this pull request Oct 2, 2019
* master:
  Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) (#503)
yvonnetangsu added a commit that referenced this pull request Oct 29, 2019
* master: (28 commits)
  Updated packages and configuration files. (#527)
  Use rem instead of em for big button font size so it doesn't blow up in sections if we set a large base font size; finetune big button padding for smaller breakpoints (#522)
  Change sizes of link icons to use px instead of em to prevent occasional clipping (#523)
  D8CORE-628: Add caption option to hero banner. (#517)
  Use percentage for html root font size instead of px so people can scale up using browser font size preferences (#526)
  Mixins documention update — @centered-column (#448)
  Adds Tugboat and fixes npm dependencies. (#518)
  Update _hero.scss (#513)
  Create Aspect Ratio Mixin (#445)
  Adding global footer variants and link tweaks for legibility, change layout at MD breakpoint to match Figma (#500)
  Updated package and lock files.
  Add parameter to @link-icon to adjust vertical position of icon and different options for $animate parameter (#504)
  Delete card-2019-08-28.twig (#506)
  Update _input.scss (#507)
  Scale down type-a and type-b font size at xs and sm breakpoints, repurpose splash font and minor typography tweaks (#498)
  Add 4 new @modular-spacing steps (#6 to #9) and modify 2 existing steps (#3 and #4) (#503)
  add su- prefix to Decanter core and component variables, deprecate old names (#452)
  Includevar (#496)
  Put appearance back for select dropdowns (#479)
  Split input.scss into several files and add new input-base placeholder (#476)
  ...

# Conflicts (resolved manually)
#	core/dist/css/decanter.css
#	core/src/scss/components/card/_card.scss
#	core/src/scss/components/card/index.scss
#	core/src/scss/utilities/placeholders/components/_card.scss
#	core/src/templates/components/card/card.twig
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants