Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
  • 11 commits
  • 1 file changed
  • 0 commit comments
  • 3 contributors
Showing with 145 additions and 12 deletions.
  1. +145 −12 stylesheets/stitch/patterns/layout/_spacing.scss
View
157 stylesheets/stitch/patterns/layout/_spacing.scss
@@ -1,35 +1,168 @@
+// Generate inline class names for your elements
+//
+// <div class="actions inset-vert-small-large">
+// <button type="submit">Totes click me!</button>
+// </div>
+//
+// Padding
+// ---------------
+// pad-{item} : pad-small (padding: 10px)
+// pad-vert-{item}-{item + 1} : pad-vert-small-large (padding: 10px 0 40px 0)
+// pad-horz-{item}-{item + 1} : pad-horz-small-large (padding: 0 10px 0 40px)
+//
+// Margin
+// ---------------
+// inset-{item} : inset-small (margin: 10px)
+// inset-vert-{item}-{item + 1} : inset-vert-small-large (margin: 10px 0 40px 0)
+// inset-horz-{item}-{item + 1} : inset-horz-small-large (margin: 0 10px 0 40px)
+//
+// Offset margin
+// ---------------
+// offset-{item} : offset-small (margin: -10px)
+// offset-vert-{item}-{item + 1} : offset-vert-small-large (margin: -10px 0 -40px 0)
+// offset-horz-{item}-{item + 1} : offset-horz-small-large (margin: 0 -10px 0 -40px)
+
@mixin spacing-classes($base: 10px, $list: small normal medium large){
-
+
@for $i from 1 through length($list) {
-
- .padding-#{nth(unquote($list), $i)} {
+
+ .pad-#{nth(unquote($list), $i)} {
padding: ($base * $i);
}
+
+ .inset-#{nth(unquote($list), $i)} {
+ margin: ($base * $i);
+ }
+
+ .offset-#{nth(unquote($list), $i)} {
+ margin: (-($base * $i));
+ }
- .padding-vertical-#{nth(unquote($list), $i)} {
+ .pad-top-#{nth(unquote($list), $i)} {
padding-top: ($base * $i);
- padding-bottom: ($base * $i);
}
-
- .padding-horizontal-#{nth(unquote($list), $i)} {
+
+ .pad-right-#{nth(unquote($list), $i)} {
padding-right: ($base * $i);
+ }
+
+ .pad-bottom-#{nth(unquote($list), $i)} {
+ padding-bottom: ($base * $i);
+ }
+
+ .pad-left-#{nth(unquote($list), $i)} {
padding-left: ($base * $i);
}
- .margin-#{nth(unquote($list), $i)} {
+ .inset-top-#{nth(unquote($list), $i)} {
+ margin-top: ($base * $i);
+ }
+
+ .inset-right-#{nth(unquote($list), $i)} {
+ margin-right: ($base * $i);
+ }
+
+ .inset-bottom-#{nth(unquote($list), $i)} {
+ margin-bottom: ($base * $i);
+ }
+
+ .inset-left-#{nth(unquote($list), $i)} {
+ margin-left: ($base * $i);
+ }
+
+ .outset-top-#{nth(unquote($list), $i)} {
+ margin-top: (-($base * $i));
+ }
+
+ .outset-right-#{nth(unquote($list), $i)} {
+ margin-right: (-($base * $i));
+ }
+
+ .outset-bottom-#{nth(unquote($list), $i)} {
+ margin-bottom: (-($base * $i));
+ }
+
+ .outset-left-#{nth(unquote($list), $i)} {
+ margin-left: (-($base * $i));
+ }
+
+ .inset-#{nth(unquote($list), $i)} {
margin: ($base * $i);
}
+
+ .offset-#{nth(unquote($list), $i)} {
+ margin: (-($base * $i));
+ }
- .margin-vertical-#{nth(unquote($list), $i)} {
+ .pad-vert-#{nth(unquote($list), $i)} {
+ padding-top: ($base * $i);
+ padding-bottom: ($base * $i);
+ }
+
+ .pad-horz-#{nth(unquote($list), $i)} {
+ padding-right: ($base * $i);
+ padding-left: ($base * $i);
+ }
+
+ .inset-vert-#{nth(unquote($list), $i)} {
margin-top: ($base * $i);
margin-bottom: ($base * $i);
}
-
- .margin-horizontal-#{nth(unquote($list), $i)} {
+
+ .inset-horz-#{nth(unquote($list), $i)} {
margin-right: ($base * $i);
margin-left: ($base * $i);
}
+
+ .offset-vert-#{nth(unquote($list), $i)} {
+ margin-top: (-($base * $i));
+ margin-bottom: (-($base * $i));
+ }
+
+ .offset-horz-#{nth(unquote($list), $i)} {
+ margin-right: (-($base * $i));
+ margin-left: (-($base * $i));
+ }
+
+ @for $j from 1 through length($list) {
+
+ @if ($i != $j) {
+
+ .pad-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ padding-top: ($base * $i);
+ padding-bottom: ($base * $j);
+ }
+
+ .pad-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ padding-right: ($base * $i);
+ padding-left: ($base * $j);
+ }
+
+ .inset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-top: ($base * $i);
+ margin-bottom: ($base * $j);
+ }
+
+ .inset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-right: ($base * $i);
+ margin-left: ($base * $j);
+ }
+
+ .offset-vert-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-top: (-($base * $i));
+ margin-bottom: (-($base * $j));
+ }
+
+ .offset-horz-#{nth(unquote($list), $i)}-#{nth(unquote($list), ($j))} {
+ margin-right: (-($base * $i));
+ margin-left: (-($base * $j));
+ }
+ }
+ }
}
}
-//@include spacing-classes(20px, $list: "big" "bigger" "biggerer" "biggest" );
+// @include spacing-classes();
+// @include spacing-classes($base: 5px);
+// @include spacing-classes($base: 5px, $list: big bigger biggerer evenbiggerer biggest);
+// @include spacing-classes($list: big bigger biggerer evenbiggerer biggest);

No commit comments for this range

Something went wrong with that request. Please try again.