docs.scss

.bs-example-type h2,
.bs-example-type h3,
.bs-example-type h4,
.bs-example-type h5,
.bs-example-type h6 {
  margin: 0;
}

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

// Images
.bs-example > .img-circle,
.bs-example > .img-rounded,
.bs-example > .img-thumbnail {
  margin: .25rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

// Tooltips
.bs-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;
}


//
// Code snippets
//

.highlight {
  padding: 1.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  background-color: #f7f7f9;
}
.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
.bs-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 {
    .hidden-xs,
    .hidden-sm,
    .hidden-md,
    .hidden-lg {
      color: #999;
      border: 1px solid #ddd;
    }
  }
}
.visible-on,
.hidden-on {
  .col-xs-6 {
    .visible-xs-block,
    .visible-sm-block,
    .visible-md-block,
    .visible-lg-block {
      color: #468847;
      background-color: #dff0d8;
      border: 1px solid #d6e9c6;
    }
  }
}

//
// Brand guidelines
//

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

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

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

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

@media (min-width: 768px) {
  .bs-brand-item {
    display: table-cell;
    width: 1%;
  }
  .bs-brand-item + .bs-brand-item {
    border-top: 0;
    border-left: 1px solid #fff;
  }
  .bs-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;
}