openproject/app/assets/stylesheets/content/_table.sass

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2017 the OpenProject Foundation (OPF)
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2017 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
//++

@include keyframes(fade-out)
  from
    opacity: 1
  to
    opacity: 0

$input-elements: input, 'input.form--text-field', select, 'select.form--select', '.form--field-affix', 'a.button'

.generic-table--container
  position:     relative
  height:       100%
  overflow:
    x: auto
    y: hidden

  &.-with-footer
    padding-bottom: $generic-table--footer-height

.generic-table--results-container
  height:       100%
  overflow:
    x: auto
    y: auto

.generic-table--action-buttons
  margin-top: 2rem

#generic-table
  tr.issue
    &.ng-enter, &.ng-move
      @include transition(0.5s linear all)
      opacity: 0
    &.ng-enter.ng-enter-active, &.ng-move.ng-move-active
      opacity: 1
    &.ng-leave
      @include animation(0.5s fade-out)

table.generic-table
  border-collapse: collapse
  width:  100%
  margin: 0
  font-size: $generic-table--font-size

  col
    &:hover,
    &.hover
      background:   #f8f8f8

  thead
    height: $generic-table--header-height

    &.-sticky
      position: sticky
      top: 0
      background: white
      // z-index needs be higher than row z-index
      z-index: 200
    tr
      &:hover
        background: none
    th
      font-size: $generic-table--header-font-size
      text-transform: uppercase
      text-align: left
      line-height: 34px
      padding: 0
      min-width: 150px

      &.active-column
        background: #f8f8f8
      a
        text-decoration: none
        color: $body-font-color
        &:hover, &:active
          text-decoration: none
          color: $body-font-color

      &.-short
        min-width: 0

      .-required:after
        @include default-transition
        content:  '*'
        color:    $primary-color-dark
        padding:  0 0.2rem

    .sort
      &.asc:after
        @include icon-common
        @extend .icon-sort-ascending:before
        margin-left: 5px
        font-size: 1.2em
        vertical-align: text-bottom

      &.desc:after
        @include icon-common
        @extend .icon-sort-descending:before
        margin-left: 5px
        font-size: 1.2em
        vertical-align: text-bottom

  tfoot
    tr
      border:
        top:    0
        bottom: 0
      height:   0
    td
      height:   0
      padding:
        top:    0
        bottom: 0

  tbody
    tr
      &:hover
        background: $table-row-highlighting-color

    td
      border-bottom: 1px solid $table-row-border-color
      max-width: 300px
      min-width: 150px
      overflow:  hidden
      text-overflow: ellipsis
      text-align: left
      line-height: 1.6
      padding-top: 0.5rem
      padding-bottom: 0.5rem
      vertical-align: middle

      // Center input fields and select boxes vertically in tables
      .form--field
        margin: 0px
      @each $inputElement in $input-elements
        #{$inputElement},
        #{$inputElement}~.form-label
          vertical-align: middle

      input[type="checkbox"], input[type="radio"]
        margin-top: -0.25rem

      &.-short
        min-width: 50px
        width: 50px

      // In the interactive table the behaviour is like this:
      // * if there is more space available than is required to render
      //   all columns, the container width is set to 100%.
      //   Then, td.-max will take up all space available and it will cause all other
      //   elements to shrink to their minimum value. td-max will grow even beyond
      //   what is specified as max-width.
      // * if the contents requires more space than the container width permits,
      //   then the container width is set to the width calculated by summing up
      //   all the column widths. For td.-max, the max-width will be taken to be
      //   the column width because of the combination of max-width and width: 100%.
      // as a result, td.-max will aways have at least a width of max-width, but it can
      // become even wider.
      &.-max
        width: 100%
        max-width: 600px

      &.info
        a
          text-decoration: none
          color: $body-font-color

      &.buttons
        text-align: right
        white-space: nowrap

    p
      padding: 0 8px
      margin: 0

.generic-table--footer-outer
  position:     absolute
  bottom:       0
  padding:      0 6px
  line-height:  $generic-table--footer-height
  z-index:      1

.generic-table--header-outer,
.generic-table--sort-header-outer,
.generic-table--empty-header
  padding:      0 6px
  line-height:  $generic-table--header-height
  z-index:      1

  &:hover,
  &.hover
    background:   #f8f8f8

.generic-table--column-spacer
  white-space:  nowrap
  padding:      0 6px
  visibility:   hidden
  height:       0px
  line-height:  0px

.generic-table--sort-header
  white-space: nowrap
  width:   100%
  clear:   both
  display: block

  & > a,
  & > span
    display: block
    font-weight: bold
    overflow: hidden
    text-overflow: ellipsis

  & > a
    float: left
    width: calc(100% - 18px)

  & > .dropdown-indicator
    width: 1em
    text-align: right
    overflow: visible
    min-width: 1em
    visibility: hidden

  &:hover > .dropdown-indicator
    visibility: visible

.generic-table--footer-background
  position:     absolute
  bottom:       0
  width:        100%
  height:       $generic-table--footer-height
  background:   #f6f7f8
  z-index:      0

.generic-table--no-results-container
  background:   $gray-light
  border:       1px solid $gray
  border-radius: $global-radius
  padding:      14px 14px 14px 36px

  > i,
  .generic-table--no-results-title
    display:        inline-block
    font-size:      rem-calc(17)
    line-height:    1.4
    vertical-align: top

  > i
    margin:       1px 0 0 -24px
    width:        20px

.generic-table--no-results-title
  border:         0
  margin:         0
  padding:        0
  text-transform: none
  width:          99%

.generic-table--no-results-description
  font-size:      rem-calc(15)
  line-height:    1.4
  margin-top:     4px

  p:last-child
    margin-bottom: 0