Bootstrap/docs/assets/scss/docs.scss

/*!
 * Bootstrap Docs (http://getbootstrap.com)
 * Copyright 2011-2014 Twitter, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */

// Import Bootstrap variables and mixins
@import "../../../scss/variables";
@import "../../../scss/mixins";

// Import the syntax highlighting
@import "syntax";
@import "anchor";

// Local docs variables
$bd-purple:       #563d7c;
$bd-purple-light: #cdbfe3;
$bd-yellow:       #ffe484;
$bd-danger:       #d9534f;
$bd-warning:      #f0ad4e;
$bd-info:         #5bc0de;


// Dev notes
//
// Background information on nomenclature and architecture decisions here.

// - Bootstrap variables and mixins are included for easy reuse.
//   Doing so gives us access to the same core utilities provided by Bootstrap.
//   For example, consistent media queries through those mixins.
//
// - Bootstrap's docs variables are prefixed with `%bd-`.
//   These custom colors avoid collision with the components Bootstrap provides.
//
// - Classes are prefixed with `.bd-`.
//   These classes indicate custom-built or modified components for the design
//   and layout of the Bootstrap docs. They are not included in our builds.


// Contents
//
// Key sections to this file.

// Scaffolding
// Buttons
// Booticon
// Main navigation
// Footer
// Social buttons
// Homepage
// Masthead
// Page headers
// Carbon ads
// Homepage featurettes
// Featured Expo sites
// Examples
// Custom container
// Side navigation
// Docs sections
// Callouts
// Color swatches
// Team members
// Wall of Browser Bugs
// Grid examples
// Docs examples
// Code snippets
// Responsive tests
// Brand guidelines
// ZeroClipboard styles
// Miscellaneous


// Scaffolding
//
// Update the basics of our documents to prep for docs content.

body {
  position: relative; // For scrollspy?
}


// Buttons
//
// Custom buttons for the docs.

.btn-outline {
  color: $bd-purple;
  background-color: transparent;
  border-color: $bd-purple;

  &:hover,
  &:focus,
  &:active {
    color: #fff;
    background-color:$bd-purple;
    border-color: $bd-purple;
  }
}

.btn-outline-inverse {
  color: #fff;
  background-color: transparent;
  border-color: $bd-purple-light;

  &:hover,
  &:focus,
  &:active {
    color: $bd-purple;
    text-shadow: none;
    background-color: #fff;
    border-color: #fff;
  }
}


//
// Bootstrap "B" Booticon
//

.bd-booticon {
  display: block;
  width: 9rem;
  height: 9rem;
  font-size: 6.5rem;
  line-height: 9rem;
  color: #fff;
  text-align: center;
  cursor: default;
  background-color: $bd-purple;
  border-radius: 15%;

  &.inverse {
    color: $bd-purple;
    background-color: #fff;
  }
  &.outline {
    background-color: transparent;
    border: 1px solid $bd-purple-light;
  }
}


//
// Main navigation
//

.bd-nav-home {
  margin-bottom: 0;
  background-color: #563d7c;
  border-bottom: 0;

  .navbar-brand > a {
    font-weight: 500;
    color: #fff;
  }

  .nav-link {
    font-weight: 500;
    color: #cdbfe3;

    &:hover,
    &:focus {
      color: #fff;
      background-color: rgba(0,0,0,.5);
    }
  }
}

// .bd-nav-home .navbar-toggle .icon-bar {
//   background-color: #fff;
// }
// .bd-nav-home .navbar-header .navbar-toggle {
//   border-color: #322f38;
// }
// .bd-nav-home .navbar-header .navbar-toggle:hover,
// .bd-nav-home .navbar-header .navbar-toggle:focus {
//   background-color: #29262f;
//   border-color: #29262f;
// }


//
// Footer
//

.bd-footer {
  padding-top: 2rem;
  margin-top: 6rem;
  font-size: 85%;
  color: #777;
  border-top: 1px solid #e5e5e5;
}
.bd-footer-links {
  padding-left: 0;
  margin-top: 20px;
  color: #999;
}
.bd-footer-links li {
  display: inline;
  padding: 0 2px;
}
.bd-footer-links li:first-child {
  padding-left: 0;
}

