Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
337 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
// LARGE DESKTOP & UP | ||
// ------------------ | ||
|
||
@media (min-width: 1200px) { | ||
|
||
// Fixed grid | ||
#grid > .core(70px, 30px); | ||
|
||
// Fluid grid | ||
#grid > .fluid(5.982905983%, 2.564102564%); | ||
|
||
// Input grid | ||
#grid > .input(70px, 30px); | ||
|
||
// Thumbnails | ||
.thumbnails { | ||
margin-left: -30px; | ||
} | ||
.thumbnails > li { | ||
margin-left: 30px; | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,127 @@ | ||
// 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 | ||
.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: 10px; | ||
padding-right: 10px; | ||
} | ||
|
||
// Modals | ||
.modal { | ||
position: absolute; | ||
top: 10px; | ||
left: 10px; | ||
right: 10px; | ||
width: auto; | ||
margin: 0; | ||
&.fade.in { top: auto; } | ||
} | ||
.modal-header .close { | ||
padding: 10px; | ||
margin: -10px; | ||
} | ||
|
||
// Carousel | ||
.carousel-caption { | ||
position: static; | ||
} | ||
|
||
} | ||
|
||
|
||
|
||
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET | ||
// -------------------------------------------------- | ||
|
||
@media (max-width: 767px) { | ||
|
||
// Padding to set content in a bit | ||
body { | ||
padding-left: 20px; | ||
padding-right: 20px; | ||
} | ||
.navbar-fixed-top { | ||
margin-left: -20px; | ||
margin-right: -20px; | ||
} | ||
|
||
// GRID & CONTAINERS | ||
// ----------------- | ||
// Remove width from containers | ||
.container { | ||
width: auto; | ||
} | ||
// Fluid rows | ||
.row-fluid { | ||
width: 100%; | ||
} | ||
// Undo negative margin on rows | ||
.row { | ||
margin-left: 0; | ||
} | ||
// Make all columns even | ||
.row > [class*="span"], | ||
.row-fluid > [class*="span"] { | ||
float: none; | ||
display: block; | ||
width: auto; | ||
margin: 0; | ||
} | ||
|
||
// THUMBNAILS | ||
// ---------- | ||
.thumbnails [class*="span"] { | ||
width: auto; | ||
} | ||
|
||
// FORM FIELDS | ||
// ----------- | ||
// Make span* classes full width | ||
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[class*="span"], | ||
.input-append input[class*="span"] { | ||
width: auto; | ||
} | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
// PORTRAIT TABLET TO DEFAULT DESKTOP | ||
// ---------------------------------- | ||
|
||
@media (min-width: 768px) and (max-width: 979px) { | ||
|
||
// Fixed grid | ||
#grid > .core(42px, 20px); | ||
|
||
// Fluid grid | ||
#grid > .fluid(5.801104972%, 2.762430939%); | ||
|
||
// Input grid | ||
#grid > .input(42px, 20px); | ||
|
||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,131 @@ | ||
// TABLETS AND BELOW | ||
// ----------------- | ||
@media (max-width: 979px) { | ||
|
||
// UNFIX THE TOPBAR | ||
// ---------------- | ||
// Remove any padding from the body | ||
body { | ||
padding-top: 0; | ||
} | ||
// Unfix the navbar | ||
.navbar-fixed-top { | ||
position: static; | ||
margin-bottom: @baseLineHeight; | ||
} | ||
.navbar-fixed-top .navbar-inner { | ||
padding: 5px; | ||
} | ||
.navbar .container { | ||
width: auto; | ||
padding: 0; | ||
} | ||
// Account for brand name | ||
.navbar .brand { | ||
padding-left: 10px; | ||
padding-right: 10px; | ||
margin: 0 0 0 -5px; | ||
} | ||
// Nav collapse clears brand | ||
.navbar .nav-collapse { | ||
clear: left; | ||
} | ||
// Block-level the nav | ||
.navbar .nav { | ||
float: none; | ||
margin: 0 0 (@baseLineHeight / 2); | ||
} | ||
.navbar .nav > li { | ||
float: none; | ||
} | ||
.navbar .nav > li > a { | ||
margin-bottom: 2px; | ||
} | ||
.navbar .nav > .divider-vertical { | ||
display: none; | ||
} | ||
.navbar .nav .nav-header { | ||
color: @navbarText; | ||
text-shadow: none; | ||
} | ||
// Nav and dropdown links in navbar | ||
.navbar .nav > li > a, | ||
.navbar .dropdown-menu a { | ||
padding: 6px 15px; | ||
font-weight: bold; | ||
color: @navbarLinkColor; | ||
.border-radius(3px); | ||
} | ||
.navbar .dropdown-menu li + li a { | ||
margin-bottom: 2px; | ||
} | ||
.navbar .nav > li > a:hover, | ||
.navbar .dropdown-menu a:hover { | ||
background-color: @navbarBackground; | ||
} | ||
// Dropdowns in the navbar | ||
.navbar .dropdown-menu { | ||
position: static; | ||
top: auto; | ||
left: auto; | ||
float: none; | ||
display: block; | ||
max-width: none; | ||
margin: 0 15px; | ||
padding: 0; | ||
background-color: transparent; | ||
border: none; | ||
.border-radius(0); | ||
.box-shadow(none); | ||
} | ||
.navbar .dropdown-menu:before, | ||
.navbar .dropdown-menu:after { | ||
display: none; | ||
} | ||
.navbar .dropdown-menu .divider { | ||
display: none; | ||
} | ||
// Forms in navbar | ||
.navbar-form, | ||
.navbar-search { | ||
float: none; | ||
padding: (@baseLineHeight / 2) 15px; | ||
margin: (@baseLineHeight / 2) 0; | ||
border-top: 1px solid @navbarBackground; | ||
border-bottom: 1px solid @navbarBackground; | ||
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); | ||
.box-shadow(@shadow); | ||
} | ||
// Pull right (secondary) nav content | ||
.navbar .nav.pull-right { | ||
float: none; | ||
margin-left: 0; | ||
} | ||
// Static navbar | ||
.navbar-static .navbar-inner { | ||
padding-left: 10px; | ||
padding-right: 10px; | ||
} | ||
// Navbar button | ||
.btn-navbar { | ||
display: block; | ||
} | ||
|
||
// Hide everything in the navbar save .brand and toggle button */ | ||
.nav-collapse { | ||
overflow: hidden; | ||
height: 0; | ||
} | ||
} | ||
|
||
|
||
// DEFAULT DESKTOP | ||
// --------------- | ||
|
||
// Required to make the collapsing navbar work on regular desktops | ||
@media (min-width: 980px) { | ||
.nav-collapse.collapse { | ||
height: auto !important; | ||
overflow: visible !important; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
// RESPONSIVE CLASSES | ||
// ------------------ | ||
|
||
// Hide from screenreaders and browsers | ||
// Credit: HTML5 Boilerplate | ||
.hidden { | ||
display: none; | ||
visibility: hidden; | ||
} | ||
|
||
// Visibility utilities | ||
|
||
// For desktops | ||
.visible-phone { display: none; } | ||
.visible-tablet { display: none; } | ||
.visible-desktop { display: block; } | ||
.hidden-phone { display: block; } | ||
.hidden-tablet { display: block; } | ||
.hidden-desktop { display: none; } | ||
|
||
// Phones only | ||
@media (max-width: 767px) { | ||
// Show | ||
.visible-phone { display: block; } | ||
// Hide | ||
.hidden-phone { display: none; } | ||
// Hide everything else | ||
.hidden-desktop { display: block; } | ||
.visible-desktop { display: none; } | ||
} | ||
|
||
// Tablets & small desktops only | ||
@media (min-width: 768px) and (max-width: 979px) { | ||
// Show | ||
.visible-tablet { display: block; } | ||
// Hide | ||
.hidden-tablet { display: none; } | ||
// Hide everything else | ||
.hidden-desktop { display: block; } | ||
.visible-desktop { display: none; } | ||
} |