dta_rapid 0.2.5 → 0.2.6
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.
- checksums.yaml +4 -4
- data/_includes/forms/text-input.html +2 -0
- data/_sass/_colors.scss +18 -3
- data/_sass/components/text-input.scss +71 -0
- data/_sass/vendor/bourbon/_bourbon-deprecate.scss +19 -0
- data/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss +425 -0
- data/_sass/vendor/bourbon/_bourbon.scss +90 -0
- data/_sass/vendor/bourbon/addons/_border-color.scss +29 -0
- data/_sass/vendor/bourbon/addons/_border-radius.scss +48 -0
- data/_sass/vendor/bourbon/addons/_border-style.scss +28 -0
- data/_sass/vendor/bourbon/addons/_border-width.scss +28 -0
- data/_sass/vendor/bourbon/addons/_buttons.scss +69 -0
- data/_sass/vendor/bourbon/addons/_clearfix.scss +25 -0
- data/_sass/vendor/bourbon/addons/_ellipsis.scss +30 -0
- data/_sass/vendor/bourbon/addons/_font-stacks.scss +31 -0
- data/_sass/vendor/bourbon/addons/_hide-text.scss +27 -0
- data/_sass/vendor/bourbon/addons/_margin.scss +29 -0
- data/_sass/vendor/bourbon/addons/_padding.scss +29 -0
- data/_sass/vendor/bourbon/addons/_position.scss +51 -0
- data/_sass/vendor/bourbon/addons/_prefixer.scss +66 -0
- data/_sass/vendor/bourbon/addons/_retina-image.scss +27 -0
- data/_sass/vendor/bourbon/addons/_size.scss +51 -0
- data/_sass/vendor/bourbon/addons/_text-inputs.scss +118 -0
- data/_sass/vendor/bourbon/addons/_timing-functions.scss +34 -0
- data/_sass/vendor/bourbon/addons/_triangle.scss +63 -0
- data/_sass/vendor/bourbon/addons/_word-wrap.scss +29 -0
- data/_sass/vendor/bourbon/css3/_animation.scss +61 -0
- data/_sass/vendor/bourbon/css3/_appearance.scss +5 -0
- data/_sass/vendor/bourbon/css3/_backface-visibility.scss +5 -0
- data/_sass/vendor/bourbon/css3/_background-image.scss +44 -0
- data/_sass/vendor/bourbon/css3/_background.scss +57 -0
- data/_sass/vendor/bourbon/css3/_border-image.scss +61 -0
- data/_sass/vendor/bourbon/css3/_calc.scss +6 -0
- data/_sass/vendor/bourbon/css3/_columns.scss +67 -0
- data/_sass/vendor/bourbon/css3/_filter.scss +6 -0
- data/_sass/vendor/bourbon/css3/_flex-box.scss +327 -0
- data/_sass/vendor/bourbon/css3/_font-face.scss +29 -0
- data/_sass/vendor/bourbon/css3/_font-feature-settings.scss +6 -0
- data/_sass/vendor/bourbon/css3/_hidpi-media-query.scss +12 -0
- data/_sass/vendor/bourbon/css3/_hyphens.scss +6 -0
- data/_sass/vendor/bourbon/css3/_image-rendering.scss +15 -0
- data/_sass/vendor/bourbon/css3/_keyframes.scss +38 -0
- data/_sass/vendor/bourbon/css3/_linear-gradient.scss +40 -0
- data/_sass/vendor/bourbon/css3/_perspective.scss +12 -0
- data/_sass/vendor/bourbon/css3/_placeholder.scss +10 -0
- data/_sass/vendor/bourbon/css3/_radial-gradient.scss +40 -0
- data/_sass/vendor/bourbon/css3/_selection.scss +44 -0
- data/_sass/vendor/bourbon/css3/_text-decoration.scss +27 -0
- data/_sass/vendor/bourbon/css3/_transform.scss +21 -0
- data/_sass/vendor/bourbon/css3/_transition.scss +81 -0
- data/_sass/vendor/bourbon/css3/_user-select.scss +5 -0
- data/_sass/vendor/bourbon/functions/_assign-inputs.scss +16 -0
- data/_sass/vendor/bourbon/functions/_contains-falsy.scss +25 -0
- data/_sass/vendor/bourbon/functions/_contains.scss +31 -0
- data/_sass/vendor/bourbon/functions/_is-length.scss +16 -0
- data/_sass/vendor/bourbon/functions/_is-light.scss +26 -0
- data/_sass/vendor/bourbon/functions/_is-number.scss +16 -0
- data/_sass/vendor/bourbon/functions/_is-size.scss +18 -0
- data/_sass/vendor/bourbon/functions/_modular-scale.scss +74 -0
- data/_sass/vendor/bourbon/functions/_px-to-em.scss +24 -0
- data/_sass/vendor/bourbon/functions/_px-to-rem.scss +26 -0
- data/_sass/vendor/bourbon/functions/_shade.scss +24 -0
- data/_sass/vendor/bourbon/functions/_strip-units.scss +22 -0
- data/_sass/vendor/bourbon/functions/_tint.scss +24 -0
- data/_sass/vendor/bourbon/functions/_transition-property-name.scss +37 -0
- data/_sass/vendor/bourbon/functions/_unpack.scss +32 -0
- data/_sass/vendor/bourbon/helpers/_convert-units.scss +26 -0
- data/_sass/vendor/bourbon/helpers/_directional-values.scss +108 -0
- data/_sass/vendor/bourbon/helpers/_font-source-declaration.scss +53 -0
- data/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss +24 -0
- data/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss +35 -0
- data/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss +51 -0
- data/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss +77 -0
- data/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss +41 -0
- data/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss +74 -0
- data/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss +55 -0
- data/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss +28 -0
- data/_sass/vendor/bourbon/helpers/_render-gradients.scss +31 -0
- data/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss +15 -0
- data/_sass/vendor/bourbon/helpers/_str-to-num.scss +55 -0
- data/_sass/vendor/bourbon/settings/_asset-pipeline.scss +7 -0
- data/_sass/vendor/bourbon/settings/_deprecation-warnings.scss +8 -0
- data/_sass/vendor/bourbon/settings/_prefixer.scss +9 -0
- data/_sass/vendor/bourbon/settings/_px-to-em.scss +1 -0
- data/_sass/vendor/neat/_neat-helpers.scss +8 -0
- data/_sass/vendor/neat/_neat.scss +19 -22
- data/_sass/vendor/neat/functions/_new-breakpoint.scss +49 -0
- data/_sass/vendor/neat/functions/_private.scss +114 -0
- data/_sass/vendor/neat/grid/_box-sizing.scss +15 -0
- data/_sass/vendor/neat/grid/_direction-context.scss +33 -0
- data/_sass/vendor/neat/grid/_display-context.scss +28 -0
- data/_sass/vendor/neat/grid/_fill-parent.scss +22 -0
- data/_sass/vendor/neat/grid/_media.scss +92 -0
- data/_sass/vendor/neat/grid/_omega.scss +87 -0
- data/_sass/vendor/neat/grid/_outer-container.scss +38 -0
- data/_sass/vendor/neat/grid/_pad.scss +25 -0
- data/_sass/vendor/neat/grid/_private.scss +35 -0
- data/_sass/vendor/neat/grid/_row.scss +52 -0
- data/_sass/vendor/neat/grid/_shift.scss +50 -0
- data/_sass/vendor/neat/grid/_span-columns.scss +94 -0
- data/_sass/vendor/neat/grid/_to-deprecate.scss +97 -0
- data/_sass/vendor/neat/grid/_visual-grid.scss +42 -0
- data/_sass/vendor/neat/settings/_disable-warnings.scss +13 -0
- data/_sass/vendor/neat/settings/_grid.scss +51 -0
- data/_sass/vendor/neat/settings/_visual-grid.scss +27 -0
- data/assets/style.scss +7 -4
- metadata +103 -20
- data/_sass/components/.keep +0 -0
- data/_sass/vendor/neat/neat/functions/_neat-append-grid-visual.scss +0 -21
- data/_sass/vendor/neat/neat/functions/_neat-column-default.scss +0 -23
- data/_sass/vendor/neat/neat/functions/_neat-column-ratio.scss +0 -24
- data/_sass/vendor/neat/neat/functions/_neat-column-width.scss +0 -25
- data/_sass/vendor/neat/neat/functions/_neat-float-direction.scss +0 -22
- data/_sass/vendor/neat/neat/functions/_neat-merge-defaults.scss +0 -23
- data/_sass/vendor/neat/neat/functions/_neat-opposite-direction.scss +0 -22
- data/_sass/vendor/neat/neat/functions/_neat-parse-columns.scss +0 -22
- data/_sass/vendor/neat/neat/functions/_neat-parse-media.scss +0 -20
- data/_sass/vendor/neat/neat/functions/_retrieve-neat-settings.scss +0 -19
- data/_sass/vendor/neat/neat/mixins/_grid-collapse.scss +0 -36
- data/_sass/vendor/neat/neat/mixins/_grid-column.scss +0 -39
- data/_sass/vendor/neat/neat/mixins/_grid-container.scss +0 -30
- data/_sass/vendor/neat/neat/mixins/_grid-media.scss +0 -67
- data/_sass/vendor/neat/neat/mixins/_grid-push.scss +0 -37
- data/_sass/vendor/neat/neat/mixins/_grid-shift.scss +0 -36
- data/_sass/vendor/neat/neat/mixins/_grid-visual.scss +0 -67
- data/_sass/vendor/neat/neat/settings/_settings.scss +0 -74
@@ -1,24 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Determine the ratio of `$columns` to the total column count.
|
3
|
-
/// If `$columns` is more than one value, they are handed to
|
4
|
-
/// `_neat-parse-columns()` which will detirmine the total columns and use this
|
5
|
-
/// value instead of `total-columns`.
|
6
|
-
///
|
7
|
-
/// @argument {map} $grid
|
8
|
-
///
|
9
|
-
/// @argument {number | list} $columns
|
10
|
-
///
|
11
|
-
/// @return {number}
|
12
|
-
///
|
13
|
-
/// @example scss
|
14
|
-
/// _neat-column-ratio($grid, 3)
|
15
|
-
///
|
16
|
-
/// @access private
|
17
|
-
|
18
|
-
@function _neat-column-ratio($grid, $columns) {
|
19
|
-
@if length($columns) > 1 {
|
20
|
-
@return nth($columns, 1) / _neat-parse-columns($columns);
|
21
|
-
} @else if $columns {
|
22
|
-
@return $columns / _retrieve-neat-setting($grid, columns);
|
23
|
-
}
|
24
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Return a calulated column width that can then be passed in to a `calc()`.
|
3
|
-
///
|
4
|
-
/// @argument {map} $grid
|
5
|
-
///
|
6
|
-
/// @argument {number} $columns
|
7
|
-
///
|
8
|
-
/// @return {string}
|
9
|
-
///
|
10
|
-
/// @example scss
|
11
|
-
/// _neat-column-width($neat-grid, 4)
|
12
|
-
///
|
13
|
-
/// @access private
|
14
|
-
|
15
|
-
@function _neat-column-width($grid, $columns) {
|
16
|
-
$_column-ratio: _neat-column-ratio($grid, $columns);
|
17
|
-
$_gutter: _retrieve-neat-setting($grid, gutter);
|
18
|
-
|
19
|
-
@if $_gutter == 0 {
|
20
|
-
@return unquote("#{percentage($_column-ratio)}");
|
21
|
-
} @else {
|
22
|
-
$_gutter-affordance: $_gutter + ($_gutter * $_column-ratio);
|
23
|
-
@return unquote("#{percentage($_column-ratio)} - #{$_gutter-affordance}");
|
24
|
-
}
|
25
|
-
}
|
@@ -1,22 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Return the float direction of the grid.
|
3
|
-
///
|
4
|
-
/// @argument {map} $grid
|
5
|
-
///
|
6
|
-
/// @return {string}
|
7
|
-
///
|
8
|
-
/// @example scss
|
9
|
-
/// _neat-float-direction($neat-grid)
|
10
|
-
///
|
11
|
-
/// @access private
|
12
|
-
|
13
|
-
@function _neat-float-direction($grid) {
|
14
|
-
$_direction: _retrieve-neat-setting($grid, direction);
|
15
|
-
$_float-direction: null;
|
16
|
-
@if $_direction == "ltr" {
|
17
|
-
$_float-direction: left;
|
18
|
-
} @else if $_direction == "rtl" {
|
19
|
-
$_float-direction: right;
|
20
|
-
}
|
21
|
-
@return $_float-direction;
|
22
|
-
}
|
@@ -1,23 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Apply Neat's default properties to undefined values within a map.
|
3
|
-
///
|
4
|
-
/// @argument {map} $grid
|
5
|
-
///
|
6
|
-
/// @return {map}
|
7
|
-
///
|
8
|
-
/// @example scss
|
9
|
-
/// _retrieve-neat-setting($neat-grid)
|
10
|
-
///
|
11
|
-
/// @access private
|
12
|
-
|
13
|
-
@function _neat-merge-defaults($grid) {
|
14
|
-
$_merged-grid: map-merge((
|
15
|
-
columns: 12,
|
16
|
-
gutter: 20px,
|
17
|
-
media: null,
|
18
|
-
color: rgba(#00d4ff, 0.25),
|
19
|
-
direction: ltr,
|
20
|
-
), $grid);
|
21
|
-
|
22
|
-
@return $_merged-grid;
|
23
|
-
}
|
@@ -1,22 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Return the oppoite of the float direction of the grid.
|
3
|
-
///
|
4
|
-
/// @argument {map} $grid
|
5
|
-
///
|
6
|
-
/// @return {string}
|
7
|
-
///
|
8
|
-
/// @example scss
|
9
|
-
/// _neat-opposite-direction($neat-grid)
|
10
|
-
///
|
11
|
-
/// @access private
|
12
|
-
|
13
|
-
@function _neat-opposite-direction($grid) {
|
14
|
-
$_direction: _retrieve-neat-setting($grid, direction);
|
15
|
-
$_float-direction: null;
|
16
|
-
@if $_direction == "ltr" {
|
17
|
-
$_float-direction: right;
|
18
|
-
} @else if $_direction == "rtl" {
|
19
|
-
$_float-direction: left;
|
20
|
-
}
|
21
|
-
@return $_float-direction;
|
22
|
-
}
|
@@ -1,22 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Parse a column count like `3 of 5` and retur the total coloumn count.
|
3
|
-
/// This is to allow a shorthand for custom grids without using a settings map.
|
4
|
-
///
|
5
|
-
///
|
6
|
-
/// @argument {list} $span
|
7
|
-
///
|
8
|
-
/// @return {number}
|
9
|
-
///
|
10
|
-
/// @example scss
|
11
|
-
/// _neat-parse-columns(3 of 5)
|
12
|
-
///
|
13
|
-
/// @access private
|
14
|
-
|
15
|
-
@function _neat-parse-columns($span) {
|
16
|
-
@if length($span) == 3 {
|
17
|
-
$_total-columns: nth($span, 3);
|
18
|
-
@return $_total-columns;
|
19
|
-
} @else if length($span) == 2 or if length($span) >= 3 {
|
20
|
-
@error "`$column` should contain 2 values, seperated by an `of`";
|
21
|
-
}
|
22
|
-
}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Parse media types. If the property is a string then return it, otherwise
|
3
|
-
/// assume screen and min-width.
|
4
|
-
///
|
5
|
-
/// @argument {string | number (with unit)} $media
|
6
|
-
///
|
7
|
-
/// @return {number}
|
8
|
-
///
|
9
|
-
/// @example scss
|
10
|
-
/// _neat-parse-media($grid, 1000px)
|
11
|
-
///
|
12
|
-
/// @access private
|
13
|
-
|
14
|
-
@function _neat-parse-media($media) {
|
15
|
-
@if type-of($media) == number {
|
16
|
-
@return "only screen and (min-width: #{$media})";
|
17
|
-
} @else if type-of($media) == string {
|
18
|
-
@return "#{$media}";
|
19
|
-
}
|
20
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// This function recives a grid map and merges it with Neat's defauls.
|
3
|
-
/// It then returns the value of the property that has been passed to it.
|
4
|
-
///
|
5
|
-
/// @argument {map} $grid
|
6
|
-
///
|
7
|
-
/// @argument {string} $setting
|
8
|
-
///
|
9
|
-
/// @return {boolean | color | list | number | string}
|
10
|
-
///
|
11
|
-
/// @example scss
|
12
|
-
/// _retrieve-neat-setting($neat-grid, columns)
|
13
|
-
///
|
14
|
-
/// @access private
|
15
|
-
|
16
|
-
@function _retrieve-neat-setting($grid, $setting) {
|
17
|
-
$_grid-settings: map-merge(_neat-merge-defaults($neat-grid), $grid);
|
18
|
-
@return map-get($_grid-settings, $setting);
|
19
|
-
}
|
@@ -1,36 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Creates collapsed grid object that consumes the gutters of its container,
|
3
|
-
/// for use in nested layouts.
|
4
|
-
///
|
5
|
-
/// @group features
|
6
|
-
///
|
7
|
-
/// @name Grid collapse
|
8
|
-
///
|
9
|
-
/// @argument {map} $grid [$neat-grid]
|
10
|
-
/// The grid to be used to generate the collapsed container.
|
11
|
-
/// By default, the global `$neat-grid` will be used.
|
12
|
-
///
|
13
|
-
/// @example scss
|
14
|
-
/// .element {
|
15
|
-
/// @include grid-collapse;
|
16
|
-
/// }
|
17
|
-
///
|
18
|
-
/// @example css
|
19
|
-
/// .element {
|
20
|
-
/// float: left;
|
21
|
-
/// margin-left: -20px;
|
22
|
-
/// margin-right: -20px;
|
23
|
-
/// width: calc(100% + 40px);
|
24
|
-
/// }
|
25
|
-
|
26
|
-
@mixin grid-collapse($grid: $neat-grid) {
|
27
|
-
$_grid-gutter: _retrieve-neat-setting($grid, gutter);
|
28
|
-
|
29
|
-
@if unit($_grid-gutter) == "%" {
|
30
|
-
@warn "`grid-collapse` is not compatible with percentage based gutters.";
|
31
|
-
}
|
32
|
-
|
33
|
-
margin-#{_neat-float-direction($grid)}: -($_grid-gutter);
|
34
|
-
margin-#{_neat-opposite-direction($grid)}: -($_grid-gutter);
|
35
|
-
width: calc(100% + #{($_grid-gutter * 2)});
|
36
|
-
}
|
@@ -1,39 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Creates a grid column of requested size.
|
3
|
-
///
|
4
|
-
/// @group features
|
5
|
-
///
|
6
|
-
/// @name Grid column
|
7
|
-
///
|
8
|
-
/// @argument {number (unitless)} $columns [null]
|
9
|
-
/// Specifies the number of columns an element should span based on the total
|
10
|
-
/// columns of the grid.
|
11
|
-
///
|
12
|
-
/// This can also be defined in a shorthand syntaxt which also contains the
|
13
|
-
/// total column count such as `3 of 5`.
|
14
|
-
///
|
15
|
-
/// @argument {map} $grid [$neat-grid]
|
16
|
-
/// The grid to be used to generate the column.
|
17
|
-
/// By default, the global `$neat-grid` will be used.
|
18
|
-
///
|
19
|
-
/// @example scss
|
20
|
-
/// .element {
|
21
|
-
/// @include grid-column(3);
|
22
|
-
/// }
|
23
|
-
///
|
24
|
-
/// @example css
|
25
|
-
/// .element {
|
26
|
-
/// width: calc(25% - 25px);
|
27
|
-
/// float: left;
|
28
|
-
/// margin-left: 20px;
|
29
|
-
/// }
|
30
|
-
|
31
|
-
@mixin grid-column($columns: null, $grid: $neat-grid) {
|
32
|
-
$columns: _neat-column-default($grid, $columns);
|
33
|
-
$_grid-columns: _retrieve-neat-setting($grid, columns);
|
34
|
-
$_grid-gutter: _retrieve-neat-setting($grid, gutter);
|
35
|
-
|
36
|
-
width: calc(#{_neat-column-width($grid, $columns)});
|
37
|
-
float: _neat-float-direction($grid);
|
38
|
-
margin-#{_neat-float-direction($grid)}: $_grid-gutter;
|
39
|
-
}
|
@@ -1,30 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Creates a grid container with clearfix.
|
3
|
-
///
|
4
|
-
/// @group features
|
5
|
-
///
|
6
|
-
/// @name Grid container
|
7
|
-
///
|
8
|
-
/// @argument {map} $grid [$neat-grid]
|
9
|
-
/// The grid to be used to generate the container.
|
10
|
-
/// By default, the global `$neat-grid` will be used.
|
11
|
-
///
|
12
|
-
/// @example scss
|
13
|
-
/// .element {
|
14
|
-
/// @include grid-container;
|
15
|
-
/// }
|
16
|
-
///
|
17
|
-
/// @example css
|
18
|
-
/// .element::after {
|
19
|
-
/// clear: both;
|
20
|
-
/// content: "";
|
21
|
-
/// display: block;
|
22
|
-
/// }
|
23
|
-
|
24
|
-
@mixin grid-container($grid: $neat-grid) {
|
25
|
-
&::after {
|
26
|
-
clear: both;
|
27
|
-
content: "";
|
28
|
-
display: block;
|
29
|
-
}
|
30
|
-
}
|
@@ -1,67 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// `grid-media` allows you to change your layout based on a media query.
|
3
|
-
/// For example, an object can span 3 columns on small screens and 6 columns
|
4
|
-
/// on large screens.
|
5
|
-
///
|
6
|
-
/// You can take this a step further and set different grid attributes like
|
7
|
-
/// gutter size and total column count for each media query. So, for example,
|
8
|
-
/// you can have a `1rem` gutter on small screens, and a `2rem` gutter on large
|
9
|
-
/// screens.
|
10
|
-
///
|
11
|
-
/// @group features
|
12
|
-
///
|
13
|
-
/// @name Grid media
|
14
|
-
///
|
15
|
-
/// @argument {map} $grid
|
16
|
-
/// The grid to be used within the scope of the block.
|
17
|
-
/// This grid should include the `media` property to determine the expression
|
18
|
-
/// for the media query.
|
19
|
-
///
|
20
|
-
/// @content
|
21
|
-
/// Grid media will temporarily the override the default grid with the
|
22
|
-
/// attributes of the custom grid. This change is scoped to within the mixin
|
23
|
-
/// block, and once the mixin has ended the default grid will revert to its
|
24
|
-
/// original state as defined by `$neat-grid`. This allows for different
|
25
|
-
/// gutter width and column count based on screen size or other properties.
|
26
|
-
///
|
27
|
-
/// @example scss
|
28
|
-
/// $custom-neat-grid: (
|
29
|
-
/// columns: 12,
|
30
|
-
/// gutter: 50px,
|
31
|
-
/// media: 1000px,
|
32
|
-
/// );
|
33
|
-
///
|
34
|
-
/// .element {
|
35
|
-
/// @include grid-column(3);
|
36
|
-
///
|
37
|
-
/// @include grid-media($custom-neat-grid){
|
38
|
-
/// @include grid-column(6);
|
39
|
-
/// }
|
40
|
-
/// }
|
41
|
-
///
|
42
|
-
/// @example css
|
43
|
-
/// .element {
|
44
|
-
/// width: calc(25% - 25px);
|
45
|
-
/// float: left;
|
46
|
-
/// margin-left: 20px;
|
47
|
-
/// }
|
48
|
-
///
|
49
|
-
/// @media only screen and (min-width: 1000px) {
|
50
|
-
/// .element {
|
51
|
-
/// width: calc(50% - 75px);
|
52
|
-
/// float: left;
|
53
|
-
/// margin-left: 50px;
|
54
|
-
/// }
|
55
|
-
/// }
|
56
|
-
|
57
|
-
@mixin grid-media($grid) {
|
58
|
-
$_media: _retrieve-neat-setting($grid, media);
|
59
|
-
$_query: _neat-parse-media($_media);
|
60
|
-
|
61
|
-
@media #{$_query} {
|
62
|
-
$_default-neat-grid: $neat-grid;
|
63
|
-
$neat-grid: map-merge($neat-grid, $grid) !global;
|
64
|
-
@content;
|
65
|
-
$neat-grid: $_default-neat-grid !global;
|
66
|
-
}
|
67
|
-
}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Push or pull a grid column by manipulating its left margin.
|
3
|
-
///
|
4
|
-
/// @group features
|
5
|
-
///
|
6
|
-
/// @name Grid push
|
7
|
-
///
|
8
|
-
/// @argument {number (unitless)} $push [false]
|
9
|
-
/// The number of columns to push the column.
|
10
|
-
///
|
11
|
-
/// @argument {map} $grid [$neat-grid]
|
12
|
-
/// The grid to be used to detirmine how far to push the column.
|
13
|
-
/// By default, the global `$neat-grid` will be used.
|
14
|
-
///
|
15
|
-
/// @example scss
|
16
|
-
/// .element {
|
17
|
-
/// @include grid-push(3);
|
18
|
-
/// }
|
19
|
-
///
|
20
|
-
/// @example css
|
21
|
-
/// .element {
|
22
|
-
/// margin-left: calc(25% - 25px + 40px);
|
23
|
-
/// }
|
24
|
-
|
25
|
-
@mixin grid-push($push: false, $grid: $neat-grid) {
|
26
|
-
$_grid-columns: _retrieve-neat-setting($grid, columns);
|
27
|
-
$_grid-gutter: _retrieve-neat-setting($grid, gutter);
|
28
|
-
|
29
|
-
@if $push {
|
30
|
-
$_gutter-affordance: $_grid-gutter * 2;
|
31
|
-
$_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance});
|
32
|
-
margin-#{_neat-float-direction($grid)}: $_margin-value;
|
33
|
-
} @else {
|
34
|
-
$_margin-value: _retrieve-neat-setting($grid, gutter);
|
35
|
-
margin-#{_neat-float-direction($grid)}: $_margin-value;
|
36
|
-
}
|
37
|
-
}
|
@@ -1,36 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Shift columns and reorder them within their container using relative
|
3
|
-
/// positioning.
|
4
|
-
///
|
5
|
-
/// @group features
|
6
|
-
///
|
7
|
-
/// @name Grid shift
|
8
|
-
///
|
9
|
-
/// @argument {number (unitless)} $shift [false]
|
10
|
-
/// The number of columns to shift the column.
|
11
|
-
///
|
12
|
-
/// @argument {map} $grid [$neat-grid]
|
13
|
-
/// The grid to be used to detirmine how far to shift the column.
|
14
|
-
/// By default, the global `$neat-grid` will be used.
|
15
|
-
///
|
16
|
-
/// @example scss
|
17
|
-
/// .element {
|
18
|
-
/// @include grid-shift(3);
|
19
|
-
/// }
|
20
|
-
///
|
21
|
-
/// @example css
|
22
|
-
/// .element {
|
23
|
-
/// left: calc(25% - 25px + 20px);
|
24
|
-
/// position: relative;
|
25
|
-
/// }
|
26
|
-
|
27
|
-
@mixin grid-shift($shift: false, $grid: $neat-grid) {
|
28
|
-
@if $shift {
|
29
|
-
$_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)});
|
30
|
-
#{_neat-float-direction($grid)}: $_shift-value;
|
31
|
-
} @else {
|
32
|
-
#{_neat-float-direction($grid)}: auto;
|
33
|
-
}
|
34
|
-
|
35
|
-
position: relative;
|
36
|
-
}
|
@@ -1,67 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
/// Creates a series of guide lines using the `background-image` property on a
|
3
|
-
/// grid container to visualise the columns and gutters of the grid.
|
4
|
-
///
|
5
|
-
/// @group features
|
6
|
-
///
|
7
|
-
/// @name Grid visual
|
8
|
-
///
|
9
|
-
/// @argument {color} $color
|
10
|
-
/// The color of the guide lines created.
|
11
|
-
///
|
12
|
-
/// @argument {map} $grid [$neat-grid]
|
13
|
-
/// The grid used to determine the guides
|
14
|
-
///
|
15
|
-
/// @example scss
|
16
|
-
/// .element {
|
17
|
-
/// @include grid-visual;
|
18
|
-
/// }
|
19
|
-
///
|
20
|
-
/// @example css
|
21
|
-
/// .element {
|
22
|
-
/// background-image: linear-gradient( … ) ;
|
23
|
-
/// }
|
24
|
-
|
25
|
-
@mixin grid-visual($color: null, $grid: $neat-grid) {
|
26
|
-
@if not $color {
|
27
|
-
$color: _retrieve-neat-setting($grid, color);
|
28
|
-
}
|
29
|
-
|
30
|
-
$_grid-columns: _retrieve-neat-setting($grid, columns);
|
31
|
-
$_grid-gutter: _retrieve-neat-setting($grid, gutter);
|
32
|
-
$_grid-visual-object: () !default;
|
33
|
-
$_grid-visual:
|
34
|
-
$color,
|
35
|
-
$color $_grid-gutter,
|
36
|
-
transparent $_grid-gutter,
|
37
|
-
;
|
38
|
-
|
39
|
-
@for $i from 1 to $_grid-columns {
|
40
|
-
$_grid-visual-local: (
|
41
|
-
#{$i}: "#{_neat-column-width($grid, $i)} + #{$_grid-gutter}",
|
42
|
-
);
|
43
|
-
|
44
|
-
$_grid-visual-object: map-merge($_grid-visual-object, $_grid-visual-local);
|
45
|
-
}
|
46
|
-
|
47
|
-
@each $stop, $location in $_grid-visual-object {
|
48
|
-
$_grid-visual-loop-list:
|
49
|
-
transparent calc(#{$location}),
|
50
|
-
$color calc(#{$location}),
|
51
|
-
$color calc(#{$location} + #{$_grid-gutter}),
|
52
|
-
transparent calc(#{$location} + #{$_grid-gutter}),
|
53
|
-
;
|
54
|
-
|
55
|
-
$_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
|
56
|
-
}
|
57
|
-
|
58
|
-
$_grid-visual-loop-list:
|
59
|
-
transparent calc(100% - #{$_grid-gutter}),
|
60
|
-
$color calc(100% - #{$_grid-gutter}),
|
61
|
-
$color calc(100%),
|
62
|
-
;
|
63
|
-
|
64
|
-
$_grid-visual: _neat-append-grid-visual($_grid-visual, $_grid-visual-loop-list);
|
65
|
-
|
66
|
-
background-image: linear-gradient(to right, $_grid-visual);
|
67
|
-
}
|