From 18a4082553e0ec86022ba76fddf413fbc5a8085d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Aug 2013 21:00:12 -0700 Subject: fixes #8935: add gutter width param to grid mixins --- less/mixins.less | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 92426cdfa..e678563ad 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -441,30 +441,30 @@ } // 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); + 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) { @@ -491,14 +491,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 -- cgit v1.2.3 From d1e712d84882953b7d2a43a8e70aa3b976da5fcd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Aug 2013 21:11:16 -0700 Subject: fixes #8959: only negative indent rows within .container (prevents horizontal scroll on full-width pages) --- less/mixins.less | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index e678563ad..2cf683c3a 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -445,9 +445,11 @@ // Then clear the floated columns .clearfix(); - @media (min-width: @screen-small) { - margin-left: (@gutter / -2); - margin-right: (@gutter / -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 -- cgit v1.2.3 From a8d95d4721e714a7e1d683e14e997faa5ccddaff Mon Sep 17 00:00:00 2001 From: adamjacobbecker Date: Tue, 6 Aug 2013 21:25:36 -0700 Subject: Improve accessibility (Section 508, WCAG) This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices. What was done - Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria) - Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users. - Advised users to always use label elements. For inline forms, they can hide them with `.sr-only` - Added 'Skip navigation' link - Added "Accessibility" section to getting-started.html. What *wasn't* done - Contrast issues (twbs#3572) - Tooltips (twbs#8469) - Documentation re: usage of icons, since they now live in a separate repo Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out. --- less/scaffolding.less | 14 ++++++++++++++ 1 file changed, 14 insertions(+) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index b6128dc5d..49cb16c25 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 { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} -- cgit v1.2.3 From 03258683ed73b84ab51448dc8c52e292fee8104a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 7 Aug 2013 00:28:44 -0700 Subject: property order --- less/scaffolding.less | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index 49cb16c25..3909704bf 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -98,12 +98,12 @@ hr { // ------------------------- .sr-only { - border: 0; - clip: rect(0 0 0 0); + position: absolute; + width: 1px; height: 1px; margin: -1px; - overflow: hidden; padding: 0; - position: absolute; - width: 1px; + overflow: hidden; + clip: rect(0 0 0 0); + border: 0; } -- cgit v1.2.3 From 2f786aa0c1be56219d8f0a2876b3adfcddb88038 Mon Sep 17 00:00:00 2001 From: geedmo Date: Wed, 7 Aug 2013 14:47:47 -0300 Subject: Update to use @list-group-border-radius --- less/list-group.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/list-group.less b/less/list-group.less index c0eb5f75a..a40da08a4 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 -- cgit v1.2.3 From a24bc28de8d29b72d1eff652459957cc59a9fbab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Wed, 7 Aug 2013 20:15:12 +0200 Subject: Added panel-variant mixin --- less/mixins.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 2cf683c3a..54fe4c21c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -337,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) { -- cgit v1.2.3 From f90ac58410fcc511531484341e12c79023369a17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Wed, 7 Aug 2013 20:19:12 +0200 Subject: Updated panels.less to use variant-panel mixin --- less/panels.less | 35 +++++------------------------------ 1 file changed, 5 insertions(+), 30 deletions(-) (limited to 'less') 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); } -- cgit v1.2.3 From 001e5d3da9c53474a61adda8046cb6d05901dcbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Wed, 7 Aug 2013 21:15:01 +0200 Subject: Added missing grid make-column mixins and fixed some inconsistencies make-column() was still been use to generate "medium size" columns (col-sm), while make-small-column was creating the default columns (col). I also changed @grid-float-breakpoint to @screen-small, as it was used in make-row() and I think it makes more sense here than the other. --- less/mixins.less | 61 +++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 47 insertions(+), 14 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 2cf683c3a..1ee11f989 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -459,8 +459,25 @@ } } -// Generate the columns +// Generate the default columns .make-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: (@gutter / 2); + padding-right: (@gutter / 2); + @max-width: (@screen-small - 1); + + // Calculate width based on number of columns available + @media (max-width: @max-width) { + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the small columns +.make-small-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; @@ -469,46 +486,62 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @grid-float-breakpoint) { + @media (min-width: @screen-small) { float: left; width: percentage((@columns / @grid-columns)); } } -// Generate the column offsets -.make-column-offset(@columns) { - @media (min-width: @grid-float-breakpoint) { +// Generate the small column offsets +.make-small-column-offset(@columns) { + @media (min-width: @screen-small) { margin-left: percentage((@columns / @grid-columns)); } } -.make-column-push(@columns) { - @media (min-width: @grid-float-breakpoint) { +.make-small-column-push(@columns) { + @media (min-width: @screen-small) { left: percentage((@columns / @grid-columns)); } } -.make-column-pull(@columns) { - @media (min-width: @grid-float-breakpoint) { +.make-small-column-pull(@columns) { + @media (min-width: @screen-small) { right: percentage((@columns / @grid-columns)); } } -// Generate the small columns -.make-small-column(@columns; @gutter: @grid-gutter-width) { +// Generate the large columns +.make-large-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: (@gutter / 2); padding-right: (@gutter / 2); - @max-width: (@grid-float-breakpoint - 1); // Calculate width based on number of columns available - @media (max-width: @max-width) { + @media (min-width: @screen-medium) { + float: left; width: percentage((@columns / @grid-columns)); } } +// Generate the large column offsets +.make-large-column-offset(@columns) { + @media (min-width: @screen-medium) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-large-column-push(@columns) { + @media (min-width: @screen-medium) { + left: percentage((@columns / @grid-columns)); + } +} +.make-large-column-pull(@columns) { + @media (min-width: @screen-medium) { + right: percentage((@columns / @grid-columns)); + } +} + // Form validation states // -- cgit v1.2.3 From 407c966736c93ca63509fa3e1bffff8c5dc6f946 Mon Sep 17 00:00:00 2001 From: Zac Wasielewski Date: Wed, 7 Aug 2013 16:47:49 -0400 Subject: Make visibility utility classes responsive when used as LESS mixins --- less/responsive-utilities.less | 68 +++++++++++++++++------------------------- 1 file changed, 28 insertions(+), 40 deletions(-) (limited to 'less') diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 38dd9639a..0815909cc 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -35,70 +35,58 @@ // Visibility utilities -// For Phones .visible-sm { .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-desktop) { + .responsive-invisibility(); + } } .visible-md { .responsive-invisibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-visibility(); + } + @media (min-width: @screen-desktop) { + .responsive-invisibility(); + } } .visible-lg { .responsive-invisibility(); -} - -.hidden-sm { - .responsive-invisibility(); -} -.hidden-md { - .responsive-visibility(); -} -.hidden-lg { - .responsive-visibility(); -} - - -// Tablets & small desktops only -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { - .visible-sm { + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - .visible-md { + @media (min-width: @screen-desktop) { .responsive-visibility(); } - .visible-lg { - .responsive-invisibility(); - } +} - .hidden-sm { +.hidden-sm { + .responsive-invisibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - .hidden-md { - .responsive-invisibility(); - } - .hidden-lg { + @media (min-width: @screen-desktop) { .responsive-visibility(); } } - -// For desktops -@media (min-width: @screen-desktop) { - .visible-sm { - .responsive-invisibility(); - } - .visible-md { +.hidden-md { + .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - .visible-lg { + @media (min-width: @screen-desktop) { .responsive-visibility(); } - - .hidden-sm { - .responsive-visibility(); - } - .hidden-md { +} +.hidden-lg { + .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - .hidden-lg { + @media (min-width: @screen-desktop) { .responsive-invisibility(); } } -- cgit v1.2.3 From f69833f9a92615dbad9cbd886f09b7e9e542b538 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Thu, 8 Aug 2013 12:21:27 +0200 Subject: Removed Glyphicons mention from carousel.less --- less/carousel.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/carousel.less b/less/carousel.less index fbb479904..8d31d7e49 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -97,7 +97,6 @@ } // Toggles - .glyphicon, .icon-prev, .icon-next { position: absolute; -- cgit v1.2.3 From d3a26a5afeb3bdb2e116c822c1505b716e66dacb Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Thu, 8 Aug 2013 12:07:27 -0700 Subject: Fix Find/Replace-o; good catch, @FagnerMartinsBrack! Problem introduced in 6b23a66c29c3613c6792a257aafa949c81746597 --- less/popovers.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/popovers.less b/less/popovers.less index c07350f95..3e26ac3d6 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -13,8 +13,8 @@ padding: 1px; text-align: left; // Reset given new insertion method background-color: @popover-bg; - -webkit-bg-clip: padding-box; - -moz-bg-clip: padding; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; background-clip: padding-box; border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-border-color; -- cgit v1.2.3 From ee62c37f17c7a741f6465f067a797881737e6fb3 Mon Sep 17 00:00:00 2001 From: liuyl Date: Fri, 9 Aug 2013 15:24:38 +0800 Subject: panels --- less/panels.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index df20975ee..c1158d14f 100644 --- a/less/panels.less +++ b/less/panels.less @@ -37,8 +37,7 @@ padding: 10px 15px; background-color: @panel-heading-bg; border-bottom: 1px solid @panel-border; - border-top-left-radius: (@panel-border-radius - 1); - border-top-right-radius: (@panel-border-radius - 1); + .border-top-radius(@panel-border-radius - 1); } // Within heading, strip any `h*` tag of it's default margins for spacing. @@ -58,8 +57,7 @@ padding: 10px 15px; background-color: @panel-footer-bg; border-top: 1px solid @panel-border; - border-bottom-left-radius: (@panel-border-radius - 1); - border-bottom-right-radius: (@panel-border-radius - 1); + .border-bottom-radius(@panel-border-radius - 1); } // Contextual variations -- cgit v1.2.3 From d557fa283952362b46b863b150b52ebfc51f1b71 Mon Sep 17 00:00:00 2001 From: liuyl Date: Fri, 9 Aug 2013 15:44:10 +0800 Subject: navbar.less --- less/navbar.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index c2872e64a..60f5fd4f7 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -186,13 +186,11 @@ // Menu position and menu carets .navbar-nav > li > .dropdown-menu { margin-top: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; + .border-top-radius(0); } // Menu position and menu caret support for dropups via extra dropup class .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + .border-bottom-radius(0); } // Dropdown menu items and carets -- cgit v1.2.3 From c07717ce47882a334a9dd86eb3e56adbd2d720fb Mon Sep 17 00:00:00 2001 From: Rakhat Jabagin Date: Fri, 9 Aug 2013 17:57:49 +0600 Subject: set img-circle class in percents --- less/scaffolding.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index b6128dc5d..b9c62912c 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -79,7 +79,7 @@ img { // Perfect circle .img-circle { - border-radius: 500px; // crank the border-radius so it works with most reasonably sized images + border-radius: 50%; // set radius in percents } -- cgit v1.2.3 From 6b6241feaa56e3d123fc6ff5f176c08747154324 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 12:43:43 -0700 Subject: fixes #9241: enable collapsing for labels, in addition to badges, when empty --- less/badges.less | 2 +- less/labels.less | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/badges.less b/less/badges.less index a87e556cb..0b69753ef 100644 --- a/less/badges.less +++ b/less/badges.less @@ -18,7 +18,7 @@ background-color: @badge-bg; border-radius: @badge-border-radius; - // Empty labels/badges collapse + // Empty badges collapse automatically (not available in IE8) &:empty { display: none; } diff --git a/less/labels.less b/less/labels.less index eee76d297..b746acbf8 100644 --- a/less/labels.less +++ b/less/labels.less @@ -23,6 +23,11 @@ cursor: pointer; } } + + // Empty labels collapse automatically (not available in IE8) + &:empty { + display: none; + } } // Colors -- cgit v1.2.3 From 0561cfec6bb0fc0738f9f1cf5f4463e96fa1c33c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 15:01:16 -0700 Subject: fixes #8900: nuke empty space between panel heading and list group --- less/panels.less | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index c1158d14f..c6d96b39f 100644 --- a/less/panels.less +++ b/less/panels.less @@ -11,8 +11,14 @@ border: 1px solid @panel-border; border-radius: @panel-border-radius; .box-shadow(0 1px 1px rgba(0,0,0,.05)); +} + +// List groups in panels +// +// By default, space out list group content from panel headings to account for +// any kind of custom content between the two. - // List groups in panels +.panel { .list-group { margin: 15px -15px -15px; @@ -30,6 +36,13 @@ } } } +// Collapse space between when there's no additional content. +.panel-heading + .list-group { + margin-top: -15px; + .list-group-item:first-child { + border-top-width: 0; + } +} // Optional heading .panel-heading { -- cgit v1.2.3 From 1ff1dfb2bd031832c725c146deb8b7363cfeadf5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 16:07:45 -0700 Subject: fixes #9348 by ditching a comment --- less/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 3a9430e2e..012f486b1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -226,7 +226,7 @@ @navbar-color: #777; @navbar-bg: #eee; @navbar-border-radius: @border-radius-base; -@navbar-padding-horizontal: floor(@grid-gutter-width / 2); // ~15px +@navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); // Navbar links -- cgit v1.2.3 From 8b76e0d0f0c5679f12935c4a3dad98917636702b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 17:23:19 -0700 Subject: addressing #9189 manually, part 1: code and pre vars --- less/code.less | 6 +++--- less/variables.less | 2 ++ 2 files changed, 5 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/code.less b/less/code.less index cd6132560..74a3a7a39 100644 --- a/less/code.less +++ b/less/code.less @@ -16,7 +16,7 @@ code { color: @code-color; background-color: @code-bg; white-space: nowrap; - border-radius: 4px; + border-radius: @border-radius-base; } // Blocks of code @@ -28,7 +28,7 @@ pre { line-height: @line-height-base; word-break: break-all; word-wrap: break-word; - color: @gray-dark; + color: @pre-color; background-color: @pre-bg; border: 1px solid @pre-border-color; border-radius: @border-radius-base; @@ -50,6 +50,6 @@ pre { // Enable scrollable blocks of code .pre-scrollable { - max-height: 340px; + max-height: @pre-scrollable-max-height; overflow-y: scroll; } diff --git a/less/variables.less b/less/variables.less index 012f486b1..991e6587c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -557,7 +557,9 @@ @code-bg: #f9f2f4; @pre-bg: #f5f5f5; +@pre-color: @gray-dark; @pre-border-color: #ccc; +@pre-scrollable-max-height: 340px; // Type // ------------------------ -- cgit v1.2.3 From 58b90dae1570eca6c921933742bf418ebf3ee47b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 17:47:30 -0700 Subject: addressing #9189 manually, part 2: dropdown header and disabled link colors (and refactor commenting styles) --- less/dropdowns.less | 21 ++++++--------------- less/variables.less | 3 +++ 2 files changed, 9 insertions(+), 15 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 0dda5c9ce..d40a82a46 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -4,7 +4,6 @@ // Dropdown arrow/caret -// -------------------- .caret { display: inline-block; width: 0; @@ -18,13 +17,11 @@ } // The dropdown wrapper (div) -// -------------------------- .dropdown { position: relative; } // The dropdown menu (ul) -// ---------------------- .dropdown-menu { position: absolute; top: 100%; @@ -67,7 +64,6 @@ } // Hover/Focus state -// ----------- .dropdown-menu > li > a { &:hover, &:focus { @@ -79,7 +75,6 @@ } // Active state -// ------------ .dropdown-menu > .active > a { &, &:hover, @@ -93,13 +88,14 @@ } // Disabled state -// -------------- +// // Gray out text and ensure the hover/focus state remains gray + .dropdown-menu > .disabled > a { &, &:hover, &:focus { - color: @gray-light; + color: @dropdown-link-disabled-color; } } // Nuke hover/focus effects @@ -115,7 +111,6 @@ } // Open state for the dropdown -// --------------------------- .open { // Show the menu > .dropdown-menu { @@ -129,19 +124,15 @@ } // Dropdown section headers -// --------------------------- .dropdown-header { display: block; padding: 3px 20px; font-size: @font-size-small; line-height: @line-height-base; - color: @gray-light; + color: @dropdown-header-color; } - - // Backdrop to catch body clicks on mobile, etc. -// --------------------------- .dropdown-backdrop { position: fixed; left: 0; @@ -152,16 +143,16 @@ } // Right aligned dropdowns -// --------------------------- .pull-right > .dropdown-menu { right: 0; left: auto; } // Allow for dropdowns to go bottom up (aka, dropup-menu) -// ------------------------------------------------------ +// // Just add .dropup after the standard .dropdown class and you're set, bro. // TODO: abstract this so that the navbar fixed styles are not placed here? + .dropup, .navbar-fixed-bottom .dropdown { // Reverse the caret diff --git a/less/variables.less b/less/variables.less index 991e6587c..910eebb8d 100644 --- a/less/variables.less +++ b/less/variables.less @@ -163,6 +163,9 @@ @dropdown-link-hover-color: #fff; @dropdown-link-hover-bg: @dropdown-link-active-bg; +@dropdown-link-disabled-color: @gray-light; + +@dropdown-header-color: @gray-light; @dropdown-caret-color: #000; -- cgit v1.2.3 From 286636755a42887a24ec48c8c2db57b32f0df000 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 17:47:53 -0700 Subject: spacing --- less/variables.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 910eebb8d..61d67ceed 100644 --- a/less/variables.less +++ b/less/variables.less @@ -166,6 +166,7 @@ @dropdown-link-disabled-color: @gray-light; @dropdown-header-color: @gray-light; + @dropdown-caret-color: #000; -- cgit v1.2.3 From 83f1a75e7a8ae4570641f1fcf88c2062373fff62 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 18:06:26 -0700 Subject: addressing #9189 manually, part 3: forms --- less/forms.less | 4 ++-- less/variables.less | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index d0211eb14..97527fdbf 100644 --- a/less/forms.less +++ b/less/forms.less @@ -20,7 +20,7 @@ legend { margin-bottom: @line-height-computed; font-size: (@font-size-base * 1.5); line-height: inherit; - color: @gray-dark; + color: @legend-color; border: 0; border-bottom: 1px solid @legend-border-color; } @@ -121,7 +121,7 @@ input[type="number"] { padding: @padding-base-vertical @padding-base-horizontal; font-size: @font-size-base; line-height: @line-height-base; - color: @gray; + color: @input-color; vertical-align: middle; background-color: @input-bg; border: 1px solid @input-border; diff --git a/less/variables.less b/less/variables.less index 61d67ceed..bbe58ede0 100644 --- a/less/variables.less +++ b/less/variables.less @@ -133,6 +133,7 @@ @input-bg: #fff; @input-bg-disabled: @gray-lighter; +@input-color: @gray; @input-border: #ccc; @input-border-radius: @border-radius-base; @input-border-focus: #66afe9; @@ -143,6 +144,7 @@ @input-height-large: (floor(@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; @legend-border-color: #e5e5e5; @input-group-addon-border-color: @input-border; -- cgit v1.2.3 From a66cdb0c304b701c299bdbf24a53dd6105d4429d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 18:09:56 -0700 Subject: addressing #9189 manually, part 4: input group background var --- less/input-groups.less | 2 +- less/variables.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/input-groups.less b/less/input-groups.less index 56c6cb62c..abc399dc2 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -49,7 +49,7 @@ font-weight: normal; line-height: 1; text-align: center; - background-color: @gray-lighter; + background-color: @input-group-addon-bg; border: 1px solid @input-group-addon-border-color; border-radius: @border-radius-base; diff --git a/less/variables.less b/less/variables.less index bbe58ede0..89e01700e 100644 --- a/less/variables.less +++ b/less/variables.less @@ -147,6 +147,7 @@ @legend-color: @gray-dark; @legend-border-color: #e5e5e5; +@input-group-addon-bg: @gray-lighter; @input-group-addon-border-color: @input-border; -- cgit v1.2.3 From e9650f51bf9e335076ae2890915a99fee82ed9a7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 18:10:42 -0700 Subject: addressing #9189 manually, part 5: don't bother with a .label font-weight var and let's just use bold because windows hates 500 --- less/labels.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/labels.less b/less/labels.less index b746acbf8..941d27f30 100644 --- a/less/labels.less +++ b/less/labels.less @@ -6,7 +6,7 @@ display: inline; padding: .25em .6em; font-size: 75%; - font-weight: 500; + font-weight: bold; line-height: 1; color: @label-color; text-align: center; -- cgit v1.2.3 From c2cfd3153bd181ebd05b347d04b3fff08fa1d890 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 18:32:52 -0700 Subject: addressing #9189 manually, part 6: add a navbar margin var, but avoid the navbar-nav var because that should really be customizable --- less/navbar.less | 2 +- less/variables.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 60f5fd4f7..e474f35bd 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -6,7 +6,7 @@ .navbar { position: relative; min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) - margin-bottom: 20px; + margin-bottom: @navbar-margin-bottom; padding-left: @navbar-padding-horizontal; padding-right: @navbar-padding-horizontal; background-color: @navbar-bg; diff --git a/less/variables.less b/less/variables.less index 89e01700e..bf180aff6 100644 --- a/less/variables.less +++ b/less/variables.less @@ -232,6 +232,7 @@ @navbar-height: 50px; @navbar-color: #777; @navbar-bg: #eee; +@navbar-margin-bottom: @line-height-computed; @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); -- cgit v1.2.3 From ba8026e00f85f76e88a4005162612a7568a0a405 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 19:06:26 -0700 Subject: Refactor navbars to simplify things * `.navbar-brand` is no longer centered, thus removing need for max-width and a few lines of code * Clear floats of `.navbar-brand` in the `.nav-collapse` like we did in 2.x, thus simplifying some clearing and other things. * Restyle the `.navbar-toggle` button to align it's bars up with the text and flow of the document. * Restyle the `.navbar-brand` to not use padding on left/right as to avoid negative margin and other fuckery. This limits the ability to put a bg color on the brand, but I think that's fine for now. --- less/navbar.less | 25 +++++++------------------ 1 file changed, 7 insertions(+), 18 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index e474f35bd..0f4d5cd73 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -20,8 +20,6 @@ // ------------------------- .navbar-nav { - margin-bottom: 15px; - > li > a { padding-top: ((@navbar-height - @line-height-computed) / 2); padding-bottom: ((@navbar-height - @line-height-computed) / 2); @@ -87,6 +85,8 @@ } .nav-collapse { + // Prevent overlap of `.navbar-brand` and `.navbar-toggle` + clear: both; // Space out collapsed contents within the mobile navbar padding-bottom: @navbar-padding-vertical; // Clear floated elements and prevent collapsing of padding @@ -127,16 +127,12 @@ // Brand/project name .navbar-brand { - display: block; - max-width: 200px; - margin-left: auto; - margin-right: auto; - padding: @navbar-padding-vertical @navbar-padding-horizontal; + float: left; + padding-top: @navbar-padding-vertical; + padding-bottom: @navbar-padding-vertical; font-size: @font-size-large; - font-weight: 500; line-height: @line-height-computed; color: @navbar-brand-color; - text-align: center; &:hover, &:focus { color: @navbar-brand-hover-color; @@ -149,10 +145,9 @@ .navbar-toggle { position: relative; float: right; - height: 34px; - width: 48px; + padding: 9px 10px; .navbar-vertical-align(34px); - padding: @padding-base-vertical @padding-base-horizontal; + margin-right: -10px; background-color: transparent; border: 1px solid @navbar-toggle-border-color; border-radius: @border-radius-base; @@ -327,12 +322,6 @@ @media screen and (min-width: @grid-float-breakpoint) { - .navbar-brand { - float: left; - margin-left: -(@navbar-padding-horizontal); - margin-right: 5px; - max-width: none; // Disables the default mobile setting - } .navbar-nav { float: left; // undo margin to make nav extend full height of navbar -- cgit v1.2.3 From 85ec6e741d278623e079528959360b2dbded4794 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 19:19:44 -0700 Subject: Follow up commit: fix collapse clearing and navbar brand/nav spacing --- less/navbar.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 0f4d5cd73..1549220c9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -128,6 +128,7 @@ // Brand/project name .navbar-brand { float: left; + margin-right: 15px; padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; font-size: @font-size-large; @@ -322,6 +323,11 @@ @media screen and (min-width: @grid-float-breakpoint) { + // Undo clearing to keep nav and brand horizontal + .nav-collapse { + clear: none; + } + .navbar-nav { float: left; // undo margin to make nav extend full height of navbar -- cgit v1.2.3 From bf4900072dba32ba6db36321f6d3175bd4b43718 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 19:20:23 -0700 Subject: Drop the font-weight on panel labels since heading elements already get it --- less/panels.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index c6d96b39f..b78f0796a 100644 --- a/less/panels.less +++ b/less/panels.less @@ -58,7 +58,6 @@ margin-top: 0; margin-bottom: 0; font-size: (@font-size-base * 1.25); - font-weight: 500; > a { color: inherit; } -- cgit v1.2.3 From 0819cfc4503ffc2084f9358b9c896b50c0ddf864 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 19:32:16 -0700 Subject: addressing #9189 manually, part 7: thumbnails vars --- less/thumbnails.less | 4 ++-- less/variables.less | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/thumbnails.less b/less/thumbnails.less index 1f896708d..d209412dc 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -10,7 +10,7 @@ // Can be `a`, `div`, or `img` .thumbnail, .img-thumbnail { - padding: 4px; + padding: @thumbnail-padding; line-height: @line-height-base; background-color: @thumbnail-bg; border: 1px solid @thumbnail-border; @@ -37,6 +37,6 @@ a.thumbnail:focus { margin-right: auto; } .thumbnail .caption { - padding: 9px; + padding: @thumbnail-caption-padding; color: @thumbnail-caption-color; } diff --git a/less/variables.less b/less/variables.less index bf180aff6..f2a622fbe 100644 --- a/less/variables.less +++ b/less/variables.less @@ -499,11 +499,14 @@ // Thumbnails // ------------------------- -@thumbnail-caption-color: @text-color; +@thumbnail-padding: 4px; @thumbnail-bg: @body-bg; @thumbnail-border: #ddd; @thumbnail-border-radius: @border-radius-base; +@thumbnail-caption-color: @text-color; +@thumbnail-caption-padding: 9px; + // Wells // ------------------------- -- cgit v1.2.3 From 95affa32e6b756e54cc86b85a352aaa02e65bf9d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 11 Aug 2013 21:17:49 -0700 Subject: simplify padding in list groups and margins on badges within --- less/list-group.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/list-group.less b/less/list-group.less index 1abc6eb7b..16bf457d7 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -17,7 +17,7 @@ .list-group-item { position: relative; display: block; - padding: 10px 30px 10px 15px; + padding: 10px 15px; // Place the border on the list items and negative margin up for better styling margin-bottom: -1px; background-color: @list-group-bg; @@ -35,10 +35,9 @@ // Align badges within list items > .badge { float: right; - margin-right: -15px; } > .badge + .badge { - margin-right: 0; + margin-right: 5px; } } -- cgit v1.2.3 From a2b9988eb908e5b95fb253aac7fde0fbd61c375e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 00:28:50 -0700 Subject: Media query (grid and responsive utilities) overhaul Grid classes have been changed to account for a fourth set of classes, meaning we now have XS, S, M, and L options. Specifically, we made the following changes: * Renames `.col-` to `.col-xs-` * Adds `.col-md-` for devices 992px wide and up * Remaps `.col-lg-` for devices 1200px wide and up Alongside that, we've updated our media queries to better handle advanced grid layouts: * All column classes now kick in when they hit a `min-width`, undoing the #9128 fix in https://github.com/twbs/bootstrap/commit/db45a60cc86190a060f0baf0b3961cb c690f3a65 * All column offsets, pushes, and pulls are scoped to an appropriate range, meaning a `min-width` and `max-width` (thanks for the idea, @eratzlaff) We've also modified the widths of our grid containers for the small device grid (now a max 720px instead of 728px) and large device grid (now a max 1140px instead of 1170px) to avoid horizontal scrollbar problems in Firefox (likely due to box-sizing, which is why we didn't see it in 2.x). Similarly, we've updated the responsive ultility classes to match the new four media query approach of the grid system. That means we've: * Added new `.visible-xs` and `.hidden-xs` classes * Reassigns visible and hidden classes for small, medium, and large to matching grid system media queries * Updates docs examples to match grid system and account for fourth utility range ----- Fixes the following: * #9135: fourth grid tier * #9302: undoes previous range change for small grid system, so no need to update any docs here * #8755: consistent grid and responsive utilities schemas) * #9195, #9216, and #9227: no more horizontal scrollbars --- less/grid.less | 196 ++++++++++++++++++++++++++++++----------- less/responsive-utilities.less | 58 ++++++++++-- less/variables.less | 5 +- 3 files changed, 198 insertions(+), 61 deletions(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index 5142feb65..f02bc7148 100644 --- a/less/grid.less +++ b/less/grid.less @@ -2,6 +2,7 @@ // Grid system // -------------------------------------------------- + // Set the container width, and override it for fixed navbars in media queries .container { .container-fixed(); @@ -13,18 +14,18 @@ } // Common styles for small and large grid columns -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12, +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, @@ -37,6 +38,18 @@ .col-sm-10, .col-sm-11, .col-sm-12, +.col-md-1, +.col-md-2, +.col-md-3, +.col-md-4, +.col-md-5, +.col-md-6, +.col-md-7, +.col-md-8, +.col-md-9, +.col-md-10, +.col-md-11, +.col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, @@ -58,41 +71,45 @@ } - -// -// Container and grid column sizing +// 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 -// Extra small device columns (smartphones) -.col-1, -.col-2, -.col-3, -.col-4, -.col-5, -.col-6, -.col-7, -.col-8, -.col-9, -.col-10, -.col-11, -.col-12 { +.col-xs-1, +.col-xs-2, +.col-xs-3, +.col-xs-4, +.col-xs-5, +.col-xs-6, +.col-xs-7, +.col-xs-8, +.col-xs-9, +.col-xs-10, +.col-xs-11, +.col-xs-12 { float: left; } -.col-1 { width: percentage((1 / @grid-columns)); } -.col-2 { width: percentage((2 / @grid-columns)); } -.col-3 { width: percentage((3 / @grid-columns)); } -.col-4 { width: percentage((4 / @grid-columns)); } -.col-5 { width: percentage((5 / @grid-columns)); } -.col-6 { width: percentage((6 / @grid-columns)); } -.col-7 { width: percentage((7 / @grid-columns)); } -.col-8 { width: percentage((8 / @grid-columns)); } -.col-9 { width: percentage((9 / @grid-columns)); } -.col-10 { width: percentage((10/ @grid-columns)); } -.col-11 { width: percentage((11/ @grid-columns)); } -.col-12 { width: 100%; } - -// Small device columns (phones to tablets) -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { +.col-xs-1 { width: percentage((1 / @grid-columns)); } +.col-xs-2 { width: percentage((2 / @grid-columns)); } +.col-xs-3 { width: percentage((3 / @grid-columns)); } +.col-xs-4 { width: percentage((4 / @grid-columns)); } +.col-xs-5 { width: percentage((5 / @grid-columns)); } +.col-xs-6 { width: percentage((6 / @grid-columns)); } +.col-xs-7 { width: percentage((7 / @grid-columns)); } +.col-xs-8 { width: percentage((8 / @grid-columns)); } +.col-xs-9 { width: percentage((9 / @grid-columns)); } +.col-xs-10 { width: percentage((10/ @grid-columns)); } +.col-xs-11 { width: percentage((11/ @grid-columns)); } +.col-xs-12 { width: 100%; } + + +// Small grid +// +// Columns, offsets, pushes, and pulls for the small device range, from phones +// to tablets. + +@media (min-width: @screen-tablet) { .container { max-width: @container-tablet; } @@ -123,7 +140,9 @@ .col-sm-10 { width: percentage((10/ @grid-columns)); } .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } +} +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { // Push and pull columns for source order changes .col-sm-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); } @@ -163,11 +182,93 @@ .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } } -// Medium and large device columns (desktop and up) + +// Medium grid +// +// Columns, offsets, pushes, and pulls for the desktop device range. + @media (min-width: @screen-desktop) { .container { max-width: @container-desktop; } + .col-md-1, + .col-md-2, + .col-md-3, + .col-md-4, + .col-md-5, + .col-md-6, + .col-md-7, + .col-md-8, + .col-md-9, + .col-md-10, + .col-md-11, + .col-md-12 { + float: left; + } + .col-md-1 { width: percentage((1 / @grid-columns)); } + .col-md-2 { width: percentage((2 / @grid-columns)); } + .col-md-3 { width: percentage((3 / @grid-columns)); } + .col-md-4 { width: percentage((4 / @grid-columns)); } + .col-md-5 { width: percentage((5 / @grid-columns)); } + .col-md-6 { width: percentage((6 / @grid-columns)); } + .col-md-7 { width: percentage((7 / @grid-columns)); } + .col-md-8 { width: percentage((8 / @grid-columns)); } + .col-md-9 { width: percentage((9 / @grid-columns)); } + .col-md-10 { width: percentage((10/ @grid-columns)); } + .col-md-11 { width: percentage((11/ @grid-columns)); } + .col-md-12 { width: 100%; } +} + +@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + // Push and pull columns for source order changes + .col-md-push-1 { left: percentage((1 / @grid-columns)); } + .col-md-push-2 { left: percentage((2 / @grid-columns)); } + .col-md-push-3 { left: percentage((3 / @grid-columns)); } + .col-md-push-4 { left: percentage((4 / @grid-columns)); } + .col-md-push-5 { left: percentage((5 / @grid-columns)); } + .col-md-push-6 { left: percentage((6 / @grid-columns)); } + .col-md-push-7 { left: percentage((7 / @grid-columns)); } + .col-md-push-8 { left: percentage((8 / @grid-columns)); } + .col-md-push-9 { left: percentage((9 / @grid-columns)); } + .col-md-push-10 { left: percentage((10/ @grid-columns)); } + .col-md-push-11 { left: percentage((11/ @grid-columns)); } + + .col-md-pull-1 { right: percentage((1 / @grid-columns)); } + .col-md-pull-2 { right: percentage((2 / @grid-columns)); } + .col-md-pull-3 { right: percentage((3 / @grid-columns)); } + .col-md-pull-4 { right: percentage((4 / @grid-columns)); } + .col-md-pull-5 { right: percentage((5 / @grid-columns)); } + .col-md-pull-6 { right: percentage((6 / @grid-columns)); } + .col-md-pull-7 { right: percentage((7 / @grid-columns)); } + .col-md-pull-8 { right: percentage((8 / @grid-columns)); } + .col-md-pull-9 { right: percentage((9 / @grid-columns)); } + .col-md-pull-10 { right: percentage((10/ @grid-columns)); } + .col-md-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-md-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-md-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-md-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-md-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-md-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-md-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-md-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-md-offset-11 { margin-left: percentage((11/ @grid-columns)); } +} + + +// Large grid +// +// Columns, offsets, pushes, and pulls for the large desktop device range. + +@media (min-width: @screen-large-desktop) { + .container { + max-width: @container-large-desktop; + } + .col-lg-1, .col-lg-2, .col-lg-3, @@ -233,10 +334,3 @@ .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } } - -// Large desktops and up -@media (min-width: @screen-large-desktop) { - .container { - max-width: @container-large-desktop; - } -} diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 0815909cc..cec869083 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -35,21 +35,39 @@ // Visibility utilities -.visible-sm { +.visible-xs { .responsive-visibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-large-desktop) { + .responsive-invisibility(); + } +} +.visible-sm { + .responsive-invisibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-visibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-invisibility(); } } .visible-md { .responsive-invisibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-large-desktop) { .responsive-invisibility(); } } @@ -58,26 +76,47 @@ @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-visibility(); } } -.hidden-sm { +.hidden-xs { .responsive-invisibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-visibility(); + } + @media (min-width: @screen-large-desktop) { + .responsive-visibility(); + } +} +.hidden-sm { + .responsive-visibility(); + @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-invisibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-visibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-visibility(); } } .hidden-md { .responsive-visibility(); @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + .responsive-visibility(); + } + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-large-desktop) { .responsive-visibility(); } } @@ -86,7 +125,10 @@ @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) { + @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + .responsive-visibility(); + } + @media (min-width: @screen-large-desktop) { .responsive-invisibility(); } } diff --git a/less/variables.less b/less/variables.less index f2a622fbe..4bdf54905 100644 --- a/less/variables.less +++ b/less/variables.less @@ -209,6 +209,7 @@ @screen-large-desktop: @screen-large; // So media queries don't overlap when required, provide a maximum +@screen-phone-max: (@screen-small - 1); @screen-small-max: (@screen-medium - 1); @screen-tablet-max: (@screen-desktop - 1); @screen-desktop-max: (@screen-large-desktop - 1); @@ -595,10 +596,10 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: 728px; +@container-tablet: 720px; // Medium screen / desktop @container-desktop: 940px; // Large screen / wide desktop -@container-large-desktop: 1170px; +@container-large-desktop: 1140px; -- cgit v1.2.3 From efe62a7ef4b52229403253f8d7fd39d2d96ac875 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 00:36:22 -0700 Subject: rename and refactor a smidge to add medium grid mixins --- less/mixins.less | 51 ++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 2802570b3..e58e602d3 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -488,7 +488,7 @@ } // Generate the small columns -.make-small-column(@columns; @gutter: @grid-gutter-width) { +.make-sm-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; @@ -504,24 +504,24 @@ } // Generate the small column offsets -.make-small-column-offset(@columns) { +.make-sm-column-offset(@columns) { @media (min-width: @screen-small) { margin-left: percentage((@columns / @grid-columns)); } } -.make-small-column-push(@columns) { +.make-sm-column-push(@columns) { @media (min-width: @screen-small) { left: percentage((@columns / @grid-columns)); } } -.make-small-column-pull(@columns) { +.make-sm-column-pull(@columns) { @media (min-width: @screen-small) { right: percentage((@columns / @grid-columns)); } } -// Generate the large columns -.make-large-column(@columns; @gutter: @grid-gutter-width) { +// Generate the medium columns +.make-md-column(@columns; @gutter: @grid-gutter-width) { position: relative; // Prevent columns from collapsing when empty min-height: 1px; @@ -537,22 +537,55 @@ } // Generate the large column offsets -.make-large-column-offset(@columns) { +.make-md-column-offset(@columns) { @media (min-width: @screen-medium) { margin-left: percentage((@columns / @grid-columns)); } } -.make-large-column-push(@columns) { +.make-md-column-push(@columns) { @media (min-width: @screen-medium) { left: percentage((@columns / @grid-columns)); } } -.make-large-column-pull(@columns) { +.make-md-column-pull(@columns) { @media (min-width: @screen-medium) { right: percentage((@columns / @grid-columns)); } } +// Generate the large columns +.make-lg-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available + @media (min-width: @screen-large) { + float: left; + width: percentage((@columns / @grid-columns)); + } +} + +// Generate the large column offsets +.make-lg-column-offset(@columns) { + @media (min-width: @screen-large) { + margin-left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-push(@columns) { + @media (min-width: @screen-large) { + left: percentage((@columns / @grid-columns)); + } +} +.make-lg-column-pull(@columns) { + @media (min-width: @screen-large) { + right: percentage((@columns / @grid-columns)); + } +} + // Form validation states // -- cgit v1.2.3 From 6dbf588237529fc8909bf65caa103fd4fc224fbc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 01:20:22 -0700 Subject: fixes #9310: alerts aren't dismissable by default, now requires .alert-dismissable if you need a close button --- less/alerts.less | 29 +++++++++++++++++++---------- 1 file changed, 19 insertions(+), 10 deletions(-) (limited to 'less') diff --git a/less/alerts.less b/less/alerts.less index d40519c73..3ba463dba 100644 --- a/less/alerts.less +++ b/less/alerts.less @@ -7,7 +7,7 @@ // ------------------------- .alert { - padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding; + padding: @alert-padding; margin-bottom: @line-height-computed; color: @alert-text; background-color: @alert-bg; @@ -30,14 +30,6 @@ color: darken(@alert-text, 10%); } - // Adjust close link position - .close { - position: relative; - top: -2px; - right: -21px; - color: inherit; - } - // Improve alignment and spacing of inner content > p, > ul { @@ -48,8 +40,25 @@ } } +// Dismissable alerts +// +// Expand the right padding and account for the close button's positioning. + +.alert-dismissable { + padding-right: (@alert-padding + 20); + + // Adjust close link position + .close { + position: relative; + top: -2px; + right: -21px; + color: inherit; + } +} + // Alternate styles -// ------------------------- +// +// Generate contextual modifier classes for colorizing the alert. .alert-success { .alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text); -- cgit v1.2.3 From acdbe738517b592d8a92fb7c94da09c20d5e65f9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 01:38:06 -0700 Subject: fixes #8835: make it so active list group items aren't dependent on an tag --- less/list-group.less | 61 ++++++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 31 deletions(-) (limited to 'less') diff --git a/less/list-group.less b/less/list-group.less index 16bf457d7..a09d4e33c 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -39,42 +39,29 @@ > .badge + .badge { margin-right: 5px; } -} -// Custom content options -// ------------------------- - -.list-group-item-heading { - margin-top: 0; - margin-bottom: 5px; -} -.list-group-item-text { - margin-bottom: 0; - line-height: 1.3; -} - -// Linked list items -// ------------------------- - -// Custom content within linked items -a.list-group-item { - // Colorize content accordingly - .list-group-item-heading { - color: @list-group-link-heading-color; - } - .list-group-item-text { - color: @list-group-link-color; - } + // Linked list items + a& { + // Colorize content accordingly + .list-group-item-heading { + color: @list-group-link-heading-color; + } + .list-group-item-text { + color: @list-group-link-color; + } - // Hover state - &:hover, - &:focus { - text-decoration: none; - background-color: @list-group-hover-bg; + // Hover state + &:hover, + &:focus { + text-decoration: none; + background-color: @list-group-hover-bg; + } } // Active class on item itself, not parent - &.active { + &.active, + &.active:hover, + &.active:focus { z-index: 2; // Place active items above their siblings for proper border styling color: @list-group-active-color; background-color: @list-group-active-bg; @@ -89,3 +76,15 @@ a.list-group-item { } } } + +// Custom content options +// ------------------------- + +.list-group-item-heading { + margin-top: 0; + margin-bottom: 5px; +} +.list-group-item-text { + margin-bottom: 0; + line-height: 1.3; +} -- cgit v1.2.3 From 5e73cc90d9104dc251fba5dcaf203523785ee9a5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 01:39:43 -0700 Subject: fixes #9266 manually on account of list group file reorganization --- less/list-group.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/list-group.less b/less/list-group.less index a09d4e33c..46cda4085 100644 --- a/less/list-group.less +++ b/less/list-group.less @@ -42,13 +42,11 @@ // Linked list items a& { - // Colorize content accordingly + color: @list-group-link-color; + .list-group-item-heading { color: @list-group-link-heading-color; } - .list-group-item-text { - color: @list-group-link-color; - } // Hover state &:hover, -- cgit v1.2.3 From 175a112548120500022882d6d2e9bede720f568b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 01:56:38 -0700 Subject: fix #9239 by restoring old ie8 responsive img foo --- less/navs.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index a19e5cdfd..610b97e00 100644 --- a/less/navs.less +++ b/less/navs.less @@ -60,6 +60,12 @@ .nav-divider { .nav-divider(); } + + // Prevent IE8 from misplacing imgs + // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 + > li > a > img { + max-width: none; + } } -- cgit v1.2.3 From 83293516b6b1785e8f57dc26b9023f26cd7a89a1 Mon Sep 17 00:00:00 2001 From: ggam Date: Mon, 12 Aug 2013 13:55:09 +0200 Subject: Renamed btn-pseudo-states mixin to btn-variant for consistency --- less/buttons.less | 12 ++++++------ less/mixins.less | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 8dc05e824..1527a5fa0 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -54,26 +54,26 @@ // -------------------------------------------------- .btn-default { - .btn-pseudo-states(@btn-default-color; @btn-default-bg; @btn-default-border); + .button-variant(@btn-default-color; @btn-default-bg; @btn-default-border); } .btn-primary { - .btn-pseudo-states(@btn-primary-color; @btn-primary-bg; @btn-primary-border); + .button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); } // Warning appears as orange .btn-warning { - .btn-pseudo-states(@btn-warning-color; @btn-warning-bg; @btn-warning-border); + .button-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border); } // Danger and error appear as red .btn-danger { - .btn-pseudo-states(@btn-danger-color; @btn-danger-bg; @btn-danger-border); + .button-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border); } // Success appears as green .btn-success { - .btn-pseudo-states(@btn-success-color; @btn-success-bg; @btn-success-border); + .button-variant(@btn-success-color; @btn-success-bg; @btn-success-border); } // Info appears as blue-green .btn-info { - .btn-pseudo-states(@btn-info-color; @btn-info-bg; @btn-info-border); + .button-variant(@btn-info-color; @btn-info-bg; @btn-info-border); } diff --git a/less/mixins.less b/less/mixins.less index e58e602d3..7bd2acc45 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -362,11 +362,11 @@ } } -// Button pseudo states +// Button variants // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons -.btn-pseudo-states(@color; @background; @border) { +.button-variant(@color; @background; @border) { color: @color; background-color: @background; border-color: @border; -- cgit v1.2.3 From 6993db1840561e89dd772302d5b3d567bc92f033 Mon Sep 17 00:00:00 2001 From: ggam Date: Mon, 12 Aug 2013 14:07:19 +0200 Subject: Added button-size mixin --- less/buttons.less | 12 ++++-------- less/mixins.less | 9 +++++++++ 2 files changed, 13 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 8dc05e824..e35515358 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -121,17 +121,13 @@ // -------------------------------------------------- .btn-lg { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - line-height: @line-height-large; // ensure even-numbered height of button next to large input - border-radius: @border-radius-large; + // 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 { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - line-height: @line-height-small; // ensure proper height of button next to small input - border-radius: @border-radius-small; + // 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: 3px 5px; diff --git a/less/mixins.less b/less/mixins.less index e58e602d3..63196448f 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -394,6 +394,15 @@ } } +// Button sizes +// ------------------------- +.button-size(@padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; +} + // Labels // ------------------------- .label-variant(@color) { -- cgit v1.2.3 From d80d9251efe88f7ff80b84e28b01292a02dc634a Mon Sep 17 00:00:00 2001 From: ggam Date: Mon, 12 Aug 2013 14:20:17 +0200 Subject: Removed remaining Glyphicons mentions in carousel.less --- less/carousel.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'less') diff --git a/less/carousel.less b/less/carousel.less index 8d31d7e49..d94108de5 100644 --- a/less/carousel.less +++ b/less/carousel.less @@ -110,7 +110,7 @@ margin-left: -10px; font-family: serif; } - // Non-glyphicon toggles + .icon-prev { &:before { content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039) @@ -181,7 +181,6 @@ @media screen and (min-width: @screen-tablet) { // Scale up the controls a smidge - .carousel-control .glyphicon, .carousel-control .icon-prev, .carousel-control .icon-next { width: 30px; -- cgit v1.2.3 From 55cfa8d38f71623aaa5e2aae97b483af60650910 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 10:01:13 -0700 Subject: Drop background-clip and background-size mixins since they have no prefixes anyway --- less/dropdowns.less | 2 +- less/mixins.less | 10 ---------- less/modals.less | 2 +- less/popovers.less | 2 -- less/progress-bars.less | 2 +- 5 files changed, 3 insertions(+), 15 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index d40a82a46..af14bf9e9 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -38,7 +38,7 @@ border: 1px solid @dropdown-border; border-radius: @border-radius-base; .box-shadow(0 6px 12px rgba(0,0,0,.175)); - .background-clip(padding-box); + background-clip: padding-box; // Aligns the dropdown menu to right &.pull-right { diff --git a/less/mixins.less b/less/mixins.less index e58e602d3..ee7e5570e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -163,16 +163,6 @@ backface-visibility: @visibility; } -// Background clipping -.background-clip(@clip) { - background-clip: @clip; -} - -// Background sizing -.background-size(@size) { - background-size: @size; -} - // Box sizing .box-sizing(@boxmodel) { -webkit-box-sizing: @boxmodel; diff --git a/less/modals.less b/less/modals.less index 2e574535e..b43ecfd97 100644 --- a/less/modals.less +++ b/less/modals.less @@ -49,7 +49,7 @@ border: 1px solid @modal-content-border-color; border-radius: @border-radius-large; .box-shadow(0 3px 9px rgba(0,0,0,.5)); - .background-clip(padding-box); + background-clip: padding-box; // Remove focus outline from opened modal outline: none; } diff --git a/less/popovers.less b/less/popovers.less index 3e26ac3d6..345bb1a31 100644 --- a/less/popovers.less +++ b/less/popovers.less @@ -13,8 +13,6 @@ padding: 1px; text-align: left; // Reset given new insertion method background-color: @popover-bg; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; background-clip: padding-box; border: 1px solid @popover-fallback-border-color; border: 1px solid @popover-border-color; diff --git a/less/progress-bars.less b/less/progress-bars.less index ab9832315..d4c498c51 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -61,7 +61,7 @@ // Striped bars .progress-striped .progress-bar { #gradient > .striped(@progress-bar-bg); - .background-size(40px 40px); + background-size: 40px 40px; } // Call animation for the active one -- cgit v1.2.3 From f662dff6e9c52770511e5f674579a27eeac85549 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 11:07:23 -0700 Subject: fixes #9382: inline forms now require use of .form-group for proper alignment of all form controls --- less/forms.less | 54 +++++++++++++++++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 19 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 97527fdbf..735db0495 100644 --- a/less/forms.less +++ b/less/forms.less @@ -293,28 +293,44 @@ textarea { // Inline forms // -// Make forms appear inline(-block). +// Make forms appear inline(-block) by adding the `.form-inline` class. Inline +// forms begin stacked on extra small (mobile) devices and then go inline when +// viewports reach <768px. +// +// Requires wrapping inputs and labels with `.form-group` for proper display of +// default HTML form controls and our custom form controls (e.g., input groups). .form-inline { - .form-control, - .radio, - .checkbox { - display: inline-block; - } - // Remove default margin on radios/checkboxes that were used for stacking, and - // then undo the floating of radios and checkboxes to match (which also avoids - // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). - .radio, - .checkbox { - margin-top: 0; - margin-bottom: 0; - padding-left: 0; - } - .radio input[type="radio"], - .checkbox input[type="checkbox"] { - float: none; - margin-left: 0; + // Kick in the inline + @media (min-width: @screen-tablet) { + // Inline-block all the things for "inline" + .form-group { + display: inline-block; + margin-bottom: 0; + vertical-align: middle; + } + + // Reset form control's default 100% width + .form-control { + width: auto; + } + + // Remove default margin on radios/checkboxes that were used for stacking, and + // then undo the floating of radios and checkboxes to match (which also avoids + // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). + .radio, + .checkbox { + display: inline-block; + margin-top: 0; + margin-bottom: 0; + padding-left: 0; + } + .radio input[type="radio"], + .checkbox input[type="checkbox"] { + float: none; + margin-left: 0; + } } } -- cgit v1.2.3 From 9564c356d32168ccb9a9c28e6b51d08234993754 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 11:34:28 -0700 Subject: inherit font-size in code when inside pre --- less/code.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/code.less b/less/code.less index 74a3a7a39..d6661d2b9 100644 --- a/less/code.less +++ b/less/code.less @@ -41,6 +41,7 @@ pre { // Account for some code outputs that place code tags in pre tags code { padding: 0; + font-size: inherit; color: inherit; white-space: pre-wrap; background-color: transparent; -- cgit v1.2.3 From abedd38c5b4f7f9e9abfd7528b9e7679cbd46fc2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 11:52:51 -0700 Subject: update grid xs mixin and update docs to match new mixins --- less/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index d6162f374..24bce6bbf 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -469,8 +469,8 @@ } } -// Generate the default columns -.make-column(@columns; @gutter: @grid-gutter-width) { +// Generate the extra small columns +.make-xs-column(@columns; @gutter: @grid-gutter-width) { position: relative; float: left; // Prevent columns from collapsing when empty -- cgit v1.2.3 From a78c8d9c04e83a22d6eebc2e3d54cb2ccf6b614c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 14:03:57 -0700 Subject: Newfangled input and button group sizing (fixes #9295) Instead of applying `.btn-` or `.input-` to individual elements in button and input groups, we now have new sizing classes to keep your markup a little leaner. * Add `.input-group-sm` or `.input-group-lg` to your `.input-group` to replicate `.input-sm` and `.input-lg`, respectively. * Add `.btn-group-xs`, `.btn-group-sm`, or `.btn-group-lg` to your `.btn-group` to replicate `.btn-xs`, `.btn-sm`, and `. btn-lg`, respectively. Both sets of new sizing classes simply use the existing individual sizing classes as mixins, so customization of them is automatically inherited when compiling. --- less/button-groups.less | 8 ++++++++ less/input-groups.less | 11 +++++++++++ 2 files changed, 19 insertions(+) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 3ae18e92f..3a9cee53e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -117,6 +117,14 @@ } +// Sizing +// +// Remix the default button sizing classes into new ones for easier manipulation. + +.btn-group-xs > .btn { .btn-xs(); } +.btn-group-sm > .btn { .btn-sm(); } +.btn-group-lg > .btn { .btn-lg(); } + // Split button dropdowns // ---------------------- diff --git a/less/input-groups.less b/less/input-groups.less index abc399dc2..e5e6100d3 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -22,6 +22,17 @@ } } +// Sizing options +// +// Remix the default form control sizing classes into new ones for easier +// manipulation. + +.input-group-lg > .form-control, +.input-group-lg > .input-group-addon { .input-lg(); } +.input-group-sm > .form-control, +.input-group-sm > .input-group-addon { .input-sm(); } + + // Display as table-cell // ------------------------- .input-group-addon, -- cgit v1.2.3 From eb1565681fc526c7f75b90ae3dae1d82b47eb4b6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 14:52:49 -0700 Subject: fixes #9392: no need for width auto on inline/navbar form controls given inline-block on parent form group --- less/forms.less | 5 ----- 1 file changed, 5 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 735db0495..d78784897 100644 --- a/less/forms.less +++ b/less/forms.less @@ -311,11 +311,6 @@ textarea { vertical-align: middle; } - // Reset form control's default 100% width - .form-control { - width: auto; - } - // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match (which also avoids // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). -- cgit v1.2.3 From 394f6980567c0adcb80553e2b510abab588d4c53 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 15:02:09 -0700 Subject: undo the grid max-width boundary because it makes offsets kinda borked (you'd have to set twice, for medium and large, in most cases--and that sucks) --- less/grid.less | 4 ---- 1 file changed, 4 deletions(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index f02bc7148..f476a2b03 100644 --- a/less/grid.less +++ b/less/grid.less @@ -140,9 +140,7 @@ .col-sm-10 { width: percentage((10/ @grid-columns)); } .col-sm-11 { width: percentage((11/ @grid-columns)); } .col-sm-12 { width: 100%; } -} -@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { // Push and pull columns for source order changes .col-sm-push-1 { left: percentage((1 / @grid-columns)); } .col-sm-push-2 { left: percentage((2 / @grid-columns)); } @@ -217,9 +215,7 @@ .col-md-10 { width: percentage((10/ @grid-columns)); } .col-md-11 { width: percentage((11/ @grid-columns)); } .col-md-12 { width: 100%; } -} -@media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { // Push and pull columns for source order changes .col-md-push-1 { left: percentage((1 / @grid-columns)); } .col-md-push-2 { left: percentage((2 / @grid-columns)); } -- cgit v1.2.3 From fb8ae7e51499c93f5db1aae94c74dc845b884630 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 15:46:11 -0700 Subject: drop the class on the button group toggles CSS (alt fix to #9297) --- less/button-groups.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 3a9cee53e..d9c91252b 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -201,7 +201,7 @@ // Checkbox and radio options -.btn-group[data-toggle="buttons"] > .btn > input[type="radio"], -.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] { +[data-toggle="buttons"] > .btn > input[type="radio"], +[data-toggle="buttons"] > .btn > input[type="checkbox"] { display: none; } -- cgit v1.2.3 From c558c035d7eee68276c76246260913663029f1dc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 16:02:27 -0700 Subject: fixes #9258: no more float bug with full-width grid columns by removing float on all .col-*-12 classes --- less/grid.less | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index f476a2b03..c51aab9c7 100644 --- a/less/grid.less +++ b/less/grid.less @@ -74,7 +74,10 @@ // 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 +// 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. .col-xs-1, .col-xs-2, @@ -86,8 +89,7 @@ .col-xs-8, .col-xs-9, .col-xs-10, -.col-xs-11, -.col-xs-12 { +.col-xs-11 { float: left; } .col-xs-1 { width: percentage((1 / @grid-columns)); } @@ -108,6 +110,9 @@ // // 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-tablet) { .container { @@ -124,8 +129,7 @@ .col-sm-8, .col-sm-9, .col-sm-10, - .col-sm-11, - .col-sm-12 { + .col-sm-11 { float: left; } .col-sm-1 { width: percentage((1 / @grid-columns)); } @@ -184,6 +188,9 @@ // 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-desktop) { .container { @@ -199,8 +206,7 @@ .col-md-8, .col-md-9, .col-md-10, - .col-md-11, - .col-md-12 { + .col-md-11 { float: left; } .col-md-1 { width: percentage((1 / @grid-columns)); } @@ -259,6 +265,9 @@ // 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-large-desktop) { .container { @@ -275,8 +284,7 @@ .col-lg-8, .col-lg-9, .col-lg-10, - .col-lg-11, - .col-lg-12 { + .col-lg-11 { float: left; } .col-lg-1 { width: percentage((1 / @grid-columns)); } -- cgit v1.2.3 From eac61de138278aa1c0d70dfed7a9515c714b6ad9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 16:09:21 -0700 Subject: fix navbar form alignment of inputs by restoring inline-block --- less/forms.less | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index d78784897..af575db22 100644 --- a/less/forms.less +++ b/less/forms.less @@ -299,6 +299,8 @@ textarea { // // Requires wrapping inputs and labels with `.form-group` for proper display of // default HTML form controls and our custom form controls (e.g., input groups). +// +// Heads up! This is mixin-ed into `.navbar-form` in navbars.less. .form-inline { @@ -311,6 +313,11 @@ textarea { vertical-align: middle; } + // In navbar-form, allow folks to *not* use `.form-group` + .form-control { + display: inline-block; + } + // Remove default margin on radios/checkboxes that were used for stacking, and // then undo the floating of radios and checkboxes to match (which also avoids // a bug in WebKit: https://github.com/twbs/bootstrap/issues/1969). -- cgit v1.2.3 From 8bb7def26cac4d3166fbf2cc98f16c4151794676 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 21:23:28 -0700 Subject: Navbar refactor * Now responsive by default (fits better with mobile-first approach) * Requires `.nav-header` to group `.navbar-brand` and `.navbar-toggle` for proper mobile display. * Changed `.nav-collapse` to `.navbar-collapse` * Simplified examples in docs --- less/dropdowns.less | 5 + less/navbar.less | 288 +++++++++++++++++++++++++++++++++++----------------- 2 files changed, 200 insertions(+), 93 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index af14bf9e9..14ce2b473 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -21,6 +21,11 @@ position: relative; } +// Prevent the focus on the dropdown toggle when closing dropdowns +.dropdown-toggle:focus { + outline: 0; +} + // The dropdown menu (ul) .dropdown-menu { position: absolute; diff --git a/less/navbar.less b/less/navbar.less index 1549220c9..99bc4858c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -2,69 +2,88 @@ // Navbars // -------------------------------------------------- + // Wrapper and base class +// +// Provide a static navbar from which we expand to create full-width, fixed, and +// other navbar variations. + .navbar { position: relative; min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) margin-bottom: @navbar-margin-bottom; - padding-left: @navbar-padding-horizontal; - padding-right: @navbar-padding-horizontal; background-color: @navbar-bg; - border-radius: @navbar-border-radius; // Prevent floats from breaking the navbar .clearfix(); + + @media (min-width: @grid-float-breakpoint) { + border-radius: @navbar-border-radius; + } } -// Navbar nav links -// ------------------------- -.navbar-nav { - > li > a { - padding-top: ((@navbar-height - @line-height-computed) / 2); - padding-bottom: ((@navbar-height - @line-height-computed) / 2); - color: @navbar-link-color; - line-height: @line-height-computed; - border-radius: @border-radius-base; - &:hover, - &:focus { - color: @navbar-link-hover-color; - background-color: @navbar-link-hover-bg; - } - } - > .active > a { - &, - &:hover, - &:focus { - color: @navbar-link-active-color; - background-color: @navbar-link-active-bg; - } - } - > .disabled > a { - &, - &:hover, - &:focus { - color: @navbar-link-disabled-color; - background-color: @navbar-link-disabled-bg; - } - } +// Navbar heading +// +// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy +// styling of responsive aspects. - // Right aligned contents - // Make them full width first so that they align properly on mobile - &.pull-right { - width: 100%; +.navbar-header { + padding-left: @navbar-padding-horizontal; + padding-right: @navbar-padding-horizontal; + .clearfix(); + + @media (min-width: @grid-float-breakpoint) { + float: left; } } +// Navbar collapse (body) +// +// Group your navbar content into this for easy collapsing and expanding across +// various device sizes. By default, this content is collapsed when <768px, but +// will expand past that for a horizontal display. +// +// To start (on mobile devices) the navbar links, forms, and buttons are stacked +// vertically and include a `max-height` to overflow in case you have too much +// content for the user's viewport. + +.navbar-collapse { + padding-top: 5px; + padding-bottom: 5px; + border-top: 1px solid darken(@navbar-bg, 7%); + box-shadow: inset 0 1px 0 rgba(255,255,255,.1); + // Clear floated elements and prevent collapsing of padding + .clearfix(); + + // This is not automatically added to the `.navbar-fixed-top` because it causes + // z-index bugs in iOS7 (possibly earlier). + max-height: 360px; + overflow-x: visible; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; + + @media (min-width: @grid-float-breakpoint) { + width: auto; + padding-top: 0; + padding-bottom: 0; + border-top: 0; + } +} + // // Navbar alignment options -// -------------------------------------------------- +// +// Display the navbar across the entirity of the page or fixed it to the top or +// bottom of the page. -// Static navbar +// Static top (unfixed, but 100% wide) navbar .navbar-static-top { - border-radius: 0; + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } } // Fix the top/bottom navbars when screen real estate supports it @@ -74,7 +93,11 @@ right: 0; left: 0; z-index: @zindex-navbar-fixed; - border-radius: 0; + + // Undo the rounded corners + @media (min-width: @grid-float-breakpoint) { + border-radius: 0; + } } .navbar-fixed-top { top: 0; @@ -84,51 +107,12 @@ margin-bottom: 0; // override .navbar defaults } -.nav-collapse { - // Prevent overlap of `.navbar-brand` and `.navbar-toggle` - clear: both; - // 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 -// -// Sometimes you might have too many links in your fixed navbar and you need to -// maintain access to all that content. To help, add `.nav-collapse-scrollable` -// to your `.nav-collapse` to prevent the the content from flowing past the max- -// height of your browser. -// -// This is not automatically added to the `.navbar-fixed-top` because it causes -// z-index bugs in iOS7 (possibly earlier). - -@media (max-width: @screen-small) { - .nav-collapse-scrollable { - margin-bottom: @navbar-padding-vertical; - max-height: 360px; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; - } -} - - -// -// Navbar optional components -// -------------------------------------------------- // Brand/project name + .navbar-brand { float: left; - margin-right: 15px; + margin-right: (@navbar-padding-horizontal / 2); padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; font-size: @font-size-large; @@ -142,13 +126,17 @@ } } -// Collapsible navbar toggle + +// Navbar toggle +// +// Custom button for toggling the `.navbar-collapse`, powered by the collapse +// JavaScript plugin. + .navbar-toggle { position: relative; float: right; padding: 9px 10px; .navbar-vertical-align(34px); - margin-right: -10px; background-color: transparent; border: 1px solid @navbar-toggle-border-color; border-radius: @border-radius-base; @@ -171,12 +159,126 @@ } } + +// Navbar nav links +// +// Builds on top of the `.nav` components with it's own modifier class to make +// the nav the full height of the horizontal nav (above 768px). + +.navbar-nav { + > li > a { + padding-top: 10px; + padding-bottom: 10px; + color: @navbar-link-color; + line-height: @line-height-computed; + &:hover, + &:focus { + color: @navbar-link-hover-color; + background-color: @navbar-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-link-active-color; + background-color: @navbar-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-link-disabled-color; + background-color: @navbar-link-disabled-bg; + } + } + + // Right aligned contents + // Make them full width first so that they align properly on mobile + &.pull-right { + width: 100%; + } + + @media (max-width: @screen-phone-max) { + // Dropdowns get custom display + .open .dropdown-menu { + position: static; + float: none; + width: auto; + margin-top: 0; + background-color: transparent; + border: 0; + box-shadow: none; + > li > a, + .dropdown-header { + padding: 5px 15px 5px 25px; + } + > li > a { + color: @navbar-link-color; + line-height: @line-height-computed; + &:hover, + &:focus { + color: @navbar-link-hover-color; + background-color: @navbar-link-hover-bg; + background-image: none; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-link-active-color; + background-color: @navbar-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-link-disabled-color; + background-color: @navbar-link-disabled-bg; + } + } + } + } + +} + + // Navbar form +// +// Extension of the `.form-inline` with some extra flavor for optimum display in +// our navbars. + .navbar-form { + width: 100%; // Counteract the float from `.pull-` classes + padding: 10px @navbar-padding-horizontal; + border-top: 1px solid darken(@navbar-bg, 7%); + border-bottom: 1px solid darken(@navbar-bg, 7%); + + // Mixin behavior for optimum display .form-inline(); - .navbar-vertical-align(@input-height-base); // Vertically center in navbar + + .form-group { + @media (max-width: @screen-phone-max) { + margin-bottom: 5px; + } + } + + // Vertically center in expanded, horizontal navbar + .navbar-vertical-align(@input-height-base); + + // Undo 100% width for pull classes + @media (min-width: @grid-float-breakpoint) { + width: auto; + border: 0; + padding-top: 0; + padding-bottom: 0; + } } + // Dropdown menus // Menu position and menu carets @@ -285,6 +387,10 @@ } } + .navbar-collapse { + border-top-color: darken(@navbar-inverse-bg, 7%); + } + // Dropdowns .navbar-nav { > .open > a { @@ -323,11 +429,6 @@ @media screen and (min-width: @grid-float-breakpoint) { - // Undo clearing to keep nav and brand horizontal - .nav-collapse { - clear: none; - } - .navbar-nav { float: left; // undo margin to make nav extend full height of navbar @@ -337,7 +438,8 @@ > li { float: left; > a { - border-radius: 0; + padding-top: ((@navbar-height - @line-height-computed) / 2); + padding-bottom: ((@navbar-height - @line-height-computed) / 2); } } @@ -353,7 +455,7 @@ left: auto; display: none; } - .nav-collapse.collapse { + .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; // Override default setting -- cgit v1.2.3 From 40723c8716d79e5f27791caa2da5787151a6ee6b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 21:26:43 -0700 Subject: fixes #9400: add box-sizing to pseudo elements as well --- less/scaffolding.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index 5c7b5bb84..0c1774e28 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -6,7 +6,9 @@ // Reset the box-sizing // ------------------------- -* { +*, +*:before, +*:after { .box-sizing(border-box); } -- cgit v1.2.3 From 49576704ea6c24fbc4cb32f44c5986a1e7714634 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 21:27:15 -0700 Subject: finish fixing #9295: add button group buttons to new input group sizing --- less/input-groups.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/input-groups.less b/less/input-groups.less index e5e6100d3..153b22957 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -28,9 +28,11 @@ // manipulation. .input-group-lg > .form-control, -.input-group-lg > .input-group-addon { .input-lg(); } +.input-group-lg > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { .input-lg(); } .input-group-sm > .form-control, -.input-group-sm > .input-group-addon { .input-sm(); } +.input-group-sm > .input-group-addon, +.input-group-lg > .input-group-btn > .btn { .input-sm(); } // Display as table-cell -- cgit v1.2.3 From 48e7468e3acc70ace27ed37cfbadfc54d88a689f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 21:43:59 -0700 Subject: invert dropdown styles in navbar for inverse variation --- less/navbar.less | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 99bc4858c..71eacfb93 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -419,7 +419,38 @@ } } } + + @media (max-width: @screen-phone-max) { + // Dropdowns get custom display + .open .dropdown-menu { + > li > a { + color: @navbar-inverse-link-color; + &:hover, + &:focus { + color: @navbar-inverse-link-hover-color; + background-color: @navbar-inverse-link-hover-bg; + } + } + > .active > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-active-color; + background-color: @navbar-inverse-link-active-bg; + } + } + > .disabled > a { + &, + &:hover, + &:focus { + color: @navbar-inverse-link-disabled-color; + background-color: @navbar-inverse-link-disabled-bg; + } + } + } + } } + } -- cgit v1.2.3 From 237640c70697ffa0605770dee625d9e3c6abf479 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 23:36:25 -0700 Subject: Drop the accordion for the panel * Deletes the accordion.less file * Extends the panel to be collapsible with our JS plugin * Supports panel color variations --- less/accordion.less | 31 ------------------------------- less/bootstrap.less | 1 - less/mixins.less | 8 ++++++++ less/panels.less | 50 ++++++++++++++++++++++++++++++++++++++++++++------ 4 files changed, 52 insertions(+), 38 deletions(-) delete mode 100644 less/accordion.less (limited to 'less') diff --git a/less/accordion.less b/less/accordion.less deleted file mode 100644 index c3023ac49..000000000 --- a/less/accordion.less +++ /dev/null @@ -1,31 +0,0 @@ -// -// Accordion -// -------------------------------------------------- - - -// Parent container -.accordion { - margin-bottom: @line-height-computed; -} - -// Group == heading + body -.accordion-group { - margin-bottom: 2px; - border: 1px solid @accordion-border-color; - border-radius: @border-radius-base; -} -.accordion-heading { - border-bottom: 0; - - .accordion-toggle { - display: block; - padding: 8px 15px; - cursor: pointer; - } -} - -// Inner needs the styles because you can't animate properly with any styles on the element -.accordion-inner { - padding: 9px 15px; - border-top: 1px solid @accordion-border-color; -} diff --git a/less/bootstrap.less b/less/bootstrap.less index b7f393d7a..accfb92e4 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -55,7 +55,6 @@ @import "labels.less"; @import "badges.less"; @import "progress-bars.less"; -@import "accordion.less"; @import "carousel.less"; @import "jumbotron.less"; diff --git a/less/mixins.less b/less/mixins.less index 24bce6bbf..e6499bf9b 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -335,6 +335,14 @@ color: @heading-text-color; background-color: @heading-bg-color; border-color: @heading-border; + + .panel-collapse .panel-body { + border-top-color: @border; + } + } + .panel-footer { + + .panel-collapse .panel-body { + border-bottom-color: @border; + } } } diff --git a/less/panels.less b/less/panels.less index b78f0796a..063973160 100644 --- a/less/panels.less +++ b/less/panels.less @@ -5,14 +5,18 @@ // Base class .panel { - padding: 15px; - margin-bottom: 20px; + margin-bottom: @line-height-computed; background-color: @panel-bg; border: 1px solid @panel-border; border-radius: @panel-border-radius; .box-shadow(0 1px 1px rgba(0,0,0,.05)); } +// Panel contents +.panel-body { + padding: 15px; +} + // List groups in panels // // By default, space out list group content from panel headings to account for @@ -20,7 +24,7 @@ .panel { .list-group { - margin: 15px -15px -15px; + margin-bottom: 0; .list-group-item { border-width: 1px 0; @@ -38,7 +42,6 @@ } // Collapse space between when there's no additional content. .panel-heading + .list-group { - margin-top: -15px; .list-group-item:first-child { border-top-width: 0; } @@ -46,7 +49,6 @@ // Optional heading .panel-heading { - margin: -15px -15px 15px; padding: 10px 15px; background-color: @panel-heading-bg; border-bottom: 1px solid @panel-border; @@ -65,13 +67,49 @@ // Optional footer (stays gray in every modifier class) .panel-footer { - margin: 15px -15px -15px; padding: 10px 15px; background-color: @panel-footer-bg; border-top: 1px solid @panel-border; .border-bottom-radius(@panel-border-radius - 1); } + +// Collapsable panels (aka, accordion) +// +// Wrap a series of panels in `.panel-group` to turn them into an accordion with +// the help of our collapse JavaScript plugin. + +.panel-group { + // Tighten up margin so it's only between panels + .panel { + margin-bottom: 0; + border-radius: @panel-border-radius; + overflow: hidden; // crop contents when collapsed + + .panel { + margin-top: 5px; + } + } + + .panel-heading { + border-bottom: 0; + + .panel-collapse .panel-body { + border-top: 1px solid @panel-border; + } + } + .panel-footer { + border-top: 0; + + .panel-collapse .panel-body { + border-bottom: 1px solid @panel-border; + } + } + + // New subcomponent for wrapping collapsable content for proper animations + .panel-collapse { + + } +} + + // Contextual variations .panel-primary { .panel-variant(@panel-primary-border; @panel-primary-text; @panel-primary-heading-bg; @panel-primary-border); -- cgit v1.2.3 From b0ab806dcc3c5d64a80f34acefeb3ac75e860b33 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Aug 2013 23:44:50 -0700 Subject: fix negative indenting in button group for nested button groups --- less/button-groups.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index d9c91252b..28cb90fc1 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -55,7 +55,10 @@ } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn { +.btn-group .btn + .btn, +.btn-group .btn + .btn-group, +.btn-group .btn-group + .btn, +.btn-group .btn-group + .btn-group { margin-left: -1px; } -- cgit v1.2.3 From ea04fa538e7e08db6284d4aeccec3e617909af8e Mon Sep 17 00:00:00 2001 From: ggam Date: Tue, 13 Aug 2013 13:27:45 +0200 Subject: Added pagination-size mixin --- less/mixins.less | 24 ++++++++++++++++++++++++ less/pagination.less | 40 ++-------------------------------------- 2 files changed, 26 insertions(+), 38 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 24bce6bbf..57f1ff24c 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -393,6 +393,30 @@ border-radius: @border-radius; } +// Pagination +// ------------------------- +.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size; @border-radius) { + > li { + > a, + > span { + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + } + &:first-child { + > a, + > span { + .border-left-radius(@border-radius); + } + } + &:last-child { + > a, + > span { + .border-right-radius(@border-radius); + } + } + } +} + // Labels // ------------------------- .label-variant(@color) { diff --git a/less/pagination.less b/less/pagination.less index 65679beff..12bb71b19 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -63,46 +63,10 @@ // Large .pagination-lg { - > li { - > a, - > span { - padding: @padding-large-vertical @padding-large-horizontal; - font-size: @font-size-large; - } - &:first-child { - > a, - > span { - .border-left-radius(@border-radius-large); - } - } - &:last-child { - > a, - > span { - .border-right-radius(@border-radius-large); - } - } - } + .pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size-large; @border-radius-large); } // Small .pagination-sm { - > li { - > a, - > span { - padding: @padding-small-vertical @padding-small-horizontal; - font-size: @font-size-small; - } - &:first-child { - > a, - > span { - .border-left-radius(@border-radius-small); - } - } - &:last-child { - > a, - > span { - .border-right-radius(@border-radius-small); - } - } - } + .pagination-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @border-radius-small); } -- cgit v1.2.3 From e74ac0723bbb5f8f08d7ee53a6ecbc0ba6933070 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Tue, 13 Aug 2013 14:25:05 +0200 Subject: Fixed errors --- less/mixins.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 57f1ff24c..5b74445f1 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -395,7 +395,7 @@ // Pagination // ------------------------- -.pagination-size(@padding-large-vertical; @padding-large-horizontal; @font-size; @border-radius) { +.pagination-size(@padding-vertical; @padding-horizontal; @font-size; @border-radius) { > li { > a, > span { -- cgit v1.2.3 From f15f259876d77004fadf5b5937af5ab6b5eabb8e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 09:59:38 -0700 Subject: derp --- less/button-groups.less | 43 +++++++++++++++++++++++++++++++++++-------- 1 file changed, 35 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 28cb90fc1..0ca9ca851 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -55,11 +55,13 @@ } // Prevent double borders when buttons are next to each other -.btn-group .btn + .btn, -.btn-group .btn + .btn-group, -.btn-group .btn-group + .btn, -.btn-group .btn-group + .btn-group { - margin-left: -1px; +.btn-group { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { + margin-left: -1px; + } } // Optional: Group multiple button groups together for a toolbar @@ -166,26 +168,51 @@ // Vertical button groups // ---------------------- -.btn-group-vertical > .btn { +.btn-group-vertical > .btn, +.btn-group-vertical > .btn-group { display: block; float: none; width: 100%; max-width: 100%; - + .btn { +} +.btn-group-vertical { + .btn + .btn, + .btn + .btn-group, + .btn-group + .btn, + .btn-group + .btn-group { margin-top: -1px; + margin-left: 0; } } -.btn-group-vertical .btn { + +.btn-group-vertical > .btn { &:not(:first-child):not(:last-child) { border-radius: 0; } &:first-child:not(:last-child) { + border-top-right-radius: @border-radius-base; .border-bottom-radius(0); } &:last-child:not(:first-child) { + border-bottom-left-radius: @border-radius-base; .border-top-radius(0); } } +.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { + border-radius: 0; +} +.btn-group-vertical > .btn-group:first-child { + > .btn:last-child, + > .dropdown-toggle { + border-top-right-radius: @border-radius-base; + .border-bottom-radius(0); + } +} +.btn-group-vertical > .btn-group:last-child > .btn:first-child { + border-bottom-left-radius: @border-radius-base; + .border-top-radius(0); +} + // Justified button groups -- cgit v1.2.3 From 6ec0fd7d43d1ab243a8796b7544a4634ef086117 Mon Sep 17 00:00:00 2001 From: ggam Date: Tue, 13 Aug 2013 19:06:02 +0200 Subject: Added input-size mixin --- less/forms.less | 36 +++--------------------------------- less/mixins.less | 23 +++++++++++++++++++++++ 2 files changed, 26 insertions(+), 33 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index af575db22..18d3efb54 100644 --- a/less/forms.less +++ b/less/forms.less @@ -208,43 +208,13 @@ input[type="number"] { } - // Form control sizing -// -// Relative text size, padding, and border-radii changes for form controls. For -// horizontal sizing, wrap controls in the predefined grid classes. `` +// element gets special love because it's special, and that's a fact! + +.input-size(@input-height; @padding-vertical; @padding-horizontal; @font-size; @line-height; @border-radius) { + height: @input-height; + padding: @padding-vertical @padding-horizontal; + font-size: @font-size; + line-height: @line-height; + border-radius: @border-radius; + + select& { + height: @input-height; + line-height: @input-height; + } + + textarea& { + height: auto; + } +} -- cgit v1.2.3 From 69a3e9b4d07cdaa281525c067f11ea83e1863f1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 10:24:18 -0700 Subject: enable button groups in vertical button groups --- less/button-groups.less | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 0ca9ca851..adaad3f80 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -168,18 +168,27 @@ // Vertical button groups // ---------------------- -.btn-group-vertical > .btn, -.btn-group-vertical > .btn-group { - display: block; - float: none; - width: 100%; - max-width: 100%; -} .btn-group-vertical { - .btn + .btn, - .btn + .btn-group, - .btn-group + .btn, - .btn-group + .btn-group { + > .btn, + > .btn-group { + display: block; + float: none; + width: 100%; + max-width: 100%; + } + + // Clear floats so dropdown menus can be properly placed + > .btn-group { + .clearfix(); + > .btn { + float: none; + } + } + + > .btn + .btn, + > .btn + .btn-group, + > .btn-group + .btn, + > .btn-group + .btn-group { margin-top: -1px; margin-left: 0; } @@ -204,12 +213,10 @@ .btn-group-vertical > .btn-group:first-child { > .btn:last-child, > .dropdown-toggle { - border-top-right-radius: @border-radius-base; .border-bottom-radius(0); } } .btn-group-vertical > .btn-group:last-child > .btn:first-child { - border-bottom-left-radius: @border-radius-base; .border-top-radius(0); } -- cgit v1.2.3 From 270af4dda31692eb22d48d56db5c98a0c89f4c28 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 13:16:56 -0700 Subject: fixes #9431: specify font-size in dropdown menus to avoid inheritance issues --- less/dropdowns.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index af14bf9e9..055d76717 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -33,6 +33,7 @@ padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; + font-size: @font-size-base; background-color: @dropdown-bg; border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; -- cgit v1.2.3 From 3c772b1cebfed73570247691917b40fcf3d95aa2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 13:39:21 -0700 Subject: lighter default navbar, add borders to navbars, tweak padding and alignments --- less/navbar.less | 16 +++++++++++++--- less/variables.less | 8 +++++--- 2 files changed, 18 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 71eacfb93..f23598fc0 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -13,6 +13,7 @@ min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode) margin-bottom: @navbar-margin-bottom; background-color: @navbar-bg; + border: 1px solid @navbar-border; // Prevent floats from breaking the navbar .clearfix(); @@ -50,8 +51,7 @@ // content for the user's viewport. .navbar-collapse { - padding-top: 5px; - padding-bottom: 5px; + padding: 5px @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); // Clear floated elements and prevent collapsing of padding @@ -82,6 +82,7 @@ // Static top (unfixed, but 100% wide) navbar .navbar-static-top { @media (min-width: @grid-float-breakpoint) { + border-width: 0 0 1px; border-radius: 0; } } @@ -93,6 +94,7 @@ right: 0; left: 0; z-index: @zindex-navbar-fixed; + border-width: 0 0 1px; // Undo the rounded corners @media (min-width: @grid-float-breakpoint) { @@ -166,6 +168,14 @@ // the nav the full height of the horizontal nav (above 768px). .navbar-nav { + margin-left: -@navbar-padding-horizontal; + margin-right: -@navbar-padding-horizontal; + + @media (min-width: @grid-float-breakpoint) { + margin-left: 0; + margin-right: 0; + } + > li > a { padding-top: 10px; padding-bottom: 10px; @@ -333,6 +343,7 @@ .navbar-inverse { background-color: @navbar-inverse-bg; + border-color: @navbar-inverse-border; .navbar-brand { color: @navbar-inverse-brand-color; @@ -513,7 +524,6 @@ .navbar-text { float: left; - padding: 0 @navbar-padding-horizontal; .navbar-vertical-align(@line-height-computed); } diff --git a/less/variables.less b/less/variables.less index 4bdf54905..089f4fb19 100644 --- a/less/variables.less +++ b/less/variables.less @@ -231,9 +231,10 @@ // Basics of a navbar @navbar-height: 50px; -@navbar-color: #777; -@navbar-bg: #eee; @navbar-margin-bottom: @line-height-computed; +@navbar-color: #777; +@navbar-bg: #f8f8f8; +@navbar-border: darken(@navbar-bg, 6.5%); @navbar-border-radius: @border-radius-base; @navbar-padding-horizontal: floor(@grid-gutter-width / 2); @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); @@ -243,7 +244,7 @@ @navbar-link-hover-color: #333; @navbar-link-hover-bg: transparent; @navbar-link-active-color: #555; -@navbar-link-active-bg: darken(@navbar-bg, 10%); +@navbar-link-active-bg: darken(@navbar-bg, 6.5%); @navbar-link-disabled-color: #ccc; @navbar-link-disabled-bg: transparent; @@ -263,6 +264,7 @@ // Reset inverted navbar basics @navbar-inverse-color: @gray-light; @navbar-inverse-bg: #222; +@navbar-inverse-border: darken(@navbar-inverse-bg, 10%); // Inverted navbar links @navbar-inverse-link-color: @gray-light; -- cgit v1.2.3 From f0ee3aaac03ca74cb19fc6d287b44bd9f0293ba0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Tue, 13 Aug 2013 23:31:33 +0200 Subject: Swapped input-lg and input-sm Fixing my own error. Thanks to @kyleledbetter for reporting. --- less/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index 18d3efb54..a8847be2b 100644 --- a/less/forms.less +++ b/less/forms.less @@ -210,11 +210,11 @@ input[type="number"] { // Form control sizing .input-sm { - .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); + .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); } .input-lg { - .input-size(@input-height-small; @padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); + .input-size(@input-height-large; @padding-large-vertical; @padding-large-horizontal; @font-size-large; @line-height-large; @border-radius-large); } -- cgit v1.2.3 From 2bc67b334d756f7aa26aabcc337fb4e6f6545e6b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 14:46:34 -0700 Subject: nuke the box-shadow on uncollapsed navbar-collapse --- less/navbar.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index f23598fc0..522569329 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -69,6 +69,7 @@ padding-top: 0; padding-bottom: 0; border-top: 0; + box-shadow: none; } } -- cgit v1.2.3 From fa330f308aace22886fee3dbacbcbd4f8adb0fe6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 15:19:59 -0700 Subject: Overhaul navbar alignment (.pull-) utilities (fixes #9440) Now navbars have their own float utility classes, mixin-ed versions of `.pull-left` and `.pull-right`. * Removed chained `.navbar-nav.pull-right` * Added `.navbar-left` and `.navbar-right` as mixins of the default float utilities, but only above the `@grid-float-breakpoint` to match the new navbar behavior * Updated components docs to match the new changeas * Added callout about component alignment here to explain the new classes --- less/navbar.less | 30 +++++++++++++++++++----------- 1 file changed, 19 insertions(+), 11 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 522569329..287ef603c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -205,12 +205,6 @@ } } - // Right aligned contents - // Make them full width first so that they align properly on mobile - &.pull-right { - width: 100%; - } - @media (max-width: @screen-phone-max) { // Dropdowns get custom display .open .dropdown-menu { @@ -257,13 +251,26 @@ } +// Component alignment +// +// Repurpose the pull utilities as their own navbar utilities to avoid specifity +// issues with parents and chaining. Only do this when the navbar is uncollapsed +// though so that navbar contents properly stack and align in mobile. + +@media (min-width: @grid-float-breakpoint) { + .navbar-left { .pull-left(); } + .navbar-right { .pull-right(); } +} + + // Navbar form // // Extension of the `.form-inline` with some extra flavor for optimum display in // our navbars. .navbar-form { - width: 100%; // Counteract the float from `.pull-` classes + margin-left: -@navbar-padding-horizontal; + margin-right: -@navbar-padding-horizontal; padding: 10px @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); border-bottom: 1px solid darken(@navbar-bg, 7%); @@ -284,6 +291,8 @@ @media (min-width: @grid-float-breakpoint) { width: auto; border: 0; + margin-left: 0; + margin-right: 0; padding-top: 0; padding-bottom: 0; } @@ -435,6 +444,9 @@ @media (max-width: @screen-phone-max) { // Dropdowns get custom display .open .dropdown-menu { + > .dropdown-header { + border-color: @navbar-inverse-border; + } > li > a { color: @navbar-inverse-link-color; &:hover, @@ -485,10 +497,6 @@ padding-bottom: ((@navbar-height - @line-height-computed) / 2); } } - - &.pull-right { - width: auto; - } } // Required to make the collapsing navbar work on regular desktops -- cgit v1.2.3 From 5b4fe08f42ec433d0f193d75dbaac8e6dacae526 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 13 Aug 2013 15:22:05 -0700 Subject: fixes #9439: use overflow: auto on navbar collapse --- less/navbar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 287ef603c..846695212 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -59,9 +59,9 @@ // This is not automatically added to the `.navbar-fixed-top` because it causes // z-index bugs in iOS7 (possibly earlier). - max-height: 360px; + max-height: 340px; overflow-x: visible; - overflow-y: scroll; + overflow-y: auto; -webkit-overflow-scrolling: touch; @media (min-width: @grid-float-breakpoint) { -- cgit v1.2.3 From e29c2d0c246dee59c22c4b39d03e3c53963b1889 Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Tue, 13 Aug 2013 22:30:02 -0400 Subject: Fix .navbar-right > .dropdown-menu alignment --- less/navbar.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 846695212..e5edd66f0 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -259,7 +259,10 @@ @media (min-width: @grid-float-breakpoint) { .navbar-left { .pull-left(); } - .navbar-right { .pull-right(); } + .navbar-right { + .pull-right(); + .pull-right > .dropdown-menu(); + } } -- cgit v1.2.3 From c79fa6ad044b0731ce04fcadaae9604bd764aadb Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Tue, 13 Aug 2013 22:53:23 -0400 Subject: Apply mixin to correct class --- less/navbar.less | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index e5edd66f0..6daa110f2 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -261,7 +261,9 @@ .navbar-left { .pull-left(); } .navbar-right { .pull-right(); - .pull-right > .dropdown-menu(); + .dropdown-menu { + .pull-right > .dropdown-menu(); + } } } -- cgit v1.2.3 From 1e1b5c737ba33c0e7a86634bcb3baedc70498884 Mon Sep 17 00:00:00 2001 From: Luca Wehrstedt Date: Tue, 13 Aug 2013 20:28:18 +0200 Subject: fixes #9406: proper border for justified btn-groups inside tables --- less/button-groups.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index adaad3f80..08fa740f2 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -229,6 +229,7 @@ display: table; width: 100%; table-layout: fixed; + border-collapse: separate; .btn { float: none; display: table-cell; -- cgit v1.2.3 From 09464b5d4183183524373c0a1c08cc69a5883918 Mon Sep 17 00:00:00 2001 From: Bas Bosman Date: Wed, 14 Aug 2013 16:33:35 +0200 Subject: Remove old accordion remnant --- less/variables.less | 5 ----- 1 file changed, 5 deletions(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index 089f4fb19..b85aaecf1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -516,11 +516,6 @@ @well-bg: #f5f5f5; -// Accordion -// ------------------------- -@accordion-border-color: #e5e5e5; - - // Badges // ------------------------- @badge-color: #fff; -- cgit v1.2.3 From 80d1b6b117c76ecbbb635b626a2485dda5cf801c Mon Sep 17 00:00:00 2001 From: ggam Date: Wed, 14 Aug 2013 16:40:26 +0200 Subject: Made panel-variant apply styles only to first child --- less/mixins.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 701ed2cc3..9e6d622ae 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -331,7 +331,7 @@ // ------------------------- .panel-variant(@border; @heading-text-color; @heading-bg-color; @heading-border) { border-color: @border; - .panel-heading { + & > .panel-heading { color: @heading-text-color; background-color: @heading-bg-color; border-color: @heading-border; @@ -339,7 +339,7 @@ border-top-color: @border; } } - .panel-footer { + & > .panel-footer { + .panel-collapse .panel-body { border-bottom-color: @border; } -- cgit v1.2.3 From 1b3896fabfb2adef82d801132ef0c834c566fa0c Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Wed, 14 Aug 2013 11:39:38 -0400 Subject: Remove .navbar-collapse padding when not in mobile context --- less/navbar.less | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 6daa110f2..33e90a25e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -66,8 +66,7 @@ @media (min-width: @grid-float-breakpoint) { width: auto; - padding-top: 0; - padding-bottom: 0; + padding: 0; border-top: 0; box-shadow: none; } -- cgit v1.2.3 From ef60b0e5fbccbd16b964c1397a7f4cc4c9b51663 Mon Sep 17 00:00:00 2001 From: Luis Aleman Date: Wed, 14 Aug 2013 13:03:00 -0400 Subject: Get rid of navbar-brand margin-right --- less/navbar.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 33e90a25e..f60b85a16 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -114,7 +114,6 @@ .navbar-brand { float: left; - margin-right: (@navbar-padding-horizontal / 2); padding-top: @navbar-padding-vertical; padding-bottom: @navbar-padding-vertical; font-size: @font-size-large; -- cgit v1.2.3 From 72a2efb3db4721c8ffac9f092165ee03ef732840 Mon Sep 17 00:00:00 2001 From: ggam Date: Wed, 14 Aug 2013 21:16:45 +0200 Subject: Added table-row-variant mixin --- less/mixins.less | 31 +++++++++++++++++++++++++++++++ less/tables.less | 50 +++++++------------------------------------------- 2 files changed, 38 insertions(+), 43 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 701ed2cc3..d0a65597e 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -360,6 +360,37 @@ } } +// Tables +// ------------------------- +.table-row-variant(@state; @background; @border) { + // Exact selectors below required to override `.table-striped` and prevent + // inheritance to nested tables. + .table > thead > tr, + .table > tbody > tr, + .table > tfoot > tr { + > td.@{state}, + > th.@{state}, + &.@{state} > td, + &.@{state} > th { + background-color: @background; + border-color: @border; + } + } + + // Hover states for `.table-hover` + // Note: this is not available for cells or rows within `thead` or `tfoot`. + .table-hover > tbody > tr { + > td.@{state}:hover, + > th.@{state}:hover, + &.@{state}:hover > td { + background-color: darken(@background, 5%); + border-color: darken(@border, 5%); + //background-color: darken(@background, 5%); + //border-color: darken(@border, 5%); + } + } +} + // Button variants // ------------------------- // Easily pump out default styles, as well as :hover, :focus, :active, diff --git a/less/tables.less b/less/tables.less index b3c921dbb..05c091923 100644 --- a/less/tables.less +++ b/less/tables.less @@ -164,48 +164,12 @@ table { &.active > th { background-color: @table-bg-active; } - > td.success, - > th.success, - &.success > td, - &.success > th { - background-color: @state-success-bg; - border-color: @state-success-border; - } - > td.danger, - > th.danger, - &.danger > td, - &.danger > th { - background-color: @state-danger-bg; - border-color: @state-danger-border; - } - > td.warning, - > th.warning, - &.warning > td, - &.warning > th { - background-color: @state-warning-bg; - border-color: @state-warning-border; - } } -// Hover states for `.table-hover` -// Note: this is not available for cells or rows within `thead` or `tfoot`. -.table-hover > tbody > tr { - > td.success:hover, - > th.success:hover, - &.success:hover > td { - background-color: darken(@state-success-bg, 5%); - border-color: darken(@state-success-border, 5%); - } - > td.danger:hover, - > th.danger:hover, - &.danger:hover > td { - background-color: darken(@state-danger-bg, 5%); - border-color: darken(@state-danger-border, 5%); - } - > td.warning:hover, - > th.warning:hover, - &.warning:hover > td { - background-color: darken(@state-warning-bg, 5%); - border-color: darken(@state-warning-border, 5%); - } -} +// 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); -- cgit v1.2.3 From 537910d4843c0c7edaa6c1501498d17466e63794 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Gonz=C3=A1lez=20de=20Ag=C3=BCero?= Date: Wed, 14 Aug 2013 23:12:47 +0200 Subject: Removed commented lines --- less/mixins.less | 2 -- 1 file changed, 2 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index d0a65597e..eb80823e5 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -385,8 +385,6 @@ &.@{state}:hover > td { background-color: darken(@background, 5%); border-color: darken(@border, 5%); - //background-color: darken(@background, 5%); - //border-color: darken(@border, 5%); } } } -- cgit v1.2.3 From 4d527ec316081113808f54a67a5a0d825071f480 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 14 Aug 2013 16:06:51 -0700 Subject: fixes #8702 until Normalize.css starts handling this --- less/scaffolding.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index 0c1774e28..bd8392ac4 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -39,6 +39,14 @@ textarea { line-height: inherit; } +// Reset unusual Firefox-on-Android default style, see https://github.com/necolas/normalize.css/issues/214 +button, +input, +select[multiple], +textarea { + background-image: none; +} + // Links // ------------------------- -- cgit v1.2.3 From e684758b55dbfe1e18f3e3aa4d5eddcfaf1bd010 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 14 Aug 2013 18:20:28 -0700 Subject: fixes #9511; set cursor:not-allowed for disabled buttons,checkboxes,radios --- less/buttons.less | 2 +- less/forms.less | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index e5c287fd7..7b8692cee 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -41,7 +41,7 @@ &.disabled, &[disabled], fieldset[disabled] & { - cursor: default; + cursor: not-allowed; pointer-events: none; // Future-proof disabling of clicks .opacity(.65); .box-shadow(none); diff --git a/less/forms.less b/less/forms.less index a8847be2b..adcb0dc32 100644 --- a/less/forms.less +++ b/less/forms.less @@ -133,7 +133,7 @@ input[type="number"] { .form-control-focus(); // Disabled and read-only inputs - // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be + // Note: HTML5 says that controls under a fieldset > legend:first-child won't be // disabled if the fieldset is disabled. Due to implementation difficulty, // we don't honor that edge case; we style them as disabled anyway. &[disabled], @@ -207,6 +207,20 @@ input[type="number"] { margin-left: 10px; // space out consecutive inline controls } +// Apply same disabled cursor tweak as for inputs +// Note: HTML5 says that controls under a fieldset > legend:first-child won't be +// disabled if the fieldset is disabled. Due to implementation difficulty, +// we don't honor that edge case; we style them as disabled anyway. +// Note: Neither radios nor checkboxes can be readonly. +.radio, +.radio-inline, +.checkbox, +.checkbox-inline { + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + } +} // Form control sizing .input-sm { -- cgit v1.2.3 From 3a67054536338c613c43078b6f48e5f502bf527d Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Wed, 14 Aug 2013 19:07:14 -0700 Subject: fix copypasta-o to fully fix #9295 --- less/input-groups.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/input-groups.less b/less/input-groups.less index 153b22957..570f03f90 100644 --- a/less/input-groups.less +++ b/less/input-groups.less @@ -32,7 +32,7 @@ .input-group-lg > .input-group-btn > .btn { .input-lg(); } .input-group-sm > .form-control, .input-group-sm > .input-group-addon, -.input-group-lg > .input-group-btn > .btn { .input-sm(); } +.input-group-sm > .input-group-btn > .btn { .input-sm(); } // Display as table-cell -- cgit v1.2.3 From 2e8a146b61af1e197208ae2d52ee4bf4034352d4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 21:24:48 -0700 Subject: remove gradients from dropdown menu items on hover/active (fixes #9473) --- less/dropdowns.less | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index 99cf7d00d..d9417358b 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -75,8 +75,7 @@ &:focus { 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%); + background-color: @dropdown-link-hover-bg; } } @@ -88,8 +87,7 @@ color: @dropdown-link-active-color; 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%); + background-color: @dropdown-link-active-bg; } } -- cgit v1.2.3 From 9de788134fa40e37577a324c0d37377dc0369ec9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 21:32:23 -0700 Subject: refactor navbar file to better nest css and restore navbar-color to navbar text (fixes #9500) --- less/navbar.less | 149 ++++++++++++++++++++++++------------------------------- 1 file changed, 65 insertions(+), 84 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 33e90a25e..5d1280ce2 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -69,6 +69,13 @@ padding: 0; border-top: 0; box-shadow: none; + + &.collapse { + display: block !important; + height: auto !important; + padding-bottom: 0; // Override default setting + overflow: visible !important; + } } } @@ -159,6 +166,13 @@ .icon-bar + .icon-bar { margin-top: 4px; } + + @media (min-width: @grid-float-breakpoint) { + position: relative; + top: auto; + left: auto; + display: none; + } } @@ -171,11 +185,6 @@ margin-left: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal; - @media (min-width: @grid-float-breakpoint) { - margin-left: 0; - margin-right: 0; - } - > li > a { padding-top: 10px; padding-bottom: 10px; @@ -205,7 +214,7 @@ } @media (max-width: @screen-phone-max) { - // Dropdowns get custom display + // Dropdowns get custom display when collapsed .open .dropdown-menu { position: static; float: none; @@ -247,6 +256,20 @@ } } + // Uncollapse the nav + @media (min-width: @grid-float-breakpoint) { + float: left; + margin: 0; + + > li { + float: left; + > a { + padding-top: ((@navbar-height - @line-height-computed) / 2); + padding-bottom: ((@navbar-height - @line-height-computed) / 2); + } + } + } + } @@ -351,6 +374,38 @@ } +// Buttons in navbars +// +// Vertically center a button within a navbar (when *not* in a form). + +.navbar-btn { + margin-top: ((@navbar-height - @input-height-base) / 2); +} + + +// Text in navbars +// +// Add a class to make any element properly align itself vertically within the navbars. + +.navbar-text { + float: left; + color: @navbar-color; + .navbar-vertical-align(@line-height-computed); +} + + +// Links in navbars +// +// Add a class to ensure links outside the navbar nav are colored correctly. + +// Default navbar variables +.navbar-link { + color: @navbar-link-color; + &:hover { + color: @navbar-link-hover-color; + } +} + // Inverse navbar // -------------------------------------------------- @@ -479,85 +534,11 @@ } } -} - - - -// Responsive navbar -// -------------------------------------------------- - -@media screen and (min-width: @grid-float-breakpoint) { - - .navbar-nav { - float: left; - // undo margin to make nav extend full height of navbar - margin-top: 0; - margin-bottom: 0; - - > li { - float: left; - > a { - padding-top: ((@navbar-height - @line-height-computed) / 2); - padding-bottom: ((@navbar-height - @line-height-computed) / 2); - } + .navbar-link { + color: @navbar-inverse-link-color; + &:hover { + color: @navbar-inverse-link-hover-color; } } - // Required to make the collapsing navbar work on regular desktops - .navbar-toggle { - position: relative; - top: auto; - left: auto; - display: none; - } - .navbar-collapse.collapse { - display: block !important; - height: auto !important; - padding-bottom: 0; // Override default setting - overflow: visible !important; - } - -} - - - -// Buttons in navbars -// -// Vertically center a button within a navbar (when *not* in a form). - -.navbar-btn { - margin-top: ((@navbar-height - @input-height-base) / 2); -} - - - -// Text in navbars -// -// Add a class to make any element properly align itself vertically within the navbars. - -.navbar-text { - float: left; - .navbar-vertical-align(@line-height-computed); -} - - - -// Links in navbars -// -// Add a class to ensure links outside the navbar nav are colored correctly. - -// Default navbar variables -.navbar-link { - color: @navbar-link-color; - &:hover { - color: @navbar-link-hover-color; - } -} - -// Use the inverse navbar variables -.navbar-inverse .navbar-link { - color: @navbar-inverse-link-color; - &:hover { - color: @navbar-inverse-link-hover-color; - } } -- cgit v1.2.3 From 0456e5e4b38e4b43a11da68d2e16187728dd05a0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 23:02:58 -0700 Subject: fixes #9508: use navbar align mixin for buttons to get correct top/bottom spacing --- less/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index c8ab44cce..9ac5edbe9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -378,7 +378,7 @@ // Vertically center a button within a navbar (when *not* in a form). .navbar-btn { - margin-top: ((@navbar-height - @input-height-base) / 2); + .navbar-vertical-align(@input-height-base); } -- cgit v1.2.3 From 622fe05ff4c7f4110d5de8d4648505cfbf7349b2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 14 Aug 2013 23:06:37 -0700 Subject: fixes #9445: make img responsive mixin use display block, but provide option to pass custom value to it --- less/scaffolding.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/scaffolding.less b/less/scaffolding.less index bd8392ac4..e4aa67260 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -73,8 +73,8 @@ img { } // Responsive images (ensure images don't scale beyond their parents) -.img-responsive { - display: inline-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 } -- cgit v1.2.3 From 1b6a5bbca2595c60189ae07fc771fe3a7fc4a55f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 00:07:23 -0700 Subject: fixes #9507: remove padding on navbar-collapse as any padding on an animated object screws it up; instead use some padding on the navbar nav --- less/navbar.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 9ac5edbe9..b23cec986 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -51,7 +51,8 @@ // content for the user's viewport. .navbar-collapse { - padding: 5px @navbar-padding-horizontal; + padding-right: @navbar-padding-horizontal; + padding-left: @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); // Clear floated elements and prevent collapsing of padding @@ -66,7 +67,8 @@ @media (min-width: @grid-float-breakpoint) { width: auto; - padding: 0; + padding-right: 0; + padding-left: 0; border-top: 0; box-shadow: none; @@ -181,6 +183,8 @@ // the nav the full height of the horizontal nav (above 768px). .navbar-nav { + padding-top: (@navbar-padding-vertical / 2); + padding-bottom: (@navbar-padding-vertical / 2); margin-left: -@navbar-padding-horizontal; margin-right: -@navbar-padding-horizontal; @@ -259,6 +263,8 @@ @media (min-width: @grid-float-breakpoint) { float: left; margin: 0; + padding-top: 0; + padding-bottom: 0; > li { float: left; -- cgit v1.2.3 From fee3f1e733e80bd128736e1b9b403f49b701a6a9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 00:46:18 -0700 Subject: fixes #9582: restore img-responsive as a class and move it's mixin to mixins.less --- less/mixins.less | 23 +++++++++++++++++------ less/scaffolding.less | 6 ++---- 2 files changed, 19 insertions(+), 10 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0f30c2984..65d8a0f70 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -294,10 +294,10 @@ -// RETINA IMAGE SUPPORT -// -------------------------------------------------- - +// Retina images +// // Short retina mixin for setting background-image and -size + .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { background-image: url("@{file-1x}"); @@ -314,6 +314,17 @@ } +// Responsive image +// +// Keep images from scaling beyond the width of their parents. + +.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 +} + + // COMPONENT MIXINS // -------------------------------------------------- @@ -376,7 +387,7 @@ border-color: @border; } } - + // Hover states for `.table-hover` // Note: this is not available for cells or rows within `thead` or `tfoot`. .table-hover > tbody > tr { @@ -710,12 +721,12 @@ font-size: @font-size; line-height: @line-height; border-radius: @border-radius; - + select& { height: @input-height; line-height: @input-height; } - + textarea& { height: auto; } diff --git a/less/scaffolding.less b/less/scaffolding.less index e4aa67260..3a6ed3d99 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -73,10 +73,8 @@ img { } // Responsive images (ensure images don't scale beyond their parents) -.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 +.img-responsive { + .img-responsive(); } // Rounded corners -- cgit v1.2.3 From 51f2c907e738a6dd531de36c52ddfc103f76b918 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 10:30:37 -0700 Subject: fixes #9607: restore bottom border on hover of nav tabs for proper display --- less/navs.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 610b97e00..c9c54041e 100644 --- a/less/navs.less +++ b/less/navs.less @@ -87,7 +87,7 @@ border: 1px solid transparent; border-radius: @border-radius-base @border-radius-base 0 0; &:hover { - border-color: @nav-tabs-link-hover-border-color; + border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; } } -- cgit v1.2.3 From 209d3af30188a6b426f0cf84d81b367b2f056e1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:31:26 -0700 Subject: Fixes #9617: consistent variation order, add .label-primary --- less/labels.less | 12 ++++++++---- less/variables.less | 1 + 2 files changed, 9 insertions(+), 4 deletions(-) (limited to 'less') diff --git a/less/labels.less b/less/labels.less index 941d27f30..6a0229817 100644 --- a/less/labels.less +++ b/less/labels.less @@ -37,18 +37,22 @@ .label-variant(@label-default-bg); } -.label-danger { - .label-variant(@label-danger-bg); +.label-primary { + .label-variant(@label-primary-bg); } .label-success { .label-variant(@label-success-bg); } +.label-info { + .label-variant(@label-info-bg); +} + .label-warning { .label-variant(@label-warning-bg); } -.label-info { - .label-variant(@label-info-bg); +.label-danger { + .label-variant(@label-danger-bg); } diff --git a/less/variables.less b/less/variables.less index b85aaecf1..a76ffc96b 100644 --- a/less/variables.less +++ b/less/variables.less @@ -396,6 +396,7 @@ // ------------------------- @label-default-bg: @gray-light; +@label-primary-bg: @brand-primary; @label-success-bg: @brand-success; @label-info-bg: @brand-info; @label-warning-bg: @brand-warning; -- cgit v1.2.3 From 06e6da09182f15f6eec6eaa68cb5e6c2af249a04 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:36:08 -0700 Subject: fixes #9596: proper dropup caret colors --- less/button-groups.less | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) (limited to 'less') diff --git a/less/button-groups.less b/less/button-groups.less index 08fa740f2..e4a78cd4e 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -18,16 +18,18 @@ border-top-color: #fff; } } -.dropup .caret { - .btn-default & { +.dropup { + & .btn-default .caret { border-bottom-color: @btn-default-color; } - .btn-primary &, - .btn-success &, - .btn-warning &, - .btn-danger &, - .btn-info & { - border-bottom-color: #fff; + & .btn-primary, + & .btn-success, + & .btn-warning, + & .btn-danger, + & .btn-info { + .caret { + border-bottom-color: #fff; + } } } -- cgit v1.2.3 From 5a0ba42a7becc00ea4c64806b714c5f351b9b96d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:47:56 -0700 Subject: fix up inverse navbar form styles --- less/navbar.less | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index b23cec986..e9b9ba95c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -306,6 +306,8 @@ padding: 10px @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); border-bottom: 1px solid darken(@navbar-bg, 7%); + @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); // Mixin behavior for optimum display .form-inline(); @@ -327,6 +329,7 @@ margin-right: 0; padding-top: 0; padding-bottom: 0; + .box-shadow(none); } } @@ -472,8 +475,9 @@ } } - .navbar-collapse { - border-top-color: darken(@navbar-inverse-bg, 7%); + .navbar-collapse, + .navbar-form { + border-color: darken(@navbar-inverse-bg, 7%); } // Dropdowns -- cgit v1.2.3 From 2690a3dc3185e9666384cf6982354f0456473da7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:52:22 -0700 Subject: Add to #9578 and fix #9614: use cursor not-allowed on radios and checkboxes --- less/forms.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'less') diff --git a/less/forms.less b/less/forms.less index adcb0dc32..c59cdd4d7 100644 --- a/less/forms.less +++ b/less/forms.less @@ -133,9 +133,9 @@ input[type="number"] { .form-control-focus(); // Disabled and read-only inputs - // Note: HTML5 says that controls under a fieldset > legend:first-child won't be - // disabled if the fieldset is disabled. Due to implementation difficulty, - // we don't honor that edge case; we style them as disabled anyway. + // Note: HTML5 says that controls under a fieldset > legend:first-child won't + // be disabled if the fieldset is disabled. Due to implementation difficulty, + // we don't honor that edge case; we style them as disabled anyway. &[disabled], &[readonly], fieldset[disabled] & { @@ -208,10 +208,10 @@ input[type="number"] { } // Apply same disabled cursor tweak as for inputs -// Note: HTML5 says that controls under a fieldset > legend:first-child won't be -// disabled if the fieldset is disabled. Due to implementation difficulty, -// we don't honor that edge case; we style them as disabled anyway. +// // Note: Neither radios nor checkboxes can be readonly. +input[type="radio"], +input[type="checkbox"], .radio, .radio-inline, .checkbox, -- cgit v1.2.3 From 4b350f8b79710d388ff8c711fba7a877812a6c1e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 11:56:07 -0700 Subject: delete comments --- less/progress-bars.less | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'less') diff --git a/less/progress-bars.less b/less/progress-bars.less index d4c498c51..49e5df8e3 100644 --- a/less/progress-bars.less +++ b/less/progress-bars.less @@ -78,22 +78,18 @@ // Variations // ------------------------- -// Danger (red) -.progress-bar-danger { - .progress-bar-variant(@progress-bar-danger-bg); -} - -// Success (green) .progress-bar-success { .progress-bar-variant(@progress-bar-success-bg); } -// Warning (orange) +.progress-bar-info { + .progress-bar-variant(@progress-bar-info-bg); +} + .progress-bar-warning { .progress-bar-variant(@progress-bar-warning-bg); } -// Info (teal) -.progress-bar-info { - .progress-bar-variant(@progress-bar-info-bg); +.progress-bar-danger { + .progress-bar-variant(@progress-bar-danger-bg); } -- cgit v1.2.3 From f9d2f9b6cd805c39217dcef0a11d4b721dc8e045 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 13:16:06 -0700 Subject: improve pagination's active state so it looks less like the active state and more like active nav items --- less/pagination.less | 29 ++++++++++++++++++++--------- less/variables.less | 9 +++++++-- 2 files changed, 27 insertions(+), 11 deletions(-) (limited to 'less') diff --git a/less/pagination.less b/less/pagination.less index 12bb71b19..b480b3889 100644 --- a/less/pagination.less +++ b/less/pagination.less @@ -11,18 +11,19 @@ display: inline; // Remove list-style and block-level defaults > a, > span { + position: relative; float: left; // Collapse white-space padding: @padding-base-vertical @padding-base-horizontal; line-height: @line-height-base; text-decoration: none; background-color: @pagination-bg; border: 1px solid @pagination-border; - border-left-width: 0; + margin-left: -1px; } &:first-child { > a, > span { - border-left-width: 1px; + margin-left: 0; .border-left-radius(@border-radius-base); } } @@ -34,16 +35,25 @@ } } - > li > a:hover, - > li > a:focus, - > .active > a, - > .active > span { - background-color: @pagination-active-bg; + > li > a, + > li > span { + &:hover, + &:focus { + background-color: @pagination-hover-bg; + } } + > .active > a, > .active > span { - color: @pagination-active-color; - cursor: default; + &, + &:hover, + &:focus { + z-index: 2; + color: @pagination-active-color; + background-color: @pagination-active-bg; + border-color: @pagination-active-bg; + cursor: default; + } } > .disabled { @@ -53,6 +63,7 @@ > a:focus { color: @pagination-disabled-color; background-color: @pagination-bg; + border-color: @pagination-border; cursor: not-allowed; } } diff --git a/less/variables.less b/less/variables.less index a76ffc96b..79415c637 100644 --- a/less/variables.less +++ b/less/variables.less @@ -326,10 +326,15 @@ @pagination-bg: #fff; @pagination-border: #ddd; -@pagination-active-bg: #f5f5f5; -@pagination-active-color: @gray-light; + +@pagination-hover-bg: @gray-lighter; + +@pagination-active-bg: @brand-primary; +@pagination-active-color: #fff; + @pagination-disabled-color: @gray-light; + // Pager // ------------------------- -- cgit v1.2.3 From 0664b3f0da25a99c5e0d88fdc566480baeaf83aa Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 13:29:45 -0700 Subject: fixes #9634: turn off overflow-y when the navbar is re-expanded into horizontal mode --- less/navbar.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index e9b9ba95c..d1f7bddea 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -78,6 +78,10 @@ padding-bottom: 0; // Override default setting overflow: visible !important; } + + &.in { + overflow-y: visible; + } } } -- cgit v1.2.3 From 418ca6c09b393096e80aef9dde0072943f6d7c63 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 13:40:21 -0700 Subject: fixes #9622: reset to inline-block for img-thumbnail, but keep block for .thumbnail > img --- less/thumbnails.less | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'less') diff --git a/less/thumbnails.less b/less/thumbnails.less index d209412dc..76f79b9e5 100644 --- a/less/thumbnails.less +++ b/less/thumbnails.less @@ -20,10 +20,12 @@ .thumbnail { display: block; } -.thumbnail > img, -.img-thumbnail { +.thumbnail > img { .img-responsive(); } +.img-thumbnail { + .img-responsive(inline-block); +} // Add a hover state for linked versions only a.thumbnail:hover, -- cgit v1.2.3 From 2dbf2bb8fb388f84027ce33429e91c06c573acfc Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 13:54:47 -0700 Subject: fixes #9629 --- less/navbar.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index d1f7bddea..dc11007ec 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -403,6 +403,11 @@ float: left; color: @navbar-color; .navbar-vertical-align(@line-height-computed); + + @media (min-width: @grid-float-breakpoint) { + margin-left: @navbar-padding-horizontal; + margin-right: @navbar-padding-horizontal; + } } -- cgit v1.2.3 From bf1772130855ba0423fabe8fdce8015a3f7f739c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 13:58:16 -0700 Subject: fixes #9587: add var for nav link padding --- less/navs.less | 2 +- less/variables.less | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index c9c54041e..e4b3243d3 100644 --- a/less/navs.less +++ b/less/navs.less @@ -19,7 +19,7 @@ > a { position: relative; display: block; - padding: 10px 15px; + padding: @nav-link-padding; &:hover, &:focus { text-decoration: none; diff --git a/less/variables.less b/less/variables.less index 79415c637..aa0f9fb0c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -296,6 +296,7 @@ // Navs // ------------------------- +@nav-link-padding: 10px 15px; @nav-link-hover-bg: @gray-lighter; @nav-disabled-link-color: @gray-light; -- cgit v1.2.3 From 16d7265c9b2bf89bf24a6e133dffc9308614cd49 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 15:16:46 -0700 Subject: fixes #9647: ensure open dropdown toggles get .active styles --- less/mixins.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 65d8a0f70..f717b9269 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -412,7 +412,8 @@ &:hover, &:focus, &:active, - &.active { + &.active, + .open .dropdown-toggle& { color: @color; background-color: darken(@background, 8%); border-color: darken(@border, 12%); -- cgit v1.2.3 From 7cd35f0cb6d17d6117264f71f175a9e5b0b09580 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 16:17:44 -0700 Subject: nuke bg image on active/open for buttons for when we add gradients --- less/buttons.less | 1 + less/mixins.less | 6 +++++- 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 7b8692cee..9cd6f7354 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -35,6 +35,7 @@ &:active, &.active { outline: 0; + background-image: none; .box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); } diff --git a/less/mixins.less b/less/mixins.less index f717b9269..497dbf201 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -418,7 +418,11 @@ background-color: darken(@background, 8%); border-color: darken(@border, 12%); } - + &:active, + &.active, + .open .dropdown-toggle& { + background-image: none; + } &.disabled, &[disabled], fieldset[disabled] & { -- cgit v1.2.3 From fc88bcf0d15417c05c6d37027579bb5e3cb34236 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 18:58:02 -0700 Subject: fixes #9655: scrope list group styles in panels to immediate children only --- less/panels.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index 063973160..6d22dd965 100644 --- a/less/panels.less +++ b/less/panels.less @@ -23,7 +23,7 @@ // any kind of custom content between the two. .panel { - .list-group { + > .list-group { margin-bottom: 0; .list-group-item { -- cgit v1.2.3 From b0a66e60c1ebf13e6bfdb9d844e9ca6d3cd88251 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 20:25:20 -0700 Subject: Fixes #9663: Add offset overrides for medium and large grid tiers --- less/grid.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index c51aab9c7..f38b26a48 100644 --- a/less/grid.less +++ b/less/grid.less @@ -248,6 +248,7 @@ .col-md-pull-11 { right: percentage((11/ @grid-columns)); } // Offsets + .col-md-offset-0 { margin-left: 0; } .col-md-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-md-offset-2 { margin-left: percentage((2 / @grid-columns)); } .col-md-offset-3 { margin-left: percentage((3 / @grid-columns)); } @@ -326,6 +327,7 @@ .col-lg-pull-11 { right: percentage((11/ @grid-columns)); } // Offsets + .col-lg-offset-0 { margin-left: 0; } .col-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); } -- cgit v1.2.3 From 111bdc4e93ffd61b08736e7ec87699dc4a8d3ca2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 20:31:11 -0700 Subject: fixes #9663: second part, reset pushes and pulls in md and lg grid tiers --- less/grid.less | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index f38b26a48..e3684e5ae 100644 --- a/less/grid.less +++ b/less/grid.less @@ -223,6 +223,7 @@ .col-md-12 { width: 100%; } // Push and pull columns for source order changes + .col-md-push-0 { left: auto; } .col-md-push-1 { left: percentage((1 / @grid-columns)); } .col-md-push-2 { left: percentage((2 / @grid-columns)); } .col-md-push-3 { left: percentage((3 / @grid-columns)); } @@ -235,6 +236,7 @@ .col-md-push-10 { left: percentage((10/ @grid-columns)); } .col-md-push-11 { left: percentage((11/ @grid-columns)); } + .col-md-pull-0 { right: auto; } .col-md-pull-1 { right: percentage((1 / @grid-columns)); } .col-md-pull-2 { right: percentage((2 / @grid-columns)); } .col-md-pull-3 { right: percentage((3 / @grid-columns)); } @@ -302,6 +304,7 @@ .col-lg-12 { width: 100%; } // Push and pull columns for source order changes + .col-lg-push-0 { left: auto; } .col-lg-push-1 { left: percentage((1 / @grid-columns)); } .col-lg-push-2 { left: percentage((2 / @grid-columns)); } .col-lg-push-3 { left: percentage((3 / @grid-columns)); } @@ -314,6 +317,7 @@ .col-lg-push-10 { left: percentage((10/ @grid-columns)); } .col-lg-push-11 { left: percentage((11/ @grid-columns)); } + .col-lg-pull-0 { right: auto; } .col-lg-pull-1 { right: percentage((1 / @grid-columns)); } .col-lg-pull-2 { right: percentage((2 / @grid-columns)); } .col-lg-pull-3 { right: percentage((3 / @grid-columns)); } -- cgit v1.2.3 From 2fa0975956f646be627aaa4732527f6de5335a2c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 15 Aug 2013 21:51:41 -0700 Subject: don't scope width on .make-xs-column mixin --- less/mixins.less | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 497dbf201..f726b9402 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -550,17 +550,12 @@ .make-xs-column(@columns; @gutter: @grid-gutter-width) { position: relative; float: left; + width: percentage((@columns / @grid-columns)); // Prevent columns from collapsing when empty min-height: 1px; // Inner gutter via padding padding-left: (@gutter / 2); padding-right: (@gutter / 2); - @max-width: (@screen-small - 1); - - // Calculate width based on number of columns available - @media (max-width: @max-width) { - width: percentage((@columns / @grid-columns)); - } } // Generate the small columns -- cgit v1.2.3 From 771ac3207e1f5c0a624680a11e8245da13dcac12 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 11:08:29 -0700 Subject: xs button is xs-er (fixes #9695) --- less/buttons.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/buttons.less b/less/buttons.less index 9cd6f7354..5d60d39a7 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -131,7 +131,7 @@ .button-size(@padding-small-vertical; @padding-small-horizontal; @font-size-small; @line-height-small; @border-radius-small); } .btn-xs { - padding: 3px 5px; + padding: 1px 5px; } -- cgit v1.2.3 From ed4316d9b28e532d0bdbe3b5ddd23006ea7f7f9b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 11:16:32 -0700 Subject: fixes #9642: open dropdown nav items get proper styling --- less/navs.less | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index e4b3243d3..6b057a800 100644 --- a/less/navs.less +++ b/less/navs.less @@ -42,17 +42,12 @@ } // Open dropdowns - &.open > a { + .open > a { &, &:hover, &:focus { - color: @nav-open-link-hover-color; - background-color: @link-color; + background-color: @nav-link-hover-bg; border-color: @link-color; - .caret { - border-top-color: @nav-open-caret-border-color; - border-bottom-color: @nav-open-caret-border-color; - } } } -- cgit v1.2.3 From e5f38207e0f8a356728e78f91a83b945934fd71d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 11:34:30 -0700 Subject: fixed navbar static top borders --- less/navbar.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index dc11007ec..c7954bc1f 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -94,8 +94,8 @@ // Static top (unfixed, but 100% wide) navbar .navbar-static-top { + border-width: 0 0 1px; @media (min-width: @grid-float-breakpoint) { - border-width: 0 0 1px; border-radius: 0; } } -- cgit v1.2.3 From c13772d5f7584a83476a12fec379d8424ea312d1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 12:38:41 -0700 Subject: switch to margin on navbar-nav to avoid stacking negative space reported in #9705 --- less/navbar.less | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index c7954bc1f..f970d8ef9 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -187,10 +187,7 @@ // the nav the full height of the horizontal nav (above 768px). .navbar-nav { - padding-top: (@navbar-padding-vertical / 2); - padding-bottom: (@navbar-padding-vertical / 2); - margin-left: -@navbar-padding-horizontal; - margin-right: -@navbar-padding-horizontal; + margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal; > li > a { padding-top: 10px; @@ -267,8 +264,6 @@ @media (min-width: @grid-float-breakpoint) { float: left; margin: 0; - padding-top: 0; - padding-bottom: 0; > li { float: left; -- cgit v1.2.3 From e6f185acad5741fcbe0b3305e0660e5e6ea4f41c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 14:01:32 -0700 Subject: Justified nav now responsive; example updated accordingly (fixes #9708) --- less/navs.less | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/navs.less b/less/navs.less index 6b057a800..abee86dcc 100644 --- a/less/navs.less +++ b/less/navs.less @@ -154,14 +154,20 @@ .nav-justified { width: 100%; + > li { float: none; - display: table-cell; - width: 1%; - > a { + > a { text-align: center; } } + + @media (min-width: @screen-small) { + > li { + display: table-cell; + width: 1%; + } + } } // Move borders to anchors instead of bottom of list -- cgit v1.2.3 From f459d76e388b1d73b8b0065f8fbaf573f7eaed32 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 15:07:45 -0700 Subject: fixes #9475 --- less/navbar.less | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index f970d8ef9..b5320ba4e 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -51,20 +51,19 @@ // content for the user's viewport. .navbar-collapse { + max-height: 340px; + overflow-x: visible; padding-right: @navbar-padding-horizontal; padding-left: @navbar-padding-horizontal; border-top: 1px solid darken(@navbar-bg, 7%); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); - // Clear floated elements and prevent collapsing of padding .clearfix(); - - // This is not automatically added to the `.navbar-fixed-top` because it causes - // z-index bugs in iOS7 (possibly earlier). - max-height: 340px; - overflow-x: visible; - overflow-y: auto; -webkit-overflow-scrolling: touch; + &.in { + overflow-y: auto; + } + @media (min-width: @grid-float-breakpoint) { width: auto; padding-right: 0; -- cgit v1.2.3 From e4bb388bc91790d2b0a0ff0be1f329945adcc3ff Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 15:16:03 -0700 Subject: Make negative margins on rows the default, not just in containers, and add padding to body to compensate --- less/mixins.less | 16 ++-------------- less/scaffolding.less | 2 ++ 2 files changed, 4 insertions(+), 14 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index f726b9402..0a754f5a8 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -529,21 +529,9 @@ // Creates a wrapper for a series of columns .make-row(@gutter: @grid-gutter-width) { - // Then clear the floated columns + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); .clearfix(); - - .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: (@gutter / -2); - margin-right: (@gutter / -2); - } } // Generate the extra small columns diff --git a/less/scaffolding.less b/less/scaffolding.less index 3a6ed3d99..eb6f1364d 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -22,6 +22,8 @@ html { } body { + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; -- cgit v1.2.3 From cd0df1d21aaed8751b8c29aab3b30ff027aac89d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 16 Aug 2013 22:37:02 -0700 Subject: fixes #9436 more: put padding on containers, not the body because full width elements --- less/mixins.less | 2 ++ less/scaffolding.less | 2 -- less/variables.less | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) (limited to 'less') diff --git a/less/mixins.less b/less/mixins.less index 0a754f5a8..de21668b7 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -524,6 +524,8 @@ .container-fixed() { margin-right: auto; margin-left: auto; + padding-left: (@grid-gutter-width / 2); + padding-right: (@grid-gutter-width / 2); .clearfix(); } diff --git a/less/scaffolding.less b/less/scaffolding.less index eb6f1364d..3a6ed3d99 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -22,8 +22,6 @@ html { } body { - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); font-family: @font-family-base; font-size: @font-size-base; line-height: @line-height-base; diff --git a/less/variables.less b/less/variables.less index aa0f9fb0c..ddfeae727 100644 --- a/less/variables.less +++ b/less/variables.less @@ -600,10 +600,10 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: 720px; +@container-tablet: 750px; // 720px + 30px left/right padding // Medium screen / desktop -@container-desktop: 940px; +@container-desktop: 970px; // 940px + 30px left/right padding // Large screen / wide desktop -@container-large-desktop: 1140px; +@container-large-desktop: 1170px; // 1140px + 30px left/right padding -- cgit v1.2.3 From e12d6208b6912aefe7ead384e460006988ebdbec Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 17 Aug 2013 00:02:17 -0700 Subject: un-hardcode @grid-gutter-width in @container-* LESS vars --- less/variables.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less') diff --git a/less/variables.less b/less/variables.less index ddfeae727..c3eeaaebc 100644 --- a/less/variables.less +++ b/less/variables.less @@ -600,10 +600,10 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: 750px; // 720px + 30px left/right padding +@container-tablet: ((720px + @grid-gutter-width)); // Medium screen / desktop -@container-desktop: 970px; // 940px + 30px left/right padding +@container-desktop: ((940px + @grid-gutter-width)); // Large screen / wide desktop -@container-large-desktop: 1170px; // 1140px + 30px left/right padding +@container-large-desktop: ((1140px + @grid-gutter-width)); -- cgit v1.2.3 From 0555d11665903d8103ddd6ff4114056de6c0af51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Zlatan=20Vasovi=C4=87?= Date: Sat, 17 Aug 2013 15:24:37 +0200 Subject: Removed blank .hidden-print Blank .hidden-print class doesn't have sense. --- less/responsive-utilities.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less') diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index cec869083..529152032 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -137,7 +137,6 @@ .visible-print { .responsive-invisibility(); } -.hidden-print { } @media print { .visible-print { -- cgit v1.2.3 From ab700d753c5dd77d278c7ee284b5d4c8250543c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 13:07:21 -0700 Subject: fix #9743: pager hover background should be light gray --- less/pager.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/pager.less b/less/pager.less index 04585a3a7..16993ddc8 100644 --- a/less/pager.less +++ b/less/pager.less @@ -23,7 +23,7 @@ > a:hover, > a:focus { text-decoration: none; - background-color: @pagination-active-bg; + background-color: @pagination-hover-bg; } } -- cgit v1.2.3 From 82f6f08f89ab8b86aa2d5b175493e24d1f4329cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 13:18:10 -0700 Subject: Fixes #9552: Downsize and use whole numbers for panel title to prevent odd 1px bug --- less/panels.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index 6d22dd965..5cd04b3db 100644 --- a/less/panels.less +++ b/less/panels.less @@ -59,7 +59,7 @@ .panel-title { margin-top: 0; margin-bottom: 0; - font-size: (@font-size-base * 1.25); + font-size: ceil((@font-size-base * 1.125)); > a { color: inherit; } -- cgit v1.2.3 From 0c70744ea22126b6224bde75b4ccb6068941e38f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 13:33:53 -0700 Subject: fixes #9538: prevent Firefox rendering bug via some border-fu --- less/dropdowns.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'less') diff --git a/less/dropdowns.less b/less/dropdowns.less index d9417358b..53aab0267 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -13,6 +13,9 @@ border-top: @caret-width-base solid @dropdown-caret-color; 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; content: ""; } @@ -161,7 +164,9 @@ .navbar-fixed-bottom .dropdown { // Reverse the caret .caret { - border-top: 0; + // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this + // gets fixed, restore `border-top: 0;`. + border-top: 0 dotted; border-bottom: 4px solid @dropdown-caret-color; content: ""; } -- cgit v1.2.3 From 6ca32589b59434574a9e9ed6cb12718b0234754e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 14:15:33 -0700 Subject: 2px border on thead th elements for just a tad more separation --- less/tables.less | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'less') diff --git a/less/tables.less b/less/tables.less index 05c091923..6fa535d15 100644 --- a/less/tables.less +++ b/less/tables.less @@ -35,6 +35,7 @@ th { // Bottom align for column headings thead > tr > th { vertical-align: bottom; + border-bottom: 2px solid @table-border-color; } // Remove top border from thead by default caption + thead, @@ -92,6 +93,14 @@ th { } } } + > thead { + > tr { + > th, + > td { + border-bottom-width: 2px; + } + } + } } -- cgit v1.2.3 From 61caed21e2553e1be29d98bd83c8e6ac06565ecd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:21:38 -0700 Subject: More consistent naming with screen size variables using xs, sm, md, and lg --- less/grid.less | 4 ++-- less/mixins.less | 24 ++++++++++----------- less/navbar.less | 6 +++--- less/navs.less | 2 +- less/responsive-utilities.less | 48 +++++++++++++++++++++--------------------- less/variables.less | 29 ++++++++++++------------- 6 files changed, 56 insertions(+), 57 deletions(-) (limited to 'less') diff --git a/less/grid.less b/less/grid.less index e3684e5ae..c77f455f3 100644 --- a/less/grid.less +++ b/less/grid.less @@ -272,9 +272,9 @@ // Note that `.col-lg-12` doesn't get floated on purpose—there's no need since // it's full-width. -@media (min-width: @screen-large-desktop) { +@media (min-width: @screen-lg-desktop) { .container { - max-width: @container-large-desktop; + max-width: @container-lg-desktop; } .col-lg-1, diff --git a/less/mixins.less b/less/mixins.less index de21668b7..c4d1de5ff 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -558,7 +558,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { float: left; width: percentage((@columns / @grid-columns)); } @@ -566,17 +566,17 @@ // Generate the small column offsets .make-sm-column-offset(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { margin-left: percentage((@columns / @grid-columns)); } } .make-sm-column-push(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { left: percentage((@columns / @grid-columns)); } } .make-sm-column-pull(@columns) { - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { right: percentage((@columns / @grid-columns)); } } @@ -591,7 +591,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { float: left; width: percentage((@columns / @grid-columns)); } @@ -599,17 +599,17 @@ // Generate the large column offsets .make-md-column-offset(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { margin-left: percentage((@columns / @grid-columns)); } } .make-md-column-push(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { left: percentage((@columns / @grid-columns)); } } .make-md-column-pull(@columns) { - @media (min-width: @screen-medium) { + @media (min-width: @screen-md) { right: percentage((@columns / @grid-columns)); } } @@ -624,7 +624,7 @@ padding-right: (@gutter / 2); // Calculate width based on number of columns available - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { float: left; width: percentage((@columns / @grid-columns)); } @@ -632,17 +632,17 @@ // Generate the large column offsets .make-lg-column-offset(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { margin-left: percentage((@columns / @grid-columns)); } } .make-lg-column-push(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { left: percentage((@columns / @grid-columns)); } } .make-lg-column-pull(@columns) { - @media (min-width: @screen-large) { + @media (min-width: @screen-lg) { right: percentage((@columns / @grid-columns)); } } diff --git a/less/navbar.less b/less/navbar.less index b5320ba4e..110e8a35c 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -216,7 +216,7 @@ } } - @media (max-width: @screen-phone-max) { + @media (max-width: @screen-xs-max) { // Dropdowns get custom display when collapsed .open .dropdown-menu { position: static; @@ -311,7 +311,7 @@ .form-inline(); .form-group { - @media (max-width: @screen-phone-max) { + @media (max-width: @screen-xs-max) { margin-bottom: 5px; } } @@ -512,7 +512,7 @@ } } - @media (max-width: @screen-phone-max) { + @media (max-width: @screen-xs-max) { // Dropdowns get custom display .open .dropdown-menu { > .dropdown-header { diff --git a/less/navs.less b/less/navs.less index abee86dcc..6002a8cdd 100644 --- a/less/navs.less +++ b/less/navs.less @@ -162,7 +162,7 @@ } } - @media (min-width: @screen-small) { + @media (min-width: @screen-sm) { > li { display: table-cell; width: 1%; diff --git a/less/responsive-utilities.less b/less/responsive-utilities.less index 529152032..062d6820c 100644 --- a/less/responsive-utilities.less +++ b/less/responsive-utilities.less @@ -37,98 +37,98 @@ .visible-xs { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } .visible-sm { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } .visible-md { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } .visible-lg { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-xs { .responsive-invisibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-sm { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-invisibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-md { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-invisibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-visibility(); } } .hidden-lg { .responsive-visibility(); - @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { + @media (min-width: @screen-sm) and (max-width: @screen-sm-max) { .responsive-visibility(); } - @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) { + @media (min-width: @screen-md) and (max-width: @screen-md-max) { .responsive-visibility(); } - @media (min-width: @screen-large-desktop) { + @media (min-width: @screen-lg) { .responsive-invisibility(); } } diff --git a/less/variables.less b/less/variables.less index c3eeaaebc..a46ad4fb6 100644 --- a/less/variables.less +++ b/less/variables.less @@ -193,26 +193,25 @@ // -------------------------------------------------- // Extra small screen / phone -@screen-xsmall: 480px; -@screen-phone: @screen-xsmall; +@screen-xs: 480px; +@screen-phone: @screen-xs; // Small screen / tablet -@screen-small: 768px; -@screen-tablet: @screen-small; +@screen-sm: 768px; +@screen-tablet: @screen-sm; // Medium screen / desktop -@screen-medium: 992px; -@screen-desktop: @screen-medium; +@screen-md: 992px; +@screen-desktop: @screen-md; // Large screen / wide desktop -@screen-large: 1200px; -@screen-large-desktop: @screen-large; +@screen-lg: 1200px; +@screen-lg-desktop: @screen-lg; // So media queries don't overlap when required, provide a maximum -@screen-phone-max: (@screen-small - 1); -@screen-small-max: (@screen-medium - 1); -@screen-tablet-max: (@screen-desktop - 1); -@screen-desktop-max: (@screen-large-desktop - 1); +@screen-xs-max: (@screen-sm - 1); +@screen-sm-max: (@screen-md - 1); +@screen-md-max: (@screen-lg - 1); // Grid system @@ -600,10 +599,10 @@ // -------------------------------------------------- // Small screen / tablet -@container-tablet: ((720px + @grid-gutter-width)); +@container-tablet: ((720px + @grid-gutter-width)); // Medium screen / desktop -@container-desktop: ((940px + @grid-gutter-width)); +@container-desktop: ((940px + @grid-gutter-width)); // Large screen / wide desktop -@container-large-desktop: ((1140px + @grid-gutter-width)); +@container-lg-desktop: ((1140px + @grid-gutter-width)); -- cgit v1.2.3 From 663673438845b0bdb4f951ece7c6eabb2d51d065 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 15:46:42 -0700 Subject: Fixes #9752: clear floats in .panel-body --- less/panels.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less') diff --git a/less/panels.less b/less/panels.less index 5cd04b3db..9d1b21389 100644 --- a/less/panels.less +++ b/less/panels.less @@ -15,6 +15,7 @@ // Panel contents .panel-body { padding: 15px; + .clearfix(); } // List groups in panels -- cgit v1.2.3 From e58721995879da2e866f27d389dfa9ed9da4d0b5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 17 Aug 2013 17:26:52 -0700 Subject: Fix navbar brand alignment by removing header padding when above 768px --- less/navbar.less | 3 +++ 1 file changed, 3 insertions(+) (limited to 'less') diff --git a/less/navbar.less b/less/navbar.less index 110e8a35c..e83606d91 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -36,6 +36,9 @@ @media (min-width: @grid-float-breakpoint) { float: left; + padding-left: 0; + padding-right: 0; + margin-right: @navbar-padding-horizontal; } } -- cgit v1.2.3