diff options
Diffstat (limited to 'lib/responsive.less')
| -rw-r--r-- | lib/responsive.less | 268 |
1 files changed, 0 insertions, 268 deletions
diff --git a/lib/responsive.less b/lib/responsive.less deleted file mode 100644 index 2999eef4d..000000000 --- a/lib/responsive.less +++ /dev/null @@ -1,268 +0,0 @@ -// Responsive.less -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "variables.less"; // Modify this for custom colors, font-sizes, etc -@import "mixins.less"; - - -// RESPONSIVE CLASSES -// ------------------ - -// Hide from screenreaders and browsers -// Credit: HTML5BP -.hidden { - display: none; - visibility: hidden; -} - - -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Make the nav work for small devices - .navbar { - .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; - } - .nav > .active > a { - background-color: transparent; - } - .nav > .active > a:hover { - background-color: #333; - } - .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:hover > li { - display: block; - } - .nav:hover > li > a:hover { - background-color: #333; - } - } - - // Remove the horizontal form styles - .form-horizontal .control-group > label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .form-horizontal .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .form-horizontal .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-horizontal .form-actions { - padding-left: 0; - } - - // Modals - .modal { - position: absolute; - top: 20px; - left: 20px; - right: 20px; - width: auto; - margin: 0; - &.fade.in { top: auto; } - } - .modal-header .close { - padding: 10px; - } - -} - - -// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET -// -------------------------------------------------- - -@media (max-width: 768px) { - - // Unfix the navbar - .navbar-fixed { - position: absolute; - } - .navbar-fixed .nav { - float: none; - } - - // Remove width from containers - .container { - width: auto; - padding: 0 20px; - } - // Undo negative margin on rows - .row { - margin-left: 0; - } - // Make all columns even - .row > [class*="span"] { - float: none; - display: block; - width: auto; - margin: 0; - } - -} - - -// 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(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - - // 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(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - - .container { - width: @siteWidth; - } - .row { - margin-left: @gridGutterWidth * -1; - } - [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); } - -} -*/
\ No newline at end of file |