responsive-767px-max.less.svn-base 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
  1. // UP TO LANDSCAPE PHONE
  2. // ---------------------
  3. @media (max-width: 480px) {
  4. // Smooth out the collapsing/expanding nav
  5. .nav-collapse {
  6. -webkit-transform: translate3d(0, 0, 0); // activate the GPU
  7. }
  8. // Block level the page header small tag for readability
  9. .page-header h1 small {
  10. display: block;
  11. line-height: @baseLineHeight;
  12. }
  13. // Update checkboxes for iOS
  14. input[type="checkbox"],
  15. input[type="radio"] {
  16. border: 1px solid #ccc;
  17. }
  18. // Remove the horizontal form styles
  19. .form-horizontal .control-group > label {
  20. float: none;
  21. width: auto;
  22. padding-top: 0;
  23. text-align: left;
  24. }
  25. // Move over all input controls and content
  26. .form-horizontal .controls {
  27. margin-left: 0;
  28. }
  29. // Move the options list down to align with labels
  30. .form-horizontal .control-list {
  31. padding-top: 0; // has to be padding because margin collaspes
  32. }
  33. // Move over buttons in .form-actions to align with .controls
  34. .form-horizontal .form-actions {
  35. padding-left: 10px;
  36. padding-right: 10px;
  37. }
  38. // Modals
  39. .modal {
  40. position: absolute;
  41. top: 10px;
  42. left: 10px;
  43. right: 10px;
  44. width: auto;
  45. margin: 0;
  46. &.fade.in { top: auto; }
  47. }
  48. .modal-header .close {
  49. padding: 10px;
  50. margin: -10px;
  51. }
  52. // Carousel
  53. .carousel-caption {
  54. position: static;
  55. }
  56. }
  57. // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
  58. // --------------------------------------------------
  59. @media (max-width: 767px) {
  60. // Padding to set content in a bit
  61. body {
  62. padding-left: 20px;
  63. padding-right: 20px;
  64. }
  65. // Negative indent the now static "fixed" navbar
  66. .navbar-fixed-top,
  67. .navbar-fixed-bottom {
  68. margin-left: -20px;
  69. margin-right: -20px;
  70. }
  71. // Remove padding on container given explicit padding set on body
  72. .container-fluid {
  73. padding: 0;
  74. }
  75. // TYPOGRAPHY
  76. // ----------
  77. // Reset horizontal dl
  78. .dl-horizontal {
  79. dt {
  80. float: none;
  81. clear: none;
  82. width: auto;
  83. text-align: left;
  84. }
  85. dd {
  86. margin-left: 0;
  87. }
  88. }
  89. // GRID & CONTAINERS
  90. // -----------------
  91. // Remove width from containers
  92. .container {
  93. width: auto;
  94. }
  95. // Fluid rows
  96. .row-fluid {
  97. width: 100%;
  98. }
  99. // Undo negative margin on rows and thumbnails
  100. .row,
  101. .thumbnails {
  102. margin-left: 0;
  103. }
  104. // Make all grid-sized elements block level again
  105. [class*="span"],
  106. .row-fluid [class*="span"] {
  107. float: none;
  108. display: block;
  109. width: auto;
  110. margin-left: 0;
  111. }
  112. // FORM FIELDS
  113. // -----------
  114. // Make span* classes full width
  115. .input-large,
  116. .input-xlarge,
  117. .input-xxlarge,
  118. input[class*="span"],
  119. select[class*="span"],
  120. textarea[class*="span"],
  121. .uneditable-input {
  122. .input-block-level();
  123. }
  124. // But don't let it screw up prepend/append inputs
  125. .input-prepend input,
  126. .input-append input,
  127. .input-prepend input[class*="span"],
  128. .input-append input[class*="span"] {
  129. display: inline-block; // redeclare so they don't wrap to new lines
  130. width: auto;
  131. }
  132. }