Skip to content
This repository has been archived by the owner on Jan 22, 2020. It is now read-only.

Commit

Permalink
Switch pods to padding by default instead of margin
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashenden
ashenden committed Jan 24, 2018
1 parent 4567a89 commit 311517b
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 82 deletions.
20 changes: 10 additions & 10 deletions docs/_assets/styles/layout/navigation.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -437,19 +437,19 @@

// Margin Left

@sidebar-menu-item-margin-left: -@pod-margin-left;
@sidebar-menu-item-margin-left-screen-small: -@pod-margin-left-screen-small;
@sidebar-menu-item-margin-left-screen-medium: -@pod-margin-left-screen-medium;
@sidebar-menu-item-margin-left-screen-large: -@pod-margin-left-screen-large;
@sidebar-menu-item-margin-left-screen-jumbo: -@pod-margin-left-screen-jumbo;
@sidebar-menu-item-margin-left: -@pod-padding-left;
@sidebar-menu-item-margin-left-screen-small: -@pod-padding-left-screen-small;
@sidebar-menu-item-margin-left-screen-medium: -@pod-padding-left-screen-medium;
@sidebar-menu-item-margin-left-screen-large: -@pod-padding-left-screen-large;
@sidebar-menu-item-margin-left-screen-jumbo: -@pod-padding-left-screen-jumbo;

// Margin Right

@sidebar-menu-item-margin-right: -@pod-margin-right;
@sidebar-menu-item-margin-right-screen-small: -@pod-margin-right-screen-small;
@sidebar-menu-item-margin-right-screen-medium: -@pod-margin-right-screen-medium;
@sidebar-menu-item-margin-right-screen-large: -@pod-margin-right-screen-large;
@sidebar-menu-item-margin-right-screen-jumbo: -@pod-margin-right-screen-jumbo;
@sidebar-menu-item-margin-right: -@pod-padding-right;
@sidebar-menu-item-margin-right-screen-small: -@pod-padding-right-screen-small;
@sidebar-menu-item-margin-right-screen-medium: -@pod-padding-right-screen-medium;
@sidebar-menu-item-margin-right-screen-large: -@pod-padding-right-screen-large;
@sidebar-menu-item-margin-right-screen-jumbo: -@pod-padding-right-screen-jumbo;

// Padding Top

Expand Down
144 changes: 72 additions & 72 deletions styles/layout/pod/variables.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,164 +17,164 @@

// Margin Top

@pod-margin-top: @base-spacing-unit;
@pod-margin-top-screen-small: @base-spacing-unit-screen-small;
@pod-margin-top-screen-medium: @base-spacing-unit-screen-medium;
@pod-margin-top-screen-large: @base-spacing-unit-screen-large;
@pod-margin-top-screen-jumbo: @base-spacing-unit-screen-jumbo;
@pod-margin-top: null;
@pod-margin-top-screen-small: null;
@pod-margin-top-screen-medium: null;
@pod-margin-top-screen-large: null;
@pod-margin-top-screen-jumbo: null;

// Margin Bottom

@pod-margin-bottom: @pod-margin-top;
@pod-margin-bottom-screen-small: @pod-margin-top-screen-small;
@pod-margin-bottom-screen-medium: @pod-margin-top-screen-medium;
@pod-margin-bottom-screen-large: @pod-margin-top-screen-large;
@pod-margin-bottom-screen-jumbo: @pod-margin-top-screen-jumbo;
@pod-margin-bottom: null;
@pod-margin-bottom-screen-small: null;
@pod-margin-bottom-screen-medium: null;
@pod-margin-bottom-screen-large: null;
@pod-margin-bottom-screen-jumbo: null;

// Margin Left

@pod-margin-left: @pod-margin-top;
@pod-margin-left-screen-small: @pod-margin-top-screen-small;
@pod-margin-left-screen-medium: @pod-margin-top-screen-medium;
@pod-margin-left-screen-large: @pod-margin-top-screen-large;
@pod-margin-left-screen-jumbo: @pod-margin-top-screen-jumbo;
@pod-margin-left: null;
@pod-margin-left-screen-small: null;
@pod-margin-left-screen-medium: null;
@pod-margin-left-screen-large: null;
@pod-margin-left-screen-jumbo: null;