@media (min-width: 768px) {
  .bd-footer p {
    margin-bottom: 0;
  }
}


//
// Social buttons
//

.bd-social {
  margin-bottom: 1.5rem;
  margin-left: -.5rem;
}
.bd-social-buttons {
  display: inline-block;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.bd-social-buttons li {
  display: inline-block;
  padding: .25rem .5rem;
  line-height: 1;
}
.bd-social-buttons .twitter-follow-button {
  width: 225px !important;
}
.bd-social-buttons .twitter-share-button {
  width: 98px !important;
}

// Style the GitHub buttons via CSS instead of inline attributes
.github-btn {
  overflow: hidden;
  border: 0;
}


//
// Homepage
//

.bd-header {
  @include clearfix;
  padding-bottom: .5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.25);

  .bd-header-mark {
    float: left;
    padding-top: .6em;
    padding-bottom: .6em;
    font-size: 1.25rem;
    font-weight: 500;
  }
}

.bd-header-nav {
  float: right;

  .nav-link {
    float: left;

    &:hover {
      background-color: transparent;
    }
  }
}


//
// Masthead (headings and download button)
//

.bd-masthead {
  position: relative;
  padding: 2rem 0;
  // color: #cdbfe3;
  // text-align: center;
  // text-shadow: 0 1px 0 rgba(0,0,0,.1);
  // background-color: #6f5499;
  // @include gradient-vertical($bd-purple, #6f5499);
  // background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
}

.bd-masthead .bd-booticon {
  margin: 0 0 2rem;
  color: $gray;
  border-color: $gray;
}
.bd-masthead h1 {
  font-weight: 300;
  line-height: 1;
  // color: #fff;
}
.bd-masthead .lead {
  margin-bottom: 2rem;
  font-size: 1.25rem;
  // color: #fff;
}
.bd-masthead .version {
  margin-top: -1rem;
  margin-bottom: 2rem;
  // color: #9783b9;
}
.bd-masthead .btn {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: $gray;
  border-color: $gray;

  &:hover {
    color: #fff;
    background-color: $gray;
  }
}

@media (min-width: 480px) {
  .bd-masthead .btn {
    width: auto;
  }
}

@media (min-width: 768px) {
  .bd-masthead {
    padding: 2rem 0 4rem;
    // padding: 5rem 0;
  }
  .bd-header {
    margin-bottom: 4rem;
  }
  .bd-masthead h1 {
    font-size: 4rem;
  }
  .bd-masthead .lead {
    font-size: 1.5rem;
  }
}

@media (min-width: 992px) {
  .bd-masthead .lead {
    width: 80%;
    font-size: 2rem;
  }
}


//
// Page headers
//

.bd-header {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  background-color: $bd-purple;

  .container {
    position: relative;
  }

  h1 {
    margin-top: 0;
    color: #fff;
  }

  p {
    margin-bottom: 0;
    font-weight: 300;
    color: rgba(255,255,255,.65);
  }

  @media (min-width: 768px) {
    text-align: left;

    h1 {
      font-size: 4rem;
      line-height: 1;
    }
  }

  @media (min-width: 992px) {
    padding-top: 4rem;
    padding-bottom: 4rem;

    h1,
    p {
      margin-right: 380px;
    }
  }
}


//
// Carbon ads
//

.carbonad {
  width: auto !important;
  height: auto !important;
  padding: 1.25rem !important;
  margin: 0 -1rem 2rem !important;
  overflow: hidden; /* clearfix */
  font-size: .8rem !important;
  line-height: 1rem !important;
  color: $gray !important;
  text-align: left;
  background: #f5f5f5 !important;
  border: 0 !important;
  // border: solid #e5e5e5 !important;
  // border-width: 1px 0 !important;
}
.carbonad-img {
  margin: 0 !important;
}
.carbonad-text,
.carbonad-tag {
  display: block !important;
  float: none !important;
  width: auto !important;
  height: auto !important;
  margin-left: 145px !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.carbonad-text {
  padding-top: 0 !important;
}
.carbonad-tag {
  color: inherit !important;
  text-align: left !important;
}
.carbonad-text a,
.carbonad-tag a {
  color: $gray !important;

  &:hover {
    color: $brand-primary !important;
  }
}
.carbonad #azcarbon > img {
  display: none; // hide what I assume are tracking images
}

