diff --git a/styles/src/components/_data.scss b/styles/src/components/_data.scss index 3b1fd1a..1a759b1 100755 --- a/styles/src/components/_data.scss +++ b/styles/src/components/_data.scss @@ -22,12 +22,27 @@ $cell-size-normal: 2.8em !default; $cell-size-dense: 2em !default; $cell-padding-x: 0.5em !default; -// .tree-cell doesn't support -fx-cell-size +// .tree-cell doesn't support -fx-cell-size, // its height should be set via vertical paddings -$tree-cell-padding-x: $cell-padding-x !default; +$tree-cell-padding-x: 0.5em !default; $tree-cell-padding-y-normal: 0.5em !default; $tree-cell-padding-y-dense: 0.25em !default; -$tree-cell-indent: 1em !default; + +// This variable is for '-fx-indent' manipulation. Ideally, each descendant disclosure +// node should be aligned with its ancestor text (graphic) start position. Like this: +// +// > ⬛ foo +// > ⬛ bar +// > ⬛ baz +// +// Sadly, JavaFX doesn't do this programmaticaly and with CSS it's not possible +// to define universal indentation size that would look perfect with any disclosure +// icon or cell graphic icon, because any icon have its own margins or you may not +// use icon at all. +// +// If you feel that your tree cell content isn't aligned properly, play with +// '-fx-indent' and left '.tree-cell' padding. +$tree-cell-indent: 1.2em !default; // default JavaFX values is 18px @mixin _base() { @@ -412,18 +427,22 @@ $tree-cell-indent: 1em !default; } &.alt-icon { - .tree-cell>.tree-disclosure-node { - -fx-padding: 0.2em $tree-cell-padding-x 0 $tree-cell-padding-x; + .tree-cell { + -fx-indent: 1.6em; + + >.tree-disclosure-node { + -fx-padding: 0.229em $tree-cell-padding-x 0 $tree-cell-padding-x; + } } .tree-cell>.tree-disclosure-node>.arrow { @include icons.get("plus-box", true); - -fx-padding: 0.5em; + -fx-padding: 0.4em; } .tree-cell:expanded>.tree-disclosure-node>.arrow { @include icons.get("minus-box", true); - -fx-padding: 0.5em; + -fx-padding: 0.4em; } } }