From ffaad0a819c6cf1e21d9a9d313673f9d7a260584 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 31 Oct 2016 21:27:56 -0700 Subject: [PATCH] Responsive display utilities (#20934) * Explore responsive display utils, but with a twist: lowest breakpoint has no breakpoint modifier in the class name * make floats use the same format, add float-none mixin --- docs/components/card.md | 4 ++-- docs/components/list-group.md | 6 ++--- docs/components/navbar.md | 18 +++++++-------- docs/content/images.md | 8 +++---- docs/migration.md | 3 ++- docs/utilities/clearfix.md | 4 ++-- docs/utilities/responsive-helpers.md | 6 ++--- js/dist/alert.js | 14 +++++------- js/dist/alert.js.map | 2 +- scss/mixins/_float.scss | 3 +++ scss/utilities/_display.scss | 33 +++++++++++++++++++++------- scss/utilities/_float.scss | 22 ++++++++++++------- 12 files changed, 73 insertions(+), 50 deletions(-) diff --git a/docs/components/card.md b/docs/components/card.md index 1bb0866fe873..3c27705354c0 100644 --- a/docs/components/card.md +++ b/docs/components/card.md @@ -231,7 +231,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ {% example html %}
-
    +
    • Active
      • @@ -254,7 +254,7 @@ Use Bootstrap's nav pills or tabs within a card header. Be sure to always includ {% example html %}
      -
        +
        • Active
          • diff --git a/docs/components/list-group.md b/docs/components/list-group.md index f241d0431a51..2997c9ab6edb 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -32,15 +32,15 @@ Add badges to any list group item to show unread counts, activity, etc. {% example html %}
          • - 14 + 14 Cras justo odio
          • - 2 + 2 Dapibus ac facilisis in
          • - 1 + 1 Morbi leo risus
          diff --git a/docs/components/navbar.md b/docs/components/navbar.md index bb819ff9e92b..34fb6f28bd22 100644 --- a/docs/components/navbar.md +++ b/docs/components/navbar.md @@ -55,7 +55,7 @@ Here's an example of all the sub-components included in a default, non-responsiv
    -
    +
    @@ -171,7 +171,7 @@ Place various form controls and components within a navbar with `.form-inline`. {% example html %}
-
+
@@ -279,7 +279,7 @@ Here are some examples to show what we mean. About -
+
@@ -300,7 +300,7 @@ Here are some examples to show what we mean. About -
+
diff --git a/docs/content/images.md b/docs/content/images.md index da342b546267..c9323bcf2f46 100644 --- a/docs/content/images.md +++ b/docs/content/images.md @@ -47,13 +47,13 @@ In addition to our [border-radius utilities]({{ site.baseurl }}/utilities/border Align images with the [helper float classes]({{ site.baseurl }}/utilities/responsive-helpers/#responsive-floats) or [text alignment classes]({{ site.baseurl }}/utilities/typography/#text-alignment). `block`-level images can be centered using [the `.mx-auto` margin utility class]({{ site.baseurl }}/utilities/spacing/#horizontal-centering).
- A generic square placeholder image with rounded corners - A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners + A generic square placeholder image with rounded corners
{% highlight html %} -... -... +... +... {% endhighlight %}
diff --git a/docs/migration.md b/docs/migration.md index ea7c67f65ba2..4b158248275b 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -185,7 +185,8 @@ Dropped entirely for the new card component. ### Utilities -- Added `.float-{xs,sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-xs-left` and `.float-xs-right`. +- Made display utilities responsive (e.g., `.d-none` and `d-{sm,md,lg,xl}-none`). +- Added `.float-{sm,md,lg,xl}-{left,right,none}` classes for responsive floats and removed `.pull-left` and `.pull-right` since they're redundant to `.float-left` and `.float-right`. - Added responsive variations to our text alignment classes `.text-{xs,sm,md,lg,xl}-{left,center,right}` and removed the redundant `.text-{left,center,right}` utilities as they are the same as the `xs` variation. - Dropped `.center-block` for the new `.mx-auto` class. diff --git a/docs/utilities/clearfix.md b/docs/utilities/clearfix.md index e63ba3cdae03..d1327566c084 100644 --- a/docs/utilities/clearfix.md +++ b/docs/utilities/clearfix.md @@ -33,7 +33,7 @@ The following example shows how the clearfix can be used. Without the clearfix t {% example html %}
- - + +
{% endexample %} diff --git a/docs/utilities/responsive-helpers.md b/docs/utilities/responsive-helpers.md index 13ae8a56d5c6..35e7fcf2f4fe 100644 --- a/docs/utilities/responsive-helpers.md +++ b/docs/utilities/responsive-helpers.md @@ -49,9 +49,9 @@ These utility classes float an element to the left or right, or disable floating Two similar non-responsive Sass mixins (`float-left` and `float-right`) are also available. {% example html %} -
Float left on all viewport sizes

-
Float right on all viewport sizes

-
Don't float on all viewport sizes

+
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

diff --git a/js/dist/alert.js b/js/dist/alert.js index 4a583a8ae70c..4b997016652b 100644 --- a/js/dist/alert.js +++ b/js/dist/alert.js @@ -4,7 +4,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons /** * -------------------------------------------------------------------------- - * Bootstrap (v4.0.0-alpha.5): alert.js + * Bootstrap (v4.0.0-alpha.4): alert.js * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) * -------------------------------------------------------------------------- */ @@ -18,7 +18,7 @@ var Alert = function ($) { */ var NAME = 'alert'; - var VERSION = '4.0.0-alpha.5'; + var VERSION = '4.0.0-alpha.4'; var DATA_KEY = 'bs.alert'; var EVENT_KEY = '.' + DATA_KEY; var DATA_API_KEY = '.data-api'; @@ -38,7 +38,7 @@ var Alert = function ($) { var ClassName = { ALERT: 'alert', FADE: 'fade', - ACTIVE: 'active' + IN: 'in' }; /** @@ -101,18 +101,14 @@ var Alert = function ($) { }; Alert.prototype._removeElement = function _removeElement(element) { - var _this = this; - - $(element).removeClass(ClassName.ACTIVE); + $(element).removeClass(ClassName.IN); if (!Util.supportsTransitionEnd() || !$(element).hasClass(ClassName.FADE)) { this._destroyElement(element); return; } - $(element).one(Util.TRANSITION_END, function (event) { - return _this._destroyElement(element, event); - }).emulateTransitionEnd(TRANSITION_DURATION); + $(element).one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element)).emulateTransitionEnd(TRANSITION_DURATION); }; Alert.prototype._destroyElement = function _destroyElement(element) { diff --git a/js/dist/alert.js.map b/js/dist/alert.js.map index e3d5a3853637..f5a55dbe2eac 100644 --- a/js/dist/alert.js.map +++ b/js/dist/alert.js.map @@ -1 +1 @@ -{"version":3,"sources":["../src/alert.js"],"names":["Alert","$","NAME","VERSION","DATA_KEY","EVENT_KEY","DATA_API_KEY","JQUERY_NO_CONFLICT","fn","TRANSITION_DURATION","Selector","DISMISS","Event","CLOSE","CLOSED","CLICK_DATA_API","ClassName","ALERT","FADE","ACTIVE","element","_element","close","rootElement","_getRootElement","customEvent","_triggerCloseEvent","isDefaultPrevented","_removeElement","dispose","removeData","selector","Util","getSelectorFromElement","parent","closest","closeEvent","trigger","removeClass","supportsTransitionEnd","hasClass","_destroyElement","one","TRANSITION_END","event","emulateTransitionEnd","detach","remove","_jQueryInterface","config","each","$element","data","_handleDismiss","alertInstance","preventDefault","document","on","Constructor","noConflict","jQuery"],"mappings":"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","file":"alert.js","sourcesContent":["import Util from './util'\n\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-alpha.5): alert.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst Alert = (($) => {\n\n\n /**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\n const NAME = 'alert'\n const VERSION = '4.0.0-alpha.5'\n const DATA_KEY = 'bs.alert'\n const EVENT_KEY = `.${DATA_KEY}`\n const DATA_API_KEY = '.data-api'\n const JQUERY_NO_CONFLICT = $.fn[NAME]\n const TRANSITION_DURATION = 150\n\n const Selector = {\n DISMISS : '[data-dismiss=\"alert\"]'\n }\n\n const Event = {\n CLOSE : `close${EVENT_KEY}`,\n CLOSED : `closed${EVENT_KEY}`,\n CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`\n }\n\n const ClassName = {\n ALERT : 'alert',\n FADE : 'fade',\n ACTIVE : 'active'\n }\n\n\n /**\n * ------------------------------------------------------------------------\n * Class Definition\n * ------------------------------------------------------------------------\n */\n\n class Alert {\n\n constructor(element) {\n this._element = element\n }\n\n\n // getters\n\n static get VERSION() {\n return VERSION\n }\n\n\n // public\n\n close(element) {\n element = element || this._element\n\n let rootElement = this._getRootElement(element)\n let customEvent = this._triggerCloseEvent(rootElement)\n\n if (customEvent.isDefaultPrevented()) {\n return\n }\n\n this._removeElement(rootElement)\n }\n\n dispose() {\n $.removeData(this._element, DATA_KEY)\n this._element = null\n }\n\n\n // private\n\n _getRootElement(element) {\n let selector = Util.getSelectorFromElement(element)\n let parent = false\n\n if (selector) {\n parent = $(selector)[0]\n }\n\n if (!parent) {\n parent = $(element).closest(`.${ClassName.ALERT}`)[0]\n }\n\n return parent\n }\n\n _triggerCloseEvent(element) {\n let closeEvent = $.Event(Event.CLOSE)\n\n $(element).trigger(closeEvent)\n return closeEvent\n }\n\n _removeElement(element) {\n $(element).removeClass(ClassName.ACTIVE)\n\n if (!Util.supportsTransitionEnd() ||\n !$(element).hasClass(ClassName.FADE)) {\n this._destroyElement(element)\n return\n }\n\n $(element)\n .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))\n .emulateTransitionEnd(TRANSITION_DURATION)\n }\n\n _destroyElement(element) {\n $(element)\n .detach()\n .trigger(Event.CLOSED)\n .remove()\n }\n\n\n // static\n\n static _jQueryInterface(config) {\n return this.each(function () {\n let $element = $(this)\n let data = $element.data(DATA_KEY)\n\n if (!data) {\n data = new Alert(this)\n $element.data(DATA_KEY, data)\n }\n\n if (config === 'close') {\n data[config](this)\n }\n })\n }\n\n static _handleDismiss(alertInstance) {\n return function (event) {\n if (event) {\n event.preventDefault()\n }\n\n alertInstance.close(this)\n }\n }\n\n }\n\n\n /**\n * ------------------------------------------------------------------------\n * Data Api implementation\n * ------------------------------------------------------------------------\n */\n\n $(document).on(\n Event.CLICK_DATA_API,\n Selector.DISMISS,\n Alert._handleDismiss(new Alert())\n )\n\n\n /**\n * ------------------------------------------------------------------------\n * jQuery\n * ------------------------------------------------------------------------\n */\n\n $.fn[NAME] = Alert._jQueryInterface\n $.fn[NAME].Constructor = Alert\n $.fn[NAME].noConflict = function () {\n $.fn[NAME] = JQUERY_NO_CONFLICT\n return Alert._jQueryInterface\n }\n\n return Alert\n\n})(jQuery)\n\nexport default Alert\n"]} \ No newline at end of file +{"version":3,"sources":["../src/alert.js"],"names":["Alert","$","NAME","VERSION","DATA_KEY","EVENT_KEY","DATA_API_KEY","JQUERY_NO_CONFLICT","fn","TRANSITION_DURATION","Selector","DISMISS","Event","CLOSE","CLOSED","CLICK_DATA_API","ClassName","ALERT","FADE","IN","element","_element","close","rootElement","_getRootElement","customEvent","_triggerCloseEvent","isDefaultPrevented","_removeElement","dispose","removeData","selector","Util","getSelectorFromElement","parent","closest","closeEvent","trigger","removeClass","supportsTransitionEnd","hasClass","_destroyElement","one","TRANSITION_END","proxy","emulateTransitionEnd","detach","remove","_jQueryInterface","config","each","$element","data","_handleDismiss","alertInstance","event","preventDefault","document","on","Constructor","noConflict","jQuery"],"mappings":"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","file":"alert.js","sourcesContent":["import Util from './util'\n\n\n/**\n * --------------------------------------------------------------------------\n * Bootstrap (v4.0.0-alpha.4): alert.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nconst Alert = (($) => {\n\n\n /**\n * ------------------------------------------------------------------------\n * Constants\n * ------------------------------------------------------------------------\n */\n\n const NAME = 'alert'\n const VERSION = '4.0.0-alpha.4'\n const DATA_KEY = 'bs.alert'\n const EVENT_KEY = `.${DATA_KEY}`\n const DATA_API_KEY = '.data-api'\n const JQUERY_NO_CONFLICT = $.fn[NAME]\n const TRANSITION_DURATION = 150\n\n const Selector = {\n DISMISS : '[data-dismiss=\"alert\"]'\n }\n\n const Event = {\n CLOSE : `close${EVENT_KEY}`,\n CLOSED : `closed${EVENT_KEY}`,\n CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`\n }\n\n const ClassName = {\n ALERT : 'alert',\n FADE : 'fade',\n IN : 'in'\n }\n\n\n /**\n * ------------------------------------------------------------------------\n * Class Definition\n * ------------------------------------------------------------------------\n */\n\n class Alert {\n\n constructor(element) {\n this._element = element\n }\n\n\n // getters\n\n static get VERSION() {\n return VERSION\n }\n\n\n // public\n\n close(element) {\n element = element || this._element\n\n let rootElement = this._getRootElement(element)\n let customEvent = this._triggerCloseEvent(rootElement)\n\n if (customEvent.isDefaultPrevented()) {\n return\n }\n\n this._removeElement(rootElement)\n }\n\n dispose() {\n $.removeData(this._element, DATA_KEY)\n this._element = null\n }\n\n\n // private\n\n _getRootElement(element) {\n let selector = Util.getSelectorFromElement(element)\n let parent = false\n\n if (selector) {\n parent = $(selector)[0]\n }\n\n if (!parent) {\n parent = $(element).closest(`.${ClassName.ALERT}`)[0]\n }\n\n return parent\n }\n\n _triggerCloseEvent(element) {\n let closeEvent = $.Event(Event.CLOSE)\n\n $(element).trigger(closeEvent)\n return closeEvent\n }\n\n _removeElement(element) {\n $(element).removeClass(ClassName.IN)\n\n if (!Util.supportsTransitionEnd() ||\n !$(element).hasClass(ClassName.FADE)) {\n this._destroyElement(element)\n return\n }\n\n $(element)\n .one(Util.TRANSITION_END, $.proxy(this._destroyElement, this, element))\n .emulateTransitionEnd(TRANSITION_DURATION)\n }\n\n _destroyElement(element) {\n $(element)\n .detach()\n .trigger(Event.CLOSED)\n .remove()\n }\n\n\n // static\n\n static _jQueryInterface(config) {\n return this.each(function () {\n let $element = $(this)\n let data = $element.data(DATA_KEY)\n\n if (!data) {\n data = new Alert(this)\n $element.data(DATA_KEY, data)\n }\n\n if (config === 'close') {\n data[config](this)\n }\n })\n }\n\n static _handleDismiss(alertInstance) {\n return function (event) {\n if (event) {\n event.preventDefault()\n }\n\n alertInstance.close(this)\n }\n }\n\n }\n\n\n /**\n * ------------------------------------------------------------------------\n * Data Api implementation\n * ------------------------------------------------------------------------\n */\n\n $(document).on(\n Event.CLICK_DATA_API,\n Selector.DISMISS,\n Alert._handleDismiss(new Alert())\n )\n\n\n /**\n * ------------------------------------------------------------------------\n * jQuery\n * ------------------------------------------------------------------------\n */\n\n $.fn[NAME] = Alert._jQueryInterface\n $.fn[NAME].Constructor = Alert\n $.fn[NAME].noConflict = function () {\n $.fn[NAME] = JQUERY_NO_CONFLICT\n return Alert._jQueryInterface\n }\n\n return Alert\n\n})(jQuery)\n\nexport default Alert\n"]} \ No newline at end of file diff --git a/scss/mixins/_float.scss b/scss/mixins/_float.scss index b30cf1468814..b43116fa6cb6 100644 --- a/scss/mixins/_float.scss +++ b/scss/mixins/_float.scss @@ -4,3 +4,6 @@ @mixin float-right { float: right !important; } +@mixin float-none { + float: none !important; +} diff --git a/scss/utilities/_display.scss b/scss/utilities/_display.scss index d74049be8b2f..a79dddbde10b 100644 --- a/scss/utilities/_display.scss +++ b/scss/utilities/_display.scss @@ -2,12 +2,29 @@ // Display utilities // -.d-block { - display: block !important; -} -.d-inline-block { - display: inline-block !important; -} -.d-inline { - display: inline !important; + +@each $breakpoint in map-keys($grid-breakpoints) { + @include media-breakpoint-up($breakpoint) { + $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; } + } + } @else { + .d-none { display: none !important; } + .d-inline { display: inline !important; } + .d-inline-block { display: inline-block !important; } + .d-block { display: block !important; } + .d-table { display: table !important; } + .d-table-cell { display: table-cell !important; } + .d-flex { display: flex !important; } + } + } } diff --git a/scss/utilities/_float.scss b/scss/utilities/_float.scss index eea34bff28b1..99c2efdc031b 100644 --- a/scss/utilities/_float.scss +++ b/scss/utilities/_float.scss @@ -1,13 +1,19 @@ @each $breakpoint in map-keys($grid-breakpoints) { @include media-breakpoint-up($breakpoint) { - .float-#{$breakpoint}-left { - @include float-left(); - } - .float-#{$breakpoint}-right { - @include float-right(); - } - .float-#{$breakpoint}-none { - float: none !important; + $min: breakpoint-min($breakpoint, $grid-breakpoints); + + @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; } + } + } @else { + // xs + .float-left { @include float-left; } + .float-right { @include float-right; } + .float-none { @include float-none; } } } }