Skip to content
This repository was archived by the owner on Dec 11, 2021. It is now read-only.

[WIP] table styling #130

Closed
wants to merge 3 commits into from
Closed

[WIP] table styling #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42ad76e
Build: Initial table styles
MichaelArestad Apr 10, 2015
cd563ea
tables: contextual and strip gh-130
subaha Oct 18, 2015
15195fb
tables: restored after delete gh-130
subaha Oct 18, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 191 additions & 0 deletions demos/tables.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Chassis - Tables</title>
<meta name="description" content="Typography skeleton for styling">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../dist/css/chassis.css">
<link rel="stylesheet" href="demos.css">
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,700italic" rel="stylesheet">
</head>
<body>

<h1>CSS Chassis</h1>

<hr>

<h2>Tables</h2>

<p>Here's a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>

<table>
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum..</p>

<div class="overflow-indicator__wrapper">
<table class="overflow-indicator__content">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>

<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>

<table class="striped-table">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th>3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

<p>Here"s a paragraph to show spacing around the table. Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum.</p>

<table class="">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr class="success">
<th>1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="active">
<th>2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="danger">
<th>3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="warning">
<th>4</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr class="info">
<th>5</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>

</body>
</html>
46 changes: 46 additions & 0 deletions scss/atoms/_overflow-indicator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
// ==========================================================================
// Overflow Indicator
//
// Shows indicator when there is more horizontal content.
//
// EXAMPLE
// <div class="overflow-indicator__wrapper">
// <div class="overflow-indicator__content">...</div>
// </div>
// ==========================================================================

.overflow-indicator__wrapper {
position: relative;
z-index: 1;
margin-bottom: em( 20px );
border: 0;
background: #fff no-repeat;
background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent );
background-position: 0 0, 100% 0;
background-size: 10px 100%;
overflow: auto;
}

.overflow-indicator__wrapper > .overflow-indicator__content {
position: relative;
margin-bottom: 0;

&:before,
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: 0 -30px 0 0;
width: 30px;
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
}
&:after {
left: auto;
right: 0;
margin: 0 0 0 -30px;
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
}
}
92 changes: 92 additions & 0 deletions scss/atoms/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*
* ==========================================================================
* Typography
* ==========================================================================
*/

table {
width: 100%;
margin-bottom: em( 20px, 16px );
font-size: em( 16px );
text-align: left;
}

thead {
border-bottom: 1px solid #eee;

> tr > th {
border-top: 0;
}
}

td {
border-top: 1px solid #eee;
padding: em( 12px, 16px );
}

th {
border-top: 1px solid #eee;
padding: em( 12px, 12px );
color: #666;
font-weight: 400;
font-size: em( 12px, 16px );
white-space: nowrap;
}

table {
.active {
background-color: #f5f5f5;
}
.success {
background-color: #dff0d8;
}
.warning {
background-color: #fcf8e3;
}
.danger {
background-color: #f2dede;
}
.info {
background-color: #d9edf7;
}
}

.striped-table>tbody>tr:nth-of-type(odd), {
background-color: #f2f2f2;
}

.table--responsive {
position: relative;
z-index: 1;
margin-bottom: em( 20px );
border: 0;
background: #fff no-repeat;
background-image: radial-gradient( farthest-side at 0 50%,rgba( 0, 0, 0, .2 ), transparent ), radial-gradient( farthest-side at 100% 50%, rgba( 0, 0, 0, .2 ), transparent );
background-position: 0 0, 100% 0;
background-size: 10px 100%;
overflow: auto;

table {
position: relative;
margin-bottom: 0;

&:before,
&:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: 0 -30px 0 0;
width: 30px;
background: linear-gradient( to right, #fff, #fff 30%, rgba( 255, 255, 255, 0 ) );
}
&:after {
left: auto;
right: 0;
margin: 0 0 0 -30px;
background: linear-gradient( to right, rgba( 255, 255, 255, 0 ), #fff 70%, #fff );
}
}
}
4 changes: 3 additions & 1 deletion scss/lint.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@

@import
"atoms/icons/icons",
"atoms/typography/typography";
"atoms/tables",
"atoms/typography/typography",
"atoms/overflow-indicator";

@import
"views/main";