responsive.less 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. /*!
  2. * Bootstrap Responsive v2.0.2
  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. // Responsive.less
  11. // For phone and tablet devices
  12. // -------------------------------------------------------------
  13. // REPEAT VARIABLES & MIXINS
  14. // -------------------------
  15. // Required since we compile the responsive stuff separately
  16. @import "variables.less"; // Modify this for custom colors, font-sizes, etc
  17. @import "mixins.less";
  18. // RESPONSIVE CLASSES
  19. // ------------------
  20. // Hide from screenreaders and browsers
  21. // Credit: HTML5 Boilerplate
  22. .hidden {
  23. display: none;
  24. visibility: hidden;
  25. }
  26. // Visibility utilities
  27. // For desktops
  28. .visible-phone { display: none; }
  29. .visible-tablet { display: none; }
  30. .visible-desktop { display: block; }
  31. .hidden-phone { display: block; }
  32. .hidden-tablet { display: block; }
  33. .hidden-desktop { display: none; }
  34. // Phones only
  35. @media (max-width: 767px) {
  36. // Show
  37. .visible-phone { display: block; }
  38. // Hide
  39. .hidden-phone { display: none; }
  40. // Hide everything else
  41. .hidden-desktop { display: block; }
  42. .visible-desktop { display: none; }
  43. }
  44. // Tablets & small desktops only
  45. @media (min-width: 768px) and (max-width: 979px) {
  46. // Show
  47. .visible-tablet { display: block; }
  48. // Hide
  49. .hidden-tablet { display: none; }
  50. // Hide everything else
  51. .hidden-desktop { display: block; }
  52. .visible-desktop { display: none; }
  53. }
  54. // UP TO LANDSCAPE PHONE
  55. // ---------------------
  56. @media (max-width: 480px) {
  57. // Smooth out the collapsing/expanding nav
  58. .nav-collapse {
  59. -webkit-transform: translate3d(0, 0, 0); // activate the GPU
  60. }
  61. // Block level the page header small tag for readability
  62. .page-header h1 small {
  63. display: block;
  64. line-height: @baseLineHeight;
  65. }
  66. // Update checkboxes for iOS
  67. input[type="checkbox"],
  68. input[type="radio"] {
  69. border: 1px solid #ccc;
  70. }
  71. // Remove the horizontal form styles
  72. .form-horizontal .control-group > label {
  73. float: none;
  74. width: auto;
  75. padding-top: 0;
  76. text-align: left;
  77. }
  78. // Move over all input controls and content
  79. .form-horizontal .controls {
  80. margin-left: 0;
  81. }
  82. // Move the options list down to align with labels
  83. .form-horizontal .control-list {
  84. padding-top: 0; // has to be padding because margin collaspes
  85. }
  86. // Move over buttons in .form-actions to align with .controls
  87. .form-horizontal .form-actions {
  88. padding-left: 10px;
  89. padding-right: 10px;
  90. }
  91. // Modals
  92. .modal {
  93. position: absolute;
  94. top: 10px;
  95. left: 10px;
  96. right: 10px;
  97. width: auto;
  98. margin: 0;
  99. &.fade.in { top: auto; }
  100. }
  101. .modal-header .close {
  102. padding: 10px;
  103. margin: -10px;
  104. }
  105. // Carousel
  106. .carousel-caption {
  107. position: static;
  108. }
  109. }
  110. // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
  111. // --------------------------------------------------
  112. @media (max-width: 767px) {
  113. // Padding to set content in a bit
  114. body {
  115. padding-left: 20px;
  116. padding-right: 20px;
  117. }
  118. .navbar-fixed-top {
  119. margin-left: -20px;
  120. margin-right: -20px;
  121. }
  122. // GRID & CONTAINERS
  123. // -----------------
  124. // Remove width from containers
  125. .container {
  126. width: auto;
  127. }
  128. // Fluid rows
  129. .row-fluid {
  130. width: 100%;
  131. }
  132. // Undo negative margin on rows
  133. .row {
  134. margin-left: 0;
  135. }
  136. // Make all columns even
  137. .row > [class*="span"],
  138. .row-fluid > [class*="span"] {
  139. float: none;
  140. display: block;
  141. width: auto;
  142. margin: 0;
  143. }
  144. // THUMBNAILS
  145. // ----------
  146. .thumbnails [class*="span"] {
  147. width: auto;
  148. }
  149. // FORM FIELDS
  150. // -----------
  151. // Make span* classes full width
  152. input[class*="span"],
  153. select[class*="span"],
  154. textarea[class*="span"],
  155. .uneditable-input {
  156. .input-block-level();
  157. }
  158. // But don't let it screw up prepend/append inputs
  159. .input-prepend input[class*="span"],
  160. .input-append input[class*="span"] {
  161. width: auto;
  162. }
  163. }
  164. // PORTRAIT TABLET TO DEFAULT DESKTOP
  165. // ----------------------------------
  166. @media (min-width: 768px) and (max-width: 979px) {
  167. // Fixed grid
  168. #grid > .core(42px, 20px);
  169. // Fluid grid
  170. #grid > .fluid(5.801104972%, 2.762430939%);
  171. // Input grid
  172. #grid > .input(42px, 20px);
  173. }
  174. // TABLETS AND BELOW
  175. // -----------------
  176. @media (max-width: 979px) {
  177. // UNFIX THE TOPBAR
  178. // ----------------
  179. // Remove any padding from the body
  180. body {
  181. padding-top: 0;
  182. }
  183. // Unfix the navbar
  184. .navbar-fixed-top {
  185. position: static;
  186. margin-bottom: @baseLineHeight;
  187. }
  188. .navbar-fixed-top .navbar-inner {
  189. padding: 5px;
  190. }
  191. .navbar .container {
  192. width: auto;
  193. padding: 0;
  194. }
  195. // Account for brand name
  196. .navbar .brand {
  197. padding-left: 10px;
  198. padding-right: 10px;
  199. margin: 0 0 0 -5px;
  200. }
  201. // Nav collapse clears brand
  202. .navbar .nav-collapse {
  203. clear: left;
  204. }
  205. // Block-level the nav
  206. .navbar .nav {
  207. float: none;
  208. margin: 0 0 (@baseLineHeight / 2);
  209. }
  210. .navbar .nav > li {
  211. float: none;
  212. }
  213. .navbar .nav > li > a {
  214. margin-bottom: 2px;
  215. }
  216. .navbar .nav > .divider-vertical {
  217. display: none;
  218. }
  219. .navbar .nav .nav-header {
  220. color: @navbarText;
  221. text-shadow: none;
  222. }
  223. // Nav and dropdown links in navbar
  224. .navbar .nav > li > a,
  225. .navbar .dropdown-menu a {
  226. padding: 6px 15px;
  227. font-weight: bold;
  228. color: @navbarLinkColor;
  229. .border-radius(3px);
  230. }
  231. .navbar .dropdown-menu li + li a {
  232. margin-bottom: 2px;
  233. }
  234. .navbar .nav > li > a:hover,
  235. .navbar .dropdown-menu a:hover {
  236. background-color: @navbarBackground;
  237. }
  238. // Dropdowns in the navbar
  239. .navbar .dropdown-menu {
  240. position: static;
  241. top: auto;
  242. left: auto;
  243. float: none;
  244. display: block;
  245. max-width: none;
  246. margin: 0 15px;
  247. padding: 0;
  248. background-color: transparent;
  249. border: none;
  250. .border-radius(0);
  251. .box-shadow(none);
  252. }
  253. .navbar .dropdown-menu:before,
  254. .navbar .dropdown-menu:after {
  255. display: none;
  256. }
  257. .navbar .dropdown-menu .divider {
  258. display: none;
  259. }
  260. // Forms in navbar
  261. .navbar-form,
  262. .navbar-search {
  263. float: none;
  264. padding: (@baseLineHeight / 2) 15px;
  265. margin: (@baseLineHeight / 2) 0;
  266. border-top: 1px solid @navbarBackground;
  267. border-bottom: 1px solid @navbarBackground;
  268. @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  269. .box-shadow(@shadow);
  270. }
  271. // Pull right (secondary) nav content
  272. .navbar .nav.pull-right {
  273. float: none;
  274. margin-left: 0;
  275. }
  276. // Static navbar
  277. .navbar-static .navbar-inner {
  278. padding-left: 10px;
  279. padding-right: 10px;
  280. }
  281. // Navbar button
  282. .btn-navbar {
  283. display: block;
  284. }
  285. // Hide everything in the navbar save .brand and toggle button */
  286. .nav-collapse {
  287. overflow: hidden;
  288. height: 0;
  289. }
  290. }
  291. // DEFAULT DESKTOP
  292. // ---------------
  293. @media (min-width: 980px) {
  294. .nav-collapse.collapse {
  295. height: auto !important;
  296. overflow: visible !important;
  297. }
  298. }
  299. // LARGE DESKTOP & UP
  300. // ------------------
  301. @media (min-width: 1200px) {
  302. // Fixed grid
  303. #grid > .core(70px, 30px);
  304. // Fluid grid
  305. #grid > .fluid(5.982905983%, 2.564102564%);
  306. // Input grid
  307. #grid > .input(70px, 30px);
  308. // Thumbnails
  309. .thumbnails {
  310. margin-left: -30px;
  311. }
  312. .thumbnails > li {
  313. margin-left: 30px;
  314. }
  315. }