diff --git a/assets/scss/shared-ui/_tree-fancy.scss b/assets/scss/shared-ui/_tree-fancy.scss index 4860ebd5..56671fae 100644 --- a/assets/scss/shared-ui/_tree-fancy.scss +++ b/assets/scss/shared-ui/_tree-fancy.scss @@ -1,3 +1,4 @@ +// $sui-wrap: true | $rtl: false @include body-class(true) { .sui-tree-fancy { @@ -403,4 +404,63 @@ } } } +} + +// $sui-wrap: true | $rtl: true +@include body-class(true, true) { + + .sui-tree-fancy[data-tree="selector"] { + + ul.ui-fancytree { + + // ELEMENT: Item + li[role="treeitem"] { + + > span.fancytree-node { + padding-left: 30px; + padding-right: 0; + + > span.fancytree-expander { + left: 0; + right: unset; + } + + > span.fancytree-checkbox { + + ~ span.fancytree-title { + margin-right: 10px; + margin-left: 0; + } + } + } + + // VARIATION: Child items + ul[role="group"] { + padding: 0 26px 0 0; + } + } + } + } + + .sui-tree-fancy[data-tree="directory"] { + + ul.ui-fancytree { + + // ELEMENT: Item + li[role="treeitem"] { + + > span.fancytree-node { + + // ELEMENT: Expander + > span.fancytree-expander { + margin: 3px -10px 3px 0; + } + } + + ul[role="group"] { + padding: 0 20px 0 0; + } + } + } + } } \ No newline at end of file diff --git a/assets/scss/shared-ui/_tree-simple.scss b/assets/scss/shared-ui/_tree-simple.scss index d4604d50..5b601efe 100644 --- a/assets/scss/shared-ui/_tree-simple.scss +++ b/assets/scss/shared-ui/_tree-simple.scss @@ -23,6 +23,7 @@ $tree--file-type: ( performance: 'performance', ); +// $sui-wrap: true | $rtl: false @include body-class(true) { .sui-tree { @@ -630,4 +631,60 @@ $tree--file-type: ( } } } +} + +// $sui-wrap: true | $rtl: true +@include body-class(true, true) { + + .sui-tree { + direction: rtl; + + // TREE: RTL Selector + &[data-tree="selector"] { + + li[role="treeitem"] { + + > .sui-tree-node { + + > .sui-node-checkbox { + + + span { + margin-right: 10px; + } + } + } + + ul[role="group"] { + padding-right: 26px; + } + } + } + + // TREE: RTL Directory Browser + &[data-tree="directory"] { + + li[role="treeitem"] { + + > .sui-tree-node { + + > span[role="button"], + > button[data-button] span[aria-hidden] { + + &:first-child { + margin-left: 0; + margin-right: -10px; + } + } + + > span[aria-hidden] { + margin: 7px 10px 7px 5px; + } + } + + ul[role="group"] { + padding-right: 20px; + } + } + } + } } \ No newline at end of file