diff options
| author | Jacob Thornton <[email protected]> | 2013-08-07 23:10:11 -0700 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2013-08-07 23:10:11 -0700 |
| commit | 89b69ed77035eeb9c0034534d75fdb2062f10d47 (patch) | |
| tree | 99b1f65ee730de94e64b4992e5131f0432743b1e /less | |
| parent | b35b65d0b3689f7999be998411e632046548af6e (diff) | |
| parent | f3104a3e3b04c2817094ef8ebd351833a4ade420 (diff) | |
| download | bootstrap-89b69ed77035eeb9c0034534d75fdb2062f10d47.tar.xz bootstrap-89b69ed77035eeb9c0034534d75fdb2062f10d47.zip | |
Merge branch '3.0.0-wip' of github.com:twbs/bootstrap into 3.0.0-wip
Conflicts:
_layouts/customize.html
Diffstat (limited to 'less')
| -rw-r--r-- | less/carousel.less | 2 | ||||
| -rw-r--r-- | less/dropdowns.less | 2 | ||||
| -rw-r--r-- | less/grid.less | 2 | ||||
| -rw-r--r-- | less/list-group.less | 7 | ||||
| -rw-r--r-- | less/mixins.less | 45 | ||||
| -rw-r--r-- | less/navbar.less | 19 | ||||
| -rw-r--r-- | less/panels.less | 35 | ||||
| -rw-r--r-- | less/scaffolding.less | 14 | ||||
| -rw-r--r-- | less/tables.less | 2 | ||||
| -rw-r--r-- | less/tooltip.less | 2 | ||||
| -rw-r--r-- | less/variables.less | 12 |
11 files changed, 76 insertions, 66 deletions
diff --git a/less/carousel.less b/less/carousel.less index 045cd52f3..fbb479904 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -81,13 +81,11 @@ // Set gradients for backgrounds &.left { #gradient > .horizontal(@start-color: rgba(0,0,0,.5); @end-color: rgba(0,0,0,.0001)); - background-color: transparent; } &.right { left: auto; right: 0; #gradient > .horizontal(@start-color: rgba(0,0,0,.0001); @end-color: rgba(0,0,0,.5)); - background-color: transparent; } // Hover/focus state diff --git a/less/dropdowns.less b/less/dropdowns.less index 675300de5..0dda5c9ce 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -74,6 +74,7 @@ text-decoration: none; color: @dropdown-link-hover-color; #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%)); + background-color: darken(@dropdown-link-hover-bg, 5%); } } @@ -87,6 +88,7 @@ text-decoration: none; outline: 0; #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%)); + background-color: darken(@dropdown-link-active-bg, 5%); } } diff --git a/less/grid.less b/less/grid.less index 395a7947f..5142feb65 100644 --- a/less/grid.less +++ b/less/grid.less @@ -92,7 +92,7 @@ .col-12 { width: 100%; } // Small device columns (phones to tablets) -@media (min-width: @screen-tablet) { +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .container { max-width: @container-tablet; } diff --git a/less/list-group.less b/less/list-group.less index c0eb5f75a..1abc6eb7b 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -25,11 +25,11 @@ // Round the first and last items &:first-child { - .border-top-radius(@border-radius-base); + .border-top-radius(@list-group-border-radius); } &:last-child { margin-bottom: 0; - .border-bottom-radius(@border-radius-base); + .border-bottom-radius(@list-group-border-radius); } // Align badges within list items @@ -37,6 +37,9 @@ float: right; margin-right: -15px; } + > .badge + .badge { + margin-right: 0; + } } // Custom content options diff --git a/less/mixins.less b/less/mixins.less index b31619521..54fe4c21c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -236,7 +236,6 @@ // 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-color: @end-color; 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+ @@ -250,7 +249,6 @@ // 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-color: @end-color; 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+ @@ -260,14 +258,12 @@ } .directional(@start-color: #555; @end-color: #333; @deg: 45deg) { - background-color: @end-color; 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 } .horizontal-three-colors(@start-color: #00b3ee; @mid-color: #7a43b6; @color-stop: 50%; @end-color: #c3325f) { - background-color: mix(@mid-color, @end-color, 80%); 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); @@ -275,9 +271,7 @@ 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-color: mix(@mid-color, @end-color, 80%); 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); @@ -286,7 +280,6 @@ 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-color: @outer-color; 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); @@ -294,7 +287,6 @@ background-repeat: no-repeat; } .striped(@color: #555; @angle: 45deg) { - background-color: @color; background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); @@ -345,6 +337,17 @@ background-color: @color; } +// Panels +// ------------------------- +.panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { + border-color: @border; + .panel-heading { + color: @heading-text-color; + background-color: @heading-bg-color; + border-color: @heading-border; + } +} + // Alerts // ------------------------- .alert-variant(@background; @border; @text-color) { @@ -449,30 +452,32 @@ } // Creates a wrapper for a series of columns -.make-row() { +.make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); - @media (min-width: @screen-small) { - margin-left: (@grid-gutter-width / -2); - margin-right: (@grid-gutter-width / -2); + .container & { + @media (min-width: @screen-small) { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } } // Negative margin nested rows out to align the content of columns .row { - margin-left: (@grid-gutter-width / -2); - margin-right: (@grid-gutter-width / -2); + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); } } // Generate the columns -.make-column(@columns) { +.make-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { @@ -499,14 +504,14 @@ } // Generate the small columns -.make-small-column(@columns) { +.make-small-column(@columns; @gutter: @grid-gutter-width) { position: relative; float: left; // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); @max-width: (@grid-float-breakpoint - 1); // Calculate width based on number of columns available diff --git a/less/navbar.less b/less/navbar.less index 2efc3545b..c2872e64a 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -20,8 +20,6 @@ // ------------------------- .navbar-nav { - // Space out from .navbar .brand and .btn-navbar when stacked in mobile views - margin-top: 10px; margin-bottom: 15px; > li > a { @@ -82,14 +80,26 @@ } .navbar-fixed-top { top: 0; - .nav-collapse { - } } .navbar-fixed-bottom { bottom: 0; margin-bottom: 0; // override .navbar defaults } +.nav-collapse { + // Space out collapsed contents within the mobile navbar + padding-bottom: @navbar-padding-vertical; + // Clear floated elements and prevent collapsing of padding + .clearfix(); + + // When there is no `.navbar-brand` present (which normally sits between the + // navbar brand and toggle), prevent the nav from overlapping the toggle. + .navbar-toggle + & { + width: 100%; + margin-top: @navbar-height; + } +} + // Scrollable navbar navigation // @@ -353,6 +363,7 @@ .nav-collapse.collapse { display: block !important; height: auto !important; + padding-bottom: 0; // Override default setting overflow: visible !important; } diff --git a/less/panels.less b/less/panels.less index 87a786524..df20975ee 100644 --- a/less/panels.less +++ b/less/panels.less @@ -64,42 +64,17 @@ // Contextual variations .panel-primary { - border-color: @panel-primary-border; - .panel-heading { - color: @panel-primary-text; - background-color: @panel-primary-heading-bg; - border-color: @panel-primary-border; - } + .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); } .panel-success { - border-color: @panel-success-border; - .panel-heading { - color: @panel-success-text; - background-color: @panel-success-heading-bg; - border-color: @panel-success-border; - } + .panel-variant(@panel-success-border; @panel-success-text; @panel-success-heading-bg; @panel-success-border); } .panel-warning { - border-color: @panel-warning-border; - .panel-heading { - color: @panel-warning-text; - background-color: @panel-warning-heading-bg; - border-color: @panel-warning-border; - } + .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border); } .panel-danger { - border-color: @panel-danger-border; - .panel-heading { - color: @panel-danger-text; - background-color: @panel-danger-heading-bg; - border-color: @panel-danger-border; - } + .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border); } .panel-info { - border-color: @panel-info-border; - .panel-heading { - color: @panel-info-text; - background-color: @panel-info-heading-bg; - border-color: @panel-info-border; - } + .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border); } diff --git a/less/scaffolding.less b/less/scaffolding.less index b6128dc5d..3909704bf 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -93,3 +93,17 @@ hr { border-top: 1px solid @hr-border; } +// Only display content to screen readers +// See: http://a11yproject.com/posts/how-to-hide-content/ +// ------------------------- + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; +} diff --git a/less/tables.less b/less/tables.less index 68e33dccd..b3c921dbb 100644 --- a/less/tables.less +++ b/less/tables.less @@ -162,7 +162,7 @@ table { > th.active, &.active > td, &.active > th { - background-color: @table-bg-hover; + background-color: @table-bg-active; } > td.success, > th.success, diff --git a/less/tooltip.less b/less/tooltip.less index 819b9dffd..5a95b8462 100644 --- a/less/tooltip.less +++ b/less/tooltip.less @@ -13,7 +13,7 @@ line-height: 1.4; .opacity(0); - &.in { .opacity(1); } + &.in { .opacity(.9); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } diff --git a/less/variables.less b/less/variables.less index 27b13c3ab..3a9430e2e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -197,14 +197,16 @@ @screen-medium: 992px; @screen-desktop: @screen-medium; -// So media queries don't overlap when required, provide a maximum -@screen-small-max: (@screen-medium - 1); -@screen-tablet-max: @screen-small-max; - // Large screen / wide desktop @screen-large: 1200px; @screen-large-desktop: @screen-large; +// So media queries don't overlap when required, provide a maximum +@screen-small-max: (@screen-medium - 1); +@screen-tablet-max: (@screen-desktop - 1); +@screen-desktop-max: (@screen-large-desktop - 1); + + // Grid system // -------------------------------------------------- @@ -356,7 +358,7 @@ // ------------------------- @tooltip-max-width: 200px; @tooltip-color: #fff; -@tooltip-bg: rgba(0,0,0,.9); +@tooltip-bg: #000; @tooltip-arrow-width: 5px; @tooltip-arrow-color: @tooltip-bg; |
