From 361ffbfbac7700363d6829a8bd7396d4bcf2d642 Mon Sep 17 00:00:00 2001 From: Bobby Dorn Date: Tue, 7 May 2024 17:08:40 -0400 Subject: [PATCH] Initial Commit --- handlebars/example-bgcolor-dark.handlebars | 53 ++++++ handlebars/example-bgcolor-light.handlebars | 23 +++ scss/_table-head.scss | 26 +++ scss/_tables.scss | 173 ++++++++++++++++++++ scss/_variables.scss | 59 +++++++ 5 files changed, 334 insertions(+) create mode 100644 handlebars/example-bgcolor-dark.handlebars create mode 100644 handlebars/example-bgcolor-light.handlebars create mode 100644 scss/_table-head.scss create mode 100644 scss/_tables.scss create mode 100644 scss/_variables.scss diff --git a/handlebars/example-bgcolor-dark.handlebars b/handlebars/example-bgcolor-dark.handlebars new file mode 100644 index 0000000..866b034 --- /dev/null +++ b/handlebars/example-bgcolor-dark.handlebars @@ -0,0 +1,53 @@ +
+ + + + + + + + + + + + + + + + + +
Column Heading 1Column Heading 2
Cell 1Cell 2
Cell 3Cell 4
+
+ + +
+

Alternate from Cascade

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
testsecondlylastly
aaabac
babbbc
cacbcc
+
\ No newline at end of file diff --git a/handlebars/example-bgcolor-light.handlebars b/handlebars/example-bgcolor-light.handlebars new file mode 100644 index 0000000..e5c7116 --- /dev/null +++ b/handlebars/example-bgcolor-light.handlebars @@ -0,0 +1,23 @@ +
+ + + + + + + + + + + + + + + + + +
Column Heading 1Column Heading 2
Cell 1Cell 2
Cell 3Cell 4
+
diff --git a/scss/_table-head.scss b/scss/_table-head.scss new file mode 100644 index 0000000..7344fb2 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/scss/_tables.scss b/scss/_tables.scss new file mode 100644 index 0000000..b8c357d --- /dev/null +++ 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; + } + } +} \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss new file mode 100644 index 0000000..a1f4b63 --- /dev/null +++ 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 \ No newline at end of file