themes/default/less/responsive.less

   1 /*!
   2  * Bootstrap Responsive v2.0.1
   3  *
   4  * Copyright 2012 Twitter, Inc
   5  * Licensed under the Apache License v2.0
   6  * http://www.apache.org/licenses/LICENSE-2.0
   7  *
   8  * Designed and built with all the love in the world @twitter by @mdo and @fat.
   9  */
  10
  11
  12 // RESPONSIVE CLASSES
  13 // ------------------
  14
  15 .hidden {
  16   display: none;
  17   visibility: hidden;
  18 }
  19
  20
  21
  22 // UP TO LANDSCAPE PHONE
  23 // ---------------------
  24
  25 @media (max-width: 480px) {
  26
  27   // Smooth out the collapsing/expanding nav
  28   .nav-collapse {
  29     -webkit-transform: translate3d(0, 0, 0); // activate the GPU
  30   }
  31
  32   // Block level the page header small tag for readability
  33   .page-header h1 small {
  34     display: block;
  35     line-height: @baseLineHeight;
  36   }
  37
  38   // Make span* classes full width
  39   input[class*="span"],
  40   select[class*="span"],
  41   textarea[class*="span"],
  42   .uneditable-input {
  43     display: block;
  44     width: 100%;
  45     min-height: 28px; /* Make inputs at least the height of their button counterpart */
  46     /* Makes inputs behave like true block-level elements */
  47     -webkit-box-sizing: border-box; /* Older Webkit */
  48        -moz-box-sizing: border-box; /* Older FF */
  49         -ms-box-sizing: border-box; /* IE8 */
  50             box-sizing: border-box; /* CSS3 spec*/
  51   }
  52   // But don't let it screw up prepend/append inputs
  53   .input-prepend input[class*="span"],
  54   .input-append input[class*="span"] {
  55     width: auto;
  56   }
  57
  58   // Update checkboxes for iOS
  59   input[type="checkbox"],
  60   input[type="radio"] {
  61     border: 1px solid #ccc;
  62   }
  63
  64   // Remove the horizontal form styles
  65   .form-horizontal .control-group > label {
  66     float: none;
  67     width: auto;
  68     padding-top: 0;
  69     text-align: left;
  70   }
  71   // Move over all input controls and content
  72   .form-horizontal .controls {
  73     margin-left: 0;
  74   }
  75   // Move the options list down to align with labels
  76   .form-horizontal .control-list {
  77     padding-top: 0; // has to be padding because margin collaspes
  78   }
  79   // Move over buttons in .form-actions to align with .controls
  80   .form-horizontal .form-actions {
  81     padding-left: 10px;
  82     padding-right: 10px;
  83   }
  84
  85   // Carousel
  86   .carousel-caption {
  87     position: static;
  88   }
  89
  90 }
  91
  92 @media (max-width: 768px) {
  93
  94   body {padding-top: 30px;}
  95
  96   // GRID & CONTAINERS
  97   // -----------------
  98   // Remove width from containers
  99   .container, .container-fluid {
 100     width: auto;
 101     padding: 0;
 102   }
 103   // Fluid rows
 104   .container-fluid .row-fluid {
 105     width: 100%;
 106   }
 107   // Undo negative margin on rows
 108   .row {
 109     margin-left: 0;
 110   }
 111   // Make all columns even
 112   .row > [class*="span"],
 113   .container-fluid .row-fluid > [class*="span"] {
 114     float: none;
 115     display: block;
 116     width: auto;
 117     margin: 10px;
 118   }
 119
 120   .thumbnail {
 121     .border-radius(0px);
 122   }
 123 }
 124
 125
 126