shelves 0.6.0 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/README.md +5 -50
- data/component.json +1 -1
- data/lib/shelves/cli.rb +21 -5
- data/lib/shelves/version.rb +1 -1
- data/scss/shelves-grid.scss +146 -1
- data/scss/shelves.scss +1 -1
- data/scss/shelves/_functions.scss +79 -60
- data/scss/shelves/_mixins.scss +5 -3
- data/scss/shelves/_variables.scss +98 -0
- data/scss/shelves/mixins/_column.scss +226 -0
- data/scss/shelves/mixins/_context.scss +69 -0
- data/scss/shelves/mixins/_generators.scss +76 -204
- data/scss/shelves/mixins/_media.scss +150 -0
- data/scss/shelves/mixins/_row.scss +65 -0
- data/scss/shelves/mixins/_utils.scss +56 -0
- metadata +8 -6
- data/scss/shelves/_settings.scss +0 -61
- data/scss/shelves/mixins/_base.scss +0 -169
- data/scss/shelves/mixins/_modifiers.scss +0 -75
- data/scss/shelves/mixins/_resets.scss +0 -56
data/scss/shelves/_mixins.scss
CHANGED
@@ -1,4 +1,6 @@
|
|
1
|
-
@import "shelves/mixins/
|
2
|
-
@import "shelves/mixins/
|
3
|
-
@import "shelves/mixins/
|
1
|
+
@import "shelves/mixins/utils";
|
2
|
+
@import "shelves/mixins/context";
|
3
|
+
@import "shelves/mixins/media";
|
4
|
+
@import "shelves/mixins/row";
|
5
|
+
@import "shelves/mixins/column";
|
4
6
|
@import "shelves/mixins/generators";
|
@@ -0,0 +1,98 @@
|
|
1
|
+
// Default Grid Settings
|
2
|
+
$shelves-width: 1060px !default;
|
3
|
+
$shelves-max-width: $shelves-width !default;
|
4
|
+
$shelves-columns: 12 !default;
|
5
|
+
$shelves-margin: 20px !default;
|
6
|
+
$shelves-gutter: 20px !default;
|
7
|
+
$shelves-tablet-breakpoint: 800px !default;
|
8
|
+
$shelves-mobile-breakpoint: 480px !default;
|
9
|
+
$shelves-context: null;
|
10
|
+
|
11
|
+
// Convert the gutter to a percentage if necessary.
|
12
|
+
@if unit($shelves-gutter) != "%" {
|
13
|
+
$shelves-gutter: percentage($shelves-gutter / $shelves-max-width);
|
14
|
+
}
|
15
|
+
|
16
|
+
// Default Mobile Settings
|
17
|
+
$shelves-mobile-columns: 4 !default;
|
18
|
+
$shelves-mobile-gutter: $shelves-gutter * 2.375 !default;
|
19
|
+
|
20
|
+
// Default Tablet Settings
|
21
|
+
$shelves-tablet-columns: 6 !default;
|
22
|
+
$shelves-tablet-gutter: $shelves-gutter * 1.5 !default;
|
23
|
+
|
24
|
+
// Default Desktop Settings
|
25
|
+
$shelves-desktop-columns: $shelves-columns !default;
|
26
|
+
$shelves-desktop-gutter: $shelves-gutter !default;
|
27
|
+
|
28
|
+
// Default Naming Conventions
|
29
|
+
$shelves-separator: "-" !default;
|
30
|
+
$shelves-desktop-name: "desktop" !default;
|
31
|
+
$shelves-tablet-name: "tablet" !default;
|
32
|
+
$shelves-mobile-name: "mobile" !default;
|
33
|
+
$shelves-row-name: "row" !default;
|
34
|
+
$shelves-column-name: "column" !default;
|
35
|
+
$shelves-prefix-name: "prefix" !default;
|
36
|
+
$shelves-suffix-name: "suffix" !default;
|
37
|
+
$shelves-push-name: "push" !default;
|
38
|
+
$shelves-pull-name: "pull" !default;
|
39
|
+
$shelves-first-name: "first" !default;
|
40
|
+
$shelves-center-name: "center" !default;
|
41
|
+
$shelves-visible-name: "visible" !default;
|
42
|
+
$shelves-hidden-name: "hidden" !default;
|
43
|
+
|
44
|
+
// Default Class Names
|
45
|
+
// (Note the lack of the preceding ".")
|
46
|
+
$shelves-mobile-column-name: class-name($shelves-mobile-name $shelves-column-name) !default;
|
47
|
+
$shelves-tablet-column-name: class-name($shelves-tablet-name $shelves-column-name) !default;
|
48
|
+
$shelves-desktop-column-name: $shelves-column-name !default;
|
49
|
+
$shelves-mobile-prefix-name: class-name($shelves-mobile-name $shelves-prefix-name) !default;
|
50
|
+
$shelves-tablet-prefix-name: class-name($shelves-tablet-name $shelves-prefix-name) !default;
|
51
|
+
$shelves-desktop-prefix-name: $shelves-prefix-name !default;
|
52
|
+
$shelves-mobile-suffix-name: class-name($shelves-mobile-name $shelves-suffix-name) !default;
|
53
|
+
$shelves-tablet-suffix-name: class-name($shelves-tablet-name $shelves-suffix-name) !default;
|
54
|
+
$shelves-desktop-suffix-name: $shelves-suffix-name !default;
|
55
|
+
$shelves-mobile-push-name: class-name($shelves-mobile-name $shelves-push-name) !default;
|
56
|
+
$shelves-tablet-push-name: class-name($shelves-tablet-name $shelves-push-name) !default;
|
57
|
+
$shelves-desktop-push-name: $shelves-push-name !default;
|
58
|
+
$shelves-mobile-pull-name: class-name($shelves-mobile-name $shelves-pull-name) !default;
|
59
|
+
$shelves-tablet-pull-name: class-name($shelves-tablet-name $shelves-pull-name) !default;
|
60
|
+
$shelves-desktop-pull-name: $shelves-pull-name !default;
|
61
|
+
$shelves-first-mobile-column-name: class-name($shelves-first-name $shelves-mobile-column-name) !default;
|
62
|
+
$shelves-first-tablet-column-name: class-name($shelves-first-name $shelves-tablet-column-name) !default;
|
63
|
+
$shelves-first-desktop-column-name: class-name($shelves-first-name $shelves-desktop-column-name) !default;
|
64
|
+
$shelves-center-column-name: class-name($shelves-center-name $shelves-column-name) !default;
|
65
|
+
$shelves-visible-desktop-name: class-name($shelves-visible-name $shelves-desktop-name) !default;
|
66
|
+
$shelves-visible-tablet-name: class-name($shelves-visible-name $shelves-tablet-name) !default;
|
67
|
+
$shelves-visible-mobile-name: class-name($shelves-visible-name $shelves-mobile-name) !default;
|
68
|
+
$shelves-hidden-desktop-name: class-name($shelves-hidden-name $shelves-desktop-name) !default;
|
69
|
+
$shelves-hidden-tablet-name: class-name($shelves-hidden-name $shelves-tablet-name) !default;
|
70
|
+
$shelves-hidden-mobile-name: class-name($shelves-hidden-name $shelves-mobile-name) !default;
|
71
|
+
|
72
|
+
// Default options for the grid generator
|
73
|
+
$shelves-responsive-base: true !default;
|
74
|
+
$shelves-visibility: true !default;
|
75
|
+
$shelves-center: true !default;
|
76
|
+
$shelves-nested-columns: true !default;
|
77
|
+
$shelves-prefixes: true !default;
|
78
|
+
$shelves-suffixes: true !default;
|
79
|
+
$shelves-pushes: true !default;
|
80
|
+
$shelves-pulls: true !default;
|
81
|
+
$shelves-nested-prefixes: false !default;
|
82
|
+
$shelves-nested-suffixes: false !default;
|
83
|
+
$shelves-nested-pushes: false !default;
|
84
|
+
$shelves-nested-pulls: false !default;
|
85
|
+
$shelves-tablet-prefixes: false !default;
|
86
|
+
$shelves-tablet-suffixes: false !default;
|
87
|
+
$shelves-tablet-pushes: false !default;
|
88
|
+
$shelves-tablet-pulls: false !default;
|
89
|
+
$shelves-mobile-prefixes: false !default;
|
90
|
+
$shelves-mobile-suffixes: false !default;
|
91
|
+
$shelves-mobile-pushes: false !default;
|
92
|
+
$shelves-mobile-pulls: false !default;
|
93
|
+
|
94
|
+
// Support IE7
|
95
|
+
$legacy-support-for-ie7: true !default;
|
96
|
+
$legacy-support-for-ie8: true !default;
|
97
|
+
$shelves-ie7-support: $legacy-support-for-ie7 !default;
|
98
|
+
$shelves-ie8-support: $legacy-support-for-ie8 !default;
|
@@ -0,0 +1,226 @@
|
|
1
|
+
// Creates a column that spans the given number of
|
2
|
+
// grid columns.
|
3
|
+
//
|
4
|
+
// $n - The number of columns the element should span.
|
5
|
+
// $context - The number of columns encapsulating the element.
|
6
|
+
// Defaults to the the value of $total.
|
7
|
+
// $first - Does not apply the column-gutter, because this it the
|
8
|
+
// first column on the row. Defaults to false.
|
9
|
+
// $total - The total number of columns in the grid.
|
10
|
+
// Defaults to the value of $shelves-columns.
|
11
|
+
// $gutter - The width of the gutter in the root context (in %).
|
12
|
+
// Defaults to the value of $shelves-gutter.
|
13
|
+
//
|
14
|
+
@mixin column(
|
15
|
+
$n,
|
16
|
+
$context: $shelves-context,
|
17
|
+
$first: false,
|
18
|
+
$total: $shelves-columns,
|
19
|
+
$gutter: $shelves-gutter) {
|
20
|
+
@include column-base;
|
21
|
+
@include column-width($n, $context, $total, $gutter);
|
22
|
+
|
23
|
+
@if not $first {
|
24
|
+
@include column-gutter($context, $total, $gutter);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
// Sets up an element to be a column in the grid system.
|
29
|
+
// This is used internally to generate grids, Use column($n)
|
30
|
+
// instead to create fully functioning columns.
|
31
|
+
@mixin column-base {
|
32
|
+
display: block;
|
33
|
+
float: left;
|
34
|
+
min-height: 1px;
|
35
|
+
position: relative;
|
36
|
+
|
37
|
+
@if $shelves-ie7-support {
|
38
|
+
// IE6-7 incorrectly rounds up percentage widths (breaking layouts)
|
39
|
+
// http://ejohn.org/blog/sub-pixel-problems-in-css/
|
40
|
+
*margin-right: -1px;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
// Sets the width of the element to the given number of columns.
|
45
|
+
//
|
46
|
+
// $n - The number of columns the element should span.
|
47
|
+
// $context - The number of columns encapsulating the element.
|
48
|
+
// Defaults to the the value of $total.
|
49
|
+
// $total - The total number of columns in the grid.
|
50
|
+
// Defaults to the value of $shelves-columns.
|
51
|
+
// $gutter - The width of the gutter in the root context (in %).
|
52
|
+
// Defaults to the value of $shelves-gutter.
|
53
|
+
//
|
54
|
+
@mixin column-width(
|
55
|
+
$n,
|
56
|
+
$context: $shelves-context,
|
57
|
+
$total: $shelves-columns,
|
58
|
+
$gutter: $shelves-gutter) {
|
59
|
+
width: column-width($n, $context, $total, $gutter);
|
60
|
+
}
|
61
|
+
|
62
|
+
// Includes the gutter for a column on the grid.
|
63
|
+
//
|
64
|
+
// $context - The number of columns encapsulating the element.
|
65
|
+
// Defaults to the the value of $total.
|
66
|
+
// $total - The total number of columns in the grid.
|
67
|
+
// Defaults to the value of $shelves-columns.
|
68
|
+
// $gutter - The width of the gutter in the root context (in %).
|
69
|
+
// Defaults to the value of $shelves-gutter.
|
70
|
+
// $reset-first - Removes the gutter for the first column in a row.
|
71
|
+
// Defaults to false.
|
72
|
+
//
|
73
|
+
@mixin column-gutter(
|
74
|
+
$context: $shelves-context,
|
75
|
+
$total: $shelves-columns,
|
76
|
+
$gutter: $shelves-gutter) {
|
77
|
+
margin-left: column-gutter($context, $total, $gutter);
|
78
|
+
}
|
79
|
+
|
80
|
+
// Column Modifiers
|
81
|
+
// ----------------------------------------------------------------------------
|
82
|
+
|
83
|
+
// Centers the column by removing the float and setting the horizontal
|
84
|
+
// margins to auto.
|
85
|
+
@mixin center-column {
|
86
|
+
float: none;
|
87
|
+
margin-left: auto !important;
|
88
|
+
margin-right: auto;
|
89
|
+
}
|
90
|
+
|
91
|
+
// Adds a padding suffix (which shifts the column to the right)
|
92
|
+
// spanning the given number of columns.
|
93
|
+
//
|
94
|
+
// $n - The number of columns to pad.
|
95
|
+
// $context - The number of columns encapsulating the element.
|
96
|
+
// Defaults to the the value of $total.
|
97
|
+
// $total - The total number of columns in the grid.
|
98
|
+
// Defaults to the value of $shelves-columns.
|
99
|
+
// $gutter - The width of the gutter in the root context (in %).
|
100
|
+
// Defaults to the value of $shelves-gutter.
|
101
|
+
// $with-gutter - Include an extra gutter in the calculation.
|
102
|
+
// Defaults to true.
|
103
|
+
//
|
104
|
+
@mixin prefix-column(
|
105
|
+
$n,
|
106
|
+
$context: $shelves-context,
|
107
|
+
$total: $shelves-columns,
|
108
|
+
$gutter: $shelves-gutter,
|
109
|
+
$with-gutter: true) {
|
110
|
+
padding-left: column-distance($n, $context, $total, $gutter, $with-gutter);
|
111
|
+
}
|
112
|
+
|
113
|
+
// Adds a padding suffix (which shifts the column to the left)
|
114
|
+
// spanning the given number of columns.
|
115
|
+
//
|
116
|
+
// $n - The number of columns to pad.
|
117
|
+
// $context - The number of columns encapsulating the element.
|
118
|
+
// Defaults to the the value of $total.
|
119
|
+
// $total - The total number of columns in the grid.
|
120
|
+
// Defaults to the value of $shelves-columns.
|
121
|
+
// $gutter - The width of the gutter in the root context (in %).
|
122
|
+
// Defaults to the value of $shelves-gutter.
|
123
|
+
// $with-gutter - Include an extra gutter in the calculation.
|
124
|
+
// Defaults to true.
|
125
|
+
//
|
126
|
+
@mixin suffix-column(
|
127
|
+
$n,
|
128
|
+
$context: $shelves-context,
|
129
|
+
$total: $shelves-columns,
|
130
|
+
$gutter: $shelves-gutter,
|
131
|
+
$with-gutter: true) {
|
132
|
+
padding-right: column-distance($n, $context, $total, $gutter, $with-gutter);
|
133
|
+
}
|
134
|
+
|
135
|
+
// Reorder the content by shifting the column to the right. This
|
136
|
+
// is often used in conjunction with column-pull($n).
|
137
|
+
//
|
138
|
+
// $n - The number of columns to shift.
|
139
|
+
// $context - The number of columns encapsulating the element.
|
140
|
+
// Defaults to the the value of $total.
|
141
|
+
// $total - The total number of columns in the grid.
|
142
|
+
// Defaults to the value of $shelves-columns.
|
143
|
+
// $gutter - The width of the gutter in the root context (in %).
|
144
|
+
// Defaults to the value of $shelves-gutter.
|
145
|
+
// $with-gutter - Include an extra gutter in the calculation.
|
146
|
+
// Defaults to true.
|
147
|
+
//
|
148
|
+
@mixin push-column(
|
149
|
+
$n,
|
150
|
+
$context: $shelves-context,
|
151
|
+
$total: $shelves-columns,
|
152
|
+
$gutter: $shelves-gutter,
|
153
|
+
$with-gutter: true) {
|
154
|
+
left: column-distance($n, $context, $total, $gutter, $with-gutter);
|
155
|
+
}
|
156
|
+
|
157
|
+
// Reorder the content by shifting the column to the left. This
|
158
|
+
// is often used in conjunction with column-push($n).
|
159
|
+
//
|
160
|
+
// $n - The number of columns to shift.
|
161
|
+
// $context - The number of columns encapsulating the element.
|
162
|
+
// Defaults to the the value of $total.
|
163
|
+
// $total - The total number of columns in the grid.
|
164
|
+
// Defaults to the value of $shelves-columns.
|
165
|
+
// $gutter - The width of the gutter in the root context (in %).
|
166
|
+
// Defaults to the value of $shelves-gutter.
|
167
|
+
// $with-gutter - Include an extra gutter in the calculation.
|
168
|
+
// Defaults to true.
|
169
|
+
//
|
170
|
+
@mixin pull-column(
|
171
|
+
$n,
|
172
|
+
$context: $shelves-context,
|
173
|
+
$total: $shelves-columns,
|
174
|
+
$gutter: $shelves-gutter,
|
175
|
+
$with-gutter: true) {
|
176
|
+
right: column-distance($n, $context, $total, $gutter, $with-gutter);
|
177
|
+
}
|
178
|
+
|
179
|
+
// Column Resets
|
180
|
+
// ----------------------------------------------------------------------------
|
181
|
+
|
182
|
+
// Resets a column completely, removing margins, padding, and positioning.
|
183
|
+
@mixin reset-column {
|
184
|
+
@include reset-column-width;
|
185
|
+
@include reset-column-gutter;
|
186
|
+
@include reset-column-prefix;
|
187
|
+
@include reset-column-suffix;
|
188
|
+
@include reset-column-push;
|
189
|
+
@include reset-column-pull;
|
190
|
+
}
|
191
|
+
|
192
|
+
// Resets a column to expand to the full width of its container.
|
193
|
+
@mixin reset-column-width {
|
194
|
+
float: none;
|
195
|
+
width: auto;
|
196
|
+
|
197
|
+
@if $shelves-ie7-support {
|
198
|
+
*margin-right: 0px;
|
199
|
+
}
|
200
|
+
}
|
201
|
+
|
202
|
+
// Removes the gutter of a column in a grid. This is usually added
|
203
|
+
// to the first column in a row.
|
204
|
+
@mixin reset-column-gutter {
|
205
|
+
margin-left: 0;
|
206
|
+
}
|
207
|
+
|
208
|
+
// Removes the padding prefix added to a column.
|
209
|
+
@mixin reset-column-prefix {
|
210
|
+
padding-left: 0;
|
211
|
+
}
|
212
|
+
|
213
|
+
// Removes the padding suffix added to a column.
|
214
|
+
@mixin reset-column-suffix {
|
215
|
+
padding-right: 0;
|
216
|
+
}
|
217
|
+
|
218
|
+
// Removes the column shifting added with a column-push($n).
|
219
|
+
@mixin reset-column-push {
|
220
|
+
left: auto;
|
221
|
+
}
|
222
|
+
|
223
|
+
// Removes the column shifting added with a column-pull($n).
|
224
|
+
@mixin reset-column-pull {
|
225
|
+
right: auto;
|
226
|
+
}
|
@@ -0,0 +1,69 @@
|
|
1
|
+
// Place the block of content with the given grid settings.
|
2
|
+
//
|
3
|
+
// $columns - The number of columns in the grid.
|
4
|
+
// $gutter - The width of the gutter in the grid.
|
5
|
+
// Defaults to the value of $shelves-gutter.
|
6
|
+
//
|
7
|
+
@mixin with-grid($columns, $gutter: $shelves-gutter) {
|
8
|
+
$original-shelves-columns: $shelves-columns;
|
9
|
+
$original-shelves-gutter: $shelves-gutter;
|
10
|
+
$shelves-columns: $columns;
|
11
|
+
$shelves-gutter: $gutter;
|
12
|
+
@content;
|
13
|
+
$shelves-columns: $original-shelves-columns;
|
14
|
+
$shelves-gutter: $original-shelves-gutter;
|
15
|
+
}
|
16
|
+
|
17
|
+
// Place the block of content with the given context (the current column size).
|
18
|
+
//
|
19
|
+
// $context - The number of columns encapsulating the column.
|
20
|
+
//
|
21
|
+
@mixin with-parent-column($context) {
|
22
|
+
$original-shelves-contenxt: $shelves-context;
|
23
|
+
$shelves-context: $context;
|
24
|
+
@content;
|
25
|
+
$shelves-context: $original-shelves-contenxt;
|
26
|
+
}
|
27
|
+
|
28
|
+
// Place the block of content with the given desktop grid settings.
|
29
|
+
//
|
30
|
+
// $columns - The number of columns in the grid.
|
31
|
+
// Defaults to the value of $shelves-columns.
|
32
|
+
// $gutter - The width of the gutter in the grid.
|
33
|
+
// Defaults to the value of $shelves-gutter.
|
34
|
+
//
|
35
|
+
@mixin with-desktop-grid($columns: $shelves-columns, $gutter: $shelves-gutter) {
|
36
|
+
@include with-grid($columns, $gutter) {
|
37
|
+
@content;
|
38
|
+
}
|
39
|
+
}
|
40
|
+
|
41
|
+
// Place the block of content with the given tablet grid settings.
|
42
|
+
//
|
43
|
+
// $columns - The number of columns in the grid.
|
44
|
+
// Defaults to the value of $shelves-tablet-columns.
|
45
|
+
// $gutter - The width of the gutter in the grid.
|
46
|
+
// Defaults to the value of $shelves-tablet-gutter.
|
47
|
+
//
|
48
|
+
@mixin with-tablet-grid(
|
49
|
+
$columns: $shelves-tablet-columns,
|
50
|
+
$gutter: $shelves-tablet-gutter) {
|
51
|
+
@include with-grid($columns, $gutter) {
|
52
|
+
@content;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
|
56
|
+
// Place the block of content with the given mobile grid settings.
|
57
|
+
//
|
58
|
+
// $columns - The number of columns in the grid.
|
59
|
+
// Defaults to the value of $shelves-mobile-columns.
|
60
|
+
// $gutter - The width of the gutter in the grid.
|
61
|
+
// Defaults to the value of $shelves-mobile-gutter.
|
62
|
+
//
|
63
|
+
@mixin with-mobile-grid(
|
64
|
+
$columns: $shelves-mobile-columns,
|
65
|
+
$gutter: $shelves-mobile-gutter) {
|
66
|
+
@include with-grid($columns, $gutter) {
|
67
|
+
@content;
|
68
|
+
}
|
69
|
+
}
|
@@ -1,181 +1,56 @@
|
|
1
|
-
// Generates the
|
2
|
-
// approach to using the grid. All of the class names can be customized.
|
1
|
+
// Generates the grid's base classes.
|
3
2
|
//
|
4
|
-
// $
|
5
|
-
//
|
6
|
-
// $pushes - Include push classes. Deafults to true.
|
7
|
-
// $pulls - Include pull classes. Deafults to true.
|
8
|
-
// $nested - Include nested columns in the default grid.
|
9
|
-
// Defaults to true.
|
10
|
-
// $nested-prefixes - Include prefix classes for neseted columns.
|
11
|
-
// Defaults to true.
|
12
|
-
// $nested-suffixes - Include suffix classes for neseted columns.
|
13
|
-
// Defaults to true.
|
14
|
-
// $nested-pushes - Include push classes for neseted columns.
|
15
|
-
// Defaults to false.
|
16
|
-
// $nested-pulls - Include pull classes for neseted columns.
|
17
|
-
// Defaults to false.
|
18
|
-
// $tablet - Include tablet columns & resets. Defaults to true.
|
19
|
-
// $tablet-prefixes - Include prefix classes for tablet columns.
|
20
|
-
// Defaults to false.
|
21
|
-
// $tablet-suffixes - Include suffix classes for tablet columns.
|
22
|
-
// Defaults to false.
|
23
|
-
// $tablet-pushes - Include push classes for tablet columns.
|
24
|
-
// Defaults to false.
|
25
|
-
// $tablet-pulls - Include pull classes for tablet columns.
|
26
|
-
// Defaults to false.
|
27
|
-
// $mobile - Include mobile columns & resets. Defaults to true.
|
28
|
-
// $mobile-prefixes - Include prefix classes for mobile columns.
|
29
|
-
// Defaults to false.
|
30
|
-
// $mobile-suffixes - Include suffix classes for mobile columns.
|
31
|
-
// Defaults to false.
|
32
|
-
// $mobile-pushes - Include push classes for mobile columns.
|
33
|
-
// Defaults to false.
|
34
|
-
// $mobile-pulls - Include pull classes for mobile columns.
|
35
|
-
// Defaults to false.
|
3
|
+
// $responsive-base - Include the responsive base styles.
|
4
|
+
// Defaults to the value of $shelves-responsive-base.
|
36
5
|
//
|
37
|
-
@mixin shelves(
|
38
|
-
|
39
|
-
|
40
|
-
$pushes: $shelves-pushes,
|
41
|
-
$pulls: $shelves-pulls,
|
42
|
-
$nested: $shelves-nested,
|
43
|
-
$nested-prefixes: $shelves-nested-prefixes,
|
44
|
-
$nested-suffixes: $shelves-nested-suffixes,
|
45
|
-
$nested-pushes: $shelves-nested-pushes,
|
46
|
-
$nested-pulls: $shelves-nested-pulls,
|
47
|
-
$tablet: $shelves-tablet,
|
48
|
-
$tablet-prefixes: $shelves-tablet-prefixes,
|
49
|
-
$tablet-suffixes: $shelves-tablet-suffixes,
|
50
|
-
$tablet-pushes: $shelves-tablet-pushes,
|
51
|
-
$tablet-pulls: $shelves-tablet-pulls,
|
52
|
-
$mobile: $shelves-mobile,
|
53
|
-
$mobile-prefixes: $shelves-mobile-prefixes,
|
54
|
-
$mobile-suffixes: $shelves-mobile-suffixes,
|
55
|
-
$mobile-pushes: $shelves-mobile-pushes,
|
56
|
-
$mobile-pulls: $shelves-mobile-pulls) {
|
57
|
-
@include shelves-base($reset-if-tablet: false, $reset-if-mobile: false);
|
58
|
-
@include shelves-columns(
|
59
|
-
$prefixes: $prefixes,
|
60
|
-
$suffixes: $suffixes,
|
61
|
-
$pushes: $pushes,
|
62
|
-
$pulls: $pulls
|
63
|
-
);
|
64
|
-
|
65
|
-
@if $nested {
|
66
|
-
@for $i from 1 to $shelves-columns - 1 {
|
67
|
-
// Loop background through the columns
|
68
|
-
// to cascade the nested column properties.
|
69
|
-
$i: $shelves-columns - $i;
|
70
|
-
|
71
|
-
#{column-selector($shelves-column-name, $i)} {
|
72
|
-
#{columns-selector($shelves-column-name)} {
|
73
|
-
@include column-gutter($i, $reset-first: false);
|
74
|
-
}
|
75
|
-
|
76
|
-
@include shelves-columns(
|
77
|
-
$context: $i,
|
78
|
-
$prefixes: $nested-prefixes,
|
79
|
-
$suffixes: $nested-suffixes,
|
80
|
-
$pushes: $nested-pushes,
|
81
|
-
$pulls: $nested-pulls
|
82
|
-
);
|
83
|
-
}
|
84
|
-
}
|
6
|
+
@mixin shelves-base($responsive-base: $shelves-responsive-base) {
|
7
|
+
@if $responsive-base {
|
8
|
+
@include shelves-responsive-base;
|
85
9
|
}
|
86
10
|
|
87
|
-
|
88
|
-
@
|
89
|
-
@if $shelves-tablet-margin != $shelves-margin {
|
90
|
-
.#{$shelves-row-name} {
|
91
|
-
@include container($shelves-tablet-margin);
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
@include shelves-resets;
|
11
|
+
#{class-selector($shelves-row-name)} {
|
12
|
+
@include row;
|
96
13
|
|
97
|
-
|
98
|
-
|
99
|
-
.#{$shelves-row-name} {
|
100
|
-
#{columns-selector($shelves-tablet-column-name)} {
|
101
|
-
@include column-base($reset-if-tablet: false, $reset-if-mobile: false);
|
102
|
-
@include column-gutter($total: $shelves-tablet-columns, $gutter: $shelves-tablet-gutter);
|
103
|
-
}
|
104
|
-
|
105
|
-
@include shelves-columns(
|
106
|
-
$column-name: $shelves-tablet-column-name,
|
107
|
-
$total: $shelves-tablet-columns,
|
108
|
-
$gutter: $shelves-tablet-gutter,
|
109
|
-
$prefixes: $tablet-prefixes,
|
110
|
-
$suffixes: $tablet-suffixes,
|
111
|
-
$pushes: $tablet-pushes,
|
112
|
-
$pulls: $tablet-pulls
|
113
|
-
);
|
114
|
-
}
|
14
|
+
#{class-selector($shelves-row-name)} {
|
15
|
+
@include reset-row;
|
115
16
|
}
|
116
17
|
}
|
18
|
+
}
|
117
19
|
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
@include container($shelves-mobile-margin);
|
123
|
-
}
|
124
|
-
}
|
125
|
-
|
126
|
-
@include shelves-resets($reset-row: $tablet == false);
|
127
|
-
|
128
|
-
// Use the extra specificity from the row class
|
129
|
-
// to apply mobile column properties even when nested
|
130
|
-
.#{$shelves-row-name} {
|
131
|
-
#{columns-selector($shelves-mobile-column-name)} {
|
132
|
-
@include column-base($reset-if-tablet: false, $reset-if-mobile: false);
|
133
|
-
@include column-gutter($total: $shelves-mobile-columns, $gutter: $shelves-mobile-gutter);
|
134
|
-
}
|
20
|
+
// Adds some non-grid related responsive styles. It fixes IE 10's
|
21
|
+
// "Snap Mode" and making images fluid.
|
22
|
+
@mixin shelves-responsive-base {
|
23
|
+
@include fix-snap-mode;
|
135
24
|
|
136
|
-
|
137
|
-
|
138
|
-
$total: $shelves-mobile-columns,
|
139
|
-
$gutter: $shelves-mobile-gutter,
|
140
|
-
$prefixes: $mobile-prefixes,
|
141
|
-
$suffixes: $mobile-suffixes,
|
142
|
-
$pushes: $mobile-pushes,
|
143
|
-
$pulls: $mobile-pulls
|
144
|
-
);
|
145
|
-
}
|
146
|
-
}
|
25
|
+
img {
|
26
|
+
@include fluid-media;
|
147
27
|
}
|
148
28
|
}
|
149
29
|
|
150
|
-
//
|
151
|
-
//
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
@mixin shelves-base($reset-if-tablet: true, $reset-if-mobile: false) {
|
159
|
-
.#{$shelves-row-name} {
|
160
|
-
@include container;
|
161
|
-
@include row($reset-if-tablet: $reset-if-tablet, $reset-if-mobile: $reset-if-mobile);
|
162
|
-
|
163
|
-
.#{$shelves-row-name} {
|
164
|
-
@include reset-container;
|
165
|
-
@include reset-row;
|
30
|
+
// Include visibility helpers for showing/hiding content based on
|
31
|
+
// device size.
|
32
|
+
@mixin shelves-visibility-helpers {
|
33
|
+
@include on-mobile {
|
34
|
+
#{class-selector($shelves-hidden-mobile-name)},
|
35
|
+
#{class-selector($shelves-visible-tablet-name)},
|
36
|
+
#{class-selector($shelves-visible-desktop-name)} {
|
37
|
+
@include force-hidden;
|
166
38
|
}
|
167
39
|
}
|
168
40
|
|
169
|
-
|
170
|
-
|
171
|
-
|
41
|
+
@include on-tablet {
|
42
|
+
#{class-selector($shelves-visible-mobile-name)},
|
43
|
+
#{class-selector($shelves-hidden-tablet-name)},
|
44
|
+
#{class-selector($shelves-visible-desktop-name)} {
|
45
|
+
@include force-hidden;
|
46
|
+
}
|
172
47
|
}
|
173
48
|
|
174
|
-
|
175
|
-
#{
|
176
|
-
|
177
|
-
|
178
|
-
|
49
|
+
@include on-desktop {
|
50
|
+
#{class-selector($shelves-visible-mobile-name)},
|
51
|
+
#{class-selector($shelves-visible-tablet-name)},
|
52
|
+
#{class-selector($shelves-hidden-desktop-name)} {
|
53
|
+
@include force-hidden;
|
179
54
|
}
|
180
55
|
}
|
181
56
|
}
|
@@ -184,8 +59,8 @@
|
|
184
59
|
// the columns. This can be used in different contexts, varying
|
185
60
|
// the number of columns if necessary.
|
186
61
|
//
|
187
|
-
// $
|
188
|
-
// Defaults to
|
62
|
+
// $extend - Each column will @extend this placeholder if set.
|
63
|
+
// Defaults to null.
|
189
64
|
// $start - Where to start the loop. Defaults to 1.
|
190
65
|
// $end - Where to end the loop.
|
191
66
|
// Defaults to the value of $total.
|
@@ -195,76 +70,73 @@
|
|
195
70
|
// Defaults to the value of $shelves-columns.
|
196
71
|
// $gutter - The width of the gutter in the root context (in %).
|
197
72
|
// Defaults to the value of $shelves-gutter.
|
198
|
-
// $prefixes - Include prefix classes.
|
199
|
-
// $suffixes - Include suffix classes.
|
200
|
-
// $pushes - Include push classes.
|
201
|
-
// $pulls - Include pull classes.
|
73
|
+
// $prefixes - Include prefix classes. Defaults to false.
|
74
|
+
// $suffixes - Include suffix classes. Defaults to false.
|
75
|
+
// $pushes - Include push classes. Defaults to false.
|
76
|
+
// $pulls - Include pull classes. Defaults to false.
|
77
|
+
// $column-name - The name of the column to generate widths for.
|
78
|
+
// Defaults to $shelves-desktop-column-name.
|
79
|
+
// $prefix-name - The class name of the prefix modifier.
|
80
|
+
// Defaults to $shelves-desktop-prefix-name.
|
81
|
+
// $suffix-name - The class name of the suffix modifier.
|
82
|
+
// Defaults to $shelves-desktop-suffix-name.
|
83
|
+
// $push-name - The class name of the push modifier.
|
84
|
+
// Defaults to $shelves-desktop-push-name.
|
85
|
+
// $pull-name - The class name of the pull modifier.
|
86
|
+
// Defaults to $shelves-desktop-pull-name.
|
202
87
|
//
|
203
88
|
@mixin shelves-columns(
|
204
|
-
$
|
89
|
+
$extend: null,
|
205
90
|
$start: 1,
|
206
91
|
$end: null,
|
207
|
-
$context:
|
92
|
+
$context: $shelves-context,
|
208
93
|
$total: $shelves-columns,
|
209
94
|
$gutter: $shelves-gutter,
|
210
|
-
$prefixes:
|
211
|
-
$suffixes:
|
212
|
-
$pushes:
|
213
|
-
$pulls:
|
95
|
+
$prefixes: false,
|
96
|
+
$suffixes: false,
|
97
|
+
$pushes: false,
|
98
|
+
$pulls: false,
|
99
|
+
$column-name: $shelves-desktop-column-name,
|
100
|
+
$prefix-name: $shelves-desktop-prefix-name,
|
101
|
+
$suffix-name: $shelves-desktop-suffix-name,
|
102
|
+
$push-name: $shelves-desktop-push-name,
|
103
|
+
$pull-name: $shelves-desktop-pull-name) {
|
214
104
|
$context: $total !default;
|
215
105
|
$end: $context !default;
|
216
106
|
|
217
107
|
@for $i from $start to $end {
|
218
|
-
#{
|
219
|
-
@
|
108
|
+
#{class-selector($column-name $i)} {
|
109
|
+
@if $extend {
|
110
|
+
@extend %#{$extend};
|
111
|
+
}
|
112
|
+
@include column-width($i, $context, $total, $gutter);
|
220
113
|
}
|
221
114
|
}
|
222
115
|
@if $prefixes {
|
223
116
|
@for $i from $start to $end {
|
224
|
-
#{
|
225
|
-
@include column
|
117
|
+
#{class-selector($prefix-name $i)} {
|
118
|
+
@include prefix-column($i, $context, $total, $gutter);
|
226
119
|
}
|
227
120
|
}
|
228
121
|
}
|
229
122
|
@if $suffixes {
|
230
123
|
@for $i from $start to $end {
|
231
|
-
#{
|
232
|
-
@include column
|
124
|
+
#{class-selector($suffix-name $i)} {
|
125
|
+
@include suffix-column($i, $context, $total, $gutter);
|
233
126
|
}
|
234
127
|
}
|
235
128
|
}
|
236
129
|
@if $pushes {
|
237
130
|
@for $i from $start to $end {
|
238
|
-
#{
|
239
|
-
@include column
|
131
|
+
#{class-selector($push-name $i)} {
|
132
|
+
@include push-column($i, $context, $total, $gutter);
|
240
133
|
}
|
241
134
|
}
|
242
135
|
}
|
243
136
|
@if $pulls {
|
244
137
|
@for $i from $start to $end {
|
245
|
-
#{
|
246
|
-
@include column
|
247
|
-
}
|
248
|
-
}
|
249
|
-
}
|
250
|
-
}
|
251
|
-
|
252
|
-
// Resets the row and column elements so they take up
|
253
|
-
// the full width of their parent element. All modifying
|
254
|
-
// effects are removed from columns as well.
|
255
|
-
//
|
256
|
-
// $reset-row - Reset the row. Defaults to true.
|
257
|
-
// $reset-columns - Reset columns (including nested columns).
|
258
|
-
// Defaults to true
|
259
|
-
//
|
260
|
-
@mixin shelves-resets($reset-row: true, $reset-columns: true) {
|
261
|
-
.#{$shelves-row-name} {
|
262
|
-
@if $reset-row {
|
263
|
-
@include reset-row;
|
264
|
-
}
|
265
|
-
@if $reset-columns {
|
266
|
-
#{columns-selector($shelves-column-name)} {
|
267
|
-
@include reset-column;
|
138
|
+
#{class-selector($pull-name $i)} {
|
139
|
+
@include pull-column($i, $context, $total, $gutter);
|
268
140
|
}
|
269
141
|
}
|
270
142
|
}
|