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

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2015 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-2013 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

$work-packages-table--header-height: 40px
$work-packages-table--footer-height: 34px

.work-packages-table--container
  position:     relative
  height:       100%
  padding-top:    $work-packages-table--header-height
  overflow:
    x: auto
    y: hidden

  &.-with-footer
    padding-bottom: $work-packages-table--footer-height

.work-packages-table--results-container
  height:       100%
  overflow:
    x: hidden
    y: auto

#work-packages-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.workpackages-table
  border-collapse: collapse
  width:  100%
  margin: 0

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

  thead
    tr
      &:hover
        background: none
    th
      text-transform: uppercase
      text-align: left
      line-height: 34px
      padding: 0

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

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

  tbody
    tr
      border-bottom: 1px solid #dddddd
      &:hover
        background: #e4f7fb

    td
      min-width: 150px
      max-width: 300px
      overflow:  hidden
      text-overflow: ellipsis
      text-align: left
      line-height: 34px

      &.icon-table
        //
      &.checkbox
        min-width: 0
        width: 20px
      &.id
        min-width: 0
        width: 50px
      &.info
        min-width: 0
        width: 20px
        a
          text-decoration: none
          color: $body-font-color

    p
      padding: 0 8px
      margin: 0

  .work-packages-table--footer-outer
    position:     absolute
    bottom:       0
    line-height:  $work-packages-table--footer-height
    z-index:      1

  .work-packages-table--header-outer,
  .sort-header-outer
    position:     absolute
    top:          0
    padding:      0 8px
    line-height:  $work-packages-table--header-height
    overflow:     hidden
    z-index:      1

    &:hover,
    &.hover
      background:   #f8f8f8

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

    & > a,
    & > span
      display: table-cell
      font-weight: bold

    & > .dropdown-indicator
      width: 1em
      text-align: right

.work-packages-table--header-background
  position:     absolute
  top:          0
  width:        100%
  height:       $work-packages-table--header-height
  background:   white
  border-bottom: 1px solid #dddddd
  box-shadow:   0 5px 15px -5px #dddddd
  z-index:      0

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

.work-packages-table--no-results-container
  position:     absolute
  top:          $work-packages-table--header-height
  left:         0
  right:        10px
  background:   #fff
  border:       1px solid #ddd
  border-radius: $button-border-radius
  padding:      20px

.work-packages-table--no-results-title
  // properties to reset h2
  border:         0
  font-weight:    normal
  text-transform: none
  color:          black

.work-packages-table--no-results-description
  color:          black