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

/*-- copyright
 * OpenProject is a project management system.
 * Copyright (C) 2012-2014 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.  ++*/

@import global/all
@import fonts/openproject_icon_font

@mixin input-style
  width: $content_from_input_width
  line-height: 30px
  border: $content_form_input_border
  padding: 0 0 0 10px
  @include border-radius(2px)
  font-family: $font_family_normal
  font-weight: bold
  font-size: $global_font_size
  line-height: 30px
  height: 32px
  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
  padding: 7px 10px 7px 10px
  option
    padding-left: 10px

@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: 14px
    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-family: $font_family_normal
    font-weight: bold
    font-size: $global_font_size
    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: $font_family_normal
  font-size: $global_font_size - 1px

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

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

.checkbox-label
  position: relative
  display: inline-block
  vertical-align: top
  line-height: 18px
  user-select: none

.styled-checkbox
  display: inline-block
  vertical-align: top
  width: 18px
  height: 18px
  padding: 0 5px
    user-select: none
  &:before
    content: ''
    position: absolute
    box-sizing: border-box
    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
    transform: rotate(-50deg)

\:checked + .styled-checkbox:after
  opacity: 1

\:focus + .styled-checkbox:before