From eb5ad730ee85ea02a2eba6e7e9ed1e9a8dd837f4 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 26 Nov 2016 20:33:22 -0800 Subject: [PATCH 1/8] update scss linter to allow multiple spaces before on single line --- scss/.scss-lint.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/.scss-lint.yml b/scss/.scss-lint.yml index 6681def402..2f5dc20e12 100644 --- a/scss/.scss-lint.yml +++ b/scss/.scss-lint.yml @@ -492,7 +492,7 @@ linters: SpaceBeforeBrace: enabled: true style: space # or 'new_line' - allow_single_line_padding: false + allow_single_line_padding: true SpaceBetweenParens: enabled: true From b1e8d60348ab84895b7b722487a03264a53aedfb Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sat, 26 Nov 2016 21:33:46 -0700 Subject: [PATCH 2/8] Remove 'xs' from text utilities (#21217) --- docs/_layouts/simple.html | 2 +- docs/components/card.md | 38 +++++++++++++++--------------- docs/components/progress.md | 12 +++++----- docs/content/figures.md | 2 +- docs/content/images.md | 4 ++-- docs/examples/album/index.html | 2 +- docs/examples/carousel/index.html | 4 ++-- docs/examples/dashboard/index.html | 2 +- docs/layout/grid.md | 10 ++++---- docs/utilities/typography.md | 6 ++--- scss/utilities/_text.scss | 14 ++++++++--- 11 files changed, 52 insertions(+), 44 deletions(-) diff --git a/docs/_layouts/simple.html b/docs/_layouts/simple.html index df9bb6048b..bb35ec7920 100644 --- a/docs/_layouts/simple.html +++ b/docs/_layouts/simple.html @@ -2,7 +2,7 @@ layout: default --- -
+

{{ page.title }}

diff --git a/docs/components/card.md b/docs/components/card.md index f876ccad2d..8fd2276cb7 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -151,13 +151,13 @@ You can quickly change the text alignment of any card—in its entirety or speci Go somewhere

