path: root/debian/missing-sources/wyrm/sass/wyrm_core/_form.sass

// Form structure
//
// Files located in `wyrm_core/_form.sass`.
//
// Forms follow the following basic struture. `.wy-control-group`
// wraps the label and a `.wy-control`, which itself warps your actual
// form elements. You can decide either to stack or align your forms.
// A help message can be provided in a couple different styles, but
// the most common is `.wy-form-message` as shown below.
//
// Markup:
// <form class="{$modifiers}">
//   <legend>A simple form</legend>
//   <fieldset>
//     <div class="wy-control-group">
//       <label>Field name</label>
//       <div class="wy-control">
//         <input type="text" placeholder="placeholder"/>
//       </div>
//       <span class="wy-form-message">Help text goes here!</span>
//     </div>
//     <input type="submit" class="btn" />
//   </fieldset>
// </form>
//
// Styleguide 6


.wy-form-stacked
  select
    display: block
.wy-form-aligned
  input, textarea, select, .wy-help-inline, label
    display: inline-block
    *display: inline
    *zoom: 1
    vertical-align: middle

.wy-form-aligned
  .wy-control-group
    > label
      display: inline-block
      vertical-align: middle
      width: 10em
      margin: $base-line-height / 4 $base-line-height / 2 0 0
      float: left
  .wy-control
    float: left
    label
      display: block
    select
      margin-top: $base-line-height / 4

fieldset
  border: 0
  margin: 0
  padding: 0
legend
  display: block
  width: 100%
  border: 0
  padding: 0
  white-space: normal
  margin-bottom: $base-line-height
  font-size: 150%
  *margin-left: -7px
label
  display: block
  margin: 0 0 em(5px) 0
  color: $gray-dark
  font-size: 90%

input, select, textarea
  font-size: 100%
  margin: 0
  vertical-align: baseline
  *vertical-align: middle


.wy-control-group
  margin-bottom: $base-line-height
  +outer-container
  +clearfix

.wy-control-group.wy-control-group-required > label:after
  content: " *"
  color: $red

// For doing multi part, aligned form blocks within a single label

.wy-control-group
  .wy-form-full, .wy-form-halves, .wy-form-thirds
    padding-bottom: $base-line-height / 2
    select
      width: 100%
    input
      &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
        width: 100%
.wy-control-group .wy-form-full
  +span-columns(12)
  +omega-type

.wy-control-group .wy-form-halves
  +span-columns(6)
  +omega-type(2n)

.wy-control-group .wy-form-thirds
  +span-columns(4)
  +omega-type(3n)

// Sometimes you just output text in a form, not an actual input
.wy-control-group.wy-control-group-no-input .wy-control
  margin: $base-line-height / 4 0 0 0
  font-size: 90%

.wy-control-no-input
  display: inline-block
  margin: $base-line-height / 4 0 0 0
  font-size: 90%


// Fluid inputs when needed

.wy-control-group.fluid-input
  input
    &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
      width: 100%

// Inline help for forms

.wy-form-message-inline
  display: inline-block
  padding-left: 0.3em
  color: #666
  vertical-align: middle
  font-size: 90%

.wy-form-message
  display: block
  color: $gray-light
  font-size: 70%
  margin-top: em(5px)
  font-style: italic
  p
    font-size: inherit
    font-style: italic
    margin-bottom: $base-line-height / 4
  p:last-child
    margin-bottom: 0

// Generic form elements
//
// Here's the output of common form inputs. The sass itself covers more types
// like email, password, url, date...etc, but I've left them out for brevity.
//
// Markup:
// <div class="wy-control-group">
//   <label>Text field</label>
//   <div class="wy-control">
//     <input type="text" placeholder="placeholder"/>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Textarea</label>
//   <div class="wy-control">
//     <textarea></textarea>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Dropdown</label>
//   <div class="wy-control">
//     <select>
//       <option></option>
//       <option>Option 1</option>
//       <option>Option 2</option>
//     </select>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Radio</label>
//   <div class="wy-control">
//     <label class="wy-radio">
//       <input type="radio">
//       Option 1
//     </label>
//     <label class="wy-radio">
//       <input type="radio">
//       Option 2
//     </label>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Checkbox</label>
//   <div class="wy-control">
//     <label class="wy-checkbox">
//       <input type="checkbox">
//       Option 1
//     </label>
//     <label class="wy-checkbox">
//       <input type="checkbox">
//       Option 2
//     </label>
//   </div>
// </div>
//
// Styleguide 6.1


input
  line-height: normal

