openproject/app/assets/stylesheets/content/_forms.sass

//-- 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
        @extend %input--sizing

        &.-highlight
          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--field-instructions
      max-width: 100%

    .form--field-instructions
      margin: 0 0 1rem 0

    .errorSpan
      flex-basis: 50%
      margin-right: 0.5rem

.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

  &.-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

  &.-auto
    select
      width: auto

.form--text-field
  @extend %input-style

.form--text-field,
#{$text-input-selectors},
select
  line-height: 100%
  margin-bottom: 0rem

  &:hover, &:focus, &:active
    border-color: #999

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
    .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
  padding-left: 0 !important

  &: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
    line-height: 2

  > .form-label
    line-height: 2rem

    > a
      display: block
      min-width: 1.5rem
      text-align: center
      vertical-align: middle

      .icon
        display: inline-block
        line-height: normal
        vertical-align: middle

        &::before
          padding: 0

.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

// Text in textareas should look the same as in paragraphs
// Foundation applies following rule to paragraphs
textarea
  text-rendering: optimizeLegibility