-
+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
-
+

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere @@ -209,7 +209,7 @@ Card headers can be styled by adding `.card-header` to `` elements. {% endexample %} {% example html %} -
+
Featured
@@ -229,7 +229,7 @@ Card headers can be styled by adding `.card-header` to `` elements. Use Bootstrap's nav pills or tabs within a card header. Be sure to always include a `.float-*-*` utility class for proper alignment. {% example html %} -
+
  • @@ -252,7 +252,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ {% endexample %} {% example html %} -
    +
    • @@ -333,7 +333,7 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** {% example html %} -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -341,7 +341,7 @@ Cards include their own variant classes for quickly changing the `background-col
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -349,7 +349,7 @@ Cards include their own variant classes for quickly changing the `background-col
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -357,7 +357,7 @@ Cards include their own variant classes for quickly changing the `background-col
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -365,7 +365,7 @@ Cards include their own variant classes for quickly changing the `background-col
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -383,7 +383,7 @@ Cards include their own variant classes for quickly changing the `background-col In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the `.card-outline-*` ones to style just the `border-color` of a card. {% example html %} -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -391,7 +391,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -399,7 +399,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -407,7 +407,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -415,7 +415,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -423,7 +423,7 @@ In need of a colored card, but not the hefty background colors they bring? Repla
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      @@ -542,7 +542,7 @@ Only applies to small devices and above.

      Last updated 3 mins ago

      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

      @@ -552,7 +552,7 @@ Only applies to small devices and above.
      -
      +

      Card title

      This card has supporting text below as a natural lead-in to additional content.

      Last updated 3 mins ago

      @@ -560,7 +560,7 @@ Only applies to small devices and above.
      Card image
      -
      +

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

      diff --git a/docs/components/progress.md b/docs/components/progress.md index 2d8db33cbc..50d1f1b55a 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -18,19 +18,19 @@ To caption a progress bar, simply add a `
      ` with your caption text, [align t {% example html %} -
      Reticulating splines… 0%
      +
      Reticulating splines… 0%
      -
      Reticulating splines… 25%
      +
      Reticulating splines… 25%
      -
      Reticulating splines… 50%
      +
      Reticulating splines… 50%
      -
      Reticulating splines… 75%
      +
      Reticulating splines… 75%
      -
      Reticulating splines… 100%
      +
      Reticulating splines… 100%
      {% endexample %} @@ -39,7 +39,7 @@ To caption a progress bar, simply add a `
      ` with your caption text, [align t Internet Explorer 9 doesn't support the HTML5 `` element, but we can work around that. {% example html %} -
      Reticulating splines… 25%
      +
      Reticulating splines… 25%
      diff --git a/docs/content/figures.md b/docs/content/figures.md index b85ca8a4ac..4f90018c90 100644 --- a/docs/content/figures.md +++ b/docs/content/figures.md @@ -21,6 +21,6 @@ Aligning the figure's caption is easy with our [text utilities]({{ site.baseurl {% example html %}
      A generic square placeholder image with rounded corners in a figure. -
      A caption for the above image.
      +
      A caption for the above image.
      {% endexample %} diff --git a/docs/content/images.md b/docs/content/images.md index c9323bcf2f..fc8cda6b43 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -65,13 +65,13 @@ Align images with the [helper float classes]({{ site.baseurl }}/utilities/respon {% endhighlight %}
      -
      +
      A generic square placeholder image with rounded corners
      {% highlight html %} -
      +
      ...
      {% endhighlight %} diff --git a/docs/examples/album/index.html b/docs/examples/album/index.html index 075d15345a..1926dabf93 100644 --- a/docs/examples/album/index.html +++ b/docs/examples/album/index.html @@ -43,7 +43,7 @@
      -
      +

      Album example

      Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don't simply skip over it entirely.

      diff --git a/docs/examples/carousel/index.html b/docs/examples/carousel/index.html index e744c57e44..aec1d0dfd1 100644 --- a/docs/examples/carousel/index.html +++ b/docs/examples/carousel/index.html @@ -51,7 +51,7 @@
      First slide
      -
      +

      Example headline.

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      Sign up today

      @@ -71,7 +71,7 @@
      Third slide
      -
      +

      One more for good measure.

      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      Browse gallery

      diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index cb9d880ecb..9abbcf19d5 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -92,7 +92,7 @@

      Dashboard

      -
      +
      Generic placeholder thumbnail

      Label

      diff --git a/docs/layout/grid.md b/docs/layout/grid.md index 8c0d329173..8de8ccf469 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -62,23 +62,23 @@ See how aspects of the Bootstrap grid system work across multiple devices with a - + Extra small
      <576px - + Small
      ≥576px - + Medium
      ≥768px - + Large
      ≥992px - + Extra large
      ≥1200px diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md index 7db133d054..42b61131e2 100644 --- a/docs/utilities/typography.md +++ b/docs/utilities/typography.md @@ -30,9 +30,9 @@ Easily realign text to components with text alignment classes. For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system. {% example html %} -

      Left aligned text on all viewport sizes.

      -

      Center aligned text on all viewport sizes.

      -

      Right aligned text on all viewport sizes.

      +

      Left aligned text on all viewport sizes.

      +

      Center aligned text on all viewport sizes.

      +

      Right aligned text on all viewport sizes.

      Left aligned text on viewports sized SM (small) or wider.

      Left aligned text on viewports sized MD (medium) or wider.

      diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss index 5ad2ee9b3a..2bf21804f4 100644 --- a/scss/utilities/_text.scss +++ b/scss/utilities/_text.scss @@ -12,9 +12,17 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .text-#{$breakpoint}-left { text-align: left !important; } - .text-#{$breakpoint}-right { text-align: right !important; } - .text-#{$breakpoint}-center { text-align: center !important; } + $min: breakpoint-min($breakpoint, $grid-breakpoints); + + @if $min { + .text-#{$breakpoint}-left { text-align: left !important; } + .text-#{$breakpoint}-right { text-align: right !important; } + .text-#{$breakpoint}-center { text-align: center !important; } + } @else { + .text-left { text-align: left !important; } + .text-right { text-align: right !important; } + .text-center { text-align: center !important; } + } } } From 94be2d2254a9cf807725d391347b24d5a290a41f Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 16:18:46 -0700 Subject: [PATCH 3/8] Remove redundant media queries (#21220) --- scss/utilities/_display.scss | 16 +++++++--------- scss/utilities/_float.scss | 8 +++----- scss/utilities/_spacing.scss | 26 ++++++++++++-------------- 3 files changed, 22 insertions(+), 28 deletions(-) diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss index a79dddbde1..0e386cf6fb 100644 --- a/scss/utilities/_display.scss +++ b/scss/utilities/_display.scss @@ -8,15 +8,13 @@ $min: breakpoint-min($breakpoint, $grid-breakpoints); @if $min { - @media (min-width: $min) { - .d-#{$breakpoint}-none { display: none !important; } - .d-#{$breakpoint}-inline { display: inline !important; } - .d-#{$breakpoint}-inline-block { display: inline-block !important; } - .d-#{$breakpoint}-block { display: block !important; } - .d-#{$breakpoint}-table { display: table !important; } - .d-#{$breakpoint}-table-cell { display: table-cell !important; } - .d-#{$breakpoint}-flex { display: flex !important; } - } + .d-#{$breakpoint}-none { display: none !important; } + .d-#{$breakpoint}-inline { display: inline !important; } + .d-#{$breakpoint}-inline-block { display: inline-block !important; } + .d-#{$breakpoint}-block { display: block !important; } + .d-#{$breakpoint}-table { display: table !important; } + .d-#{$breakpoint}-table-cell { display: table-cell !important; } + .d-#{$breakpoint}-flex { display: flex !important; } } @else { .d-none { display: none !important; } .d-inline { display: inline !important; } diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss index 99c2efdc03..6c8a5dba4b 100644 --- a/scss/utilities/_float.scss +++ b/scss/utilities/_float.scss @@ -4,11 +4,9 @@ @if $min { // everything else - @media (min-width: $min) { - .float-#{$breakpoint}-left { @include float-left; } - .float-#{$breakpoint}-right { @include float-right; } - .float-#{$breakpoint}-none { @include float-none; } - } + .float-#{$breakpoint}-left { @include float-left; } + .float-#{$breakpoint}-right { @include float-right; } + .float-#{$breakpoint}-none { @include float-none; } } @else { // xs .float-left { @include float-left; } diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index 9c13b6022f..e7248badb6 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -21,20 +21,18 @@ @if $min { // everything else - @media (min-width: $min) { - .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides - .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } - .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } - .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } - .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } - .#{$abbrev}x-#{$breakpoint}-#{$size} { - #{$prop}-right: $length-x !important; - #{$prop}-left: $length-x !important; - } - .#{$abbrev}y-#{$breakpoint}-#{$size} { - #{$prop}-top: $length-y !important; - #{$prop}-bottom: $length-y !important; - } + .#{$abbrev}-#{$breakpoint}-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}t-#{$breakpoint}-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}r-#{$breakpoint}-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}b-#{$breakpoint}-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}l-#{$breakpoint}-#{$size} { #{$prop}-left: $length-x !important; } + .#{$abbrev}x-#{$breakpoint}-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}y-#{$breakpoint}-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; } } @else { // xs From 8d031090d0f2a42b392b3452416539334562e3a7 Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 16:19:27 -0700 Subject: [PATCH 4/8] Rename `.flex-xs-*` and `.flex-items-xs-*` to `.flex-*` and `.flex-items-*` (#21218) * Clean up _flex.scss a little This commit just cleans up the formating of _flex.scss by changing it so that it uses a single `@include media-breakpoint-up` instead of multiple. It also aligns all of the CSS properties so it looks a bit nicer. * Remove `-xs` from flex classes --- docs/assets/scss/_component-examples.scss | 6 +- docs/components/list-group.md | 8 +-- docs/components/navs.md | 2 +- docs/layout/flexbox-grid.md | 28 +++++----- scss/utilities/_flex.scss | 68 +++++++++++++++-------- 5 files changed, 66 insertions(+), 46 deletions(-) diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss index dea8eb5f34..01cd018710 100644 --- a/docs/assets/scss/_component-examples.scss +++ b/docs/assets/scss/_component-examples.scss @@ -19,9 +19,9 @@ } } - .flex-items-xs-top, - .flex-items-xs-middle, - .flex-items-xs-bottom { + .flex-items-top, + .flex-items-middle, + .flex-items-bottom { min-height: 6rem; background-color: rgba(255,0,0,.1); } diff --git a/docs/components/list-group.md b/docs/components/list-group.md index 49a6ced631..820470bbba 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -46,19 +46,19 @@ Add badges to any list group item to show unread counts, activity, etc.
    {% endexample %} -When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-xs-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. +When in flexbox mode, you'll need to rearrange the contents of your list group items. To replicate the right-aligned badges as shown above, use the following example's code. Note the [`flex-items-between` utility class]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), the badge's placement, and the lack of a float utility on the badges. {% highlight html %}
      -
    • +
    • Cras justo odio 14
      • -
    • +
    • Dapibus ac facilisis in 2
      • -
    • +
    • Morbi leo risus 1
      • diff --git a/docs/components/navs.md b/docs/components/navs.md index 86fd0463fc..7ac1b52324 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -282,7 +282,7 @@ And pills, too: Using our [flexbox utilities]({{ site.baseurl }}/layout/flexbox-grid/#horizontal-alignment), you can also customize your navigation components to change the alignment of nav items. For example, here are center aligned links on the inline nav component. {% example html %} -
        +
        • Active
          • diff --git a/docs/layout/flexbox-grid.md b/docs/layout/flexbox-grid.md index eafe7b59c5..4823925041 100644 --- a/docs/layout/flexbox-grid.md +++ b/docs/layout/flexbox-grid.md @@ -157,7 +157,7 @@ Use the flexbox alignment utilities to vertically align columns.
          {% example html %}
          -
          +
          One of three columns
          @@ -168,7 +168,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
          -
          +
          One of three columns
          @@ -179,7 +179,7 @@ Use the flexbox alignment utilities to vertically align columns. One of three columns
          -
          +
          One of three columns
          @@ -198,13 +198,13 @@ Use the flexbox alignment utilities to vertically align columns. {% example html %}
          -
          +
          One of three columns
          -
          +
          One of three columns
          -
          +
          One of three columns
          @@ -219,7 +219,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt
          {% example html %}
          -
          +
          One of two columns
          @@ -227,7 +227,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
          -
          +
          One of two columns
          @@ -235,7 +235,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
          -
          +
          One of two columns
          @@ -243,7 +243,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
          -
          +
          One of two columns
          @@ -251,7 +251,7 @@ Flexbox utilities for horizontal alignment also exist for a number of layout opt One of two columns
          -
          +
          One of two columns
          @@ -271,13 +271,13 @@ Flexbox utilities for controlling the **visual order** of your content. {% example html %}
          -
          +
          First, but unordered
          -
          +
          Second, but last
          -
          +
          Third, but first
          diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss index 502885a81e..6e3c39b8f7 100644 --- a/scss/utilities/_flex.scss +++ b/scss/utilities/_flex.scss @@ -4,34 +4,54 @@ @if $enable-flex { @each $breakpoint in map-keys($grid-breakpoints) { - // Flex column reordering @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-first { order: -1; } - .flex-#{$breakpoint}-last { order: 1; } - .flex-#{$breakpoint}-unordered { order: 0; } - } + $min: breakpoint-min($breakpoint, $grid-breakpoints); - // Alignment for every item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-top { align-items: flex-start; } - .flex-items-#{$breakpoint}-middle { align-items: center; } - .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - } + @if $min { + // Flex column reordering + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + .flex-#{$breakpoint}-unordered { order: 0; } - // Alignment per item - @include media-breakpoint-up($breakpoint) { - .flex-#{$breakpoint}-top { align-self: flex-start; } - .flex-#{$breakpoint}-middle { align-self: center; } - .flex-#{$breakpoint}-bottom { align-self: flex-end; } - } + // Alignment for every item + .flex-items-#{$breakpoint}-top { align-items: flex-start; } + .flex-items-#{$breakpoint}-middle { align-items: center; } + .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } - // Horizontal alignment of item - @include media-breakpoint-up($breakpoint) { - .flex-items-#{$breakpoint}-left { justify-content: flex-start; } - .flex-items-#{$breakpoint}-center { justify-content: center; } - .flex-items-#{$breakpoint}-right { justify-content: flex-end; } - .flex-items-#{$breakpoint}-around { justify-content: space-around; } - .flex-items-#{$breakpoint}-between { justify-content: space-between; } + // Alignment per item + .flex-#{$breakpoint}-top { align-self: flex-start; } + .flex-#{$breakpoint}-middle { align-self: center; } + .flex-#{$breakpoint}-bottom { align-self: flex-end; } + + // Horizontal alignment of item + .flex-items-#{$breakpoint}-left { justify-content: flex-start; } + .flex-items-#{$breakpoint}-center { justify-content: center; } + .flex-items-#{$breakpoint}-right { justify-content: flex-end; } + .flex-items-#{$breakpoint}-around { justify-content: space-around; } + .flex-items-#{$breakpoint}-between { justify-content: space-between; } + } @else { + // Flex column reordering + .flex-first { order: -1; } + .flex-last { order: 1; } + .flex-unordered { order: 0; } + + // Alignment for every item + .flex-items-top { align-items: flex-start; } + .flex-items-middle { align-items: center; } + .flex-items-bottom { align-items: flex-end; } + + // Alignment per item + .flex-top { align-self: flex-start; } + .flex-middle { align-self: center; } + .flex-bottom { align-self: flex-end; } + + // Horizontal alignment of item + .flex-items-left { justify-content: flex-start; } + .flex-items-center { justify-content: center; } + .flex-items-right { justify-content: flex-end; } + .flex-items-around { justify-content: space-around; } + .flex-items-between { justify-content: space-between; } + } } } } From 5eddb0b0fdfd7215d5764c5315ce7f0be4ca3d83 Mon Sep 17 00:00:00 2001 From: Rob Ruana Date: Sun, 27 Nov 2016 16:20:33 -0800 Subject: [PATCH 5/8] Closes #21055: Prevents ScrollSpy from clearing active item when Safari rubberbands (#21056) When the rubberband effect causes Safari to scroll past the top of the page, the value of scrollTop becomes negative. If the offset of the first ScrollSpy target is 0 - essentially if the target is at the top of the page - then ScrollSpy should not clear the active item. Conceptually, the first item should remain active when rubberbanding past the top of the page. This commit fixes issue #21055 by verifying the first scrollspy target is not at the top of the page before clearing the active nav-item. --- js/src/scrollspy.js | 2 +- js/tests/unit/scrollspy.js | 44 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 9b39acd362..9cb1438ca7 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -221,7 +221,7 @@ const ScrollSpy = (($) => { return } - if (this._activeTarget && scrollTop < this._offsets[0]) { + if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) { this._activeTarget = null this._clear() return diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index a349b5337e..877ec67a2a 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -287,6 +287,50 @@ $(function () { .scrollTop(201) }) + QUnit.test('should NOT clear selection if above the first section and first section is at the top', function (assert) { + assert.expect(4) + var done = assert.async() + + var sectionHTML = '' + + '' + $(sectionHTML).appendTo('#qunit-fixture') + + var negativeHeight = -10 + var startOfSectionTwo = 101 + + var scrollspyHTML = '
          ' + + '
          ' + + '
          ' + + '
          ' + + '
          ' + + '
          ' + var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture') + + $scrollspy + .bootstrapScrollspy({ + target: '#navigation', + offset: $scrollspy.position().top + }) + .one('scroll', function () { + assert.strictEqual($('.active').length, 1, '"active" class on only one element present') + assert.strictEqual($('.active').is('#two-link'), true, '"active" class on second section') + $scrollspy + .one('scroll', function () { + assert.strictEqual($('.active').length, 1, '"active" class on only one element present') + assert.strictEqual($('.active').is('#one-link'), true, '"active" class on first section') + done() + }) + .scrollTop(negativeHeight) + }) + .scrollTop(startOfSectionTwo) + }) + QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) { assert.expect(5) var navbarHtml = From 585516db95c6528c396ef33c59f99c4f8bb8b42e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 27 Nov 2016 16:31:31 -0800 Subject: [PATCH 6/8] Add max-width 100% and max-height 100% utilities (#21221) --- docs/utilities/sizing-and-positioning.md | 14 +++++++++++++- scss/utilities/_spacing.scss | 3 +++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/docs/utilities/sizing-and-positioning.md b/docs/utilities/sizing-and-positioning.md index 8881b177bc..670b6f188b 100644 --- a/docs/utilities/sizing-and-positioning.md +++ b/docs/utilities/sizing-and-positioning.md @@ -24,7 +24,7 @@ The `.pos-f-t` class can be used to easily position elements at the top of the v Easily make an element as wide or as tall as its parent using the `.w-100` and `.h-100` utility classes. {% example html %} -Width = 100% +Width 100% {% endexample %} {% example html %} @@ -32,3 +32,15 @@ Easily make an element as wide or as tall as its parent using the `.w-100` and `
          Full height
          {% endexample %} + +You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed. + +{% example html %} +Max-width 100% +{% endexample %} + +{% example html %} +
          +
          Max-height 100%
          +
          +{% endexample %} diff --git a/scss/utilities/_spacing.scss b/scss/utilities/_spacing.scss index e7248badb6..ff96c58d1f 100644 --- a/scss/utilities/_spacing.scss +++ b/scss/utilities/_spacing.scss @@ -3,6 +3,9 @@ .w-100 { width: 100% !important; } .h-100 { height: 100% !important; } +.mw-100 { max-width: 100% !important; } +.mh-100 { max-height: 100% !important; } + // Margin and Padding .mx-auto { From 869bd23937448fdcbae37c1062d373ef3ae7722a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 27 Nov 2016 17:05:29 -0800 Subject: [PATCH 7/8] Update clearfix mixin (#21224) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update clearfix to use block instead of table display (also reorder properties for linting) * update docs snippet for clearfix mixin—was apparently still using Less syntax and had old clearfix hack (even before the block change in this PR) --- docs/utilities/clearfix.md | 11 ++++------- scss/mixins/_clearfix.scss | 2 +- 2 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index a023a79aaf..49410df098 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -12,13 +12,10 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes {% highlight scss %} // Mixin itself -.clearfix() { - &:before, - &:after { - content: " "; - display: table; - } - &:after { +@mixin clearfix() { + &::after { + display: block; + content: ""; clear: both; } } diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss index d0ae125f3d..b72cf27128 100644 --- a/scss/mixins/_clearfix.scss +++ b/scss/mixins/_clearfix.scss @@ -1,7 +1,7 @@ @mixin clearfix() { &::after { + display: block; content: ""; - display: table; clear: both; } } From 54908a95a87b592d81df3231823979c75917d57a Mon Sep 17 00:00:00 2001 From: Starsam80 Date: Sun, 27 Nov 2016 23:23:12 -0700 Subject: [PATCH 8/8] Rename `.navbar-toggleable-xs` to `.navbar-toggleable` + more cleanup (#21226) * Clean up some utilities - Align CSS properties - In `_spacing.scss`, we had a comment saying what 'a' was for, but we removed that so this comment no longer applies * Remove '-xs' from `.navbar-toggleable-xs` and remove duplication * Fix outdated classes to use newer ones --- docs/_includes/nav-home.html | 6 +- docs/examples/album/index.html | 2 +- docs/examples/carousel/index.html | 2 +- docs/examples/narrow-jumbotron/index.html | 2 +- docs/examples/navbar/index.html | 4 +- docs/examples/offcanvas/index.html | 2 +- docs/examples/sticky-footer-navbar/index.html | 2 +- docs/examples/tooltip-viewport/index.html | 4 +- scss/_navbar.scss | 104 ++++++------------ scss/utilities/_align.scss | 10 +- scss/utilities/_borders.scss | 8 +- scss/utilities/_display.scss | 24 ++-- scss/utilities/_float.scss | 8 +- scss/utilities/_spacing.scss | 4 +- scss/utilities/_text.scss | 18 +-- 15 files changed, 82 insertions(+), 118 deletions(-) diff --git a/docs/_includes/nav-home.html b/docs/_includes/nav-home.html index 6dd3723f65..8ba41c7b42 100644 --- a/docs/_includes/nav-home.html +++ b/docs/_includes/nav-home.html @@ -1,7 +1,7 @@
          {% comment %} -