themepile-abstractio 1.0.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/.gitignore +28 -0
- data/.rbenv-version +1 -0
- data/CONTRIBUTING.md +53 -0
- data/Gemfile +4 -0
- data/LICENSE +22 -0
- data/README.md +136 -0
- data/Rakefile +2 -0
- data/abstractio.gemspec +18 -0
- data/js/foundation/foundation.alerts.js +50 -0
- data/js/foundation/foundation.clearing.js +516 -0
- data/js/foundation/foundation.cookie.js +74 -0
- data/js/foundation/foundation.dropdown.js +159 -0
- data/js/foundation/foundation.forms.js +516 -0
- data/js/foundation/foundation.joyride.js +842 -0
- data/js/foundation/foundation.js +403 -0
- data/js/foundation/foundation.magellan.js +130 -0
- data/js/foundation/foundation.orbit.js +373 -0
- data/js/foundation/foundation.placeholder.js +159 -0
- data/js/foundation/foundation.reveal.js +276 -0
- data/js/foundation/foundation.section.js +409 -0
- data/js/foundation/foundation.tooltips.js +206 -0
- data/js/foundation/foundation.topbar.js +252 -0
- data/js/foundation/index.js +16 -0
- data/js/vendor/custom.modernizr.js +4 -0
- data/js/vendor/jquery.js +9597 -0
- data/js/vendor/zepto.js +1884 -0
- data/lib/abstractio.rb +17 -0
- data/lib/abstractio/engine.rb +20 -0
- data/lib/abstractio/generators/USAGE +15 -0
- data/lib/abstractio/generators/install_generator.rb +54 -0
- data/lib/abstractio/generators/templates/application.html.erb +46 -0
- data/lib/abstractio/generators/templates/application.html.haml +31 -0
- data/lib/abstractio/generators/templates/application.html.slim +28 -0
- data/lib/abstractio/version.rb +3 -0
- data/lib/themepile-abstractio.rb +17 -0
- data/scss/abstractio.scss +46 -0
- data/scss/abstractio/_variables.scss +1224 -0
- data/scss/abstractio/components/_alert-boxes.scss +107 -0
- data/scss/abstractio/components/_block-grid.scss +68 -0
- data/scss/abstractio/components/_breadcrumbs.scss +125 -0
- data/scss/abstractio/components/_button-groups.scss +89 -0
- data/scss/abstractio/components/_buttons.scss +227 -0
- data/scss/abstractio/components/_clearing.scss +224 -0
- data/scss/abstractio/components/_custom-forms.scss +263 -0
- data/scss/abstractio/components/_dropdown-buttons.scss +115 -0
- data/scss/abstractio/components/_dropdown.scss +150 -0
- data/scss/abstractio/components/_flex-video.scss +46 -0
- data/scss/abstractio/components/_forms.scss +362 -0
- data/scss/abstractio/components/_global.scss +280 -0
- data/scss/abstractio/components/_grid.scss +186 -0
- data/scss/abstractio/components/_inline-lists.scss +53 -0
- data/scss/abstractio/components/_joyride.scss +215 -0
- data/scss/abstractio/components/_keystrokes.scss +57 -0
- data/scss/abstractio/components/_labels.scss +85 -0
- data/scss/abstractio/components/_magellan.scss +23 -0
- data/scss/abstractio/components/_orbit.scss +213 -0
- data/scss/abstractio/components/_pagination.scss +100 -0
- data/scss/abstractio/components/_panels.scss +77 -0
- data/scss/abstractio/components/_pricing-tables.scss +131 -0
- data/scss/abstractio/components/_progress-bars.scss +71 -0
- data/scss/abstractio/components/_reveal.scss +132 -0
- data/scss/abstractio/components/_section.scss +318 -0
- data/scss/abstractio/components/_side-nav.scss +69 -0
- data/scss/abstractio/components/_split-buttons.scss +167 -0
- data/scss/abstractio/components/_sub-nav.scss +68 -0
- data/scss/abstractio/components/_switch.scss +251 -0
- data/scss/abstractio/components/_tables.scss +84 -0
- data/scss/abstractio/components/_thumbs.scss +48 -0
- data/scss/abstractio/components/_tooltips.scss +117 -0
- data/scss/abstractio/components/_top-bar.scss +495 -0
- data/scss/abstractio/components/_type.scss +426 -0
- data/scss/abstractio/components/_visibility.scss +322 -0
- data/scss/normalize.scss +402 -0
- data/templates/project/.gitignore +44 -0
- data/templates/project/MIT-LICENSE.txt +20 -0
- data/templates/project/config.rb +26 -0
- data/templates/project/humans.txt +8 -0
- data/templates/project/index.html +124 -0
- data/templates/project/manifest.rb +45 -0
- data/templates/project/robots.txt +4 -0
- data/templates/project/scss/app.scss +48 -0
- data/templates/upgrade/manifest.rb +34 -0
- metadata +153 -0
@@ -0,0 +1,280 @@
|
|
1
|
+
//
|
2
|
+
// Global Foundation Mixins
|
3
|
+
//
|
4
|
+
|
5
|
+
// We use this to control border radius.
|
6
|
+
@mixin radius($radius:$global-radius) {
|
7
|
+
@if $radius {
|
8
|
+
-webkit-border-radius: $radius;
|
9
|
+
border-radius: $radius;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
// We use this to create equal side border radius on elements.
|
14
|
+
@mixin side-radius($side, $radius) {
|
15
|
+
@if $side == left {
|
16
|
+
-moz-border-radius-bottomleft: $radius;
|
17
|
+
-moz-border-radius-topleft: $radius;
|
18
|
+
-webkit-border-bottom-left-radius: $radius;
|
19
|
+
-webkit-border-top-left-radius: $radius;
|
20
|
+
border-bottom-left-radius: $radius;
|
21
|
+
border-top-left-radius: $radius;
|
22
|
+
}
|
23
|
+
@else if $side == right {
|
24
|
+
-moz-border-radius-topright: $radius;
|
25
|
+
-moz-border-radius-bottomright: $radius;
|
26
|
+
-webkit-border-top-right-radius: $radius;
|
27
|
+
-webkit-border-bottom-right-radius: $radius;
|
28
|
+
border-top-right-radius: $radius;
|
29
|
+
border-bottom-right-radius: $radius;
|
30
|
+
}
|
31
|
+
@else if $side == top {
|
32
|
+
-moz-border-radius-topright: $radius;
|
33
|
+
-moz-border-radius-topleft: $radius;
|
34
|
+
-webkit-border-top-right-radius: $radius;
|
35
|
+
-webkit-border-top-left-radius: $radius;
|
36
|
+
border-top-right-radius: $radius;
|
37
|
+
border-top-left-radius: $radius;
|
38
|
+
}
|
39
|
+
@else if $side == bottom {
|
40
|
+
-moz-border-radius-bottomright: $radius;
|
41
|
+
-moz-border-radius-bottomleft: $radius;
|
42
|
+
-webkit-border-bottom-right-radius: $radius;
|
43
|
+
-webkit-border-bottom-left-radius: $radius;
|
44
|
+
border-bottom-right-radius: $radius;
|
45
|
+
border-bottom-left-radius: $radius;
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
// We can control whether or not we have inset shadows edges.
|
50
|
+
@mixin inset-shadow($active:true) {
|
51
|
+
-webkit-box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
52
|
+
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
53
|
+
|
54
|
+
@if $active { &:active {
|
55
|
+
-webkit-box-shadow: $shiny-edge-size $shiny-edge-active-color inset;
|
56
|
+
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
57
|
+
}
|
58
|
+
|
59
|
+
// We use this to add transitions to elements
|
60
|
+
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
61
|
+
-webkit-transition: $property $speed $ease;
|
62
|
+
-moz-transition: $property $speed $ease;
|
63
|
+
transition: $property $speed $ease;
|
64
|
+
}
|
65
|
+
|
66
|
+
// We use this to add box-sizing across browser prefixes
|
67
|
+
@mixin box-sizing($type:border-box) {
|
68
|
+
-moz-box-sizing: $type;
|
69
|
+
-webkit-box-sizing: $type;
|
70
|
+
box-sizing: $type;
|
71
|
+
}
|
72
|
+
|
73
|
+
// We use this to create equilateral triangles
|
74
|
+
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
75
|
+
content: "";
|
76
|
+
display: block;
|
77
|
+
width: 0;
|
78
|
+
height: 0;
|
79
|
+
border: inset $triangle-size;
|
80
|
+
@if ($triangle-direction == top) {
|
81
|
+
border-color: $triangle-color transparent transparent transparent;
|
82
|
+
border-top-style: solid;
|
83
|
+
}
|
84
|
+
@if ($triangle-direction == bottom) {
|
85
|
+
border-color: transparent transparent $triangle-color transparent;
|
86
|
+
border-bottom-style: solid;
|
87
|
+
}
|
88
|
+
@if ($triangle-direction == left) {
|
89
|
+
border-color: transparent transparent transparent $triangle-color;
|
90
|
+
border-left-style: solid;
|
91
|
+
}
|
92
|
+
@if ($triangle-direction == right) {
|
93
|
+
border-color: transparent $triangle-color transparent transparent;
|
94
|
+
border-right-style: solid;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
98
|
+
// We use this to do clear floats
|
99
|
+
@mixin clearfix() {
|
100
|
+
*zoom:1;
|
101
|
+
&:before, &:after { content: " "; display: table; }
|
102
|
+
&:after { clear: both; }
|
103
|
+
}
|
104
|
+
|
105
|
+
|
106
|
+
// We use this to add a glowing effect to block elements
|
107
|
+
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
|
108
|
+
-webkit-transition: -webkit-box-shadow $fade-time, border-color $fade-time ease-in-out;
|
109
|
+
-moz-transition: -moz-box-shadow $fade-time, border-color $fade-time ease-in-out;
|
110
|
+
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
|
111
|
+
|
112
|
+
&:#{$selector} {
|
113
|
+
-webkit-box-shadow: 0 0 5px $glowing-effect-color;
|
114
|
+
-moz-box-shadow: 0 0 5px $glowing-effect-color;
|
115
|
+
box-shadow: 0 0 5px $glowing-effect-color;
|
116
|
+
border-color: $glowing-effect-color;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
//
|
121
|
+
// Foundation Variables
|
122
|
+
//
|
123
|
+
|
124
|
+
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
125
|
+
// for compatibility with brower-based text zoom or user-set defaults.
|
126
|
+
|
127
|
+
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
|
128
|
+
// If you want your base font-size to be different and not have it effect the grid breakpoints,
|
129
|
+
// set $em-base to $base-font-size and make sure $base-font-size is a px value.
|
130
|
+
$base-font-size: 100% !default;
|
131
|
+
|
132
|
+
// $base-line-height is 24px while $base-font-size is 16px
|
133
|
+
$base-line-height: 150% !default;
|
134
|
+
|
135
|
+
// This is the default html and body font-size for the base em value.
|
136
|
+
$em-base: 16px !default;
|
137
|
+
|
138
|
+
// Working in ems is annoying. Think in pixels by using this handy function, emCalc(#px)
|
139
|
+
@function emCalc($pxWidth) {
|
140
|
+
@return $pxWidth / $em-base * 1em;
|
141
|
+
}
|
142
|
+
|
143
|
+
// Maybe you want to create rems and pixels
|
144
|
+
// @function remCalc($pxWidth) {
|
145
|
+
// @return $pxWidth / $em-base * 1rem;
|
146
|
+
// }
|
147
|
+
|
148
|
+
// We use these to control various global styles
|
149
|
+
$body-bg: #fff !default;
|
150
|
+
$body-font-color: #222 !default;
|
151
|
+
$body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
152
|
+
$body-font-weight: normal !default;
|
153
|
+
$body-font-style: normal !default;
|
154
|
+
|
155
|
+
// We use this to control font-smoothing
|
156
|
+
$font-smoothing: subpixel-antialiased !default;
|
157
|
+
|
158
|
+
// We use these to control text direction settings
|
159
|
+
$text-direction: ltr !default;
|
160
|
+
|
161
|
+
// NOTE: No need to change this conditional statement, $text-direction variable controls it all.
|
162
|
+
$default-float: left !default;
|
163
|
+
$opposite-direction: right !default;
|
164
|
+
@if $text-direction == ltr {
|
165
|
+
$default-float: left;
|
166
|
+
$opposite-direction: right;
|
167
|
+
} @else {
|
168
|
+
$default-float: right;
|
169
|
+
$opposite-direction: left;
|
170
|
+
}
|
171
|
+
|
172
|
+
// We use these as default colors throughout
|
173
|
+
$primary-color: #2ba6cb !default;
|
174
|
+
$secondary-color: #e9e9e9 !default;
|
175
|
+
$alert-color: #c60f13 !default;
|
176
|
+
$success-color: #5da423 !default;
|
177
|
+
|
178
|
+
// We use these to make sure border radius matches unless we want it different.
|
179
|
+
$global-radius: 3px !default;
|
180
|
+
$global-rounded: 1000px !default;
|
181
|
+
|
182
|
+
// We use these to control inset shadow shiny edges and depressions.
|
183
|
+
$shiny-edge-size: 0 1px 0 !default;
|
184
|
+
$shiny-edge-color: rgba(#fff, .5) !default;
|
185
|
+
$shiny-edge-active-color: rgba(#000, .2) !default;
|
186
|
+
|
187
|
+
// We use this to control whether or not CSS classes come through in the gem files.
|
188
|
+
$include-html-classes: true !default;
|
189
|
+
$include-print-styles: true !default;
|
190
|
+
$include-html-global-classes: $include-html-classes !default;
|
191
|
+
|
192
|
+
// Media Queries
|
193
|
+
$small-screen: 768px !default;
|
194
|
+
$medium-screen: 1280px !default;
|
195
|
+
$large-screen: 1440px !default;
|
196
|
+
|
197
|
+
$screen: "only screen" !default;
|
198
|
+
$small: "only screen and (min-width: #{$small-screen})" !default;
|
199
|
+
$medium: "only screen and (min-width:#{$medium-screen})" !default;
|
200
|
+
$large: "only screen and (min-width:#{$large-screen})" !default;
|
201
|
+
$landscape: "only screen and (orientation: landscape)" !default;
|
202
|
+
$portrait: "only screen and (orientation: portrait)" !default;
|
203
|
+
|
204
|
+
@if $include-html-global-classes {
|
205
|
+
|
206
|
+
// Set box-sizing globally to handle padding and border widths
|
207
|
+
*,
|
208
|
+
*:before,
|
209
|
+
*:after {
|
210
|
+
@include box-sizing(border-box);
|
211
|
+
}
|
212
|
+
|
213
|
+
html,
|
214
|
+
body { font-size: $base-font-size; }
|
215
|
+
|
216
|
+
// Default body styles
|
217
|
+
body {
|
218
|
+
background: $body-bg;
|
219
|
+
color: $body-font-color;
|
220
|
+
padding: 0;
|
221
|
+
margin: 0;
|
222
|
+
font-family: $body-font-family;
|
223
|
+
font-weight: $body-font-weight;
|
224
|
+
font-style: $body-font-style;
|
225
|
+
line-height: 1; // Set to $base-line-height to take on browser default of 150%
|
226
|
+
position: relative;
|
227
|
+
}
|
228
|
+
|
229
|
+
// Override outline from normalize, we don't like it
|
230
|
+
a:focus { outline: none; }
|
231
|
+
|
232
|
+
// Grid Defaults to get images and embeds to work properly
|
233
|
+
img,
|
234
|
+
object,
|
235
|
+
embed { max-width: 100%; height: auto; }
|
236
|
+
|
237
|
+
object,
|
238
|
+
embed { height: 100%; }
|
239
|
+
img { -ms-interpolation-mode: bicubic; }
|
240
|
+
|
241
|
+
#map_canvas,
|
242
|
+
.map_canvas {
|
243
|
+
img,
|
244
|
+
embed,
|
245
|
+
object { max-width: none !important;
|
246
|
+
}
|
247
|
+
}
|
248
|
+
|
249
|
+
// Miscellaneous useful HTML classes
|
250
|
+
.left { float: left !important; }
|
251
|
+
.right { float: right !important; }
|
252
|
+
.text-left { text-align: left !important; }
|
253
|
+
.text-right { text-align: right !important; }
|
254
|
+
.text-center { text-align: center !important; }
|
255
|
+
.text-justify { text-align: justify !important; }
|
256
|
+
.hide { display: none; }
|
257
|
+
|
258
|
+
// Font smoothing
|
259
|
+
// Antialiased font smoothing works best for light text on a dark background.
|
260
|
+
// Apply to single elements instead of globally to body.
|
261
|
+
// Note this only applies to webkit-based desktop browsers on the Mac.
|
262
|
+
.antialiased { -webkit-font-smoothing: antialiased; }
|
263
|
+
|
264
|
+
// Get rid of gap under images by making them display: inline-block; by default
|
265
|
+
img {
|
266
|
+
display: inline-block;
|
267
|
+
vertical-align: middle;
|
268
|
+
}
|
269
|
+
|
270
|
+
//
|
271
|
+
// Global resets for forms
|
272
|
+
//
|
273
|
+
|
274
|
+
// Make sure textarea takes on height automatically
|
275
|
+
textarea { height: auto; min-height: 50px; }
|
276
|
+
|
277
|
+
// Make select elements 100% width by default
|
278
|
+
select { width: 100%; }
|
279
|
+
|
280
|
+
}
|
@@ -0,0 +1,186 @@
|
|
1
|
+
//
|
2
|
+
// Grid Variables
|
3
|
+
//
|
4
|
+
$include-html-grid-classes: $include-html-classes !default;
|
5
|
+
|
6
|
+
$row-width: emCalc(1000px) !default;
|
7
|
+
$column-gutter: emCalc(30px) !default;
|
8
|
+
$total-columns: 12 !default;
|
9
|
+
|
10
|
+
//
|
11
|
+
// Grid Function
|
12
|
+
//
|
13
|
+
|
14
|
+
@function gridCalc($colNumber, $totalColumns) {
|
15
|
+
@return percentage(($colNumber / $totalColumns));
|
16
|
+
}
|
17
|
+
|
18
|
+
//
|
19
|
+
// Grid Mixins
|
20
|
+
//
|
21
|
+
|
22
|
+
// For creating container, nested, and collapsed rows.
|
23
|
+
@mixin grid-row($behavior: false) {
|
24
|
+
|
25
|
+
// use @include grid-row(nest); to include a nested row
|
26
|
+
@if $behavior == nest {
|
27
|
+
width: auto;
|
28
|
+
margin-#{$default-float}: -($column-gutter/2);
|
29
|
+
margin-#{$opposite-direction}: -($column-gutter/2);
|
30
|
+
margin-top: 0;
|
31
|
+
margin-bottom: 0;
|
32
|
+
max-width: none;
|
33
|
+
}
|
34
|
+
|
35
|
+
// use @include grid-row(collapse); to collapsed a container row margins
|
36
|
+
@else if $behavior == collapse {
|
37
|
+
width: 100%;
|
38
|
+
margin: 0;
|
39
|
+
max-width: $row-width;
|
40
|
+
}
|
41
|
+
|
42
|
+
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
43
|
+
@else if $behavior == nest-collapse {
|
44
|
+
width: auto;
|
45
|
+
margin: 0;
|
46
|
+
max-width: none;
|
47
|
+
}
|
48
|
+
|
49
|
+
// use @include grid-row; to use a container row
|
50
|
+
@else {
|
51
|
+
width: 100%;
|
52
|
+
margin-#{$default-float}: auto;
|
53
|
+
margin-#{$opposite-direction}: auto;
|
54
|
+
margin-top: 0;
|
55
|
+
margin-bottom: 0;
|
56
|
+
max-width: $row-width;
|
57
|
+
}
|
58
|
+
|
59
|
+
// Clearfix for all rows
|
60
|
+
@include clearfix();
|
61
|
+
|
62
|
+
}
|
63
|
+
|
64
|
+
|
65
|
+
// For creating columns - @include these inside a media query to control small vs. large grid layouts
|
66
|
+
@mixin grid-column($columns:false, $last-column:false, $center:false, $offset:false, $push:false, $pull:false, $collapse:false, $float:true) {
|
67
|
+
|
68
|
+
position: relative;
|
69
|
+
|
70
|
+
// If collapsed, get rid of gutter padding
|
71
|
+
@if $collapse {
|
72
|
+
padding-left: 0;
|
73
|
+
padding-right: 0;
|
74
|
+
}
|
75
|
+
|
76
|
+
// Gutter padding whenever a column isn't set to collapse
|
77
|
+
// (use $collapse:null to do nothing)
|
78
|
+
@else if $collapse == false {
|
79
|
+
padding-left: $column-gutter / 2;
|
80
|
+
padding-right: $column-gutter / 2;
|
81
|
+
}
|
82
|
+
|
83
|
+
// If a column number is given, calculate width
|
84
|
+
@if $columns {
|
85
|
+
width: gridCalc($columns, $total-columns);
|
86
|
+
|
87
|
+
// If last column, float naturally instead of to the right
|
88
|
+
@if $last-column { float: $opposite-direction; }
|
89
|
+
}
|
90
|
+
|
91
|
+
// If offset, calculate appropriate margins
|
92
|
+
@if $offset { margin-#{$default-float}: gridCalc($offset, $total-columns); }
|
93
|
+
|
94
|
+
// Source Ordering, adds left/right depending on which you use.
|
95
|
+
@if $push { #{$default-float}: gridCalc($push, $total-columns); #{$opposite-direction}: auto; }
|
96
|
+
@if $pull { #{$opposite-direction}: gridCalc($pull, $total-columns); #{$default-float}: auto; }
|
97
|
+
|
98
|
+
// If centered, get rid of float and add appropriate margins
|
99
|
+
@if $center {
|
100
|
+
margin-#{$default-float}: auto;
|
101
|
+
margin-#{$opposite-direction}: auto;
|
102
|
+
float: none !important;
|
103
|
+
}
|
104
|
+
|
105
|
+
@if $float {
|
106
|
+
@if $float == left or $float == true { float: $default-float; }
|
107
|
+
@else if $float == right { float: $opposite-direction; }
|
108
|
+
@else { float: none; }
|
109
|
+
}
|
110
|
+
|
111
|
+
}
|
112
|
+
|
113
|
+
|
114
|
+
@if $include-html-grid-classes != false {
|
115
|
+
/* Grid HTML Classes */
|
116
|
+
.row {
|
117
|
+
@include grid-row;
|
118
|
+
|
119
|
+
&.collapse {
|
120
|
+
.column,
|
121
|
+
.columns { @include grid-column($collapse:true); }
|
122
|
+
}
|
123
|
+
|
124
|
+
.row { @include grid-row($behavior:nest);
|
125
|
+
&.collapse { @include grid-row($behavior:nest-collapse); }
|
126
|
+
}
|
127
|
+
}
|
128
|
+
|
129
|
+
.column,
|
130
|
+
.columns { @include grid-column($columns:$total-columns); }
|
131
|
+
|
132
|
+
@media only screen {
|
133
|
+
|
134
|
+
.column,
|
135
|
+
.columns { @include grid-column($columns:false); }
|
136
|
+
|
137
|
+
@for $i from 1 through $total-columns {
|
138
|
+
.small#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
139
|
+
}
|
140
|
+
|
141
|
+
@for $i from 1 through $total-columns - 2 {
|
142
|
+
.small-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
143
|
+
}
|
144
|
+
|
145
|
+
[class*="column"] + [class*="column"]:last-child { float: $opposite-direction; }
|
146
|
+
[class*="column"] + [class*="column"].end { float: $default-float; }
|
147
|
+
|
148
|
+
.column.small-centered,
|
149
|
+
.columns.small-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
150
|
+
}
|
151
|
+
|
152
|
+
/* Styles for screens that are atleast 768px; */
|
153
|
+
@media #{$small} {
|
154
|
+
|
155
|
+
@for $i from 1 through $total-columns {
|
156
|
+
.large#{-$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
157
|
+
}
|
158
|
+
|
159
|
+
@for $i from 1 through $total-columns - 1 {
|
160
|
+
.row .large-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
161
|
+
}
|
162
|
+
|
163
|
+
@for $i from 1 through $total-columns - 1 {
|
164
|
+
.push#{-$i} { @include grid-column($push:$i, $collapse:null, $float:false); }
|
165
|
+
.pull#{-$i} { @include grid-column($pull:$i, $collapse:null, $float:false); }
|
166
|
+
}
|
167
|
+
|
168
|
+
.column.large-centered,
|
169
|
+
.columns.large-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
170
|
+
|
171
|
+
.column.large-uncentered,
|
172
|
+
.columns.large-uncentered {
|
173
|
+
margin-#{$default-float}: 0;
|
174
|
+
margin-#{$opposite-direction}: 0;
|
175
|
+
float: $default-float !important;
|
176
|
+
}
|
177
|
+
|
178
|
+
.column.large-uncentered.opposite,
|
179
|
+
.columns.large-uncentered.opposite {
|
180
|
+
float: $opposite-direction !important;
|
181
|
+
}
|
182
|
+
|
183
|
+
|
184
|
+
}
|
185
|
+
|
186
|
+
}
|