locomotivecms/engine

View on GitHub
app/assets/stylesheets/locomotive/new/_forms.scss

Summary

Maintainability
Test Coverage
// =============================================================================
// Forms
// =============================================================================

@import "bootstrap/forms";

// Hack to hide simple form legend tag, should be removed in simple form
// instead of here.

legend {
  display: none;
}

label {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  color: $gray;
  text-transform: uppercase;
  vertical-align: middle;
}

.form-control {
  box-shadow: none;
  &:hover {
    border-color: $gray-light;
  }
  &:focus,
  &:active {
    outline: none;
    box-shadow: none;
  }
}

// Hack to reduce margin on buttons.

.form-control-button {
  margin-top: 10px !important;
}

// Link next to a button in forms.

.form-link {
  display: inline-block;
  margin-top: 17px;
  margin-right: 20px;
  color: $gray;
  vertical-align: middle;
  &:hover {
    color: $gray-dark;
    text-decoration: none;
  }
  &:focus,
  &:active {
    color: $gray-darker;
    text-decoration: none;
  }
}

// Inline validations
// =============================================================================

.help-inline,
.help-inline a {
  display: inline-block;
  margin-bottom: 8px;
  margin-left: 15px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .1em;
  color: $gray-light;
  text-transform: uppercase;
  vertical-align: middle;
  a {
    margin: 0;
    color: $gray-light;
    transition: color $base-transition-speed linear;
    &:hover {
      color: $brand-primary;
      text-decoration: none;
    }
  }
}

.error-inline {
  color: rgba($brand-danger, .7);
}