Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/twbs/bootstrap.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--docs/components/alerts.md4
-rw-r--r--docs/components/collapse.md8
-rw-r--r--docs/components/dropdowns.md8
-rw-r--r--js/src/alert.js8
-rw-r--r--js/src/collapse.js16
-rw-r--r--js/src/dropdown.js12
-rw-r--r--js/src/modal.js10
-rw-r--r--js/src/popover.js6
-rw-r--r--js/src/tooltip.js28
-rw-r--r--js/tests/unit/alert.js6
-rw-r--r--js/tests/unit/collapse.js32
-rw-r--r--js/tests/unit/dropdown.js34
-rw-r--r--js/tests/unit/popover.js2
-rw-r--r--js/tests/unit/tooltip.js40
-rw-r--r--js/tests/visual/alert.html4
-rw-r--r--js/tests/visual/collapse.html2
-rw-r--r--js/tests/visual/modal.html2
-rw-r--r--scss/_dropdown.scss2
-rw-r--r--scss/_tooltip.scss2
19 files changed, 113 insertions, 113 deletions
diff --git a/docs/components/alerts.md b/docs/components/alerts.md
index 7ab6df8f4a..b1ac0d8452 100644
--- a/docs/components/alerts.md
+++ b/docs/components/alerts.md
@@ -73,12 +73,12 @@ Using the alert JavaScript plugin, it's possible to dismiss any alert inline. He
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button.
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
-- To animate alerts when dismissing them, be sure to add the `.fade` and `.in` classes.
+- To animate alerts when dismissing them, be sure to add the `.fade` and `.active` classes.
You can see this in action with a live demo:
{% example html %}
-<div class="alert alert-warning alert-dismissible fade in" role="alert">
+<div class="alert alert-warning alert-dismissible fade active" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
diff --git a/docs/components/collapse.md b/docs/components/collapse.md
index e98fae2769..0ece9e453d 100644
--- a/docs/components/collapse.md
+++ b/docs/components/collapse.md
@@ -18,7 +18,7 @@ Click the buttons below to show and hide another element via class changes:
- `.collapse` hides content
- `.collapsing` is applied during transitions
-- `.collapse.in` shows content
+- `.collapse.active` shows content
You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
@@ -53,7 +53,7 @@ Extend the default collapse behavior to create an accordion.
</h5>
</div>
- <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
+ <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
@@ -101,14 +101,14 @@ Additionally, if your control element is targeting a single collapsible element
The collapse plugin utilizes a few classes to handle the heavy lifting:
- `.collapse` hides the content
-- `.collapse.in` shows the content
+- `.collapse.active` shows the content
- `.collapsing` is added when the transition starts, and removed when it finishes
These classes can be found in `_animation.scss`.
### Via data attributes
-Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `in`.
+Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `active`.
To add accordion-like group management to a collapsible control, add the data attribute `data-parent="#selector"`. Refer to the demo to see this in action.
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index 68c388f21f..621b666f15 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -21,7 +21,7 @@ Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.
Any single `.btn` can be turned into a dropdown toggle with some markup changes. Here's how you can put them to work with either `<button>` elements:
{% example html %}
-<div class="dropdown open">
+<div class="dropdown active">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
@@ -36,7 +36,7 @@ Any single `.btn` can be turned into a dropdown toggle with some markup changes.
And with `<a>` elements:
{% example html %}
-<div class="dropdown open">
+<div class="dropdown active">
<a class="btn btn-secondary dropdown-toggle" href="https://example.com" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
@@ -407,7 +407,7 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent element.
Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `<button>` elements in your dropdowns instead of just `<a>`s.
{% example html %}
-<div class="dropdown open">
+<div class="dropdown active">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
@@ -480,7 +480,7 @@ Add `.disabled` to items in the dropdown to **style them as disabled**.
## Usage
-Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item.
+Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.active` class on the parent list item.
On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.**
diff --git a/js/src/alert.js b/js/src/alert.js
index a46494070a..0456c677df 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -36,9 +36,9 @@ const Alert = (($) => {
}
const ClassName = {
- ALERT : 'alert',
- FADE : 'fade',
- IN : 'in'
+ ALERT : 'alert',
+ FADE : 'fade',
+ ACTIVE : 'active'
}
@@ -108,7 +108,7 @@ const Alert = (($) => {
}
_removeElement(element) {
- $(element).removeClass(ClassName.IN)
+ $(element).removeClass(ClassName.ACTIVE)
if (!Util.supportsTransitionEnd() ||
!$(element).hasClass(ClassName.FADE)) {
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 782d82a2fc..f700979e07 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -44,7 +44,7 @@ const Collapse = (($) => {
}
const ClassName = {
- IN : 'in',
+ ACTIVE : 'active',
COLLAPSE : 'collapse',
COLLAPSING : 'collapsing',
COLLAPSED : 'collapsed'
@@ -56,7 +56,7 @@ const Collapse = (($) => {
}
const Selector = {
- ACTIVES : '.card > .in, .card > .collapsing',
+ ACTIVES : '.card > .active, .card > .collapsing',
DATA_TOGGLE : '[data-toggle="collapse"]'
}
@@ -104,7 +104,7 @@ const Collapse = (($) => {
// public
toggle() {
- if ($(this._element).hasClass(ClassName.IN)) {
+ if ($(this._element).hasClass(ClassName.ACTIVE)) {
this.hide()
} else {
this.show()
@@ -113,7 +113,7 @@ const Collapse = (($) => {
show() {
if (this._isTransitioning ||
- $(this._element).hasClass(ClassName.IN)) {
+ $(this._element).hasClass(ClassName.ACTIVE)) {
return
}
@@ -168,7 +168,7 @@ const Collapse = (($) => {
$(this._element)
.removeClass(ClassName.COLLAPSING)
.addClass(ClassName.COLLAPSE)
- .addClass(ClassName.IN)
+ .addClass(ClassName.ACTIVE)
this._element.style[dimension] = ''
@@ -194,7 +194,7 @@ const Collapse = (($) => {
hide() {
if (this._isTransitioning ||
- !$(this._element).hasClass(ClassName.IN)) {
+ !$(this._element).hasClass(ClassName.ACTIVE)) {
return
}
@@ -215,7 +215,7 @@ const Collapse = (($) => {
$(this._element)
.addClass(ClassName.COLLAPSING)
.removeClass(ClassName.COLLAPSE)
- .removeClass(ClassName.IN)
+ .removeClass(ClassName.ACTIVE)
this._element.setAttribute('aria-expanded', false)
@@ -293,7 +293,7 @@ const Collapse = (($) => {
_addAriaAndCollapsedClass(element, triggerArray) {
if (element) {
- let isOpen = $(element).hasClass(ClassName.IN)
+ let isOpen = $(element).hasClass(ClassName.ACTIVE)
element.setAttribute('aria-expanded', isOpen)
if (triggerArray.length) {
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 656a05e77c..3246e6bef0 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -41,7 +41,7 @@ const Dropdown = (($) => {
const ClassName = {
BACKDROP : 'dropdown-backdrop',
DISABLED : 'disabled',
- OPEN : 'open'
+ ACTIVE : 'active'
}
const Selector = {
@@ -86,7 +86,7 @@ const Dropdown = (($) => {
}
let parent = Dropdown._getParentFromElement(this)
- let isActive = $(parent).hasClass(ClassName.OPEN)
+ let isActive = $(parent).hasClass(ClassName.ACTIVE)
Dropdown._clearMenus()
@@ -116,7 +116,7 @@ const Dropdown = (($) => {
this.focus()
this.setAttribute('aria-expanded', 'true')
- $(parent).toggleClass(ClassName.OPEN)
+ $(parent).toggleClass(ClassName.ACTIVE)
$(parent).trigger($.Event(Event.SHOWN, relatedTarget))
return false
@@ -171,7 +171,7 @@ const Dropdown = (($) => {
let parent = Dropdown._getParentFromElement(toggles[i])
let relatedTarget = { relatedTarget : toggles[i] }
- if (!$(parent).hasClass(ClassName.OPEN)) {
+ if (!$(parent).hasClass(ClassName.ACTIVE)) {
continue
}
@@ -190,7 +190,7 @@ const Dropdown = (($) => {
toggles[i].setAttribute('aria-expanded', 'false')
$(parent)
- .removeClass(ClassName.OPEN)
+ .removeClass(ClassName.ACTIVE)
.trigger($.Event(Event.HIDDEN, relatedTarget))
}
}
@@ -220,7 +220,7 @@ const Dropdown = (($) => {
}
let parent = Dropdown._getParentFromElement(this)
- let isActive = $(parent).hasClass(ClassName.OPEN)
+ let isActive = $(parent).hasClass(ClassName.ACTIVE)
if ((!isActive && event.which !== ESCAPE_KEYCODE) ||
(isActive && event.which === ESCAPE_KEYCODE)) {
diff --git a/js/src/modal.js b/js/src/modal.js
index ee78070dd4..2526374287 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -60,7 +60,7 @@ const Modal = (($) => {
BACKDROP : 'modal-backdrop',
OPEN : 'modal-open',
FADE : 'fade',
- IN : 'in'
+ ACTIVE : 'active'
}
const Selector = {
@@ -169,7 +169,7 @@ const Modal = (($) => {
$(document).off(Event.FOCUSIN)
- $(this._element).removeClass(ClassName.IN)
+ $(this._element).removeClass(ClassName.ACTIVE)
$(this._element).off(Event.CLICK_DISMISS)
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)
@@ -231,7 +231,7 @@ const Modal = (($) => {
Util.reflow(this._element)
}
- $(this._element).addClass(ClassName.IN)
+ $(this._element).addClass(ClassName.ACTIVE)
if (this._config.focus) {
this._enforceFocus()
@@ -343,7 +343,7 @@ const Modal = (($) => {
Util.reflow(this._backdrop)
}
- $(this._backdrop).addClass(ClassName.IN)
+ $(this._backdrop).addClass(ClassName.ACTIVE)
if (!callback) {
return
@@ -359,7 +359,7 @@ const Modal = (($) => {
.emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
} else if (!this._isShown && this._backdrop) {
- $(this._backdrop).removeClass(ClassName.IN)
+ $(this._backdrop).removeClass(ClassName.ACTIVE)
let callbackRemove = () => {
this._removeBackdrop()
diff --git a/js/src/popover.js b/js/src/popover.js
index 115cfef9e1..289853b32a 100644
--- a/js/src/popover.js
+++ b/js/src/popover.js
@@ -37,8 +37,8 @@ const Popover = (($) => {
})
const ClassName = {
- FADE : 'fade',
- IN : 'in'
+ FADE : 'fade',
+ ACTIVE : 'active'
}
const Selector = {
@@ -119,7 +119,7 @@ const Popover = (($) => {
$tip
.removeClass(ClassName.FADE)
- .removeClass(ClassName.IN)
+ .removeClass(ClassName.ACTIVE)
this.cleanupTether()
}
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index c21eb0cdab..90e782dc92 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -70,8 +70,8 @@ const Tooltip = (($) => {
}
const HoverState = {
- IN : 'in',
- OUT : 'out'
+ ACTIVE : 'active',
+ OUT : 'out'
}
const Event = {
@@ -88,8 +88,8 @@ const Tooltip = (($) => {
}
const ClassName = {
- FADE : 'fade',
- IN : 'in'
+ FADE : 'fade',
+ ACTIVE : 'active'
}
const Selector = {
@@ -205,7 +205,7 @@ const Tooltip = (($) => {
} else {
- if ($(this.getTipElement()).hasClass(ClassName.IN)) {
+ if ($(this.getTipElement()).hasClass(ClassName.ACTIVE)) {
this._leave(null, this)
return
}
@@ -291,7 +291,7 @@ const Tooltip = (($) => {
Util.reflow(tip)
this._tether.position()
- $(tip).addClass(ClassName.IN)
+ $(tip).addClass(ClassName.ACTIVE)
let complete = () => {
let prevHoverState = this._hoverState
@@ -319,7 +319,7 @@ const Tooltip = (($) => {
let tip = this.getTipElement()
let hideEvent = $.Event(this.constructor.Event.HIDE)
let complete = () => {
- if (this._hoverState !== HoverState.IN && tip.parentNode) {
+ if (this._hoverState !== HoverState.ACTIVE && tip.parentNode) {
tip.parentNode.removeChild(tip)
}
@@ -338,7 +338,7 @@ const Tooltip = (($) => {
return
}
- $(tip).removeClass(ClassName.IN)
+ $(tip).removeClass(ClassName.ACTIVE)
if (Util.supportsTransitionEnd() &&
($(this.tip).hasClass(ClassName.FADE))) {
@@ -372,7 +372,7 @@ const Tooltip = (($) => {
$tip
.removeClass(ClassName.FADE)
- .removeClass(ClassName.IN)
+ .removeClass(ClassName.ACTIVE)
this.cleanupTether()
}
@@ -492,15 +492,15 @@ const Tooltip = (($) => {
] = true
}
- if ($(context.getTipElement()).hasClass(ClassName.IN) ||
- (context._hoverState === HoverState.IN)) {
- context._hoverState = HoverState.IN
+ if ($(context.getTipElement()).hasClass(ClassName.ACTIVE) ||
+ (context._hoverState === HoverState.ACTIVE)) {
+ context._hoverState = HoverState.ACTIVE
return
}
clearTimeout(context._timeout)
- context._hoverState = HoverState.IN
+ context._hoverState = HoverState.ACTIVE
if (!context.config.delay || !context.config.delay.show) {
context.show()
@@ -508,7 +508,7 @@ const Tooltip = (($) => {
}
context._timeout = setTimeout(() => {
- if (context._hoverState === HoverState.IN) {
+ if (context._hoverState === HoverState.ACTIVE) {
context.show()
}
}, context.config.delay.show)
diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js
index 97818960ac..3128e20be3 100644
--- a/js/tests/unit/alert.js
+++ b/js/tests/unit/alert.js
@@ -34,7 +34,7 @@ $(function () {
QUnit.test('should fade element out on clicking .close', function (assert) {
assert.expect(1)
- var alertHTML = '<div class="alert alert-danger fade in">'
+ var alertHTML = '<div class="alert alert-danger fade active">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
@@ -43,12 +43,12 @@ $(function () {
$alert.find('.close').trigger('click')
- assert.strictEqual($alert.hasClass('in'), false, 'remove .in class on .close click')
+ assert.strictEqual($alert.hasClass('active'), false, 'remove .active class on .close click')
})
QUnit.test('should remove element when clicking .close', function (assert) {
assert.expect(2)
- var alertHTML = '<div class="alert alert-danger fade in">'
+ var alertHTML = '<div class="alert alert-danger fade active">'
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>'
+ '</div>'
diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js
index dba15e8659..25bb7772e2 100644
--- a/js/tests/unit/collapse.js
+++ b/js/tests/unit/collapse.js
@@ -48,7 +48,7 @@ $(function () {
assert.expect(2)
var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
- assert.ok($el.hasClass('in'), 'has class "in"')
+ assert.ok($el.hasClass('active'), 'has class "active"')
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
})
@@ -62,7 +62,7 @@ $(function () {
'</div>',
'<div class="panel-group" id="accordion2">',
'<div class="panel">',
- '<div id="collapse2" class="collapse in"/>',
+ '<div id="collapse2" class="collapse active"/>',
'</div>',
'</div>'
].join('')
@@ -71,15 +71,15 @@ $(function () {
var $el2 = $('#collapse2')
$el1.bootstrapCollapse('show')
- assert.ok($el1.hasClass('in'))
- assert.ok($el2.hasClass('in'))
+ assert.ok($el1.hasClass('active'))
+ assert.ok($el2.hasClass('active'))
})
QUnit.test('should hide a collapsed element', function (assert) {
assert.expect(1)
var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
- assert.ok(!$el.hasClass('in'), 'does not have class "in"')
+ assert.ok(!$el.hasClass('active'), 'does not have class "active"')
})
QUnit.test('should not fire shown when show is prevented', function (assert) {
@@ -150,7 +150,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
- $('<div id="test1" class="in"/>')
+ $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -185,7 +185,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
var $alt = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
- $('<div id="test1" class="in"/>')
+ $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
@@ -200,7 +200,7 @@ $(function () {
assert.expect(0)
var done = assert.async()
- var $test = $('<div id="test1" class="in"/>')
+ var $test = $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
assert.ok(false)
@@ -244,7 +244,7 @@ $(function () {
assert.expect(1)
var done = assert.async()
- $('<div class="collapse in"></div>')
+ $('<div class="collapse active"></div>')
.appendTo('#qunit-fixture')
.on('hide.bs.collapse', function () {
assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called')
@@ -267,7 +267,7 @@ $(function () {
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
- $('<div id="body1" class="in"/>').appendTo($groups.eq(0))
+ $('<div id="body1" class="active"/>').appendTo($groups.eq(0))
var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
@@ -301,7 +301,7 @@ $(function () {
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent=".accordion"/>').appendTo($groups.eq(0))
- $('<div id="body1" class="in"/>').appendTo($groups.eq(0))
+ $('<div id="body1" class="active"/>').appendTo($groups.eq(0))
var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
@@ -344,7 +344,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
- $('<div id="test1" class="in"/>')
+ $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -379,7 +379,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
var $alt = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
- $('<div id="test1" class="in"/>')
+ $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
@@ -403,7 +403,7 @@ $(function () {
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" data-parent="#accordion"/>').appendTo($groups.eq(0))
- $('<div id="body1" aria-expanded="true" class="in"/>').appendTo($groups.eq(0))
+ $('<div id="body1" aria-expanded="true" class="active"/>').appendTo($groups.eq(0))
var $target2 = $('<a role="button" data-toggle="collapse" href="#body2" data-parent="#accordion" class="collapsed" />').appendTo($groups.eq(1))
@@ -449,7 +449,7 @@ $(function () {
$target2.trigger('click')
$body2
- .toggleClass('in collapsing')
+ .toggleClass('active collapsing')
.data('bs.collapse')._isTransitioning = 1
$target1.trigger('click')
@@ -466,7 +466,7 @@ $(function () {
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
- $('<div id="test1" class="in"/>')
+ $('<div id="test1" class="active"/>')
.appendTo('#qunit-fixture')
.on('hidden.bs.collapse', function () {
assert.ok($target.hasClass('collapsed'))
diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js
index e6cda58d40..becd1d0898 100644
--- a/js/tests/unit/dropdown.js
+++ b/js/tests/unit/dropdown.js
@@ -59,7 +59,7 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
- assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
+ assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
@@ -128,10 +128,10 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
- assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
+ assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
- QUnit.test('should add class open to menu if clicked', function (assert) {
+ QUnit.test('should add class active to menu if clicked', function (assert) {
assert.expect(1)
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
@@ -146,7 +146,7 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
- assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
+ assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
@@ -164,11 +164,11 @@ $(function () {
+ '</ul>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown().trigger('click')
- assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
+ assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
})
- QUnit.test('should remove "open" class if body is clicked', function (assert) {
+ QUnit.test('should remove "active" class if body is clicked', function (assert) {
assert.expect(2)
var dropdownHTML = '<ul class="tabs">'
+ '<li class="dropdown">'
@@ -187,12 +187,12 @@ $(function () {
.bootstrapDropdown()
.trigger('click')
- assert.ok($dropdown.parent('.dropdown').hasClass('open'), '"open" class added on click')
+ assert.ok($dropdown.parent('.dropdown').hasClass('active'), '"active" class added on click')
$(document.body).trigger('click')
- assert.ok(!$dropdown.parent('.dropdown').hasClass('open'), '"open" class removed')
+ assert.ok(!$dropdown.parent('.dropdown').hasClass('active'), '"active" class removed')
})
- QUnit.test('should remove "open" class if body is clicked, with multiple dropdowns', function (assert) {
+ QUnit.test('should remove "active" class if body is clicked, with multiple dropdowns', function (assert) {
assert.expect(7)
var dropdownHTML = '<ul class="nav">'
+ '<li><a href="#menu1">Menu 1</a></li>'
@@ -217,16 +217,16 @@ $(function () {
assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
$first.trigger('click')
- assert.strictEqual($first.parents('.open').length, 1, '"open" class added on click')
- assert.strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
+ assert.strictEqual($first.parents('.active').length, 1, '"active" class added on click')
+ assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
$(document.body).trigger('click')
- assert.strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
+ assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
$last.trigger('click')
- assert.strictEqual($last.parent('.open').length, 1, '"open" class added on click')
- assert.strictEqual($('#qunit-fixture .open').length, 1, 'only one dropdown is open')
+ assert.strictEqual($last.parent('.active').length, 1, '"active" class added on click')
+ assert.strictEqual($('#qunit-fixture .active').length, 1, 'only one dropdown is active')
$(document.body).trigger('click')
- assert.strictEqual($('#qunit-fixture .open').length, 0, '"open" class removed')
+ assert.strictEqual($('#qunit-fixture .active').length, 0, '"active" class removed')
})
QUnit.test('should fire show and hide event', function (assert) {
@@ -411,7 +411,7 @@ $(function () {
$('#textField').trigger('click')
- assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
+ assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
})
QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
@@ -430,6 +430,6 @@ $(function () {
$('#textArea').trigger('click')
- assert.ok($dropdown.parent('.btn-group').hasClass('open'), 'dropdown menu is open')
+ assert.ok($dropdown.parent('.btn-group').hasClass('active'), 'dropdown menu is active')
})
})
diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js
index fcd7791d20..1808ff50aa 100644
--- a/js/tests/unit/popover.js
+++ b/js/tests/unit/popover.js
@@ -229,7 +229,7 @@ $(function () {
$popover.bootstrapPopover('show')
$popover.bootstrapPopover('dispose')
- assert.ok(!$popover.hasClass('in'), 'popover is hidden')
+ assert.ok(!$popover.hasClass('active'), 'popover is hidden')
assert.ok(!$popover.data('popover'), 'popover does not have data')
assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover still has click.foo')
assert.ok(!$._data($popover[0], 'events').mouseover && !$._data($popover[0], 'events').mouseout, 'popover does not have any events')
diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js
index 6cf870551e..de313ff953 100644
--- a/js/tests/unit/tooltip.js
+++ b/js/tests/unit/tooltip.js
@@ -111,7 +111,7 @@ $(function () {
assert
.ok($('.tooltip')
- .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.in'), 'has correct classes applied')
+ .is('.fade.bs-tether-element-attached-top.bs-tether-element-attached-center.active'), 'has correct classes applied')
$tooltip.bootstrapTooltip('hide')
@@ -293,7 +293,7 @@ $(function () {
$tooltip.bootstrapTooltip('show')
$tooltip.bootstrapTooltip('dispose')
- assert.ok(!$tooltip.hasClass('in'), 'tooltip is hidden')
+ assert.ok(!$tooltip.hasClass('active'), 'tooltip is hidden')
assert.ok(!$._data($tooltip[0], 'bs.tooltip'), 'tooltip does not have data')
assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip still has click.foo')
assert.ok(!$._data($tooltip[0], 'events').mouseover && !$._data($tooltip[0], 'events').mouseout, 'tooltip does not have hover events')
@@ -322,7 +322,7 @@ $(function () {
.bootstrapTooltip({ trigger: 'manual' })
.bootstrapTooltip('toggle')
- assert.ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
+ assert.ok($('.tooltip').is('.fade.active'), 'tooltip is faded active')
})
QUnit.test('should hide previously shown tooltip when toggle is called on tooltip', function (assert) {
@@ -333,7 +333,7 @@ $(function () {
.bootstrapTooltip('show')
$('.tooltip').bootstrapTooltip('toggle')
- assert.ok($('.tooltip').not('.fade.in'), 'tooltip was faded out')
+ assert.ok($('.tooltip').not('.fade.active'), 'tooltip was faded out')
})
QUnit.test('should place tooltips inside body when container is body', function (assert) {
@@ -489,11 +489,11 @@ $(function () {
.bootstrapTooltip({ delay: 150 })
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip is not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip is not faded active')
}, 100)
setTimeout(function () {
- assert.ok($('.tooltip').is('.fade.in'), '200ms: tooltip is faded in')
+ assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip is faded active')
done()
}, 200)
@@ -509,12 +509,12 @@ $(function () {
.bootstrapTooltip({ delay: 150 })
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
$tooltip.trigger('mouseout')
}, 100)
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
done()
}, 200)
@@ -530,16 +530,16 @@ $(function () {
.bootstrapTooltip({ delay: { show: 0, hide: 150 }})
setTimeout(function () {
- assert.ok($('.tooltip').is('.fade.in'), '1ms: tooltip faded in')
+ assert.ok($('.tooltip').is('.fade.active'), '1ms: tooltip faded active')
$tooltip.trigger('mouseout')
setTimeout(function () {
- assert.ok($('.tooltip').is('.fade.in'), '100ms: tooltip still faded in')
+ assert.ok($('.tooltip').is('.fade.active'), '100ms: tooltip still faded active')
$tooltip.trigger('mouseenter')
}, 100)
setTimeout(function () {
- assert.ok($('.tooltip').is('.fade.in'), '200ms: tooltip still faded in')
+ assert.ok($('.tooltip').is('.fade.active'), '200ms: tooltip still faded active')
done()
}, 200)
}, 0)
@@ -556,12 +556,12 @@ $(function () {
.bootstrapTooltip({ delay: 150 })
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
$tooltip.trigger('mouseout')
}, 100)
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '200ms: tooltip not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '200ms: tooltip not faded active')
done()
}, 200)
@@ -577,12 +577,12 @@ $(function () {
.bootstrapTooltip({ delay: { show: 150, hide: 0 }})
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '100ms: tooltip not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '100ms: tooltip not faded active')
$tooltip.trigger('mouseout')
}, 100)
setTimeout(function () {
- assert.ok(!$('.tooltip').is('.fade.in'), '250ms: tooltip not faded in')
+ assert.ok(!$('.tooltip').is('.fade.active'), '250ms: tooltip not faded active')
done()
}, 250)
@@ -598,16 +598,16 @@ $(function () {
.bootstrapTooltip({ delay: { show: 0, hide: 150 }})
setTimeout(function () {
- assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.in'), '1ms: tooltip faded in')
+ assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '1ms: tooltip faded active')
$tooltip.trigger('mouseout')
setTimeout(function () {
- assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.in'), '100ms: tooltip still faded in')
+ assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.active'), '100ms: tooltip still faded active')
}, 100)
setTimeout(function () {
- assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.in'), '200ms: tooltip removed')
+ assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.active'), '200ms: tooltip removed')
done()
}, 200)
@@ -713,7 +713,7 @@ $(function () {
assert.ok(obj._hoverState == 'out', 'the tooltip hoverState should be set to "out"')
$('#tt-outer').trigger('mouseenter')
- assert.ok(obj._hoverState == 'in', 'the tooltip hoverState should be set to "in"')
+ assert.ok(obj._hoverState == 'active', 'the tooltip hoverState should be set to "active"')
assert.strictEqual(currentUid, $('#tt-content').text())
})
@@ -775,7 +775,7 @@ $(function () {
var tooltip = $el.data('bs.tooltip')
var $tooltip = $(tooltip.getTipElement())
- function showingTooltip() { return $tooltip.hasClass('in') || tooltip._hoverState == 'in' }
+ function showingTooltip() { return $tooltip.hasClass('active') || tooltip._hoverState == 'active' }
var tests = [
['mouseenter', 'mouseleave'],
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 15fb3091ab..1b60dae230 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -13,12 +13,12 @@
<h1>Alert <small>Bootstrap Visual Test</small></h1>
- <div class="alert alert-warning fade in">
+ <div class="alert alert-warning fade active">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>
- <div class="alert alert-danger fade in">
+ <div class="alert alert-danger fade active">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index ec7a6f29a6..513a8037cc 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -22,7 +22,7 @@
</a>
</h5>
</div>
- <div id="collapseOne" class="collapse in">
+ <div id="collapseOne" class="collapse active">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index a9e2c2440a..5d7ee0fc04 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -71,7 +71,7 @@
</a>
</h5>
</div>
- <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
+ <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
Lorem ipsum
</div>
diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 47702e7955..30d4a1be22 100644
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -111,7 +111,7 @@
}
// Open state for the dropdown
-.open {
+.active {
// Show the menu
> .dropdown-menu {
display: block;
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index 57ba8cf0c9..abfa9bdb51 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -11,7 +11,7 @@
word-wrap: break-word;
opacity: 0;
- &.in { opacity: $tooltip-opacity; }
+ &.active { opacity: $tooltip-opacity; }
&.tooltip-top,
&.bs-tether-element-attached-bottom {
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-25 04:54:45 +0300