Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
responsive-767px-max.less 3.83 KiB
1 
//
2 
// Responsive: Landscape phone to desktop/tablet
3 
// --------------------------------------------------
4
5
6 
@media (max-width: 767px) {
7
8 
  // Padding to set content in a bit
9 
  body {
10 
    padding-left: 20px;
11 
    padding-right: 20px;
12 
  }
13 
  // Negative indent the now static "fixed" navbar
14 
  .navbar-fixed-top,
15 
  .navbar-fixed-bottom,
16 
  .navbar-static-top {
17 
    margin-left: -20px;
18 
    margin-right: -20px;
19 
  }
20 
  // Remove padding on container given explicit padding set on body
21 
  .container-fluid {
22 
    padding: 0;
23 
  }
24
25 
  // TYPOGRAPHY
26 
  // ----------
27 
  // Reset horizontal dl
28 
  .dl-horizontal {
29 
    dt {
30 
      float: none;
31 
      clear: none;
32 
      width: auto;
33 
      text-align: left;
34 
    }
35 
    dd {
36 
      margin-left: 0;
37 
    }
38 
  }
39
40 
  // GRID & CONTAINERS
41 
  // -----------------
42 
  // Remove width from containers
43 
  .container {
44 
    width: auto;
45 
  }
46 
  // Fluid rows
47 
  .row-fluid {
48 
    width: 100%;
49 
  }
50 
  // Undo negative margin on rows and thumbnails
51 
  .row,
52 
  .thumbnails {
53 
    margin-left: 0;
54 
  }
55 
  .thumbnails > li {
56 
    float: none;
57 
    margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present
58 
  }
59 
  // Make all grid-sized elements block level again
60 
  [class*="span"],
61 
  .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing
62 
  .row-fluid [class*="span"] {
63 
    float: none;
64 
    display: block;
65 
    width: 100%;
66 
    margin-left: 0;
67 
    .box-sizing(border-box);
68 
  }
69 
  .span12,
70 
  .row-fluid .span12 {
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
width: 100%; .box-sizing(border-box); } .row-fluid [class*="offset"]:first-child { margin-left: 0; } // FORM FIELDS // ----------- // Make span* classes full width .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { .input-block-level(); } // But don't let it screw up prepend/append inputs .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { display: inline-block; // redeclare so they don't wrap to new lines width: auto; } .controls-row [class*="span"] + [class*="span"] { margin-left: 0; } // Modals .modal { position: fixed; top: 20px; left: 20px; right: 20px; width: auto; margin: 0; &.fade { top: -100px; } &.fade.in { top: 20px; } } } // UP TO LANDSCAPE PHONE // --------------------- @media (max-width: 480px) { // Smooth out the collapsing/expanding nav .nav-collapse { -webkit-transform: translate3d(0, 0, 0); // activate the GPU } // Block level the page header small tag for readability .page-header h1 small { display: block; line-height: @baseLineHeight; } // Update checkboxes for iOS input[type="checkbox"], input[type="radio"] { border: 1px solid #ccc; } // Remove the horizontal form styles
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
.form-horizontal { .control-label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content .controls { margin-left: 0; } // Move the options list down to align with labels .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls .form-actions { padding-left: 10px; padding-right: 10px; } } // Medias // Reset float and spacing to stack .media .pull-left, .media .pull-right { float: none; display: block; margin-bottom: 10px; } // Remove side margins since we stack instead of indent .media-object { margin-right: 0; margin-left: 0; } // Modals .modal { top: 10px; left: 10px; right: 10px; } .modal-header .close { padding: 10px; margin: -10px; } // Carousel .carousel-caption { position: static; } }