libs/bootstrap/less/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   .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 }