<ol class="sortable-tree">
    <li id="page_1" data-parent="0">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Home page</div>
    </li>
    <li id="page_2" data-parent="0">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Errors</div>
        <ol>
            <li id="page_3" data-parent="2">
                <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> 404</div>
            </li>
        </ol>
    </li>
    <li id="page_4" data-parent="0">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Products</div>
        <ol>
            <li id="page_5" data-parent="4">
                <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Product</div>
                <ol>
                    <li id="page_25" data-parent="5">
                        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Category</div>
                    </li>
                </ol>
            </li>
            <li id="page_6" data-parent="4">
                <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Shopping Cart</div>
            </li>
            <li id="page_8" data-parent="4">
                <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Check out</div>
                <ol>
                    <li id="page_7" data-parent="8">
                        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Register</div>
                    </li>
                    <li id="page_12" data-parent="8">
                        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Payment</div>
                    </li>
                    <li id="page_14" data-parent="8">
                        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Addresses</div>
                    </li>
                    <li id="page_23" data-parent="8">
                        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Account</div>
                    </li>
                    <li id="page_24" data-parent="8">
                        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Orders</div>
                    </li>
                </ol>
            </li>
            <li id="page_13" data-parent="4">
                <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> logout</div>
            </li>
        </ol>
    </li>
    <li id="page_9" data-parent="0" class="disabled ui-nestedSortable-no-nesting">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Disabled: you may not move me</div>
    </li>
    <li id="page_11" data-parent="0" class="ui-sortable-helper">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> I am being dragged</div>
    </li>
    <li id="page_10" data-parent="0">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Test</div>
    </li>
    <li id="page_15" data-parent="0">
        <div class="ui-sortable-handle"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Search</div>
    </li>
</ol>
<ol class="sortable-tree">
    <li id="page_1" data-parent="0">
        <div class="ui-sortable-handle">{{ icon page_icon }} Home page</div>
    </li>
    <li id="page_2" data-parent="0">
        <div class="ui-sortable-handle">{{ icon page_icon }} Errors</div>
        <ol>
            <li id="page_3" data-parent="2">
                <div class="ui-sortable-handle">{{ icon page_icon }} 404</div>
            </li>
        </ol>
    </li>
    <li id="page_4" data-parent="0">
        <div class="ui-sortable-handle">{{ icon page_icon }} Products</div>
        <ol>
            <li id="page_5" data-parent="4">
                <div class="ui-sortable-handle">{{ icon page_icon }} Product</div>
                <ol>
                    <li id="page_25" data-parent="5">
                        <div class="ui-sortable-handle">{{ icon page_icon }} Category</div>
                    </li>
                </ol>
            </li>
            <li id="page_6" data-parent="4">
                <div class="ui-sortable-handle">{{ icon page_icon }} Shopping Cart</div>
            </li>
            <li id="page_8" data-parent="4">
                <div class="ui-sortable-handle">{{ icon page_icon }} Check out</div>
                <ol>
                    <li id="page_7" data-parent="8">
                        <div class="ui-sortable-handle">{{ icon page_icon }} Register</div>
                    </li>
                    <li id="page_12" data-parent="8">
                        <div class="ui-sortable-handle">{{ icon page_icon }} Payment</div>
                    </li>
                    <li id="page_14" data-parent="8">
                        <div class="ui-sortable-handle">{{ icon page_icon }} Addresses</div>
                    </li>
                    <li id="page_23" data-parent="8">
                        <div class="ui-sortable-handle">{{ icon page_icon }} Account</div>
                    </li>
                    <li id="page_24" data-parent="8">
                        <div class="ui-sortable-handle">{{ icon page_icon }} Orders</div>
                    </li>
                </ol>
            </li>
            <li id="page_13" data-parent="4">
                <div class="ui-sortable-handle">{{ icon page_icon }} logout</div>
            </li>
        </ol>
    </li>
    <li id="page_9" data-parent="0" class="disabled ui-nestedSortable-no-nesting">
        <div class="ui-sortable-handle">{{ icon page_icon }} Disabled: you may not move me</div>
    </li>
    <li id="page_11" data-parent="0" class="ui-sortable-helper">
        <div class="ui-sortable-handle">{{ icon page_icon }} I am being dragged</div>
    </li>
    <li id="page_10" data-parent="0">
        <div class="ui-sortable-handle">{{ icon page_icon }} Test</div>
    </li>
    <li id="page_15" data-parent="0">
        <div class="ui-sortable-handle">{{ icon page_icon }} Search</div>
    </li>
</ol>
{
  "page_icon": "core/document"
}
  • Content:
    .sortable-tree {
    	cursor: ns-resize;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	@include font-scale(m, helvetica);
    	color: palette(type, primary);
    }
    
    .sortable-tree .ui-sortable-handle {
    	border: 1px solid palette(ui, light);
    	padding: .3rem;
    	display: block;
    	border-radius: 2px;
    	margin-bottom: .4rem;
    	display: flex;
    	align-items: center;
    	background-color: palette(ui, panel);
    }
    
    .sortable-tree svg {
    	margin: 0 0.3rem 0 0;
    	fill: palette(ui);
    }
    
    .sortable-tree ol {
    	list-style-type: none;
    	padding-left: $main-gutter;
    }
    
    .sortable-tree li * {
    	-moz-user-select: none;
    	-webkit-user-select: none;
    	-ms-user-select: none;
    	user-select: none;
    }
    
    .sortable-tree .disabled {
    	color: palette(type, light);
    	cursor: not-allowed;
    }
    
    .sortable-tree .ui-sortable-helper {
    	opacity: 0.5;
    }
    
  • URL: /components/raw/sortable-tree/sortable-tree.scss
  • Filesystem Path: src/components/14-listings/01-atoms/02-sortable-tree/sortable-tree.scss
  • Size: 792 Bytes
  • Handle: @sortable-tree
  • Preview:
  • Filesystem Path: src/components/14-listings/01-atoms/02-sortable-tree/sortable-tree.hbs

There are no notes for this item.