kanbanworkflowstimelinescrumrubyroadmapproject-planningproject-managementopenprojectangularissue-trackerifcgantt-chartganttbug-trackerboardsbcf
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.
646 lines
14 KiB
646 lines
14 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.
|
|
//++
|
|
|
|
$form--field-types: (text-field, text-area, select, check-box, radio-button, range-field, search, file)
|
|
|
|
%input-style
|
|
border: $content-form-input-border
|
|
border-radius: 2px
|
|
font-size: 1rem
|
|
&:hover, &:focus
|
|
border: $content-form-input-hover-border
|
|
|
|
vertical-align: middle
|
|
margin-bottom: 0rem
|
|
|
|
%label-style
|
|
text-align: left
|
|
font-weight: normal
|
|
vertical-align: middle
|
|
|
|
%input--sizing
|
|
height: 40px
|
|
line-height: 22px
|
|
|
|
// A general CSS class to be applied to forms using the above defined form style.
|
|
// We can't define this on form itself as this would break a lot of existing forms.
|
|
//
|
|
// Using this form class allows to easily override defaults defined here with a more
|
|
// specific definition.
|
|
.form
|
|
display: block
|
|
|
|
&.-inline
|
|
display: inline
|
|
|
|
&.-bordered
|
|
padding: 30px 20px
|
|
background-color: $content-form-bg-color
|
|
border: $content-form-border
|
|
|
|
&.-compressed
|
|
padding: 10px 20px 0 20px
|
|
|
|
&.danger-zone
|
|
border: 1px solid $content-form-danger-zone-bg-color
|
|
|
|
.form--section
|
|
padding-top: 0px
|
|
margin-bottom: 0px
|
|
|
|
& > *
|
|
padding-left: 1rem
|
|
|
|
.form--section-title
|
|
background-color: $content-form-danger-zone-bg-color
|
|
color: $content-form-danger-zone-font-color !important
|
|
padding: 1rem !important
|
|
margin: 0 0 1rem 0
|
|
|
|
input[type=text]
|
|
margin-bottom: 0
|
|
|
|
em
|
|
font-style: italic
|
|
|
|
p.danger-zone--warning
|
|
font-weight: bold
|
|
color: $content-form-danger-zone-bg-color
|
|
|
|
span.icon,
|
|
span.icon-context
|
|
display: inline-block
|
|
vertical-align: middle
|
|
// This is an approximation necessary for vertical alignment (especially FF under Windows)
|
|
// This should be removable once the icon font is updated
|
|
// see: https://community.openproject.org/work_packages/21589/activity
|
|
margin-bottom: 0.0625em
|
|
&:before
|
|
padding-left: 0px
|
|
color: $content-form-danger-zone-bg-color
|
|
|
|
.danger-zone--verification
|
|
display: flex
|
|
|
|
input
|
|
@extend %input--sizing
|
|
flex-basis: 50%
|
|
margin: 0 0.5rem 0 0
|
|
|
|
.button.-highlight
|
|
@extend %input--sizing
|
|
background: $content-form-danger-zone-bg-color
|
|
color: $content-form-danger-zone-font-color
|
|
border-color: $content-form-danger-zone-bg-color
|
|
&.icon:before,
|
|
&.icon-context:before
|
|
color: $content-form-danger-zone-font-color
|
|
padding-left: 0px
|
|
|
|
.form--separator
|
|
border: 0
|
|
border-bottom: 1px solid $content-form-separator-color
|
|
margin: 0 0 30px
|
|
background: none
|
|
|
|
&.-invisible
|
|
border-bottom-width: 0px
|
|
|
|
.form--space
|
|
padding-top: 10px
|
|
|
|
.form--row
|
|
@include grid-block
|
|
@include grid-visible-overflow
|
|
|
|
// TODO: Customise with proper jQuery UI theme.
|
|
.ui-datepicker-month,
|
|
.ui-datepicker-year
|
|
display: inline-block
|
|
|
|
.checkbox-label
|
|
position: relative
|
|
display: inline-block
|
|
vertical-align: top
|
|
line-height: 18px
|
|
user-select: none
|
|
|
|
input[type=checkbox]
|
|
border: 0
|
|
clip: rect(0 0 0 0)
|
|
height: 18px
|
|
margin: 0 -18px -18px 0
|
|
overflow: hidden
|
|
padding: 0
|
|
position: absolute
|
|
width: 18px
|
|
opacity: 0.001
|
|
|
|
\:checked + .styled-checkbox:after
|
|
opacity: 1
|
|
|
|
\:focus + .styled-checkbox:before
|
|
|
|
.styled-checkbox
|
|
box-sizing: content-box
|
|
display: inline-block
|
|
vertical-align: top
|
|
width: 18px
|
|
height: 18px
|
|
padding: 0 5px
|
|
user-select: none
|
|
|
|
&:before
|
|
content: ''
|
|
position: absolute
|
|
width: 18px
|
|
height: 18px
|
|
background: #ffffff
|
|
border: 1px solid #cacaca
|
|
border-radius: 2px
|
|
cursor: pointer
|
|
box-shadow: inset 0 1px #fff
|
|
&:after
|
|
opacity: 0
|
|
content: ''
|
|
position: absolute
|
|
margin: 5px 2px
|
|
// Length of check tail
|
|
width: 11px
|
|
// Length of check foot
|
|
height: 3px
|
|
background: transparent
|
|
border: 3px solid #666666
|
|
border-top: none
|
|
border-right: none
|
|
@include transform(rotate(-50deg))
|
|
|
|
|
|
%form--fieldset-or-section
|
|
padding: 1rem 0 0
|
|
margin-bottom: 1rem
|
|
border: 0
|
|
|
|
%form--fieldset-legend-or-section-title
|
|
color: lighten($body-font-color, 10)
|
|
font-size: 1rem
|
|
font-weight: bold
|
|
line-height: 1.8
|
|
text-transform: uppercase
|
|
border-bottom: 1px solid $gray
|
|
|
|
// HACK. TODO: Remove fieldset element rules in various places.
|
|
.form--fieldset,
|
|
fieldset.form--fieldset
|
|
@extend %form--fieldset-or-section
|
|
|
|
.form--fieldset-legend
|
|
@extend %form--fieldset-legend-or-section-title
|
|
width: 100%
|
|
|
|
.form--fieldset.-collapsible > &
|
|
@include without-link-styling
|
|
cursor: pointer
|
|
|
|
&:before
|
|
@include icon-common
|
|
font-size: 0.75rem
|
|
padding: 0.625rem 0.25rem 0 0.25rem
|
|
|
|
.form--fieldset.-collapsible > &
|
|
content: "\e0cc"
|
|
|
|
.form--fieldset.-collapsible.-collapsed > &,
|
|
.form--fieldset.-collapsible.collapsed > &
|
|
content: "\e0cb"
|
|
|
|
.form--fieldset-control
|
|
float: right
|
|
margin-top: -2.8rem
|
|
text-align: right
|
|
color: lighten($body-font-color, 10)
|
|
font-size: 1rem
|
|
font-style: italic
|
|
line-height: 1.8
|
|
|
|
.form--fieldset-control-container
|
|
padding: 0 0.25rem
|
|
background-color: inherit
|
|
|
|
.form--section
|
|
@extend %form--fieldset-or-section
|
|
|
|
// HACK. TODO: Remove H3 element rules in various places.
|
|
// See: https://community.openproject.org/work_packages/18330
|
|
.form--section-title,
|
|
#content h3.form--section-title
|
|
@extend %form--fieldset-legend-or-section-title
|
|
// properties to reset h3
|
|
margin: 0
|
|
padding: 0
|
|
|
|
.form--section > &,
|
|
#content .form--section > &
|
|
margin-bottom: 1rem
|
|
|
|
.form--field
|
|
@include grid-block($wrap: true)
|
|
@include grid-visible-overflow
|
|
align-items: center
|
|
margin-bottom: 0.825rem
|
|
height: 100%
|
|
|
|
&.-vertical,
|
|
.form.-vertical &
|
|
@include grid-orient(vertical)
|
|
|
|
.grid-block > &:nth-last-of-type(n+2),
|
|
.form--row > &:nth-last-of-type(n+2),
|
|
.form--grouping-row > &:nth-last-of-type(n+2)
|
|
padding-right: 1rem
|
|
|
|
&.-trailing-label
|
|
.form--label
|
|
@include grid-order(2)
|
|
@include grid-size(expand)
|
|
// override max-width set by including grid-content
|
|
max-width: 100%
|
|
padding-left: 0.5rem
|
|
margin-bottom: 0
|
|
|
|
.form--field-container
|
|
@include grid-order(1)
|
|
@include grid-size(shrink)
|
|
|
|
// FIXME: this will break anything in regards to flex layouting within the container,
|
|
// e.g. using form--field-inline-action inside -trailing-label
|
|
.form--label + span.form--field-container
|
|
display: block
|
|
|
|
&.-break-words > .form--label
|
|
text-overflow: ellipsis
|
|
overflow: hidden
|
|
|
|
&.-required
|
|
input.form--text-field:invalid
|
|
// avoids the box-shadow from Firefox at required input fields
|
|
box-shadow: none
|
|
|
|
.form--label
|
|
@include grid-content(2)
|
|
@include grid-visible-overflow
|
|
@extend %label-style
|
|
padding: 0 1rem 0 0
|
|
font-size: $form-label-fontsize
|
|
line-height: $base-line-height
|
|
color: $form-label-color
|
|
|
|
.form.-wide-labels &,
|
|
.form--field.-wide-label &,
|
|
@include grid-size(4)
|
|
|
|
.form--field.-vertical &,
|
|
.form.-vertical &
|
|
@include grid-size(shrink)
|
|
max-width: none
|
|
|
|
&.-required,
|
|
.form--field.-required > &
|
|
&::after
|
|
@include default-transition
|
|
content: '*'
|
|
color: $primary-color-dark
|
|
padding: 0 0.325rem
|
|
&:hover::after
|
|
color: $primary-color
|
|
|
|
.form--field-container
|
|
@include grid-content(10)
|
|
@include grid-visible-overflow
|
|
padding: 0
|
|
display: flex
|
|
align-items: stretch
|
|
|
|
&.-vertical
|
|
display: block
|
|
|
|
&:nth-of-type(n+2),
|
|
.form--field.-no-label &
|
|
@include grid-offset(2)
|
|
|
|
.form--field.-full-width &
|
|
@include grid-size(12)
|
|
|
|
.form.-wide-labels &,
|
|
.form--field.-wide-label &
|
|
@include grid-size(8)
|
|
|
|
.form.-wide-labels .form--field.-no-label &,
|
|
.form--field.-wide-label.-no-label &
|
|
@include grid-offset(4)
|
|
|
|
.form--field.-vertical &,
|
|
.form.-vertical &
|
|
@include grid-size(shrink)
|
|
max-width: none
|
|
|
|
.form--field-inline-action
|
|
@include grid-content(shrink)
|
|
padding: 0 0 0 0.2rem
|
|
line-height: 2rem
|
|
|
|
%form--field-after-container
|
|
@include grid-content(10, 2)
|
|
padding: 0
|
|
font-size: $form-label-fontsize
|
|
line-height: 1.4
|
|
color: $form-label-color
|
|
|
|
.form--field.-full-width &
|
|
@include grid-size(12)
|
|
@include grid-offset(0)
|
|
|
|
.form.-wide-labels &,
|
|
.form--field.-wide-label &
|
|
@include grid-size(8)
|
|
@include grid-offset(4)
|
|
|
|
.form.-vertical &
|
|
@include grid-size(shrink)
|
|
@include grid-offset(0)
|
|
max-width: none
|
|
|
|
.form--field-instructions
|
|
@extend %form--field-after-container
|
|
font-style: italic
|
|
|
|
&.-no-italic
|
|
font-style: normal
|
|
|
|
.form--field-extra-actions
|
|
@extend %form--field-after-container
|
|
@include grid-visible-overflow
|
|
|
|
%form--field-element-container
|
|
display: block
|
|
flex: 1 1
|
|
|
|
&:nth-last-of-type(n+2)
|
|
padding-right: $block-padding
|
|
|
|
@each $field-type in $form--field-types
|
|
.form--#{$field-type}-container
|
|
@extend %form--field-element-container
|
|
|
|
&.-tiny
|
|
max-width: 50px
|
|
|
|
&.-xslim
|
|
max-width: 110px
|
|
|
|
&.-slim
|
|
max-width: 200px
|
|
|
|
&.-middle
|
|
max-width: 350px
|
|
|
|
&.-wide
|
|
max-width: 500px
|
|
|
|
&.-xwide
|
|
max-width: 800px
|
|
|
|
&.-xxwide
|
|
max-width: 1100px
|
|
|
|
.form--select-container
|
|
&.-tiny,
|
|
&.-xslim,
|
|
&.-slim,
|
|
&.-middle,
|
|
&.-wide,
|
|
&.-xwide,
|
|
&.-xxwide
|
|
// overriding hack on select2 by another hack (select2_customizing.css)
|
|
// remove once the initial limit on the width is removed
|
|
.select2-container
|
|
max-width: initial
|
|
|
|
.form--text-field
|
|
@extend %input-style
|
|
|
|
.form--text-field,
|
|
#{$text-input-selectors},
|
|
select
|
|
line-height: 100%
|
|
margin-bottom: 0rem
|
|
|
|
input[readonly].-clickable
|
|
cursor: pointer
|
|
background: white
|
|
|
|
.form--select
|
|
@extend %input-style
|
|
line-height: normal
|
|
padding: rem-concat-list($select-element-padding)
|
|
// TODO: Temporary fix, for sure it will be fixed with next foundation-app release v1.1.1
|
|
// remove background image after/if upgrade
|
|
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20width%3D%2232%22%20height%3D%2224%22%20viewBox%3D%220%200%2032%2024%22%3E%3Cpolygon%20points%3D%220%2C0%2032%2C0%2016%2C24%22%20style%3D%22fill%3A%20black%22%3E%3C/polygon%3E%3C/svg%3E")
|
|
|
|
&[multiple]
|
|
background-image: none
|
|
padding-right: $form-padding
|
|
// TODO: this has to be fixed upstream as select are fixed
|
|
// in height in foundation for apps.
|
|
height: auto
|
|
|
|
.form--select2
|
|
border: none
|
|
padding-right: 0
|
|
|
|
&.select2-container
|
|
// styles adapted to input fields to align them
|
|
margin-bottom: 0.5rem
|
|
.select2-choice
|
|
height: 2.15rem
|
|
|
|
.form--text-field,
|
|
.form--select
|
|
&.-tiny
|
|
font-size: 0.7rem
|
|
|
|
&.-small
|
|
font-size: 0.8rem
|
|
|
|
&.-large
|
|
font-size: 1.3rem
|
|
|
|
&.-narrow
|
|
width: auto
|
|
max-width: 100%
|
|
|
|
.form &
|
|
margin-bottom: 0rem
|
|
|
|
.form--text-area
|
|
@extend %input-style
|
|
|
|
.form &
|
|
margin-bottom: 0rem
|
|
|
|
.form--radio-button-container
|
|
//prevent radio-buttons from being cut at the border
|
|
padding: 0 1px
|
|
|
|
.form--grouping
|
|
@include grid-block($wrap: true)
|
|
align-items: center
|
|
|
|
.form--grouping-row
|
|
@include grid-block(10)
|
|
align-items: center
|
|
|
|
.select2-container
|
|
margin-bottom: 0
|
|
|
|
.form--grouping-row + .form--grouping-row
|
|
@include grid-offset(2)
|
|
|
|
.form--grouping-label
|
|
@include grid-content(2)
|
|
@include grid-visible-overflow
|
|
@extend %label-style
|
|
padding: 0 1rem 0.5rem 0
|
|
font-size: $form-label-fontsize
|
|
line-height: $base-line-height
|
|
color: $form-label-color
|
|
margin-bottom: 0.8rem
|
|
|
|
.form--matrix
|
|
border: $content-form-input-border
|
|
border-radius: 2px
|
|
background: none
|
|
margin: 0
|
|
font-size: 0.9rem
|
|
line-height: 1.5
|
|
|
|
.form--matrix-header-row
|
|
font-weight: bold
|
|
border-bottom: $content-form-input-border
|
|
background-color: $gray-light
|
|
|
|
.form--matrix-header-cell
|
|
padding: 0 1rem
|
|
|
|
.form--matrix-row
|
|
|
|
&:nth-child(odd)
|
|
background-color: $gray-light
|
|
&:nth-child(even)
|
|
background-color: white
|
|
|
|
.form--matrix-checkbox-cell
|
|
min-width: 1rem
|
|
max-width: 4rem
|
|
text-align: center
|
|
|
|
.form--column
|
|
@include grid-block
|
|
@include grid-orient(vertical)
|
|
overflow-y: hidden
|
|
|
|
&:nth-last-of-type(n+2)
|
|
padding-right: $block-padding
|
|
|
|
.form--field
|
|
flex-basis: auto
|
|
|
|
.inline-label
|
|
margin: 0rem
|
|
> .form-label.-transparent
|
|
margin-bottom: 0
|
|
font-size: 1em
|
|
background: none
|
|
border: none
|
|
|
|
.form--label-with-check-box
|
|
display: block
|
|
clear: both
|
|
line-height: $base-line-height
|
|
|
|
& > .form--check-box-container
|
|
display: block
|
|
float: left
|
|
padding: 0.125rem 0.5rem 0 0
|
|
|
|
.form--field-affix
|
|
flex: 0 0 auto
|
|
display: flex
|
|
font-size: 0.9rem
|
|
background: $inlinelabel-background
|
|
color: $inlinelabel-color
|
|
border: $content-form-input-border
|
|
// OR $inlinelabel-border
|
|
border-radius: 2px
|
|
padding: 0 $form-padding
|
|
margin-bottom: 0rem
|
|
align-items: center
|
|
line-height: 1
|
|
|
|
&.icon, &.icon-context
|
|
padding: 5px
|
|
&:before
|
|
padding: 0
|
|
|
|
%form--field-element-container + &
|
|
margin-left: -1rem
|
|
border-left: 0
|
|
|
|
&.-transparent
|
|
background: none
|
|
border: none
|
|
|
|
.form--tooltip-container
|
|
flex: 0 0 auto
|
|
display: flex
|
|
& > [data-tooltip], & > [class^="tooltip--"]
|
|
padding-top: 0.6rem
|
|
|
|
.form--list
|
|
display: flex
|
|
margin: 0
|
|
@include grid-layout(3)
|
|
|
|
@include breakpoint(large)
|
|
@include grid-layout(4)
|
|
|
|
@include breakpoint(xlarge)
|
|
@include grid-layout(6)
|
|
|
|
li, div
|
|
padding: 0
|
|
|