// In the lighter page headers
// .bd-header .carbonad {
//   color: #777;
//   background-color: #fff !important;
//   border-color: #eee !important;
// }
// .bd-header .carbonad-text a,
// .bd-header .carbonad-tag a {
//   color: $bd-purple !important;
// }

@include media-breakpoint-up(sm) {
  .carbonad {
    width: 330px !important;
    margin: 1.5rem auto !important;
    border-width: 1px !important;
    border-radius: .25rem;
  }
  .bd-masthead .carbonad {
    margin: 3rem auto 0 !important;
  }
}

@include media-breakpoint-up(md) {
  .carbonad {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

@include media-breakpoint-up(lg) {
  .carbonad {
    float: right;
    width: 330px !important;
    padding: 1rem !important;
    margin: .5rem 0 1rem 2rem !important;
  }
  .bd-masthead {
    .carbonad {
      float: none;
      margin: 0 !important;
      // color: $bd-purple-light !important;
      // background: transparent !important;
      // border: 1px solid #866ab3 !important;
    }
    // .carbonad-text a,
    // .carbonad-tag a {
    //   color: #fff !important;
    // }
  }
}


//
// Homepage featurettes
//

.bd-featurette {
  padding-top: 3rem;
  padding-bottom: 3rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #555;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e5e5e5;
}
.bd-featurette + .bd-footer {
  margin-top: 0;
  border-top: 0;
}

.bd-featurette-title {
  margin-bottom: .5rem;
  font-size: 2rem;
  font-weight: normal;
  color: #333;
}
.half-rule {
  width: 6rem;
  margin: 2.5rem auto;
}
.bd-featurette h4 {
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-weight: normal;
  color: #333;
}
.bd-featurette-img {
  display: block;
  margin-bottom: 1.25rem;
  color: #333;
}
.bd-featurette-img:hover {
  color: $brand-primary;
  text-decoration: none;
}
.bd-featurette-img img {
  display: block;
  margin-bottom: 1rem;
}

@media (min-width: 480px) {
  .bd-featurette .img-responsive {
    margin-top: 2rem;
  }
}
@media (min-width: 768px) {
  .bd-featurette {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .bd-featurette-title {
    font-size: 2.5rem;
  }
  .bd-featurette .lead {
    max-width: 80%;
    margin-right: auto;
    margin-left: auto;
  }
  .bd-featurette .img-responsive {
    margin-top: 0;
  }
}


//
// Featured Expo sites
//

.bd-featured-sites {
  margin-right: -1px;
  margin-left: -1px;
}
.bd-featured-sites .col-xs-6 {
  padding: 1px;
}
.bd-featured-sites .img-responsive {
  margin-top: 0;
}

@media (min-width: 768px) {
  .bd-featured-sites .col-sm-3:first-child img {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem;
  }
  .bd-featured-sites .col-sm-3:last-child img {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
  }
}


//
// Examples
//

.bd-examples .img-thumbnail {
  margin-bottom: .75rem;
}
.bd-examples h4 {
  margin-bottom: .25rem;
}
.bd-examples p {
  margin-bottom: 1.25rem;
}

@media (max-width: 480px) {
  .bd-examples {
    margin-right: -.75rem;
    margin-left: -.75rem;
  }
  .bd-examples > [class^="col-"] {
    padding-right: .75rem;
    padding-left: .75rem;
  }
}


//
// Custom container
//

.bd-container {
  position: relative;
  max-width: 62rem;
  padding: 0 1rem 1rem;
  margin-right: auto;
  margin-left: auto;

  @media (min-width: 768px) {
    padding: 2rem;
  }

  @media (min-width: 992px) {
    padding: 4rem;
  }

  > table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    margin-bottom: $spacer;
    // border: 1px solid $table-border-color;

    // Cells
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          padding: $table-cell-padding;
          line-height: $line-height-base;
          vertical-align: top;
          // border-top: 1px solid $table-border-color;
          border: 1px solid $table-border-color;
        }
      }
    }

    // Prevent breaking of code (e.g., Grunt tasks list)
    td:first-child > code {
      white-space: nowrap;
    }
  }
}


