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/layout/_work_package.sass

320 lines
7.5 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.
//++
.controller-work_packages.action-index,
.controller-work_packages.action-show,
.controller-work_packages.full-create
@extend %absolute-layout-mode
.in_modal &
#main
top: 12px
#content
// HACK: workaround to 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%
& > div[ui-view]
height: 100%
//This can be deleted once the legcy WP view is gone
#history
border-bottom-color: rgb(221, 221, 221)
border-bottom-style: solid
border-bottom-width: 1px
tr.work-package
&.idnt-1 td.subject
padding-left: 0.5em
&.idnt-2 td.subject
padding-left: 2em
&.idnt-3 td.subject
padding-left: 3.5em
&.idnt-4 td.subject
padding-left: 5em
&.idnt-5 td.subject
padding-left: 6.5em
&.idnt-6 td.subject
padding-left: 8em
&.idnt-7 td.subject
padding-left: 9.5em
&.idnt-8 td.subject
padding-left: 11em
&.idnt-9 td.subject
padding-left: 12.5em
// HACK: workaround to ensure correct height applied to child elements
#work-packages-index
height: 100%
.work-packages--page-container
+display(flex)
+flex-direction(column)
height: 100%
> .toolbar-container
// not flex-item
> .work-packages--filters-optional-container
// not flex-item
height: auto
> .work-packages--split-view
min-height: 100px
.work-packages--filters-optional-container
flex-shrink: 0
.work-packages--split-view
+display(flex)
width: 100%
height: 100%
.work-packages--list
+flex(2)
overflow-x: auto
.work-packages--list-table-area
height: calc(100% - 55px)
table
tr
&.work-package
white-space: nowrap
&.sum
font-weight: bold
td.subject
white-space: normal
text-align: left
td.done_ratio table.progress
margin-left: auto
margin-right: auto
&.idnt td.subject.icon-context
display: inherit
&.issue td.category
white-space: normal
.work-packages--list-pagination-area
width: 100%
height: 55px
padding: 3px 10px 0 0
border-top: 1px solid #eee
.work-package--details-container
position: relative
padding: 0
// This rule is necessary to show the border only
// when its needed. Otherwise the border would be visible
// in the list view too.
.action-details .work-package--details-container,
.action-create .work-package--details-container,
border-left: 4px solid #eee
border-top: 4px solid #eee
.work-packages--details
@media only screen and (max-width: 1280px)
// display: none
width: 480px
@at-root
.detailsViewMenuItem
display: none
@media only screen and (min-width: 1281px)
width: 480px
@media only screen and (min-width: 1440px)
width: 580px
.work-packages--details-content
position: absolute
top: 45px
bottom: 55px
width: 100%
+allow-vertical-scrolling
padding: 0 20px 0 20px
&.-create-mode
top: 0
h2
margin-top: 0.375em
.work-packages--create--title
margin-bottom: 1em
.work-packages--details-toolbar
position: absolute
bottom: 0
height: 55px
width: 100%
background: #F8F8F8
border: 1px solid #eeeeee
padding: 0 1rem .5rem
.button
margin: .5rem .5rem 0 0
.work-packages--split-view
.work-packages--details
.work-packages--attachments
margin-bottom: 25px
.work-package--new-state
margin-bottom: 55px
.work-packages--attachments
margin-bottom: 25px
.work-packages--edit-actions
@extend .work-packages--details-toolbar
-webkit-transform: translate3d(0,0,0)
.work-packages--left-panel &
position: absolute
width: calc(60% + 7px)
left: -20px
padding: 0 20px .5rem
.in_modal &
width: 100%
.edit-all-mode .work-packages--left-panel
padding-bottom: 50px
.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--drop-box
border: 2px dashed $light-gray
border-radius: 2px
text-align: center
padding: 20px
.work-package--attachments--label
color: $light-gray
text-align: center
i, p
display: inline-block
vertical-align: middle
.icon-attachment:before
color: $light-gray
font-size: 3rem
p
color: $gray-dark
font-size: 0.9rem
font-weight: bold
line-height: 1.4
margin: 0 0 0 10px
text-align: left
.work-package--attachments--hint
font-size: 85%
.controller-work_packages
#work-packages-query-selection
.select2-container
margin-left: 5px
.icon-button, .sort-header, .action-icon
cursor: pointer
select, input
&.to-validate.ng-dirty.ng-valid
border: 1px solid Green
&.to-validate.ng-dirty.ng-valid ~ span.ok
color: green
display: inline
&.to-validate.ng-dirty.ng-invalid
border: 1px solid Red
&.to-validate.ng-dirty.ng-invalid ~ span.ok
color: red
display: inline
.work_package
tr
line-height: $user-avatar-mini-width
.avatar-mini
float: left
#attributes
.form--field-container
max-width: 400px
%flex-grow-shrink-zero
flex-grow: 0
flex-shrink: 0
//an workaround for ie10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
//IE10+ specific styles go here
.work-package--attachments--filename
width: rem-calc(354)
display: inline-block
// Implement two column layout for WP full screen view
@media screen and (min-width: 90rem)
.action-show .attributes-group,
.full-create .attributes-group
.-columns-2
column-count: 2
column-gap: 4rem
.attributes-key-value
-webkit-column-break-inside: avoid
page-break-inside: avoid
break-inside: avoid