input
  &[type="button"], &[type="reset"], &[type="submit"]
    -webkit-appearance: button
    cursor: pointer
    font-family: $base-font-family
    *overflow: visible
  &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
    -webkit-appearance: none
    padding: $base-line-height / 4
    display: inline-block
    border: 1px solid $input-border-color
    font-size: 80%
    font-family: $base-font-family
    box-shadow: inset 0 1px 3px $input-shadow-color
    border-radius: 0
    +transition(border .3s linear)
    +font-smooth
  &[type="datetime-local"]
    padding: em(5.5px) em(10px)
  &[disabled]
    cursor: default
  &[type="checkbox"], &[type="radio"]
    +box-sizing(border-box)
    padding: 0
    margin-right: em(5px)
    *height: 13px
    *width: 13px
  &[type="search"]
    +box-sizing(border-box)
    &::-webkit-search-cancel-button, &::-webkit-search-decoration
      -webkit-appearance: none
  &[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus, &[type="url"]:focus, &[type="date"]:focus, &[type="month"]:focus, &[type="time"]:focus, &[type="datetime"]:focus, &[type="datetime-local"]:focus, &[type="week"]:focus, &[type="number"]:focus, &[type="search"]:focus, &[type="tel"]:focus, &[type="color"]:focus
    outline: 0
    outline: thin dotted \9
    border-color: $input-focus-color
  &.no-focus:focus
    border-color: $input-border-color !important
  &[type="file"]:focus, &[type="radio"]:focus, &[type="checkbox"]:focus
    outline: thin dotted $gray-dark
    outline: 1px auto #129FEA
  &[type="text"][disabled], &[type="password"][disabled], &[type="email"][disabled], &[type="url"][disabled], &[type="date"][disabled], &[type="month"][disabled], &[type="time"][disabled], &[type="datetime"][disabled], &[type="datetime-local"][disabled], &[type="week"][disabled], &[type="number"][disabled], &[type="search"][disabled], &[type="tel"][disabled], &[type="color"][disabled]
    cursor: not-allowed
    background-color: darken($input-background-color, 2%)

input:focus:invalid, textarea:focus:invalid, select:focus:invalid
  color: $red
  border: 1px solid $red
input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus
  border-color: $red
input
  &[type="file"]:focus:invalid:focus, &[type="radio"]:focus:invalid:focus, &[type="checkbox"]:focus:invalid:focus
    outline-color: $red

input.wy-input-large
  padding: $base-line-height / 2
  font-size: 100%


// Textareas and selects

textarea
  overflow: auto
  vertical-align: top
  width: 100%
  font-family: $base-font-family
select, textarea
  padding: em(8px) em(10px)
  display: inline-block
  border: 1px solid $input-border-color
  font-size: 80%
  box-shadow: inset 0 1px 3px $input-shadow-color
  +transition(border .3s linear)
  +font-smooth
select
  border: 1px solid $input-border-color
  background-color: $input-background-color
  &[multiple]
    height: auto
select:focus, textarea:focus
  outline: 0
select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly]
  cursor: not-allowed
  background-color: darken($input-background-color, 2%)

// Checkboxes and radios

input
  &[type="radio"][disabled], &[type="checkbox"][disabled]
    cursor: not-allowed
.wy-checkbox, .wy-radio
  margin: $base-line-height / 4 0
  // Important because we don't want it overwritten in the case of errors
  color: $text-color
  display: block
  input
    vertical-align: baseline

// Messages and input context

.wy-form-message-inline
  display: inline-block
  *display: inline
  *zoom: 1
  vertical-align: middle

// Prefix and suffix for inputs
//
// Wyrm allows some basic prefix and suffic styling for text inputs.
//
// Markup:
// <div class="wy-control-group">
//   <label>Prefix</label>
//   <div class="wy-control wy-input-prefix">
//     <span class="wy-input-context">@</span><input type="text" placeholder="placeholder"/>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Suffix</label>
//   <div class="wy-control wy-input-suffix">
//     <input type="text" placeholder="placeholder"/><span class="wy-input-context">@gmail.com</span>
//   </div>
// </div>
//
// Styleguide 6.2


.wy-input-prefix, .wy-input-suffix
  white-space: nowrap
  padding: $base-line-height / 4
  .wy-input-context
    line-height: 27px // Hack for the moment.
    padding: 0 8px
    display: inline-block
    font-size: 80%
    background-color: $table-stripe-color
    border: solid 1px $input-border-color
    color: $gray-light

.wy-input-suffix .wy-input-context
  border-left: 0
.wy-input-prefix .wy-input-context
  border-right: 0

// Switches
//
// True / false, boolean style switches.
//
// Markup:
// <div class="wy-switch {$modifiers}"><span>Here is some really long text.</span></div>
//
// .active          - active state.
// .disabled          - disabled.
//
// Styleguide 6.3

