css/bootstrap/responsive-767px-max.less

   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   .row-fluid [class*="span"] {
  62     float: none;
  63     display: block;
  64     width: 100%;
  65     margin-left: 0;
  66     .box-sizing(border-box);
  67   }
  68   .span12,
  69   .row-fluid .span12 {
  70     width: 100%;
  71     .box-sizing(border-box);
  72   }
  73
  74   // FORM FIELDS
  75   // -----------
  76   // Make span* classes full width
  77   .input-large,
  78   .input-xlarge,
  79   .input-xxlarge,
  80   input[class*="span"],
  81   select[class*="span"],
  82   textarea[class*="span"],
  83   .uneditable-input {
  84     .input-block-level();
  85   }
  86   // But don't let it screw up prepend/append inputs
  87   .input-prepend input,
  88   .input-append input,
  89   .input-prepend input[class*="span"],
  90   .input-append input[class*="span"] {
  91     display: inline-block; // redeclare so they don't wrap to new lines
  92     width: auto;
  93   }
  94   .controls-row [class*="span"] + [class*="span"] {
  95     margin-left: 0;
  96   }
  97
  98   // Modals
  99   .modal {
 100     position: fixed;
 101     top:   20px;
 102     left:  20px;
 103     right: 20px;
 104     width: auto;
 105     margin: 0;
 106     &.fade.in { top: auto; }
 107   }
 108
 109 }
 110
 111
 112
 113 // UP TO LANDSCAPE PHONE
 114 // ---------------------
 115
 116 @media (max-width: 480px) {
 117
 118   // Smooth out the collapsing/expanding nav
 119   .nav-collapse {
 120     -webkit-transform: translate3d(0, 0, 0); // activate the GPU
 121   }
 122
 123   // Block level the page header small tag for readability
 124   .page-header h1 small {
 125     display: block;
 126     line-height: @baseLineHeight;
 127   }
 128
 129   // Update checkboxes for iOS
 130   input[type="checkbox"],
 131   input[type="radio"] {
 132     border: 1px solid #ccc;
 133   }
 134
 135   // Remove the horizontal form styles
 136   .form-horizontal {
 137     .control-label {
 138       float: none;
 139       width: auto;
 140       padding-top: 0;
 141       text-align: left;
 142     }
 143     // Move over all input controls and content
 144     .controls {
 145       margin-left: 0;
 146     }
 147     // Move the options list down to align with labels
 148     .control-list {
 149       padding-top: 0; // has to be padding because margin collaspes
 150     }
 151     // Move over buttons in .form-actions to align with .controls
 152     .form-actions {
 153       padding-left: 10px;
 154       padding-right: 10px;
 155     }
 156   }
 157
 158   // Modals
 159   .modal {
 160     top:   10px;
 161     left:  10px;
 162     right: 10px;
 163   }
 164   .modal-header .close {
 165     padding: 10px;
 166     margin: -10px;
 167   }
 168
 169   // Carousel
 170   .carousel-caption {
 171     position: static;
 172   }
 173
 174 }