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.
Files changed (126) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/forms/text-input.html +2 -0
  3. data/_sass/_colors.scss +18 -3
  4. data/_sass/components/text-input.scss +71 -0
  5. data/_sass/vendor/bourbon/_bourbon-deprecate.scss +19 -0
  6. data/_sass/vendor/bourbon/_bourbon-deprecated-upcoming.scss +425 -0
  7. data/_sass/vendor/bourbon/_bourbon.scss +90 -0
  8. data/_sass/vendor/bourbon/addons/_border-color.scss +29 -0
  9. data/_sass/vendor/bourbon/addons/_border-radius.scss +48 -0
  10. data/_sass/vendor/bourbon/addons/_border-style.scss +28 -0
  11. data/_sass/vendor/bourbon/addons/_border-width.scss +28 -0
  12. data/_sass/vendor/bourbon/addons/_buttons.scss +69 -0
  13. data/_sass/vendor/bourbon/addons/_clearfix.scss +25 -0
  14. data/_sass/vendor/bourbon/addons/_ellipsis.scss +30 -0
  15. data/_sass/vendor/bourbon/addons/_font-stacks.scss +31 -0
  16. data/_sass/vendor/bourbon/addons/_hide-text.scss +27 -0
  17. data/_sass/vendor/bourbon/addons/_margin.scss +29 -0
  18. data/_sass/vendor/bourbon/addons/_padding.scss +29 -0
  19. data/_sass/vendor/bourbon/addons/_position.scss +51 -0
  20. data/_sass/vendor/bourbon/addons/_prefixer.scss +66 -0
  21. data/_sass/vendor/bourbon/addons/_retina-image.scss +27 -0
  22. data/_sass/vendor/bourbon/addons/_size.scss +51 -0
  23. data/_sass/vendor/bourbon/addons/_text-inputs.scss +118 -0
  24. data/_sass/vendor/bourbon/addons/_timing-functions.scss +34 -0
  25. data/_sass/vendor/bourbon/addons/_triangle.scss +63 -0
  26. data/_sass/vendor/bourbon/addons/_word-wrap.scss +29 -0
  27. data/_sass/vendor/bourbon/css3/_animation.scss +61 -0
  28. data/_sass/vendor/bourbon/css3/_appearance.scss +5 -0
  29. data/_sass/vendor/bourbon/css3/_backface-visibility.scss +5 -0
  30. data/_sass/vendor/bourbon/css3/_background-image.scss +44 -0
  31. data/_sass/vendor/bourbon/css3/_background.scss +57 -0
  32. data/_sass/vendor/bourbon/css3/_border-image.scss +61 -0
  33. data/_sass/vendor/bourbon/css3/_calc.scss +6 -0
  34. data/_sass/vendor/bourbon/css3/_columns.scss +67 -0
  35. data/_sass/vendor/bourbon/css3/_filter.scss +6 -0
  36. data/_sass/vendor/bourbon/css3/_flex-box.scss +327 -0
  37. data/_sass/vendor/bourbon/css3/_font-face.scss +29 -0
  38. data/_sass/vendor/bourbon/css3/_font-feature-settings.scss +6 -0
  39. data/_sass/vendor/bourbon/css3/_hidpi-media-query.scss +12 -0
  40. data/_sass/vendor/bourbon/css3/_hyphens.scss +6 -0
  41. data/_sass/vendor/bourbon/css3/_image-rendering.scss +15 -0
  42. data/_sass/vendor/bourbon/css3/_keyframes.scss +38 -0
  43. data/_sass/vendor/bourbon/css3/_linear-gradient.scss +40 -0
  44. data/_sass/vendor/bourbon/css3/_perspective.scss +12 -0
  45. data/_sass/vendor/bourbon/css3/_placeholder.scss +10 -0
  46. data/_sass/vendor/bourbon/css3/_radial-gradient.scss +40 -0
  47. data/_sass/vendor/bourbon/css3/_selection.scss +44 -0
  48. data/_sass/vendor/bourbon/css3/_text-decoration.scss +27 -0
  49. data/_sass/vendor/bourbon/css3/_transform.scss +21 -0
  50. data/_sass/vendor/bourbon/css3/_transition.scss +81 -0
  51. data/_sass/vendor/bourbon/css3/_user-select.scss +5 -0
  52. data/_sass/vendor/bourbon/functions/_assign-inputs.scss +16 -0
  53. data/_sass/vendor/bourbon/functions/_contains-falsy.scss +25 -0
  54. data/_sass/vendor/bourbon/functions/_contains.scss +31 -0
  55. data/_sass/vendor/bourbon/functions/_is-length.scss +16 -0
  56. data/_sass/vendor/bourbon/functions/_is-light.scss +26 -0
  57. data/_sass/vendor/bourbon/functions/_is-number.scss +16 -0
  58. data/_sass/vendor/bourbon/functions/_is-size.scss +18 -0
  59. data/_sass/vendor/bourbon/functions/_modular-scale.scss +74 -0
  60. data/_sass/vendor/bourbon/functions/_px-to-em.scss +24 -0
  61. data/_sass/vendor/bourbon/functions/_px-to-rem.scss +26 -0
  62. data/_sass/vendor/bourbon/functions/_shade.scss +24 -0
  63. data/_sass/vendor/bourbon/functions/_strip-units.scss +22 -0
  64. data/_sass/vendor/bourbon/functions/_tint.scss +24 -0
  65. data/_sass/vendor/bourbon/functions/_transition-property-name.scss +37 -0
  66. data/_sass/vendor/bourbon/functions/_unpack.scss +32 -0
  67. data/_sass/vendor/bourbon/helpers/_convert-units.scss +26 -0
  68. data/_sass/vendor/bourbon/helpers/_directional-values.scss +108 -0
  69. data/_sass/vendor/bourbon/helpers/_font-source-declaration.scss +53 -0
  70. data/_sass/vendor/bourbon/helpers/_gradient-positions-parser.scss +24 -0
  71. data/_sass/vendor/bourbon/helpers/_linear-angle-parser.scss +35 -0
  72. data/_sass/vendor/bourbon/helpers/_linear-gradient-parser.scss +51 -0
  73. data/_sass/vendor/bourbon/helpers/_linear-positions-parser.scss +77 -0
  74. data/_sass/vendor/bourbon/helpers/_linear-side-corner-parser.scss +41 -0
  75. data/_sass/vendor/bourbon/helpers/_radial-arg-parser.scss +74 -0
  76. data/_sass/vendor/bourbon/helpers/_radial-gradient-parser.scss +55 -0
  77. data/_sass/vendor/bourbon/helpers/_radial-positions-parser.scss +28 -0
  78. data/_sass/vendor/bourbon/helpers/_render-gradients.scss +31 -0
  79. data/_sass/vendor/bourbon/helpers/_shape-size-stripper.scss +15 -0
  80. data/_sass/vendor/bourbon/helpers/_str-to-num.scss +55 -0
  81. data/_sass/vendor/bourbon/settings/_asset-pipeline.scss +7 -0
  82. data/_sass/vendor/bourbon/settings/_deprecation-warnings.scss +8 -0
  83. data/_sass/vendor/bourbon/settings/_prefixer.scss +9 -0
  84. data/_sass/vendor/bourbon/settings/_px-to-em.scss +1 -0
  85. data/_sass/vendor/neat/_neat-helpers.scss +8 -0
  86. data/_sass/vendor/neat/_neat.scss +19 -22
  87. data/_sass/vendor/neat/functions/_new-breakpoint.scss +49 -0
  88. data/_sass/vendor/neat/functions/_private.scss +114 -0
  89. data/_sass/vendor/neat/grid/_box-sizing.scss +15 -0
  90. data/_sass/vendor/neat/grid/_direction-context.scss +33 -0
  91. data/_sass/vendor/neat/grid/_display-context.scss +28 -0
  92. data/_sass/vendor/neat/grid/_fill-parent.scss +22 -0
  93. data/_sass/vendor/neat/grid/_media.scss +92 -0
  94. data/_sass/vendor/neat/grid/_omega.scss +87 -0
  95. data/_sass/vendor/neat/grid/_outer-container.scss +38 -0
  96. data/_sass/vendor/neat/grid/_pad.scss +25 -0
  97. data/_sass/vendor/neat/grid/_private.scss +35 -0
  98. data/_sass/vendor/neat/grid/_row.scss +52 -0
  99. data/_sass/vendor/neat/grid/_shift.scss +50 -0
  100. data/_sass/vendor/neat/grid/_span-columns.scss +94 -0
  101. data/_sass/vendor/neat/grid/_to-deprecate.scss +97 -0
  102. data/_sass/vendor/neat/grid/_visual-grid.scss +42 -0
  103. data/_sass/vendor/neat/settings/_disable-warnings.scss +13 -0
  104. data/_sass/vendor/neat/settings/_grid.scss +51 -0
  105. data/_sass/vendor/neat/settings/_visual-grid.scss +27 -0
  106. data/assets/style.scss +7 -4
  107. metadata +103 -20
  108. data/_sass/components/.keep +0 -0
  109. data/_sass/vendor/neat/neat/functions/_neat-append-grid-visual.scss +0 -21
  110. data/_sass/vendor/neat/neat/functions/_neat-column-default.scss +0 -23
  111. data/_sass/vendor/neat/neat/functions/_neat-column-ratio.scss +0 -24
  112. data/_sass/vendor/neat/neat/functions/_neat-column-width.scss +0 -25
  113. data/_sass/vendor/neat/neat/functions/_neat-float-direction.scss +0 -22
  114. data/_sass/vendor/neat/neat/functions/_neat-merge-defaults.scss +0 -23
  115. data/_sass/vendor/neat/neat/functions/_neat-opposite-direction.scss +0 -22
  116. data/_sass/vendor/neat/neat/functions/_neat-parse-columns.scss +0 -22
  117. data/_sass/vendor/neat/neat/functions/_neat-parse-media.scss +0 -20
  118. data/_sass/vendor/neat/neat/functions/_retrieve-neat-settings.scss +0 -19
  119. data/_sass/vendor/neat/neat/mixins/_grid-collapse.scss +0 -36
  120. data/_sass/vendor/neat/neat/mixins/_grid-column.scss +0 -39
  121. data/_sass/vendor/neat/neat/mixins/_grid-container.scss +0 -30
  122. data/_sass/vendor/neat/neat/mixins/_grid-media.scss +0 -67
  123. data/_sass/vendor/neat/neat/mixins/_grid-push.scss +0 -37
  124. data/_sass/vendor/neat/neat/mixins/_grid-shift.scss +0 -36
  125. data/_sass/vendor/neat/neat/mixins/_grid-visual.scss +0 -67
  126. 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
- }