diff options
Diffstat (limited to 'less')
36 files changed, 856 insertions, 216 deletions
diff --git a/less/accordion.less b/less/accordion.less index c13c7be260..d63523bc8c 100644 --- a/less/accordion.less +++ b/less/accordion.less @@ -12,7 +12,7 @@ .accordion-group { margin-bottom: 2px; border: 1px solid #e5e5e5; - .border-radius(4px); + .border-radius(@baseBorderRadius); } .accordion-heading { border-bottom: 0; diff --git a/less/alerts.less b/less/alerts.less index 6df5fd72d0..9abb226d6b 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -12,7 +12,7 @@ text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: @warningBackground; border: 1px solid @warningBorder; - .border-radius(4px); + .border-radius(@baseBorderRadius); color: @warningText; } .alert h4 { diff --git a/less/bootstrap.less b/less/bootstrap.less index aaa3d8a6f2..e9d478d0ad 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -1,5 +1,5 @@ /*! - * Bootstrap v2.1.1 + * Bootstrap v2.2.0 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 @@ -52,6 +52,7 @@ // Components: Misc @import "thumbnails.less"; +@import "media.less"; @import "labels-badges.less"; @import "progress-bars.less"; @import "accordion.less"; diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index fd269b31a0..76fbe30ffd 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -8,7 +8,7 @@ margin: 0 0 @baseLineHeight; list-style: none; background-color: #f5f5f5; - .border-radius(4px); + .border-radius(@baseBorderRadius); li { display: inline-block; .ie7-inline-block(); diff --git a/less/button-groups.less b/less/button-groups.less index 62e53f373a..46837e628a 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -6,6 +6,8 @@ // Make the div behave like a button .btn-group { position: relative; + display: inline-block; + .ie7-inline-block(); font-size: 0; // remove as part 1 of font-size inline-block hack vertical-align: middle; // match .btn alignment given font-size hack above white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) @@ -22,10 +24,6 @@ font-size: 0; // Hack to remove whitespace that results from using inline-block margin-top: @baseLineHeight / 2; margin-bottom: @baseLineHeight / 2; - .btn-group { - display: inline-block; - .ie7-inline-block(); - } .btn + .btn, .btn-group + .btn, .btn + .btn-group { @@ -120,7 +118,7 @@ .btn-group > .btn + .dropdown-toggle { padding-left: 8px; padding-right: 8px; - .box-shadow(inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)); + .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); *padding-top: 5px; *padding-bottom: 5px; } @@ -147,7 +145,7 @@ // Remove the gradient and set the same inset shadow as the :active state .dropdown-toggle { background-image: none; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Keep the hover's background when dropdown is open @@ -193,8 +191,7 @@ } // Upside down carets for .dropup .dropup .btn-large .caret { - border-bottom: 5px solid @black; - border-top: 0; + border-bottom-width: 5px; } diff --git a/less/buttons.less b/less/buttons.less index 3fd1e95f5f..63f2d86c8f 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -10,7 +10,7 @@ .btn { display: inline-block; .ie7-inline-block(); - padding: 4px 14px; + padding: 4px 12px; margin-bottom: 0; // For input.btn font-size: @baseFontSize; line-height: @baseLineHeight; @@ -22,9 +22,9 @@ border: 1px solid @btnBorder; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); - .border-radius(4px); + .border-radius(@baseBorderRadius); .ie7-restore-left-whitespace(); // Give IE7 some love - .box-shadow(inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); // Hover state &:hover { @@ -51,7 +51,7 @@ background-color: darken(@white, 15%) e("\9"); background-image: none; outline: 0; - .box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)); + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Disabled state @@ -73,30 +73,31 @@ // Large .btn-large { - padding: 9px 14px; - font-size: @baseFontSize + 2px; - line-height: normal; - .border-radius(5px); + padding: @paddingLarge; + font-size: @fontSizeLarge; + .border-radius(@borderRadiusLarge); } -.btn-large [class^="icon-"] { +.btn-large [class^="icon-"], +.btn-large [class*=" icon-"] { margin-top: 2px; } // Small .btn-small { - padding: 3px 9px; - font-size: @baseFontSize - 2px; - line-height: @baseLineHeight - 2px; + padding: @paddingSmall; + font-size: @fontSizeSmall; + .border-radius(@borderRadiusSmall); } -.btn-small [class^="icon-"] { +.btn-small [class^="icon-"], +.btn-small [class*=" icon-"] { margin-top: 0; } // Mini .btn-mini { - padding: 2px 6px; - font-size: @baseFontSize - 3px; - line-height: @baseLineHeight - 3px; + padding: @paddingMini; + font-size: @fontSizeMini; + .border-radius(@borderRadiusSmall); } diff --git a/less/code.less b/less/code.less index f1851a074c..5495b15ec9 100644 --- a/less/code.less +++ b/less/code.less @@ -35,7 +35,7 @@ pre { background-color: #f5f5f5; border: 1px solid #ccc; // fallback for IE7-8 border: 1px solid rgba(0,0,0,.15); - .border-radius(4px); + .border-radius(@baseBorderRadius); // Make prettyprint styles more spaced out for readability &.prettyprint { diff --git a/less/dropdowns.less b/less/dropdowns.less index 390c374974..26ca0f9ea8 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -72,7 +72,7 @@ } // Links within the dropdown menu - a { + li > a { display: block; padding: 3px 20px; clear: both; @@ -90,7 +90,6 @@ .dropdown-submenu:hover > a { text-decoration: none; color: @dropdownLinkColorHover; - background-color: @dropdownLinkBackgroundHover; #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); } @@ -98,10 +97,9 @@ // ------------ .dropdown-menu .active > a, .dropdown-menu .active > a:hover { - color: @dropdownLinkColorHover; + color: @dropdownLinkColorActive; text-decoration: none; outline: 0; - background-color: @dropdownLinkBackgroundActive; #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); } @@ -116,6 +114,7 @@ .dropdown-menu .disabled > a:hover { text-decoration: none; background-color: transparent; + background-image: none; // Remove CSS gradient cursor: default; } @@ -163,6 +162,7 @@ .dropdown-submenu { position: relative; } +// Default dropdowns .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; @@ -176,6 +176,18 @@ display: block; } +// Dropups +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + -webkit-border-radius: 5px 5px 5px 0; + -moz-border-radius: 5px 5px 5px 0; + border-radius: 5px 5px 5px 0; +} + +// Caret to indicate there is a submenu .dropdown-submenu > a:after { display: block; content: " "; @@ -193,6 +205,21 @@ border-left-color: @dropdownLinkColorHover; } +// Left aligned submenus +.dropdown-submenu.pull-left { + // Undo the float + // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. + float: none; + + // Positioning the submenu + > .dropdown-menu { + left: -100%; + margin-left: 10px; + -webkit-border-radius: 6px 0 6px 6px; + -moz-border-radius: 6px 0 6px 6px; + border-radius: 6px 0 6px 6px; + } +} // Tweak nav headers // ----------------- @@ -206,5 +233,5 @@ // --------- .typeahead { margin-top: 2px; // give it some space to breathe - .border-radius(4px); + .border-radius(@baseBorderRadius); } diff --git a/less/forms.less b/less/forms.less index f8d8562b60..e142f2ac37 100644 --- a/less/forms.less +++ b/less/forms.less @@ -81,11 +81,12 @@ input[type="color"], display: inline-block; height: @baseLineHeight; padding: 4px 6px; - margin-bottom: 9px; + margin-bottom: @baseLineHeight / 2; font-size: @baseFontSize; line-height: @baseLineHeight; color: @gray; .border-radius(@inputBorderRadius); + vertical-align: middle; } // Reset appearance properties for textual inputs and textarea @@ -126,7 +127,7 @@ input[type="color"], 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(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); } } @@ -154,9 +155,9 @@ input[type="checkbox"] { // Set the height of select and file controls to match text inputs select, input[type="file"] { - height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ *margin-top: 4px; /* For IE7, add top margin to align select with labels */ - line-height: 30px; + line-height: @inputHeight; } // Make select elements obey height by applying a border @@ -210,7 +211,7 @@ input[type="checkbox"]:focus { // Placeholder // ------------------------- -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector input, textarea { .placeholder(); @@ -223,13 +224,13 @@ textarea { // Indent the labels to position radios/checkboxes as hanging .radio, .checkbox { - min-height: 18px; // clear the floating input if there is no label text - padding-left: 18px; + min-height: @baseLineHeight; // clear the floating input if there is no label text + padding-left: 20px; } .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; - margin-left: -18px; + margin-left: -20px; } // Move the options list down to align with labels @@ -304,8 +305,17 @@ textarea[class*="span"], .controls-row { .clearfix(); // Clear the float from controls } -.controls-row [class*="span"] { - float: left; // Float to collapse white-space for proper grid alignment + +// Float to collapse white-space for proper grid alignment +.controls-row [class*="span"], +// Redeclare the fluid grid collapse since we undo the float for inputs +.row-fluid .controls-row [class*="span"] { + float: left; +} +// Explicity set top padding on all checkboxes/radios, not just first-child +.controls-row .checkbox[class*="span"], +.controls-row .radio[class*="span"] { + padding-top: 5px; } @@ -364,7 +374,8 @@ select:focus:required:invalid { border-color: #ee5f5b; &:focus { border-color: darken(#ee5f5b, 10%); - .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + @shadow: 0 0 6px lighten(#ee5f5b, 20%); + .box-shadow(@shadow); } } @@ -413,16 +424,23 @@ select:focus:required:invalid { .input-append, .input-prepend { margin-bottom: 5px; - font-size: 0; + font-size: 0; // white space collapse hack white-space: nowrap; // Prevent span and input from separating + // Reset the white space collapse hack + input, + select, + .uneditable-input, + .dropdown-menu { + font-size: @baseFontSize; + } + input, select, .uneditable-input { position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms *margin-left: 0; - font-size: @baseFontSize; vertical-align: top; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); // Make input on top when focused so blue border and shadow always show @@ -454,6 +472,7 @@ select:focus:required:invalid { border-color: @green; } } + .input-prepend { .add-on, .btn { @@ -461,17 +480,23 @@ select:focus:required:invalid { } .add-on:first-child, .btn:first-child { + // FYI, `.btn:first-child` accounts for a button group that's prepended .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); } } + .input-append { input, select, .uneditable-input { .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); + + .btn-group .btn { + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); + } } .add-on, - .btn { + .btn, + .btn-group { margin-left: -1px; } .add-on:last-child, @@ -479,12 +504,16 @@ select:focus:required:invalid { .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } } + // Remove all border-radius for inputs with both prepend and append .input-prepend.input-append { input, select, .uneditable-input { .border-radius(0); + + .btn-group .btn { + .border-radius(0 @inputBorderRadius @inputBorderRadius 0); + } } .add-on:first-child, .btn:first-child { @@ -496,10 +525,14 @@ select:focus:required:invalid { margin-left: -1px; .border-radius(0 @inputBorderRadius @inputBorderRadius 0); } + .btn-group:first-child { + margin-left: 0; + } } + // SEARCH FORM // ----------- diff --git a/less/hero-unit.less b/less/hero-unit.less index 672b7d7c74..763d86aeee 100644 --- a/less/hero-unit.less +++ b/less/hero-unit.less @@ -6,6 +6,10 @@ .hero-unit { padding: 60px; margin-bottom: 30px; + font-size: 18px; + font-weight: 200; + line-height: @baseLineHeight * 1.5; + color: @heroUnitLeadColor; background-color: @heroUnitBackground; .border-radius(6px); h1 { @@ -15,10 +19,7 @@ color: @heroUnitHeadingColor; letter-spacing: -1px; } - p { - font-size: 18px; - font-weight: 200; - line-height: @baseLineHeight * 1.5; - color: @heroUnitLeadColor; + li { + line-height: @baseLineHeight * 1.5; // Reset since we specify in type.less } } diff --git a/less/labels-badges.less b/less/labels-badges.less index 2f15fec05f..d118a0190e 100644 --- a/less/labels-badges.less +++ b/less/labels-badges.less @@ -6,6 +6,8 @@ // Base classes .label, .badge { + display: inline-block; + padding: 2px 4px; font-size: @baseFontSize * .846; font-weight: bold; line-height: 14px; // ensure proper line-height if floated @@ -17,11 +19,11 @@ } // Set unique padding and border-radii .label { - padding: 1px 4px 2px; .border-radius(3px); } .badge { - padding: 1px 9px 2px; + padding-left: 9px; + padding-right: 9px; .border-radius(9px); } diff --git a/less/media.less b/less/media.less new file mode 100644 index 0000000000..1decab71de --- /dev/null +++ b/less/media.less @@ -0,0 +1,55 @@ +// Media objects +// Source: http://stubbornella.org/content/?p=497 +// -------------------------------------------------- + + +// Common styles +// ------------------------- + +// Clear the floats +.media, +.media-body { + overflow: hidden; + *overflow: visible; + zoom: 1; +} + +// Proper spacing between instances of .media +.media, +.media .media { + margin-top: 15px; +} +.media:first-child { + margin-top: 0; +} + +// For images and videos, set to block +.media-object { + display: block; +} + +// Reset margins on headings for tighter default spacing +.media-heading { + margin: 0 0 5px; +} + + +// Media image alignment +// ------------------------- + +.media .pull-left { + margin-right: 10px; +} +.media .pull-right { + margin-left: 10px; +} + + +// Media list variation +// ------------------------- + +// Undo default ul/ol styles +.media-list { + margin-left: 0; + list-style: none; +} diff --git a/less/mixins.less b/less/mixins.less index 67f1c0af72..98aa2b8a58 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -154,7 +154,7 @@ .input-block-level { display: block; width: 100%; - min-height: 30px; // Make inputs at least the height of their button counterpart + min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) .box-sizing(border-box); // Makes inputs behave like true block-level elements } @@ -183,7 +183,8 @@ .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { border-color: darken(@borderColor, 10%); - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%)); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); + .box-shadow(@shadow); } } // Give a small background color for input-prepend/-append @@ -248,12 +249,10 @@ } // Drop shadows -.box-shadow(@shadowA, @shadowB:X, ...){ - // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/ - @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; - -webkit-box-shadow: @props; - -moz-box-shadow: @props; - box-shadow: @props; +.box-shadow(@shadow) { + -webkit-box-shadow: @shadow; + -moz-box-shadow: @shadow; + box-shadow: @shadow; } // Transitions @@ -298,6 +297,7 @@ -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twitter/bootstrap/issues/4885 -o-transform: skew(@x, @y); transform: skew(@x, @y); + -webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319 } .translate3d(@x, @y, @z) { -webkit-transform: translate3d(@x, @y, @z); @@ -325,7 +325,7 @@ } // Background sizing -.background-size(@size){ +.background-size(@size) { -webkit-background-size: @size; -moz-background-size: @size; -o-background-size: @size; @@ -447,7 +447,7 @@ background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback } - .radial(@innerColor: #555, @outerColor: #333) { + .radial(@innerColor: #555, @outerColor: #333) { background-color: @outerColor; background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); @@ -643,6 +643,11 @@ margin-left: 0; } + // Space grid-sized controls properly if multiple per line + .controls-row [class*="span"] + [class*="span"] { + margin-left: @fluidGridGutterWidth; + } + // generate .spanX and .offsetX .spanX (@gridColumns); .offsetX (@gridColumns); diff --git a/less/modals.less b/less/modals.less index 81cacb7ab1..90b86670f4 100644 --- a/less/modals.less +++ b/less/modals.less @@ -2,16 +2,6 @@ // Modals // -------------------------------------------------- - -// Recalculate z-index where appropriate, -// but only apply to elements within modal -.modal-open .modal { - .dropdown-menu { z-index: @zindexDropdown + @zindexModal; } - .dropdown.open { *z-index: @zindexDropdown + @zindexModal; } - .popover { z-index: @zindexPopover + @zindexModal; } - .tooltip { z-index: @zindexTooltip + @zindexModal; } -} - // Background .modal-backdrop { position: fixed; @@ -36,7 +26,6 @@ top: 50%; left: 50%; z-index: @zindexModal; - overflow: auto; width: 560px; margin: -250px 0 0 -280px; background-color: @white; @@ -46,6 +35,9 @@ .border-radius(6px); .box-shadow(0 3px 7px rgba(0,0,0,0.3)); .background-clip(padding-box); + // Remove focus outline from opened modal + outline: none; + &.fade { .transition(e('opacity .3s linear, top .3s ease-out')); top: -25%; @@ -95,4 +87,8 @@ .btn-group .btn + .btn { margin-left: -1px; } + // and override it for block buttons as well + .btn-block + .btn-block { + margin-left: 0; + } } diff --git a/less/navbar.less b/less/navbar.less index 3514c40e0f..f69e048994 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -25,7 +25,7 @@ padding-right: 20px; #gradient > .vertical(@navbarBackgroundHighlight, @navbarBackground); border: 1px solid @navbarBorder; - .border-radius(4px); + .border-radius(@baseBorderRadius); .box-shadow(0 1px 4px rgba(0,0,0,.065)); // Prevent floats from breaking the navbar @@ -41,6 +41,7 @@ // Override the default collapsed state .nav-collapse.collapse { height: auto; + overflow: visible; } @@ -152,7 +153,6 @@ .navbar-static-top { position: static; - width: 100%; margin-bottom: 0; // remove 18px margin for default navbar .navbar-inner { .border-radius(0); @@ -202,7 +202,7 @@ .navbar-fixed-top, .navbar-static-top { .navbar-inner { - .box-shadow(inset 0 -1px 0 rgba(0,0,0,.1), 0 1px 10px rgba(0,0,0,.1)); + .box-shadow(~"0 1px 10px rgba(0,0,0,.1)"); } } @@ -210,7 +210,7 @@ .navbar-fixed-bottom { bottom: 0; .navbar-inner { - .box-shadow(inset 0 1px 0 rgba(0,0,0,.1), 0 -1px 10px rgba(0,0,0,.1)); + .box-shadow(~"0 -1px 10px rgba(0,0,0,.1)"); } } @@ -274,7 +274,7 @@ margin-left: 5px; margin-right: 5px; .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); - .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); } .navbar .btn-navbar .icon-bar { display: block; @@ -446,7 +446,7 @@ color: @white; background-color: @navbarInverseSearchBackground; border-color: @navbarInverseSearchBorder; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)); + .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); .transition(none); .placeholder(@navbarInverseSearchPlaceholderColor); diff --git a/less/navs.less b/less/navs.less index 4c38f7dbf2..1944f84415 100644 --- a/less/navs.less +++ b/less/navs.less @@ -67,7 +67,8 @@ text-shadow: 0 -1px 0 rgba(0,0,0,.2); background-color: @linkColor; } -.nav-list [class^="icon-"] { +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { margin-right: 2px; } // Dividers (basically an hr) within the dropdown @@ -123,7 +124,7 @@ .nav-tabs > .active > a, .nav-tabs > .active > a:hover { color: @gray; - background-color: @white; + background-color: @bodyBackground; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; diff --git a/less/pager.less b/less/pager.less index a7629d3db7..da24253672 100644 --- a/less/pager.less +++ b/less/pager.less @@ -12,28 +12,29 @@ .pager li { display: inline; } -.pager a, -.pager span { +.pager li > a, +.pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #ddd; .border-radius(15px); } -.pager a:hover { +.pager li > a:hover { text-decoration: none; background-color: #f5f5f5; } -.pager .next a, -.pager .next span { +.pager .next > a, +.pager .next > span { float: right; } -.pager .previous a { +.pager .previous > a, +.pager .previous > span { float: left; } -.pager .disabled a, -.pager .disabled a:hover, -.pager .disabled span { +.pager .disabled > a, +.pager .disabled > a:hover, +.pager .disabled > span { color: @grayLight; background-color: #fff; cursor: default; diff --git a/less/pagination.less b/less/pagination.less index 61a760be58..e35d3f4a8e 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -2,27 +2,30 @@ // Pagination (multiple pages) // -------------------------------------------------- - +// Space out pagination from surrounding content .pagination { - height: @baseLineHeight * 2; margin: @baseLineHeight 0; - } +} + .pagination ul { + // Allow for text-based alignment display: inline-block; .ie7-inline-block(); + // Reset default ul styles margin-left: 0; margin-bottom: 0; - .border-radius(3px); + // Visuals + .border-radius(@baseBorderRadius); .box-shadow(0 1px 2px rgba(0,0,0,.05)); } .pagination ul > li { - display: inline; + display: inline; // Remove list-style and block-level defaults } .pagination ul > li > a, .pagination ul > li > span { - float: left; - padding: 0 14px; - line-height: (@baseLineHeight * 2) - 2; + float: left; // Collapse white-space + padding: 4px 12px; + line-height: @baseLineHeight; text-decoration: none; background-color: @paginationBackground; border: 1px solid @paginationBorder; @@ -31,7 +34,7 @@ .pagination ul > li > a:hover, .pagination ul > .active > a, .pagination ul > .active > span { - background-color: #f5f5f5; + background-color: @paginationActiveBackground; } .pagination ul > .active > a, .pagination ul > .active > span { @@ -48,17 +51,71 @@ .pagination ul > li:first-child > a, .pagination ul > li:first-child > span { border-left-width: 1px; - .border-radius(3px 0 0 3px); + .border-left-radius(@baseBorderRadius); } .pagination ul > li:last-child > a, .pagination ul > li:last-child > span { - .border-radius(0 3px 3px 0); + .border-right-radius(@baseBorderRadius); } -// Centered + +// Alignment +// -------------------------------------------------- + .pagination-centered { text-align: center; } .pagination-right { text-align: right; } + + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-large { + ul > li > a, + ul > li > span { + padding: @paddingLarge; + font-size: @fontSizeLarge; + } + ul > li:first-child > a, + ul > li:first-child > span { + .border-left-radius(@borderRadiusLarge); + } + ul > li:last-child > a, + ul > li:last-child > span { + .border-right-radius(@borderRadiusLarge); + } +} + +// Small and mini +.pagination-mini, +.pagination-small { + ul > li:first-child > a, + ul > li:first-child > span { + .border-left-radius(@borderRadiusSmall); + } + ul > li:last-child > a, + ul > li:last-child > span { + .border-right-radius(@borderRadiusSmall); + } +} + +// Small +.pagination-small { + ul > li > a, + ul > li > span { + padding: @paddingSmall; + font-size: @fontSizeSmall; + } +} +// Mini +.pagination-mini { + ul > li > a, + ul > li > span { + padding: @paddingMini; + font-size: @fontSizeMini; + } +} diff --git a/less/popovers.less b/less/popovers.less index 2b3f1b0599..a4c4bb0e07 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -21,10 +21,10 @@ .box-shadow(0 5px 10px rgba(0,0,0,.2)); // Offset the popover to account for the popover arrow - &.top { margin-bottom: 10px; } + &.top { margin-top: -10px; } &.right { margin-left: 10px; } &.bottom { margin-top: 10px; } - &.left { margin-right: 10px; } + &.left { margin-left: -10px; } } diff --git a/less/progress-bars.less b/less/progress-bars.less index 0486371aa8..5e0c3dda01 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -48,7 +48,7 @@ margin-bottom: @baseLineHeight; #gradient > .vertical(#f5f5f5, #f9f9f9); .box-shadow(inset 0 1px 2px rgba(0,0,0,.1)); - .border-radius(4px); + .border-radius(@baseBorderRadius); } // Bar of progress @@ -66,7 +66,7 @@ .transition(width .6s ease); } .progress .bar + .bar { - .box-shadow(inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)); + .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)"); } // Striped bars diff --git a/less/reset.less b/less/reset.less index 2901a85c80..2abdee4624 100644 --- a/less/reset.less +++ b/less/reset.less @@ -88,7 +88,8 @@ img { } // Prevent max-width from affecting Google Maps -#map_canvas img { +#map_canvas img, +.google-maps img { max-width: none; } @@ -115,11 +116,11 @@ input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 border: 0; } button, -input[type="button"], +html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. input[type="reset"], input[type="submit"] { - cursor: pointer; // Cursors on all buttons applied consistently - -webkit-appearance: button; // Style clickable inputs in iOS + -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS. + cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. } input[type="search"] { // Appearance in Safari/Chrome -webkit-box-sizing: content-box; diff --git a/less/responsive-767px-max.less b/less/responsive-767px-max.less index 79c7eaa82b..1d5c1239c9 100644 --- a/less/responsive-767px-max.less +++ b/less/responsive-767px-max.less @@ -58,6 +58,7 @@ } // Make all grid-sized elements block level again [class*="span"], + .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing .row-fluid [class*="span"] { float: none; display: block; @@ -70,6 +71,9 @@ width: 100%; .box-sizing(border-box); } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } // FORM FIELDS // ----------- @@ -103,7 +107,8 @@ right: 20px; width: auto; margin: 0; - &.fade.in { top: auto; } + &.fade { top: -100px; } + &.fade.in { top: 20px; } } } @@ -155,6 +160,20 @@ } } + // Medias + // Reset float and spacing to stack + .media .pull-left, + .media .pull-right { + float: none; + display: block; + margin-bottom: 10px; + } + // Remove side margins since we stack instead of indent + .media-object { + margin-right: 0; + margin-left: 0; + } + // Modals .modal { top: 10px; diff --git a/less/responsive-navbar.less b/less/responsive-navbar.less index 073eafb113..2a0b0c057f 100644 --- a/less/responsive-navbar.less +++ b/less/responsive-navbar.less @@ -75,7 +75,7 @@ .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; - .border-radius(4px); + .border-radius(@baseBorderRadius); } .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; @@ -84,6 +84,10 @@ .nav-collapse .dropdown-menu a:hover { background-color: @navbarBackground; } + .navbar-inverse .nav-collapse .nav > li > a, + .navbar-inverse .nav-collapse .dropdown-menu a { + color: @navbarInverseLinkColor; + } .navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:hover { background-color: @navbarInverseBackground; @@ -133,7 +137,7 @@ margin: (@baseLineHeight / 2) 0; border-top: 1px solid @navbarBackground; border-bottom: 1px solid @navbarBackground; - .box-shadow(inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)); + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1)"); } .navbar-inverse .nav-collapse .navbar-form, .navbar-inverse .nav-collapse .navbar-search { @@ -170,7 +174,7 @@ // DEFAULT DESKTOP // --------------- -@media (min-width: 980px) { +@media (min-width: @navbarCollapseDesktopWidth) { // Required to make the collapsing navbar work on regular desktops .nav-collapse.collapse { diff --git a/less/responsive.less b/less/responsive.less index 87b3470853..b7f72f41d5 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -1,5 +1,5 @@ /*! - * Bootstrap Responsive v2.1.1 + * Bootstrap Responsive v2.2.0 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 diff --git a/less/sprites.less b/less/sprites.less index 9bf970fa9b..9cd2ae3bfd 100644 --- a/less/sprites.less +++ b/less/sprites.less @@ -30,8 +30,6 @@ /* White icons with optional class, or on hover/active states of certain elements */ .icon-white, -.nav-tabs > .active > a > [class^="icon-"], -.nav-tabs > .active > a > [class*=" icon-"], .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], @@ -41,7 +39,9 @@ .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], -.dropdown-menu > .active > a > [class*=" icon-"] { +.dropdown-menu > .active > a > [class*=" icon-"], +.dropdown-submenu:hover > a > [class^="icon-"], +.dropdown-submenu:hover > a > [class*=" icon-"] { background-image: url("@{iconWhiteSpritePath}"); } diff --git a/less/tables.less b/less/tables.less index 13c37c6e87..3f2c7f783b 100644 --- a/less/tables.less +++ b/less/tables.less @@ -71,7 +71,7 @@ table { border-collapse: separate; // Done so we can round those corners! *border-collapse: collapse; // IE7 can't round corners anyway border-left: 0; - .border-radius(4px); + .border-radius(@baseBorderRadius); th, td { border-left: 1px solid @tableBorder; @@ -133,7 +133,7 @@ table { colgroup + tbody tr:first-child td:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; - -moz-border-radius-topleft: 4px; + -moz-border-radius-topright: 4px; } } @@ -172,39 +172,30 @@ table { // ----------------- // Reset default grid behavior -table [class*=span], -.row-fluid table [class*=span] { +table td[class*="span"], +table th[class*="span"], +.row-fluid table td[class*="span"], +.row-fluid table th[class*="span"] { display: table-cell; float: none; // undo default grid column styles margin-left: 0; // undo default grid column styles } // Change the column widths to account for td/th padding -.table { - .span1 { .tableColumns(1); } - .span2 { .tableColumns(2); } - .span3 { .tableColumns(3); } - .span4 { .tableColumns(4); } - .span5 { .tableColumns(5); } - .span6 { .tableColumns(6); } - .span7 { .tableColumns(7); } - .span8 { .tableColumns(8); } - .span9 { .tableColumns(9); } - .span10 { .tableColumns(10); } - .span11 { .tableColumns(11); } - .span12 { .tableColumns(12); } - .span13 { .tableColumns(13); } - .span14 { .tableColumns(14); } - .span15 { .tableColumns(15); } - .span16 { .tableColumns(16); } - .span17 { .tableColumns(17); } - .span18 { .tableColumns(18); } - .span19 { .tableColumns(19); } - .span20 { .tableColumns(20); } - .span21 { .tableColumns(21); } - .span22 { .tableColumns(22); } - .span23 { .tableColumns(23); } - .span24 { .tableColumns(24); } +.table td, +.table th { + &.span1 { .tableColumns(1); } + &.span2 { .tableColumns(2); } + &.span3 { .tableColumns(3); } + &.span4 { .tableColumns(4); } + &.span5 { .tableColumns(5); } + &.span6 { .tableColumns(6); } + &.span7 { .tableColumns(7); } + &.span8 { .tableColumns(8); } + &.span9 { .tableColumns(9); } + &.span10 { .tableColumns(10); } + &.span11 { .tableColumns(11); } + &.span12 { .tableColumns(12); } } diff --git a/less/tests/buttons.html b/less/tests/buttons.html new file mode 100644 index 0000000000..5fe7f664b7 --- /dev/null +++ b/less/tests/buttons.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Buttons · Bootstrap</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <style> + body { + padding-top: 30px; + padding-bottom: 30px; + } + </style> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <div class="container"> + + <h2>Dropups</h2> + <div class="btn-toolbar"> + <div class="btn-group dropup"> + <button class="btn">Dropup</button> + <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-primary">Dropup</button> + <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-danger">Dropup</button> + <button class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-warning">Dropup</button> + <button class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-success">Dropup</button> + <button class="btn btn-success dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-info">Dropup</button> + <button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + <div class="btn-group dropup"> + <button class="btn btn-inverse">Dropup</button> + <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li><a href="#">Separated link</a></li> + </ul> + </div><!-- /btn-group --> + </div><!-- /btn-toolbar --> + + + </div> <!-- /container --> + + <!-- Le javascript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="../../docs/assets/js/jquery.js"></script> + <script src="../../docs/assets/js/bootstrap-transition.js"></script> + <script src="../../docs/assets/js/bootstrap-alert.js"></script> + <script src="../../docs/assets/js/bootstrap-modal.js"></script> + <script src="../../docs/assets/js/bootstrap-dropdown.js"></script> + <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script> + <script src="../../docs/assets/js/bootstrap-tab.js"></script> + <script src="../../docs/assets/js/bootstrap-tooltip.js"></script> + <script src="../../docs/assets/js/bootstrap-popover.js"></script> + <script src="../../docs/assets/js/bootstrap-button.js"></script> + <script src="../../docs/assets/js/bootstrap-collapse.js"></script> + <script src="../../docs/assets/js/bootstrap-carousel.js"></script> + <script src="../../docs/assets/js/bootstrap-typeahead.js"></script> + + </body> +</html> diff --git a/less/tests/forms-responsive.html b/less/tests/forms-responsive.html new file mode 100644 index 0000000000..846d5b43d5 --- /dev/null +++ b/less/tests/forms-responsive.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + <style> + body { + padding-top: 30px; + padding-bottom: 30px; + } + </style> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <form class="container"> + + <div class="page-header"> + <h1>Fixed grid</h1> + </div> + + <h3>Vertical alignment</h3> + <input type="text" class="span2" placeholder="span2"> + <select class="span2"><option>span2</option></select> + <span class="uneditable-input span2">span1</span> + + <h3>Width across elements</h3> + <div> + <input type="text" class="span2" placeholder="span2"> + </div> + <div> + <select class="span2"><option>span2</option></select> + </div> + <div> + <span class="uneditable-input span2">span2</span> + </div> + + + <div class="page-header"> + <h1>Fluid grid</h1> + </div> + + <div class="row-fluid"> + <input type="text" class="span2" placeholder="span2"> + <select class="span2"><option>span2</option></select> + <span class="uneditable-input span2">span1</span> + </div> + + </form> <!-- /container --> + + </body> +</html> diff --git a/less/tests/navbar-fixed-top.html b/less/tests/navbar-fixed-top.html new file mode 100644 index 0000000000..97b86fdef1 --- /dev/null +++ b/less/tests/navbar-fixed-top.html @@ -0,0 +1,104 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <style> + body { + padding-top: 60px; + padding-bottom: 30px; + } + </style> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <!-- Fixed navbar --> + <div class="navbar navbar-fixed-top"> + <div class="navbar-inner"> + <div class="container"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <a class="brand" href="#">Project name</a> + <div class="nav-collapse collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="nav-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <ul class="nav pull-right"> + <li><a href="./navbar.html">Default</a></li> + <li><a href="./navbar-static-top.html">Static top</a></li> + <li class="active"><a href="./navbar-fixed-top.html">Fixed top</a></li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + </div> + + <div class="container"> + + <!-- Main hero unit for a primary marketing message or call to action --> + <div class="hero-unit"> + <h1>Navbar example</h1> + <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> + <p> + <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a> + </p> + </div> + + </div> <!-- /container --> + + <!-- Le javascript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="../../docs/assets/js/jquery.js"></script> + <script src="../../docs/assets/js/bootstrap-transition.js"></script> + <script src="../../docs/assets/js/bootstrap-alert.js"></script> + <script src="../../docs/assets/js/bootstrap-modal.js"></script> + <script src="../../docs/assets/js/bootstrap-dropdown.js"></script> + <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script> + <script src="../../docs/assets/js/bootstrap-tab.js"></script> + <script src="../../docs/assets/js/bootstrap-tooltip.js"></script> + <script src="../../docs/assets/js/bootstrap-popover.js"></script> + <script src="../../docs/assets/js/bootstrap-button.js"></script> + <script src="../../docs/assets/js/bootstrap-collapse.js"></script> + <script src="../../docs/assets/js/bootstrap-carousel.js"></script> + <script src="../../docs/assets/js/bootstrap-typeahead.js"></script> + + </body> +</html> diff --git a/less/tests/navbar-static-top.html b/less/tests/navbar-static-top.html new file mode 100644 index 0000000000..505ecb6086 --- /dev/null +++ b/less/tests/navbar-static-top.html @@ -0,0 +1,107 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="utf-8"> + <title>Bootstrap, from Twitter</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta name="description" content=""> + <meta name="author" content=""> + + <!-- Le styles --> + <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> + <style> + body { + padding-bottom: 30px; + } + .hero-unit { + margin-top: 20px; + } + </style> + <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> + + <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --> + <!--[if lt IE 9]> + <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> + <![endif]--> + + <!-- Le fav and touch icons --> + <link rel="shortcut icon" href="../../docs/assets/ico/favicon.ico"> + <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../docs/assets/ico/apple-touch-icon-144-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../docs/assets/ico/apple-touch-icon-114-precomposed.png"> + <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../docs/assets/ico/apple-touch-icon-72-precomposed.png"> + <link rel="apple-touch-icon-precomposed" href="../../docs/assets/ico/apple-touch-icon-57-precomposed.png"> + </head> + + <body> + + <!-- Static navbar --> + <div class="navbar navbar-static-top"> + <div class="navbar-inner"> + <div class="container"> + <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </a> + <a class="brand" href="#">Project name</a> + <div class="nav-collapse collapse"> + <ul class="nav"> + <li class="active"><a href="#">Home</a></li> + <li><a href="#about">About</a></li> + <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="nav-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <ul class="nav pull-right"> + <li><a href="./navbar.html">Default</a></li> + <li class="active"><a href="./navbar-static-top.html">Static top</a></li> + <li><a href="./navbar-fixed-top.html">Fixed top</a></li> + </ul> + </div><!--/.nav-collapse --> + </div> + </div> + </div> + + + <div class="container"> + + <!-- Main hero unit for a primary marketing message or call to action --> + <div class="hero-unit"> + <h1>Navbar example</h1> + <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p> + <p> + <a class="btn btn-large btn-primary" href="../components.html#navbar">View navbar docs »</a> + </p> + </div> + + </div> <!-- /container --> + + <!-- Le javascript + ================================================== --> + <!-- Placed at the end of the document so the pages load faster --> + <script src="../../docs/assets/js/jquery.js"></script> + <script src="../../docs/assets/js/bootstrap-transition.js"></script> + <script src="../../docs/assets/js/bootstrap-alert.js"></script> + <script src="../../docs/assets/js/bootstrap-modal.js"></script> + <script src="../../docs/assets/js/bootstrap-dropdown.js"></script> + <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script> + <script src="../../docs/assets/js/bootstrap-tab.js"></script> + <script src="../../docs/assets/js/bootstrap-tooltip.js"></script> + <script src="../../docs/assets/js/bootstrap-popover.js"></script> + <script src="../../docs/assets/js/bootstrap-button.js"></script> + <script src="../../docs/assets/js/bootstrap-collapse.js"></script> + <script src="../../docs/assets/js/bootstrap-carousel.js"></script> + <script src="../../docs/assets/js/bootstrap-typeahead.js"></script> + + </body> +</html> diff --git a/less/tests/navbar.html b/less/tests/navbar.html index 17754bf6e8..c72da71a44 100644 --- a/less/tests/navbar.html +++ b/less/tests/navbar.html @@ -11,9 +11,12 @@ <link href="../../docs/assets/css/bootstrap.css" rel="stylesheet"> <style> body { - padding-top: 60px; + padding-top: 0; padding-bottom: 30px; } + .navbar { + margin-top: 20px; + } </style> <link href="../../docs/assets/css/bootstrap-responsive.css" rel="stylesheet"> @@ -32,27 +35,6 @@ <body> - <!-- Fixed navbar --> - <div class="navbar navbar-fixed-top"> - <div class="navbar-inner"> - <div class="container"> - <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </a> - <a class="brand" href="#">Project name</a> - <div class="nav-collapse"> - <ul class="nav"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#about">About</a></li> - <li><a href="#contact">Contact</a></li> - </ul> - </div><!--/.nav-collapse --> - </div> - </div> - </div> - <div class="container"> <!-- Static navbar --> @@ -65,11 +47,28 @@ <span class="icon-bar"></span> </a> <a class="brand" href="#">Project name</a> - <div class="nav-collapse"> + <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> + <ul class="dropdown-menu"> + <li><a href="#">Action</a></li> + <li><a href="#">Another action</a></li> + <li><a href="#">Something else here</a></li> + <li class="divider"></li> + <li class="nav-header">Nav header</li> + <li><a href="#">Separated link</a></li> + <li><a href="#">One more separated link</a></li> + </ul> + </li> + </ul> + <ul class="nav pull-right"> + <li class="active"><a href="./navbar.html">Default</a></li> + <li><a href="./navbar-static-top.html">Static top</a></li> + <li><a href="./navbar-fixed-top.html">Fixed top</a></li> </ul> </div><!--/.nav-collapse --> </div> @@ -90,19 +89,19 @@ <!-- Le javascript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> - <script src="../assets/js/jquery.js"></script> - <script src="../assets/js/bootstrap-transition.js"></script> - <script src="../assets/js/bootstrap-alert.js"></script> - <script src="../assets/js/bootstrap-modal.js"></script> - <script src="../assets/js/bootstrap-dropdown.js"></script> - <script src="../assets/js/bootstrap-scrollspy.js"></script> - <script src="../assets/js/bootstrap-tab.js"></script> - <script src="../assets/js/bootstrap-tooltip.js"></script> - <script src="../assets/js/bootstrap-popover.js"></script> - <script src="../assets/js/bootstrap-button.js"></script> - <script src="../assets/js/bootstrap-collapse.js"></script> - <script src="../assets/js/bootstrap-carousel.js"></script> - <script src="../assets/js/bootstrap-typeahead.js"></script> + <script src="../../docs/assets/js/jquery.js"></script> + <script src="../../docs/assets/js/bootstrap-transition.js"></script> + <script src="../../docs/assets/js/bootstrap-alert.js"></script> + <script src="../../docs/assets/js/bootstrap-modal.js"></script> + <script src="../../docs/assets/js/bootstrap-dropdown.js"></script> + <script src="../../docs/assets/js/bootstrap-scrollspy.js"></script> + <script src="../../docs/assets/js/bootstrap-tab.js"></script> + <script src="../../docs/assets/js/bootstrap-tooltip.js"></script> + <script src="../../docs/assets/js/bootstrap-popover.js"></script> + <script src="../../docs/assets/js/bootstrap-button.js"></script> + <script src="../../docs/assets/js/bootstrap-collapse.js"></script> + <script src="../../docs/assets/js/bootstrap-carousel.js"></script> + <script src="../../docs/assets/js/bootstrap-typeahead.js"></script> </body> </html> diff --git a/less/thumbnails.less b/less/thumbnails.less index 91b75f785b..a84a7d37d9 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -29,7 +29,7 @@ padding: 4px; line-height: @baseLineHeight; border: 1px solid #ddd; - .border-radius(4px); + .border-radius(@baseBorderRadius); .box-shadow(0 1px 3px rgba(0,0,0,.055)); .transition(all .2s ease-in-out); } diff --git a/less/tooltip.less b/less/tooltip.less index fba1856f58..93fac8d6b2 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -27,7 +27,7 @@ text-align: center; text-decoration: none; background-color: @tooltipBackground; - .border-radius(4px); + .border-radius(@baseBorderRadius); } // Arrows diff --git a/less/type.less b/less/type.less index 2e0f386eef..3b428e79de 100644 --- a/less/type.less +++ b/less/type.less @@ -37,18 +37,17 @@ cite { .muted { color: @grayLight; } -.text-warning { - color: @warningText; -} -.text-error { - color: @errorText; -} -.text-info { - color: @infoText; -} -.text-success { - color: @successText; -} +.text-warning { color: @warningText; } +a.text-warning:hover { color: darken(@warningText, 10%); } + +.text-error { color: @errorText; } +a.text-error:hover { color: darken(@errorText, 10%); } + +.text-info { color: @infoText; } +a.text-info:hover { color: darken(@infoText, 10%); } + +.text-success { color: @successText; } +a.text-success:hover { color: darken(@successText, 10%); } // Headings @@ -58,7 +57,7 @@ h1, h2, h3, h4, h5, h6 { margin: (@baseLineHeight / 2) 0; font-family: @headingsFontFamily; font-weight: @headingsFontWeight; - line-height: 1; + line-height: @baseLineHeight; color: @headingsColor; text-rendering: optimizelegibility; // Fix the character spacing for headings small { @@ -67,17 +66,22 @@ h1, h2, h3, h4, h5, h6 { color: @grayLight; } } -h1 { font-size: 36px; line-height: 40px; } -h2 { font-size: 30px; line-height: 40px; } -h3 { font-size: 24px; line-height: 40px; } -h4 { font-size: 18px; line-height: 20px; } -h5 { font-size: 14px; line-height: 20px; } -h6 { font-size: 12px; line-height: 20px; } -h1 small { font-size: 24px; } -h2 small { font-size: 18px; } -h3 small { font-size: 14px; } -h4 small { font-size: 14px; } +h1, +h2, +h3 { line-height: @baseLineHeight * 2; } + +h1 { font-size: @baseFontSize * 2.75; } // ~38px +h2 { font-size: @baseFontSize * 2.25; } // ~32px +h3 { font-size: @baseFontSize * 1.75; } // ~24px +h4 { font-size: @baseFontSize * 1.25; } // ~18px +h5 { font-size: @baseFontSize; } +h6 { font-size: @baseFontSize * 0.85; } // ~12px + +h1 small { font-size: @baseFontSize * 1.75; } // ~24px +h2 small { font-size: @baseFontSize * 1.25; } // ~18px +h3 small { font-size: @baseFontSize; } +h4 small { font-size: @baseFontSize; } // Page header @@ -155,7 +159,9 @@ hr { } // Abbreviations and acronyms -abbr[title] { +abbr[title], +// Added data-* attribute to help out our tooltip plugin, per https://github.com/twitter/bootstrap/issues/5257 +abbr[data-original-title] { cursor: help; border-bottom: 1px dotted @grayLight; } diff --git a/less/variables.less b/less/variables.less index 7d6efe0050..3fb5274c3a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -57,6 +57,24 @@ @headingsFontWeight: bold; // instead of browser default, bold @headingsColor: inherit; // empty to use BS default, @textColor + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +@fontSizeLarge: @baseFontSize * 1.25; // ~18px +@fontSizeSmall: @baseFontSize * 0.85; // ~12px +@fontSizeMini: @baseFontSize * 0.75; // ~11px + +@paddingLarge: 11px 19px; // 44px +@paddingSmall: 2px 10px; // 26px +@paddingMini: 1px 6px; // 24px + +@baseBorderRadius: 4px; +@borderRadiusLarge: 6px; +@borderRadiusSmall: 3px; + + // Tables // ------------------------- @tableBackground: transparent; // overall background-color @@ -93,9 +111,11 @@ // ------------------------- @inputBackground: @white; @inputBorder: #ccc; -@inputBorderRadius: 3px; +@inputBorderRadius: @baseBorderRadius; @inputDisabledBackground: @grayLighter; @formActionsBackground: #f5f5f5; +@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border + // Dropdowns // ------------------------- @@ -116,6 +136,7 @@ // COMPONENT VARIABLES // -------------------------------------------------- + // Z-index master list // ------------------------- // Used for a bird's eye view of components dependent on the z-axis @@ -157,6 +178,7 @@ // Navbar // ------------------------- @navbarCollapseWidth: 979px; +@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; @navbarHeight: 40px; @navbarBackgroundHighlight: #ffffff; diff --git a/less/wells.less b/less/wells.less index e4e0a9bebe..84a744b1c5 100644 --- a/less/wells.less +++ b/less/wells.less @@ -10,7 +10,7 @@ margin-bottom: 20px; background-color: @wellBackground; border: 1px solid darken(@wellBackground, 7%); - .border-radius(4px); + .border-radius(@baseBorderRadius); .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { border-color: #ddd; @@ -21,9 +21,9 @@ // Sizes .well-large { padding: 24px; - .border-radius(6px); + .border-radius(@borderRadiusLarge); } .well-small { padding: 9px; - .border-radius(3px); + .border-radius(@borderRadiusSmall); } |