NebulaPanel - Control Interface

✏️ Editing: responsive-767px-max.less

//
// Responsive: Landscape phone to desktop/tablet
// --------------------------------------------------

@media (max-width: 767px) {

// Padding to set content in a bit
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  // Negative indent the now static "fixed" navbar
  .navbar-fixed-top,
  .navbar-fixed-bottom,
  .navbar-static-top {
    margin-left: -20px;
    margin-right: -20px;
  }
  // Remove padding on container given explicit padding set on body
  .container-fluid {
    padding: 0;
  }

// TYPOGRAPHY
  // ----------
  // Reset horizontal dl
  .dl-horizontal {
    dt {
      float: none;
      clear: none;
      width: auto;
      text-align: left;
    }
    dd {
      margin-left: 0;
    }
  }

// GRID & CONTAINERS
  // -----------------
  // Remove width from containers
  .container {
    width: auto;
  }
  // Fluid rows
  .row-fluid {
    width: 100%;
  }
  // Undo negative margin on rows and thumbnails
  .row,
  .thumbnails {
    margin-left: 0;
  }
  .thumbnails > li {
    float: none;
    margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
  }
  // Make all grid-sized elements block level again
  [class*="span"],
  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
  .row-fluid [class*="span"] {
    float: none;
    display: block;
    width: 100%;
    margin-left: 0;
    .box-sizing(border-box);
  }
  .span12,
  .row-fluid .span12 {
    width: 100%;
    .box-sizing(border-box);
  }
  .row-fluid [class*="offset"]:first-child {
    margin-left: 0;
  }

// FORM FIELDS
  // -----------
  // Make span* classes full width
  .input-large,
  .input-xlarge,
  .input-xxlarge,
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input {
    .input-block-level();
  }
  // But don't let it screw up prepend/append inputs
  .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block; // redeclare so they don't wrap to new lines
    width: auto;
  }
  .controls-row [class*="span"] + [class*="span"] {
    margin-left: 0;
  }

// Modals
  .modal {
    position: fixed;
    top:   20px;
    left:  20px;
    right: 20px;
    width: auto;
    margin: 0;
    &.fade  { top: -100px; }
    &.fade.in { top: 20px; }
  }

}

// UP TO LANDSCAPE PHONE
// ---------------------

@media (max-width: 480px) {

// Smooth out the collapsing/expanding nav
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0); // activate the GPU
  }

// Block level the page header small tag for readability
  .page-header h1 small {
    display: block;
    line-height: @baseLineHeight;
  }

// Update checkboxes for iOS
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc;
  }

// Remove the horizontal form styles
  .form-horizontal {
    .control-label {
      float: none;
      width: auto;
      padding-top: 0;
      text-align: left;
    }
    // Move over all input controls and content
    .controls {
      margin-left: 0;
    }
    // Move the options list down to align with labels
    .control-list {
      padding-top: 0; // has to be padding because margin collaspes
    }
    // Move over buttons in .form-actions to align with .controls
    .form-actions {
      padding-left: 10px;
      padding-right: 10px;
    }
  }

// Medias
  // Reset float and spacing to stack
  .media .pull-left,
  .media .pull-right  {
    float: none;
    display: block;
    margin-bottom: 10px;
  }
  // Remove side margins since we stack instead of indent
  .media-object {
    margin-right: 0;
    margin-left: 0;
  }

// Modals
  .modal {
    top:   10px;
    left:  10px;
    right: 10px;
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px;
  }

// Carousel
  .carousel-caption {
    position: static;
  }

}

✏️ Editing: responsive-767px-max.less

🚀 NebulaPanel