Skip to content

Commit

Permalink
Merge branch 'local-v4-dev' into v4-dev
Browse files Browse the repository at this point in the history
  • Loading branch information
ygatesoupe committed Oct 25, 2016
2 parents 7ffa64f + 2a45a35 commit 685409b
Show file tree
Hide file tree
Showing 6 changed files with 299 additions and 251 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ <h3>Checkbox table</h3>
</div>
</div>

<h3>Thumbnails & Icons table</h3>
<h3>Thumbnails table</h3>
<div class="container-fluid">
<div class="row">
<table class="table table-hover has-checkbox has-icon">
Expand Down Expand Up @@ -235,30 +235,60 @@ <h3>Thumbnails & Icons table</h3>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
</div>
</div>

<h3>Icons table</h3>
<div class="container-fluid">
<div class="row">
<table class="table table-hover has-icon">
<caption></caption>
<thead>
<tr>
<th scope="row">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox">
<span class="custom-control-indicator"></span>
<span class="custom-control-description sr-only">select row 5</span>
</label>
</th>
<td>
<span class="icon-info" style="color: #527EDB;"></span>
<span class="sr-only">info</span>
<th>Name</th>
<th style="text-align: center;">Column heading</th>
<th style="text-align: center;">Column heading</th>
<th style="text-align: center;">Column heading</th>
</tr>
</thead>
<tbody>
<tr>
<th>Item 1</th>
<td style="text-align: center;">
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td>
<td style="text-align: center;">
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td>
<td style="text-align: center;">
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td>
</tr>
<tr>
<th>Item 2</th>
<td style="text-align: center;">
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td style="text-align: center;">
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td></td>
</tr>
<tr>
<th>Item 3</th>
<td style="text-align: center;">
<span class="icon-tick" style="color: #32C832;"></span>
<span class="sr-only">checked</span>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Expand Down
2 changes: 1 addition & 1 deletion docs-orange/boostwatch/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h2 id="orange-icons">Orange Icons</h2>
</div>

{% include boostwatch/modal.html %}
{% include boostwatch/tableSorter.html %}
{% include boostwatch/tables.html %}
{% include boostwatch/bulletPoint.html %}
{% include boostwatch/navLocal.html %}
{% include boostwatch/navTab.html %}
Expand Down
253 changes: 253 additions & 0 deletions scss/_o-tables.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
//
// Tables
//

// Change the table states color
@mixin table-row-variant-border($state, $color) {
// Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables.
.table > thead > tr,
.table > tbody > tr,
.table > tfoot > tr {
> td.#{$state},
> th.#{$state},
&.#{$state} > td,
&.#{$state} > th {
background-color: $color;
}
}

// Hover states for `.table-hover`
// Note: this is not available for cells or rows within `thead` or `tfoot`.
.table-hover > tbody > tr {
> td.#{$state}:hover,
> th.#{$state}:hover,
&.#{$state}:hover > td,
&:hover > .#{$state},
&.#{$state}:hover > th {
background-color: darken($color, 5%);
}
}
}

.table {
// Cells
> thead,
> tbody,
> tfoot {
> tr {
border-bottom: 1px solid $table-border-color;

> th,
> td {
padding: .625rem .625rem .625rem 0;
font-size: $font-size-sm;
border: 0;
}

> th:first-child,
> td:first-child {
padding-left: .625rem;
}

> th {
font-size: $font-size-base;
}

[class^="icon-"],
[class*=" icon-"] {
font-size: 1.8125rem;
}
}
}

thead {
th {
font-weight: bold;
}

tr {
border-bottom-width: 2px;
}
}

tbody > th {
font-weight: normal;
}

&.has-checkbox {
// Boosted mod
// for display into tables with description sr-only (reg introduce in alpha.5 whith display inline-block
.custom-control {
display: inline;
}
// end mod
tr.selected {
> td,
> th {
background-color: $gray-lighter-o;
}
}

tr > th:first-child,
tr > td:first-child {
width: 1.25rem;

.custom-control.custom-checkbox {
padding-left: 1.25rem;
}
}
}

&.has-icon {
tr > td,
tr > th {
height: 3.125rem;
vertical-align: middle;

span,
img {
vertical-align: middle;
}

span {
margin-right: .375rem;
}

img {
width: 1.875rem;
height: 1.875rem;
margin-right: .625rem;
}

[class^="icon-"] {
width: 1.875rem;
font-size: 1.8125rem;
line-height: 0;
vertical-align: middle;
}
}
}

// &.has-status {
// thead th:not(:first-child),
// tr > td {
// text-align: center;
// }
// }

&.table-reflow {
thead,
tbody, {
> tr {
border: 0;
}

> tr > td {
line-height: 1.25rem;
}

> tr > th:first-child {
border-bottom: 2px solid $table-border-color;
}

> tr > th,
> tr > td {
border-bottom: 1px solid $table-border-color;
}

> tr > td:last-child {
border-right: 0;
}
}

thead > tr {
border: 0;

> th:not(:first-child) {
padding-left: .625rem;
border-bottom: 1px solid $table-border-color;
}

> th:last-child {
border-right: 0;
}
}

tbody {
> tr > th:first-child {
padding-left: 0;
}
}
}
}

@include table-row-variant-border(success, $state-success-border);
@include table-row-variant-border(info, $state-info-border);
@include table-row-variant-border(warning, $state-warning-border);
@include table-row-variant-border(danger, $state-danger-border);


// force caption for tables
caption {
padding: $padding-large-vertical 0;
font-size: $font-size-h1;
font-weight: bold;
color: #000;
caption-side: top;
background-color: #fff;
}

// Style jquery tablesorter ext
// scss-lint:disable SelectorFormat
//
// Table sorter
//

.tablesorter {
caption {
padding: $padding-large-vertical 0;
font-size: $font-size-h1;
font-weight: bold;
color: #000;
background-color: #fff;
}

th {
padding-right: 30px;
// font-weight: bold;
text-align: left;
cursor: pointer;

&.header {
background-repeat: no-repeat;
background-position: 95% 50%;

@include hover {
background-image: url("../img/triangle_sort.png");
}
}

&.tablesorter-headerDesc {
background-image: url("../img/triangle_down.png");
}

&.tablesorter-headerAsc {
background-image: url("../img/triangle_up.png");
}

a {
color: #000;
text-decoration: none;

@include hover-focus {
color: $brand-primary;
text-decoration: underline;
}
}
}

td {
text-align: left;
}
}
53 changes: 0 additions & 53 deletions scss/_o-tablesorter.scss

This file was deleted.

Loading

0 comments on commit 685409b

Please sign in to comment.