/src/honeynet_web/honeywall/static/twitter-bootstrap/less/responsive.less

https://bitbucket.org/cpdean/pig · LESS · 323 lines · 204 code · 49 blank · 70 comment · 0 complexity · b7ea4b057706aa03bd946e23d3722433 MD5 · raw file

  1. /*!
  2. * Bootstrap Responsive v2.0.0
  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. // UP TO LANDSCAPE PHONE
  27. // ---------------------
  28. @media (max-width: 480px) {
  29. // Smooth out the collapsing/expanding nav
  30. .nav-collapse {
  31. -webkit-transform: translate3d(0, 0, 0); // activate the GPU
  32. }
  33. // Block level the page header small tag for readability
  34. .page-header h1 small {
  35. display: block;
  36. line-height: @baseLineHeight;
  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. 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. // Update checkboxes for iOS
  58. input[type="checkbox"],
  59. input[type="radio"] {
  60. border: 1px solid #ccc;
  61. }
  62. // Remove the horizontal form styles
  63. .form-horizontal .control-group > label {
  64. float: none;
  65. width: auto;
  66. padding-top: 0;
  67. text-align: left;
  68. }
  69. // Move over all input controls and content
  70. .form-horizontal .controls {
  71. margin-left: 0;
  72. }
  73. // Move the options list down to align with labels
  74. .form-horizontal .control-list {
  75. padding-top: 0; // has to be padding because margin collaspes
  76. }
  77. // Move over buttons in .form-actions to align with .controls
  78. .form-horizontal .form-actions {
  79. padding-left: 10px;
  80. padding-right: 10px;
  81. }
  82. // Modals
  83. .modal {
  84. position: absolute;
  85. top: 10px;
  86. left: 10px;
  87. right: 10px;
  88. width: auto;
  89. margin: 0;
  90. &.fade.in { top: auto; }
  91. }
  92. .modal-header .close {
  93. padding: 10px;
  94. margin: -10px;
  95. }
  96. // Carousel
  97. .carousel-caption {
  98. position: static;
  99. }
  100. }
  101. // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
  102. // --------------------------------------------------
  103. @media (max-width: 768px) {
  104. // GRID & CONTAINERS
  105. // -----------------
  106. // Remove width from containers
  107. .container {
  108. width: auto;
  109. padding: 0 20px;
  110. }
  111. // Fluid rows
  112. .row-fluid {
  113. width: 100%;
  114. }
  115. // Undo negative margin on rows
  116. .row {
  117. margin-left: 0;
  118. }
  119. // Make all columns even
  120. .row > [class*="span"],
  121. .row-fluid > [class*="span"] {
  122. float: none;
  123. display: block;
  124. width: auto;
  125. margin: 0;
  126. }
  127. }
  128. // PORTRAIT TABLET TO DEFAULT DESKTOP
  129. // ----------------------------------
  130. @media (min-width: 768px) and (max-width: 980px) {
  131. // Fixed grid
  132. #gridSystem > .generate(12, 42px, 20px);
  133. // Fluid grid
  134. #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
  135. // Input grid
  136. #inputGridSystem > .generate(12, 42px, 20px);
  137. }
  138. // TABLETS AND BELOW
  139. // -----------------
  140. @media (max-width: 980px) {
  141. // UNFIX THE TOPBAR
  142. // ----------------
  143. // Remove any padding from the body
  144. body {
  145. padding-top: 0;
  146. }
  147. // Unfix the navbar
  148. .navbar-fixed-top {
  149. position: static;
  150. margin-bottom: @baseLineHeight;
  151. }
  152. .navbar-fixed-top .navbar-inner {
  153. padding: 5px;
  154. }
  155. .navbar .container {
  156. width: auto;
  157. padding: 0;
  158. }
  159. // Account for brand name
  160. .navbar .brand {
  161. padding-left: 10px;
  162. padding-right: 10px;
  163. margin: 0 0 0 -5px;
  164. }
  165. // Nav collapse clears brand
  166. .navbar .nav-collapse {
  167. clear: left;
  168. }
  169. // Block-level the nav
  170. .navbar .nav {
  171. float: none;
  172. margin: 0 0 (@baseLineHeight / 2);
  173. }
  174. .navbar .nav > li {
  175. float: none;
  176. }
  177. .navbar .nav > li > a {
  178. margin-bottom: 2px;
  179. }
  180. .navbar .nav > .divider-vertical {
  181. display: none;
  182. }
  183. // Nav and dropdown links in navbar
  184. .navbar .nav > li > a,
  185. .navbar .dropdown-menu a {
  186. padding: 6px 15px;
  187. font-weight: bold;
  188. color: @navbarLinkColor;
  189. .border-radius(3px);
  190. }
  191. .navbar .dropdown-menu li + li a {
  192. margin-bottom: 2px;
  193. }
  194. .navbar .nav > li > a:hover,
  195. .navbar .dropdown-menu a:hover {
  196. background-color: @navbarBackground;
  197. }
  198. // Dropdowns in the navbar
  199. .navbar .dropdown-menu {
  200. position: static;
  201. top: auto;
  202. left: auto;
  203. float: none;
  204. display: block;
  205. max-width: none;
  206. margin: 0 15px;
  207. padding: 0;
  208. background-color: transparent;
  209. border: none;
  210. .border-radius(0);
  211. .box-shadow(none);
  212. }
  213. .navbar .dropdown-menu:before,
  214. .navbar .dropdown-menu:after {
  215. display: none;
  216. }
  217. .navbar .dropdown-menu .divider {
  218. display: none;
  219. }
  220. // Forms in navbar
  221. .navbar-form,
  222. .navbar-search {
  223. float: none;
  224. padding: (@baseLineHeight / 2) 15px;
  225. margin: (@baseLineHeight / 2) 0;
  226. border-top: 1px solid @navbarBackground;
  227. border-bottom: 1px solid @navbarBackground;
  228. @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
  229. .box-shadow(@shadow);
  230. }
  231. // Pull right (secondary) nav content
  232. .navbar .nav.pull-right {
  233. float: none;
  234. margin-left: 0;
  235. }
  236. // Static navbar
  237. .navbar-static .navbar-inner {
  238. padding-left: 10px;
  239. padding-right: 10px;
  240. }
  241. // Navbar button
  242. .btn-navbar {
  243. display: block;
  244. }
  245. // Hide everything in the navbar save .brand and toggle button */
  246. .nav-collapse {
  247. overflow: hidden;
  248. height: 0;
  249. }
  250. }
  251. // DEFAULT DESKTOP
  252. // ---------------
  253. @media (min-width: 980px) {
  254. .nav-collapse.collapse {
  255. height: auto !important;
  256. }
  257. }
  258. // LARGE DESKTOP & UP
  259. // ------------------
  260. @media (min-width: 1200px) {
  261. // Fixed grid
  262. #gridSystem > .generate(12, 70px, 30px);
  263. // Fluid grid
  264. #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
  265. // Input grid
  266. #inputGridSystem > .generate(12, 70px, 30px);
  267. // Thumbnails
  268. .thumbnails {
  269. margin-left: -30px;
  270. }
  271. .thumbnails > li {
  272. margin-left: 30px;
  273. }
  274. }