Merge pull request #74 from dod-ccpo/ui/lists-tables
Styles for block lists and tables
This commit is contained in:
commit
59ec651cb7
@ -7,8 +7,9 @@
|
|||||||
@import 'elements/typography';
|
@import 'elements/typography';
|
||||||
@import 'elements/inputs';
|
@import 'elements/inputs';
|
||||||
@import 'elements/buttons';
|
@import 'elements/buttons';
|
||||||
@import 'elements/tables';
|
|
||||||
@import 'elements/panels';
|
@import 'elements/panels';
|
||||||
|
@import 'elements/block_lists';
|
||||||
|
@import 'elements/tables';
|
||||||
|
|
||||||
@import 'components/site_action';
|
@import 'components/site_action';
|
||||||
@import 'components/empty_state';
|
@import 'components/empty_state';
|
||||||
|
51
scss/elements/_block_lists.scss
Normal file
51
scss/elements/_block_lists.scss
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
@mixin block-list {
|
||||||
|
@include panel-margin;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list-header {
|
||||||
|
@include panel-base;
|
||||||
|
@include panel-theme-default;
|
||||||
|
padding: $gap * 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list__title {
|
||||||
|
@include h4;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin block-list-item {
|
||||||
|
@include panel-base;
|
||||||
|
margin: 0;
|
||||||
|
padding: $gap * 2;
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: 1px dashed $color-gray-light;
|
||||||
|
|
||||||
|
@at-root li#{&} {
|
||||||
|
&:last-child {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.block-list {
|
||||||
|
@include block-list;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__header {
|
||||||
|
@include block-list-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__title {
|
||||||
|
@include block-list__title;
|
||||||
|
}
|
||||||
|
|
||||||
|
.block-list__item {
|
||||||
|
@include block-list-item;
|
||||||
|
}
|
@ -9,6 +9,8 @@
|
|||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
border-top-style: solid;
|
border-top-style: solid;
|
||||||
border-bottom-style: solid;
|
border-bottom-style: solid;
|
||||||
|
border-left: 0;
|
||||||
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin panel-theme-default {
|
@mixin panel-theme-default {
|
||||||
@ -17,6 +19,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@mixin panel-margin {
|
@mixin panel-margin {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
margin-bottom: $site-margins-mobile * 2;
|
margin-bottom: $site-margins-mobile * 2;
|
||||||
|
|
||||||
@include media($medium-screen) {
|
@include media($medium-screen) {
|
||||||
@ -29,9 +34,14 @@
|
|||||||
@include panel-theme-default;
|
@include panel-theme-default;
|
||||||
@include panel-margin;
|
@include panel-margin;
|
||||||
|
|
||||||
&__content {
|
.panel__content {
|
||||||
padding-left: $gap*4;
|
margin: ($gap * 2) 0;
|
||||||
padding-right: $gap*4;
|
padding: 0 ($gap * 2);
|
||||||
|
|
||||||
|
@include media($medium-screen) {
|
||||||
|
margin: ($gap * 4) 0;
|
||||||
|
padding: 0 ($gap * 4);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,3 +3,41 @@
|
|||||||
* @see https://designsystem.digital.gov/components/tables/
|
* @see https://designsystem.digital.gov/components/tables/
|
||||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
|
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
@include panel-margin;
|
||||||
|
min-width: 100%;
|
||||||
|
|
||||||
|
tr {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
@include block-list-header;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
@include block-list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
td {
|
||||||
|
border-bottom-style: solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--align-right {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--shrink {
|
||||||
|
width: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-cell--expand {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -33,16 +33,6 @@
|
|||||||
<div class='col col--grow'>
|
<div class='col col--grow'>
|
||||||
<div class='panel'>
|
<div class='panel'>
|
||||||
<div class='panel__content'>
|
<div class='panel__content'>
|
||||||
|
|
||||||
<div class="panel__heading">
|
|
||||||
<h1>Panel Heading H1</h1>
|
|
||||||
<h2>Panel Heading H2</h2>
|
|
||||||
<h3>Panel Heading H3</h3>
|
|
||||||
<h4>Panel Heading H4</h4>
|
|
||||||
<h5>Panel Heading H5</h5>
|
|
||||||
<h6>Panel Heading H6</h6>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<em>This is a panel content</em>
|
<em>This is a panel content</em>
|
||||||
<h1>Heading H1</h1>
|
<h1>Heading H1</h1>
|
||||||
<h2>Heading H2</h2>
|
<h2>Heading H2</h2>
|
||||||
@ -80,5 +70,52 @@
|
|||||||
<div class='panel'>
|
<div class='panel'>
|
||||||
Another panel without padding
|
Another panel without padding
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<section class='block-list'>
|
||||||
|
<header class='block-list__header'>
|
||||||
|
<h3 class='block-list__title'>A Block List</h3>
|
||||||
|
</header>
|
||||||
|
<ul>
|
||||||
|
<li class='block-list__item'>Block List Item</li>
|
||||||
|
<li class='block-list__item'>Block List Item</li>
|
||||||
|
<li class='block-list__item'>Block List Item</li>
|
||||||
|
<li class='block-list__item'>Block List Item</li>
|
||||||
|
<li class='block-list__item'>Block List Item</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<table class='col--grow'>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class='table-cell--expand'>Expanded Column</th>
|
||||||
|
<th>Normal Column</th>
|
||||||
|
<th class='table-cell--align-right'>Right Aligned</th>
|
||||||
|
<th class='table-cell--shrink'>Shrunk</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td class='table-cell--expand'>Table Cell</td>
|
||||||
|
<td>Table Cell</td>
|
||||||
|
<td class='table-cell--align-right'>1,234.56</td>
|
||||||
|
<td class='table-cell--shrink'>Table Cell</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class='table-cell--expand'>Table Cell</td>
|
||||||
|
<td>Table Cell</td>
|
||||||
|
<td class='table-cell--align-right'>1,231,253.43</td>
|
||||||
|
<td class='table-cell--shrink'>Table Cell</td>
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
<td class='table-cell--expand'>Table Cell</td>
|
||||||
|
<td>Table Cell</td>
|
||||||
|
<td class='table-cell--align-right'>564.54</td>
|
||||||
|
<td class='table-cell--shrink'>Table Cell</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
{% end %}
|
{% end %}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user