foundation-rails 5.5.3.2 → 6.1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE.txt +1 -1
- data/README.md +2 -8
- data/Rakefile +23 -0
- data/app/views/foundation/rails/styleguide/show.html.erb +2 -5
- data/bower.json +2 -2
- data/lib/foundation/rails/version.rb +1 -1
- data/lib/generators/foundation/install_generator.rb +6 -3
- data/lib/generators/foundation/templates/_settings.scss +546 -0
- data/lib/generators/foundation/templates/application.html.erb +0 -1
- data/lib/generators/foundation/templates/application.html.haml +0 -2
- data/lib/generators/foundation/templates/application.html.slim +0 -2
- data/lib/generators/foundation/templates/foundation_and_overrides.scss +51 -0
- data/vendor/assets/js/foundation.abide.js +418 -0
- data/vendor/assets/js/foundation.accordion.js +229 -0
- data/vendor/assets/js/foundation.accordionMenu.js +262 -0
- data/vendor/assets/js/foundation.core.js +378 -0
- data/vendor/assets/js/foundation.drilldown.js +321 -0
- data/vendor/assets/js/foundation.dropdown.js +390 -0
- data/vendor/assets/js/foundation.dropdownMenu.js +391 -0
- data/vendor/assets/js/foundation.equalizer.js +274 -0
- data/vendor/assets/js/foundation.interchange.js +184 -0
- data/vendor/assets/js/foundation.js +28 -0
- data/vendor/assets/js/foundation.magellan.js +212 -0
- data/vendor/assets/js/foundation.offcanvas.js +371 -0
- data/vendor/assets/js/foundation.orbit.js +419 -0
- data/vendor/assets/js/foundation.responsiveMenu.js +145 -0
- data/vendor/assets/js/foundation.responsiveToggle.js +106 -0
- data/vendor/assets/js/foundation.reveal.js +478 -0
- data/vendor/assets/js/foundation.slider.js +484 -0
- data/vendor/assets/js/foundation.sticky.js +436 -0
- data/vendor/assets/js/foundation.tabs.js +306 -0
- data/vendor/assets/js/foundation.toggler.js +147 -0
- data/vendor/assets/js/foundation.tooltip.js +429 -0
- data/vendor/assets/js/foundation.util.box.js +169 -0
- data/vendor/assets/js/foundation.util.keyboard.js +115 -0
- data/vendor/assets/js/foundation.util.mediaQuery.js +210 -0
- data/vendor/assets/js/foundation.util.motion.js +89 -0
- data/vendor/assets/js/foundation.util.nest.js +64 -0
- data/vendor/assets/js/foundation.util.timerAndImageLoader.js +78 -0
- data/vendor/assets/js/foundation.util.touch.js +339 -0
- data/vendor/assets/js/foundation.util.triggers.js +222 -0
- data/vendor/assets/scss/_global.scss +626 -0
- data/vendor/assets/scss/components/_accordion-menu.scss +32 -0
- data/vendor/assets/scss/components/_accordion.scss +113 -0
- data/vendor/assets/scss/components/_badge.scss +55 -0
- data/vendor/assets/scss/components/_breadcrumbs.scss +94 -0
- data/vendor/assets/scss/components/_button-group.scss +130 -0
- data/vendor/assets/scss/components/_button.scss +265 -0
- data/vendor/assets/scss/components/_callout.scss +105 -0
- data/vendor/assets/scss/components/_close-button.scss +61 -0
- data/vendor/assets/scss/components/_drilldown.scss +75 -0
- data/vendor/assets/scss/components/_dropdown-menu.scss +148 -0
- data/vendor/assets/scss/components/_dropdown.scss +64 -0
- data/vendor/assets/scss/components/_flex-video.scss +63 -0
- data/vendor/assets/scss/components/_float.scss +27 -0
- data/vendor/assets/scss/components/_label.scss +56 -0
- data/vendor/assets/scss/components/_media-object.scss +74 -0
- data/vendor/assets/scss/components/_menu.scss +209 -0
- data/vendor/assets/scss/components/_off-canvas.scss +180 -0
- data/vendor/assets/scss/components/_orbit.scss +193 -0
- data/vendor/assets/scss/components/_pagination.scss +158 -0
- data/vendor/assets/scss/components/_progress-bar.scss +83 -0
- data/vendor/assets/scss/components/_reveal.scss +156 -0
- data/vendor/assets/scss/components/_slider.scss +158 -0
- data/vendor/assets/scss/components/_sticky.scss +38 -0
- data/vendor/assets/scss/components/_switch.scss +232 -0
- data/vendor/assets/scss/components/_table.scss +213 -0
- data/vendor/assets/scss/components/_tabs.scss +170 -0
- data/vendor/assets/scss/components/_thumbnail.scss +54 -0
- data/vendor/assets/scss/components/_title-bar.scss +68 -0
- data/vendor/assets/scss/components/_tooltip.scss +100 -0
- data/vendor/assets/scss/components/_top-bar.scss +89 -0
- data/vendor/assets/scss/components/_visibility.scss +131 -0
- data/vendor/assets/scss/forms/_checkbox.scss +36 -0
- data/vendor/assets/scss/forms/_error.scss +82 -0
- data/vendor/assets/scss/forms/_fieldset.scss +53 -0
- data/vendor/assets/scss/forms/_forms.scss +32 -0
- data/vendor/assets/scss/forms/_help-text.scss +30 -0
- data/vendor/assets/scss/forms/_input-group.scss +91 -0
- data/vendor/assets/scss/forms/_label.scss +48 -0
- data/vendor/assets/scss/forms/_select.scss +63 -0
- data/vendor/assets/scss/forms/_text.scss +154 -0
- data/vendor/assets/scss/foundation.scss +91 -0
- data/vendor/assets/scss/grid/_classes.scss +153 -0
- data/vendor/assets/scss/grid/_column.scss +124 -0
- data/vendor/assets/scss/grid/_flex-grid.scss +281 -0
- data/vendor/assets/scss/grid/_grid.scss +48 -0
- data/vendor/assets/scss/grid/_gutter.scss +34 -0
- data/vendor/assets/scss/grid/_layout.scss +33 -0
- data/vendor/assets/scss/grid/_position.scss +72 -0
- data/vendor/assets/scss/grid/_row.scss +97 -0
- data/vendor/assets/scss/grid/_size.scss +24 -0
- data/vendor/assets/scss/settings/_settings.scss +547 -0
- data/vendor/assets/scss/typography/_alignment.scss +22 -0
- data/vendor/assets/scss/typography/_base.scss +439 -0
- data/vendor/assets/scss/typography/_helpers.scss +77 -0
- data/vendor/assets/scss/typography/_print.scss +73 -0
- data/vendor/assets/scss/typography/_typography.scss +28 -0
- data/vendor/assets/scss/util/_breakpoint.scss +266 -0
- data/vendor/assets/scss/util/_color.scss +41 -0
- data/vendor/assets/scss/util/_mixins.scss +223 -0
- data/vendor/assets/scss/util/_selector.scss +40 -0
- data/vendor/assets/scss/util/_unit.scss +90 -0
- data/vendor/assets/scss/util/_util.scss +15 -0
- data/vendor/assets/scss/util/_value.scss +126 -0
- metadata +97 -64
- data/update-gem.sh +0 -20
- data/vendor/assets/javascripts/foundation.js +0 -17
- data/vendor/assets/javascripts/foundation/foundation.abide.js +0 -426
- data/vendor/assets/javascripts/foundation/foundation.accordion.js +0 -125
- data/vendor/assets/javascripts/foundation/foundation.alert.js +0 -43
- data/vendor/assets/javascripts/foundation/foundation.clearing.js +0 -586
- data/vendor/assets/javascripts/foundation/foundation.dropdown.js +0 -468
- data/vendor/assets/javascripts/foundation/foundation.equalizer.js +0 -104
- data/vendor/assets/javascripts/foundation/foundation.interchange.js +0 -360
- data/vendor/assets/javascripts/foundation/foundation.joyride.js +0 -935
- data/vendor/assets/javascripts/foundation/foundation.js +0 -732
- data/vendor/assets/javascripts/foundation/foundation.magellan.js +0 -214
- data/vendor/assets/javascripts/foundation/foundation.offcanvas.js +0 -225
- data/vendor/assets/javascripts/foundation/foundation.orbit.js +0 -476
- data/vendor/assets/javascripts/foundation/foundation.reveal.js +0 -522
- data/vendor/assets/javascripts/foundation/foundation.slider.js +0 -296
- data/vendor/assets/javascripts/foundation/foundation.tab.js +0 -247
- data/vendor/assets/javascripts/foundation/foundation.tooltip.js +0 -348
- data/vendor/assets/javascripts/foundation/foundation.topbar.js +0 -458
- data/vendor/assets/javascripts/vendor/modernizr.js +0 -1406
- data/vendor/assets/stylesheets/foundation.scss +0 -42
- data/vendor/assets/stylesheets/foundation/_functions.scss +0 -156
- data/vendor/assets/stylesheets/foundation/_settings.scss +0 -1489
- data/vendor/assets/stylesheets/foundation/components/_accordion.scss +0 -161
- data/vendor/assets/stylesheets/foundation/components/_alert-boxes.scss +0 -128
- data/vendor/assets/stylesheets/foundation/components/_block-grid.scss +0 -133
- data/vendor/assets/stylesheets/foundation/components/_breadcrumbs.scss +0 -132
- data/vendor/assets/stylesheets/foundation/components/_button-groups.scss +0 -208
- data/vendor/assets/stylesheets/foundation/components/_buttons.scss +0 -261
- data/vendor/assets/stylesheets/foundation/components/_clearing.scss +0 -260
- data/vendor/assets/stylesheets/foundation/components/_dropdown-buttons.scss +0 -130
- data/vendor/assets/stylesheets/foundation/components/_dropdown.scss +0 -269
- data/vendor/assets/stylesheets/foundation/components/_flex-video.scss +0 -51
- data/vendor/assets/stylesheets/foundation/components/_forms.scss +0 -607
- data/vendor/assets/stylesheets/foundation/components/_global.scss +0 -566
- data/vendor/assets/stylesheets/foundation/components/_grid.scss +0 -292
- data/vendor/assets/stylesheets/foundation/components/_icon-bar.scss +0 -460
- data/vendor/assets/stylesheets/foundation/components/_inline-lists.scss +0 -58
- data/vendor/assets/stylesheets/foundation/components/_joyride.scss +0 -220
- data/vendor/assets/stylesheets/foundation/components/_keystrokes.scss +0 -60
- data/vendor/assets/stylesheets/foundation/components/_labels.scss +0 -106
- data/vendor/assets/stylesheets/foundation/components/_magellan.scss +0 -34
- data/vendor/assets/stylesheets/foundation/components/_offcanvas.scss +0 -606
- data/vendor/assets/stylesheets/foundation/components/_orbit.scss +0 -388
- data/vendor/assets/stylesheets/foundation/components/_pagination.scss +0 -163
- data/vendor/assets/stylesheets/foundation/components/_panels.scss +0 -107
- data/vendor/assets/stylesheets/foundation/components/_pricing-tables.scss +0 -150
- data/vendor/assets/stylesheets/foundation/components/_progress-bars.scss +0 -85
- data/vendor/assets/stylesheets/foundation/components/_range-slider.scss +0 -177
- data/vendor/assets/stylesheets/foundation/components/_reveal.scss +0 -212
- data/vendor/assets/stylesheets/foundation/components/_side-nav.scss +0 -120
- data/vendor/assets/stylesheets/foundation/components/_split-buttons.scss +0 -203
- data/vendor/assets/stylesheets/foundation/components/_sub-nav.scss +0 -125
- data/vendor/assets/stylesheets/foundation/components/_switches.scss +0 -241
- data/vendor/assets/stylesheets/foundation/components/_tables.scss +0 -135
- data/vendor/assets/stylesheets/foundation/components/_tabs.scss +0 -142
- data/vendor/assets/stylesheets/foundation/components/_thumbs.scss +0 -66
- data/vendor/assets/stylesheets/foundation/components/_tooltips.scss +0 -142
- data/vendor/assets/stylesheets/foundation/components/_top-bar.scss +0 -745
- data/vendor/assets/stylesheets/foundation/components/_type.scss +0 -525
- data/vendor/assets/stylesheets/foundation/components/_visibility.scss +0 -425
- data/vendor/assets/stylesheets/normalize.scss +0 -424
@@ -0,0 +1,124 @@
|
|
1
|
+
// Foundation for Sites by ZURB
|
2
|
+
// foundation.zurb.com
|
3
|
+
// Licensed under MIT Open Source
|
4
|
+
|
5
|
+
////
|
6
|
+
/// @group grid
|
7
|
+
////
|
8
|
+
|
9
|
+
/// Calculates the width of a column based on a number of factors.
|
10
|
+
///
|
11
|
+
/// @param {Number|List} $columns
|
12
|
+
/// Width of the column. Accepts multiple values:
|
13
|
+
/// - A percentage value will make the column that exact size.
|
14
|
+
/// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.
|
15
|
+
/// - A string of the format "x of y" will make a column that is *x* columns wide, assuming *y* total columns for the parent.
|
16
|
+
///
|
17
|
+
/// @returns {Number} A calculated percentage value.
|
18
|
+
@function grid-column($columns) {
|
19
|
+
$width: 0%;
|
20
|
+
|
21
|
+
// Parsing percents, decimals, and column counts
|
22
|
+
@if type-of($columns) == 'number' {
|
23
|
+
@if unit($columns) == '%' {
|
24
|
+
$width: $columns;
|
25
|
+
}
|
26
|
+
@else if $columns < 1 {
|
27
|
+
$width: percentage($columns);
|
28
|
+
}
|
29
|
+
@else {
|
30
|
+
$width: percentage($columns / $grid-column-count);
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
// Parsing "n of n" expressions
|
35
|
+
@else if type-of($columns) == 'list' {
|
36
|
+
@if length($columns) != 3 {
|
37
|
+
@error 'Wrong syntax for grid-column(). Use the format "n of n".';
|
38
|
+
}
|
39
|
+
@else {
|
40
|
+
$width: percentage(nth($columns, 1) / nth($columns, 3));
|
41
|
+
}
|
42
|
+
}
|
43
|
+
|
44
|
+
// Anything else is incorrect
|
45
|
+
@else {
|
46
|
+
@error 'Wrong syntax for grid-column(). Use a number, decimal, percentage, or "n of n".';
|
47
|
+
}
|
48
|
+
|
49
|
+
@return $width;
|
50
|
+
}
|
51
|
+
|
52
|
+
/// Creates a grid column.
|
53
|
+
///
|
54
|
+
/// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.
|
55
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Spacing between columns.
|
56
|
+
@mixin grid-column(
|
57
|
+
$columns: $grid-column-count,
|
58
|
+
$gutter: $grid-column-gutter
|
59
|
+
) {
|
60
|
+
@if $gutter != null {
|
61
|
+
$gutter: rem-calc($gutter) / 2;
|
62
|
+
}
|
63
|
+
@else {
|
64
|
+
@each $breakpoint, $gutter in $grid-column-responsive-gutter {
|
65
|
+
$padding: rem-calc($gutter) / 2;
|
66
|
+
|
67
|
+
@include breakpoint($breakpoint) {
|
68
|
+
padding-left: $padding;
|
69
|
+
padding-right: $padding;
|
70
|
+
}
|
71
|
+
}
|
72
|
+
}
|
73
|
+
|
74
|
+
@include grid-column-size($columns);
|
75
|
+
float: $global-left;
|
76
|
+
padding-left: $gutter;
|
77
|
+
padding-right: $gutter;
|
78
|
+
|
79
|
+
@if $grid-column-align-edge {
|
80
|
+
&:last-child:not(:first-child) {
|
81
|
+
float: $global-right;
|
82
|
+
}
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.
|
87
|
+
///
|
88
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Width of the gutters on either side of the column row.
|
89
|
+
@mixin grid-column-row(
|
90
|
+
$gutter: $grid-column-gutter
|
91
|
+
) {
|
92
|
+
@include grid-row;
|
93
|
+
@include grid-column($gutter: $gutter);
|
94
|
+
|
95
|
+
&,
|
96
|
+
&:last-child {
|
97
|
+
float: none;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
|
101
|
+
/// Shorthand for `grid-column()`.
|
102
|
+
/// @alias grid-column
|
103
|
+
@function grid-col(
|
104
|
+
$columns: $grid-column-count
|
105
|
+
) {
|
106
|
+
@return grid-column($columns);
|
107
|
+
}
|
108
|
+
|
109
|
+
/// Shorthand for `grid-column()`.
|
110
|
+
/// @alias grid-column
|
111
|
+
@mixin grid-col(
|
112
|
+
$columns: $grid-column-count,
|
113
|
+
$gutter: $grid-column-gutter
|
114
|
+
) {
|
115
|
+
@include grid-column($columns, $gutter);
|
116
|
+
}
|
117
|
+
|
118
|
+
/// Shorthand for `grid-column-row()`.
|
119
|
+
/// @alias grid-column-row
|
120
|
+
@mixin grid-col-row(
|
121
|
+
$gutter: $grid-column-gutter
|
122
|
+
) {
|
123
|
+
@include grid-column-row($gutter);
|
124
|
+
}
|
@@ -0,0 +1,281 @@
|
|
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
|
+
$-zf-flex-justify: (
|
10
|
+
'left': flex-start,
|
11
|
+
'right': flex-end,
|
12
|
+
'center': center,
|
13
|
+
'justify': space-between,
|
14
|
+
'spaced': space-around,
|
15
|
+
);
|
16
|
+
|
17
|
+
$-zf-flex-align: (
|
18
|
+
'top': flex-start,
|
19
|
+
'bottom': flex-end,
|
20
|
+
'middle': center,
|
21
|
+
'stretch': stretch,
|
22
|
+
);
|
23
|
+
|
24
|
+
/// Creates a container for a flex grid row.
|
25
|
+
///
|
26
|
+
/// @param {Keyword|List} $behavior [null]
|
27
|
+
/// 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.
|
28
|
+
/// @param {Number} $width [$grid-row-width] - Maximum width of the row.
|
29
|
+
/// @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.
|
30
|
+
/// @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.
|
31
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Gutter to use when inverting margins, in case the row is nested.
|
32
|
+
@mixin flex-grid-row(
|
33
|
+
$behavior: null,
|
34
|
+
$width: $grid-row-width,
|
35
|
+
$columns: null,
|
36
|
+
$base: true,
|
37
|
+
$gutter: $grid-column-gutter
|
38
|
+
) {
|
39
|
+
$behavior: -zf-get-options($behavior, nest collapse);
|
40
|
+
$margin: auto;
|
41
|
+
|
42
|
+
@if map-get($behavior, nest) {
|
43
|
+
@include grid-row-nest($gutter);
|
44
|
+
|
45
|
+
@if map-get($behavior, collapse) {
|
46
|
+
margin-left: 0;
|
47
|
+
margin-right: 0;
|
48
|
+
}
|
49
|
+
}
|
50
|
+
@else {
|
51
|
+
max-width: $width;
|
52
|
+
margin-left: auto;
|
53
|
+
margin-right: auto;
|
54
|
+
}
|
55
|
+
|
56
|
+
@if $base {
|
57
|
+
display: flex;
|
58
|
+
flex-flow: row wrap;
|
59
|
+
}
|
60
|
+
|
61
|
+
@if $columns != null {
|
62
|
+
@include grid-context($columns, $base) {
|
63
|
+
@content;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
/// 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:
|
69
|
+
/// - `null` (the default) will make the column expand to fill space.
|
70
|
+
/// - `shrink` will make the column contract, so it only takes up the horizontal space it needs.
|
71
|
+
///
|
72
|
+
/// @param {Mixed} $columns [null] - Width of the column.
|
73
|
+
@function flex-grid-column($columns: null) {
|
74
|
+
$flex: 1 1 0px;
|
75
|
+
|
76
|
+
@if $columns == shrink {
|
77
|
+
$flex: 0 0 auto;
|
78
|
+
}
|
79
|
+
@else if $columns != null {
|
80
|
+
$flex: 0 0 grid-column($columns);
|
81
|
+
}
|
82
|
+
|
83
|
+
@return $flex;
|
84
|
+
}
|
85
|
+
|
86
|
+
/// 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.
|
87
|
+
///
|
88
|
+
/// @param {Mixed} $columns [null] - Width of the column. Refer to the `flex-grid-column()` function to see possible values.
|
89
|
+
/// @param {Number} $gutter [$grid-column-gutter] - Space between columns, added as a left and right padding.
|
90
|
+
@mixin flex-grid-column(
|
91
|
+
$columns: null,
|
92
|
+
$gutter: $grid-column-gutter
|
93
|
+
) {
|
94
|
+
@if $gutter != null {
|
95
|
+
$gutter: rem-calc($gutter) / 2;
|
96
|
+
}
|
97
|
+
@else {
|
98
|
+
@each $breakpoint, $gutter in $grid-column-responsive-gutter {
|
99
|
+
$padding: rem-calc($gutter) / 2;
|
100
|
+
|
101
|
+
@include breakpoint($breakpoint) {
|
102
|
+
padding-left: $padding;
|
103
|
+
padding-right: $padding;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
107
|
+
|
108
|
+
flex: flex-grid-column($columns);
|
109
|
+
padding-left: $gutter;
|
110
|
+
padding-right: $gutter;
|
111
|
+
|
112
|
+
// max-width fixes IE 10/11 not respecting the flex-basis property
|
113
|
+
@if $columns != null and $columns != shrink {
|
114
|
+
max-width: grid-column($columns);
|
115
|
+
}
|
116
|
+
}
|
117
|
+
|
118
|
+
/// Changes the source order of a flex grid column. Columns with lower numbers appear first in the layout.
|
119
|
+
/// @param {Number} $order [0] - Order number to apply.
|
120
|
+
@mixin flex-grid-order($order: 0) {
|
121
|
+
order: $order;
|
122
|
+
}
|
123
|
+
|
124
|
+
/// Horizontally or vertically aligns the columns within a flex row. Apply this mixin to a flex row.
|
125
|
+
///
|
126
|
+
/// @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.
|
127
|
+
/// @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.
|
128
|
+
@mixin flex-grid-row-align($x: null, $y: null) {
|
129
|
+
@if $x {
|
130
|
+
@if map-has-key($-zf-flex-justify, $x) {
|
131
|
+
$x: map-get($-zf-flex-justify, $x);
|
132
|
+
}
|
133
|
+
@else {
|
134
|
+
@warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.'
|
135
|
+
}
|
136
|
+
}
|
137
|
+
|
138
|
+
@if $y {
|
139
|
+
@if map-has-key($-zf-flex-align, $y) {
|
140
|
+
$y: map-get($-zf-flex-align, $y);
|
141
|
+
}
|
142
|
+
@else {
|
143
|
+
@warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.'
|
144
|
+
}
|
145
|
+
}
|
146
|
+
|
147
|
+
justify-content: $x;
|
148
|
+
align-items: $y;
|
149
|
+
}
|
150
|
+
|
151
|
+
/// Vertically align a single column within a flex row. Apply this mixin to a flex column.
|
152
|
+
///
|
153
|
+
/// @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.
|
154
|
+
@mixin flex-grid-column-align($y: null) {
|
155
|
+
@if $y {
|
156
|
+
@if map-has-key($-zf-flex-align, $y) {
|
157
|
+
$y: map-get($-zf-flex-align, $y);
|
158
|
+
}
|
159
|
+
@else {
|
160
|
+
@warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.'
|
161
|
+
}
|
162
|
+
}
|
163
|
+
|
164
|
+
align-self: $y;
|
165
|
+
}
|
166
|
+
|
167
|
+
@mixin foundation-flex-grid {
|
168
|
+
// Row
|
169
|
+
.row {
|
170
|
+
@include flex-grid-row;
|
171
|
+
|
172
|
+
// Nesting behavior
|
173
|
+
& &,
|
174
|
+
.column-row & {
|
175
|
+
@include flex-grid-row(nest, $base: false);
|
176
|
+
}
|
177
|
+
|
178
|
+
// Expanded row
|
179
|
+
&.expanded {
|
180
|
+
max-width: none;
|
181
|
+
}
|
182
|
+
|
183
|
+
&.collapse {
|
184
|
+
> .column { @include grid-col-collapse; }
|
185
|
+
}
|
186
|
+
}
|
187
|
+
|
188
|
+
// Column
|
189
|
+
.column {
|
190
|
+
@include flex-grid-column;
|
191
|
+
}
|
192
|
+
|
193
|
+
@include -zf-each-breakpoint {
|
194
|
+
@for $i from 1 through $grid-column-count {
|
195
|
+
// Sizing (percentage)
|
196
|
+
.#{$-zf-size}-#{$i} {
|
197
|
+
flex: flex-grid-column($i);
|
198
|
+
max-width: grid-column($i);
|
199
|
+
}
|
200
|
+
|
201
|
+
// Offsets
|
202
|
+
$o: $i - 1;
|
203
|
+
|
204
|
+
.#{$-zf-size}-offset-#{$o} {
|
205
|
+
@include grid-column-offset($o);
|
206
|
+
}
|
207
|
+
}
|
208
|
+
|
209
|
+
@for $i from 1 through 6 {
|
210
|
+
// Source ordering
|
211
|
+
.#{$-zf-size}-order-#{$i} {
|
212
|
+
@include flex-grid-order($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
|
+
@if $grid-column-gutter {
|
245
|
+
$gutter: $grid-column-gutter;
|
246
|
+
}
|
247
|
+
@else {
|
248
|
+
$gutter: -zf-get-bp-val($grid-column-responsive-gutter, $-zf-size);
|
249
|
+
}
|
250
|
+
> .column { @include grid-col-uncollapse($gutter); }
|
251
|
+
}
|
252
|
+
}
|
253
|
+
|
254
|
+
// Sizing (shrink)
|
255
|
+
.shrink {
|
256
|
+
flex: flex-grid-column(shrink);
|
257
|
+
}
|
258
|
+
|
259
|
+
// Horizontal alignment using justify-content
|
260
|
+
@each $hdir, $prop in map-remove($-zf-flex-justify, left) {
|
261
|
+
.row.align-#{$hdir} {
|
262
|
+
@include flex-grid-row-align($x: $hdir);
|
263
|
+
}
|
264
|
+
}
|
265
|
+
|
266
|
+
// Vertical alignment using align-items and align-self
|
267
|
+
@each $vdir, $prop in $-zf-flex-align {
|
268
|
+
.row.align-#{$vdir} {
|
269
|
+
@include flex-grid-row-align($y: $vdir);
|
270
|
+
}
|
271
|
+
|
272
|
+
.column.align-#{$vdir} {
|
273
|
+
@include flex-grid-column-align($vdir);
|
274
|
+
}
|
275
|
+
}
|
276
|
+
|
277
|
+
.columns {
|
278
|
+
// scss-lint:disable PlaceholderInExtend
|
279
|
+
@extend .column;
|
280
|
+
}
|
281
|
+
}
|
@@ -0,0 +1,48 @@
|
|
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: $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. Remove this in 6.2.
|
18
|
+
// @type Number
|
19
|
+
$grid-column-gutter: null !default;
|
20
|
+
|
21
|
+
/// The amount of space between columns at different screen sizes.
|
22
|
+
/// @type Map
|
23
|
+
/// @since 6.1.0
|
24
|
+
$grid-column-responsive-gutter: (
|
25
|
+
small: 20px,
|
26
|
+
medium: 30px,
|
27
|
+
) !default;
|
28
|
+
|
29
|
+
/// If `true`, the last column in a row will align to the opposite edge of the row.
|
30
|
+
/// @type Boolean
|
31
|
+
$grid-column-align-edge: true !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 highest number of `.x-up` classes available when using the block grid CSS.
|
37
|
+
/// @type Number
|
38
|
+
$block-grid-max: 8 !default;
|
39
|
+
|
40
|
+
@import 'row';
|
41
|
+
@import 'column';
|
42
|
+
@import 'size';
|
43
|
+
@import 'position';
|
44
|
+
@import 'gutter';
|
45
|
+
@import 'classes';
|
46
|
+
@import 'layout';
|
47
|
+
|
48
|
+
@import 'flex-grid';
|