openproject/app/assets/stylesheets/layout/work_packages/_table.sass

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2018 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 docs/COPYRIGHT.rdoc for more details.
//++

.router--work-packages-list-view,
.router--work-packages-full-view,
.router--work-packages-full-create
  .in_modal &
    #main
      top: 12px

.router--work-packages-list-view:not(.router--work-packages-full-create),
.router--work-packages-full-view:not(.router--work-packages-full-create)
  #content-wrapper
    padding: 0 0 0 20px

// Ensure correct height applied to child elements.
// The dom looks like this:
// flash (generated from rails - if it was generated when rendering the page)
// div[ui-view] (main content we want to adjust the height for)
// div style="clear:both;" (is pushed to overflow - of no relevance)
//
// This makes use of more specific rules overwriting less specific ones.
// Per default, the height is always 100
.openproject-base--ui-view,
.work-packages-page--ui-view
  height: 100%

.work-packages-list-view--container
  // Flexbox for the toolbar, filters and work package split view
  display: flex
  flex-direction: column
  height: 100%

  > .toolbar-container
    margin-top: 1rem
    // not flex-item
    padding-right: 15px

  input[type="text"].toolbar--editable-toolbar
    font-size: 24px

  .work-packages--filters-optional-container
    // not flex-item
    height: auto
    overflow: auto
    flex-shrink: 0

// Outer Flex container for (table+timeline)|details
.work-packages-split-view
  flex: 1 1 auto
  display: flex
  // Required for correctly scrolling the inner containers
  overflow: hidden

  .row-hovered
    background: #E5F2FA
    z-index: 1


// Left part of the split view
// == flex container for (table|timeline)
.work-packages-split-view--tabletimeline-side
  flex: 2
  display: flex
  flex-direction: column
  // Required for any absolute positioned elements within the viewport
  // (e.g., timeline controls)
  position: relative
  // Required for correctly scrolling the inner containers
  overflow: hidden

// Content of the left side
// == flex container for (table+timeline)
.work-packages-split-view--tabletimeline-content
  flex: 1
  display: flex
  overflow: hidden

// Footer of the left side
.work-packages-split-view--tabletimeline-footer
  flex: 0 0 55px

  // Only add padding to lower/right corner
  // to override default margins
  .pagination
    margin: 0
    padding: 15px 10px 5px 0

  .pagination--pages,
  .pagination--options
    margin: 0

// TABLE half of the tabletimeline flexbox
.work-packages-tabletimeline--table-side
  // Same flex as timeline
  flex: 1 1
  // Show scrollbars for inner content
  overflow: auto
  @include styled-scroll-bar
  // relative for loading indicator
  position: relative
  // Hint browser that this will inner-scroll
  will-change: transform
  // Hinter browser that the content of the flex is contained except for size
  contain: layout style paint

  &.-timeline-visible
    // Show the horizontal scrollbar _always_ (same as timeline)
    overflow-x: scroll
    // Hide the vertical scrollbar
    overflow-y: hidden

// TIMELINE half of the tabletimeline flexbox
.work-packages-tabletimeline--timeline-side
  @include varprop(border-left, timeline--separator)
  flex-basis: 50%
  // Show the horizontal scrollbar _always_ (same as table)
  overflow-x: scroll
  // Show the vertical scrollbar when necessary
  overflow-y: auto
  @include styled-scroll-bar
  // Hidden by default
  display: none
  // Hint browser that this will inner-scroll
  will-change: transform
  // Hinter browser that the content of the flex is contained except for size
  contain: layout style paint

.work-package--attachments--files
  margin-bottom: 1rem

  > h4
    margin-top: 5px

  .inplace-edit--read-value
    padding: 0.375rem 0.6rem

    i
      display: inline-block
      &:before
        vertical-align: middle
        padding-top: 0

  .work-package--attachments--filename
    display: inline-block
    line-height: 1.4
    // FF & IE
    word-break: break-all
    // Chrome & Safari
    word-break: break-word
    width: 90%
    vertical-align: middle

    .work-package--attachments--info
      display: inline-block
      margin-left: 5px
      font-size: 12px
      @include varprop(color, body-font-color)
      font-style: italic
      &:hover
        text-decoration: none

.router--work-packages-base
  #content
    height: 100%

  .icon-button, .sort-header, .action-icon
    cursor: pointer

  #attributes
    .form--field-container
      max-width: 400px