.wy-switch
  position: relative
  display: block
  height: $base-line-height
  margin-top: $base-line-height / 2
  cursor: pointer
  &:before
    position: absolute
    content: ""
    display: block
    left: 0
    top: 0
    width: $base-line-height * 1.5
    height: $base-line-height / 2
    border-radius: 4px
    background: $gray-lighter
    +transition(all .2s ease-in-out)
  &:after
    position: absolute
    content: ""
    display: block
    width: 18px
    height: 18px
    border-radius: 4px
    background: $gray-light
    left: -3px
    top: -3px
    +transition(all .2s ease-in-out)
  span
    position: absolute
    left: $base-line-height * 2
    display: block
    font-size: 12px
    color: $gray-lighter
    line-height: 1
.wy-switch.active
  &:before
    background: darken($green, 10%)
  &:after
    left: $base-line-height
    background: $green

.wy-switch.disabled
  cursor: not-allowed
  opacity: .8


// Error handling and inline validation
//
// Wyrm has both block and inline level validation depending upon your needs. You can also
// pair these with the global alerts mentioned in the alerts section of this styleguide.
//
// Markup:
// <div class="wy-control-group wy-control-group-error">
//   <label>After the fact error</label>
//   <div class="wy-control">
//     <input type="text" placeholder="placeholder"/>
//     <span class="wy-form-message">Error text goes here.</span>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Inline success</label>
//   <div class="wy-control wy-inline-validate wy-inline-validate-info">
//     <input type="text" placeholder="placeholder"/>
//     <span class="wy-input-context"> You may want to do this.</span>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Inline success</label>
//   <div class="wy-control wy-inline-validate wy-inline-validate-success">
//     <input type="text" placeholder="placeholder"/>
//     <span class="wy-input-context"> Woot, way to go.</span>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Inline error</label>
//   <div class="wy-control wy-inline-validate wy-inline-validate-warning">
//     <input type="text" placeholder="placeholder"/>
//     <span class="wy-input-context"> Hold on cowboy.</span>
//   </div>
// </div>
// <div class="wy-control-group">
//   <label>Inline error</label>
//   <div class="wy-control wy-inline-validate wy-inline-validate-danger">
//     <input type="text" placeholder="placeholder"/>
//     <span class="wy-input-context"> Damnit, you messed up.</span>
//   </div>
// </div>
//
// Styleguide 6.4

.wy-control-group.wy-control-group-error
  .wy-form-message, > label
    color: $red
  input
    &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
      border: solid 1px $red
  textarea
    border: solid 1px $red

.wy-inline-validate
  white-space: nowrap
  .wy-input-context
    padding: em(8px) em(10px)
    display: inline-block
    font-size: 80%
.wy-inline-validate.wy-inline-validate-success .wy-input-context
  color: $green
  @extend %icon
  @extend .#{$icon-prefix}-#{$icon-ok}
.wy-inline-validate.wy-inline-validate-danger .wy-input-context
  color: $red
  @extend %icon
  @extend .#{$icon-prefix}-#{$icon-remove}
.wy-inline-validate.wy-inline-validate-warning .wy-input-context
  color: $orange
  @extend %icon
  @extend .#{$icon-prefix}-#{$icon-alert}
.wy-inline-validate.wy-inline-validate-info .wy-input-context
  color: $blue
  @extend %icon
  @extend .#{$icon-prefix}-#{$icon-alert}

// Some generic rotation classes for reading user images

.rotate-90
  @include transform(rotate(90deg))
.rotate-180
  @include transform(rotate(180deg))
.rotate-270
  @include transform(rotate(270deg))
.mirror
  @include transform(scaleX(-1))
  &.rotate-90
    @include transform(scaleX(-1) rotate(90deg))
  &.rotate-180
    @include transform(scaleX(-1) rotate(180deg))
  &.rotate-270
    @include transform(scaleX(-1) rotate(270deg))

@media only screen and (max-width: 480px)
  .wy-form
    button[type="submit"]
      margin: 0.7em 0 0
    input
      &[type="text"], &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
        margin-bottom: 0.3em
        display: block
    label
      margin-bottom: 0.3em
      display: block
  .wy-form input
    &[type="password"], &[type="email"], &[type="url"], &[type="date"], &[type="month"], &[type="time"], &[type="datetime"], &[type="datetime-local"], &[type="week"], &[type="number"], &[type="search"], &[type="tel"], &[type="color"]
      margin-bottom: 0
  .wy-form-aligned
    .wy-control-group label
      margin-bottom: 0.3em
      text-align: left
      display: block
      width: 100%
    .wy-control
      margin: 1.5em 0 0 0
  .wy-form .wy-help-inline, .wy-form-message-inline, .wy-form-message
    display: block
    font-size: 80%
    padding: $base-line-height / 4 0