From 8987c80c01e17ce3ae4abafe6b94b81d44160642 Mon Sep 17 00:00:00 2001
From: Marta Pieczynska <marta.pieczynska@unic.com>
Date: Tue, 20 Dec 2016 14:31:46 +0100
Subject: [PATCH 1/2] CONCOREL-78: Update headings styles after design change

---
 source/modules/generalstyles/_headings.scss | 11 +++++------
 source/modules/generalstyles/_text.scss     |  3 ++-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/source/modules/generalstyles/_headings.scss b/source/modules/generalstyles/_headings.scss
index 60a7d80e..816d12d3 100644
--- a/source/modules/generalstyles/_headings.scss
+++ b/source/modules/generalstyles/_headings.scss
@@ -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;
 }
diff --git a/source/modules/generalstyles/_text.scss b/source/modules/generalstyles/_text.scss
index 94a37381..dde7c093 100644
--- a/source/modules/generalstyles/_text.scss
+++ b/source/modules/generalstyles/_text.scss
@@ -6,9 +6,10 @@ p {
 
 // Link
 a {
-	color: $colorMetallicBlue;
+	color: $colorBlueGrey;
 	line-height: 24px;
 	text-decoration: underline;
+	font-weight: $fontWeightBlack;
 
 	&:hover,
 	&:focus,

From 028fbd3f9575804e34d46d8448f5dc86c71b6443 Mon Sep 17 00:00:00 2001
From: Marta Pieczynska <marta.pieczynska@unic.com>
Date: Wed, 21 Dec 2016 11:50:52 +0100
Subject: [PATCH 2/2] CONCOREL-78: Basic styles for tables

---
 source/assets/css/_layout.scss                |   2 +-
 source/modules/button/button.hbs              |  94 +++++++-------
 source/modules/generalstyles/_table.scss      |  32 +++++
 .../modules/generalstyles/generalstyles.scss  |   1 +
 source/preview/styleguide/elements/tables.hbs | 116 ++++++++----------
 5 files changed, 135 insertions(+), 110 deletions(-)
 create mode 100644 source/modules/generalstyles/_table.scss

diff --git a/source/assets/css/_layout.scss b/source/assets/css/_layout.scss
index 5ae27d76..f2c8401a 100644
--- a/source/assets/css/_layout.scss
+++ b/source/assets/css/_layout.scss
@@ -3,7 +3,7 @@ html {
 	@include fontsizeFluid;
 
 	background: $colorBg;
-	color: $colorText;
+	color: $colorBlueGrey;
 	font-family: $fontFamilyBase;
 	font-weight: $fontWeightMedium;
 	line-height: $sizeLineHeightBase;
diff --git a/source/modules/button/button.hbs b/source/modules/button/button.hbs
index f8f04f1b..c68a370f 100644
--- a/source/modules/button/button.hbs
+++ b/source/modules/button/button.hbs
@@ -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>
diff --git a/source/modules/generalstyles/_table.scss b/source/modules/generalstyles/_table.scss
new file mode 100644
index 00000000..171a429a
--- /dev/null
+++ b/source/modules/generalstyles/_table.scss
@@ -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;
+	}
+}
diff --git a/source/modules/generalstyles/generalstyles.scss b/source/modules/generalstyles/generalstyles.scss
index 37d815cf..c3a3fc06 100644
--- a/source/modules/generalstyles/generalstyles.scss
+++ b/source/modules/generalstyles/generalstyles.scss
@@ -1,5 +1,6 @@
 @import '_headings';
 @import '_text';
+@import '_table';
 
 
 *:focus {
diff --git a/source/preview/styleguide/elements/tables.hbs b/source/preview/styleguide/elements/tables.hbs
index 45cb7c72..c27c6dab 100644
--- a/source/preview/styleguide/elements/tables.hbs
+++ b/source/preview/styleguide/elements/tables.hbs
@@ -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>