260 lines
5.6 KiB
Plaintext
260 lines
5.6 KiB
Plaintext
// 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) {
|
|
|
|
// 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(@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;
|
|
}
|
|
.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); }
|
|
|
|
}
|
|
*/ |