OpenProject is the leading open source project management software.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
openproject/app/assets/stylesheets/content/_table.sass

282 lines
6.4 KiB

//-- 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
$generic-table--font-size: 0.875rem
$generic-table--header-font-size: 0.875rem
$generic-table--header-height: 40px
$generic-table--footer-height: 34px
$input-elements: input, 'input.form--text-field', select, 'select.form--select', '.form--field-affix', 'a.button'
.generic-table--container
position: relative
height: 100%
padding-top: $generic-table--header-height
overflow:
x: auto
y: hidden
&.-with-footer
padding-bottom: $generic-table--footer-height
.generic-table--results-container
height: 100%
overflow:
x: hidden
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
tr
&:hover
background: none
th
font-size: $generic-table--header-font-size
text-transform: uppercase
text-align: left
line-height: 34px
padding: 0
&.active-column
background: #f8f8f8
a
text-decoration: none
color: $body-font-color
&:hover, &:active
text-decoration: none
color: $body-font-color
&.-short
.generic-table--header-outer,
.generic-table--sort-header-outer
min-width: 0
.sort
&.asc:after
@include icon-common
content: "\e0dd"
margin-left: 5px
font-size: 1.2em
vertical-align: text-bottom
&.desc:after
@include icon-common
content: "\e0de"
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
border-bottom: 1px solid $light-gray
&:hover
background: #e4f7fb
td
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
&.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
position: absolute
top: 0
padding: 0 6px
line-height: $generic-table--header-height
z-index: 1
min-width: 150px
&:hover,
&.hover
background: #f8f8f8
.generic-table--column-spacer
padding: 0 6px
visibility: hidden
height: 0px
font-size: 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
.generic-table--cell-controls
white-space: nowrap
.generic-table--header-background
position: absolute
top: 0
width: 100%
height: $generic-table--header-height
background: $body-background
border-bottom: 1px solid $light-gray
box-shadow: 0 5px 15px -5px $light-gray
z-index: 0
.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