// Margin Right

@pod-margin-right: @pod-margin-top;
@pod-margin-right-screen-small: @pod-margin-top-screen-small;
@pod-margin-right-screen-medium: @pod-margin-top-screen-medium;
@pod-margin-right-screen-large: @pod-margin-top-screen-large;
@pod-margin-right-screen-jumbo: @pod-margin-top-screen-jumbo;
@pod-margin-right: null;
@pod-margin-right-screen-small: null;
@pod-margin-right-screen-medium: null;
@pod-margin-right-screen-large: null;
@pod-margin-right-screen-jumbo: null;

/* Padding */

// Padding Top

@pod-padding-top: null;
@pod-padding-top-screen-small: null;
@pod-padding-top-screen-medium: null;
@pod-padding-top-screen-large: null;
@pod-padding-top-screen-jumbo: null;
@pod-padding-top: @base-spacing-unit;
@pod-padding-top-screen-small: @base-spacing-unit-screen-small;
@pod-padding-top-screen-medium: @base-spacing-unit-screen-medium;
@pod-padding-top-screen-large: @base-spacing-unit-screen-large;
@pod-padding-top-screen-jumbo: @base-spacing-unit-screen-jumbo;

// Padding Bottom

@pod-padding-bottom: null;
@pod-padding-bottom-screen-small: null;
@pod-padding-bottom-screen-medium: null;
@pod-padding-bottom-screen-large: null;
@pod-padding-bottom-screen-jumbo: null;
@pod-padding-bottom: @pod-padding-top;
@pod-padding-bottom-screen-small: @pod-padding-top-screen-small;
@pod-padding-bottom-screen-medium: @pod-padding-top-screen-medium;
@pod-padding-bottom-screen-large: @pod-padding-top-screen-large;
@pod-padding-bottom-screen-jumbo: @pod-padding-top-screen-jumbo;

// Padding Left

@pod-padding-left: null;
@pod-padding-left-screen-small: null;
@pod-padding-left-screen-medium: null;
@pod-padding-left-screen-large: null;
@pod-padding-left-screen-jumbo: null;
@pod-padding-left: @pod-padding-top;
@pod-padding-left-screen-small: @pod-padding-top-screen-small;
@pod-padding-left-screen-medium: @pod-padding-top-screen-medium;
@pod-padding-left-screen-large: @pod-padding-top-screen-large;
@pod-padding-left-screen-jumbo: @pod-padding-top-screen-jumbo;

// Padding Right

@pod-padding-right: null;
@pod-padding-right-screen-small: null;
@pod-padding-right-screen-medium: null;
@pod-padding-right-screen-large: null;
@pod-padding-right-screen-jumbo: null;
@pod-padding-right: @pod-padding-top;
@pod-padding-right-screen-small: @pod-padding-top-screen-small;
@pod-padding-right-screen-medium: @pod-padding-top-screen-medium;
@pod-padding-right-screen-large: @pod-padding-top-screen-large;
@pod-padding-right-screen-jumbo: @pod-padding-top-screen-jumbo;

/* Layout Variants */

// Shorter

@pod-shorter-margin-top-scale: 0.25;
@pod-shorter-margin-bottom-scale: 0.25;
@pod-shorter-margin-left-scale: null;
@pod-shorter-margin-right-scale: null;
@pod-shorter-margin-left-scale: 0.25;
@pod-shorter-margin-right-scale: 0.25;

@pod-shorter-padding-top-scale: 0.25;
@pod-shorter-padding-bottom-scale: 0.25;
@pod-shorter-padding-left-scale: null;
@pod-shorter-padding-right-scale: null;
@pod-shorter-padding-left-scale: 0.25;
@pod-shorter-padding-right-scale: 0.25;

// Short

@pod-short-margin-top-scale: 0.5;
@pod-short-margin-bottom-scale: 0.5;
@pod-short-margin-left-scale: null;
@pod-short-margin-right-scale: null;
@pod-short-margin-left-scale: 0.5;
@pod-short-margin-right-scale: 0.5;

