nitro_sg 3.0.0 → 3.0.1

data/sass-mixins/nitro-ui/_tables-responsive.scss

@@ -0,0 +1,253 @@
+/* Responsive Table -------------------------------------- */
+.table {
+  color: $ink;
+  font-size: 13px;
+  background-color: #fff;
+  width: 100%;
+
+  tr {
+    &.ghost {
+      background-color: #ecf3ec;
+      color: $medium-dark-grey;
+    }
+
+    &.shadow {
+      td {
+        background-color: $lavender;
+        color: $medium-dark-grey;
+      }
+    }
+
+    &.add, &.update {
+      border-right: solid 3px $dark-orange;
+      border-left: solid 3px $dark-orange;
+      td {
+        background-color: $light-orange;
+        color: $medium-dark-grey;
+      }
+      .text-muted {
+        color: $medium-dark-grey;
+      }
+    }
+
+    &.void {
+      td {
+        color: $medium-dark-grey;
+        a {
+          color: $medium-dark-grey;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+
+  th {
+    color: $ink-lighter;
+    background-color: tint($sky, 20%);
+    &.sort {
+      background-color: $table-bg-stripe-color;
+    }
+    a {
+      color: $header-color;
+      text-decoration: underline;
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+
+  td {
+    vertical-align: top;
+    &.sort { background-color: shade($sky-lighter, 3%) }
+  }
+}
+
+/* let table-responsive parent elements show dropdowns */
+/* outside of their dimensions */
+.table-responsive-with-dropdowns {
+  overflow-x: visible;
+}
+
+.table-striped {
+  tbody > tr:nth-child(odd) > td.sort { background-color: shade($sky-lighter, 5%) }
+
+  tbody > tr.ghost:nth-child(odd) > th,
+  tbody > tr.ghost:nth-child(odd) > td { background-color: #ecf3ec; }
+
+  tbody > tr.add:nth-child(odd) > th,
+  tbody > tr.add:nth-child(odd) > td,
+  tbody > tr.update:nth-child(odd) > th,
+  tbody > tr.update:nth-child(odd) > td { background-color: $light-orange; }
+}
+
+/* Use bootstrap responsive tables by default, have this */
+/* alternative method if it's more desireable. */
+/* You can add the .hide-labels class to prevent the left labels */
+.collapse-and-rotate {
+
+  @media only screen and (max-width: 600px) {
+
+    table, table.table-condensed {
+      /* show all columns - assumes we're rotating the table view to a column. */
+      tr {
+        border-bottom: solid 1px $medium-grey;
+        td, th {
+          display: block;
+          visibility: visible;
+        }
+      }
+
+      /* twist table view into a column view */
+      thead {
+        tr {
+          left: -9999px;
+          position: absolute;
+          top: -9999px;
+        }
+      }
+      tbody {
+        td {
+          /* Behave  like a "row" */
+          border: none;
+          border-bottom: 1px solid $light-grey;
+          min-height: 2.2em;
+          padding-left: 34%;
+          position: relative;
+          text-align:left;
+          white-space: normal;
+        }
+        td:before {
+          content: attr(data-title);
+          /* Top/left values mimic padding */
+          color: $dark-blue;
+          font-weight: bold;
+          left: 16px;
+          padding-right: 10px;
+          position: absolute; /* Now like a table header */
+          text-align:left;
+          top: 6px;
+          width: 25%;
+          white-space: nowrap;
+        }
+      }
+    }
+  }
+
+  &.hide-labels {
+    @media only screen and (max-width: 600px) {
+      table, table.table-condensed {
+        tbody {
+          td {
+            padding-left: 5px;
+          }
+          td:before {
+            left: 0;
+            padding-right: 0;
+            position: relative;
+            width: 0;
+          }
+          td:before { content: ''; }
+        }
+      }
+    }
+  }
+}
+
+
+/* iPad Responsive Table -------------------------------------- */
+/* This is a copy of the normal table-responsive bootstrap code
+   only applied to iPad sized devices.
+*/
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid #ddd;
+  }
+
+  .table-responsive > .table {
+    margin-bottom: 0;
+  }
+
+  .table-responsive > .table > thead > tr > th,
+  .table-responsive > .table > tbody > tr > th,
+  .table-responsive > .table > tfoot > tr > th,
+  .table-responsive > .table > thead > tr > td,
+  .table-responsive > .table > tbody > tr > td,
+  .table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+
+  .table-responsive > .table-bordered {
+    border: 0;
+  }
+
+  .table-responsive > .table-bordered > thead > tr > th:first-child,
+  .table-responsive > .table-bordered > tbody > tr > th:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+  .table-responsive > .table-bordered > thead > tr > td:first-child,
+  .table-responsive > .table-bordered > tbody > tr > td:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+    border-right: 0;
+  }
+
+  .table-responsive > .table-bordered > thead > tr > th:last-child,
+  .table-responsive > .table-bordered > tbody > tr > th:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+  .table-responsive > .table-bordered > thead > tr > td:last-child,
+  .table-responsive > .table-bordered > tbody > tr > td:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+    border-left: 0;
+  }
+
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+  }
+}
+
+/* tablesorter headers should have a pointer since they are clickable. */
+.tablesorter-bootstrap {
+  .tablesorter-header { cursor: pointer; }
+}
+
+
+
+
+// TODO: Should import these pixel sizes from Bootstrap
+
+.columns-responsive-narrow {
+  column-count: 2;
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+}
+
+@media (min-width: 768px) {
+  .columns-responsive-narrow {
+    column-count: 3;
+    -moz-column-count: 3;
+    -webkit-column-count: 3;
+  }
+}
+
+@media (min-width: 992px) {
+  .columns-responsive-narrow {
+    column-count: 5;
+    -moz-column-count: 5;
+    -webkit-column-count: 5;
+  }
+}
+
+@media (min-width: 1200px) {
+  .columns-responsive-narrow {
+    column-count: 6;
+    -moz-column-count: 6;
+    -webkit-column-count: 6;
+  }
+}

data/sass-mixins/nitro-ui/_tables.scss

@@ -0,0 +1,296 @@
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding:            8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding:  5px !default;
+
+//** Default background color used for all tables.
+$table-bg:                      transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent:               #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover:                #f5f5f5 !default;
+$table-bg-active:               $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$border-color:            $sky !default;
+
+
+
+
+
+
+
+// Tables
+
+@mixin table-row-variant($state, $background) {
+  // 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: $background;
+    }
+  }
+
+  // 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($background, 5%);
+    }
+  }
+}
+
+
+
+
+
+
+
+
+//
+// Tables
+// --------------------------------------------------
+
+
+table {
+  background-color: $table-bg;
+}
+caption {
+  padding-top: $table-cell-padding;
+  padding-bottom: $table-cell-padding;
+  color: $text-muted;
+  text-align: left;
+}
+th {
+  text-align: left;
+}
+
+
+// Baseline styles
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: $line-height-computed;
+  // Cells
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: $table-cell-padding;
+        line-height: 1.42857;
+        vertical-align: top;
+        border-top: 1px solid $border-color;
+      }
+    }
+  }
+  // Bottom align for column headings
+  > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid $border-color;
+  }
+  // Remove top border from thead by default
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+  // Account for multiple tbody instances
+  > tbody + tbody {
+    border-top: 2px solid $border-color;
+  }
+
+  // Nesting
+  .table {
+    background-color: $body-bg;
+  }
+}
+
+
+// Condensed table w/ half padding
+
+.table-condensed {
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        padding: $table-condensed-cell-padding;
+      }
+    }
+  }
+}
+
+
+// Bordered version
+//
+// Add borders all around the table and between all the columns.
+
+.table-bordered {
+  border: 1px solid $border-color;
+  > thead,
+  > tbody,
+  > tfoot {
+    > tr {
+      > th,
+      > td {
+        border: 1px solid $border-color;
+      }
+    }
+  }
+  > thead > tr {
+    > th,
+    > td {
+      border-bottom-width: 2px;
+    }
+  }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+  > tbody > tr:nth-of-type(odd) {
+    background-color: $sky-lighter;
+  }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+  > tbody > tr:hover {
+    background-color: $table-bg-hover;
+  }
+}
+
+
+// Table cell sizing
+//
+// Reset default table behavior
+
+table col[class*="col-"] {
+  position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+  float: none;
+  display: table-column;
+}
+table {
+  td,
+  th {
+    &[class*="col-"] {
+      position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+      float: none;
+      display: table-cell;
+    }
+  }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+// Generate the contextual variants
+@include table-row-variant('active', $table-bg-active);
+@include table-row-variant('success', $state-success-bg);
+@include table-row-variant('info', $state-info-bg);
+@include table-row-variant('warning', $state-warning-bg);
+@include table-row-variant('danger', $state-danger-bg);
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+  overflow-x: auto;
+  min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+
+  @media screen and (max-width: $screen-xs-max) {
+    width: 100%;
+    margin-bottom: ($line-height-computed * 0.75);
+    overflow-y: hidden;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid $border-color;
+
+    // Tighten up spacing
+    > .table {
+      margin-bottom: 0;
+
+      // Ensure the content doesn't wrap
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th,
+          > td {
+            white-space: nowrap;
+          }
+        }
+      }
+    }
+
+    // Special overrides for the bordered tables
+    > .table-bordered {
+      border: 0;
+
+      // Nuke the appropriate borders so that the parent can handle them
+      > thead,
+      > tbody,
+      > tfoot {
+        > tr {
+          > th:first-child,
+          > td:first-child {
+            border-left: 0;
+          }
+          > th:last-child,
+          > td:last-child {
+            border-right: 0;
+          }
+        }
+      }
+
+      // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
+      // chances are there will be only one `tr` in a `thead` and that would
+      // remove the border altogether.
+      > tbody,
+      > tfoot {
+        > tr:last-child {
+          > th,
+          > td {
+            border-bottom: 0;
+          }
+        }
+      }
+
+    }
+  }
+}