_component-examples.scss

//
// Grid examples
//

.bd-example-row {
  .row {
    margin-bottom: 1rem;

    > [class^="col-"] {
      padding-top: .75rem;
      padding-bottom: .75rem;
      background-color: rgba(86,61,124,.15);
      border: 1px solid rgba(86,61,124,.2);
    }
  }
}


//
// Docs examples
//

.bd-example {
  position: relative;
  padding: 1rem;
  margin: 1rem -1rem;
  border: solid #f7f7f9;
  border-width: .2rem 0 0;
  @include clearfix();

  @include media-breakpoint-up(sm) {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 1.5rem;
    border-width: .2rem;
  }

  + .highlight,  
  + .zero-clipboard + .highlight {
    margin-top: 0;
  }

  + p {
    margin-top: 2rem;
  }

  // Undo width of container
  .container {
    width: auto;
  }

  // Card examples should be horizontal
  > .card {
    max-width: 20rem;
  }

  > .nav + .nav,
  > .alert + .alert,
  > .navbar + .navbar,
  > .progress + .progress,
  > .progress + .btn {
    margin-top: 1rem;
  }

  > .dropdown-menu:first-child {
    position: static;
    display: block;
  }
}