github/bootstrap
1
1
Fork 0
mirror of https://github.com/jasny/bootstrap.git synced 2026-04-24 03:00:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

tweak line-height of h2 and h3 to not be gihugeous, updated responsive to improve tablet grid and phone styles

Browse Source
This commit is contained in:
Mark Otto
2011-10-16 11:35:24 -07:00
parent d1d3807958
commit 6f44a90edb
6 changed files with 113 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
lib/responsive.less
View File

@@ -3,6 +3,9 @@
* ------------------------------------------------------------- */
// UP TO LANDSCAPE PHONE
// ---------------------
@media (max-width: 480px) {
// Remove width from containers
.container {
@@ -14,10 +17,40 @@
float: none;
display: block;
width: auto;
margin: 0;
}
// Resize modals
.modal {
width: auto;
margin: 0;
}
// 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;
}
}
// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET
// --------------------------------------------------
@media (min-width: 480px) and (max-width: 768px) {
// Remove width from containers
.container {
@@ -34,24 +67,23 @@
}
// TABLET TO MEDIUM DESKTOP
// ------------------------
// PORTRAIT TABLET TO DEFAULT DESKTOP
// ----------------------------------
@media (min-width: 768px) and (max-width: 940px) {
// Reset grid variables
@gridColumns: 16;
@gridColumnWidth: 28px;
@gridColumnWidth: 44px;
@gridGutterWidth: 20px;
@siteWidth: 748px;
@extraSpace: (@gridGutterWidth * 2);
// 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)) + @extraSpace;
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
}
// 16cols at 30px wide with 16px gutters
@@ -90,8 +122,8 @@
}
// LARGE DESKTOP
// -------------
// LARGE DESKTOP & UP
// ------------------
@media (min-width: 1170px) {