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 position: absolute

Browse Source
This commit is contained in:
Kyle Fang
2015-02-03 01:04:29 +08:00
parent dff20a8e3b
commit 4ad5bb6c66
2 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
sass_layout.scss
View File

@@ -49,7 +49,7 @@ $global-frame-map: () !global;
$flexs: map-get($parent-node, flex-total) + map-get($layout, flex);
$start-direction: map-get($parent-node, start-direction);
$axis: if(is-vertical($start-direction), height, width);
$non-flex-pixels: if(map-get($layout, flex) == 0, spent-space-on-direction($layout, $start-direction), 0);
$non-flex-pixels: if(map-get($layout, flex) == 0 and map-get($layout, position) != absolute, spent-space-on-direction($layout, $start-direction), 0);
$parent-node: map-merge($parent-node, (
child-nodes: $child-nodes,
flex-total: $flexs,
@@ -188,17 +188,21 @@ $global-frame-map: () !global;
}
@if has-parent($node) and $direction == map-get($parent-node, start-direction) {
@if map-get($node, flex) > 0 {
$flexable-space: if(is-vertical($direction),
map-get($parent-node, height) - map-get($parent-node, padding-top) - map-get($parent-node, padding-bottom),
map-get($parent-node, width) - map-get($parent-node, padding-left) - map-get ($parent-node, padding-right)
$flexable-space: if(
is-vertical($direction),
map-get($parent-node, height) - map-get($parent-node, padding-top) - map-get($parent-node, padding-bottom),
map-get($parent-node, width) - map-get($parent-node, padding-left) - map-get($parent-node, padding-right)
);
$flexable-space: $flexable-space - map-get($parent-node, non-flex-pixels);
$flex-total: map-get($parent-node, flex-total);
$node: map-set($node, if(is-vertical($direction), height, width), $flexable-space * map-get($node, flex) / $flex-total);
}
$used-property: $used-property + spent-space-on-direction($node, $direction);
$parent-node: map-set($parent-node, used-#{$direction}, $used-property);
$parent-node: save-layout($parent-node);
@if map-get($node, position) != absolute {
$used-property: $used-property + spent-space-on-direction($node, $direction);
$parent-node: map-set($parent-node, used-#{$direction}, $used-property);
$parent-node: save-layout($parent-node);
}
}
@if has-parent($node) and $direction == map-get($parent-node, cross-start-direction) {
$align-self: map-get($node, align-self);

15
test.scss
View File

@@ -431,6 +431,21 @@
@include assert-equal(render-node('.r'), (0, 0, 10, 0));
}
@include test('should layout node with position: absolute') {
$global-frame-map: () !global;
.r {
@include layout(( width: 500, flex-direction: row));
.c_a { @include layout(( flex: 1 )) }
.c_b { @include layout(( position: absolute, width: 50 )) }
.c_c { @include layout(( flex: 1 )) }
}
@include render-layout;
@include assert-equal(render-node('.r'), (500, 0, 0, 0));
@include assert-equal(render-node('.r .c_a'), (250, 0, 0, 0));
@include assert-equal(render-node('.r .c_b'), (50, 0, 0, 250));
@include assert-equal(render-node('.r .c_c'), (250, 0, 0, 250));
}
}
@include report;