neat 1.3.0 → 1.4.0
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/NEWS.md +1 -0
- data/README.md +3 -1
- data/app/assets/stylesheets/functions/_private.scss +4 -4
- data/app/assets/stylesheets/grid/_private.scss +29 -0
- data/app/assets/stylesheets/grid/_shift.scss +0 -1
- data/app/assets/stylesheets/grid/_span-columns.scss +22 -29
- data/lib/neat/version.rb +1 -1
- data/spec/neat/columns_spec.rb +14 -4
- data/test/span-columns.scss +5 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: b1791bf7c055a1329480da34064aaf4e16d91ea4
|
4
|
+
data.tar.gz: 57900e1f7741a736869c07a076685f88643e88a0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d80a94016fbb0777ec115d2aef9389b6504cc8cdf5e2c43358f563365dc13596f9128e2cb83a2ba43994d7d757cf18fa3cfeaa10a8f93ac9113fb5cc1579f2a9
|
7
|
+
data.tar.gz: c7723d03cea1726e6f2f50d8d0478065f55eae232dfe3743b21ba5cd235aa5fd58b5fc8775f83ac876cd052798a1b724eb1315d4a4699bfacea93f701e04d96e
|
data/NEWS.md
CHANGED
@@ -3,6 +3,7 @@
|
|
3
3
|
* New: Add global RTL layout support
|
4
4
|
* New: Add row-specific RTL layout support
|
5
5
|
* New: Add auto-clearing for elements using `omega(nth-child)` (works only with simple nth-child arguments due to limited string operations in Sass)
|
6
|
+
* New: `reset-display`, `reset-layout-direction`, and `reset-all` for all your reset needs!
|
6
7
|
* Fix: The visual grid no longer blocks user interactions
|
7
8
|
* Deprecate: `omega()` will no longer take `$direction` in favor of `row($direction)` or `$default-layout-direction`
|
8
9
|
|
data/README.md
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
[](http://thoughtbot.com/neat)
|
2
2
|
|
3
|
+
[](http://badge.fury.io/rb/neat) [](https://codeclimate.com/github/thoughtbot/neat)
|
4
|
+
|
3
5
|
**Neat** is an open source fluid grid framework built on top of [Bourbon](http://bourbon.io) with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
|
4
6
|
|
5
7
|
|
@@ -94,8 +96,8 @@ $grid-columns: 10;
|
|
94
96
|
$max-width: em(1088);
|
95
97
|
|
96
98
|
// Define your breakpoints
|
97
|
-
$mobile: new-breakpoint(max-width 480px 4);
|
98
99
|
$tablet: new-breakpoint(max-width 768px 8);
|
100
|
+
$mobile: new-breakpoint(max-width 480px 4);
|
99
101
|
```
|
100
102
|
|
101
103
|
See the [docs](http://neat.bourbon.io/docs/#variables) for a full list of settings.
|
@@ -56,14 +56,14 @@
|
|
56
56
|
|
57
57
|
@for $i from 1 to $grid-columns*2 {
|
58
58
|
@if is-even($i) {
|
59
|
-
$values: append($values, $transparent $column-offset);
|
60
|
-
$values: append($values, $color $column-offset);
|
59
|
+
$values: append($values, $transparent $column-offset, comma);
|
60
|
+
$values: append($values, $color $column-offset, comma);
|
61
61
|
$column-offset: $column-offset + $column-width;
|
62
62
|
}
|
63
63
|
|
64
64
|
@else {
|
65
|
-
$values: append($values, $color $column-offset);
|
66
|
-
$values: append($values, $transparent $column-offset);
|
65
|
+
$values: append($values, $color $column-offset, comma);
|
66
|
+
$values: append($values, $transparent $column-offset, comma);
|
67
67
|
$column-offset: $column-offset + $gutter-width;
|
68
68
|
}
|
69
69
|
}
|
@@ -19,3 +19,32 @@ $layout-direction: nil !default;
|
|
19
19
|
@function grid-width($n) {
|
20
20
|
@return $n * $gw-column + ($n - 1) * $gw-gutter;
|
21
21
|
}
|
22
|
+
|
23
|
+
@function get-parent-columns($columns) {
|
24
|
+
@if $columns != $grid-columns {
|
25
|
+
$parent-columns: $columns;
|
26
|
+
} @else {
|
27
|
+
$parent-columns: $grid-columns;
|
28
|
+
}
|
29
|
+
|
30
|
+
@return $parent-columns;
|
31
|
+
}
|
32
|
+
|
33
|
+
@function is-display-table($container-is-display-table, $display) {
|
34
|
+
$display-table: false;
|
35
|
+
|
36
|
+
@if $container-is-display-table == true {
|
37
|
+
$display-table: true;
|
38
|
+
} @else if $display == table {
|
39
|
+
$display-table: true;
|
40
|
+
}
|
41
|
+
|
42
|
+
@return $display-table;
|
43
|
+
}
|
44
|
+
|
45
|
+
@function get-padding-for-table-layout($columns, $total-columns) {
|
46
|
+
$total-padding: flex-gutter($total-columns) * ($columns - 1);
|
47
|
+
$padding: $total-padding / $columns;
|
48
|
+
|
49
|
+
@return $padding;
|
50
|
+
}
|
@@ -1,45 +1,38 @@
|
|
1
1
|
@mixin span-columns($span: $columns of $container-columns, $display: block) {
|
2
|
-
|
3
2
|
$columns: nth($span, 1);
|
4
3
|
$container-columns: container-span($span);
|
5
|
-
|
4
|
+
|
5
|
+
// Set nesting context (used by shift())
|
6
|
+
$parent-columns: get-parent-columns($container-columns);
|
6
7
|
|
7
8
|
$direction: get-direction($layout-direction, $default-layout-direction);
|
8
9
|
$opposite-direction: get-opposite-direction($direction);
|
9
10
|
|
10
|
-
|
11
|
-
$parent-columns: $container-columns;
|
12
|
-
} @else {
|
13
|
-
$parent-columns: $grid-columns;
|
14
|
-
}
|
15
|
-
|
16
|
-
@if $container-display-table == true {
|
17
|
-
$display-table: true;
|
18
|
-
} @else if $display == table {
|
19
|
-
$display-table: true;
|
20
|
-
} @else {
|
21
|
-
$display-table: false;
|
22
|
-
}
|
11
|
+
$display-table: is-display-table($container-display-table, $display);
|
23
12
|
|
24
13
|
@if $display-table {
|
14
|
+
$padding: get-padding-for-table-layout($columns, $container-columns);
|
25
15
|
display: table-cell;
|
26
|
-
padding-#{$direction}:
|
27
|
-
width: flex-grid($columns, $container-columns) +
|
28
|
-
|
29
|
-
&:last-child {
|
30
|
-
width: flex-grid($columns, $container-columns);
|
31
|
-
padding-#{$direction}: 0;
|
32
|
-
}
|
33
|
-
}
|
34
|
-
|
35
|
-
@else {
|
16
|
+
padding-#{$direction}: $padding;
|
17
|
+
width: flex-grid($columns, $container-columns) + $padding;
|
18
|
+
} @else {
|
36
19
|
display: block;
|
37
20
|
float: #{$opposite-direction};
|
38
|
-
margin-#{$direction}: flex-gutter($container-columns);
|
39
|
-
width: flex-grid($columns, $container-columns);
|
40
21
|
|
41
|
-
|
42
|
-
|
22
|
+
@if $display == collapse {
|
23
|
+
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
|
24
|
+
|
25
|
+
&:last-child {
|
26
|
+
width: flex-grid($columns, $container-columns);
|
27
|
+
}
|
28
|
+
|
29
|
+
} @else {
|
30
|
+
margin-#{$direction}: flex-gutter($container-columns);
|
31
|
+
width: flex-grid($columns, $container-columns);
|
32
|
+
|
33
|
+
&:last-child {
|
34
|
+
margin-#{$direction}: 0;
|
35
|
+
}
|
43
36
|
}
|
44
37
|
}
|
45
38
|
}
|
data/lib/neat/version.rb
CHANGED
data/spec/neat/columns_spec.rb
CHANGED
@@ -42,12 +42,22 @@ describe "@include span-columns()" do
|
|
42
42
|
expect('.span-columns-table').to have_rule('display: table-cell')
|
43
43
|
end
|
44
44
|
|
45
|
-
it "sets padding
|
46
|
-
expect('.span-columns-table').to have_rule('padding-right:
|
45
|
+
it "sets padding evenly between table cells" do
|
46
|
+
expect('.span-columns-table').to have_rule('padding-right: 1.17883%')
|
47
|
+
end
|
48
|
+
end
|
49
|
+
|
50
|
+
context "with argument (collapse)" do
|
51
|
+
it "appends gutter width to column width" do
|
52
|
+
expect('.span-columns-collapse').to have_rule('width: 51.17883%')
|
53
|
+
end
|
54
|
+
|
55
|
+
it "removes the next gutter" do
|
56
|
+
expect('.span-columns-collapse').to_not have_rule('margin-right')
|
47
57
|
end
|
48
58
|
|
49
|
-
it "
|
50
|
-
expect('.span-columns-
|
59
|
+
it "removes gutter percentage from the width of the last child" do
|
60
|
+
expect('.span-columns-collapse:last-child').to have_rule('width: 48.82117%')
|
51
61
|
end
|
52
62
|
end
|
53
63
|
end
|
data/test/span-columns.scss
CHANGED
@@ -9,9 +9,13 @@
|
|
9
9
|
}
|
10
10
|
|
11
11
|
.span-columns-table {
|
12
|
-
@include span-columns(
|
12
|
+
@include span-columns(2, table);
|
13
13
|
}
|
14
14
|
|
15
15
|
.span-columns-inline-block {
|
16
16
|
@include span-columns(6, inline-block);
|
17
17
|
}
|
18
|
+
|
19
|
+
.span-columns-collapse {
|
20
|
+
@include span-columns(6, collapse);
|
21
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: neat
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Kyle Fiedler
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2013-
|
13
|
+
date: 2013-08-28 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: sass
|