//
// Side navigation
//

.bd-sidebar {
  padding: 0;
  margin-bottom: 0;
  // background-color: #322f38;

  .navbar-toggler {
    position: absolute;
    top: 1.25rem;
    right: 0;
    z-index: 5;
  }
}

.bd-sidebar .navbar-toggle .icon-bar {
  background-color: #fff;
}

.bd-sidebar .navbar-header {
  float: none;
  margin-right: -15px;
}

.bd-sidebar .navbar-collapse {
  padding: 0;
  border: 0;
}

@media (min-width: 992px) {
  .bd-docs {
    padding-left: 240px;
  }
  .bd-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; // Ensure scrolling always works in Safari
    width: 240px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid #eee;
    // @include gradient-vertical(#29262f, #322f38);
  }
}

.bd-sidebar .navbar-brand {
  display: block;
  float: none;
  height: auto;
  padding: 1.75rem 1.25rem;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  // color: #fff;
}
.bd-sidebar-brand:hover,
.bd-sidebar-brand:focus {
  // color: #fff;
  text-decoration: none;
}

.bd-search {
  position: relative;

  // .form-control {
  //   width: 12rem;
  // }

  margin-right: 1.25rem;
  margin-bottom: 1.5rem;
  margin-left: 1.25rem;

  .form-control {
    height: 2.45rem;
    padding-top: .4rem;
    padding-bottom: .4rem;
    // color: rgba(255,255,255,.5);
    // background-color: lighten(#29262f, 10%);
    // border-color: lighten(#29262f, 15%);

    // &:focus {
    //   border-color: rgba(255,255,255,.25);
    //   box-shadow: 0 0 .5rem rgba(255,255,255,.25);
    // }
  }
}

