1
2
3// Gumby Semantic Grid Mixin //
4
5
6// Mixin for rows
7
8@mixin row($nested: false) {
9  @if $nested == nested {
10    @include nestedRow();
11  }
12  @else {
13    width: 100%;
14    max-width: $row-max-width + 40px;
15    min-width: $min-device-width;
16    margin: 0 auto;
17    padding-left: 20px;
18    padding-right: 20px;
19    @extend %clearfix;
20  }
21  > *:first-child {
22    margin-left: 0;
23  }
24  @include respond(all-phones) {
25    width: auto;
26    min-width: 0;
27    margin-left: 0;
28    margin-right: 0;
29  }
30}
31
32// Mixin for rows that are nested within columns
33
34@mixin nestedRow() {
35  width: auto;
36  min-width: 0;
37  max-width: none;
38  padding-left: 0;
39  padding-right: 0;
40  @extend %clearfix;
41}
42
43
44@mixin column($columns:$columns, $alignment: false, $behavior: false, $hybrid: false) {
45  @extend %columnconfig;
46  @if $alignment == center   {
47    float: none;
48    margin-left: auto !important;
49    margin-right: auto !important;
50    width: columns($columns, $hybrid);
51    @include respond(all-phones) {
52      float: left;
53      margin-left: 0;
54      width: 100%;
55    }
56  }
57  @else if $behavior == collapse {
58    @extend %collapse;
59    width: columns($columns, $hybrid);
60    @include respond(all-phones) {
61      float: left;
62      width: 100%;
63    }
64  }
65  @else {
66    width: columns($columns, $hybrid);
67    @include respond(all-phones) {
68      float: left;
69      margin-left: 0;
70      width: 100%;
71    }
72  }
73}
74
75@mixin hybrid($columns:$columns, $alignment: false, $behavior: false) {
76  @include column($columns, $alignment, $behavior, true);
77}
78
79@mixin push($columns, $hybrid-grid: false) {
80  @if $hybrid-grid == hybrid {
81    margin-left: push_x($columns, false, true);
82    &:first-child {
83      margin-left: push_x($columns, true, true);
84    }
85    @include respond(all-phones) {
86      margin-left: 0;
87      &:first-child {
88        margin-left: 0;
89      }
90    }
91  }
92  @else {
93    margin-left: push_x($columns);
94    &:first-child {
95      margin-left: push_x($columns, true);
96    }
97    @include respond(all-phones) {
98      margin-left: 0;
99      &:first-child {
100        margin-left: 0;
101      }
102    }
103  }
104}
105
106@mixin pull($direction: false, $columns: 0, $width: 0, $hybrid-grid: false) {
107  @if $direction == left {
108    @extend %pull-left;
109    @if ($columns > 0 and $width > 0) {
110      @if ($hybrid-grid == hybrid) {
111        margin-left: pull_x($columns, $width, true);
112        &:first-child {
113          margin-left: 0;
114        }
115      }
116      @else {
117        margin-left: pull_x($columns, $width);
118        &:first-child {
119          margin-left: 0;
120        }
121      }
122    }
123  }
124  @elseif $direction == none {
125    @extend %pull-none;
126  }
127  @else {
128    @extend %pull-right;
129  }
130}
131
132
133// Placeholders for the Semantic Grid
134
135%container {
136  padding: 0 $gutter-in-px + px;
137  @include respond(all-phones) {
138    min-width: 0;
139    margin-left: 0;
140    margin-right: 0;
141  }
142}
143
144// Clearfix placeholder
145%clearfix { @include clearfix(); }
146
147// Clearfix placeholder for mobile
148%mobilefix { @include mobilefix(); }
149
150// Row placeholders
151%row { @include row(); }
152%nestedrow { @include row(); }
153
154// Column Configuration placeholder
155%columnconfig {
156  margin-left: $gutter;
157  float: $default-float;
158  min-height: 1px;
159  position: relative;
160  @include box-sizing(border-box);
161}
162
163%pull-right { float: right; }
164%pull-left { float: left; }
165%pull-none { float: none; }
166
167// Collapse Gutters
168%collapse {
169  margin-left: 0;
170}
171