Initial Commit

dornr · May 7, 2024 · 361ffbf · 361ffbf
commit 361ffbf
Show file tree

Hide file tree

Showing 5 changed files with 334 additions and 0 deletions.
diff --git a/handlebars/example-bgcolor-dark.handlebars b/handlebars/example-bgcolor-dark.handlebars
@@ -0,0 +1,53 @@
+<div class="table-responsive">
+  <table id="table-2" class="table table-bordered">
+    <thead class="itc-table-head itc-table-head--dark">
+      <tr>
+        <th scope="col">Column Heading 1</th>
+        <th scope="col">Column Heading 2</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Cell 1</td>
+        <td>Cell 2</td>
+      </tr>
+      <tr>
+        <td>Cell 3</td>
+        <td>Cell 4</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+
+<hr />
+<h3>Alternate from Cascade</h3>
+
+<div class="table-responsive">
+  <table class="table table-bordered table-striped table-hover">
+    <thead class="itc-table-head itc-table-head--light" style="">
+      <tr>
+        <th>test</th>
+        <th>secondly</th>
+        <th>lastly</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>aa</td>
+        <td>ab</td>
+        <td>ac</td>
+      </tr>
+      <tr>
+        <td>ba</td>
+        <td>bb</td>
+        <td>bc</td>
+      </tr>
+      <tr>
+        <td>ca</td>
+        <td>cb</td>
+        <td>cc</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/handlebars/example-bgcolor-light.handlebars b/handlebars/example-bgcolor-light.handlebars
@@ -0,0 +1,23 @@
+<div class="table-responsive">
+  <table
+    id="table-1"
+    class="table table-bordered"
+  >
+    <thead class="itc-table-head itc-table-head--light">
+      <tr>
+        <th scope="col">Column Heading 1</th>
+        <th scope="col">Column Heading 2</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Cell 1</td>
+        <td>Cell 2</td>
+      </tr>
+      <tr>
+        <td>Cell 3</td>
+        <td>Cell 4</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/scss/_table-head.scss b/scss/_table-head.scss
@@ -0,0 +1,26 @@
+// =============================================================================
+// Table head component styles
+// Extends Boostrap table head styles
+// =============================================================================
+
+// Background color variations
+// Based on https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_tables.scss
+.table .itc-table-head--light {
+  th {
+    background-color: $aged-gold;
+    color: $white;
+    border-width: 0;
+  }
+}
+
+.table .itc-table-head--dark {
+  th {
+    background-color: $black;
+    color: $boiler-gold;
+  }
+}
+
+
+.table-bordered > .itc-table-head--dark > tr > th {
+  border-color: $gray;
+}
diff --git a/scss/_tables.scss b/scss/_tables.scss
@@ -0,0 +1,173 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+  width: 100%;
+  margin-bottom: $spacer;
+  color: $table-color;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+  th,
+  td {
+    padding: $table-cell-padding-x;
+    vertical-align: top;
+    border-top: $table-border-width solid $table-border-color;
+  }
+
+  thead th {
+    vertical-align: bottom;
+    border-bottom: (2 * $table-border-width) solid $table-border-color;
+  }
+
+  tbody+tbody {
+    border-top: (2 * $table-border-width) solid $table-border-color;
+  }
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+
+  th,
+  td {
+    padding: $table-cell-padding-x-sm;
+  }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+
+.table-bordered {
+  border: $table-border-width solid $table-border-color;
+
+  th,
+  td {
+    border: $table-border-width solid $table-border-color;
+  }
+
+  thead {
+
+    th,
+    td {
+      border-bottom-width: 2 * $table-border-width;
+    }
+  }
+}
+
+.table-borderless {
+
+  th,
+  td,
+  thead th,
+  tbody+tbody {
+    border: 0;
+  }
+}
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  tbody tr:nth-of-type(#{$table-striped-order}) {
+    background-color: $table-striped-bg;
+  }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  tbody tr {
+    &:hover {
+      color: $table-hover-color;
+      background-color: $table-hover-bg;
+    }
+  }
+}
+
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+// Not messing with linting the styles below....
+/* stylelint-disable */
+.table-responsive {
+  @each $breakpoint in map-keys($grid-breakpoints) {
+    $next: breakpoint-next($breakpoint, $grid-breakpoints);
+    $infix: breakpoint-infix($next, $grid-breakpoints);
+
+    &#{$infix} {
+      @include media-breakpoint-down($breakpoint) {
+        display: block;
+        width: 100%;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        // Prevent double border on horizontal scroll due to use of `display: block;`
+        >.table-bordered {
+          border: 0;
+        }
+      }
+    }
+  }
+}
+
+//
+// Basic Bootstrap table
+//
+
+table {
+  width: 100%;
+  margin-bottom: $spacer;
+  color: $table-color;
+  background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+  th,
+  td {
+    padding: $table-cell-padding-x;
+    vertical-align: top;
+    border-top: $table-border-width solid $table-border-color;
+  }
+
+  thead th {
+    vertical-align: bottom;
+    border-bottom: (2 * $table-border-width) solid $table-border-color;
+  }
+
+  tbody+tbody {
+    border-top: (2 * $table-border-width) solid $table-border-color;
+  }
+}
+
+
+// Border versions
+//
+// Add or remove borders all around the table and between all the columns.
+
+table {
+  border: $table-border-width solid $table-border-color;
+
+  th,
+  td {
+    border: $table-border-width solid $table-border-color;
+  }
+
+  thead {
+
+    th,
+    td {
+      border-bottom-width: 2 * $table-border-width;
+    }
+  }
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -0,0 +1,59 @@
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+) !default;
+$table-cell-padding-y:        .5rem;
+$table-cell-padding-x:        .5rem;
+$table-cell-padding-y-sm:     .25rem;
+$table-cell-padding-x-sm:     .25rem;
+$table-cell-vertical-align:   top;
+$table-color:                 #212529;
+$table-bg:                    transparent;
+$table-accent-bg:             transparent;
+$table-th-font-weight:        null;
+$table-striped-color:         $table-color;
+$table-striped-bg-factor:     .05;
+$table-striped-bg:            rgba($black, $table-striped-bg-factor);
+$table-active-color:          $table-color;
+$table-active-bg-factor:      .1;
+$table-active-bg:             rgba($black, $table-active-bg-factor);
+$table-hover-color:           $table-color;
+$table-hover-bg-factor:       .075;
+$table-hover-bg:              rgba($black, $table-hover-bg-factor);
+$table-border-factor:         .1;
+$table-border-width:          1px !default;
+$table-border-color:          #dee2e6;
+$table-striped-order:         odd;
+$table-group-separator-color: currentColor;
+$table-caption-color:         #555555;
+$table-bg-scale:              -80%;
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+// scss-docs-start grid-breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+) !default;
+
+// Colors
+$aged-gold: #8e6f3e;
+$white: #ffffff;
+$boiler-gold: #cfb991;
+$black: #000000;
+$gray: #4b4b4b;
+
+
+// mixins: using bootstrap mixins:
+// https://github.com/twbs/bootstrap/blob/72d3b6efc4b92e83a4abca6f5bc0cd7e6fd25931/scss/mixins/_breakpoints.scss#L17