<ol class="page-list">
    <li>
        <div class="page"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Products</div>
        <ol class="">
            <li>
                <div class="page"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Product</div>
                <ol class="">
                </ol>
            </li>
        </ol>
    </li>
    <li>
        <div class="page"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Example</div>
        <ol class="">
            <li>
                <div class="page"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Testy</div>
                <ol class="">
                    <li>
                        <div class="page"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Newsletter</div>
                        <ol class=""></ol>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
    <li>
        <div class="page"><svg width="16" height="16" class="icon icon-document"><use xlink:href="/assets/svg/core.svg#document" /></svg> Shopping Cart</div>
        <ol class=""></ol>
    </li>
</ol>
<ol class="page-list">
	<li>
		<div class="page">{{ icon 'core/document' }} Products</div>
		<ol class="">
			<li>
				<div class="page">{{ icon 'core/document' }} Product</div>
				<ol class="">
				</ol>
			</li>
		</ol>
	</li>
	<li>
		<div class="page">{{ icon 'core/document' }} Example</div>
		<ol class="">
			<li>
				<div class="page">{{ icon 'core/document' }} Testy</div>
				<ol class="">
					<li>
						<div class="page">{{ icon 'core/document' }} Newsletter</div>
						<ol class=""></ol>
					</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>
		<div class="page">{{ icon 'core/document' }} Shopping Cart</div>
		<ol class=""></ol>
	</li>
</ol>
/* No context defined for this component. */
  • Content:
    .page-list {
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	@include font-scale(m, helvetica);
    	color: palette(type, primary);
    }
    
    .page-list .page {
    	border-bottom: 1px solid palette(ui, light);
    	padding: .3rem;
    	display: block;
    	border-radius: 2px;
    	margin-bottom: 0;
    	display: flex;
    	align-items: center;
    	//background-color: palette(ui, panel);
    }
    
    .page-list svg {
    	margin: 0 0.3rem 0 0;
    	fill: palette(ui);
    }
    
    .page-list ol {
    	list-style-type: none;
    	padding-left: 0;
    }
    
    .page-list ol .page {
    	padding-left: $main-gutter;
    }
    
    .page-list ol ol .page {
    	padding-left: $main-gutter*2;
    }
    
    .page-list ol ol ol .page {
    	padding-left: $main-gutter*3;
    }
    
    .page-list ol ol ol ol .page {
    	padding-left: $main-gutter*4;
    }
    
    .page-list ol ol ol ol ol .page {
    	padding-left: $main-gutter*5;
    }
  • URL: /components/raw/page-list/page-list.scss
  • Filesystem Path: src/components/14-listings/01-atoms/04-page-list/page-list.scss
  • Size: 784 Bytes
  • Handle: @page-list
  • Preview:
  • Filesystem Path: src/components/14-listings/01-atoms/04-page-list/page-list.hbs

There are no notes for this item.