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, range-field, search, file)

@mixin input-style
  border: $content-form-input-border
  border-radius: 2px
  font-weight: bold
  font-size: 1rem
  &:hover, &:focus
    border: $content-form-input-hover-border

  vertical-align: middle

@mixin select-style
  @include input-style

@mixin label-style
  text-align: left
  font-weight: normal
  vertical-align: middle

// 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

fieldset
  legend:after
    @include icon-common
    float: right
    padding:
      right: 5px
      top: 4px
  &.collapsible
    > legend:after
      content: "\e0d4"
    &.collapsed
      > legend:after
        content: "\e0d2"
  &.with-legend-control
    legend
      float: left
      background-color: white
      margin-top: -15px

  div.legend-control
    margin-top: -15px
    padding-bottom: 5px

    span
      padding-left: 5px
      background-color: white

.ui-widget
  font-family: $body-font-family
  font-size: 0.9rem

// 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
    /* Lenght of check foot
    height: 3px
    background: transparent
    border: 3px solid #666666
    border-top: none
    border-right: none
    @include transform(rotate(-50deg))

.form--field-row
  @include grid-block($wrap: true)

.form--field
  @include grid-block($wrap: true)
  align-items: center
  margin-bottom: 1rem

  &.-vertical,
  .form.-vertical &
    @include grid-orient(vertical)

.form--label
  @include grid-content(2)
  @include label-style
  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(12)

  .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)
  display: flex

  &.-vertical
    display: block

  &:nth-of-type(n+2),
  .form--field.-no-label &
    @include grid-offset(2)

  .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(12)

%form--field-after-container
  @include grid-content(10, 2)
  font-size:    $form-label-fontsize
  line-height:  $base-line-height
  color:        $form-label-color

  .form.-wide-labels &,
  .form--field.-wide-label &
    @include grid-size(8)
    @include grid-offset(4)

  .form.-vertical &
    @include grid-size(12)
    @include grid-offset(0)

.form--field-instructions
  @extend %form--field-after-container
  font-style: italic

.form--field-extra-actions
  @extend %form--field-after-container

%form--field-element-container
  display: block
  padding-right: $block-padding
  flex: 1 1

@each $field-type in $form--field-types
  .form--#{$field-type}-container
    @extend %form--field-element-container

.form--text-field
  @include input-style

.form--select
  @include select-style
  // TODO: remove padding property once upstream PR merged:
  // https://github.com/zurb/foundation-apps/pull/416
  padding-right: $form-padding + rem-calc(18px)

  &[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
  font-weight: bold
  font-size: 1rem
  border: $content-form-input-border

  &:hover, &:focus
    border: $content-form-input-hover-border

  .form &
    margin-bottom: 0.5rem

.form--table
  border: 0 none
  background: none
  margin: 0
  td
    padding: 6px
    //label
      @include label-style
      display: inline
    //&.label
      vertical-align: middle
      width: 160px

.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