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/_forms.sass

543 lines
12 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
%label-style
text-align: left
font-weight: normal
vertical-align: middle
text-overflow: ellipsis
overflow: hidden
white-space: nowrap
// 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
.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
// cancel out foundations overflow-y: auto
overflow: visible
// 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
&:after
@include icon-common
float: right
padding:
right: 5px
top: 4px
.form--fieldset.-collapsible > &
content: "\e0d4"
.form--fieldset.-collapsible.-collapsed > &,
.form--fieldset.-collapsible.collapsed > &
content: "\e0d2"
.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)
align-items: center
margin-bottom: 0.825rem
// cancel out foundations overflow-y: auto
overflow: visible
10 years ago
&.-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
.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
.form--label
@include grid-content(2)
@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)
10 years ago
.form--field.-vertical &,
.form.-vertical &
@include grid-size(shrink)
max-width: none
.form--field.-required > &
&::after
@include default-transition
content: '*'
color: #008BD0
padding: 0 0.325rem
&:hover::after
color: smartscale(#008BD0, 30%)
.form--field-container
@include grid-content(10)
padding: 0
display: flex
// cancel out foundations overflow-y: auto
overflow-y: visible
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)
10 years ago
.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
.form--field-extra-actions
@extend %form--field-after-container
overflow-y: visible
%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}
line-height: 1.5
.form--select
@extend %input-style
line-height: 1.5
&[multiple]
background-image: none
padding-right: $form-padding
.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: 0.5rem
.form--text-area
@extend %input-style
.form &
margin-bottom: 0.5rem
.form--radio-button-container
//prevent radio-buttons from being cut at the border
padding: 0 1px
.form--radio-button
// Be on par with Foundation's margin-bottom on labels.
.form &
margin-bottom: 0.5rem
.form--grouping
@include grid-block($wrap: true)
align-items: center
.form--grouping-row
@include grid-block(10)
.form--grouping-row + .form--grouping-row
@include grid-offset(2)
.form--grouping-label
@include grid-content(2)
@extend %label-style
padding: 0 1rem 0 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
> .form-label.-transparent
margin-bottom: 0
font-size: 1em
background: none
border: none
.form--label-with-check-box
display: block
clear: both
& > .form--check-box-container
display: block
float: left
.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: 0.5rem
align-items: center
%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