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

@mixin input-style
  width: $content-from-input-width
  border: $content-form-input-border
  padding: 0 0 0 10px
  border-radius: 2px
  font-weight: bold
  font-size: 1rem
  line-height: 30px
  margin: 0
  &:hover, &:focus
    border: $content-form-input-hover-border

  float: none
  display: inline-block
  vertical-align: middle

@mixin select-style
  @include input-style
  margin: 0
  min-width: $content-from-input-width + 10
  max-width: $content-from-input-width + 10

@mixin label-style
  width: 155px
  margin-left: 0
  text-align: left
  font-weight: normal
  float: none
  display: inline-block
  padding-right: 5px
  vertical-align: middle

%form-style
  padding: 30px 20px
  background-color: $content-form-bg-color
  display: block
  border: $content-form-border

  div.attribute_wrapper
    position: relative
    padding: 0
    margin-bottom: 10px
    font-size: 1.1rem
    line-height: 30px
    label
      @include label-style

    .short
      width: 100px
      margin-right: 200px

    &.indented
      margin-left: 160px

  select
    @include select-style

  input
    &[type=password], &[type=text]
      @include input-style
    &#work_package_subject, &#work_package_time_entry_comments
      width: 50%
  textarea
    font-weight: bold
    font-size: 1rem
    border: $content-form-input-border
    &:hover, &:focus
      border: $content-form-input-hover-border

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

// 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
  @extend %form-style

hr.form_separator
  border: 0
  border-bottom: 1px solid $content-form-separator-color
  margin: 0 0 30px
  background: none

.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

#content
  .tabular
    label.inline-label
      width: auto
      margin-left: 0
      font-weight: normal

.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--select
  // 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%

.inline-label
  > .form-label.-transparent
    margin-bottom: 0
    font-size: 1em
    background: none
    border: none