@rio-cloud/rio-uikit 0.16.1-beta-7 → 0.16.1-beta-10

package/lib/styles/design/tables.less

@@ -0,0 +1,855 @@
+@table-cell-padding: 12px;
+@table-condensed-cell-padding: 7px;
+@table-bg: @color-white;
+@table-bg-hover: @gray-light;
+@table-bg-active: @gray-light;
+@table-bg-highlight: @color-highlight-lightest;
+@table-border-color: @gray-lighter;
+
+.table {
+  background-color: transparent;
+  font-weight: @font-normal;
+  max-width: 100%;
+  width: 100%;
+  // margin-bottom: @grid-gutter-height;
+
+  > tbody > tr > td,
+  > tbody > tr > th,
+  > tfoot > tr > td,
+  > tfoot > tr > th,
+  > thead > tr > td,
+  > thead > tr > th {
+    padding: @table-cell-padding;
+    line-height: 1.25;
+
+    .panel & {
+      padding: @table-cell-padding @panel-x-padding;
+    }
+  }
+
+  // .table-responsive
+  &-responsive {
+    overflow-x: auto;
+
+    @media screen and (max-width: @screen-ls) {
+      -ms-overflow-style: -ms-autohiding-scrollbar;
+      border: 1px solid @table-border-color;
+      overflow-y: hidden;
+      width: 100%;
+
+      > .table {
+        > thead,
+        > tbody,
+        > tfoot {
+          > tr {
+            > th,
+            > td {
+              white-space: nowrap;
+            }
+          }
+        }
+      }
+
+      > .table-bordered {
+        border: 0;
+
+        > thead,
+        > tbody,
+        > tfoot {
+          > tr {
+            > th:first-child,
+            > td:first-child {
+              border-left: 0;
+            }
+
+            > th:last-child,
+            > td:last-child {
+              border-right: 0;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // .table.table-condensed
+  &.table-condensed {
+    > thead > tr > th,
+    > tbody > tr > th,
+    > tfoot > tr > th,
+    > thead > tr > td,
+    > tbody > tr > td,
+    > tfoot > tr > td {
+      padding: @table-condensed-cell-padding @table-cell-padding;
+
+      .panel & {
+        padding: @table-condensed-cell-padding @panel-x-padding;
+      }
+    }
+  }
+
+  // .table.table-layout-fixed
+  &.table-layout-fixed {
+    table-layout: fixed;
+  }
+
+  // .table.table-head-filled
+  &.table-head-filled {
+    thead > tr th {
+      background-color: @gray-lightest;
+
+      &.table-checkbox {
+        z-index: 2;
+      }
+    }
+  }
+
+  // .table.table-sticky
+  &[class*="table-sticky"] {
+    thead > tr th {
+      position: sticky;
+      z-index: 1;
+    }
+
+    &:not([class*="-in-container"]) {
+      thead > tr th {
+        @media (max-width: @screen-ls) {
+          top: -(@ApplicationLayoutBodyPadding*0.5);
+        }
+        @media (min-width: @screen-ls) {
+          top: -(@ApplicationLayoutBodyPadding);
+        }
+      }
+    }
+
+    &[class*="-in-container"] {
+      thead > tr th {
+        top: 0;
+      }
+    }
+  }
+
+  // .table.table-sticky-cell
+  &[class*="table-sticky-cell"] {
+    margin-bottom: 0;
+
+    thead > tr th {
+      position: sticky;
+      top: 0;
+    }
+
+    &[class*="-first"] {
+      thead > tr th {
+        &:first-child {
+          left: 0;
+          z-index: 2;
+          border-right: 4px solid @table-border-color;
+        }
+
+        &:last-child {
+          right: 0;
+          z-index: 2;
+          border-left: 4px solid @table-border-color;
+        }
+      }
+
+      tbody > tr {
+        td {
+          &:first-child {
+            background-color: @color-white;
+            left: 0;
+            position: sticky;
+            //z-index: 2;
+            border-right: 4px solid @table-border-color;
+          }
+        }
+      }
+    }
+
+    &[class*="-last"]{
+      thead > tr th {
+        &:last-child {
+          right: 0;
+          //z-index: 2;
+        }
+      }
+
+      tbody > tr {
+        td {
+          &:last-child {
+            background-color: @color-white;
+            right: 0;
+            position: sticky;
+            //z-index: 2;
+            border-left: 4px solid @table-border-color;
+          }
+        }
+      }
+    }
+  }
+
+  // .table.table-column-overflow-hidden
+  &.table-column-overflow-hidden {
+    > thead > tr > th,
+    > tbody > tr > th,
+    > tfoot > tr > th,
+    > thead > tr > td,
+    > tbody > tr > td,
+    > tfoot > tr > td {
+      &:not(.table-action):not(.table-checkbox):not(.overflow-visible) {
+        overflow: hidden;
+      }
+    }
+  }
+
+  // .table.table-row-first-border-none
+  &.table-row-first-border-none {
+    > tbody > tr {
+      &:first-child {
+        > td {
+          border-top: none;
+        }
+      }
+    }
+  }
+
+  // .table.table-row-last-border-none
+  &.table-row-last-border-none {
+    > tbody > tr {
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  colgroup {
+    col {
+      &.table-checkbox {
+        min-width: 40px;
+        width: 40px;
+
+        &:first-child {
+          min-width: 50px;
+          width: 50px;
+        }
+      }
+
+      &.table-action {
+        min-width: 40px;
+        width: 40px;
+
+        &:last-child {
+          min-width: 60px;
+          width: 60px;
+        }
+      }
+    }
+  }
+
+  > thead {
+    &:first-child {
+      > tr:first-child {
+        > th,
+        > td {
+          border-top: 0;
+        }
+      }
+    }
+
+    > tr {
+      background-color: transparent;
+
+      > th {
+        border-bottom: 2px solid @table-border-color;
+        border-top: 1px solid @table-border-color;
+        font-weight: @font-light;
+        text-align: left;
+        white-space: nowrap;
+
+        &.table-action {
+          width: 40px;
+          text-align: center;
+        }
+
+        &.table-checkbox {
+          padding-bottom: 0;
+          padding-top: 0;
+          text-align: center;
+          vertical-align: middle;
+          width: 40px;
+          font-weight: normal;
+
+          &:first-child {
+            padding-left: @table-cell-padding;
+          }
+
+          // > .dropdown > .dropdown-toggle {
+          //     justify-content: flex-end;
+          // }
+        }
+      }
+    }
+  }
+
+  > tbody > tr {
+    background-color: @table-bg;
+    .table-state(info, @brand-info, false);
+    .table-state(warning, @brand-warning, false);
+    .table-state(success, @brand-success, false);
+    .table-state(danger, @brand-danger, false);
+
+    th,
+    td {
+      &:not([class*='bg-']) {
+        background-color: transparent;
+      }
+    }
+
+    &:last-child {
+      border-bottom: 1px solid @table-border-color;
+    }
+
+    td {
+      border-top: 1px solid @table-border-color;
+      vertical-align: middle;
+
+      &:focus,
+      &:active:focus {
+        outline: 0;
+      }
+
+      &.table-action {
+        padding: 0;
+        text-align: center;
+
+        &:first-child {
+          padding-left: 8px;
+        }
+
+        .rioglyph[class*="rioglyph-chevron"] {
+          font-size: 14px;
+        }
+      }
+
+      &.table-checkbox {
+        padding: 0;
+        text-align: center;
+
+        &:first-child {
+          padding-left: 8px;
+        }
+
+        > .checkbox {
+          .checkbox-text {
+            &::before,
+            &:after {
+              margin-right: 0;
+            }
+          }
+        }
+      }
+    }
+
+    &.active {
+      td {
+        .table-state(active, @brand-primary, false)
+      }
+    }
+
+    &.disabled,
+    &[disabled] {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  .checkboxWrapper > label {
+    margin-bottom: 0;
+  }
+
+  // .table.table-bordered
+  &.table-bordered {
+    border: none;
+    border-collapse: separate;
+
+    > thead > tr > th,
+    > tbody > tr > td {
+      border: none;
+      border-top: 4px solid @table-border-color;
+    }
+
+    > tbody > tr:last-child {
+      border-bottom: 4px solid @table-border-color;
+    }
+
+    > tbody > tr > td {
+      vertical-align: middle;
+    }
+  }
+
+  // Zebra-striping
+  &.table-striped {
+    > tbody > tr:nth-of-type(odd) {
+      background-color: darken(@table-bg, 2%);
+    }
+  }
+
+  // .table.table-hover
+  &.table-hover {
+    > tbody > tr {
+      .table-state(info, @brand-info, true);
+      .table-state(warning, @brand-warning, true);
+      .table-state(success, @brand-success, true);
+      .table-state(danger, @brand-danger, true);
+
+      &:hover {
+        background-color: @table-bg;
+
+        td:not([class*='bg-']) {
+          box-shadow: inset 0 500px 0 0 @table-bg-highlight;
+        }
+      }
+      &.active:hover {
+        td {
+          .table-state(active, @brand-primary, false)
+        }
+      }
+    }
+  }
+
+  // .table.table-cards
+  &.table-cards {
+    @cardsSpace: 10px;
+    overflow: hidden;
+
+    &.table-cards-with-border {
+      &.table-single-card,
+      &.table-multi-cards {
+        tbody {
+          tr {
+            border: 3px solid @gray-lighter;
+          }
+        }
+      }
+    }
+
+    &.table-single-card,
+    &.table-multi-cards {
+      display: block;
+      padding-bottom: 5px;
+      padding-top: 5px;
+      width: 100%;
+
+      colgroup {
+        display: none;
+      }
+
+      thead {
+        display: block;
+
+        th {
+          &:not(.table-checkbox) {
+            display: none;
+          }
+
+          &.table-checkbox {
+            background: transparent;
+            display: block;
+            margin-bottom: 20px;
+            margin-top: -5px;
+            padding: 0;
+            text-align: left;
+
+            .dropdown {
+              &:not(.open) {
+                .dropdown-toggle {
+                  padding: 0 6px;
+                  .button-variant(
+                    ~'!important';
+                    @btn-default-bg;
+                    @btn-default-border;
+                    @btn-default-color;
+                    @btn-default-color;
+                    @btn-default-color;
+                    @btn-default-color;
+                    darken(@btn-default-color, 17%);
+                    darken(@btn-default-border, 12%);
+                    darken(@btn-default-border, 12%);
+                    darken(@btn-default-border, 25%);
+                    darken(@btn-default-border, 25%);
+                    @btn-default-bg;
+                    @btn-default-bg;
+                    @btn-default-bg;
+                    @btn-default-bg;
+                  );
+
+                  &:focus,
+                  &:active {
+                    background-color: @color-white !important;
+                    border-color: @color-highlight !important;
+
+                    &:hover {
+                      .rioglyph {
+                        color: @color-highlight !important;
+                      }
+                    }
+                  }
+
+                  &:hover {
+                    .rioglyph {
+                      color: @color-white !important;
+                    }
+                  }
+                }
+              }
+
+              &.open {
+                .dropdown-toggle {
+                  .button-variant(
+                    ~'!important';
+                    @btn-default-bg;
+                    @btn-default-border;
+                    @btn-default-color;
+                    @btn-default-color;
+                    @btn-default-color;
+                    @btn-default-color;
+                    darken(@btn-default-color, 17%);
+                    darken(@btn-default-border, 12%);
+                    darken(@btn-default-border, 12%);
+                    darken(@btn-default-border, 25%);
+                    darken(@btn-default-border, 25%);
+                    @btn-default-bg;
+                    @btn-default-bg;
+                    @btn-default-bg;
+                    @btn-default-bg;
+                  );
+
+                  &:hover, &:active, &:focus {
+                    .rioglyph:before {
+                      color: @color-white !important;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      tbody {
+        overflow: visible;
+        display: block;
+        flex-wrap: wrap;
+        display: flex;
+        margin: -(@cardsSpace * 0.5) - (@cardsSpace * 0.5) 0 - (@cardsSpace * 0.5);
+
+        tr {
+          border: 3px solid @color-white;
+          display: flex;
+          flex-wrap: wrap;
+          margin: @cardsSpace * 0.5;
+          width: 100%;
+
+          &.table-card-placeholder {
+            background: none;
+            border-bottom: none;
+            border-left-color: transparent;
+            border-right-color: transparent;
+            border-top: none;
+            margin-bottom: 0;
+            margin-top: 0;
+          }
+
+          td {
+            border-top: none;
+            min-height: 44px;
+            order: 3;
+            padding: @table-cell-padding;
+            white-space: normal;
+            width: 100%;
+
+            &:not([class*='table-']) {
+              border-top: 1px solid @gray-lighter;
+              width: 100%;
+            }
+
+            &:not(.cards-multiline):not([class*='table-']) {
+              display: flex;
+
+              &[data-field]:not([data-field='']) {
+                > * {
+                  display: flex;
+                  flex: 1 0;
+                }
+              }
+            }
+
+            &[class*='table-'] {
+              align-items: center;
+              display: inline-flex;
+              padding: 5px;
+            }
+
+            &.table-action {
+              flex: 1 1 auto;
+              justify-content: flex-end;
+              order: 2;
+              width: auto;
+            }
+
+            &.table-checkbox {
+              order: 1;
+              padding-left: @table-cell-padding;
+              width: 50%;
+            }
+
+            &.cards-multiline {
+              display: block;
+            }
+
+            &[data-field]:not([data-field='']) {
+              &:before {
+                color: @gray;
+                content: attr(data-field) ':';
+                float: left;
+                margin-right: 10px;
+                text-align: left !important;
+                transition: all 0.2s ease-in-out;
+              }
+            }
+
+            &:first-child {
+              border-top: none !important;
+
+              .checkboxWrapper {
+                float: left;
+              }
+            }
+
+            &.cards-hide {
+              display: none !important;
+            }
+
+            // custom styling
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6 {
+              margin: 0;
+            }
+
+            br {
+              display: none;
+            }
+          }
+
+          &:not(.active):not(.table-card-placeholder) {
+            background-color: @color-white !important;
+          }
+
+          &.active {
+            background: @table-bg-highlight !important;
+            border-color: @brand-primary;
+
+            td {
+              box-shadow: none !important;
+            }
+          }
+        }
+      }
+
+      &.table-hover {
+        tbody {
+          tr {
+            &:hover {
+              border-color: @table-bg-highlight;
+
+              &.active {
+                border-color: @brand-primary;
+              }
+
+              td {
+                background: @table-bg-highlight;
+                border-color: darken(@table-border-color, 8%);
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.table-multi-cards {
+      tbody {
+        tr {
+          td {
+            text-align: right !important;
+
+            > * {
+              justify-content: flex-end;
+
+              &:before {
+                content: '';
+                flex: 1 0;
+              }
+
+              img {
+                float: right;
+              }
+            }
+
+            &[data-field]:not([data-field='']) {
+              &:before {
+                max-width: 50%;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.table-single-card {
+      tbody {
+        tr {
+          td {
+            &:not(.cards-text-right) {
+              text-align: left !important;
+
+              > * {
+                justify-content: flex-start;
+              }
+            }
+
+            &.cards-text-right {
+              text-align: right !important;
+
+              > * {
+                justify-content: flex-end;
+              }
+            }
+
+            &[data-field]:not([data-field='']) {
+              &:before {
+                @media (max-width: @screen-sm) {
+                  width: 40%;
+                }
+
+                @media (min-width: @screen-sm) {
+                  width: 30%;
+                }
+
+                @media (min-width: @screen-lg) {
+                  width: 20%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.table-multi-cards {
+      tbody {
+        tr {
+          flex: 1 1;
+          min-width: 250px;
+        }
+      }
+    }
+  }
+
+  // grouped tr`s
+  tr {
+    &.compactRow {
+      background-color: @color-white !important;
+    }
+
+    &.extendedRow {
+      background-color: darken(@table-bg, 2%) !important;
+
+      td {
+        border-top: 2px solid @table-border-color !important;
+      }
+
+      + .compactRow {
+        td {
+          border-top: 20px solid @table-border-color !important;
+        }
+      }
+    }
+  }
+
+  .formatExpander {
+    &.animate {
+      transition: transform 0.2s ease-in-out;
+    }
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // Remove top border from thead by default
+  > caption + thead,
+  > colgroup + thead,
+  > thead:first-child {
+    > tr:first-child {
+      > th,
+      > td {
+        border-top: 0;
+      }
+    }
+  }
+}
+
+// States
+.table-state(@state, @color, @hoverable) {
+  & when (@state = active) {
+    background-color: transparent;
+    box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 0 500px 0 0 @table-bg-highlight;
+
+    &:first-child {
+      box-shadow: inset 0 2px 0 0 @color, inset 0 -2px 0 0 @color, inset 2px 0 0 0 @color,
+        inset 0 500px 0 0 @table-bg-highlight;
+    }
+
+    &:last-child {
+      box-shadow: inset 0 2px 0 0 @color, inset -2px 0 0 0 @color, inset 0 -2px 0 0 @color,
+        inset 0 500px 0 0 @table-bg-highlight;
+    }
+  }
+
+  & when (@state = info), (@state = warning), (@state = success), (@state = danger) {
+    &.@{state} {
+      & when (@hoverable = true) {
+        &:hover > td:first-child {
+          box-shadow: inset 5px 0 0 0 @color, inset 0 500px 0 0 @table-bg-highlight;
+        }
+      }
+
+      &.active, &.active:hover {
+        > td:first-child {
+          box-shadow: inset 5px 0 0 0 @color, inset 0 2px 0 0 @brand-primary, inset 0 -2px 0 0 @brand-primary,
+            inset 0 500px 0 0 @table-bg-highlight;
+        }
+      }
+
+      > td {
+        background-color: transparent !important;
+
+        &:first-child {
+          box-shadow: inset 5px 0 0 0 @color;
+        }
+      }
+    }
+  }
+}
+
+// Bootstrap Cols
+table td[class*="col-"],
+table th[class*="col-"] {
+  display: table-cell;
+  float: none;
+  position: static;
+}