pusher-chameleon 1.0.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/.ruby-version +1 -0
- data/Gemfile +3 -0
- data/Gemfile.lock +23 -0
- data/README.md +17 -0
- data/docs/.gitignore +4 -0
- data/docs/Gemfile +10 -0
- data/docs/Gemfile.lock +72 -0
- data/docs/README.md +15 -0
- data/docs/Rakefile +40 -0
- data/docs/_config.production.yml +18 -0
- data/docs/_config.yml +39 -0
- data/docs/_includes/footer.html +38 -0
- data/docs/_includes/head.html +15 -0
- data/docs/_includes/header.html +27 -0
- data/docs/_includes/icon-github.html +1 -0
- data/docs/_includes/icon-github.svg +3 -0
- data/docs/_includes/logo-pusher.svg +4 -0
- data/docs/_includes/sidebar.html +33 -0
- data/docs/_layouts/default.html +53 -0
- data/docs/_layouts/page.html +14 -0
- data/docs/_layouts/post.html +15 -0
- data/docs/_plugins/chameleon_version.rb +11 -0
- data/docs/_plugins/copy_images_directory.rb +22 -0
- data/docs/_plugins/ext.rb +2 -0
- data/docs/_posts/2016-03-16-getting-started.md +28 -0
- data/docs/_posts/2016-03-16-introduction.md +24 -0
- data/docs/_posts/2016-03-17-buttons.md +61 -0
- data/docs/_posts/2016-03-17-colors.md +139 -0
- data/docs/_posts/2016-03-17-flex.md +24 -0
- data/docs/_posts/2016-03-17-forms.md +66 -0
- data/docs/_posts/2016-03-17-visibility.md +28 -0
- data/docs/_posts/2016-04-04-typography.md +111 -0
- data/docs/_posts/2016-04-05-syntax-highlighting.md +28 -0
- data/docs/_posts/2016-05-08-alerts.md +50 -0
- data/docs/_posts/2016-05-12-labels.md +22 -0
- data/docs/_posts/2016-05-13-tooltips.md +33 -0
- data/docs/_sass/_base.scss +36 -0
- data/docs/_sass/_chameleon_imports.scss +20 -0
- data/docs/_sass/_layout.scss +136 -0
- data/docs/_sass/_typography.scss +41 -0
- data/docs/_sass/layout/_aside.scss +151 -0
- data/docs/about.md +15 -0
- data/docs/autoprefixer.yml +4 -0
- data/docs/css/main.scss +11 -0
- data/docs/feed.xml +30 -0
- data/docs/index.html +23 -0
- data/images/ui_icons/alert_beta.svg +3 -0
- data/images/ui_icons/alert_info.svg +3 -0
- data/images/ui_icons/alert_tick.svg +6 -0
- data/images/ui_icons/alert_warning.svg +6 -0
- data/images/ui_icons/chevron_down.svg +3 -0
- data/images/ui_icons/github--active.svg +6 -0
- data/images/ui_icons/github.svg +6 -0
- data/images/ui_icons/google--active.svg +6 -0
- data/images/ui_icons/google.svg +10 -0
- data/images/ui_icons/plus.svg +3 -0
- data/javascripts/chameleon/code_box.js +14 -0
- data/javascripts/chameleon/pusher_featurette.js +52 -0
- data/javascripts/chameleon/pusher_text_cycler.js +60 -0
- data/lib/pusher-chameleon.rb +71 -0
- data/lib/pusher-chameleon/engine.rb +13 -0
- data/lib/pusher-chameleon/version.rb +8 -0
- data/package.json +24 -0
- data/pusher-chameleon.gemspec +21 -0
- data/stylesheets/.gitkeep +0 -0
- data/stylesheets/_base.scss +400 -0
- data/stylesheets/_global.scss +96 -0
- data/stylesheets/chameleon.scss +30 -0
- data/stylesheets/components/_alert.scss +102 -0
- data/stylesheets/components/_code_box.scss +84 -0
- data/stylesheets/components/_flex_aligners.scss +38 -0
- data/stylesheets/components/_label.scss +41 -0
- data/stylesheets/components/_signpost.scss +150 -0
- data/stylesheets/components/_spacers.scss +11 -0
- data/stylesheets/components/_statistic.scss +62 -0
- data/stylesheets/components/_tooltip.scss +65 -0
- data/stylesheets/components/_visibility.scss +117 -0
- data/stylesheets/forms/_base.scss +47 -0
- data/stylesheets/forms/_buttons.scss +242 -0
- data/stylesheets/forms/_checkbox.scss +31 -0
- data/stylesheets/forms/_field.scss +11 -0
- data/stylesheets/forms/_fieldset.scss +18 -0
- data/stylesheets/forms/_forms.scss +21 -0
- data/stylesheets/forms/_input.scss +14 -0
- data/stylesheets/forms/_range.scss +110 -0
- data/stylesheets/forms/_select.scss +15 -0
- data/stylesheets/forms/_textarea.scss +11 -0
- data/stylesheets/grid/_classes.scss +152 -0
- data/stylesheets/grid/_column.scss +126 -0
- data/stylesheets/grid/_flex-grid.scss +268 -0
- data/stylesheets/grid/_grid.scss +60 -0
- data/stylesheets/grid/_gutter.scss +34 -0
- data/stylesheets/grid/_layout.scss +51 -0
- data/stylesheets/grid/_position.scss +73 -0
- data/stylesheets/grid/_row.scss +95 -0
- data/stylesheets/grid/_size.scss +24 -0
- data/stylesheets/typography/_base.scss +60 -0
- data/stylesheets/typography/_helpers.scss +66 -0
- data/stylesheets/typography/_import.scss +54 -0
- data/stylesheets/typography/_syntax_highlighting.scss +168 -0
- data/stylesheets/typography/_syntax_highlighting_dark.scss +73 -0
- data/stylesheets/typography/_syntax_highlighting_light.scss +73 -0
- data/stylesheets/typography/_titles.scss +69 -0
- data/stylesheets/typography/_typography.scss +12 -0
- data/stylesheets/util/_breakpoint.scss +273 -0
- data/stylesheets/util/_color.scss +42 -0
- data/stylesheets/util/_flex.scss +68 -0
- data/stylesheets/util/_mixins.scss +233 -0
- data/stylesheets/util/_selector.scss +40 -0
- data/stylesheets/util/_unit.scss +90 -0
- data/stylesheets/util/_url_helper.scss +30 -0
- data/stylesheets/util/_util.scss +13 -0
- data/stylesheets/util/_value.scss +107 -0
- metadata +199 -0
@@ -0,0 +1,268 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group flex-grid
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Creates a container for a flex grid row.
|
10
|
+
///
|
11
|
+
/// @param {Keyword|List} $behavior [null]
|
12
|
+
/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.
|
13
|
+
/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
|
14
|
+
/// @param {Number} $columns [null] - Number of columns to use for this row. If set to `null` (the default), the global column count will be used.
|
15
|
+
/// @param {Boolean} $base [true] - Set to `false` to prevent basic styles from being output. Useful if you're calling this mixin on the same element twice, as it prevents duplicate CSS output.
|
16
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
|
17
|
+
@mixin flex-grid-row(
|
18
|
+
$behavior: null,
|
19
|
+
$width: $grid-row-width,
|
20
|
+
$columns: null,
|
21
|
+
$base: true,
|
22
|
+
$gutter: $grid-column-gutter
|
23
|
+
) {
|
24
|
+
$margin: auto;
|
25
|
+
|
26
|
+
@if index($behavior, nest) != null {
|
27
|
+
@include grid-row-nest($gutter);
|
28
|
+
|
29
|
+
@if index($behavior, collapse) != null {
|
30
|
+
margin-left: 0;
|
31
|
+
margin-right: 0;
|
32
|
+
}
|
33
|
+
}
|
34
|
+
@else {
|
35
|
+
max-width: $width;
|
36
|
+
margin-left: auto;
|
37
|
+
margin-right: auto;
|
38
|
+
}
|
39
|
+
|
40
|
+
@if $base {
|
41
|
+
display: flex;
|
42
|
+
flex-flow: row wrap;
|
43
|
+
}
|
44
|
+
|
45
|
+
@if $columns != null {
|
46
|
+
@include grid-context($columns, $base) {
|
47
|
+
@content;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
51
|
+
|
52
|
+
/// Calculates the `flex` property for a flex grid column. It accepts all of the same values as the basic `grid-column()` function, along with two extras:
|
53
|
+
/// - `null` (the default) will make the column expand to fill space.
|
54
|
+
/// - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
|
55
|
+
///
|
56
|
+
/// @param {Mixed} $columns [null] - Width of the column.
|
57
|
+
@function flex-grid-column($columns: null) {
|
58
|
+
// scss-lint:disable ZeroUnit
|
59
|
+
$flex: 1 1 0px;
|
60
|
+
|
61
|
+
@if $columns == shrink {
|
62
|
+
$flex: 0 0 auto;
|
63
|
+
}
|
64
|
+
@else if $columns != null {
|
65
|
+
$flex: 0 0 grid-column($columns);
|
66
|
+
}
|
67
|
+
|
68
|
+
@return $flex;
|
69
|
+
}
|
70
|
+
|
71
|
+
/// Creates a column for a flex grid. By default, the column will stretch to the full width of its container, but this can be overridden with sizing classes, or by using the `unstack` class on the parent flex row.
|
72
|
+
///
|
73
|
+
/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
|
74
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
|
75
|
+
@mixin flex-grid-column(
|
76
|
+
$columns: null,
|
77
|
+
$gutter: $grid-column-gutter
|
78
|
+
) {
|
79
|
+
// Base properties
|
80
|
+
flex: flex-grid-column($columns);
|
81
|
+
|
82
|
+
// Gutters
|
83
|
+
@if type-of($gutter) == 'map' {
|
84
|
+
@each $breakpoint, $value in $gutter {
|
85
|
+
$padding: rem-calc($value) / 2;
|
86
|
+
|
87
|
+
@include breakpoint($breakpoint) {
|
88
|
+
padding-left: $padding;
|
89
|
+
padding-right: $padding;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
}
|
93
|
+
@else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {
|
94
|
+
$padding: rem-calc($gutter) / 2;
|
95
|
+
padding-left: $padding;
|
96
|
+
padding-right: $padding;
|
97
|
+
}
|
98
|
+
|
99
|
+
// max-width fixes IE 10/11 not respecting the flex-basis property
|
100
|
+
@if $columns != null and $columns != shrink {
|
101
|
+
max-width: grid-column($columns);
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
/// Creates a block grid for a flex grid row.
|
106
|
+
///
|
107
|
+
/// @param {Number} $n - Number of columns to display on each row.
|
108
|
+
/// @param {String} $selector - Selector to use to target columns within the row.
|
109
|
+
@mixin flex-grid-layout(
|
110
|
+
$n,
|
111
|
+
$selector: '.column'
|
112
|
+
) {
|
113
|
+
flex-wrap: wrap;
|
114
|
+
|
115
|
+
> #{$selector} {
|
116
|
+
$pct: percentage(1/$n);
|
117
|
+
|
118
|
+
flex: 0 0 $pct;
|
119
|
+
max-width: $pct;
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
/// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
|
124
|
+
/// @param {Number} $order [0] - Order number to apply.
|
125
|
+
@mixin flex-grid-order($order: 0) {
|
126
|
+
@warn 'This mixin is being replaced by flex-order(). flex-grid-order() will be removed in Foundation 6.3.';
|
127
|
+
@include flex-order($order);
|
128
|
+
}
|
129
|
+
|
130
|
+
/// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
|
131
|
+
///
|
132
|
+
/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.
|
133
|
+
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
|
134
|
+
@mixin flex-grid-row-align($x: null, $y: null) {
|
135
|
+
@warn 'This mixin is being replaced by flex-align(). flex-grid-row-align() will be removed in Foundation 6.3.';
|
136
|
+
@include flex-align($x, $y);
|
137
|
+
}
|
138
|
+
|
139
|
+
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
|
140
|
+
///
|
141
|
+
/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.
|
142
|
+
@mixin flex-grid-column-align($y: null) {
|
143
|
+
@warn 'This mixin is being replaced by flex-align-self(). flex-grid-column-align() will be removed in Foundation 6.3.';
|
144
|
+
@include flex-align-self($y);
|
145
|
+
}
|
146
|
+
|
147
|
+
@mixin foundation-flex-grid {
|
148
|
+
// Row
|
149
|
+
.row {
|
150
|
+
@include flex-grid-row;
|
151
|
+
|
152
|
+
// Nesting behavior
|
153
|
+
& & {
|
154
|
+
@include flex-grid-row(nest, $base: false);
|
155
|
+
}
|
156
|
+
|
157
|
+
// Expanded row
|
158
|
+
&.expanded {
|
159
|
+
max-width: none;
|
160
|
+
}
|
161
|
+
|
162
|
+
&.collapse {
|
163
|
+
> .column { @include grid-col-collapse; }
|
164
|
+
}
|
165
|
+
}
|
166
|
+
|
167
|
+
// Column
|
168
|
+
.column {
|
169
|
+
@include flex-grid-column;
|
170
|
+
}
|
171
|
+
|
172
|
+
// Column row
|
173
|
+
// The double .row class is needed to bump up the specificity
|
174
|
+
.column.row.row {
|
175
|
+
float: none;
|
176
|
+
|
177
|
+
// To properly nest a column row, padding and margin is removed
|
178
|
+
.row & {
|
179
|
+
padding-left: 0;
|
180
|
+
padding-right: 0;
|
181
|
+
margin-left: 0;
|
182
|
+
margin-right: 0;
|
183
|
+
}
|
184
|
+
}
|
185
|
+
|
186
|
+
@include -zf-each-breakpoint {
|
187
|
+
@for $i from 1 through $grid-column-count {
|
188
|
+
// Sizing (percentage)
|
189
|
+
.#{$-zf-size}-#{$i} {
|
190
|
+
flex: flex-grid-column($i);
|
191
|
+
max-width: grid-column($i);
|
192
|
+
}
|
193
|
+
|
194
|
+
// Offsets
|
195
|
+
$o: $i - 1;
|
196
|
+
|
197
|
+
.#{$-zf-size}-offset-#{$o} {
|
198
|
+
@include grid-column-offset($o);
|
199
|
+
}
|
200
|
+
}
|
201
|
+
|
202
|
+
// Source ordering
|
203
|
+
@for $i from 1 through 6 {
|
204
|
+
.#{$-zf-size}-order-#{$i} {
|
205
|
+
@include flex-order($i);
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
209
|
+
// Block grid
|
210
|
+
@for $i from 1 through $block-grid-max {
|
211
|
+
.#{$-zf-size}-up-#{$i} {
|
212
|
+
@include flex-grid-layout($i);
|
213
|
+
}
|
214
|
+
}
|
215
|
+
|
216
|
+
@if $-zf-size != small {
|
217
|
+
// Sizing (expand)
|
218
|
+
@include breakpoint($-zf-size) {
|
219
|
+
.#{$-zf-size}-expand {
|
220
|
+
flex: flex-grid-column();
|
221
|
+
}
|
222
|
+
}
|
223
|
+
|
224
|
+
// Auto-stacking/unstacking
|
225
|
+
@at-root (without: media) {
|
226
|
+
.row.#{$-zf-size}-unstack {
|
227
|
+
.column {
|
228
|
+
flex: flex-grid-column(100%);
|
229
|
+
|
230
|
+
@include breakpoint($-zf-size) {
|
231
|
+
flex: flex-grid-column();
|
232
|
+
}
|
233
|
+
}
|
234
|
+
}
|
235
|
+
}
|
236
|
+
}
|
237
|
+
|
238
|
+
// Responsive collapsing
|
239
|
+
.#{$-zf-size}-collapse {
|
240
|
+
> .column { @include grid-col-collapse; }
|
241
|
+
}
|
242
|
+
|
243
|
+
.#{$-zf-size}-uncollapse {
|
244
|
+
$gutter: -zf-get-bp-val($grid-column-gutter, $-zf-size);
|
245
|
+
|
246
|
+
> .column { @include grid-col-uncollapse($gutter); }
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
// Sizing (shrink)
|
251
|
+
.shrink {
|
252
|
+
flex: flex-grid-column(shrink);
|
253
|
+
max-width: 100%;
|
254
|
+
}
|
255
|
+
|
256
|
+
// Vertical alignment using align-items and align-self
|
257
|
+
// Remove these in 6.3
|
258
|
+
@each $vdir, $prop in $-zf-flex-align {
|
259
|
+
.column.align-#{$vdir} {
|
260
|
+
@include flex-align-self($vdir);
|
261
|
+
}
|
262
|
+
}
|
263
|
+
|
264
|
+
.columns {
|
265
|
+
// scss-lint:disable PlaceholderInExtend
|
266
|
+
@extend .column;
|
267
|
+
}
|
268
|
+
}
|
@@ -0,0 +1,60 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group grid
|
7
|
+
////
|
8
|
+
|
9
|
+
/// The maximum width of a row.
|
10
|
+
/// @type Number
|
11
|
+
$grid-row-width: rem-calc($global-width) !default;
|
12
|
+
|
13
|
+
/// The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output.
|
14
|
+
/// @type Number
|
15
|
+
$grid-column-count: 12 !default;
|
16
|
+
|
17
|
+
/// The amount of space between columns at different screen sizes. To use just one size, set the variable to a number instead of a map.
|
18
|
+
/// @type Map | Length
|
19
|
+
/// @since 6.1.0
|
20
|
+
$grid-column-gutter: (
|
21
|
+
small: 20px,
|
22
|
+
medium: 30px,
|
23
|
+
) !default;
|
24
|
+
|
25
|
+
/// If `true`, the last column in a row will align to the opposite edge of the row.
|
26
|
+
/// @type Boolean
|
27
|
+
$grid-column-align-edge: true !default;
|
28
|
+
|
29
|
+
/// The highest number of `.x-up` classes available when using the block grid CSS.
|
30
|
+
/// @type Number
|
31
|
+
$block-grid-max: 8 !default;
|
32
|
+
|
33
|
+
// Internal value to store the end column float direction
|
34
|
+
$-zf-end-float: if($grid-column-align-edge, $global-right, $global-left);
|
35
|
+
|
36
|
+
// The last piece to transition the responsive gutter feature
|
37
|
+
// Remove this in 6.3
|
38
|
+
$grid-column-responsive-gutter: null !default;
|
39
|
+
@if $grid-column-responsive-gutter {
|
40
|
+
// scss-lint:disable DebugStatement
|
41
|
+
@warn 'Rename $grid-column-responsive-gutter to $grid-column-gutter to remove this warning.';
|
42
|
+
$grid-column-gutter: $grid-column-responsive-gutter;
|
43
|
+
}
|
44
|
+
|
45
|
+
// If a single value is passed as a gutter, convert it to a map so the code knows what to do with it
|
46
|
+
@if type-of($grid-column-gutter) == 'number' {
|
47
|
+
$grid-column-gutter: (
|
48
|
+
small: $grid-column-gutter,
|
49
|
+
);
|
50
|
+
}
|
51
|
+
|
52
|
+
@import 'row';
|
53
|
+
@import 'column';
|
54
|
+
@import 'size';
|
55
|
+
@import 'position';
|
56
|
+
@import 'gutter';
|
57
|
+
@import 'classes';
|
58
|
+
@import 'layout';
|
59
|
+
|
60
|
+
@import 'flex-grid';
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group grid
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.
|
10
|
+
@mixin grid-column-collapse {
|
11
|
+
padding-left: 0;
|
12
|
+
padding-right: 0;
|
13
|
+
}
|
14
|
+
|
15
|
+
/// Un-collapse the gutters on a column by re-adding the padding.
|
16
|
+
///
|
17
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
|
18
|
+
@mixin grid-column-uncollapse($gutter: $grid-column-gutter) {
|
19
|
+
$gutter: rem-calc($gutter) / 2;
|
20
|
+
padding-left: $gutter;
|
21
|
+
padding-right: $gutter;
|
22
|
+
}
|
23
|
+
|
24
|
+
/// Shorthand for `grid-column-collapse()`.
|
25
|
+
/// @alias grid-column-collapse
|
26
|
+
@mixin grid-col-collapse {
|
27
|
+
@include grid-column-collapse;
|
28
|
+
}
|
29
|
+
|
30
|
+
/// Shorthand for `grid-column-uncollapse()`.
|
31
|
+
/// @alias grid-column-uncollapse
|
32
|
+
@mixin grid-col-uncollapse($gutter: $grid-column-gutter) {
|
33
|
+
@include grid-column-uncollapse($gutter);
|
34
|
+
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group grid
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Sizes child elements so that `$n` number of items appear on each row.
|
10
|
+
///
|
11
|
+
/// @param {Number} $n - Number of elements to display per row.
|
12
|
+
/// @param {String} $selector ['.column'] - Selector(s) to use for child elements.
|
13
|
+
@mixin grid-layout(
|
14
|
+
$n,
|
15
|
+
$selector: '.column'
|
16
|
+
) {
|
17
|
+
& > #{$selector} {
|
18
|
+
width: percentage(1/$n);
|
19
|
+
float: $global-left;
|
20
|
+
|
21
|
+
&:nth-of-type(1n) {
|
22
|
+
clear: none;
|
23
|
+
}
|
24
|
+
|
25
|
+
&:nth-of-type(#{$n}n+1) {
|
26
|
+
clear: both;
|
27
|
+
}
|
28
|
+
|
29
|
+
&:last-child {
|
30
|
+
float: left;
|
31
|
+
}
|
32
|
+
}
|
33
|
+
}
|
34
|
+
|
35
|
+
/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.
|
36
|
+
///
|
37
|
+
/// @param {Number} $n - Number of items that appear in each row.
|
38
|
+
@mixin grid-layout-center-last($n) {
|
39
|
+
@for $i from 1 to $n {
|
40
|
+
@if $i == 1 {
|
41
|
+
&:nth-child(#{$n}n+1):last-child {
|
42
|
+
margin-left: (100 - 100/$n * $i) / 2 * 1%;
|
43
|
+
}
|
44
|
+
}
|
45
|
+
@else {
|
46
|
+
&:nth-child(#{$n}n+1):nth-last-child(#{$i}) {
|
47
|
+
margin-left: (100 - 100/$n * $i) / 2 * 1%;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
@@ -0,0 +1,73 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group grid
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Reposition a column.
|
10
|
+
///
|
11
|
+
/// @param {Number} $position - Direction and amount to move. The column will move equal to the width of the column count specified. A positive number will push the column to the right, while a negative number will pull it to the left.
|
12
|
+
@mixin grid-column-position($position) {
|
13
|
+
@if type-of($position) == 'number' {
|
14
|
+
$offset: percentage($position / $grid-column-count);
|
15
|
+
|
16
|
+
position: relative;
|
17
|
+
#{$global-left}: $offset;
|
18
|
+
}
|
19
|
+
@else if $position == center {
|
20
|
+
float: none;
|
21
|
+
margin-left: auto;
|
22
|
+
margin-right: auto;
|
23
|
+
}
|
24
|
+
@else {
|
25
|
+
@warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, or center.';
|
26
|
+
}
|
27
|
+
}
|
28
|
+
|
29
|
+
/// Reset a position definition.
|
30
|
+
@mixin grid-column-unposition {
|
31
|
+
position: static;
|
32
|
+
margin-left: 0;
|
33
|
+
margin-right: 0;
|
34
|
+
float: left;
|
35
|
+
}
|
36
|
+
|
37
|
+
/// Offsets a column to the right by `$n` columns.
|
38
|
+
/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.
|
39
|
+
@mixin grid-column-offset($n) {
|
40
|
+
margin-#{$global-left}: grid-column($n);
|
41
|
+
}
|
42
|
+
|
43
|
+
/// Disable the default behavior of the last column in a row aligning to the opposite edge.
|
44
|
+
@mixin grid-column-end {
|
45
|
+
// This extra specificity is required for the property to be applied
|
46
|
+
&:last-child:last-child {
|
47
|
+
float: $global-left;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
|
51
|
+
/// Shorthand for `grid-column-position()`.
|
52
|
+
/// @alias grid-column-position
|
53
|
+
@mixin grid-col-pos($position) {
|
54
|
+
@include grid-column-position($position);
|
55
|
+
}
|
56
|
+
|
57
|
+
/// Shorthand for `grid-column-unposition()`.
|
58
|
+
/// @alias grid-column-unposition
|
59
|
+
@mixin grid-col-unpos {
|
60
|
+
@include grid-column-unposition;
|
61
|
+
}
|
62
|
+
|
63
|
+
/// Shorthand for `grid-column-offset()`.
|
64
|
+
/// @alias grid-column-offset
|
65
|
+
@mixin grid-col-off($n) {
|
66
|
+
@include grid-column-offset($n);
|
67
|
+
}
|
68
|
+
|
69
|
+
/// Shorthand for `grid-column-end()`.
|
70
|
+
/// @alias grid-column-end
|
71
|
+
@mixin grid-col-end {
|
72
|
+
@include grid-column-end;
|
73
|
+
}
|