<div class="inner">
    <table>
        <tbody>
            <tr>
                <td class="nested-level-0" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-1" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-2" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-3" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-4" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-5" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-6" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-7" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-8" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-0" data-label="My Label">
                    <a href="#" class="toggle">
					<svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg>
				</a> <a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a> </td>
            </tr>
            <tr>
                <td class="nested-level-1" data-label="My Label">
                    <a href="#" class="toggle">
						<svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg>
					</a> <a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a> </td>
            </tr>
            <tr>
                <td class="nested-level-2" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-1" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-0" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
            <tr>
                <td class="nested-level-0" data-label="My Label">
                    <a href="#" class="toggle">
					<svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg>
				</a> <a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a> </td>
            </tr>
            <tr>
                <td class="nested-level-0" data-label="My Label"><a href="/edit"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> <span class="primary">Title of this item</span></a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="inner">
	<table>
		<tbody>
			<tr>
				<td class="nested-level-0" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-1" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-2" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-3" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-4" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-5" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-6" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-7" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-8" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-0" data-label="My Label">
				{{> @table-nested-toggle }}
				{{> @table-primary-link--icon }}
				</td>
			</tr>
			<tr>
				<td class="nested-level-1" data-label="My Label">
					{{> @table-nested-toggle }}
					{{> @table-primary-link--icon }}
				</td>
			</tr>
			<tr>
				<td class="nested-level-2" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-1" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-0" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
			<tr>
				<td class="nested-level-0" data-label="My Label">
				{{> @table-nested-toggle }}
				{{> @table-primary-link--icon }}
				</td>
			</tr>
			<tr>
				<td class="nested-level-0" data-label="My Label">{{> @table-primary-link--icon }}</td>
			</tr>
		</tbody>
	</table>
</div>
/* No context defined for this component. */
  • Content:
    td.nested-level-0 {
    	padding-left: ($main-gutter+4px);
    }
    td.nested-level-1 {
    	padding-left: ($main-gutter+4px)+(20px*1);
    }
    td.nested-level-2 {
    	padding-left: ($main-gutter+4px)+(20px*2);
    }
    td.nested-level-3 {
    	padding-left: ($main-gutter+4px)+(20px*3);
    }
    td.nested-level-4 {
    	padding-left: ($main-gutter+4px)+(20px*4);
    }
    td.nested-level-5 {
    	padding-left: ($main-gutter+4px)+(20px*5);
    }
    td.nested-level-6 {
    	padding-left: ($main-gutter+4px)+(20px*6);
    }
    td.nested-level-7 {
    	padding-left: ($main-gutter+4px)+(20px*7);
    }
    td.nested-level-8 {
    	padding-left: ($main-gutter+4px)+(20px*8);
    }
    
    td .toggle {
    	margin-left: -(20px);
    	margin-right: 0;
    	width: 16px;
    	padding-left: 2px;
    	display: inline-block;
    }
  • URL: /components/raw/table-nested-levels/table-nested-levels.scss
  • Filesystem Path: src/components/15-tables/01-atoms/06-table-nested-levels/table-nested-levels.scss
  • Size: 699 Bytes

There are no notes for this item.