Skip to content

Commit

Permalink
CONCOREL-78: Basic styles for tables
Browse files Browse the repository at this point in the history
  • Loading branch information
Marta Pieczynska committed Dec 21, 2016
1 parent 8987c80 commit 028fbd3
Show file tree
Hide file tree
Showing 5 changed files with 135 additions and 110 deletions.
2 changes: 1 addition & 1 deletion source/assets/css/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ html {
@include fontsizeFluid;

background: $colorBg;
color: $colorText;
color: $colorBlueGrey;
font-family: $fontFamilyBase;
font-weight: $fontWeightMedium;
line-height: $sizeLineHeightBase;
Expand Down
94 changes: 48 additions & 46 deletions source/modules/button/button.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,48 @@
<table class="sg_table_demo">
<thead>
<tr>
<th></th>
<th>Default</th>
<th>With animated hover</th>
<th>Disabled</th>
</tr>
</thead>
<tbody>
<tr>
<td>Button</td>
<td>
<button class="{{variant}}"> Button </button>
</td>
<td>
<button class="button--animated-right {{variant}}"> Button </button>
</td>
<td>
<button class="{{variant}}"disabled> Button </button>
</td>
</tr>
<tr>
<td>CTA</td>
<td>
<a href="#" class="button {{variant}}"> Call to action! </a>
</td>
<td>
<a href="#" class="button button--animated-right {{variant}}"> Call to action! </a>
</td>
<td>
<a href="#" class="button button--disabled {{variant}}"> Call to action! </a>
</td>
</tr>
<tr>
<td>Button-like input</td>
<td>
<input type="button" value="Input: type button" class="{{variant}}">
</td>
<td>-</td>
<td>
<input type="button" value="Input: type button" class="{{variant}}" disabled>
</td>
</tr>
</tbody>
</table>
<div class="table__wrapper">
<table class="sg_table_demo">
<thead>
<tr>
<th></th>
<th>Default</th>
<th>With animated hover</th>
<th>Disabled</th>
</tr>
</thead>
<tbody>
<tr>
<td>Button</td>
<td>
<button class="{{variant}}"> Button </button>
</td>
<td>
<button class="button--animated-right {{variant}}"> Button </button>
</td>
<td>
<button class="{{variant}}"disabled> Button </button>
</td>
</tr>
<tr>
<td>CTA</td>
<td>
<a href="#" class="button {{variant}}"> Call to action! </a>
</td>
<td>
<a href="#" class="button button--animated-right {{variant}}"> Call to action! </a>
</td>
<td>
<a href="#" class="button button--disabled {{variant}}"> Call to action! </a>
</td>
</tr>
<tr>
<td>Button-like input</td>
<td>
<input type="button" value="Input: type button" class="{{variant}}">
</td>
<td>-</td>
<td>
<input type="button" value="Input: type button" class="{{variant}}" disabled>
</td>
</tr>
</tbody>
</table>
</div>
32 changes: 32 additions & 0 deletions source/modules/generalstyles/_table.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.table__wrapper {
width: 100%;
overflow: auto;
}

table {
text-align: left;
width: 100%;
min-width: $sizeBreakpointSmall;
}

th {
color: $colorMetallicBlue;
font-weight: $fontWeightBlack;
}

th,
td {
padding: 16px 16px 16px 0;
}

thead {
border-bottom: 4px solid $colorMetallicBlue;
}

tr {
border-bottom: 2px solid $colorPaleGrey;

&:last-child {
border: 0;
}
}
1 change: 1 addition & 0 deletions source/modules/generalstyles/generalstyles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import '_headings';
@import '_text';
@import '_table';


*:focus {
Expand Down
116 changes: 53 additions & 63 deletions source/preview/styleguide/elements/tables.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,73 +3,63 @@
<div class="sg_demo">
<div class="sg_subsection">
<h3 class="sg_h3">Default Table</h3>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>tfoot th</th>
<th>tfoot th</th>
<th>tfoot th</th>
</tr>
</tfoot>
</table>
<div class="table__wrapper">
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<td>tbody td</td>
<td>tbody td</td>
<td>tbody td</td>
</tr>
</tbody>
</table>
</div>
</div>

<div class="sg_subsection">
<h3 class="sg_h3">Table with side headings</h3>
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>thead th</th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody th</th>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<th>tbody th</th>
<td>tbody td</td>
<td>tbody td</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>tfoot th</th>
<td>tfoot td</td>
<td>tfoot td</td>
</tr>
</tfoot>
</table>
<div class="table__wrapper">
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th></th>
<th>thead th</th>
<th>thead th</th>
</tr>
</thead>
<tbody>
<tr>
<th>tbody th</th>
<td>tbody td</td>
<td>tbody td</td>
</tr>
<tr>
<th>tbody th</th>
<td>tbody td</td>
<td>tbody td</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>

0 comments on commit 028fbd3

Please sign in to comment.