diff options
author | Mark Otto <otto@github.com> | 2013-12-15 04:56:56 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2013-12-15 04:56:56 +0400 |
commit | 46c3d27468accdf98dd49257f17bdc507890a1c6 (patch) | |
tree | 9067b23767a152c8cb58f2a2d24bf1276e407e5b /less | |
parent | aad447e29075b52a46931be17a9be4016cc89ef1 (diff) | |
parent | 4c64c1eecdb52d943a50d2c181aeb915a3caed34 (diff) |
Merge branch 'master' into pr/11435
Conflicts:
dist/css/bootstrap.css
dist/css/bootstrap.min.css
Diffstat (limited to 'less')
-rw-r--r-- | less/badges.less | 12 | ||||
-rw-r--r-- | less/breadcrumbs.less | 2 | ||||
-rw-r--r-- | less/button-groups.less | 57 | ||||
-rw-r--r-- | less/buttons.less | 15 | ||||
-rw-r--r-- | less/carousel.less | 1 | ||||
-rw-r--r-- | less/code.less | 10 | ||||
-rw-r--r-- | less/dropdowns.less | 41 | ||||
-rw-r--r-- | less/forms.less | 17 | ||||
-rw-r--r-- | less/glyphicons.less | 10 | ||||
-rw-r--r-- | less/grid.less | 65 | ||||
-rw-r--r-- | less/input-groups.less | 2 | ||||
-rw-r--r-- | less/jumbotron.less | 10 | ||||
-rw-r--r-- | less/labels.less | 6 | ||||
-rw-r--r-- | less/list-group.less | 26 | ||||
-rw-r--r-- | less/mixins.less | 122 | ||||
-rw-r--r-- | less/modals.less | 27 | ||||
-rw-r--r-- | less/navbar.less | 134 | ||||
-rw-r--r-- | less/navs.less | 22 | ||||
-rw-r--r-- | less/pager.less | 2 | ||||
-rw-r--r-- | less/panels.less | 20 | ||||
-rw-r--r-- | less/progress-bars.less | 12 | ||||
-rw-r--r-- | less/responsive-utilities.less | 142 | ||||
-rw-r--r-- | less/tables.less | 24 | ||||
-rw-r--r-- | less/thumbnails.less | 12 | ||||
-rw-r--r-- | less/type.less | 111 | ||||
-rw-r--r-- | less/variables.less | 70 | ||||
-rw-r--r-- | less/wells.less | 2 |
27 files changed, 459 insertions, 515 deletions
diff --git a/less/badges.less b/less/badges.less index 0b69753eff..166b2be5e2 100644 --- a/less/badges.less +++ b/less/badges.less @@ -22,6 +22,12 @@ &:empty { display: none; } + + // Quick fix for badges in buttons + .btn & { + position: relative; + top: -1px; + } } // Hover state, but only for links @@ -34,12 +40,6 @@ a.badge { } } -// Quick fix for labels/badges in buttons -.btn .badge { - position: relative; - top: -1px; -} - // Account for counters in navs a.list-group-item.active > .badge, .nav-pills > .active > a > .badge { diff --git a/less/breadcrumbs.less b/less/breadcrumbs.less index 60b33ea72b..5917778f4f 100644 --- a/less/breadcrumbs.less +++ b/less/breadcrumbs.less @@ -4,7 +4,7 @@ .breadcrumb { - padding: 8px 15px; + padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal; margin-bottom: @line-height-computed; list-style: none; background-color: @breadcrumb-bg; diff --git a/less/button-groups.less b/less/button-groups.less index c253576225..794839d62b 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -2,37 +2,6 @@ // Button groups // -------------------------------------------------- -// Button carets -// -// Match the button text color to the arrow/caret for indicating dropdown-ness. - -.caret { - .btn-default & { - border-top-color: @btn-default-color; - } - .btn-primary &, - .btn-success &, - .btn-warning &, - .btn-danger &, - .btn-info & { - border-top-color: #fff; - } -} -.dropup { - .btn-default .caret { - border-bottom-color: @btn-default-color; - } - .btn-primary, - .btn-success, - .btn-warning, - .btn-danger, - .btn-info { - .caret { - border-bottom-color: #fff; - } - } -} - // Make the div behave like a button .btn-group, .btn-group-vertical { @@ -68,18 +37,17 @@ // Optional: Group multiple button groups together for a toolbar .btn-toolbar { - .clearfix(); + margin-left: -5px; // Offset the first child's margin + &:extend(.clearfix all); - .btn-group { + .btn-group, + .input-group { float: left; } - // Space out series of button groups > .btn, - > .btn-group { - + .btn, - + .btn-group { - margin-left: 5px; - } + > .btn-group, + > .input-group { + margin-left: 5px; } } @@ -178,7 +146,8 @@ .btn-group-vertical { > .btn, - > .btn-group { + > .btn-group, + > .btn-group > .btn { display: block; float: none; width: 100%; @@ -187,7 +156,7 @@ // Clear floats so dropdown menus can be properly placed > .btn-group { - .clearfix(); + &:extend(.clearfix all); > .btn { float: none; } @@ -238,11 +207,15 @@ width: 100%; table-layout: fixed; border-collapse: separate; - .btn { + > .btn, + > .btn-group { float: none; display: table-cell; width: 1%; } + > .btn-group .btn { + width: 100%; + } } diff --git a/less/buttons.less b/less/buttons.less index a0909606f4..b728f332c1 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -6,7 +6,6 @@ // Base styles // -------------------------------------------------- -// Core styles .btn { display: inline-block; margin-bottom: 0; // For input.btn @@ -45,7 +44,6 @@ .opacity(.65); .box-shadow(none); } - } @@ -58,6 +56,10 @@ .btn-primary { .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); } +// Success appears as green +.btn-success { + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); +} // Warning appears as orange .btn-warning { .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); @@ -66,10 +68,6 @@ .btn-danger { .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); } -// Success appears as green -.btn-success { - .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); -} // Info appears as blue-green .btn-info { .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); @@ -123,13 +121,12 @@ // line-height: ensure even-numbered height of button next to large input .button-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); } -.btn-sm, -.btn-xs { +.btn-sm { // line-height: ensure proper height of button next to small input .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); } .btn-xs { - padding: 1px 5px; + .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small); } diff --git a/less/carousel.less b/less/carousel.less index 317963b7fb..e53365df43 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -91,6 +91,7 @@ // Hover/focus state &:hover, &:focus { + outline: none; color: @carousel-control-color; text-decoration: none; .opacity(.9); diff --git a/less/code.less b/less/code.less index 44e9e89375..3eed26c05b 100644 --- a/less/code.less +++ b/less/code.less @@ -21,6 +21,16 @@ code { border-radius: @border-radius-base; } +// User input typically entered via keyboard +kbd { + padding: 2px 4px; + font-size: 90%; + color: @kbd-color; + background-color: @kbd-bg; + border-radius: @border-radius-small; + box-shadow: inset 0 -1px 0 rgba(0,0,0,.25); +} + // Blocks of code pre { display: block; diff --git a/less/dropdowns.less b/less/dropdowns.less index 5d7e0fb4e1..dde2038e38 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -10,12 +10,9 @@ height: 0; margin-left: 2px; vertical-align: middle; - border-top: @caret-width-base solid @dropdown-caret-color; + border-top: @caret-width-base solid; border-right: @caret-width-base solid transparent; border-left: @caret-width-base solid transparent; - // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed, - // we can just straight up remove this. - border-bottom: 0 dotted; } // The dropdown wrapper (div) @@ -49,6 +46,8 @@ background-clip: padding-box; // Aligns the dropdown menu to right + // + // Deprecated as of 3.1 in favor of `.dropdown-menu-[dir]` &.pull-right { right: 0; left: auto; @@ -129,6 +128,25 @@ } } +// Menu positioning +// +// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown +// menu with the parent. +.dropdown-menu-right { + left: auto; // Reset the default from `.dropdown-menu` + right: 0; +} +// With v3, we enabled auto-flipping if you have a dropdown within a right +// aligned nav component. To enable the undoing of that, we provide an override +// to restore the default dropdown menu alignment. +// +// This is only for left-aligning a dropdown menu within a `.navbar-right` or +// `.pull-right` nav component. +.dropdown-menu-left { + left: 0; + right: auto; +} + // Dropdown section headers .dropdown-header { display: block; @@ -145,7 +163,7 @@ right: 0; bottom: 0; top: 0; - z-index: @zindex-dropdown - 10; + z-index: (@zindex-dropdown - 10); } // Right aligned dropdowns @@ -163,10 +181,8 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this - // gets fixed, restore `border-top: 0;`. - border-top: 0 dotted; - border-bottom: @caret-width-base solid @dropdown-caret-color; + border-top: 0; + border-bottom: @caret-width-base solid; content: ""; } // Different positioning for bottom up menu @@ -185,7 +201,12 @@ @media (min-width: @grid-float-breakpoint) { .navbar-right { .dropdown-menu { - .pull-right > .dropdown-menu(); + .dropdown-menu-right(); + } + // Necessary for overrides of the default right aligned menu. + // Will remove come v4 in all likelihood. + .dropdown-menu-left { + .dropdown-menu-left(); } } } diff --git a/less/forms.less b/less/forms.less index a74babdb3a..f7fc5d66c8 100644 --- a/less/forms.less +++ b/less/forms.less @@ -89,7 +89,6 @@ output { font-size: @font-size-base; line-height: @line-height-base; color: @input-color; - vertical-align: middle; } @@ -123,7 +122,6 @@ output { font-size: @font-size-base; line-height: @line-height-base; color: @input-color; - vertical-align: middle; background-color: @input-bg; background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid @input-border; @@ -179,10 +177,8 @@ output { margin-top: 10px; margin-bottom: 10px; padding-left: 20px; - vertical-align: middle; label { display: inline; - margin-bottom: 0; font-weight: normal; cursor: pointer; } @@ -307,6 +303,12 @@ input[type="checkbox"], // In navbar-form, allow folks to *not* use `.form-group` .form-control { display: inline-block; + vertical-align: middle; + } + + // Override `width: 100%;` when not within a `.form-group` + select.form-control { + width: auto; } // Remove default margin on radios/checkboxes that were used for stacking, and @@ -318,6 +320,7 @@ input[type="checkbox"], margin-top: 0; margin-bottom: 0; padding-left: 0; + vertical-align: middle; } .radio input[type="radio"], .checkbox input[type="checkbox"] { @@ -345,6 +348,12 @@ input[type="checkbox"], margin-bottom: 0; padding-top: (@padding-base-vertical + 1); // Default padding plus a border } + // Account for padding we're adding to ensure the alignment and of help text + // and other content below items + .radio, + .checkbox { + min-height: (@line-height-computed + (@padding-base-vertical + 1)); + } // Make form groups behave like rows .form-group { diff --git a/less/glyphicons.less b/less/glyphicons.less index 9de2dd3b69..8a68f11efd 100644 --- a/less/glyphicons.less +++ b/less/glyphicons.less @@ -10,11 +10,11 @@ // Import the fonts @font-face { font-family: 'Glyphicons Halflings'; - src: url('@{icon-font-path}@{icon-font-name}.eot'); - src: url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype'), - url('@{icon-font-path}@{icon-font-name}.woff') format('woff'), - url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype'), - url('@{icon-font-path}@{icon-font-name}.svg#glyphicons_halflingsregular') format('svg'); + src: ~"url('@{icon-font-path}@{icon-font-name}.eot')"; + src: ~"url('@{icon-font-path}@{icon-font-name}.eot?#iefix') format('embedded-opentype')", + ~"url('@{icon-font-path}@{icon-font-name}.woff') format('woff')", + ~"url('@{icon-font-path}@{icon-font-name}.ttf') format('truetype')", + ~"url('@{icon-font-path}@{icon-font-name}.svg#glyphicons-halflingsregular') format('svg')"; } // Catchall baseclass diff --git a/less/grid.less b/less/grid.less index 67e78f760c..dfae6999b6 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,27 +2,56 @@ // Grid system // -------------------------------------------------- -// Set the container width, and override it for fixed navbars in media queries + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + .container { .container-fixed(); + + @media (min-width: @screen-sm) { + width: @container-sm; + } + @media (min-width: @screen-md) { + width: @container-md; + } + @media (min-width: @screen-lg-min) { + width: @container-lg; + } +} + + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + .container-fixed(); } -// mobile first defaults + +// Row +// +// Rows contain and clear the floats of your columns. + .row { .make-row(); } + +// Columns +// // Common styles for small and large grid columns + .make-grid-columns(); // Extra small grid // -// Grid classes for extra small devices like smartphones. No offset, push, or -// pull classes are present here due to the size of the target. -// -// Note that `.col-xs-12` doesn't get floated on purpose--there's no need since -// it's full-width. +// Columns, offsets, pushes, and pulls for extra small devices like +// smartphones. .make-grid-columns-float(xs); .make-grid(@grid-columns, xs, width); @@ -35,15 +64,8 @@ // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. -// -// Note that `.col-sm-12` doesn't get floated on purpose--there's no need since -// it's full-width. @media (min-width: @screen-sm-min) { - .container { - width: @container-sm; - } - .make-grid-columns-float(sm); .make-grid(@grid-columns, sm, width); .make-grid(@grid-columns, sm, pull); @@ -55,15 +77,8 @@ // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. -// -// Note that `.col-md-12` doesn't get floated on purpose--there's no need since -// it's full-width. @media (min-width: @screen-md-min) { - .container { - width: @container-md; - } - .make-grid-columns-float(md); .make-grid(@grid-columns, md, width); .make-grid(@grid-columns, md, pull); @@ -75,19 +90,11 @@ // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. -// -// Note that `.col-lg-12` doesn't get floated on purpose--there's no need since -// it's full-width. @media (min-width: @screen-lg-min) { - .container { - width: @container-lg; - } - .make-grid-columns-float(lg); .make-grid(@grid-columns, lg, width); .make-grid(@grid-columns, lg, pull); .make-grid(@grid-columns, lg, push); .make-grid(@grid-columns, lg, offset); } - diff --git a/less/input-groups.less b/less/input-groups.less index a70decc583..0eb9a6fc4a 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -10,7 +10,7 @@ border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table // Undo padding and float of grid classes - &.col { + &[class*="col-"] { float: none; padding-left: 0; padding-right: 0; diff --git a/less/jumbotron.less b/less/jumbotron.less index 22c29780a9..0460b69d4b 100644 --- a/less/jumbotron.less +++ b/less/jumbotron.less @@ -12,7 +12,8 @@ color: @jumbotron-color; background-color: @jumbotron-bg; - h1 { + h1, + .h1 { line-height: 1; color: @jumbotron-heading-color; } @@ -24,6 +25,10 @@ border-radius: @border-radius-large; // Only round corners at higher resolutions if contained in a container } + .container { + max-width: 100%; + } + @media screen and (min-width: @screen-sm-min) { padding-top: (@jumbotron-padding * 1.6); padding-bottom: (@jumbotron-padding * 1.6); @@ -33,7 +38,8 @@ padding-right: (@jumbotron-padding * 2); } - h1 { + h1, + .h1 { font-size: (@font-size-base * 4.5); } } diff --git a/less/labels.less b/less/labels.less index cad5ce5160..5db1ed12c0 100644 --- a/less/labels.less +++ b/less/labels.less @@ -28,6 +28,12 @@ &:empty { display: none; } + + // Quick fix for labels in buttons + .btn & { + position: relative; + top: -1px; + } } // Colors diff --git a/less/list-group.less b/less/list-group.less index 2cee529733..35fff05d40 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -2,17 +2,21 @@ // List groups // -------------------------------------------------- + // Base class // // Easily usable on <ul>, <ol>, or <div>. + .list-group { // No need to set list-style: none; since .list-group-item is block level margin-bottom: 20px; padding-left: 0; // reset padding because ul and ol } + // Individual list items -// ------------------------- +// +// Use on `li`s or `div`s within the `.list-group` parent. .list-group-item { position: relative; @@ -41,7 +45,12 @@ } } + // Linked list items +// +// Use anchor elements instead of `li`s or `div`s to create linked list items. +// Includes an extra `.active` modifier class for showing selected items. + a.list-group-item { color: @list-group-link-color; @@ -75,8 +84,21 @@ a.list-group-item { } } + +// Contextual variants +// +// Add modifier classes to change text and background color on individual items. +// Organizationally, this must come after the `:hover` states. + +.list-group-item-variant(success; @state-success-bg; @state-success-text); +.list-group-item-variant(warning; @state-warning-bg; @state-warning-text); +.list-group-item-variant(danger; @state-danger-bg; @state-danger-text); +.list-group-item-variant(info; @state-info-bg; @state-info-text); + + // Custom content options -// ------------------------- +// +// Extra classes for creating well-formatted content within `.list-group-item`s. .list-group-item-heading { margin-top: 0; diff --git a/less/mixins.less b/less/mixins.less index 3d24e668a8..dbe9ed4a7a 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -19,8 +19,8 @@ .clearfix() { &:before, &:after { - content: " "; /* 1 */ - display: table; /* 2 */ + content: " "; // 1 + display: table; // 2 } &:after { clear: both; @@ -30,7 +30,7 @@ // WebKit-style focus .tab-focus() { // Default - outline: thin dotted #333; + outline: thin dotted; // WebKit outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; @@ -55,7 +55,8 @@ // Placeholder text .placeholder(@color: @input-color-placeholder) { &:-moz-placeholder { color: @color; } // Firefox 4-18 - &::-moz-placeholder { color: @color; } // Firefox 19+ + &::-moz-placeholder { color: @color; // Firefox 19+ + opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+ &::-webkit-input-placeholder { color: @color; } // Safari and Chrome } @@ -87,11 +88,7 @@ } // New mixin to use as of v3.0.1 .text-hide() { - font: ~"0/0" a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; + .hide-text(); } @@ -150,17 +147,17 @@ // Transformations .rotate(@degrees) { -webkit-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); // IE9+ + -ms-transform: rotate(@degrees); // IE9 only transform: rotate(@degrees); } -.scale(@ratio) { - -webkit-transform: scale(@ratio); - -ms-transform: scale(@ratio); // IE9+ - transform: scale(@ratio); +.scale(@ratio; @ratio-y...) { + -webkit-transform: scale(@ratio, @ratio-y); + -ms-transform: scale(@ratio, @ratio-y); // IE9 only + transform: scale(@ratio, @ratio-y); } .translate(@x; @y) { -webkit-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); // IE9+ + -ms-transform: translate(@x, @y); // IE9 only transform: translate(@x, @y); } .skew(@x; @y) { @@ -175,12 +172,12 @@ .rotateX(@degrees) { -webkit-transform: rotateX(@degrees); - -ms-transform: rotateX(@degrees); // IE9+ + -ms-transform: rotateX(@degrees); // IE9 only transform: rotateX(@degrees); } .rotateY(@degrees) { -webkit-transform: rotateY(@degrees); - -ms-transform: rotateY(@degrees); // IE9+ + -ms-transform: rotateY(@degrees); // IE9 only transform: rotateY(@degrees); } .perspective(@perspective) { @@ -196,6 +193,7 @@ .transform-origin(@origin) { -webkit-transform-origin: @origin; -moz-transform-origin: @origin; + -ms-transform-origin: @origin; // IE9 only transform-origin: @origin; } @@ -277,10 +275,8 @@ // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. .horizontal(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { - background-image: -webkit-gradient(linear, @start-percent top, @end-percent top, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(left, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ - background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 + background-image: -webkit-linear-gradient(left, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1-6, Chrome 10+ + background-image: linear-gradient(to right, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down } @@ -290,47 +286,36 @@ // Creates two color stops, start and end, by specifying a color and position for each color stop. // Color stops are not available in IE9 and below. .vertical(@start-color: #555; @end-color: #333; @start-percent: 0%; @end-percent: 100%) { - background-image: -webkit-gradient(linear, left @start-percent, left @end-percent, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+ - background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10 + background-image: -webkit-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // Safari 5.1-6, Chrome 10+ + background-image: linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ background-repeat: repeat-x; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down } .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { background-repeat: repeat-x; - background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1+, Chrome 10+ - background-image: -moz-linear-gradient(@deg, @start-color, @end-color); // FF 3.6+ - background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10 + background-image: -webkit-linear-gradient(@deg, @start-color, @end-color); // Safari 5.1-6, Chrome 10+ + background-image: linear-gradient(@deg, @start-color, @end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+ } .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); - background-image: -moz-linear-gradient(left, @start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(to right, @start-color, @mid-color @color-stop, @end-color); background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback } .vertical-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start-color), color-stop(@color-stop, @mid-color), to(@end-color)); background-image: -webkit-linear-gradient(@start-color, @mid-color @color-stop, @end-color); - background-image: -moz-linear-gradient(top, @start-color, @mid-color @color-stop, @end-color); background-image: linear-gradient(@start-color, @mid-color @color-stop, @end-color); background-repeat: no-repeat; filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback } .radial(@inner-color: #555; @outer-color: #333) { - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@inner-color), to(@outer-color)); background-image: -webkit-radial-gradient(circle, @inner-color, @outer-color); - background-image: -moz-radial-gradient(circle, @inner-color, @outer-color); background-image: radial-gradient(circle, @inner-color, @outer-color); background-repeat: no-repeat; } .striped(@color: rgba(255,255,255,.15); @angle: 45deg) { - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, @color), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, @color), color-stop(.75, @color), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, @color 25%, transparent 25%, transparent 50%, @color 50%, @color 75%, transparent 75%, transparent); } } @@ -369,7 +354,7 @@ // // Keep images from scaling beyond the width of their parents. -.img-responsive(@display: block;) { +.img-responsive(@display: block) { display: @display; max-width: 100%; // Part 1: Set a maximum relative to the parent height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching @@ -391,7 +376,7 @@ // Panels // ------------------------- -.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border;) { +.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { border-color: @border; & > .panel-heading { @@ -402,9 +387,6 @@ + .panel-collapse .panel-body { border-top-color: @border; } - & > .dropdown .caret { - border-color: @heading-text-color transparent; - } } & > .panel-footer { + .panel-collapse .panel-body { @@ -430,7 +412,7 @@ // Tables // ------------------------- -.table-row-variant(@state; @background; @border) { +.table-row-variant(@state; @background) { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. .table > thead > tr, @@ -456,6 +438,34 @@ } } +// List Groups +// ------------------------- +.list-group-item-variant(@state; @background; @color) { + .list-group-item-@{state} { + color: @color; + background-color: @background; + + a& { + color: @color; + + .list-group-item-heading { color: inherit; } + + &:hover, + &:focus { + color: @color; + background-color: darken(@background, 5%); + } + &.active, + &.active:hover, + &.active:focus { + color: #fff; + background-color: @color; + border-color: @color; + } + } + } +} + // Button variants // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, @@ -491,6 +501,11 @@ border-color: @border; } } + + .badge { + color: @background; + background-color: @color; + } } // Button sizes @@ -561,9 +576,10 @@ // More easily include all the states for responsive-utilities.less. .responsive-visibility() { display: block !important; - tr& { display: table-row !important; } + table& { display: table; } + tr& { display: table-row !important; } th&, - td& { display: table-cell !important; } + td& { display: table-cell !important; } } .responsive-invisibility() { @@ -583,14 +599,14 @@ margin-left: auto; padding-left: (@grid-gutter-width / 2); padding-right: (@grid-gutter-width / 2); - .clearfix(); + &:extend(.clearfix all); } // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { margin-left: (@gutter / -2); margin-right: (@gutter / -2); - .clearfix(); + &:extend(.clearfix all); } // Generate the extra small columns @@ -714,11 +730,11 @@ // Common styles for all sizes of grid columns, widths 1-12 .col(@index) when (@index = 1) { // initial @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; - .col(@index + 1, @item); + .col((@index + 1), @item); } .col(@index, @list) when (@index =< @grid-columns) { // general; "=<" isn't a typo @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}"; - .col(@index + 1, ~"@{list}, @{item}"); + .col((@index + 1), ~"@{list}, @{item}"); } .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { @@ -736,13 +752,13 @@ .make-grid-columns-float(@class) { .col(@index) when (@index = 1) { // initial @item: ~".col-@{class}-@{index}"; - .col(@index + 1, @item); + .col((@index + 1), @item); } - .col(@index, @list) when (@index < @grid-columns) { // general + .col(@index, @list) when (@index =< @grid-columns) { // general @item: ~".col-@{class}-@{index}"; - .col(@index + 1, ~"@{list}, @{item}"); + .col((@index + 1), ~"@{list}, @{item}"); } - .col(@index, @list) when (@index = @grid-columns) { // terminal + .col(@index, @list) when (@index > @grid-columns) { // terminal @{list} { float: left; } @@ -775,7 +791,7 @@ .make-grid(@index, @class, @type) when (@index >= 0) { .calc-grid(@index, @class, @type); // next iteration - .make-grid(@index - 1, @class, @type); + .make-grid((@index - 1), @class, @type); } diff --git a/less/modals.less b/less/modals.less index 99cf764695..ec1bf55dc9 100644 --- a/less/modals.less +++ b/less/modals.less @@ -22,7 +22,11 @@ right: 0; bottom: 0; left: 0; - z-index: @zindex-modal-background; + z-index: @zindex-modal; + + // Prevent Chrome on Windows from adding a focus outline. For details, see + // https://github.com/twbs/bootstrap/pull/10951. + outline: 0; // When fading in the modal, animate it to slide down &.fade .modal-dialog { @@ -35,11 +39,8 @@ // Shell div to position the modal with bottom padding .modal-dialog { position: relative; - margin-left: auto; - margin-right: auto; width: auto; - padding: 10px; - z-index: (@zindex-modal-background + 10); + margin: 10px; } // Actual modal @@ -62,11 +63,11 @@ right: 0; bottom: 0; left: 0; - z-index: (@zindex-modal-background - 10); + z-index: @zindex-modal-background; background-color: @modal-backdrop-bg; // Fade for backdrop &.fade { .opacity(0); } - &.in { .opacity(.5); } + &.in { .opacity(@modal-backdrop-opacity); } } // Modal header @@ -100,7 +101,7 @@ padding: (@modal-inner-padding - 1) @modal-inner-padding @modal-inner-padding; text-align: right; // right align buttons border-top: 1px solid @modal-footer-border-color; - .clearfix(); // clear it in case folks use .pull-* classes on buttons + &:extend(.clearfix all); // clear it in case folks use .pull-* classes on buttons // Properly space out buttons .btn + .btn { @@ -118,15 +119,19 @@ } // Scale up the modal -@media screen and (min-width: @screen-sm-min) { +@media (min-width: @screen-sm-min) { + // Automatically set modal's width for larger viewports .modal-dialog { width: 600px; - padding-top: 30px; - padding-bottom: 30px; + margin: 30px auto; } .modal-content { .box-shadow(0 5px 15px rgba(0,0,0,.5)); } + // Modal sizes + .modal-sm { width: @modal-sm; } + .modal-lg { width: @modal-lg; } + } diff --git a/less/navbar.less b/less/navbar.less index 987cde6b05..d96f85e306 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -15,7 +15,7 @@ border: 1px solid transparent; // Prevent floats from breaking the navbar - .clearfix(); + &:extend(.clearfix all); @media (min-width: @grid-float-breakpoint) { border-radius: @navbar-border-radius; @@ -29,7 +29,7 @@ // styling of responsive aspects. .navbar-header { - .clearfix(); + &:extend(.clearfix all); @media (min-width: @grid-float-breakpoint) { float: left; @@ -54,7 +54,7 @@ padding-left: @navbar-padding-horizontal; border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - .clearfix(); + &:extend(.clearfix all); -webkit-overflow-scrolling: touch; &.in { @@ -74,18 +74,16 @@ } &.in { - overflow-y: auto; + overflow-y: visible; } - // Account for first and last children spacing - .navbar-nav.navbar-left:first-child { - margin-left: -@navbar-padding-horizontal; - } - .navbar-nav.navbar-right:last-child { - margin-right: -@navbar-padding-horizontal; - } - .navbar-text:last-child { - margin-right: 0; + // Undo the collapse side padding for navbars with containers to ensure + // alignment of right-aligned contents. + .navbar-fixed-top &, + .navbar-static-top &, + .navbar-fixed-bottom & { + padding-left: 0; + padding-right: 0; } } } @@ -95,14 +93,17 @@ // // When a container is present, change the behavior of the header and collapse. -.container > .navbar-header, -.container > .navbar-collapse { - margin-right: -@navbar-padding-horizontal; - margin-left: -@navbar-padding-horizontal; +.container, +.container-fluid { + > .navbar-header, + > .navbar-collapse { + margin-right: -@navbar-padding-horizontal; + margin-left: -@navbar-padding-horizontal; - @media (min-width: @grid-float-breakpoint) { - margin-right: 0; - margin-left: 0; + @media (min-width: @grid-float-breakpoint) { + margin-right: 0; + margin-left: 0; + } } } @@ -160,8 +161,16 @@ text-decoration: none; } + // Prevent Glyphicons from increasing height of navbar + > .glyphicon { + float: left; + margin-top: -2px; + margin-right: 5px; + } + @media (min-width: @grid-float-breakpoint) { - .navbar > .container & { + .navbar > .container &, + .navbar > .container-fluid & { margin-left: -@navbar-padding-horizontal; } } @@ -180,6 +189,7 @@ padding: 9px 10px; .navbar-vertical-align(34px); background-color: transparent; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 border: 1px solid transparent; border-radius: @border-radius-base; @@ -214,7 +224,7 @@ line-height: @line-height-computed; } - @media (max-width: @screen-xs-max) { + @media (max-width: @grid-float-breakpoint-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { position: static; @@ -246,12 +256,15 @@ > li { float: left; > a { - padding-top: ((@navbar-height - @line-height-computed) / 2); - padding-bottom: ((@navbar-height - @line-height-computed) / 2); + padding-top: @navbar-padding-vertical; + padding-bottom: @navbar-padding-vertical; } } - } + &.navbar-right:last-child { + margin-right: -@navbar-padding-horizontal; + } + } } @@ -285,7 +298,7 @@ .form-inline(); .form-group { - @media (max-width: @screen-xs-max) { + @media (max-width: @grid-float-breakpoint-max) { margin-bottom: 5px; } } @@ -302,6 +315,11 @@ padding-top: 0; padding-bottom: 0; .box-shadow(none); + + // Outdent the form if last child to line up with content down the page + &.navbar-right:last-child { + margin-right: -@navbar-padding-horizontal; + } } } @@ -318,13 +336,6 @@ .border-bottom-radius(0); } -// Right aligned menus need alt position -.navbar-nav.pull-right > li > .dropdown-menu, -.navbar-nav > li > .dropdown-menu.pull-right { - left: auto; - right: 0; -} - // Buttons in navbars // @@ -332,6 +343,13 @@ .navbar-btn { .navbar-vertical-align(@input-height-base); + + &.btn-sm { + .navbar-vertical-align(@input-height-small); + } + &.btn-xs { + .navbar-vertical-align(22); + } } @@ -340,12 +358,17 @@ // Add a class to make any element properly align itself vertically within the navbars. .navbar-text { - float: left; .navbar-vertical-align(@line-height-computed); @media (min-width: @grid-float-breakpoint) { + float: left; margin-left: @navbar-padding-horizontal; margin-right: @navbar-padding-horizontal; + + // Outdent the form if last child to line up with content down the page + &.navbar-right:last-child { + margin-right: 0; + } } } @@ -414,15 +437,8 @@ border-color: @navbar-default-border; } - // Dropdown menu items and carets + // Dropdown menu items .navbar-nav { - // Caret should match text color on hover - > .dropdown > a:hover .caret, - > .dropdown > a:focus .caret { - border-top-color: @navbar-default-link-hover-color; - border-bottom-color: @navbar-default-link-hover-color; - } - // Remove background color from open dropdown > .open > a { &, @@ -430,19 +446,10 @@ &:focus { background-color: @navbar-default-link-active-bg; color: @navbar-default-link-active-color; - .caret { - border-top-color: @navbar-default-link-active-color; - border-bottom-color: @navbar-default-link-active-color; - } } } - > .dropdown > a .caret { - border-top-color: @navbar-default-link-color; - border-bottom-color: @navbar-default-link-color; - } - - @media (max-width: @screen-xs-max) { + @media (max-width: @grid-float-breakpoint-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { > li > a { @@ -561,31 +568,16 @@ color: @navbar-inverse-link-active-color; } } - > .dropdown > a:hover .caret { - border-top-color: @navbar-inverse-link-hover-color; - border-bottom-color: @navbar-inverse-link-hover-color; - } - > .dropdown > a .caret { - border-top-color: @navbar-inverse-link-color; - border-bottom-color: @navbar-inverse-link-color; - } - > .open > a { - &, - &:hover, - &:focus { - .caret { - border-top-color: @navbar-inverse-link-active-color; - border-bottom-color: @navbar-inverse-link-active-color; - } - } - } - @media (max-width: @screen-xs-max) { + @media (max-width: @grid-float-breakpoint-max) { // Dropdowns get custom display .open .dropdown-menu { > .dropdown-header { border-color: @navbar-inverse-border; } + .divider { + background-color: @navbar-inverse-border; + } > li > a { color: @navbar-inverse-link-color; &:hover, diff --git a/less/navs.less b/less/navs.less index 6cddcd494e..e4ac144595 100644 --- a/less/navs.less +++ b/less/navs.less @@ -10,7 +10,7 @@ margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; - .clearfix(); + &:extend(.clearfix all); > li { position: relative; @@ -48,11 +48,6 @@ &:focus { background-color: @nav-link-hover-bg; border-color: @link-color; - - .caret { - border-top-color: @link-hover-color; - border-bottom-color: @link-hover-color; - } } } @@ -138,11 +133,6 @@ &:focus { color: @nav-pills-active-link-hover-color; background-color: @nav-pills-active-link-hover-bg; - - .caret { - border-top-color: @nav-pills-active-link-hover-color; - border-bottom-color: @nav-pills-active-link-hover-color; - } } } } @@ -243,16 +233,6 @@ // Dropdowns // ------------------------- -// 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; -} - // Specific dropdowns .nav-tabs .dropdown-menu { // make dropdown border overlap tab border diff --git a/less/pager.less b/less/pager.less index 16993ddc82..5205f0ee5b 100644 --- a/less/pager.less +++ b/less/pager.less @@ -8,7 +8,7 @@ margin: @line-height-computed 0; list-style: none; text-align: center; - .clearfix(); + &:extend(.clearfix all); li { display: inline; > a, diff --git a/less/panels.less b/less/panels.less index a107ff1d48..ad133ad216 100644 --- a/less/panels.less +++ b/less/panels.less @@ -14,8 +14,8 @@ // Panel contents .panel-body { - padding: 15px; - .clearfix(); + padding: @panel-body-padding; + &:extend(.clearfix all); } @@ -57,13 +57,17 @@ .panel { > .table, - > .table-responsive { + > .table-responsive > .table { margin-bottom: 0; } > .panel-body + .table, > .panel-body + .table-responsive { border-top: 1px solid @table-border-color; } + > .table > tbody:first-child th, + > .table > tbody:first-child td { + border-top: 0; + } > .table-bordered, > .table-responsive > .table-bordered { border: 0; @@ -87,6 +91,10 @@ } } } + > .table-responsive { + border: 0; + margin-bottom: 0; + } } @@ -94,7 +102,7 @@ .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; - .border-top-radius(@panel-border-radius - 1); + .border-top-radius((@panel-border-radius - 1)); > .dropdown .dropdown-toggle { color: inherit; @@ -106,6 +114,8 @@ margin-top: 0; margin-bottom: 0; font-size: ceil((@font-size-base * 1.125)); + color: inherit; + > a { color: inherit; } @@ -116,7 +126,7 @@ padding: 10px 15px; background-color: @panel-footer-bg; border-top: 1px solid @panel-inner-border; - .border-bottom-radius(@panel-border-radius - 1); + .border-bottom-radius((@panel-border-radius - 1)); } diff --git a/less/progress-bars.less b/less/progress-bars.less index 507c82dbdc..76c87be17c 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -12,18 +12,6 @@ to { background-position: 0 0; } } -// Firefox -@-moz-keyframes progress-bar-stripes { - from { background-position: 40px 0; } - to { background-position: 0 0; } -} - -// Opera -@-o-keyframes progress-bar-stripes { - from { background-position: 0 0; } - to { background-position: 40px 0; } -} - // Spec and IE10+ @keyframes progress-bar-stripes { from { background-position: 40px 0; } diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index df53e479dd..5a31816af0 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -23,187 +23,71 @@ // Visibility utilities - .visible-xs { .responsive-invisibility(); + @media (max-width: @screen-xs-max) { .responsive-visibility(); } - &.visible-sm { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .responsive-visibility(); - } - } - &.visible-md { - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - .responsive-visibility(); - } - } - &.visible-lg { - @media (min-width: @screen-lg-min) { - .responsive-visibility(); - } - } } .visible-sm { .responsive-invisibility(); - &.visible-xs { - @media (max-width: @screen-xs-max) { - .responsive-visibility(); - } - } + @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .responsive-visibility(); } - &.visible-md { - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - .responsive-visibility(); - } - } - &.visible-lg { - @media (min-width: @screen-lg-min) { - .responsive-visibility(); - } - } } .visible-md { .responsive-invisibility(); - &.visible-xs { - @media (max-width: @screen-xs-max) { - .responsive-visibility(); - } - } - &.visible-sm { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .responsive-visibility(); - } - } + @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .responsive-visibility(); } - &.visible-lg { - @media (min-width: @screen-lg-min) { - .responsive-visibility(); - } - } } .visible-lg { .responsive-invisibility(); - &.visible-xs { - @media (max-width: @screen-xs-max) { - .responsive-visibility(); - } - } - &.visible-sm { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .responsive-visibility(); - } - } - &.visible-md { - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - .responsive-visibility(); - } - } + @media (min-width: @screen-lg-min) { .responsive-visibility(); } } .hidden-xs { - .responsive-visibility(); @media (max-width: @screen-xs-max) { .responsive-invisibility(); } - &.hidden-sm { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .responsive-invisibility(); - } - } - &.hidden-md { - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - .responsive-invisibility(); - } - } - &.hidden-lg { - @media (min-width: @screen-lg-min) { - .responsive-invisibility(); - } - } } .hidden-sm { - .responsive-visibility(); - &.hidden-xs { - @media (max-width: @screen-xs-max) { - .responsive-invisibility(); - } - } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - &.hidden-md { - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - .responsive-invisibility(); - } - } - &.hidden-lg { - @media (min-width: @screen-lg-min) { - .responsive-invisibility(); - } - } } .hidden-md { - .responsive-visibility(); - &.hidden-xs { - @media (max-width: @screen-xs-max) { - .responsive-invisibility(); - } - } - &.hidden-sm { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .responsive-invisibility(); - } - } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { .responsive-invisibility(); } - &.hidden-lg { - @media (min-width: @screen-lg-min) { - .responsive-invisibility(); - } - } } .hidden-lg { - .responsive-visibility(); - &.hidden-xs { - @media (max-width: @screen-xs-max) { - .responsive-invisibility(); - } - } - &.hidden-sm { - @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { - .responsive-invisibility(); - } - } - &.hidden-md { - @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { - .responsive-invisibility(); - } - } @media (min-width: @screen-lg-min) { .responsive-invisibility(); } } + // Print utilities +// +// Media queries are placed on the inside to be mixin-friendly. + .visible-print { .responsive-invisibility(); -} -@media print { - .visible-print { + @media print { .responsive-visibility(); } - .hidden-print { +} + +.hidden-print { + @media print { .responsive-invisibility(); } } diff --git a/less/tables.less b/less/tables.less index 4c4284cb1d..f8c05fecf3 100644 --- a/less/tables.less +++ b/less/tables.less @@ -133,6 +133,7 @@ th { // Reset default table behavior table col[class*="col-"] { + position: static; // Prevent border hiding in Firefox and IE9/10 (see https://github.com/twbs/bootstrap/issues/11623) float: none; display: table-column; } @@ -152,25 +153,12 @@ table { // Exact selectors below required to override `.table-striped` and prevent // inheritance to nested tables. -.table { - > thead, - > tbody, - > tfoot { - > tr { - > td.active, - > th.active, - &.active > td, - &.active > th { - background-color: @table-bg-active; - } - } - } -} - // Generate the contextual variants -.table-row-variant(success; @state-success-bg; @state-success-border); -.table-row-variant(danger; @state-danger-bg; @state-danger-border); -.table-row-variant(warning; @state-warning-bg; @state-warning-border); +.table-row-variant(active; @table-bg-active); +.table-row-variant(success; @state-success-bg); +.table-row-variant(warning; @state-warning-bg); +.table-row-variant(danger; @state-danger-bg); +.table-row-variant(info; @state-info-bg); // Responsive tables diff --git a/less/thumbnails.less b/less/thumbnails.less index bc4178bbff..11aa283a0e 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -5,11 +5,17 @@ // Mixin and adjust the regular image class .thumbnail { - .img-thumbnail(); - display: block; // Override the inline-block from `.img-thumbnail` + display: block; + padding: @thumbnail-padding; margin-bottom: @line-height-computed; + line-height: @line-height-base; + background-color: @thumbnail-bg; + border: 1px solid @thumbnail-border; + border-radius: @thumbnail-border-radius; + .transition(all .2s ease-in-out); - > img { + > img, + a > img { .img-responsive(); margin-left: auto; margin-right: auto; diff --git a/less/type.less b/less/type.less index 437c70b768..24a581fe8b 100644 --- a/less/type.less +++ b/less/type.less @@ -3,15 +3,65 @@ // -------------------------------------------------- +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + font-family: @headings-font-family; + font-weight: @headings-font-weight; + line-height: @headings-line-height; + color: @headings-color; + + small, + .small { + font-weight: normal; + line-height: 1; + color: @headings-small-color; + } +} + +h1, +h2, +h3 { + margin-top: @line-height-computed; + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 65%; + } +} +h4, +h5, +h6 { + margin-top: (@line-height-computed / 2); + margin-bottom: (@line-height-computed / 2); + + small, + .small { + font-size: 75%; + } +} + +h1, .h1 { font-size: @font-size-h1; } +h2, .h2 { font-size: @font-size-h2; } +h3, .h3 { font-size: @font-size-h3; } +h4, .h4 { font-size: @font-size-h4; } +h5, .h5 { font-size: @font-size-h5; } +h6, .h6 { font-size: @font-size-h6; } + + // Body text // ------------------------- p { margin: 0 0 (@line-height-computed / 2); } + .lead { margin-bottom: @line-height-computed; - font-size: floor(@font-size-base * 1.15); + font-size: floor((@font-size-base * 1.15)); font-weight: 200; line-height: 1.4; @@ -70,55 +120,7 @@ cite { font-style: normal; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } - - -// Headings -// ------------------------- - -h1, h2, h3, h4, h5, h6, -.h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @headings-font-family; - font-weight: @headings-font-weight; - line-height: @headings-line-height; - color: @headings-color; - - small, - .small { - font-weight: normal; - line-height: 1; - color: @headings-small-color; - } -} - -h1, -h2, -h3 { - margin-top: @line-height-computed; - margin-bottom: (@line-height-computed / 2); - - small, - .small { - font-size: 65%; - } -} -h4, -h5, -h6 { - margin-top: (@line-height-computed / 2); - margin-bottom: (@line-height-computed / 2); - - small, - .small { - font-size: 75%; - } -} - -h1, .h1 { font-size: @font-size-h1; } -h2, .h2 { font-size: @font-size-h2; } -h3, .h3 { font-size: @font-size-h3; } -h4, .h4 { font-size: @font-size-h4; } -h5, .h5 { font-size: @font-size-h5; } -h6, .h6 { font-size: @font-size-h6; } +.text-justify { text-align: justify; } // Page header @@ -131,7 +133,6 @@ h6, .h6 { font-size: @font-size-h6; } } - // Lists // -------------------------------------------------- @@ -171,6 +172,7 @@ ol { // Description Lists dl { + margin-top: 0; // Remove browser default margin-bottom: @line-height-computed; } dt, @@ -200,7 +202,7 @@ dd { } dd { margin-left: @component-offset-horizontal; - .clearfix(); // Clear the floated `dt` if an empty `dd` is present + &:extend(.clearfix all); // Clear the floated `dt` if an empty `dd` is present } } } @@ -215,7 +217,7 @@ abbr[data-original-title] { cursor: help; border-bottom: 1px dotted @abbr-border-color; } -abbr.initialism { +.initialism { font-size: 90%; text-transform: uppercase; } @@ -233,7 +235,8 @@ blockquote { p:last-child { margin-bottom: 0; } - small { + small, + .small { display: block; line-height: @line-height-base; color: @blockquote-small-color; diff --git a/less/variables.less b/less/variables.less index e596215d06..a86e4e4b83 100644 --- a/less/variables.less +++ b/less/variables.less @@ -41,24 +41,24 @@ @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-serif: Georgia, "Times New Roman", Times, serif; -@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; +@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; @font-size-base: 14px; -@font-size-large: ceil(@font-size-base * 1.25); // ~18px -@font-size-small: ceil(@font-size-base * 0.85); // ~12px +@font-size-large: ceil((@font-size-base * 1.25)); // ~18px +@font-size-small: ceil((@font-size-base * 0.85)); // ~12px -@font-size-h1: floor(@font-size-base * 2.6); // ~36px -@font-size-h2: floor(@font-size-base * 2.15); // ~30px -@font-size-h3: ceil(@font-size-base * 1.7); // ~24px -@font-size-h4: ceil(@font-size-base * 1.25); // ~18px +@font-size-h1: floor((@font-size-base * 2.6)); // ~36px +@font-size-h2: floor((@font-size-base * 2.15)); // ~30px +@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px +@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px @font-size-h5: @font-size-base; -@font-size-h6: ceil(@font-size-base * 0.85); // ~12px +@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px @line-height-base: 1.428571429; // 20/14 -@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px -@headings-font-family: @font-family-base; +@headings-font-family: inherit; @headings-font-weight: 500; @headings-line-height: 1.1; @headings-color: inherit; @@ -84,6 +84,9 @@ @padding-small-vertical: 5px; @padding-small-horizontal: 10px; +@padding-xs-vertical: 1px; +@padding-xs-horizontal: 5px; + @line-height-large: 1.33; @line-height-small: 1.5; @@ -157,7 +160,7 @@ @input-color-placeholder: @gray-light; @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -@input-height-large: (floor(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); +@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); @legend-color: @gray-dark; @@ -186,6 +189,7 @@ @dropdown-header-color: @gray-light; +// Note: Deprecated @dropdown-caret-color as of v3.1.0 @dropdown-caret-color: #000; @@ -246,8 +250,13 @@ @grid-columns: 12; // Padding, to be divided by two and applied to the left and right of all columns @grid-gutter-width: 30px; -// Point at which the navbar stops collapsing + +// Navbar collapse + +// Point at which the navbar becomes uncollapsed @grid-float-breakpoint: @screen-sm-min; +// Point at which the navbar begins collapsing +@grid-float-breakpoint-max: (@grid-float-breakpoint - 1); // Navbar @@ -257,7 +266,7 @@ @navbar-height: 50px; @navbar-margin-bottom: @line-height-computed; @navbar-border-radius: @border-radius-base; -@navbar-padding-horizontal: floor(@grid-gutter-width / 2); +@navbar-padding-horizontal: floor((@grid-gutter-width / 2)); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @navbar-default-color: #777; @@ -280,7 +289,7 @@ // Navbar toggle @navbar-default-toggle-hover-bg: #ddd; -@navbar-default-toggle-icon-bar-bg: #ccc; +@navbar-default-toggle-icon-bar-bg: #888; @navbar-default-toggle-border-color: #ddd; @@ -321,7 +330,6 @@ @nav-disabled-link-hover-color: @gray-light; @nav-open-link-hover-color: #fff; -@nav-open-caret-border-color: #fff; // Tabs @nav-tabs-border-color: #ddd; @@ -369,25 +377,25 @@ @jumbotron-color: inherit; @jumbotron-bg: @gray-lighter; @jumbotron-heading-color: inherit; -@jumbotron-font-size: ceil(@font-size-base * 1.5); +@jumbotron-font-size: ceil((@font-size-base * 1.5)); // Form states and alerts // ------------------------- -@state-success-text: #468847; +@state-success-text: #3c763d; @state-success-bg: #dff0d8; @state-success-border: darken(spin(@state-success-bg, -10), 5%); -@state-info-text: #3a87ad; +@state-info-text: #31708f; @state-info-bg: #d9edf7; @state-info-border: darken(spin(@state-info-bg, -10), 7%); -@state-warning-text: #c09853; +@state-warning-text: #8a6d3b; @state-warning-bg: #fcf8e3; @state-warning-border: darken(spin(@state-warning-bg, -10), 5%); -@state-danger-text: #b94a48; +@state-danger-text: #a94442; @state-danger-bg: #f2dede; @state-danger-border: darken(spin(@state-danger-bg, -10), 5%); @@ -445,9 +453,13 @@ @modal-content-fallback-border-color: #999; @modal-backdrop-bg: #000; +@modal-backdrop-opacity: .5; @modal-header-border-color: #e5e5e5; @modal-footer-border-color: @modal-header-border-color; +@modal-lg: 900px; +@modal-sm: 300px; + // Alerts // ------------------------- @@ -502,8 +514,10 @@ // Panels // ------------------------- @panel-bg: #fff; -@panel-inner-border: #ddd; +@panel-body-padding: 15px; @panel-border-radius: @border-radius-base; + +@panel-inner-border: #ddd; @panel-footer-bg: #f5f5f5; @panel-default-text: @gray-dark; @@ -545,6 +559,7 @@ // Wells // ------------------------- @well-bg: #f5f5f5; +@well-border: darken(@well-bg, 7%); // Badges @@ -563,10 +578,12 @@ // Breadcrumbs // ------------------------- -@breadcrumb-bg: #f5f5f5; -@breadcrumb-color: #ccc; -@breadcrumb-active-color: @gray-light; -@breadcrumb-separator: "/"; +@breadcrumb-padding-vertical: 8px; +@breadcrumb-padding-horizontal: 15px; +@breadcrumb-bg: #f5f5f5; +@breadcrumb-color: #ccc; +@breadcrumb-active-color: @gray-light; +@breadcrumb-separator: "/"; // Carousel @@ -597,6 +614,9 @@ @code-color: #c7254e; @code-bg: #f9f2f4; +@kbd-color: #fff; +@kbd-bg: #333; + @pre-bg: #f5f5f5; @pre-color: @gray-dark; @pre-border-color: #ccc; diff --git a/less/wells.less b/less/wells.less index 865abc2eb6..15d072b0cd 100644 --- a/less/wells.less +++ b/less/wells.less @@ -9,7 +9,7 @@ padding: 19px; margin-bottom: 20px; background-color: @well-bg; - border: 1px solid darken(@well-bg, 7%); + border: 1px solid @well-border; border-radius: @border-radius-base; .box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); blockquote { |