// Responsive.less // For phone and tablet devices // ------------------------------------------------------------- // RESPONSIVE CLASSES // ------------------ // Hide from screenreaders and browsers // Credit: HTML5BP .hidden { display: none; visibility: hidden; } // UP TO LANDSCAPE PHONE // --------------------- @media (max-width: 480px) { // Resize modals .modal { width: auto; margin: 0; } // Remove the horizontal form styles .horizontal-form .control-group > label { float: none; width: auto; padding-top: 0; text-align: left; } // Move over all input controls and content .horizontal-form .controls { margin-left: 0; } // Move the options list down to align with labels .horizontal-form .control-list { padding-top: 0; // has to be padding because margin collaspes } // Move over buttons in .form-actions to align with .controls .horizontal-form .form-actions { padding-left: 0; } } // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET // -------------------------------------------------- @media (max-width: 768px) { // Remove width from containers .container { width: auto; padding: 0 20px; } // Undo negative margin on rows .row { margin-left: 0; } // Make all columns even [class*="span"] { float: none; display: block; width: auto; margin: 0; } // Make the nav work for small devices .nav { position: absolute; top: 0; left: 0; width: 180px; padding-top: 40px; list-style: none; } .nav, .nav > li:last-child a { .border-radius(0 0 4px 0); } .nav > li { float: none; display: none; } .nav > li > a { float: none; background-color: #222; } .nav > .active { display: block; position: absolute; top: 0; left: 0; } .navbar ul .active > a { background-color: transparent; } .nav > .active a:after { display: inline-block; width: 0; height: 0; margin-top: 8px; margin-left: 6px; text-indent: -99999px; vertical-align: top; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid @white; .opacity(100); content: "↓"; } .nav > .active a:hover { background-color: rgba(255,255,255,.05); } } // PORTRAIT TABLET TO DEFAULT DESKTOP // ---------------------------------- @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: 1210px) { // 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) { 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); } }