compass-aura 0.1.6 → 0.2
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/stylesheets/aura/_functions.scss +7 -7
- data/stylesheets/aura/_mixins.scss +213 -102
- data/stylesheets/aura/_variables.scss +3 -1
- metadata +3 -4
|
@@ -61,13 +61,13 @@
|
|
|
61
61
|
//////////////////////////////
|
|
62
62
|
@function responsive-ratio() {
|
|
63
63
|
$full: columns-width();
|
|
64
|
-
$breakpoints: $full;
|
|
64
|
+
$aura-breakpoints: $full;
|
|
65
65
|
|
|
66
66
|
@for $i from 1 through 3 {
|
|
67
|
-
$bsize: nth($breakpoints, $i) / $responsive-ratio;
|
|
68
|
-
$breakpoints: join($breakpoints, $bsize);
|
|
67
|
+
$bsize: nth($aura-breakpoints, $i) / $responsive-ratio;
|
|
68
|
+
$aura-breakpoints: join($aura-breakpoints, $bsize);
|
|
69
69
|
}
|
|
70
|
-
@return $breakpoints;
|
|
70
|
+
@return $aura-breakpoints;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
//////////////////////////////
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
@return responsive-ratio();
|
|
80
80
|
}
|
|
81
81
|
$full: columns-width();
|
|
82
|
-
$breakpoints: $full;
|
|
82
|
+
$aura-breakpoints: $full;
|
|
83
83
|
$scale-relation: -1 !default;
|
|
84
84
|
@for $i from 1 through 3 {
|
|
85
85
|
$measure: $measure-width;
|
|
@@ -92,10 +92,10 @@
|
|
|
92
92
|
$gutter-width: gutter-width($gutter-col-grid);
|
|
93
93
|
$side-gutter-width: $gutter-width;
|
|
94
94
|
|
|
95
|
-
$breakpoints: join($breakpoints, columns-width() * $scale-ratio);
|
|
95
|
+
$aura-breakpoints: join($aura-breakpoints, columns-width() * $scale-ratio);
|
|
96
96
|
|
|
97
97
|
}
|
|
98
|
-
@return $breakpoints;
|
|
98
|
+
@return $aura-breakpoints;
|
|
99
99
|
}
|
|
100
100
|
//////////////////////////////
|
|
101
101
|
// Aura Grid Functions
|
|
@@ -32,68 +32,87 @@
|
|
|
32
32
|
|
|
33
33
|
// Set up sidebars now as sidebars can affect $total-cols
|
|
34
34
|
%primary-sidebar {
|
|
35
|
-
@include columns(
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
35
|
+
@include columns($total-cols, $total-cols);
|
|
36
|
+
margin-left: gutter();
|
|
37
|
+
|
|
38
|
+
// Single column debugging for mobile-first design!
|
|
39
|
+
@if $single-column == false {
|
|
39
40
|
@include respond-to('small') {
|
|
40
|
-
@include
|
|
41
|
-
float: left;
|
|
41
|
+
@include columns(sidebar-width());
|
|
42
42
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
margin-left: 0;
|
|
50
|
-
margin-right: gutter();
|
|
43
|
+
|
|
44
|
+
@if nth($sidebars, 2) == 'left' or nth($sidebars, 2) == 'both'{
|
|
45
|
+
float: none;
|
|
46
|
+
@include respond-to('small') {
|
|
47
|
+
@include alpha();
|
|
48
|
+
float: left;
|
|
51
49
|
}
|
|
52
50
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
@else if nth($sidebars, 2) == 'right' {
|
|
52
|
+
float: none;
|
|
53
|
+
@include respond-to('small') {
|
|
54
|
+
float: left;
|
|
55
|
+
@if nth($sidebars, 1) == 1 {
|
|
56
|
+
margin-left: 0;
|
|
57
|
+
margin-right: gutter();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@else if nth($sidebars, 2) == 'none' {
|
|
62
|
+
float: none;
|
|
63
|
+
@include respond-to('small') {
|
|
64
|
+
float: right;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
@else {
|
|
68
|
+
@warn 'Sidebar side can only have a value of left, right, both, or none';
|
|
58
69
|
}
|
|
59
70
|
}
|
|
60
71
|
@else {
|
|
61
|
-
|
|
72
|
+
float: none;
|
|
62
73
|
}
|
|
63
74
|
}
|
|
64
75
|
|
|
65
76
|
%secondary-sidebar {
|
|
66
|
-
@include columns(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
77
|
+
@include columns($total-cols, $total-cols);
|
|
78
|
+
margin-left: gutter();
|
|
79
|
+
|
|
80
|
+
// Single column debugging for mobile-first design!
|
|
81
|
+
@if $single-column == false {
|
|
70
82
|
@include respond-to('small') {
|
|
71
|
-
|
|
83
|
+
@include columns(sidebar-width($overflow: false));
|
|
72
84
|
}
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
margin-right: gutter();
|
|
85
|
+
|
|
86
|
+
@if nth($sidebars, 2) == 'left' {
|
|
87
|
+
float: none;
|
|
88
|
+
@include respond-to('small') {
|
|
89
|
+
float: left;
|
|
90
|
+
}
|
|
80
91
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
92
|
+
@else if nth($sidebars, 2) == 'right' {
|
|
93
|
+
float: none;
|
|
94
|
+
@include respond-to('small') {
|
|
95
|
+
float: right;
|
|
96
|
+
margin-left: 0;
|
|
97
|
+
margin-right: gutter();
|
|
98
|
+
}
|
|
87
99
|
}
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
100
|
+
@else if nth($sidebars, 2) == 'both' {
|
|
101
|
+
float: none;
|
|
102
|
+
@include respond-to('small') {
|
|
103
|
+
float: right;
|
|
104
|
+
margin-right: -1 * (columns($main-content-cols) + columns(sidebar-width($overflow: false)) + gutter());
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
@else if nth($sidebars, 2) == 'none' {
|
|
108
|
+
float: none;
|
|
109
|
+
@include respond-to('small') {
|
|
110
|
+
float: right;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
@else {
|
|
114
|
+
@warn 'Sidebar side can only have a value of left, right, both, or none';
|
|
93
115
|
}
|
|
94
|
-
}
|
|
95
|
-
@else {
|
|
96
|
-
@warn 'Sidebar side can only have a value of left, right, both, or none';
|
|
97
116
|
}
|
|
98
117
|
}
|
|
99
118
|
|
|
@@ -122,19 +141,22 @@
|
|
|
122
141
|
// Set base Root Font to -2 Modular Scale
|
|
123
142
|
@include font-scale(-2);
|
|
124
143
|
|
|
125
|
-
//
|
|
126
|
-
@
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
144
|
+
// Single column debugging for mobile-first design!
|
|
145
|
+
@if $single-column == false {
|
|
146
|
+
// At Small Responsive Scale, increase Modular Scale by 1
|
|
147
|
+
@include respond-to('small') {
|
|
148
|
+
@include font-scale(-1);
|
|
149
|
+
}
|
|
150
|
+
@include respond-to('medium') {
|
|
151
|
+
@include font-scale(0);
|
|
152
|
+
}
|
|
153
|
+
// At Large Responsive Scale, increase Modular Scale by 2 to base
|
|
154
|
+
@include respond-to('large') {
|
|
155
|
+
@include font-scale(1);
|
|
156
|
+
}
|
|
157
|
+
@include respond-to('full') {
|
|
158
|
+
@include font-scale(2);
|
|
159
|
+
}
|
|
138
160
|
}
|
|
139
161
|
}
|
|
140
162
|
// If Font Scale is disabled, set root font to base font size
|
|
@@ -153,47 +175,52 @@
|
|
|
153
175
|
// Create Measure class to be extended
|
|
154
176
|
%measure {
|
|
155
177
|
@include full;
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
@if nth($sidebars, 2) == 'left'{
|
|
160
|
-
float: none;
|
|
178
|
+
|
|
179
|
+
// Single column debugging for mobile-first design!
|
|
180
|
+
@if $single-column == false {
|
|
161
181
|
@include respond-to('small') {
|
|
162
|
-
|
|
182
|
+
@include columns($main-content-cols);
|
|
163
183
|
}
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
@include alpha;
|
|
170
|
-
margin-left: 0;
|
|
171
|
-
margin-right: columns(sidebar-width($overflow: false)) + gutter() + gutter();
|
|
184
|
+
@if nth($sidebars, 2) == 'left'{
|
|
185
|
+
float: none;
|
|
186
|
+
@include respond-to('small') {
|
|
187
|
+
float: right;
|
|
188
|
+
}
|
|
172
189
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
190
|
+
@else if nth($sidebars, 2) == 'both' {
|
|
191
|
+
float: none;
|
|
192
|
+
@include respond-to('small') {
|
|
193
|
+
float: right;
|
|
194
|
+
@include alpha;
|
|
195
|
+
margin-left: 0;
|
|
196
|
+
margin-right: columns(sidebar-width($overflow: false)) + gutter() + gutter();
|
|
197
|
+
}
|
|
179
198
|
}
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
199
|
+
@else if nth($sidebars, 2) == 'right' {
|
|
200
|
+
float: none;
|
|
201
|
+
@include respond-to('small') {
|
|
202
|
+
@include alpha();
|
|
203
|
+
float: left;
|
|
204
|
+
}
|
|
186
205
|
}
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
206
|
+
@else if nth($sidebars, 2) == 'none' {
|
|
207
|
+
float: none;
|
|
208
|
+
@include respond-to('small') {
|
|
209
|
+
@include alpha();
|
|
210
|
+
float: left;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
@else {
|
|
214
|
+
@warn 'Sidebar side can only have a value of left, right, both, or none';
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
// Add in "Omega"
|
|
218
|
+
@if nth($sidebars, 2) == 'left' {
|
|
219
|
+
@include respond-to('small') {
|
|
220
|
+
margin-left: 0;
|
|
221
|
+
margin-right: gutter();
|
|
222
|
+
}
|
|
193
223
|
}
|
|
194
|
-
}
|
|
195
|
-
@else {
|
|
196
|
-
@warn 'Sidebar side can only have a value of left, right, both, or none';
|
|
197
224
|
}
|
|
198
225
|
}
|
|
199
226
|
|
|
@@ -220,23 +247,107 @@ $modular-scale-loaded: false !default;
|
|
|
220
247
|
// Aurora Respond-To
|
|
221
248
|
//////////////////////////////
|
|
222
249
|
@mixin respond-to($context) {
|
|
223
|
-
@if $font-scale and not $breakpoints {
|
|
224
|
-
$breakpoints: responsive-scale();
|
|
250
|
+
@if $font-scale and not $aura-breakpoints {
|
|
251
|
+
$aura-breakpoints: responsive-scale();
|
|
225
252
|
}
|
|
226
|
-
@else if not $font-scale and not $breakpoints {
|
|
227
|
-
$breakpoints: responsive-ratio();
|
|
253
|
+
@else if not $font-scale and not $aura-breakpoints {
|
|
254
|
+
$aura-breakpoints: responsive-ratio();
|
|
228
255
|
}
|
|
229
256
|
$i: 1 !default;
|
|
230
257
|
@each $size in $sizes {
|
|
231
258
|
@if $context == $size {
|
|
232
|
-
$respond: nth($breakpoints, $i);
|
|
233
|
-
@media
|
|
259
|
+
$respond: nth($aura-breakpoints, $i);
|
|
260
|
+
@include media-query($respond) {
|
|
234
261
|
@content;
|
|
235
262
|
}
|
|
236
263
|
}
|
|
237
264
|
$i: $i + 1;
|
|
238
265
|
}
|
|
239
|
-
|
|
240
|
-
|
|
266
|
+
|
|
267
|
+
// Special case for Breakpoint Length equal to 2, 3, or 4
|
|
268
|
+
@if length($breakpoints) >= 2 and length($breakpoints) <= 4 {
|
|
269
|
+
// Check to see if the 2nd item is a number. If it is, we've got a single query
|
|
270
|
+
@if type-of(nth($breakpoints, 2)) == 'number' {
|
|
271
|
+
// Check to see if the context matches the breakpoint namespace
|
|
272
|
+
@if $context == nth($breakpoints, 1) {
|
|
273
|
+
// Call Media Query Generator
|
|
274
|
+
@include media-query-gen($breakpoints) {
|
|
275
|
+
@content;
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
// Else, loop over all of them
|
|
280
|
+
@else {
|
|
281
|
+
// Loop over each breakpoint and check context
|
|
282
|
+
@each $bkpt in $breakpoints {
|
|
283
|
+
// If context is correct…
|
|
284
|
+
@if $context == nth($bkpt, 1) {
|
|
285
|
+
// Call the generator!
|
|
286
|
+
@include media-query-gen($bkpt) {
|
|
287
|
+
@content;
|
|
288
|
+
}
|
|
289
|
+
}
|
|
290
|
+
}
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
// Else, loop over all of them
|
|
294
|
+
@else {
|
|
295
|
+
// Loop over each breakpoint and check context
|
|
296
|
+
@each $bkpt in $breakpoints {
|
|
297
|
+
// If context is correct…
|
|
298
|
+
@if $context == nth($bkpt, 1) {
|
|
299
|
+
// Call the generator!
|
|
300
|
+
@include media-query-gen($bkpt) {
|
|
301
|
+
@content;
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
@mixin media-query-gen($bpt) {
|
|
309
|
+
// Get length of breakpoint variable, minus the namespace
|
|
310
|
+
$length: length($bpt);
|
|
311
|
+
// Go through all of the breakpoint items, starting at the second, and add them to a variable to be passed into the media query mixin
|
|
312
|
+
$mq: false !default;
|
|
313
|
+
@for $i from 2 through $length {
|
|
314
|
+
// If it's the first item, override $mq
|
|
315
|
+
@if $i == 2 {
|
|
316
|
+
$mq: nth($bpt, $i);
|
|
317
|
+
}
|
|
318
|
+
// Else, join $mq
|
|
319
|
+
@else {
|
|
320
|
+
$mq: join($mq, nth($bpt, $i));
|
|
321
|
+
}
|
|
322
|
+
}
|
|
323
|
+
// Call Media Query mixin
|
|
324
|
+
@include media-query($mq) {
|
|
325
|
+
@content;
|
|
241
326
|
}
|
|
242
327
|
}
|
|
328
|
+
|
|
329
|
+
//////////////////////////////
|
|
330
|
+
// Generalized Media Query Mixin
|
|
331
|
+
//////////////////////////////
|
|
332
|
+
@mixin media-query($value, $operator: 'min-width', $query: 'screen') {
|
|
333
|
+
// If a list is passed in for value, break it into value, operator, and query
|
|
334
|
+
@if type-of($value) == 'list' {
|
|
335
|
+
$mq: $value;
|
|
336
|
+
|
|
337
|
+
@for $i from 1 through length($mq) {
|
|
338
|
+
@if $i == 1 {
|
|
339
|
+
$value: nth($mq, 1);
|
|
340
|
+
}
|
|
341
|
+
@else if $i == 2 {
|
|
342
|
+
$operator: nth($mq, 2);
|
|
343
|
+
}
|
|
344
|
+
@else if $i == 3 {
|
|
345
|
+
$query: nth($mq, 3);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
@media #{$query} and (#{$operator}: #{$value}) {
|
|
351
|
+
@content;
|
|
352
|
+
}
|
|
353
|
+
}
|
|
@@ -8,12 +8,14 @@ $main-content-cols: 9 !default;
|
|
|
8
8
|
$font-scale: true !default;
|
|
9
9
|
$obj-scale: true !default;
|
|
10
10
|
$sidebars: 1, 'right' !default;
|
|
11
|
+
$single-column: true !default;
|
|
11
12
|
// Advanced Options
|
|
12
13
|
$gutter-to-col: 1, 4 !default;
|
|
13
14
|
$alphabet-count: 26 !default;
|
|
14
15
|
$measure-width: $alphabet-count* $fourth !default;
|
|
15
16
|
$lh-addition: .3em !default;
|
|
16
17
|
$responsive-ratio: false !default;
|
|
18
|
+
$breakpoints: false !default;
|
|
17
19
|
// If using font-scale, suggest $major-third ratio. If not, suggest $golden ratio
|
|
18
20
|
// Bad Options
|
|
19
21
|
$width: false !default;
|
|
@@ -24,7 +26,7 @@ $width: false !default;
|
|
|
24
26
|
//////////////////////////////
|
|
25
27
|
$measure: false !default;
|
|
26
28
|
$gutter-col-total: 5 !default;
|
|
27
|
-
$breakpoints:
|
|
29
|
+
$aura-breakpoints: false !default;
|
|
28
30
|
$body-font-size-em: false !default;
|
|
29
31
|
$body-font-size-px: false !default;
|
|
30
32
|
$body-font-size-percent: false !default;
|
metadata
CHANGED
|
@@ -4,9 +4,8 @@ version: !ruby/object:Gem::Version
|
|
|
4
4
|
prerelease: false
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
|
-
-
|
|
8
|
-
|
|
9
|
-
version: 0.1.6
|
|
7
|
+
- 2
|
|
8
|
+
version: "0.2"
|
|
10
9
|
platform: ruby
|
|
11
10
|
authors:
|
|
12
11
|
- Sam Richard
|
|
@@ -14,7 +13,7 @@ autorequire:
|
|
|
14
13
|
bindir: bin
|
|
15
14
|
cert_chain: []
|
|
16
15
|
|
|
17
|
-
date: 2011-
|
|
16
|
+
date: 2011-04-25 00:00:00 -04:00
|
|
18
17
|
default_executable:
|
|
19
18
|
dependencies:
|
|
20
19
|
- !ruby/object:Gem::Dependency
|