Contents

// *************************************
//
//   Form
//   -> User input environment
//
// *************************************

// -------------------------------------
//   Base
// -------------------------------------

.form { margin-bottom: 2em; }

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Group ----- //

.form-group { margin: 0 0 1em; }

// ----- Input ----- //

.form-input {
  @include appearance(none);
  @include transition(border-color .2s $ease-in-out-quint);
  background: #fff;
  border: 1px solid $alto;
  border-radius: em(4px);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  padding: .5em;
  width: 100%;

  @include placeholder {
    color: darken($alto, 10%);
    font-size: 90%;
  }

  &:focus {
    border-color: $matisse;
    outline: none;
  }
}

// ----- Label ----- //

.form-label {
  display: block;
  font-weight: bold;
  margin-bottom: em(8px);
  max-width: 100%;
}

// ----- Select ----- //

.form-select { min-width: em(200px); }

// ----- File ----- //

.form-file {
  display: block;
  font-size: 90%;
  max-width: 100%;
}

// ----- Boolean ----- //

.form-boolean {
  display: block;
  margin-bottom: em(5px);
  position: relative;

  input {
    @include vertical-align;
    margin-left: -20px;
    position: absolute;
  }

  label {
    cursor: pointer;
    padding-left: 20px;
  }

  // Boolean inputs on same line

  &.inline {
    display: inline-block;
    padding-right: 20px;
  }
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
psique-1.0.1	app/assets/stylesheets/psique/components/_form.scss
psique-1.0.0	app/assets/stylesheets/psique/components/_form.scss