kylefang/sass-layout
1
0
Fork 0
mirror of https://github.com/zhigang1992/sass-layout.git synced 2026-01-12 22:41:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

should layout node with padding and a child with margin

Browse Source
This commit is contained in:
Kyle Fang
2015-02-02 23:59:34 +08:00
parent 9726b7ee5f
commit e4edbcc0e1
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
sass_layout.scss
View File

@@ -76,10 +76,6 @@ $global-frame-map: () !global;
@mixin render-one-layout($node) {
$node: calculate-params-on-direction($node, top);
$node: calculate-params-on-direction($node, left);
$node: map-merge($node, (
height: max(map-get($node, height), map-get($node, padding-top) + map-get($node, padding-bottom)),
width: max(map-get($node, width), map-get($node, padding-left) + map-get($node, padding-right)),
));
@include save-layout($node);
$child-nodes: prepare-child-nodes-for-justify-content($node);
@@ -87,8 +83,14 @@ $global-frame-map: () !global;
@include render-one-layout($child_node);
}
$new-node: get-layout(map-get($node, selector));
@include adjust-parent-if-needed($new-node);
$node: get-layout(map-get($node, selector));
@include adjust-parent-if-needed($node);
$node: map-merge($node, (
height: max(map-get($node, height), map-get($node, padding-top) + map-get($node, padding-bottom)),
width: max(map-get($node, width), map-get($node, padding-left) + map-get($node, padding-right)),
));
@include save-layout($node);
}
@function prepare-child-nodes-for-justify-content($node) {
@@ -213,12 +215,12 @@ $global-frame-map: () !global;
@if has-parent($node) {
$parent: parent($node);
@if map-get($parent, width) == 0 or map-get($parent, altered-width) == true {
$width: map-get($node, left) + map-get($node, width) + map-get($node, margin-right);
$width: map-get($node, left) + map-get($node, width) + map-get($node, margin-right) + map-get($parent, padding-right);
$parent: map-set($parent, width, $width);
$parent: map-set($parent, altered-width, true);
}
@if map-get($parent, height) == 0 or map-get($parent, altered-height) == true {
$height: map-get($node, top) + map-get($node, height) + map-get($node, margin-bottom);
$height: map-get($node, top) + map-get($node, height) + map-get($node, margin-bottom) + map-get($parent, padding-bottom);
$parent: map-set($parent, height, $height);
$parent: map-set($parent, altered-height , true);
}

11
test.scss
View File

@@ -350,6 +350,17 @@
@include assert-equal(render-node('.r'), (10, 10, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 5, 5));
}
@include test('should layout node with padding and a child with margin') {
$global-frame-map: () !global;
.r {
@include layout(( padding: 5 ));
.c_a { @include layout(( margin: 5 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (20, 20, 0, 0));
@include assert-equal(render-node('.r .c_a'), (0, 0, 10, 10));
}
}
@include report;