[Summary view] [Print] [Text view]

   1  //
   2  // Responsive: Landscape phone to desktop/tablet
   3  // --------------------------------------------------
   4  
   5  
   6  @media (max-width: 767px) {
   7  
   8    // Padding to set content in a bit
   9    body {
  10      padding-left: 20px;
  11      padding-right: 20px;
  12    }
  13    // Negative indent the now static "fixed" navbar
  14    .navbar-fixed-top,
  15    .navbar-fixed-bottom,
  16    .navbar-static-top {
  17      margin-left: -20px;
  18      margin-right: -20px;
  19    }
  20    // Remove padding on container given explicit padding set on body
  21    .container-fluid {
  22      padding: 0;
  23    }
  24  
  25    // TYPOGRAPHY
  26    // ----------
  27    // Reset horizontal dl
  28    .dl-horizontal {
  29      dt {
  30        float: none;
  31        clear: none;
  32        width: auto;
  33        text-align: left;
  34      }
  35      dd {
  36        margin-left: 0;
  37      }
  38    }
  39  
  40    // GRID & CONTAINERS
  41    // -----------------
  42    // Remove width from containers
  43    .container {
  44      width: auto;
  45    }
  46    // Fluid rows
  47    .row-fluid {
  48      width: 100%;
  49    }
  50    // Undo negative margin on rows and thumbnails
  51    .row,
  52    .thumbnails {
  53      margin-left: 0;
  54    }
  55    .thumbnails > li {
  56      float: none;
  57      margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
  58    }
  59    // Make all grid-sized elements block level again
  60    [class*="span"],
  61    .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
  62    .row-fluid [class*="span"] {
  63      float: none;
  64      display: block;
  65      width: 100%;
  66      margin-left: 0;
  67      .box-sizing(border-box);
  68    }
  69    .span12,
  70    .row-fluid .span12 {
  71      width: 100%;
  72      .box-sizing(border-box);
  73    }
  74    .row-fluid [class*="offset"]:first-child {
  75      margin-left: 0;
  76    }
  77  
  78    // FORM FIELDS
  79    // -----------
  80    // Make span* classes full width
  81    .input-large,
  82    .input-xlarge,
  83    .input-xxlarge,
  84    input[class*="span"],
  85    select[class*="span"],
  86    textarea[class*="span"],
  87    .uneditable-input {
  88      .input-block-level();
  89    }
  90    // But don't let it screw up prepend/append inputs
  91    .input-prepend input,
  92    .input-append input,
  93    .input-prepend input[class*="span"],
  94    .input-append input[class*="span"] {
  95      display: inline-block; // redeclare so they don't wrap to new lines
  96      width: auto;
  97    }
  98    .controls-row [class*="span"] + [class*="span"] {
  99      margin-left: 0;
 100    }
 101  
 102    // Modals
 103    .modal {
 104      position: fixed;
 105      top:   20px;
 106      left:  20px;
 107      right: 20px;
 108      width: auto;
 109      margin: 0;
 110      &.fade  { top: -100px; }
 111      &.fade.in { top: 20px; }
 112    }
 113  
 114  }
 115  
 116  
 117  
 118  // UP TO LANDSCAPE PHONE
 119  // ---------------------
 120  
 121  @media (max-width: 480px) {
 122  
 123    // Smooth out the collapsing/expanding nav
 124    .nav-collapse {
 125      -webkit-transform: translate3d(0, 0, 0); // activate the GPU
 126    }
 127  
 128    // Block level the page header small tag for readability
 129    .page-header h1 small {
 130      display: block;
 131      line-height: @baseLineHeight;
 132    }
 133  
 134    // Update checkboxes for iOS
 135    input[type="checkbox"],
 136    input[type="radio"] {
 137      border: 1px solid #ccc;
 138    }
 139  
 140    // Remove the horizontal form styles
 141    .form-horizontal {
 142      .control-label {
 143        float: none;
 144        width: auto;
 145        padding-top: 0;
 146        text-align: left;
 147      }
 148      // Move over all input controls and content
 149      .controls {
 150        margin-left: 0;
 151      }
 152      // Move the options list down to align with labels
 153      .control-list {
 154        padding-top: 0; // has to be padding because margin collaspes
 155      }
 156      // Move over buttons in .form-actions to align with .controls
 157      .form-actions {
 158        padding-left: 10px;
 159        padding-right: 10px;
 160      }
 161    }
 162  
 163    // Medias
 164    // Reset float and spacing to stack
 165    .media .pull-left,
 166    .media .pull-right  {
 167      float: none;
 168      display: block;
 169      margin-bottom: 10px;
 170    }
 171    // Remove side margins since we stack instead of indent
 172    .media-object {
 173      margin-right: 0;
 174      margin-left: 0;
 175    }
 176  
 177    // Modals
 178    .modal {
 179      top:   10px;
 180      left:  10px;
 181      right: 10px;
 182    }
 183    .modal-header .close {
 184      padding: 10px;
 185      margin: -10px;
 186    }
 187  
 188    // Carousel
 189    .carousel-caption {
 190      position: static;
 191    }
 192  
 193  }