From 1cb880b4f112463cbb8ad25ec680e561f978834e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 May 2013 19:55:20 -0700 Subject: Fixes #7816: revert negative margin on .navbar-nav --- less/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 494f43b6f..3cbcbb9c9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -21,7 +21,7 @@ .navbar-nav { // Space out from .navbar .brand and .btn-navbar when stacked in mobile views // and outdent nav links so text lines up with logo. - margin: 10px -15px 0; + margin-top: 10px; > li > a { padding-top: ((@navbar-height - @line-height-base) / 2); -- cgit v1.2.3 From 54561f11212faee93ab682660503c6324d8b2cf8 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 May 2013 19:57:42 -0700 Subject: hide entire navbar in print views --- less/print.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/print.less b/less/print.less index db2749206..ec71acbbd 100644 --- a/less/print.less +++ b/less/print.less @@ -52,7 +52,7 @@ } @page { - margin: 0.5cm; + margin: 2cm .5cm; } p, @@ -68,7 +68,7 @@ } // Bootstrap components - .navbar-toggle { + .navbar { display: none; } } -- cgit v1.2.3 From edb733ebc7db2d76bdac2611cbd83c5ae36f4fee Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 8 May 2013 21:56:08 -0700 Subject: Super massive docs overhaul * Bring back the navbar up top * Pull the docs content back into separate pages because a 6.6k line docs file is just crazy * Recenter the page content and bring back affixed side nav (needs work) --- less/navs.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 8daeb6fd9..649eef92b 100644 --- a/less/navs.less +++ b/less/navs.less @@ -56,7 +56,7 @@ } // Dividers (basically an hr) within the dropdown - .divider { + .nav-divider { .nav-divider(); } } -- cgit v1.2.3 From cc5e6619b49d649632b9d76dfbdbf6329f978b7b Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Thu, 9 May 2013 13:09:33 -0700 Subject: Remove backface-visibility from progress bars. --- less/progress-bars.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/progress-bars.less b/less/progress-bars.less index e5e6b65a5..9df0251e3 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -63,7 +63,6 @@ background-color: @progress-bar-bg; .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15)); .transition(width .6s ease); - .backface-visibility(hidden); } // Striped bars -- cgit v1.2.3 From 4a03d456514a5c352a4ac5ee1eed1f7154b67f6a Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Thu, 9 May 2013 13:48:02 -0700 Subject: Make icons antialiased on Webkit browsers. --- less/glyphicons.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/glyphicons.less b/less/glyphicons.less index e8a96c05f..0d935ea19 100644 --- a/less/glyphicons.less +++ b/less/glyphicons.less @@ -34,6 +34,7 @@ font-style: normal; font-weight: normal; line-height: 1; + -webkit-font-smoothing: antialiased; } // Individual icons -- cgit v1.2.3 From 9716b73f67de690d008cbfc8f1375ee85cd2539d Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Thu, 9 May 2013 14:48:27 -0700 Subject: Make the border-radius on input-groups to be overrides instead of resets on every size. --- less/forms.less | 65 ++++++++++++++------------------------------------------- 1 file changed, 16 insertions(+), 49 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 6162cd4f1..5db5f5cc3 100644 --- a/less/forms.less +++ b/less/forms.less @@ -407,12 +407,8 @@ select:focus:invalid { .input-group-btn, .input-group input { display: table-cell; - /*margin: 0;*/ - border-radius: 0; - &.input-small { - border-radius: 0; - } - &.input-large { + + &:not(:first-child):not(:last-child) { border-radius: 0; } } @@ -435,40 +431,35 @@ select:focus:invalid { text-shadow: 0 1px 0 #fff; background-color: @gray-lighter; border: 1px solid #ccc; + border-radius: @border-radius-base; &.input-small { padding: @padding-small; font-size: @font-size-small; + border-radius: @border-radius-small; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; + &.input-large { + padding: @padding-large; + font-size: @font-size-large; + border-radius: @border-radius-large; } } // Reset rounded corners .input-group input:first-child, -.input-group-addon:first-child { - .border-left-radius(@border-radius-base); - &.input-small { - .border-left-radius(@border-radius-small); - } - &.input-large { - .border-left-radius(@border-radius-large); - } +.input-group-addon:first-child, +.input-group-btn:first-child > .btn:first-child, +.input-group-btn:first-child > .dropdown-toggle:first-child { + .border-right-radius(0); } .input-group-addon:first-child { border-right: 0; } .input-group input:last-child, -.input-group-addon:last-child { - .border-right-radius(@border-radius-base); - &.input-small { - .border-right-radius(@border-radius-small); - } - &.input-large { - .border-right-radius(@border-radius-large); - } +.input-group-addon:last-child, +.input-group-btn:last-child > .btn:last-child, +.input-group-btn:last-child > .dropdown-toggle { + .border-left-radius(0); } .input-group-addon:last-child { border-left: 0; @@ -483,7 +474,6 @@ select:focus:invalid { .input-group-btn > .btn { position: relative; float: left; // Collapse white-space - border-radius: 0; + .btn { margin-left: -1px; } @@ -494,29 +484,6 @@ select:focus:invalid { } } -// Prepended buttons -.input-group-btn:first-child { - // Round the left corners only - > .btn:first-child, - > .dropdown-toggle:first-child { - .border-left-radius(@border-radius-base); - &.btn-large { .border-left-radius(@border-radius-large); } - &.btn-small { .border-left-radius(@border-radius-small); } - } -} - -// Appended buttons -.input-group-btn:last-child { - // Round the right corners only - > .btn:last-child, - > .dropdown-toggle { - .border-right-radius(@border-radius-base); - &.btn-large { .border-right-radius(@border-radius-large); } - &.btn-small { .border-right-radius(@border-radius-small); } - } -} - - // Inline forms // -------------------------------------------------- -- cgit v1.2.3 From 293a3baca36fb8788fb75d331439f143f6762fc1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 15:05:06 -0700 Subject: More forms overhaul * Refactor the .forms-horizontal code--much simpler now and built on the Bootstrap grid system instead * Remove all the margins on form controls for simpler styling everywhere else--was overriding that way too often * Drop .help-inline, but keep .help-block * Drop the unused input grid class overrides --- less/forms.less | 110 +++++++++++++------------------------------------------- 1 file changed, 25 insertions(+), 85 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 6162cd4f1..6b3bff728 100644 --- a/less/forms.less +++ b/less/forms.less @@ -57,7 +57,6 @@ input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; - margin-bottom: 10px; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -172,7 +171,8 @@ textarea { .checkbox { display: block; min-height: @line-height-base; // clear the floating input if there is no label text - margin-bottom: (@line-height-base / 2); + margin-top: 10px; + margin-bottom: 10px; padding-left: 20px; vertical-align: middle; label { @@ -182,7 +182,6 @@ textarea { cursor: pointer; } } - .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], @@ -192,7 +191,7 @@ textarea { } .radio + .radio, .checkbox + .checkbox { - margin-top: ((@line-height-base / 4) * -1); + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } /* @@ -255,33 +254,6 @@ input[type="color"] { } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-left: 0; - margin-right: 0; -} - -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: @input-height-base; -} - - - // DISABLED STATE // -------------- @@ -361,20 +333,11 @@ select:focus:invalid { // HELP TEXT // --------- -.help-block, -.help-inline { - color: lighten(@text-color, 25%); // lighten the text some for contrast -} - .help-block { display: block; // account for any element using help-block - margin-bottom: (@line-height-base / 2); -} - -.help-inline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast } @@ -436,14 +399,14 @@ select:focus:invalid { background-color: @gray-lighter; border: 1px solid #ccc; - &.input-small { - padding: @padding-small; - font-size: @font-size-small; + &.input-small { + padding: @padding-small; + font-size: @font-size-small; + } + &.input-large { + padding: @padding-large; + font-size: @font-size-large; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; - } } // Reset rounded corners @@ -528,6 +491,10 @@ select:focus:invalid { .radio, .checkbox { display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; margin-bottom: 0; } } @@ -535,41 +502,14 @@ select:focus:invalid { // Horizontal forms // -------------------------------------------------- +// Horizontal forms are built on grid classes. -@media screen and (min-width: @screen-tablet) { - - .form-horizontal { - - // Increase spacing between groups - .control-group { - position: relative; - margin-bottom: @line-height-base; - .clearfix(); - - input, - select, - textarea { - margin-bottom: 0; - } - } - - // Float the labels left - .control-group > .control-label { - float: left; - width: (@component-offset-horizontal - 20); - padding-top: 6px; - text-align: right; - } - - // Move over all input controls and content over - .control-group > .controls { - margin-left: @component-offset-horizontal; - } - - // Make sure form actions buttons are aligned with controls - .form-actions { - padding-left: @component-offset-horizontal; - } - +.form-horizontal { + .row + .row { + margin-top: 15px; + } + .row-label { + padding-top: 6px; + text-align: right; } } -- cgit v1.2.3 From 7b6352d2cf6f04b46918b1cc8bad50ff92fdbe07 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 16:41:35 -0700 Subject: Fix up navbar forms by using inline form as a mixin; fix docs for those --- less/navbar.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 3cbcbb9c9..7a02a491b 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -132,6 +132,7 @@ // Navbar form .navbar-form { + .form-inline(); .navbar-vertical-align(34px); // Vertically center in navbar } -- cgit v1.2.3 From 579d566299c82fe91e5202b30ec2b2b062e0d902 Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Thu, 9 May 2013 16:26:35 -0700 Subject: Update button groups to use not selector and remove redundant CSS. --- less/button-groups.less | 66 +++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 38 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 6f9a52acd..bac8c06b4 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -11,17 +11,14 @@ } // Make the div behave like a button -.btn-group { +.btn-group, +.btn-group-vertical { position: relative; display: inline-block; vertical-align: middle; // match .btn alignment given font-size hack above > .btn { position: relative; float: left; - // Prevent double borders when buttons are next to each other - + btn { - margin-left: -1px; - } // Bring the "active" button to the front &:hover, &:active { @@ -30,6 +27,11 @@ } } +// Prevent double borders when buttons are next to each other +.btn-group .btn + .btn { + margin-left: -1px; +} + // Optional: Group multiple button groups together for a toolbar .btn-toolbar { .clearfix(); @@ -46,46 +48,36 @@ } } -// Float them, remove border radius, then re-add to first and last elements -.btn-group > .btn { - position: relative; +.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) { border-radius: 0; } - // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match .btn-group > .btn:first-child { margin-left: 0; - .border-left-radius(@border-radius-base); + &:not(:last-child):not(.dropdown-toggle) { + .border-right-radius(0); + } } // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - .border-right-radius(@border-radius-base); -} -// Reset corners for large buttons -.btn-group > .btn.large:first-child { - margin-left: 0; - .border-left-radius(@border-radius-large); -} -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - .border-right-radius(@border-radius-large); +.btn-group > .btn:last-child:not(:first-child), +.btn-group > .dropdown-toggle:not(:first-child) { + .border-left-radius(0); } // Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) .btn-group > .btn-group { float: left; } -.btn-group > .btn-group > .btn { +.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } -.btn-group > .btn-group:last-child > .btn { - .border-right-radius(@border-radius-base); +.btn-group > .btn-group:first-child > .btn:last-child, +.btn-group > .btn-group:first-child > .dropdown-toggle { + .border-right-radius(0); } -.btn-group > .btn-group:first-child > .btn { - margin-left: 0; - .border-left-radius(@border-radius-base); +.btn-group > .btn-group:last-child > .btn:first-child { + .border-left-radius(0); } // On active and open, don't show outline @@ -143,20 +135,18 @@ float: none; width: 100%; max-width: 100%; + + .btn { + margin-top: -1px; + } +} +.btn-group-vertical .btn:not(:first-child):not(:last-child) { + border-radius: 0; } .btn-group-vertical .btn:first-child { - border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again - .border-top-radius(@border-radius-base); + .border-bottom-radius(0); } .btn-group-vertical .btn:last-child { - border-radius: 0; // Needs to be here for specificity since we're not zeroing them out again - .border-bottom-radius(@border-radius-base); -} -.btn-group-vertical .btn-large:first-child { - .border-top-radius(@border-radius-large); -} -.btn-group-vertical .btn-large:last-child { - .border-bottom-radius(@border-radius-large); + .border-top-radius(0); } -- cgit v1.2.3 From 6fba68eb8b036fad1bc4f33484889cccf2480bff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 17:20:46 -0700 Subject: Unitless line-height * Instead of 20px as @line-height-base, use 1.5 * Update typographic scale for headings to use unitless as well--required some twerking of decimals a bit and some rounding * Introduce new @line-height-computed value, which takes base font-size and multiplies it by 1.5, for use in padding and margin on components --- less/alerts.less | 8 ++++---- less/forms.less | 12 ++++++------ less/navbar.less | 8 ++++---- less/progress-bars.less | 4 ++-- less/type.less | 52 +++++++++++++++++++++++-------------------------- less/variables.less | 10 ++++++---- 6 files changed, 46 insertions(+), 48 deletions(-) (limited to 'less') diff --git a/less/alerts.less b/less/alerts.less index 882b25bef..bb7846249 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -7,8 +7,8 @@ // ------------------------- .alert { - padding: 8px 35px 8px 14px; - margin-bottom: @line-height-base; + padding: 10px 35px 10px 15px; + margin-bottom: @line-height-computed; color: @alert-text; background-color: @alert-bg; border: 1px solid @alert-border; @@ -84,8 +84,8 @@ // ------------------------- .alert-block { - padding-top: 14px; - padding-bottom: 14px; + padding-top: 15px; + padding-bottom: 15px; } .alert-block > p, .alert-block > ul { diff --git a/less/forms.less b/less/forms.less index 6b3bff728..4a99a7793 100644 --- a/less/forms.less +++ b/less/forms.less @@ -20,9 +20,9 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: (@line-height-base * 2); + line-height: @line-height-headings; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -170,7 +170,7 @@ textarea { .radio, .checkbox { display: block; - min-height: @line-height-base; // clear the floating input if there is no label text + min-height: @line-height-computed; // clear the floating input if there is no label text margin-top: 10px; margin-bottom: 10px; padding-left: 20px; @@ -320,9 +320,9 @@ select:focus:invalid { // ------------ .form-actions { - padding: (@line-height-base - 1) 20px @line-height-base; - margin-top: @line-height-base; - margin-bottom: @line-height-base; + padding: @line-height-computed 20px; + margin-top: @line-height-computed; + margin-bottom: @line-height-computed; background-color: @form-actions-bg; border-top: 1px solid #e5e5e5; .clearfix(); // Adding clearfix to allow for .pull-right button containers diff --git a/less/navbar.less b/less/navbar.less index 7a02a491b..975f2ebb2 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -24,8 +24,8 @@ margin-top: 10px; > li > a { - padding-top: ((@navbar-height - @line-height-base) / 2); - padding-bottom: ((@navbar-height - @line-height-base) / 2); + padding-top: ((@navbar-height - @line-height-computed) / 2); + padding-bottom: ((@navbar-height - @line-height-computed) / 2); color: @navbar-link-color; line-height: 20px; } @@ -91,7 +91,7 @@ padding: 15px; font-size: @font-size-large; font-weight: 500; - line-height: @line-height-base; + line-height: @line-height-computed; color: @navbar-brand-color; text-align: center; &:hover, @@ -323,7 +323,7 @@ // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { - + .navbar-vertical-align(@line-height-computed); } diff --git a/less/progress-bars.less b/less/progress-bars.less index 9df0251e3..e963fa968 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -44,8 +44,8 @@ // Outer container .progress { overflow: hidden; - height: @line-height-base; - margin-bottom: @line-height-base; + height: @line-height-computed; + margin-bottom: @line-height-computed; background-color: @progress-bg; border-radius: @border-radius-base; .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); diff --git a/less/type.less b/less/type.less index f6b5eecd5..e562bb2c2 100644 --- a/less/type.less +++ b/less/type.less @@ -7,10 +7,10 @@ // ------------------------- p { - margin: 0 0 (@line-height-base / 2); + margin: 0 0 (@line-height-computed / 2); } .lead { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); font-weight: 200; line-height: 1.4; @@ -56,7 +56,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: @headings-font-family; font-weight: @headings-font-weight; - line-height: @line-height-base; + line-height: @line-height-headings; small { font-weight: normal; line-height: 1; @@ -67,30 +67,26 @@ h1, h2, h3, h4, h5, h6, h1, h2, h3 { - margin-top: @line-height-base; - margin-bottom: (@line-height-base / 2); - line-height: (@line-height-base * 2); -} -h3 { - line-height: (@line-height-base * 1.5); + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); } h4, h5, h6 { - margin-top: (@line-height-base / 2); - margin-bottom: (@line-height-base / 2); + margin-top: (@line-height-computed / 2); + margin-bottom: (@line-height-computed / 2); } -h1, .h1 { font-size: (@font-size-base * 2.75); } // ~38px -h2, .h2 { font-size: (@font-size-base * 2.25); } // ~32px -h3, .h3 { font-size: (@font-size-base * 1.75); } // ~24px -h4, .h4 { font-size: (@font-size-base * 1.25); } // ~18px +h1, .h1 { font-size: ceil(@font-size-base * 2.70); } // ~38px +h2, .h2 { font-size: ceil(@font-size-base * 2.25); } // ~32px +h3, .h3 { font-size: ceil(@font-size-base * 1.70); } // ~24px +h4, .h4 { font-size: ceil(@font-size-base * 1.25); } // ~18px h5, .h5 { font-size: @font-size-base; } -h6, .h6 { font-size: (@font-size-base * 0.85); } // ~12px +h6, .h6 { font-size: ceil(@font-size-base * 0.85); } // ~12px -h1 small, .h1 small { font-size: (@font-size-base * 1.75); } // ~24px -h2 small, .h2 small { font-size: (@font-size-base * 1.25); } // ~18px -h3 small, .h3 small { font-size: @font-size-base; } +h1 small, .h1 small { font-size: ceil(@font-size-base * 1.70); } // ~24px +h2 small, .h2 small { font-size: ceil(@font-size-base * 1.25); } // ~18px +h3 small, .h3 small, h4 small, .h4 small { font-size: @font-size-base; } @@ -98,8 +94,8 @@ h4 small, .h4 small { font-size: @font-size-base; } // ------------------------- .page-header { - padding-bottom: ((@line-height-base / 2) - 1); - margin: (@line-height-base * 2) 0 @line-height-base; + padding-bottom: ((@line-height-computed / 2) - 1); + margin: (@line-height-computed * 2) 0 @line-height-computed; border-bottom: 1px solid @gray-lighter; } @@ -112,7 +108,7 @@ h4 small, .h4 small { font-size: @font-size-base; } ul, ol { padding: 0; - margin: 0 0 (@line-height-base / 2) 25px; + margin: 0 0 (@line-height-computed / 2) 25px; } ul ul, ul ol, @@ -143,7 +139,7 @@ li { // Description Lists dl { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; } dt, dd { @@ -153,7 +149,7 @@ dt { font-weight: bold; } dd { - margin-left: (@line-height-base / 2); + margin-left: (@line-height-computed / 2); } // Horizontal layout (like forms) .dl-horizontal { @@ -175,7 +171,7 @@ dd { // Horizontal rules hr { - margin: @line-height-base 0; + margin: @line-height-computed 0; border: 0; border-top: 1px solid @hr-border; border-bottom: 1px solid #fff; @@ -196,8 +192,8 @@ abbr.initialism { // Blockquotes blockquote { - padding: (@line-height-base/2) @line-height-base; - margin: 0 0 @line-height-base; + padding: (@line-height-computed / 2) @line-height-computed; + margin: 0 0 @line-height-computed; border-left: 5px solid @gray-lighter; p { font-size: (@font-size-base * 1.25); @@ -249,7 +245,7 @@ blockquote:after { // Addresses address { display: block; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; font-style: normal; line-height: @line-height-base; } diff --git a/less/variables.less b/less/variables.less index fd69c2438..c8ddb0c9e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -50,7 +50,9 @@ @font-size-small: (@font-size-base * 0.85); // ~12px @font-size-mini: (@font-size-base * 0.75); // ~11px -@line-height-base: 20px; +@line-height-base: 1.5; +@line-height-computed: (@font-size-base * @line-height-base); +@line-height-headings: 1.1; @headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: 500; @@ -121,9 +123,9 @@ @input-color-placeholder: @gray-light; -@input-height-base: (@line-height-base + 14px); // base line-height + 12px vertical padding + 2px top/bottom border -@input-height-large: (@line-height-base + 24px); // base line-height + 22px vertical padding + 2px top/bottom border -@input-height-small: (@line-height-base + 6px); // base line-height + 4px vertical padding + 2px top/bottom border +@input-height-base: (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border +@input-height-large: (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border +@input-height-small: (@line-height-computed + 6px); // base line-height + 4px vertical padding + 2px top/bottom border @form-actions-bg: #f5f5f5; -- cgit v1.2.3 From dbbd48f7bcc476d7e7f4780d6b342f1bce581ff0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 17:29:07 -0700 Subject: remove duplicate text scaling --- less/scaffolding.less | 8 -------- 1 file changed, 8 deletions(-) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index 6781a9582..8c6a5af6c 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -21,14 +21,6 @@ html { -webkit-tap-highlight-color: rgba(0,0,0,0); } -// Disable iOS/WinMobile font size changes -@media screen and (max-device-width: @screen-phone) { - html { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - } -} - body { font-family: @font-family-base; font-size: @font-size-base; -- cgit v1.2.3 From 94cc3335536507124451de1c9ec673f7dfcb5c2a Mon Sep 17 00:00:00 2001 From: Aaron Date: Fri, 10 May 2013 09:21:27 -0600 Subject: Fix component margin and padding values to use @line-height-computed --- less/accordion.less | 2 +- less/breadcrumbs.less | 2 +- less/code.less | 6 +++--- less/mixins.less | 2 +- less/pager.less | 2 +- less/pagination.less | 2 +- less/tables.less | 2 +- 7 files changed, 9 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/accordion.less b/less/accordion.less index 064377d05..59765f154 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -5,7 +5,7 @@ // Parent container .accordion { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; } // Group == heading + body diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 87a6f0e37..2fe8217a3 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -5,7 +5,7 @@ .breadcrumb { padding: 8px 15px; - margin: 0 0 @line-height-base; + margin: 0 0 @line-height-computed; list-style: none; background-color: #f5f5f5; border-radius: @border-radius-base; diff --git a/less/code.less b/less/code.less index d9ddbc3a4..f1bc0a0cd 100644 --- a/less/code.less +++ b/less/code.less @@ -25,8 +25,8 @@ code { // Blocks of code pre { display: block; - padding: ((@line-height-base - 1) / 2); - margin: 0 0 (@line-height-base / 2); + padding: ((@line-height-computed - 1) / 2); + margin: 0 0 (@line-height-computed / 2); font-size: (@font-size-base - 1); // 14px to 13px line-height: @line-height-base; word-break: break-all; @@ -40,7 +40,7 @@ pre { // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; } // Account for some code outputs that place code tags in pre tags diff --git a/less/mixins.less b/less/mixins.less index 48e2073c5..dc46be904 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -340,7 +340,7 @@ // Dividers (basically an hr) within dropdowns and nav lists .nav-divider(@top: #e5e5e5, @bottom: #fff) { height: 2px; // 1px for background, one for border - margin: ((@line-height-base / 2) - 1) 0; + margin: ((@line-height-computed / 2) - 1) 0; overflow: hidden; background-color: @top; border-bottom: 1px solid @bottom; diff --git a/less/pager.less b/less/pager.less index cc1947a91..0b2fcf7cb 100644 --- a/less/pager.less +++ b/less/pager.less @@ -4,7 +4,7 @@ .pager { - margin: @line-height-base 0; + margin: @line-height-computed 0; list-style: none; text-align: center; .clearfix(); diff --git a/less/pagination.less b/less/pagination.less index bb44fa8cf..ec1eef27f 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -3,7 +3,7 @@ // -------------------------------------------------- .pagination { display: inline-block; - margin: @line-height-base 0; + margin: @line-height-computed 0; border-radius: @border-radius-base; } .pagination > li { diff --git a/less/tables.less b/less/tables.less index 5c8fe82ad..fa5fd554b 100644 --- a/less/tables.less +++ b/less/tables.less @@ -17,7 +17,7 @@ th { .table { width: 100%; - margin-bottom: @line-height-base; + margin-bottom: @line-height-computed; // Cells thead > tr > th, tbody > tr > th, -- cgit v1.2.3 From 76ecfdfdc1ef06997eafdeef68d7a9a945614af3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 10 May 2013 10:33:35 -0700 Subject: Font-size and line-height tweaks * Use 1.428 for line-height instead of 1.5 * Use function for full pixel values instead of decimals --- less/mixins.less | 3 --- less/variables.less | 10 +++++----- 2 files changed, 5 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index dc46be904..dcba39f85 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -444,9 +444,6 @@ } } - - - // Small grid columns .generate-grid-columns(@grid-columns) { diff --git a/less/variables.less b/less/variables.less index c8ddb0c9e..cb07c8307 100644 --- a/less/variables.less +++ b/less/variables.less @@ -46,12 +46,12 @@ @font-family-base: @font-family-sans-serif; @font-size-base: 14px; -@font-size-large: (@font-size-base * 1.25); // ~18px -@font-size-small: (@font-size-base * 0.85); // ~12px -@font-size-mini: (@font-size-base * 0.75); // ~11px +@font-size-large: ceil(@font-size-base * 1.25); // ~18px +@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@font-size-mini: ceil(@font-size-base * 0.75); // ~11px -@line-height-base: 1.5; -@line-height-computed: (@font-size-base * @line-height-base); +@line-height-base: 1.428; // 20/14 +@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px @line-height-headings: 1.1; @headings-font-family: inherit; // empty to use BS default, @font-family-base -- cgit v1.2.3 From 5e13f578706fd7339e8a5bc1e1c10370410ef765 Mon Sep 17 00:00:00 2001 From: Vinay Raghu Date: Sat, 11 May 2013 19:28:59 +0530 Subject: Changed Screen Notations on responsive-utilities.less and recompiled the stylesheet --- less/responsive-utilities.less | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'less') diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index c69851bb9..71a158846 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -36,35 +36,35 @@ // Visibility utilities // For Phones -.visible-phone { display: inherit !important; } -.visible-tablet { display: none !important; } -.visible-desktop { display: none !important; } +.visible-sm { display: inherit !important; } +.visible-md { display: none !important; } +.visible-lg { display: none !important; } -.hidden-phone { display: none !important; } -.hidden-tablet { display: inherit !important; } -.hidden-desktop { display: inherit !important; } +.hidden-sm { display: none !important; } +.hidden-md { display: inherit !important; } +.hidden-lg { display: inherit !important; } // Tablets & small desktops only @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-phone { display: none !important; } - .visible-tablet { display: inherit !important; } - .visible-desktop { display: none !important; } + .visible-sm { display: none !important; } + .visible-md { display: inherit !important; } + .visible-lg { display: none !important; } - .hidden-phone { display: inherit !important; } - .hidden-tablet { display: none !important; } - .hidden-desktop { display: inherit !important; } + .hidden-sm { display: inherit !important; } + .hidden-md { display: none !important; } + .hidden-lg { display: inherit !important; } } // For desktops @media (min-width: @screen-desktop) { - .visible-phone { display: none !important; } - .visible-tablet { display: none !important; } - .visible-desktop { display: inherit !important; } + .visible-sm { display: none !important; } + .visible-md { display: none !important; } + .visible-lg { display: inherit !important; } - .hidden-phone { display: inherit !important; } - .hidden-tablet { display: inherit !important; } - .hidden-desktop { display: none !important; } + .hidden-sm { display: inherit !important; } + .hidden-md { display: inherit !important; } + .hidden-lg { display: none !important; } } // Print utilities -- cgit v1.2.3 From 60c24ddd976f24ac773c27d091a5a2559f54d2b0 Mon Sep 17 00:00:00 2001 From: Blake Embrey Date: Sat, 11 May 2013 09:38:48 -0700 Subject: Fix the selectors for the .input-group-btn selector. --- less/forms.less | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index cc69e935f..173520000 100644 --- a/less/forms.less +++ b/less/forms.less @@ -410,8 +410,9 @@ select:focus:invalid { // Reset rounded corners .input-group input:first-child, .input-group-addon:first-child, -.input-group-btn:first-child > .btn:first-child, -.input-group-btn:first-child > .dropdown-toggle:first-child { +.input-group-btn:first-child > .btn, +.input-group-btn:first-child > .dropdown-toggle, +.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) { .border-right-radius(0); } .input-group-addon:first-child { @@ -419,8 +420,9 @@ select:focus:invalid { } .input-group input:last-child, .input-group-addon:last-child, -.input-group-btn:last-child > .btn:last-child, -.input-group-btn:last-child > .dropdown-toggle { +.input-group-btn:last-child > .btn, +.input-group-btn:last-child > .dropdown-toggle, +.input-group-btn:first-child > .btn:not(:first-child) { .border-left-radius(0); } .input-group-addon:last-child { -- cgit v1.2.3 From 3b6b9b3fa6eea8e783d23c371cad8c54d711c940 Mon Sep 17 00:00:00 2001 From: Vinay Raghu Date: Sun, 12 May 2013 12:25:47 +0530 Subject: Timestamp correction --- less/bootstrap.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index c73c85c38..162559cab 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -1,4 +1,4 @@ -/*! + /*! * Bootstrap v3.0.0 * * Copyright 2013 Twitter, Inc -- cgit v1.2.3 From ca5685c1f8152acbde91d68e68dc4051aaa6fdb4 Mon Sep 17 00:00:00 2001 From: Vinay Raghu Date: Sun, 12 May 2013 12:25:56 +0530 Subject: Timestamp correction 2 --- less/bootstrap.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/bootstrap.less b/less/bootstrap.less index 162559cab..c73c85c38 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -1,4 +1,4 @@ - /*! +/*! * Bootstrap v3.0.0 * * Copyright 2013 Twitter, Inc -- cgit v1.2.3 From 92adcfabb58cc5a8ce41c34bec0ec36a642e5610 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 May 2013 15:47:18 -0700 Subject: Start some nav and dropdown cleanup * Remove border-radii on top of tab dropdown menus * Remove the .dropdown and .dropup styles and instead place on all * Use on dropdown carets intead of separately applying margin with a top alignment * Some other misc cleanup --- less/dropdowns.less | 19 ++++--------------- less/navs.less | 14 +++++++++++++- 2 files changed, 17 insertions(+), 16 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index c4fd8598b..45242fb68 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -2,14 +2,8 @@ // Dropdown menus // -------------------------------------------------- - -// Use the .menu class on any
  • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropup, -.dropdown { - position: relative; -} -.dropdown-toggle:active, -.open .dropdown-toggle { +// Remove the outline when :focus is triggered +.open > a { outline: 0; } @@ -19,19 +13,14 @@ display: inline-block; width: 0; height: 0; - vertical-align: top; + margin-left: 2px; + vertical-align: middle; border-top: 4px solid #000; border-right: 4px solid transparent; border-left: 4px solid transparent; content: ""; } -// Place the caret -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - // The dropdown menu (ul) // ---------------------- .dropdown-menu { diff --git a/less/navs.less b/less/navs.less index 649eef92b..7e8bcf87c 100644 --- a/less/navs.less +++ b/less/navs.less @@ -12,8 +12,11 @@ padding-left: 0; // Override default ul/ol list-style: none; .clearfix(); + > li { + position: relative; display: block; + > a { position: relative; display: block; @@ -44,7 +47,7 @@ cursor: default; } // Space the headers out when they follow another list item (link) - &+ .nav-header { + + .nav-header { margin-top: 9px; } } @@ -215,6 +218,15 @@ +// Dropdowns +// ------------------------- + +.nav-tabs .dropdown-menu { + // Remove the top rounded corners here since there is a hard edge above the menu + .border-top-radius(0); +} + + /* // Prevent IE8 from misplacing imgs // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 -- cgit v1.2.3 From 2d10d61fded8246673a5c7c14f955a80bc61a866 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 May 2013 16:03:56 -0700 Subject: Restore commented out dropdown styles, get open dropdown state working again --- less/dropdowns.less | 12 +++++---- less/navs.less | 76 +++++++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 75 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 45242fb68..1b9165b4e 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -2,10 +2,6 @@ // Dropdown menus // -------------------------------------------------- -// Remove the outline when :focus is triggered -.open > a { - outline: 0; -} // Dropdown arrow/caret // -------------------- @@ -107,9 +103,15 @@ // Open state for the dropdown // --------------------------- .open { - & > .dropdown-menu { + // Show the menu + > .dropdown-menu { display: block; } + + // Remove the outline when :focus is triggered + > a { + outline: 0; + } } // Right aligned dropdowns diff --git a/less/navs.less b/less/navs.less index 7e8bcf87c..5496778e5 100644 --- a/less/navs.less +++ b/less/navs.less @@ -28,17 +28,10 @@ } } - // Nav states and addons - // -------------------------------------------------- - - // Disabled state - // ------------------------- - - // Gray out text + // Disabled state sets text to gray and nukes hover/tab effects &.disabled > a { color: @gray-light; } - // Nuke hover effects &.disabled > a:hover, &.disabled > a:focus { color: @gray-light; @@ -46,10 +39,19 @@ background-color: transparent; cursor: default; } + // Space the headers out when they follow another list item (link) + .nav-header { margin-top: 9px; } + + // Open dropdowns + &.open > a, + &.open > a:hover, + &.open > a:focus { + background-color: @link-color; + border-color: @link-color; + } } // Redeclare pull classes because of specifity @@ -222,11 +224,69 @@ // ------------------------- .nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; // Remove the top rounded corners here since there is a hard edge above the menu .border-top-radius(0); } + + + + + // Make dropdown carets use link color in navs + .nav .caret { + border-top-color: @link-color; + border-bottom-color: @link-color; + } + .nav a:hover .caret { + border-top-color: @link-hover-color; + border-bottom-color: @link-hover-color; + } + + + +// Active dropdown links +// ------------------------- +.nav .active .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} +.nav-tabs .active .caret { + border-top-color: @gray; + border-bottom-color: @gray; +} + +// Active:hover dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover { + cursor: pointer; +} + +// Open dropdowns +// ------------------------- +.nav-tabs .open > a, +.nav-pills .open > a, +.nav > li.dropdown.open.active > a:hover { + color: #fff; + background-color: @gray-light; + border-color: @gray-light; +} +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open > a:hover .caret { + border-top-color: #fff; + border-bottom-color: #fff; + .opacity(1); +} + +// Dropdowns in stacked tabs +.tabs-stacked .open > a:hover { + border-color: @gray-light; +} + + /* // Prevent IE8 from misplacing imgs // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 -- cgit v1.2.3 From 37c1122ded5f13737729e668bbe61cf1c271d8e2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 May 2013 16:12:13 -0700 Subject: Consolidate active dropdown toggle styles and comment out the rest --- less/navs.less | 120 ++++++++++++++++----------------------------------------- 1 file changed, 33 insertions(+), 87 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 5496778e5..2ea9a925d 100644 --- a/less/navs.less +++ b/less/navs.less @@ -49,8 +49,13 @@ &.open > a, &.open > a:hover, &.open > a:focus { + color: #fff; background-color: @link-color; border-color: @link-color; + .caret { + border-top-color: #fff; + border-bottom-color: #fff; + } } } @@ -223,119 +228,62 @@ // Dropdowns // ------------------------- -.nav-tabs .dropdown-menu { - // make dropdown border overlap tab border - margin-top: -1px; - // Remove the top rounded corners here since there is a hard edge above the menu - .border-top-radius(0); +// Make dropdown carets use link color in navs +.nav .caret { + border-top-color: @link-color; + border-bottom-color: @link-color; +} +.nav a:hover .caret { + border-top-color: @link-hover-color; + border-bottom-color: @link-hover-color; } - - - - - - // Make dropdown carets use link color in navs - .nav .caret { - border-top-color: @link-color; - border-bottom-color: @link-color; - } - .nav a:hover .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; - } - - - -// Active dropdown links -// ------------------------- -.nav .active .caret { +/*.nav .active .caret { border-top-color: #fff; border-bottom-color: #fff; } .nav-tabs .active .caret { border-top-color: @gray; border-bottom-color: @gray; -} - -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open > a, -.nav-pills .open > a, -.nav > li.dropdown.open.active > a:hover { - color: #fff; - background-color: @gray-light; - border-color: @gray-light; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open > a:hover .caret { - border-top-color: #fff; - border-bottom-color: #fff; - .opacity(1); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: @gray-light; -} - - -/* -// Prevent IE8 from misplacing imgs -// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 -.nav > li > a > img { - max-width: none; -} +}*/ -// Dropdowns -// ------------------------- +// Specific dropdowns .nav-tabs .dropdown-menu { + // make dropdown border overlap tab border + margin-top: -1px; // Remove the top rounded corners here since there is a hard edge above the menu .border-top-radius(0); } -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: @link-color; - border-bottom-color: @link-color; - margin-top: 8px; -} -.nav .dropdown-toggle:hover .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; -} + + +/* // Active dropdown links // ------------------------- -.nav .active .dropdown-toggle .caret { +.nav .active .caret { border-top-color: #fff; border-bottom-color: #fff; } -.nav-tabs .active .dropdown-toggle .caret { +.nav-tabs .active .caret { border-top-color: @gray; border-bottom-color: @gray; } +*/ +/* // Active:hover dropdown links // ------------------------- .nav > .dropdown.active > a:hover { cursor: pointer; } +*/ -// Open dropdowns +/*// Open dropdowns // ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, +.nav > .open > a, +.nav-pills .open > a, .nav > li.dropdown.open.active > a:hover { color: #fff; background-color: @gray-light; @@ -343,15 +291,13 @@ } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret { +.nav li.dropdown.open > a:hover .caret { border-top-color: #fff; border-bottom-color: #fff; .opacity(1); -} +}*/ -// Dropdowns in stacked tabs +/*// Dropdowns in stacked tabs .tabs-stacked .open > a:hover { border-color: @gray-light; -} - -*/ +}*/ -- cgit v1.2.3 From da4e7ab15c050314cfa5eea6d4853898757d182a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 May 2013 16:13:39 -0700 Subject: fix broke example --- less/navs.less | 56 -------------------------------------------------------- 1 file changed, 56 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 2ea9a925d..66fa341e4 100644 --- a/less/navs.less +++ b/less/navs.less @@ -238,16 +238,6 @@ border-bottom-color: @link-hover-color; } -/*.nav .active .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .caret { - border-top-color: @gray; - border-bottom-color: @gray; -}*/ - - // Specific dropdowns .nav-tabs .dropdown-menu { // make dropdown border overlap tab border @@ -255,49 +245,3 @@ // Remove the top rounded corners here since there is a hard edge above the menu .border-top-radius(0); } - - - -/* - -// Active dropdown links -// ------------------------- -.nav .active .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} -*/ - -/* -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - cursor: pointer; -} -*/ - -/*// Open dropdowns -// ------------------------- -.nav > .open > a, -.nav-pills .open > a, -.nav > li.dropdown.open.active > a:hover { - color: #fff; - background-color: @gray-light; - border-color: @gray-light; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open > a:hover .caret { - border-top-color: #fff; - border-bottom-color: #fff; - .opacity(1); -}*/ - -/*// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: @gray-light; -}*/ -- cgit v1.2.3 From 41a76e8e7ade28a8ac65b6948bddf1cd702f9579 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 May 2013 16:30:54 -0700 Subject: Less specific dropdown styles, change up navbar dropdown styles --- less/navbar.less | 34 +++++++++++++++++----------------- less/navs.less | 22 +++++++++++----------- 2 files changed, 28 insertions(+), 28 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 975f2ebb2..86768962d 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -153,26 +153,26 @@ // Dropdown menu items and carets .navbar-nav { // Caret should match text color on hover - li.dropdown > a:hover .caret, - li.dropdown > a:focus .caret { + > .dropdown > a:hover .caret, + > .dropdown > a:focus .caret { border-top-color: @navbar-link-hover-color; border-bottom-color: @navbar-link-hover-color; } // Remove background color from open dropdown - li.dropdown.open > .dropdown-toggle, - li.dropdown.active > .dropdown-toggle, - li.dropdown.open.active > .dropdown-toggle { + > .open > a, + > .open > a:hover, + > .open > a:focus { background-color: @navbar-link-active-bg; color: @navbar-link-active-color; } - li.dropdown > .dropdown-toggle .caret { + > .dropdown > a .caret { border-top-color: @navbar-link-color; border-bottom-color: @navbar-link-color; } - li.dropdown.open > .dropdown-toggle .caret, - li.dropdown.active > .dropdown-toggle .caret, - li.dropdown.open.active > .dropdown-toggle .caret { + > .open > a .caret, + > .open > a:hover .caret, + > .open > a:focus .caret { border-top-color: @navbar-link-active-color; border-bottom-color: @navbar-link-active-color; } @@ -243,23 +243,23 @@ // Dropdowns .navbar-nav { - li.dropdown.open > .dropdown-toggle, - li.dropdown.active > .dropdown-toggle, - li.dropdown.open.active > .dropdown-toggle { + > .open > a, + > .open > a:hover, + > .open > a:focus { background-color: @navbar-inverse-link-active-bg; color: @navbar-inverse-link-active-color; } - li.dropdown > a:hover .caret { + > .dropdown > a:hover .caret { border-top-color: @navbar-inverse-link-hover-color; border-bottom-color: @navbar-inverse-link-hover-color; } - li.dropdown > .dropdown-toggle .caret { + > .dropdown > a .caret { border-top-color: @navbar-inverse-link-color; border-bottom-color: @navbar-inverse-link-color; } - li.dropdown.open > .dropdown-toggle .caret, - li.dropdown.active > .dropdown-toggle .caret, - li.dropdown.open.active > .dropdown-toggle .caret { + > .open > a .caret, + > .open > a:hover .caret, + > .open > a:focus .caret { border-top-color: @navbar-inverse-link-active-color; border-bottom-color: @navbar-inverse-link-active-color; } diff --git a/less/navs.less b/less/navs.less index 66fa341e4..e5925bf63 100644 --- a/less/navs.less +++ b/less/navs.less @@ -44,18 +44,18 @@ + .nav-header { margin-top: 9px; } + } - // Open dropdowns - &.open > a, - &.open > a:hover, - &.open > a:focus { - color: #fff; - background-color: @link-color; - border-color: @link-color; - .caret { - border-top-color: #fff; - border-bottom-color: #fff; - } + // Open dropdowns + &.open > a, + &.open > a:hover, + &.open > a:focus { + color: #fff; + background-color: @link-color; + border-color: @link-color; + .caret { + border-top-color: #fff; + border-bottom-color: #fff; } } -- cgit v1.2.3 From dd7bb71554ad2ba33b483ed187aed0930e7788ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 12 May 2013 21:00:37 -0700 Subject: spacing --- less/responsive-utilities.less | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'less') diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 71a158846..09a0955f8 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -36,40 +36,40 @@ // Visibility utilities // For Phones -.visible-sm { display: inherit !important; } -.visible-md { display: none !important; } +.visible-sm { display: inherit !important; } +.visible-md { display: none !important; } .visible-lg { display: none !important; } -.hidden-sm { display: none !important; } -.hidden-md { display: inherit !important; } +.hidden-sm { display: none !important; } +.hidden-md { display: inherit !important; } .hidden-lg { display: inherit !important; } // Tablets & small desktops only @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-sm { display: none !important; } - .visible-md { display: inherit !important; } + .visible-sm { display: none !important; } + .visible-md { display: inherit !important; } .visible-lg { display: none !important; } - .hidden-sm { display: inherit !important; } - .hidden-md { display: none !important; } + .hidden-sm { display: inherit !important; } + .hidden-md { display: none !important; } .hidden-lg { display: inherit !important; } } // For desktops @media (min-width: @screen-desktop) { - .visible-sm { display: none !important; } - .visible-md { display: none !important; } + .visible-sm { display: none !important; } + .visible-md { display: none !important; } .visible-lg { display: inherit !important; } - .hidden-sm { display: inherit !important; } - .hidden-md { display: inherit !important; } + .hidden-sm { display: inherit !important; } + .hidden-md { display: inherit !important; } .hidden-lg { display: none !important; } } // Print utilities -.visible-print { display: none !important; } -.hidden-print { } +.visible-print { display: none !important; } +.hidden-print { } @media print { .visible-print { display: inherit !important; } -- cgit v1.2.3 From a38a3429fc132cbf3925a057db8b331db57aae87 Mon Sep 17 00:00:00 2001 From: Robert Burns Date: Mon, 13 May 2013 20:01:59 -0400 Subject: Fix caret position --- less/button-groups.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index bac8c06b4..f7934a328 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -114,7 +114,6 @@ // Reposition the caret .btn .caret { - margin-top: 8px; margin-left: 0; } // Carets in other button sizes -- cgit v1.2.3 From 1d8ff36afa73ac086004962ec2f3d02148f8a201 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 18:55:37 -0700 Subject: Add .panel-footer --- less/panels.less | 10 ++++++++++ less/variables.less | 1 + 2 files changed, 11 insertions(+) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index 0d5a07ad4..a08febef3 100644 --- a/less/panels.less +++ b/less/panels.less @@ -25,6 +25,16 @@ border-top-right-radius: (@panel-border-radius - 1); } +// Optional footer (stays gray in every modifier class) +.panel-footer { + margin: 15px -15px -15px; + padding: 10px 15px; + background-color: @panel-footer-bg; + border-top: 1px solid @panel-border; + border-bottom-left-radius: (@panel-border-radius - 1); + border-bottom-right-radius: (@panel-border-radius - 1); +} + // Contextual variations .panel-primary { border-color: @panel-primary-border; diff --git a/less/variables.less b/less/variables.less index cb07c8307..4feb9879a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -331,6 +331,7 @@ @panel-border: #ddd; @panel-border-radius: @border-radius-base; @panel-heading-bg: #f5f5f5; +@panel-footer-bg: #f5f5f5; @panel-primary-text: #fff; @panel-primary-border: @brand-primary; -- cgit v1.2.3 From e23f661f3fc66f83cb976f8a3b7e2c627af9162d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 18:59:13 -0700 Subject: Fixes #7885 and #7886: only right align horizontal form labels when above 768px --- less/forms.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 173520000..dacc4bb50 100644 --- a/less/forms.less +++ b/less/forms.less @@ -478,6 +478,12 @@ select:focus:invalid { } .row-label { padding-top: 6px; + } +} + +// Only right aline form labels here when the columns stop stacking +@media (min-width: 768px) { + .form-horizontal .row-label { text-align: right; } } -- cgit v1.2.3 From a41d566d5e38dd3227a0f5921f7be92969ff63f1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 22:08:56 -0700 Subject: margin on bottom of navbar nav by default, also round links in mobile views (unround in desktop) --- less/navbar.less | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 86768962d..13a36781e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -22,12 +22,14 @@ // Space out from .navbar .brand and .btn-navbar when stacked in mobile views // and outdent nav links so text lines up with logo. margin-top: 10px; + margin-bottom: 15px; > li > a { padding-top: ((@navbar-height - @line-height-computed) / 2); padding-bottom: ((@navbar-height - @line-height-computed) / 2); color: @navbar-link-color; line-height: 20px; + border-radius: @border-radius-base; } > li > a:hover, > li > a:focus { @@ -281,10 +283,15 @@ } .navbar .nav { float: left; - margin-top: 0; // undo top margin to make nav extend full height of navbar + // undo margin to make nav extend full height of navbar + margin-top: 0; + margin-bottom: 0; > li { float: left; + > a { + border-radius: 0; + } } &.pull-right { -- cgit v1.2.3 From 28a081cb20d4e9544967e7c6d5ab31ff4ad68862 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 14 May 2013 23:21:30 -0700 Subject: Overhaul form control and button sizing, and some type styles * New padding approach with separate horizontal and vertical padding variables * Improved sizing in large and small buttons and form controls * Dropped the `.btn-mini` (since we have no `.input-mini` to match, and holy fuck those were small buttons) * Dropped the `.pagination-mini` as well because once again, to hell with such small components * Changed `@line-height-headings` to `@headings-line-height` * Removed the `@headings-font-family` because it was honestly kind of useless --- less/buttons.less | 12 ++++-------- less/forms.less | 15 ++++++++------- less/pagination.less | 27 +++++++-------------------- less/type.less | 3 +-- less/variables.less | 34 +++++++++++++++++++--------------- 5 files changed, 39 insertions(+), 52 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 128971a4c..6280d3448 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -9,7 +9,7 @@ // Core styles .btn { display: inline-block; - padding: 6px 12px; + padding: @padding-base-vertical @padding-base-horizontal; margin-bottom: 0; // For input.btn font-size: @font-size-base; font-weight: 500; @@ -123,18 +123,14 @@ fieldset[disabled] .btn-link { // -------------------------------------------------- .btn-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } .btn-small { - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - border-radius: @border-radius-small; -} -.btn-mini { - padding: @padding-mini; - font-size: @font-size-mini; + line-height: 1.5; // ensure proper height of button next to small input border-radius: @border-radius-small; } diff --git a/less/forms.less b/less/forms.less index dacc4bb50..c7b376cda 100644 --- a/less/forms.less +++ b/less/forms.less @@ -22,7 +22,7 @@ legend { padding: 0; margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); - line-height: @line-height-headings; + line-height: inherit; color: @gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; @@ -56,7 +56,7 @@ input[type="tel"], input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - padding: 6px 9px; + padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -241,13 +241,13 @@ input[type="search"], input[type="tel"], input[type="color"] { &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } &.input-small { min-height: @input-height-small; - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; border-radius: @border-radius-small; } @@ -397,11 +397,12 @@ select:focus:invalid { border-radius: @border-radius-base; &.input-small { - padding: @padding-small; + padding: @padding-small-vertical @padding-small-horizontal; font-size: @font-size-small; - border-radius: @border-radius-small; } + border-radius: @border-radius-small; + } &.input-large { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; border-radius: @border-radius-large; } diff --git a/less/pagination.less b/less/pagination.less index ec1eef27f..73c063be0 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -56,7 +56,7 @@ .pagination-large { > li > a, > li > span { - padding: @padding-large; + padding: @padding-large-vertical @padding-large-horizontal; font-size: @font-size-large; } > li:first-child > a, @@ -69,9 +69,13 @@ } } -// Small and mini -.pagination-mini, +// Small .pagination-small { + > li > a, + > li > span { + padding: @padding-small-vertical @padding-small-horizontal; + font-size: @font-size-small; + } > li:first-child > a, > li:first-child > span { .border-left-radius(@border-radius-small); @@ -81,20 +85,3 @@ .border-right-radius(@border-radius-small); } } - -// Small -.pagination-small { - > li > a, - > li > span { - padding: @padding-small; - font-size: @font-size-small; - } -} -// Mini -.pagination-mini { - > li > a, - > li > span { - padding: @padding-mini; - font-size: @font-size-mini; - } -} diff --git a/less/type.less b/less/type.less index e562bb2c2..a95e5bff7 100644 --- a/less/type.less +++ b/less/type.less @@ -54,9 +54,8 @@ a.text-success:focus { color: darken(@state-success-text, 10%); } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @headings-font-family; font-weight: @headings-font-weight; - line-height: @line-height-headings; + line-height: @headings-line-height; small { font-weight: normal; line-height: 1; diff --git a/less/variables.less b/less/variables.less index 4feb9879a..9cd8f830b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -50,25 +50,29 @@ @font-size-small: ceil(@font-size-base * 0.85); // ~12px @font-size-mini: ceil(@font-size-base * 0.75); // ~11px -@line-height-base: 1.428; // 20/14 -@line-height-computed: ceil(@font-size-base * @line-height-base); // ~20px -@line-height-headings: 1.1; +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px -@headings-font-family: inherit; // empty to use BS default, @font-family-base @headings-font-weight: 500; +@headings-line-height: 1.1; // Components // ------------------------- -// Based on 14px font-size and 1.5 line-height +// Based on 14px font-size and 1.428 line-height (~20px to start) -@padding-large: 11px 14px; // 44px -@padding-small: 2px 10px; // 26px -@padding-mini: 0 6px; // 22px +@padding-base-vertical: 8px; +@padding-base-horizontal: 12px; -@border-radius-base: 4px; -@border-radius-large: 6px; -@border-radius-small: 3px; +@padding-large-vertical: 14px; +@padding-large-horizontal: 16px; + +@padding-small-vertical: 5px; +@padding-small-horizontal: 10px; + +@border-radius-base: 4px; +@border-radius-large: 6px; +@border-radius-small: 3px; @component-active-bg: @brand-primary; @@ -123,11 +127,11 @@ @input-color-placeholder: @gray-light; -@input-height-base: (@line-height-computed + 14px); // base line-height + 12px vertical padding + 2px top/bottom border -@input-height-large: (@line-height-computed + 24px); // base line-height + 22px vertical padding + 2px top/bottom border -@input-height-small: (@line-height-computed + 6px); // base line-height + 4px vertical padding + 2px top/bottom border +@input-height-base: (@line-height-computed + (@padding-base-vertical * 2)); +@input-height-large: (@line-height-computed + (@padding-large-vertical * 2)); +@input-height-small: (@line-height-computed + (@padding-small-vertical * 2)); -@form-actions-bg: #f5f5f5; +@form-actions-bg: #f5f5f5; // Dropdowns -- cgit v1.2.3 From 7780133c1cb1868a0e936dd68e951b1e22d3215b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?m=2Eseegm=C3=BCller?= Date: Wed, 15 May 2013 15:44:28 +0200 Subject: Fixed ugly outline Removes outline (especially on select-elements in firefox) --- less/forms.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index c7b376cda..fe5396cd1 100644 --- a/less/forms.less +++ b/less/forms.less @@ -64,6 +64,7 @@ input[type="color"] { background-color: @input-bg; border: 1px solid @input-border; border-radius: @input-border-radius; + outline: 0; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color linear .2s, box-shadow linear .2s"); } -- cgit v1.2.3 From 6289e24f6663e7465b9a902e70190b41100d16ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?m=2Eseegm=C3=BCller?= Date: Wed, 15 May 2013 16:14:44 +0200 Subject: Fixed ugly outline in select fields Removes .tab-focus() on select-fields --- less/forms.less | 34 ++++++---------------------------- 1 file changed, 6 insertions(+), 28 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index fe5396cd1..c79f7f673 100644 --- a/less/forms.less +++ b/less/forms.less @@ -64,9 +64,14 @@ input[type="color"] { background-color: @input-bg; border: 1px solid @input-border; border-radius: @input-border-radius; - outline: 0; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border-color linear .2s, box-shadow linear .2s"); + + &:focus { + border-color: rgba(82,168,236,.8); + outline: 0; + .box-shadow(0 0 8px rgba(82,168,236,.6)); + } } // Reset appearance properties for textual inputs and textarea @@ -98,32 +103,6 @@ textarea { height: auto; } -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"] { - // Focus state - &:focus { - border-color: rgba(82,168,236,.8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - //.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - .box-shadow(0 0 8px rgba(82,168,236,.6)); - } -} - // Position radios and checkboxes better input[type="radio"], input[type="checkbox"] { @@ -146,7 +125,6 @@ select[size] { } // Focus for select, file, radio, and checkbox -select:focus, input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { -- cgit v1.2.3 From f3d857773455a940fca0c8d2ef1ca26982700031 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 May 2013 10:16:11 -0700 Subject: Run make on previous commit; twerk box shadow back to commented out version --- less/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index c79f7f673..2c696945d 100644 --- a/less/forms.less +++ b/less/forms.less @@ -65,12 +65,12 @@ input[type="color"] { border: 1px solid @input-border; border-radius: @input-border-radius; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border-color linear .2s, box-shadow linear .2s"); + .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s"); &:focus { border-color: rgba(82,168,236,.8); outline: 0; - .box-shadow(0 0 8px rgba(82,168,236,.6)); + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); } } -- cgit v1.2.3