.bd-search-results {
  top: 108%;
  right: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  font-size: .9rem;
  border: 0;

  > li > a {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  > li:first-child { margin-top: .25rem; }
  > li:last-child { margin-bottom: .25rem; }

   > .no-results {
    padding: .75rem 1rem;
    color: #7a7a7a;
    text-align: center;
  }
}


.bd-sidenav {
  display: none;
}

.bd-toc-link {
  display: block;
  padding: .25rem 1.25rem;
  color: $gray;
  // font-size: 1rem;
  // color: #fff;
}
.bd-toc-link:hover,
.bd-toc-link:focus {
  // color: $bd-yellow;
  color: $brand-primary;
  text-decoration: none;
}
.active > .bd-toc-link {
  font-weight: 500;
  color: $gray-dark;
  // color: $bd-yellow;
}
.active > .bd-sidenav {
  display: block;
}

.bd-toc-item.active {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.bd-toc-item:first-child {
  margin-top: 0;
}
.bd-toc-item:last-child {
  margin-bottom: 2rem;
}

// All levels of nav
.bd-sidebar .nav > li > a {
  display: block;
  padding: .25rem 1.25rem;
  font-size: 90%;
  color: #99979c;
}
.bd-sidebar .nav > li > a:hover,
.bd-sidebar .nav > li > a:focus {
  color: $brand-primary;
  // color: $bd-yellow;
  text-decoration: none;
  background-color: transparent;
}
.bd-sidebar .nav > .active > a,
.bd-sidebar .nav > .active:hover > a,
.bd-sidebar .nav > .active:focus > a {
  font-weight: 500;
  color: $gray-dark;
  // color: $bd-yellow;
  background-color: transparent;
}

// Nav: second level (shown on .active)
.bd-sidebar .nav .nav {
  display: none; // Hide by default, but at >768px, show it
  padding-bottom: .75rem;
}
.bd-sidebar .nav .nav > li > a {
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2rem;
  font-size: 75%;
  font-weight: normal;
}
.bd-sidebar .nav .nav > .active > a,
.bd-sidebar .nav .nav > .active:hover > a,
.bd-sidebar .nav .nav > .active:focus > a {
  font-weight: 500;
}

.bd-sidebar .nav > .active > .nav {
  display: block;
}
.bd-sidebar .nav .nav > li > a {
  padding-top: .125rem;
  padding-bottom: .125rem;
  padding-left: 2rem;
  font-size: 80%;
}


//
// Docs sections
//

.bd-content {
  > h2 {
    margin-top: 3rem;
    font-weight: normal;
  }

  > h3 {
    margin-top: 1.5rem;
  }
}

.bd-title {
  @include media-breakpoint-up(sm) {
    margin-right: 23rem;
    font-size: 4rem;

    + p {
      font-size: 1.5rem;
      font-weight: 300;
      margin-right: 23rem;
    }
  }
}


//
// Callouts
//

.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #eee;
  border-left-width: .25rem;
  border-radius: .25rem;
}
.bd-callout h4 {
  margin-top: 0;
  margin-bottom: .25rem;
}
.bd-callout p:last-child {
  margin-bottom: 0;
}
.bd-callout code {
  border-radius: .25rem;
}

.bd-callout + .bd-callout {
  margin-top: -.25rem;
}

// Variations
@mixin bs-callout-variant($color) {
  border-left-color: $color;

  h4 { color: $color; }
}
.bd-callout-danger  { @include bs-callout-variant($bd-danger); }
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
.bd-callout-info    { @include bs-callout-variant($bd-info); }


//
// Color swatches
//

.color-swatches {
  margin: 0 -5px;
  overflow: hidden; // clearfix
}

.color-swatch {
  float: left;
  width: 4rem;
  height: 4rem;
  margin-right: .25rem;
  margin-left: .25rem;
  border-radius: .25rem;

  @media (min-width: 768px) {
    width: 6rem;
    height: 6rem;
  }
}

// Docs colors
.color-swatches {
  .bd-purple {
    background-color: $bd-purple;
  }
  .bd-purple-light {
    background-color: $bd-purple-light;
  }
  .bd-purple-lighter {
    background-color: #e5e1ea;
  }
  .bd-gray {
    background-color: #f9f9f9;
  }
}


//
// Team members
//

.bd-team {
  .team-member {
    line-height: 2rem;
    color: #555;
  }
  .team-member:hover {
    color: #333;
    text-decoration: none;
  }
  .github-btn {
    float: right;
    width: 180px;
    height: 1.25rem;
    margin-top: .25rem;
  }
  img {
    float: left;
    width: 2rem;
    margin-right: .5rem;
    border-radius: .25rem;
  }
}


// Wall of Browser Bugs
//
// Better display for the responsive table on the Wall of Browser Bugs.

.bd-browser-bugs {
  td p {
    margin-bottom: 0;
  }
  th:first-child {
    width: 18%;
  }
}

//
// Grid examples
//

.bd-example > .row {
  margin-bottom: 1rem;
}
.bd-example > .row > [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: -1rem;
    padding: 1.5rem;
    border-width: .2rem;
  }

  + p {
    margin-top: 2rem;
  }

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

  // Card examples should be horizontal
  > .card {
    float: left;
    max-width: 15rem;
    margin: .25rem;
  }

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

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


// Tweak content of examples for optimum awesome
.bd-example > *:last-child,
.bd-example > .table-responsive:last-child > .table {
  margin-bottom: 0 !important;
}
.bd-example > .close {
  float: none;
}

// Typography
.bd-example-type .table .type-info {
  color: #999;
  vertical-align: middle;
}
.bd-example-type .table td {
  padding: 1rem 0;
  border-color: #eee;
}
.bd-example-type .table tr:first-child td {
  border-top: 0;
}
.bd-example-type h1,
.bd-example-type h2,
.bd-example-type h3,
.bd-example-type h4,
.bd-example-type h5,
.bd-example-type h6 {
  margin: 0;
}

// Contextual background colors
.bd-example-bg-classes p {
  padding: 1rem;
}

// Images
.bd-example > img {
  + img {
    margin-left: .5rem;
  }
}
// .bd-example > .img-circle,
// .bd-example > .img-rounded,
// .bd-example > .img-thumbnail {
//   margin: .25rem;
// }

// Tables
// .bd-example > .table-responsive > .table {
//   background-color: #fff;
// }

// Buttons
.bd-example > .btn-group {
  margin-top: .25rem;
  margin-bottom: .25rem;
}
.bd-example > .btn-toolbar + .btn-toolbar {
  margin-top: .5rem;
}

// Forms
.bd-example-control-sizing select,
.bd-example-control-sizing input[type="text"] + input[type="text"] {
  margin-top: .5rem;
}
.bd-example-form .input-group {
  margin-bottom: .5rem;
}
.bd-example > textarea.form-control {
  resize: vertical;
}

// List groups
.bd-example > .list-group {
  max-width: 400px;
}

// Navbars
.bd-example .navbar:last-child {
  margin-bottom: 0;
}
.bd-navbar-top-example,
.bd-navbar-bottom-example {
  z-index: 1;
  padding: 0;
  overflow: hidden; // cut the drop shadows off
}
.bd-navbar-top-example .navbar-header,
.bd-navbar-bottom-example .navbar-header {
  margin-left: 0;
}
.bd-navbar-top-example .navbar-fixed-top,
.bd-navbar-bottom-example .navbar-fixed-bottom {
  position: relative;
  margin-right: 0;
  margin-left: 0;
}
.bd-navbar-top-example {
  padding-bottom: 45px;
}
.bd-navbar-top-example .navbar-fixed-top {
  top: -1px;
}
.bd-navbar-bottom-example {
  padding-top: 45px;
}
.bd-navbar-bottom-example .navbar-fixed-bottom {
  bottom: -1px;
}
.bd-navbar-bottom-example .navbar {
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .bd-navbar-top-example .navbar-fixed-top,
  .bd-navbar-bottom-example .navbar-fixed-bottom {
    position: absolute;
  }
}

// Pagination
.bd-example .pagination {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

// Pager
.bd-example > .pager {
  margin-top: 0;
}

// Example modals
.bd-example-modal {
  background-color: #f5f5f5;
}
.bd-example-modal .modal {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: 1;
  display: block;
}
.bd-example-modal .modal-dialog {
  left: auto;
  margin-right: auto;
  margin-left: auto;
}

// Example dropdowns
.bd-example > .dropdown > .dropdown-toggle {
  float: left;
}
.bd-example > .dropdown > .dropdown-menu {
  position: static;
  display: block;
  margin-bottom: .25rem;
  clear: left;
}

// Example tabbable tabs
.bd-example-tabs .nav-tabs {
  margin-bottom: 1rem;
}

// Tooltips
.bd-example-tooltips {
  text-align: center;
}
.bd-example-tooltips > .btn {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

// Popovers
.bd-example-popover {
  padding-bottom: 1.5rem;
  background-color: #f9f9f9;
}
.bd-example-popover .popover {
  position: relative;
  display: block;
  float: left;
  width: 260px;
  margin: 1.25rem;
}

// Tooltips
.bd-example-tooltip .tooltip {
  position: relative;
  display: inline-block;
  margin: 10px 20px;
  opacity: 1;
}

// Scrollspy demo on fixed height div
.scrollspy-example {
  position: relative;
  height: 200px;
  margin-top: .5rem;
  overflow: auto;
}

// Helpers
.bd-example > {
  .center-block:not(img) {
    max-width: 200px;
    padding: .5rem;
    background-color: #eee;
  }

  .bg-primary,
  .bg-success,
  .bg-info,
  .bg-warning,
  .bg-danger {
    padding: .5rem;
    margin-top: .5rem;
    margin-bottom: .5rem;
  }
}


//
// Code snippets
//

.highlight {
  padding: 1rem;
  margin: 1rem -1rem;
  background-color: #f7f7f9;

  @include media-breakpoint-up(sm) {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
  }
}
.highlight pre {
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
  background-color: transparent;
  border: 0;
}
.highlight pre code {
  font-size: inherit;
  color: $gray-dark; // Effectively the base text color
}


//
// Responsive tests
//

// Responsive (scrollable) doc tables
.table-responsive .highlight pre {
  white-space: normal;
}

// Utility classes table
.bd-table th small,
.responsive-utilities th small {
  display: block;
  font-weight: normal;
  color: #999;
}
.responsive-utilities tbody th {
  font-weight: normal;
}
.responsive-utilities td {
  text-align: center;
}
.responsive-utilities td.is-visible {
  color: #468847;
  background-color: #dff0d8 !important;
}
.responsive-utilities td.is-hidden {
  color: #ccc;
  background-color: #f9f9f9 !important;
}

// Responsive tests
.responsive-utilities-test {
  margin-top: .25rem;
}
.responsive-utilities-test .col-xs-6 {
  margin-bottom: .5rem;
}
.responsive-utilities-test span {
  display: block;
  padding: 1rem .5rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  border-radius: .25rem;
}
.visible-on,
.hidden-on {
  .col-xs-6 {
    > .not-visible {
      color: #999;
      border: 1px solid #ddd;
    }
  }
}
.visible-on,
.hidden-on {
  .col-xs-6 {
    .visible {
      color: #468847;
      background-color: #dff0d8;
      border: 1px solid #d6e9c6;
    }
  }
}

@include media-breakpoint-only(xs) {
  .hidden-xs-only {
    display: none !important;
  }
}
@include media-breakpoint-only(sm) {
  .hidden-sm-only {
    display: none !important;
  }
}
@include media-breakpoint-only(md) {
  .hidden-md-only {
    display: none !important;
  }
}
@include media-breakpoint-only(lg) {
  .hidden-lg-only {
    display: none !important;
  }
}
@include media-breakpoint-only(xl) {
  .hidden-xl-only {
    display: none !important;
  }
}


//
// Brand guidelines
//

// Logo series wrapper
.bd-brand-logos {
  display: table;
  width: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
  color: #563d7c;
  background-color: #f9f9f9;
  border-radius: .25rem;
}

// Individual items
.bd-brand-item {
  padding: 4rem 0;
  text-align: center;
}
.bd-brand-item + .bd-brand-item {
  border-top: 1px solid #fff;
}
.bd-brand-logos .inverse {
  color: #fff;
  background-color: #563d7c;
}

// Heading content within
.bd-brand-item h1,
.bd-brand-item h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.bd-brand-item .bd-booticon {
  margin-right: auto;
  margin-left: auto;
}

// Make the icons stand out on what is/isn't okay
// .bd-brand-item .glyphicon {
//   width: 30px;
//   height: 30px;
//   margin: 10px auto -10px;
//   line-height: 30px;
//   color: #fff;
//   border-radius: 50%;
// }
// .bd-brand-item .glyphicon-ok {
//   background-color: #5cb85c;
// }
// .bd-brand-item .glyphicon-remove {
//   background-color: #d9534f;
// }

@media (min-width: 768px) {
  .bd-brand-item {
    display: table-cell;
    width: 1%;
  }
  .bd-brand-item + .bd-brand-item {
    border-top: 0;
    border-left: 1px solid #fff;
  }
  .bd-brand-item h1 {
    font-size: 4rem;
  }
}


//
// ZeroClipboard styles
//

.zero-clipboard {
  position: relative;
  display: none;
  float: right;
}
.btn-clipboard {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: block;
  padding: .25rem .5rem;
  font-size: 75%;
  color: #818a91;
  cursor: pointer;
  background-color: #eceeef;
  border-radius: 0 .2rem 0 .2rem;
}
.btn-clipboard-hover {
  color: #fff;
  background-color: #027de7;
}

@media (min-width: 768px) {
  .zero-clipboard {
    display: block;
  }
}


//
// Miscellaneous
//

// Pseudo :focus state for showing how it looks in the docs
#focusedInput {
  border-color: $input-border-focus;
  outline: 0;
  outline: thin dotted \9; // IE9
  box-shadow: 0 0 .5rem $input-box-shadow-focus;
}