<div class="inner">
    <table>
        <thead>
            <tr>
                <th><a href="#">Column heading <svg width="12" height="12" class="icon icon-arrow-circle-down"><use xlink:href="/assets/svg/core.svg#arrow-circle-down" /></svg></a></th>
                <th><a href="#">Column heading</a></th>
                <th><a href="#">Column heading</a></th>
                <th><a href="#">Column heading</a></th>
                <th class="action"></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td 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> <a href="/" class="create-subitem"><svg width="8" height="8" class="icon icon-plus"><use xlink:href="/assets/svg/core.svg#plus" /></svg> New subitem</a>                    </td>
                <td data-label="My Label"><span class="new">New</span> drew@grabaperch.com</td>
                <td data-label="My Label">Mango Bingo</td>
                <td data-label="My Label"><svg width="16" height="16" class="icon icon-circle-check icon-listing-status"><use xlink:href="/assets/svg/core.svg#circle-check" /></svg></td>
                <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                </td>
            </tr>

            <tr>
                <td 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>
                <td data-label="My Label">drew@grabaperch.com</td>
                <td data-label="My Label">Mango Bingo</td>
                <td data-label="My Label">1</td>
                <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                </td>
            </tr>
            <tr>
                <td 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>
                <td data-label="My Label">drew@grabaperch.com</td>
                <td data-label="My Label">Mango Bingo</td>
                <td data-label="My Label">1</td>
                <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                </td>
            </tr>
            <tr>
                <td 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>
                <td data-label="My Label">drew@grabaperch.com</td>
                <td data-label="My Label">Mango Bingo</td>
                <td data-label="My Label">1</td>
                <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                </td>
            </tr>
            <tr>
                <td 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>
                <td data-label="My Label">drew@grabaperch.com</td>
                <td data-label="My Label">Mango Bingo</td>
                <td data-label="My Label">1</td>
                <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                </td>
            </tr>
            <tr>
                <td 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>
                <td data-label="My Label">drew@grabaperch.com</td>
                <td data-label="My Label">Mango Bingo</td>
                <td data-label="My Label">1</td>
                <td data-label="My Label"><a class="button button-small action-alert" href="/foo">Submit</a>
                </td>
            </tr>

        </tbody>
    </table>
</div>
<div class="inner">
	<table>
		<thead>
			<tr>
				<th>{{> @table-sortable-heading--sorted }}</th>
				<th>{{> @table-sortable-heading }}</th>
				<th>{{> @table-sortable-heading }}</th>
				<th>{{> @table-sortable-heading }}</th>
				<th class="action"></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td data-label="My Label">
					{{> @table-primary-link--icon }}
					{{> @table-new-subitem }}
				</td>
				<td data-label="My Label">{{> @new-flag }} drew@grabaperch.com</td>
				<td data-label="My Label">Mango Bingo</td>
				<td data-label="My Label">{{ icon 'core/circle-check' 16 'listing-status' }}</td>
				<td data-label="My Label">{{ render '@button-small--a-alert' }}</td>
			</tr>

			<tr>
				<td data-label="My Label">{{> @table-primary-link--icon }}</td>
				<td data-label="My Label">drew@grabaperch.com</td>
				<td data-label="My Label">Mango Bingo</td>
				<td data-label="My Label">1</td>
				<td data-label="My Label">{{ render '@button-small--a-alert' }}</td>
			</tr>
			<tr>
				<td data-label="My Label">{{> @table-primary-link--icon }}</td>
				<td data-label="My Label">drew@grabaperch.com</td>
				<td data-label="My Label">Mango Bingo</td>
				<td data-label="My Label">1</td>
				<td data-label="My Label">{{ render '@button-small--a-alert' }}</td>
			</tr>
			<tr>
				<td data-label="My Label">{{> @table-primary-link--icon }}</td>
				<td data-label="My Label">drew@grabaperch.com</td>
				<td data-label="My Label">Mango Bingo</td>
				<td data-label="My Label">1</td>
				<td data-label="My Label">{{ render '@button-small--a-alert' }}</td>
			</tr>
			<tr>
				<td data-label="My Label">{{> @table-primary-link--icon }}</td>
				<td data-label="My Label">drew@grabaperch.com</td>
				<td data-label="My Label">Mango Bingo</td>
				<td data-label="My Label">1</td>
				<td data-label="My Label">{{ render '@button-small--a-alert' }}</td>
			</tr>
			<tr>
				<td data-label="My Label">{{> @table-primary-link--icon }}</td>
				<td data-label="My Label">drew@grabaperch.com</td>
				<td data-label="My Label">Mango Bingo</td>
				<td data-label="My Label">1</td>
				<td data-label="My Label">{{ render '@button-small--a-alert' }}</td>
			</tr>
		
		</tbody>
	</table>
</div>
/* No context defined for this component. */
  • Content:
    table {
      border-collapse: collapse;
      padding: 0;
      margin: 0;
      margin-bottom: $main-gutter;
      width: 100%;
    
    }
    
    table a:link,
    table a:visited {
       color: palette(type);
       text-decoration: none;
    }
    
    table td svg {
      fill: palette(ui);
      vertical-align: middle;
      margin-top: -3px;
    }
    
    table tr:hover a svg {
      fill: palette(ui,dark);
    }
    
    table tr:hover {
      background: palette(ui,light);
    }
    
    table th,
    table td {
      padding: .625em;
      text-align: left;
      @include font-scale(sm, helvetica);
      border-bottom: 1px solid #eaeaea;
    }
    
    table th {
     background: palette(ui, panel);
     color: palette(type, base);
     font-weight: normal;
    }
    
    table th.action {
      width: 80px;
    }
    
    table th svg {
      fill: rgba(0,0,0,0.3);
      vertical-align: middle;
    }
    
    table th a:link,
    table th a:visited {
      color: palette(type,base);
      text-decoration: none;
    }
    
    table th a:hover,
    table th a:active {
      color: #000;
    }
    
    table th a:hover svg,
    table th a:active svg {
      fill: #000;
    }
    
    table td {
      vertical-align: baseline;
    }
    
    table td.format-datetime {
      text-align: right;
    }
    
    table td .icon-listing-status {
      fill: palette('success', 'dark');
    }
    
    @include media("<bp-s")  {
      table {
        border:0;
      }
    
      table thead {
        display: none;
      }
    
      table tr {
        border-bottom: 3px solid palette(ui);
        display: block;
        margin-bottom: .625em;
      }
    
      table td {
        border-bottom: 1px solid palette(ui);
        display: block;
        text-align: right;
      }
      table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
      }
      table td:last-child {
        border-bottom: 0;
      }
    }
    
  • URL: /components/raw/table-listing/table-listing.scss
  • Filesystem Path: src/components/14-listings/03-organisms/01-table-listing/table-listing.scss
  • Size: 1.6 KB

There are no notes for this item.