Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
responsive.less 4.13 KiB
1 
/* Responsive.less
2 
 * For phone and tablet devices
3 
 * ------------------------------------------------------------- */
4
5
6 
// UP TO LANDSCAPE PHONE
7 
// ---------------------
8
9 
@media (max-width: 480px) {
10 
  // Remove width from containers
11 
  .container {
12 
    width: auto;
13 
    padding: 0 10px;
14 
  }
15 
  // Make all columns even
16 
  [class*="span"] {
17 
    float: none;
18 
    display: block;
19 
    width: auto;
20 
    margin: 0;
21 
  }
22 
  // Resize modals
23 
  .modal {
24 
    width: auto;
25 
    margin: 0;
26 
  }
27
28 
  // Remove the horizontal form styles
29 
  .form-horizontal .control-group > label {
30 
    float: none;
31 
    width: auto;
32 
    padding-top: 0;
33 
    text-align: left;
34 
  }
35 
  // Move over all input controls and content
36 
  .form-horizontal .controls {
37 
    margin-left: 0;
38 
  }
39 
  // Move the options list down to align with labels
40 
  .form-horizontal .control-list {
41 
    padding-top: 0; // has to be padding because margin collaspes
42 
  }
43 
  // Move over buttons in .form-actions to align with .controls
44 
  .form-horizontal .form-actions {
45 
    padding-left: 0;
46 
  }
47
48 
}
49
50
51 
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
52 
// --------------------------------------------------
53
54 
@media (min-width: 480px) and (max-width: 768px) {
55 
  // Remove width from containers
56 
  .container {
57 
    width: auto;
58 
    padding: 0 10px;
59 
  }
60 
  // Make all columns even
61 
  [class*="span"] {
62 
    float: none;
63 
    display: block;
64 
    width: auto;
65 
    margin: 0;
66 
  }
67 
}
68
69
70 
// PORTRAIT TABLET TO DEFAULT DESKTOP
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// ---------------------------------- @media (min-width: 768px) and (max-width: 940px) { // Reset grid variables @gridColumns: 16; @gridColumnWidth: 44px; @gridGutterWidth: 20px; @siteWidth: 748px; // Bring grid mixins to recalculate widths .columns(@columnSpan: 1) { width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // 16cols at 30px wide with 16px gutters .container { width: @siteWidth; } // Default columns .span1 { .columns(1); } .span2 { .columns(2); } .span3 { .columns(3); } .span4 { .columns(4); } .span5 { .columns(5); } .span6 { .columns(6); } .span7 { .columns(7); } .span8 { .columns(8); } .span9 { .columns(9); } .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } // Offset column options .offset1 { .offset(1); } .offset2 { .offset(2); } .offset3 { .offset(3); } .offset4 { .offset(4); } .offset5 { .offset(5); } .offset6 { .offset(6); } .offset7 { .offset(7); } .offset8 { .offset(8); } .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } .offset12 { .offset(12); } } // LARGE DESKTOP & UP // ------------------ @media (min-width: 1170px) { // Reset grid variables @gridColumns: 12; @gridColumnWidth: 70px; @gridGutterWidth: 30px; @siteWidth: 1170px; // Bring grid mixins to recalculate widths .columns(@columnSpan: 1) { width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) {
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } .container { width: @siteWidth; } [class*="span"] { margin-left: @gridGutterWidth; } // Default columns .span1 { .columns(1); } .span2 { .columns(2); } .span3 { .columns(3); } .span4 { .columns(4); } .span5 { .columns(5); } .span6 { .columns(6); } .span7 { .columns(7); } .span8 { .columns(8); } .span9 { .columns(9); } .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } // Offset column options .offset1 { .offset(1); } .offset2 { .offset(2); } .offset3 { .offset(3); } .offset4 { .offset(4); } .offset5 { .offset(5); } .offset6 { .offset(6); } .offset7 { .offset(7); } .offset8 { .offset(8); } .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } .offset12 { .offset(12); } }