compass-aura 0.3.1 → 0.5.alpha.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/lib/aura.rb +1 -0
- data/stylesheets/_aura.scss +190 -8
- metadata +28 -17
- data/stylesheets/aura/_functions.scss +0 -269
- data/stylesheets/aura/_mixins.scss +0 -331
- data/stylesheets/aura/_variables.scss +0 -35
data/lib/aura.rb
CHANGED
data/stylesheets/_aura.scss
CHANGED
|
@@ -1,14 +1,196 @@
|
|
|
1
1
|
//////////////////////////////
|
|
2
|
-
// Requires
|
|
2
|
+
// Requires Modular Scale
|
|
3
3
|
//////////////////////////////
|
|
4
4
|
@import 'susy';
|
|
5
|
+
@import 'respond-to';
|
|
5
6
|
@import 'modular-scale';
|
|
6
|
-
@import 'math';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
8
|
+
$base-font-size: 14px;
|
|
9
|
+
|
|
10
|
+
$base-touch-size: 44px !default;
|
|
11
|
+
|
|
12
|
+
$ratio: golden_ratio() !default;
|
|
13
|
+
|
|
14
|
+
$measure-span: 9 !default;
|
|
15
|
+
|
|
16
|
+
$breakpoint-names: 'small' 'medium' 'large' 'full' !default;
|
|
17
|
+
$breakpoint-values: () !default;
|
|
18
|
+
$breakpoint-multi-columns: 'full' !default;
|
|
19
|
+
$breakpoint-overrides: '' !default;
|
|
20
|
+
$full-width: 0 !default;
|
|
21
|
+
$full-width-override: false !default;
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
@function px-base-em($px) {
|
|
26
|
+
@return ($px / 16px) * 1em;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@mixin measure-generate {
|
|
30
|
+
@if type-of($base-touch-size) == 'number' {
|
|
31
|
+
$base-size: $base-font-size $base-touch-size;
|
|
32
|
+
}
|
|
33
|
+
@else {
|
|
34
|
+
$base-size: $base-font-size;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
$length-bkpts: length($breakpoint-names);
|
|
38
|
+
$index-multi: index($breakpoint-names, $breakpoint-multi-columns);
|
|
39
|
+
@if not $index-multi {
|
|
40
|
+
$index-multi: length($breakpoint-names) + 1;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@for $i from 0 through $length-bkpts - 1 {
|
|
44
|
+
// @debug $i;
|
|
45
|
+
// @debug ms($i+1);
|
|
46
|
+
$size: '';
|
|
47
|
+
@if $i < $index-multi {
|
|
48
|
+
$size: (power(ms($i+1), 2) / (columns($total-columns) / 100%) * 1px);
|
|
49
|
+
}
|
|
50
|
+
@else {
|
|
51
|
+
$size: (power(ms($i+1), 2) / (columns($measure-span) / 100%) * 1px);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
$breakpoint-name: nth($breakpoint-names, $i+1);
|
|
55
|
+
|
|
56
|
+
@if type-of(nth($breakpoint-overrides, 1)) != 'list' {
|
|
57
|
+
@if nth($breakpoint-overrides, 1) == $breakpoint-name {
|
|
58
|
+
$size: nth($breakpoint-overrides, 2);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
@else {
|
|
62
|
+
@each $override in $breakpoint-overrides {
|
|
63
|
+
@if nth($override, 1) == $breakpoint-name {
|
|
64
|
+
$size: nth($override, 2);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
$breakpoint-values: append($breakpoint-values, $size);
|
|
70
|
+
|
|
71
|
+
$query: join(nth($breakpoint-names, $i+1), $size, space);
|
|
72
|
+
|
|
73
|
+
$breakpoints: append($breakpoints, $query, comma);
|
|
74
|
+
|
|
75
|
+
@if nth($breakpoint-names, $i+1) == 'full' {
|
|
76
|
+
@if $full-width-override {
|
|
77
|
+
$full-width: $full-width-override;
|
|
78
|
+
}
|
|
79
|
+
@else {
|
|
80
|
+
$full-width: $size;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Column to Gutter Ratio
|
|
86
|
+
$col-to-gutter: 4 1;
|
|
87
|
+
|
|
88
|
+
// Find Single Subcolumn Width
|
|
89
|
+
$width: $full-width / $total-columns;
|
|
90
|
+
$width-single: $full-width / (nth($col-to-gutter, 1) * $total-columns + nth($col-to-gutter, 2) * ($total-columns + 1));
|
|
91
|
+
$width-single: $width-single * 1em / 16px;
|
|
92
|
+
|
|
93
|
+
// Create Columns
|
|
94
|
+
$column-width: $width-single * nth($col-to-gutter, 1);
|
|
95
|
+
$gutter-width: $width-single * nth($col-to-gutter, 2);
|
|
96
|
+
$grid-padding: $gutter-width;
|
|
97
|
+
|
|
98
|
+
//@debug columns($measure-span);
|
|
99
|
+
//@debug ms(5);
|
|
100
|
+
|
|
101
|
+
@if type-of($base-touch-size) == 'number' {
|
|
102
|
+
$base-size: px-base-em($base-font-size) px-base-em($base-touch-size);
|
|
103
|
+
}
|
|
104
|
+
@else {
|
|
105
|
+
$base-size: px-base-em($base-font-size);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
html {
|
|
109
|
+
line-height: #{$ratio + 'em'};
|
|
110
|
+
|
|
111
|
+
font-size: ms(0);
|
|
112
|
+
|
|
113
|
+
@for $i from 1 through $length-bkpts {
|
|
114
|
+
@include respond-to(nth($breakpoint-names, $i)) {
|
|
115
|
+
font-size: ms($i);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@mixin aura-container() {
|
|
122
|
+
@include container();
|
|
123
|
+
|
|
124
|
+
@for $i from 1 through length($breakpoint-names) {
|
|
125
|
+
@include respond-to(nth($breakpoint-names, $i)) {
|
|
126
|
+
max-width: 1em / ms($i) * columns-width();
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
%measure-tester:before {
|
|
132
|
+
content: 'This is the measure tester. Each asterisk marks the * approximate min and max * width for your measure. You should adjust the gene * rated breakpoints using * the $breakpoint-overrides variable in order to kee * p your measure ideal. Y * ou can also adjust the full size with $full-width- * override. Happy theming *';
|
|
133
|
+
display: block;
|
|
134
|
+
position: relative;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
@mixin measure($omega: "") {
|
|
138
|
+
clear: both;
|
|
139
|
+
|
|
140
|
+
$index-multi: index($breakpoint-names, $breakpoint-multi-columns);
|
|
141
|
+
@if not $index-multi {
|
|
142
|
+
$index-multi: length($breakpoint-names) + 1;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
@for $i from 0 through length($breakpoint-names) {
|
|
147
|
+
@if $i == 0 {
|
|
148
|
+
@if $i < $index-multi {
|
|
149
|
+
clear: both;
|
|
150
|
+
}
|
|
151
|
+
@else {
|
|
152
|
+
@include span-columns($measure-span $omega);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
|
+
@else {
|
|
156
|
+
@include respond-to(nth($breakpoint-names, $i)) {
|
|
157
|
+
@if $i < $index-multi {
|
|
158
|
+
clear: both;
|
|
159
|
+
}
|
|
160
|
+
@else {
|
|
161
|
+
@include span-columns($measure-span $omega);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
@function to-vw($i) {
|
|
169
|
+
@if $i == 0 {
|
|
170
|
+
@return ms($i) / (nth($breakpoint-values, $i+1) * .01);
|
|
171
|
+
}
|
|
172
|
+
@else {
|
|
173
|
+
@return ms($i) / (nth($breakpoint-values, $i) * .01);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
14
176
|
|
|
177
|
+
@function aura-scale($multiple, $size: 'none') {
|
|
178
|
+
$index-multi: index($breakpoint-names, $size);
|
|
179
|
+
@if not $index-multi {
|
|
180
|
+
$index-multi: length($breakpoint-names) + 1;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
@for $i from 1 through length($breakpoint-names) {
|
|
184
|
+
@if $index-multi == $i {
|
|
185
|
+
@if $i != length($breakpoint-names) {
|
|
186
|
+
$base-size: 1em px-base-em(nth($breakpoint-values, $i+1));
|
|
187
|
+
}
|
|
188
|
+
@else {
|
|
189
|
+
$base-size: 1em px-base-em($full-width);
|
|
190
|
+
}
|
|
191
|
+
@return modular-scale($multiple, $base-size, $ratio);
|
|
192
|
+
}
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
@return ms($multiple, (1em px-base-em(nth($breakpoint-values, 1))));
|
|
196
|
+
}
|
metadata
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: compass-aura
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
prerelease:
|
|
4
|
+
prerelease: true
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
|
|
7
|
+
- 5
|
|
8
|
+
- alpha
|
|
9
|
+
- 0
|
|
10
|
+
version: 0.5.alpha.0
|
|
10
11
|
platform: ruby
|
|
11
12
|
authors:
|
|
12
13
|
- Sam Richard
|
|
@@ -14,7 +15,7 @@ autorequire:
|
|
|
14
15
|
bindir: bin
|
|
15
16
|
cert_chain: []
|
|
16
17
|
|
|
17
|
-
date: 2011-
|
|
18
|
+
date: 2011-07-11 00:00:00 -04:00
|
|
18
19
|
default_executable:
|
|
19
20
|
dependencies:
|
|
20
21
|
- !ruby/object:Gem::Dependency
|
|
@@ -27,8 +28,8 @@ dependencies:
|
|
|
27
28
|
segments:
|
|
28
29
|
- 0
|
|
29
30
|
- 0
|
|
30
|
-
-
|
|
31
|
-
version: 0.0.
|
|
31
|
+
- 5
|
|
32
|
+
version: 0.0.5
|
|
32
33
|
type: :runtime
|
|
33
34
|
version_requirements: *id001
|
|
34
35
|
- !ruby/object:Gem::Dependency
|
|
@@ -42,8 +43,8 @@ dependencies:
|
|
|
42
43
|
- 1
|
|
43
44
|
- 0
|
|
44
45
|
- rc
|
|
45
|
-
-
|
|
46
|
-
version: 1.0.rc.
|
|
46
|
+
- 1
|
|
47
|
+
version: 1.0.rc.1
|
|
47
48
|
type: :runtime
|
|
48
49
|
version_requirements: *id002
|
|
49
50
|
- !ruby/object:Gem::Dependency
|
|
@@ -54,13 +55,26 @@ dependencies:
|
|
|
54
55
|
- - ">="
|
|
55
56
|
- !ruby/object:Gem::Version
|
|
56
57
|
segments:
|
|
57
|
-
- 0
|
|
58
58
|
- 1
|
|
59
|
-
-
|
|
60
|
-
version:
|
|
59
|
+
- 1
|
|
60
|
+
version: "1.1"
|
|
61
61
|
type: :runtime
|
|
62
62
|
version_requirements: *id003
|
|
63
|
-
|
|
63
|
+
- !ruby/object:Gem::Dependency
|
|
64
|
+
name: respond-to
|
|
65
|
+
prerelease: false
|
|
66
|
+
requirement: &id004 !ruby/object:Gem::Requirement
|
|
67
|
+
requirements:
|
|
68
|
+
- - ">="
|
|
69
|
+
- !ruby/object:Gem::Version
|
|
70
|
+
segments:
|
|
71
|
+
- 2
|
|
72
|
+
- 0
|
|
73
|
+
- 1
|
|
74
|
+
version: 2.0.1
|
|
75
|
+
type: :runtime
|
|
76
|
+
version_requirements: *id004
|
|
77
|
+
description: Responsive Typography for Sass+Compass.
|
|
64
78
|
email:
|
|
65
79
|
- snugug@gmail.com
|
|
66
80
|
executables: []
|
|
@@ -72,9 +86,6 @@ extra_rdoc_files: []
|
|
|
72
86
|
files:
|
|
73
87
|
- lib/aura.rb
|
|
74
88
|
- stylesheets/_aura.scss
|
|
75
|
-
- stylesheets/aura/_functions.scss
|
|
76
|
-
- stylesheets/aura/_mixins.scss
|
|
77
|
-
- stylesheets/aura/_variables.scss
|
|
78
89
|
has_rdoc: true
|
|
79
90
|
homepage: https://github.com/Snugug/Aura
|
|
80
91
|
licenses: []
|
|
@@ -105,6 +116,6 @@ rubyforge_project: compass-aura
|
|
|
105
116
|
rubygems_version: 1.3.6
|
|
106
117
|
signing_key:
|
|
107
118
|
specification_version: 3
|
|
108
|
-
summary: Responsive
|
|
119
|
+
summary: Responsive Typography FTW.
|
|
109
120
|
test_files: []
|
|
110
121
|
|
|
@@ -1,269 +0,0 @@
|
|
|
1
|
-
//////////////////////////////
|
|
2
|
-
// Converting between px and em
|
|
3
|
-
//////////////////////////////
|
|
4
|
-
@function px-em($px) {
|
|
5
|
-
@return $px / $body-font-size-px * 1em;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
@function em-em($em, $base: 14px) {
|
|
9
|
-
@return $em * $base / $body-font-size-px;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@function em-px($em) {
|
|
13
|
-
@return $em / $body-font-size-em * $body-font-size-px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
//////////////////////////////
|
|
17
|
-
// Find Base Font Size from Input Font Size;
|
|
18
|
-
//////////////////////////////
|
|
19
|
-
@function base-font-size() {
|
|
20
|
-
$unit: unit($body-font-size);
|
|
21
|
-
@if $unit == 'px' {
|
|
22
|
-
@return $body-font-size / 16px * 1em;
|
|
23
|
-
}
|
|
24
|
-
@else if $unit == '%' {
|
|
25
|
-
@return $body-font-size / 100% * 1em;
|
|
26
|
-
}
|
|
27
|
-
@else if $unit == 'em' {
|
|
28
|
-
@return $body-font-size;
|
|
29
|
-
}
|
|
30
|
-
@else if $unit == 'pt' {
|
|
31
|
-
@return $body-font-size / 12pt * 1em;
|
|
32
|
-
}
|
|
33
|
-
@else {
|
|
34
|
-
@warn 'Variable $body-font-size does not have a valid font unit';
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
//////////////////////////////
|
|
39
|
-
// Generates Body Font Sizes for each unit
|
|
40
|
-
//////////////////////////////
|
|
41
|
-
@function bfs($unit) {
|
|
42
|
-
@if $unit == 'px' {
|
|
43
|
-
@return $body-font-size-em / 1em * 16px;
|
|
44
|
-
}
|
|
45
|
-
@else if $unit == '%' {
|
|
46
|
-
@return $body-font-size-em / 1em * 100%;
|
|
47
|
-
}
|
|
48
|
-
@else if $unit == 'em' {
|
|
49
|
-
@return $body-font-size-em;
|
|
50
|
-
}
|
|
51
|
-
@else if $unit == 'pt' {
|
|
52
|
-
@return $body-font-size-em / 1em * 12pt;
|
|
53
|
-
}
|
|
54
|
-
@else {
|
|
55
|
-
@warn 'Invalid unit passed in.';
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
//////////////////////////////
|
|
60
|
-
// Find Breakpoints for Non Modular-Scale
|
|
61
|
-
//////////////////////////////
|
|
62
|
-
@function responsive-ratio() {
|
|
63
|
-
$full: columns-width();
|
|
64
|
-
$aura-breakpoints: $full;
|
|
65
|
-
|
|
66
|
-
@for $i from 1 through 3 {
|
|
67
|
-
$bsize: nth($aura-breakpoints, $i) / $responsive-ratio;
|
|
68
|
-
$aura-breakpoints: join($aura-breakpoints, $bsize);
|
|
69
|
-
}
|
|
70
|
-
@return $aura-breakpoints;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
//////////////////////////////
|
|
74
|
-
// Find Breakpoints for Modular Scale
|
|
75
|
-
//////////////////////////////
|
|
76
|
-
@function responsive-scale() {
|
|
77
|
-
@if $modular-scale-loaded == false {
|
|
78
|
-
@warn 'the responsive-scale function requires modular-scale to be loaded. The responsive-ratio value was returned.';
|
|
79
|
-
@return responsive-ratio();
|
|
80
|
-
}
|
|
81
|
-
$full: columns-width();
|
|
82
|
-
$aura-breakpoints: $full;
|
|
83
|
-
$scale-relation: -1 !default;
|
|
84
|
-
@for $i from 1 through 3 {
|
|
85
|
-
$measure: $measure-width;
|
|
86
|
-
$scale-ratio: ms($scale-relation, $body-font-size-em, $responsive-ratio) / 1em;
|
|
87
|
-
$scale-relation: $scale-relation - 1;
|
|
88
|
-
|
|
89
|
-
$col-total: col-total();
|
|
90
|
-
$gutter-col-grid: gutter-col-grid($col-total);
|
|
91
|
-
$column-width: col-width($gutter-col-grid);
|
|
92
|
-
$gutter-width: gutter-width($gutter-col-grid);
|
|
93
|
-
$grid-padding: $gutter-width;
|
|
94
|
-
|
|
95
|
-
$aura-breakpoints: join($aura-breakpoints, columns-width() * $scale-ratio);
|
|
96
|
-
|
|
97
|
-
}
|
|
98
|
-
@return $aura-breakpoints;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
////////////////////////
|
|
102
|
-
// Aura Breakpoints
|
|
103
|
-
////////////////////////
|
|
104
|
-
@function aura-break($size) {
|
|
105
|
-
@if $size == 'full' {
|
|
106
|
-
@return nth($aura-breakpoints, 1);
|
|
107
|
-
}
|
|
108
|
-
@else if $size == 'large' {
|
|
109
|
-
@return nth($aura-breakpoints, 2);
|
|
110
|
-
}
|
|
111
|
-
@else if $size == 'medium' {
|
|
112
|
-
@return nth($aura-breakpoints, 3);
|
|
113
|
-
}
|
|
114
|
-
@else if $size == 'small' {
|
|
115
|
-
@return nth($aura-breakpoints, 4);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
//////////////////////////////
|
|
120
|
-
// Aura Grid Functions
|
|
121
|
-
//////////////////////////////
|
|
122
|
-
// Returns Total Column Width
|
|
123
|
-
@function col-total() {
|
|
124
|
-
@return $measure / $main-content-cols * 1em;
|
|
125
|
-
}
|
|
126
|
-
// Returns Total Number of Sub Column Pieces
|
|
127
|
-
@function gutter-col-total() {
|
|
128
|
-
@return nth($gutter-to-col, 1) + nth($gutter-to-col, 2);
|
|
129
|
-
}
|
|
130
|
-
// Returns Width of One Full Column + Gutter
|
|
131
|
-
@function gutter-col-grid($col-total) {
|
|
132
|
-
@return $col-total / $gutter-col-total;
|
|
133
|
-
}
|
|
134
|
-
// Returns Width of One Column
|
|
135
|
-
@function col-width($gutter-col-grid) {
|
|
136
|
-
@return $gutter-col-grid * nth($gutter-to-col, 2);
|
|
137
|
-
}
|
|
138
|
-
// Returns Width of One Gutter
|
|
139
|
-
@function gutter-width($gutter-col-grid) {
|
|
140
|
-
@return $gutter-col-grid * nth($gutter-to-col, 1);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
//////////////////////////////
|
|
144
|
-
// Sidebar Functions
|
|
145
|
-
//////////////////////////////
|
|
146
|
-
@function sidebar-width($overflow: true) {
|
|
147
|
-
// Grab number of sidebars
|
|
148
|
-
$num: nth($sidebars, 1);
|
|
149
|
-
|
|
150
|
-
@if $num > 2 or $num < 0 {
|
|
151
|
-
@warn 'Invalid number of sidebars! You can have 0, 1, or 2 sidebars!';
|
|
152
|
-
@return -1;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
// Grab length of sidebar variable to determine how to act
|
|
156
|
-
$length: length($sidebars);
|
|
157
|
-
|
|
158
|
-
@if $length < 2 {
|
|
159
|
-
@warn "Not enough arguments! You need to provide at least the number of sidebars and the side of the sidebar! If you do not want sidebars, set $sidebars: 0, 'none';";
|
|
160
|
-
@return -1;
|
|
161
|
-
}
|
|
162
|
-
@else if $length > 4 {
|
|
163
|
-
@warn "Too many arguments!";
|
|
164
|
-
@return -1;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
@if $length == 2 {
|
|
168
|
-
@if $num == 0 {
|
|
169
|
-
$total-columns: $main-content-cols;
|
|
170
|
-
@return 0;
|
|
171
|
-
}
|
|
172
|
-
@else if $num == 1 {
|
|
173
|
-
@return $total-columns - $main-content-cols;
|
|
174
|
-
}
|
|
175
|
-
@else if $num == 2 {
|
|
176
|
-
$remainder: $total-columns - $main-content-cols;
|
|
177
|
-
$floor: floor($remainder / 2);
|
|
178
|
-
$extra: $remainder - $floor;
|
|
179
|
-
$big: '';
|
|
180
|
-
$small: '';
|
|
181
|
-
@if $floor > $extra {
|
|
182
|
-
$big: $floor;
|
|
183
|
-
$small: $extra;
|
|
184
|
-
}
|
|
185
|
-
@else if $extra > $floor {
|
|
186
|
-
$big: $extra;
|
|
187
|
-
$small: $floor;
|
|
188
|
-
}
|
|
189
|
-
@else {
|
|
190
|
-
$big: $floor;
|
|
191
|
-
$small: $extra;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
@if $overflow == true {
|
|
195
|
-
@return $big;
|
|
196
|
-
}
|
|
197
|
-
@else {
|
|
198
|
-
@return $small;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
@else {
|
|
202
|
-
@warn 'Invalid number of sidebars! You can have 0, 1, or 2 sidebars!';
|
|
203
|
-
@return -1;
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
@else if $length == 3 {
|
|
207
|
-
$sidebar-width: nth($sidebars, 3);
|
|
208
|
-
@if is-int($sidebar-width) == false {
|
|
209
|
-
@warn 'Sidebar width must be an integer!';
|
|
210
|
-
@return -1;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
@if $num == 0 {
|
|
214
|
-
$total-columns: $main-content-cols;
|
|
215
|
-
@return 0;
|
|
216
|
-
}
|
|
217
|
-
@else if $num == 1 {
|
|
218
|
-
$total-columns: $main-content-cols + $sidebar-width;
|
|
219
|
-
@return $sidebar-width;
|
|
220
|
-
}
|
|
221
|
-
@else if $num == 2 {
|
|
222
|
-
$total-columns: $main-content-cols + 2 * $sidebar-width;
|
|
223
|
-
@return $sidebar-width;
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
@else if $length == 4 {
|
|
227
|
-
$sidebar-1-width: nth($sidebars, 3);
|
|
228
|
-
@if is-int($sidebar-1-width) == false {
|
|
229
|
-
@warn 'First sidebar width must be an integer!';
|
|
230
|
-
@return -1;
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
$sidebar-2-width: nth($sidebars, 4);
|
|
234
|
-
@if is-int($sidebar-2-width) == false {
|
|
235
|
-
@warn 'Second sidebar width must be an integer!';
|
|
236
|
-
@return -1;
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
@if $num == 0 {
|
|
240
|
-
$total-columns: $main-content-cols;
|
|
241
|
-
@return 0;
|
|
242
|
-
}
|
|
243
|
-
@else if $num > 1 {
|
|
244
|
-
$total-columns: $main-content-cols + $sidebar-1-width + $sidebar-2-width;
|
|
245
|
-
|
|
246
|
-
$big: '';
|
|
247
|
-
$small: '';
|
|
248
|
-
|
|
249
|
-
@if $sidebar-1-width > $sidebar-2-width {
|
|
250
|
-
$big: $sidebar-1-width;
|
|
251
|
-
$small: $sidebar-2-width;
|
|
252
|
-
}
|
|
253
|
-
@else if $sidebar-1-width < $sidebar-2-width {
|
|
254
|
-
$big: $sidebar-2-width;
|
|
255
|
-
$small: $sidebar-1-width;
|
|
256
|
-
}
|
|
257
|
-
@else {
|
|
258
|
-
$big: $sidebar-1-width;
|
|
259
|
-
$small: $sidebar-2-width;
|
|
260
|
-
}
|
|
261
|
-
@if $overflow == true {
|
|
262
|
-
@return $big;
|
|
263
|
-
}
|
|
264
|
-
@else {
|
|
265
|
-
@return $small;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
@@ -1,331 +0,0 @@
|
|
|
1
|
-
//////////////////////////////
|
|
2
|
-
// Aura Setup Mixin
|
|
3
|
-
//////////////////////////////
|
|
4
|
-
@mixin aura-setup {
|
|
5
|
-
// Hard sets font-scale to false if width is set
|
|
6
|
-
@if $width {
|
|
7
|
-
$font-scale: false;
|
|
8
|
-
}
|
|
9
|
-
// Calculate HTML font size in Em
|
|
10
|
-
$body-font-size-em: base-font-size();
|
|
11
|
-
$body-font-size-px: bfs('px');
|
|
12
|
-
$body-font-size-percent: bfs('%');
|
|
13
|
-
$body-font-size-pt: bfs('pt');
|
|
14
|
-
|
|
15
|
-
// Default Responsive Ratio if none is set
|
|
16
|
-
// If using font-scale, suggest $major-third ratio. If not, suggest $golden ratio
|
|
17
|
-
@if not $responsive-ratio {
|
|
18
|
-
@if $font-scale {
|
|
19
|
-
$responsive-ratio: $major-third;
|
|
20
|
-
}
|
|
21
|
-
@else {
|
|
22
|
-
$responsive-ratio: $golden-ratio;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
// Define Initial Grid Dimensions
|
|
27
|
-
@if $font-scale {
|
|
28
|
-
$measure: $measure-width + 1/2 * $alphabet-count;
|
|
29
|
-
}
|
|
30
|
-
@else {
|
|
31
|
-
$measure: $measure-width;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// Set up sidebars now as sidebars can affect $total-columns
|
|
35
|
-
%primary-sidebar {
|
|
36
|
-
clear: both;
|
|
37
|
-
|
|
38
|
-
// Single column debugging for mobile-first design!
|
|
39
|
-
@if $single-column == false {
|
|
40
|
-
@include respond-to('small') {
|
|
41
|
-
clear: none;
|
|
42
|
-
@include span-columns(sidebar-width());
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@if nth($sidebars, 2) == 'left' or nth($sidebars, 2) == 'both'{
|
|
46
|
-
float: none;
|
|
47
|
-
@include respond-to('small') {
|
|
48
|
-
;
|
|
49
|
-
float: left;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
@else if nth($sidebars, 2) == 'right' {
|
|
53
|
-
float: none;
|
|
54
|
-
@include respond-to('small') {
|
|
55
|
-
float: left;
|
|
56
|
-
@if nth($sidebars, 1) == 1 {
|
|
57
|
-
@include omega;
|
|
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';
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
@else {
|
|
72
|
-
float: none;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
;
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
%secondary-sidebar {
|
|
79
|
-
// @include span-columns($total-columns);
|
|
80
|
-
clear: both;
|
|
81
|
-
// Single column debugging for mobile-first design!
|
|
82
|
-
@if $single-column == false {
|
|
83
|
-
@include respond-to('small') {
|
|
84
|
-
clear: none;
|
|
85
|
-
@include span-columns(sidebar-width($overflow: false));
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
@if nth($sidebars, 2) == 'left' {
|
|
89
|
-
float: none;
|
|
90
|
-
@include respond-to('small') {
|
|
91
|
-
float: left;
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
@else if nth($sidebars, 2) == 'right' {
|
|
95
|
-
float: none;
|
|
96
|
-
@include respond-to('small') {
|
|
97
|
-
float: right;
|
|
98
|
-
@include omega;
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
@else if nth($sidebars, 2) == 'both' {
|
|
102
|
-
float: none;
|
|
103
|
-
@include respond-to('small') {
|
|
104
|
-
float: right;
|
|
105
|
-
// Need to fake "pull" for this column in order to work
|
|
106
|
-
margin-right: -1 * (columns($main-content-cols) + columns(sidebar-width($overflow: false)) + gutter());
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
@else if nth($sidebars, 2) == 'none' {
|
|
110
|
-
float: none;
|
|
111
|
-
@include respond-to('small') {
|
|
112
|
-
float: right;
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
@else {
|
|
116
|
-
@warn 'Sidebar side can only have a value of left, right, both, or none';
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// Set UP Grid
|
|
122
|
-
// If there's a width, figure out body-font-size for width
|
|
123
|
-
@if $width {
|
|
124
|
-
$width-em: px-em($width);
|
|
125
|
-
$sub-col: $width-em / ($total-columns * gutter-col-total() + nth($gutter-to-col, 1));
|
|
126
|
-
$column-width: $sub-col * nth($gutter-to-col, 2);
|
|
127
|
-
$gutter-width: $sub-col * nth($gutter-to-col, 1);
|
|
128
|
-
$grid-padding: $gutter-width;
|
|
129
|
-
}
|
|
130
|
-
@else {
|
|
131
|
-
$col-total: col-total();
|
|
132
|
-
$gutter-col-total: gutter-col-total();
|
|
133
|
-
$gutter-col-grid: gutter-col-grid($col-total);
|
|
134
|
-
$column-width: col-width($gutter-col-grid);
|
|
135
|
-
$gutter-width: gutter-width($gutter-col-grid);
|
|
136
|
-
$grid-padding: $gutter-width;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
// Set Root Em
|
|
140
|
-
html {
|
|
141
|
-
// If Font Scale is enabled, set up root font scaling
|
|
142
|
-
@if $font-scale {
|
|
143
|
-
// Set base Root Font to -2 Modular Scale
|
|
144
|
-
@include font-scale(-2);
|
|
145
|
-
|
|
146
|
-
// Single column debugging for mobile-first design!
|
|
147
|
-
@if $single-column == false {
|
|
148
|
-
// At Small Responsive Scale, increase Modular Scale by 1
|
|
149
|
-
@include respond-to('small') {
|
|
150
|
-
@include font-scale(-1);
|
|
151
|
-
}
|
|
152
|
-
@include respond-to('medium') {
|
|
153
|
-
@include font-scale(0);
|
|
154
|
-
}
|
|
155
|
-
// At Large Responsive Scale, increase Modular Scale by 2 to base
|
|
156
|
-
@include respond-to('large') {
|
|
157
|
-
@include font-scale(1);
|
|
158
|
-
}
|
|
159
|
-
@include respond-to('full') {
|
|
160
|
-
@include font-scale(2);
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
// If Font Scale is disabled, set root font to base font size
|
|
165
|
-
@else {
|
|
166
|
-
font-size: $body-font-size-em;
|
|
167
|
-
line-height: $body-font-size-em + $lh-addition;
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
// If Object Scaling is enabled, set up object scaling
|
|
171
|
-
@if $obj-scale {
|
|
172
|
-
img, object, embed, iframe, video, audio {
|
|
173
|
-
max-width: 100%;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
|
|
177
|
-
// Create Measure class to be extended
|
|
178
|
-
%measure {
|
|
179
|
-
clear: both;
|
|
180
|
-
|
|
181
|
-
// Single column debugging for mobile-first design!
|
|
182
|
-
@if $single-column == false {
|
|
183
|
-
@include respond-to('small') {
|
|
184
|
-
clear: none;
|
|
185
|
-
@include span-columns($main-content-cols);
|
|
186
|
-
}
|
|
187
|
-
@if nth($sidebars, 2) == 'left'{
|
|
188
|
-
float: none;
|
|
189
|
-
@include respond-to('small') {
|
|
190
|
-
@include omega;
|
|
191
|
-
margin-right: 0;
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
@else if nth($sidebars, 2) == 'both' {
|
|
195
|
-
float: none;
|
|
196
|
-
@include respond-to('small') {
|
|
197
|
-
float: right;
|
|
198
|
-
@include push(2, $from: 'right');
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
@else if nth($sidebars, 2) == 'right' {
|
|
202
|
-
float: none;
|
|
203
|
-
@include respond-to('small') {
|
|
204
|
-
float: left;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
@else if nth($sidebars, 2) == 'none' {
|
|
208
|
-
float: none;
|
|
209
|
-
@include respond-to('small') {
|
|
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
|
-
}
|
|
218
|
-
|
|
219
|
-
%aura-container {
|
|
220
|
-
@include container;
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
$modular-scale-loaded: false !default;
|
|
225
|
-
|
|
226
|
-
//////////////////////////////
|
|
227
|
-
// Aura Font Scale Font
|
|
228
|
-
//////////////////////////////
|
|
229
|
-
@mixin font-scale($scale) {
|
|
230
|
-
$ms: ms($scale, $body-font-size-em, $responsive-ratio);
|
|
231
|
-
font-size: $ms;
|
|
232
|
-
line-height: $ms + (1em - (.5 * $ms));
|
|
233
|
-
@if $modular-scale-loaded == false {
|
|
234
|
-
@warn 'the font-scale mixin requires modular-scale to be loaded.';
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
|
|
238
|
-
//////////////////////////////
|
|
239
|
-
// Aurora Respond-To
|
|
240
|
-
//////////////////////////////
|
|
241
|
-
@mixin respond-to($context) {
|
|
242
|
-
@if $font-scale and not $aura-breakpoints {
|
|
243
|
-
$aura-breakpoints: responsive-scale();
|
|
244
|
-
}
|
|
245
|
-
@else if not $font-scale and not $aura-breakpoints {
|
|
246
|
-
$aura-breakpoints: responsive-ratio();
|
|
247
|
-
}
|
|
248
|
-
$i: 1 !default;
|
|
249
|
-
@each $size in $sizes {
|
|
250
|
-
@if $context == $size {
|
|
251
|
-
$respond: nth($aura-breakpoints, $i);
|
|
252
|
-
@include media-query($respond) {
|
|
253
|
-
@content;
|
|
254
|
-
}
|
|
255
|
-
}
|
|
256
|
-
$i: $i + 1;
|
|
257
|
-
}
|
|
258
|
-
|
|
259
|
-
@if $breakpoints != false {
|
|
260
|
-
// Check to see if the 2nd item is a number. If it is, we've got a single query
|
|
261
|
-
@if type-of(nth($breakpoints, 2)) == 'number' {
|
|
262
|
-
// Check to see if the context matches the breakpoint namespace
|
|
263
|
-
@if $context == nth($breakpoints, 1) {
|
|
264
|
-
// Call Media Query Generator
|
|
265
|
-
@include media-query-gen($breakpoints) {
|
|
266
|
-
@content;
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
// Else, loop over all of them
|
|
271
|
-
@else {
|
|
272
|
-
// Loop over each breakpoint and check context
|
|
273
|
-
@each $bkpt in $breakpoints {
|
|
274
|
-
// If context is correct…
|
|
275
|
-
@if $context == nth($bkpt, 1) {
|
|
276
|
-
// Call the generator!
|
|
277
|
-
@include media-query-gen($bkpt) {
|
|
278
|
-
@content;
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
}
|
|
284
|
-
}
|
|
285
|
-
|
|
286
|
-
@mixin media-query-gen($bpt) {
|
|
287
|
-
// Get length of breakpoint variable, minus the namespace
|
|
288
|
-
$length: length($bpt);
|
|
289
|
-
// 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
|
|
290
|
-
$mq: false !default;
|
|
291
|
-
@for $i from 2 through $length {
|
|
292
|
-
// If it's the first item, override $mq
|
|
293
|
-
@if $i == 2 {
|
|
294
|
-
$mq: nth($bpt, $i);
|
|
295
|
-
}
|
|
296
|
-
// Else, join $mq
|
|
297
|
-
@else {
|
|
298
|
-
$mq: join($mq, nth($bpt, $i));
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
// Call Media Query mixin
|
|
302
|
-
@include media-query($mq) {
|
|
303
|
-
@content;
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
//////////////////////////////
|
|
308
|
-
// Generalized Media Query Mixin
|
|
309
|
-
//////////////////////////////
|
|
310
|
-
@mixin media-query($value, $operator: 'min-width', $query: 'screen') {
|
|
311
|
-
// If a list is passed in for value, break it into value, operator, and query
|
|
312
|
-
@if type-of($value) == 'list' {
|
|
313
|
-
$mq: $value;
|
|
314
|
-
|
|
315
|
-
@for $i from 1 through length($mq) {
|
|
316
|
-
@if $i == 1 {
|
|
317
|
-
$value: nth($mq, 1);
|
|
318
|
-
}
|
|
319
|
-
@else if $i == 2 {
|
|
320
|
-
$operator: nth($mq, 2);
|
|
321
|
-
}
|
|
322
|
-
@else if $i == 3 {
|
|
323
|
-
$query: nth($mq, 3);
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
|
|
328
|
-
@media #{$query} and (#{$operator}: #{$value}) {
|
|
329
|
-
@content;
|
|
330
|
-
}
|
|
331
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
//////////////////////////////
|
|
2
|
-
// User-Defined Variables for Aurora
|
|
3
|
-
//////////////////////////////
|
|
4
|
-
// Basic Options.
|
|
5
|
-
$body-font-size: 16px !default;
|
|
6
|
-
$total-columns: 12 !default;
|
|
7
|
-
$main-content-cols: 9 !default;
|
|
8
|
-
$font-scale: true !default;
|
|
9
|
-
$obj-scale: true !default;
|
|
10
|
-
$sidebars: 1, 'right' !default;
|
|
11
|
-
$single-column: true !default;
|
|
12
|
-
// Advanced Options
|
|
13
|
-
$gutter-to-col: 1, 4 !default;
|
|
14
|
-
$alphabet-count: 26 !default;
|
|
15
|
-
$measure-width: $alphabet-count* $fourth !default;
|
|
16
|
-
$lh-addition: .3em !default;
|
|
17
|
-
$responsive-ratio: false !default;
|
|
18
|
-
$breakpoints: false !default;
|
|
19
|
-
// Bad Options
|
|
20
|
-
$width: false !default;
|
|
21
|
-
// Optionally can set width for main grid which will override all other options.
|
|
22
|
-
|
|
23
|
-
//////////////////////////////
|
|
24
|
-
// Internal Variables for Aurora
|
|
25
|
-
//////////////////////////////
|
|
26
|
-
$measure: false !default;
|
|
27
|
-
$gutter-col-total: 5 !default;
|
|
28
|
-
$aura-breakpoints: false !default;
|
|
29
|
-
$body-font-size-em: false !default;
|
|
30
|
-
$body-font-size-px: false !default;
|
|
31
|
-
$body-font-size-percent: false !default;
|
|
32
|
-
$body-font-size-pt: false !default;
|
|
33
|
-
$width-em: false !default;
|
|
34
|
-
$modular-scale-loaded: false !default;
|
|
35
|
-
$sizes: 'full' 'large' 'medium' 'small';
|