Skip to content

Commit

Permalink
Merge pull request #5 in BUDC/concorel-frontend from feature/CONCOREL…
Browse files Browse the repository at this point in the history 
…-78-apply-generic-styles to develop

* commit '028fbd3f9575804e34d46d8448f5dc86c71b6443':
  CONCOREL-78: Basic styles for tables
  CONCOREL-78: Update headings styles after design change
  • Loading branch information
Marta Pieczyńska committed Dec 21, 2016
2 parents ceaa15e + 028fbd3 commit 592c147
Show file tree
Hide file tree
Showing 7 changed files with 142 additions and 117 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>
11 changes: 5 additions & 6 deletions source/modules/generalstyles/_headings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,20 @@

h1, h2, h3, h4, h5, h6 {
color: $colorMetallicBlue;
font-weight: $fontWeightBook;
font-weight: $fontWeightBlack;
}

h1 {
@include fontsizeFluid($min: 34px, $max: 44px);
line-height: 44px;
@include fontsizeFluid($min: 29px, $max: 50px);
line-height: 72px;
}

h2 {
@include fontsizeFluid($min: 22px, $max: 30px);
line-height: 41px;
@include fontsizeFluid($min: 22px, $max: 24px);
line-height: 33px;
}

h3 {
@include fontsizeFluid($min: 18px, $max: 20px);
line-height: 28px;
font-weight: $fontWeightBlack;
}
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;
}
}
3 changes: 2 additions & 1 deletion source/modules/generalstyles/_text.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ p {

// Link
a {
color: $colorMetallicBlue;
color: $colorBlueGrey;
line-height: 24px;
text-decoration: underline;
font-weight: $fontWeightBlack;

&:hover,
&:focus,
Expand Down
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 592c147

Please sign in to comment.