add table stylings to the styleguide

test plan:
  - make sure table stylings show up in the styleguide.

Change-Id: I69b420fdafce7a95ffc8cfb690539584c512c029
Reviewed-on: https://gerrit.instructure.com/22015
Reviewed-by: Ryan Florence <ryanf@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
Product-Review: Stanley Stuart <stanley@instructure.com>
QA-Review: Stanley Stuart <stanley@instructure.com>
This commit is contained in:
Stanley Stuart 2013-07-03 14:47:49 -06:00
parent 3b75fd2f13
commit 1a964e212b
1 changed files with 164 additions and 0 deletions

164
app/stylesheets/tables.scss Normal file
View File

@ -0,0 +1,164 @@
// Look in app/stylesheets/bootstrap/_tables.scss for the source.
// This file is for DOCUMENTATION ONLY!
/*
@styleguide Tables
```html
<table class="table">
<thead>
<tr>
<td>Column Heading 1</td>
<td>Column Heading 2</td>
<td>Column Heading 3</td>
<td>Column Heading 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
```
*/
/*
@styleguide Tables: Condensed/Half-Padding
```html
<table class="table table-condensed">
<thead>
<tr>
<td>Column Heading 1</td>
<td>Column Heading 2</td>
<td>Column Heading 3</td>
<td>Column Heading 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
```
*/
/*
@styleguide Tables: Bordered
```html
<table class="table table-bordered">
<thead>
<tr>
<td>Column Heading 1</td>
<td>Column Heading 2</td>
<td>Column Heading 3</td>
<td>Column Heading 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
```
*/
/*
@styleguide Tables: Zebra-Striping
```html
<table class="table table-striped">
<thead>
<tr>
<td>Column Heading 1</td>
<td>Column Heading 2</td>
<td>Column Heading 3</td>
<td>Column Heading 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
```
*/
/*
@styleguide Tables: Backgrounds
```html
<table class="table">
<thead>
<tr>
<td>Column Heading 1</td>
<td>Column Heading 2</td>
<td>Column Heading 3</td>
<td>Column Heading 4</td>
</tr>
</thead>
<tbody>
<tr class="success">
<td>Success</td>
<td>Success</td>
<td>Success</td>
<td>Success</td>
</tr>
<tr class="error">
<td>Error</td>
<td>Error</td>
<td>Error</td>
<td>Error</td>
</tr>
<tr class="warning">
<td>Warning</td>
<td>Warning</td>
<td>Warning</td>
<td>Warning</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Info</td>
<td>Info</td>
<td>Info</td>
</tr>
</tbody>
</table>
```
*/