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.

Sign up for GitHub

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

Jump to bottom

Spacing #24

Merged
merged 10 commits into from Jul 30, 2012
Merged

Spacing #24

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2c8eb9f
added default value so you could just use spacing-classes() to get th…
Jul 23, 2012
7288894
Added more flexibility with classnames like: inset-vert-small-large
Jul 25, 2012
dc189e4
Merge branch 'feature/spacing-mixin' into develop
Jul 25, 2012
f62ca9d
updated for loop var names to be in order
Jul 25, 2012
f5784c0
Removed a loop, and included 4 examples on how to call the mixin
Jul 25, 2012
79ee979
clean comments
Jul 25, 2012
f557846
Left put declarations like padd-vert-small...derp
Jul 25, 2012
39a00a3
merge
Jul 25, 2012
b338fe4
removed shorthand rules
Jul 26, 2012
f5f5796
added single options like pad-left-large
Jul 26, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
157 changes: 145 additions & 12 deletions stylesheets/stitch/patterns/layout/_spacing.scss
View file
Open in desktop
@@ -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);