@pod-short-padding-top-scale: 0.5;
@pod-short-padding-bottom-scale: 0.5;
@pod-short-padding-left-scale: null;
@pod-short-padding-right-scale: null;
@pod-short-padding-left-scale: 0.5;
@pod-short-padding-right-scale: 0.5;

// Tall

@pod-tall-margin-top-scale: 1.5;
@pod-tall-margin-bottom-scale: 1.5;
@pod-tall-margin-left-scale: null;
@pod-tall-margin-right-scale: null;
@pod-tall-margin-left-scale: 1.5;
@pod-tall-margin-right-scale: 1.5;

@pod-tall-padding-top-scale: 1.5;
@pod-tall-padding-bottom-scale: 1.5;
@pod-tall-padding-left-scale: null;
@pod-tall-padding-right-scale: null;
@pod-tall-padding-left-scale: 1.5;
@pod-tall-padding-right-scale: 1.5;

// Taller

@pod-taller-margin-top-scale: 2;
@pod-taller-margin-bottom-scale: 2;
@pod-taller-margin-left-scale: null;
@pod-taller-margin-right-scale: null;
@pod-taller-margin-left-scale: 2;
@pod-taller-margin-right-scale: 2;

@pod-taller-padding-top-scale: 2;
@pod-taller-padding-bottom-scale: 2;
@pod-taller-padding-left-scale: null;
@pod-taller-padding-right-scale: null;
@pod-taller-padding-left-scale: 2;
@pod-taller-padding-right-scale: 2;

// Narrower

@pod-narrower-margin-top-scale: null;
@pod-narrower-margin-bottom-scale: null;
@pod-narrower-margin-top-scale: 0.25;
@pod-narrower-margin-bottom-scale: 0.25;
@pod-narrower-margin-left-scale: 0.25;
@pod-narrower-margin-right-scale: 0.25;

@pod-narrower-padding-top-scale: null;
@pod-narrower-padding-bottom-scale: null;
@pod-narrower-padding-top-scale: 0.25;
@pod-narrower-padding-bottom-scale: 0.25;
@pod-narrower-padding-left-scale: 0.25;
@pod-narrower-padding-right-scale: 0.25;

// Narrow

@pod-narrow-margin-top-scale: null;
@pod-narrow-margin-bottom-scale: null;
@pod-narrow-margin-top-scale: 0.5;
@pod-narrow-margin-bottom-scale: 0.5;
@pod-narrow-margin-left-scale: 0.5;
@pod-narrow-margin-right-scale: 0.5;

@pod-narrow-padding-top-scale: null;
@pod-narrow-padding-bottom-scale: null;
@pod-narrow-padding-top-scale: 0.5;
@pod-narrow-padding-bottom-scale: 0.5;
@pod-narrow-padding-left-scale: 0.5;
@pod-narrow-padding-right-scale: 0.5;

// Wide

@pod-wide-margin-top-scale: null;
@pod-wide-margin-bottom-scale: null;
@pod-wide-margin-top-scale: 1.5;
@pod-wide-margin-bottom-scale: 1.5;
@pod-wide-margin-left-scale: 1.5;
@pod-wide-margin-right-scale: 1.5;

@pod-wide-padding-top-scale: null;
@pod-wide-padding-bottom-scale: null;
@pod-wide-padding-top-scale: 1.5;
@pod-wide-padding-bottom-scale: 1.5;
@pod-wide-padding-left-scale: 1.5;
@pod-wide-padding-right-scale: 1.5;

// Wider

@pod-wider-margin-top-scale: null;
@pod-wider-margin-bottom-scale: null;
@pod-wider-margin-top-scale: 2;
@pod-wider-margin-bottom-scale: 2;
@pod-wider-margin-left-scale: 2;
@pod-wider-margin-right-scale: 2;

@pod-wider-padding-top-scale: null;
@pod-wider-padding-bottom-scale: null;
@pod-wider-padding-top-scale: 2;
@pod-wider-padding-bottom-scale: 2;
@pod-wider-padding-left-scale: 2;
@pod-wider-padding-right-scale: 2;

0 comments on commit 311517b

Please sign in to comment.