feat: add sortable table btn

techfromsage · Mar 3, 2022 · 39d119c · 39d119c
1 parent 1d5d368
commit 39d119c
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 4 deletions.
diff --git a/docs/assets/css/custom-full.css b/docs/assets/css/custom-full.css
diff --git a/docs/assets/css/custom-full.css.map b/docs/assets/css/custom-full.css.map
diff --git a/docs/assets/css/custom.css b/docs/assets/css/custom.css
diff --git a/docs/assets/css/custom.css.map b/docs/assets/css/custom.css.map
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -1,3 +1,7 @@
+.table > :not(:first-child) {
+  border-top: none;
+}
+
 // Temp override while we wait for https://github.com/twbs/bootstrap/pull/35200 to end up in live
 .table > :not(caption):not(colgroup) + * {
   border-top: (2 * $table-border-width) solid $table-group-separator-color !important;
@@ -12,3 +16,41 @@ th {
     padding: $table-cell-padding-y-lg $table-cell-padding-x-lg;
   }
 }
+
+.o-table--sortable {
+  th {
+    padding: 0;
+  }
+}
+
+.o-table__sort-btn {
+  width: 100%;
+  padding: 0.5rem 0.5rem;
+  font-weight: bold;
+  border-radius: 0;
+  text-align: left;
+
+  :focus {
+    outline: 1px;
+    box-shadow: none;
+  }
+}
+
+th:not([aria-sort]) .o-table__sort-btn .o-table__sort-btn__arrow--up,
+th:not([aria-sort]) .o-table__sort-btn .o-table__sort-btn__arrow--down {
+  display: none;
+}
+
+th[aria-sort="descending"] .o-table__sort-btn .o-table__sort-btn__arrow--both,
+th[aria-sort="descending"] .o-table__sort-btn .o-table__sort-btn__arrow--down {
+  display: none;
+}
+
+th[aria-sort="ascending"] .o-table__sort-btn .o-table__sort-btn__arrow--both,
+th[aria-sort="ascending"] .o-table__sort-btn .o-table__sort-btn__arrow--up {
+  display: none;
+}
+
+.sorted {
+  background-color: #017e872a;
+}