+
+
diff --git a/docs-orange/boostwatch/index.html b/docs-orange/boostwatch/index.html
index 3300ca3ab5..c54bc72089 100644
--- a/docs-orange/boostwatch/index.html
+++ b/docs-orange/boostwatch/index.html
@@ -22,7 +22,7 @@
Orange Icons
{% include boostwatch/modal.html %}
-{% include boostwatch/tableSorter.html %}
+{% include boostwatch/tables.html %}
{% include boostwatch/bulletPoint.html %}
{% include boostwatch/navLocal.html %}
{% include boostwatch/navTab.html %}
diff --git a/scss/_o-tables.scss b/scss/_o-tables.scss
new file mode 100644
index 0000000000..cabe2c1b1a
--- /dev/null
+++ b/scss/_o-tables.scss
@@ -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;
+ }
+}
diff --git a/scss/_o-tablesorter.scss b/scss/_o-tablesorter.scss
deleted file mode 100644
index ef09f9d2c8..0000000000
--- a/scss/_o-tablesorter.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// 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;
- }
-}
diff --git a/scss/_orange-css.scss b/scss/_orange-css.scss
index 39f66290c4..aa6045c3c3 100644
--- a/scss/_orange-css.scss
+++ b/scss/_orange-css.scss
@@ -1,31 +1,3 @@
-// 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%);
- }
- }
-}
-
//
// Caret
// --------------------------------------------------
@@ -195,160 +167,6 @@ a:focus {
color: $brand-primary;
}
-// == TABLES
-.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 tr {
- border-bottom-width: 2px;
- }
-
- &.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;
- // padding-top: .9375rem;
- // padding-bottom: .9375rem;
- 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;
- }
- }
- }
-
- &.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;
-}
-
// Force bold onto panel heading and footer and wells
.panel-heading,
.panel-footer,
diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss
index daebe0adc0..b5a73685f7 100644
--- a/scss/bootstrap.scss
+++ b/scss/bootstrap.scss
@@ -64,7 +64,7 @@
@import "o-navbar";
@import "o-nav-local";
@import "o-accordion";
-@import "o-tablesorter";
+@import "o-tables";
@import "o-modal";
@import "o-nav";
@import "o-skiplinks";