1
0

responsive-767px-max.less 3.8 KB

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