/*doc
---
title: Jumbotron
name: jumbotron
category: Components
---
The jumbotron is used for specific forms. Add .jumbotron-fixed for fixed width (640px).

```html_example
<div class="jumbotron">
  <div class="jumbotron-description">
    <h1>Register a new account</h1>
    <p>You have to register to publish your stories for the world to see. Please take a moment to enter these details.</p>
  </div>
  <form accept-charset="UTF-8" action="/" method="post" role="form">
    <div class="row">
      <div class="col-sm-12 ">
        <div class="form-group email optional mndx_user_email">
          <label class="email optional control-label" for="mndx_user_email">Email</label>
          <input class="string email optional form-control" type="email" name="mndx_user[email]" id="mndx_user_email" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <div class="form-group password optional">
          <label class="password optional control-label" for="mndx_user_password">New password</label>
          <input class="password optional form-control" type="password" name="mndx_user[password]" id="mndx_user_password" />
        </div>
      </div>
      <div class="col-sm-6">
        <div class="form-group password optional">
          <label class="password optional control-label" for="mndx_user_password_confirmation">Confirm new password</label>
          <input class="password optional form-control" type="password" name="mndx_user[password_confirmation]" id="mndx_user_password_confirmation" />
        </div>
      </div>
    </div>
    <input type="submit" name="commit" value="Register" class="btn btn-primary pull-right" />
    <div class="form-group form-links">
      <a class="pull-right" href="#">Sign in</a>
    </div>
  </form>
</div>
```
*/

$jumbotron-padding-x2: $jumbotron-padding * 2;

.jumbotron {
  background-color: $white;
  border: 1px solid $gray-lighten;
  border-radius: $border-radius-base;
  margin: 0 auto;
  max-width: 640px;
  padding: $jumbotron-padding;
  text-align: center;

  &.jumbotron-fixed {
    width: 640px;
  }

  @media screen and (min-width: $screen-sm-min) {
    margin: 0 auto;
    padding: $jumbotron-padding-x2;
  }

  .jumbotron-description {
    margin-bottom: $space-large;

    @media screen and (min-width: $screen-sm-min) {
      margin-bottom: $jumbotron-padding;
    }

    h1 {
      color: $black;
      font-size: $font-size-larger;
      font-weight: 600;
      margin-bottom: $jumbotron-padding;
      margin-top: 0;

      @media screen and (min-width: $screen-sm-min) {
        margin-bottom: $space-large;
      }
    }

    p {
      color: $gray;
      font-size: $font-size-large;
      font-weight: normal;
    }
  }

  .jumbotron-link {
    margin-right: $space-large;

    &:last-child {
      margin-right: 0;
    }
  }

  form {
    margin-top: 0;

    .form-group {
      text-align: left;
    }
  }
}

.jumbotron-transparent {
  background: transparent;
  border: 0;
  box-shadow: none;

  .jumbotron-description {

    h1,
    p {
      color: $white;
    }
  }

  .control-label {
    color: $white;
  }

  .form-control {
    background: $white;
  }

  .form-links {

    a {
      color: $white;
    }
  }
}