mirror of
https://github.com/torproject/tpo.git
synced 2024-11-23 18:09:40 +00:00
Update assets
This commit is contained in:
hiro
parent
0a70779d37
commit
253ab2fc0b
1
assets/javascript
Symbolic link
1
assets/javascript
Symbolic link
@ -0,0 +1 @@
|
||||
../lego/assests/javascript
|
||||
@ -1,194 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): alert.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Alert = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'alert'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.alert'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const TRANSITION_DURATION = 150
|
||||
|
||||
const Selector = {
|
||||
DISMISS : '[data-dismiss="alert"]'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
CLOSE : `close${EVENT_KEY}`,
|
||||
CLOSED : `closed${EVENT_KEY}`,
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
ALERT : 'alert',
|
||||
FADE : 'fade',
|
||||
SHOW : 'show'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Alert {
|
||||
|
||||
constructor(element) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
close(element) {
|
||||
element = element || this._element
|
||||
|
||||
const rootElement = this._getRootElement(element)
|
||||
const customEvent = this._triggerCloseEvent(rootElement)
|
||||
|
||||
if (customEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
this._removeElement(rootElement)
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
this._element = null
|
||||
}
|
||||
|
||||
|
||||
// private
|
||||
|
||||
_getRootElement(element) {
|
||||
const selector = Util.getSelectorFromElement(element)
|
||||
let parent = false
|
||||
|
||||
if (selector) {
|
||||
parent = $(selector)[0]
|
||||
}
|
||||
|
||||
if (!parent) {
|
||||
parent = $(element).closest(`.${ClassName.ALERT}`)[0]
|
||||
}
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
_triggerCloseEvent(element) {
|
||||
const closeEvent = $.Event(Event.CLOSE)
|
||||
|
||||
$(element).trigger(closeEvent)
|
||||
return closeEvent
|
||||
}
|
||||
|
||||
_removeElement(element) {
|
||||
$(element).removeClass(ClassName.SHOW)
|
||||
|
||||
if (!Util.supportsTransitionEnd() ||
|
||||
!$(element).hasClass(ClassName.FADE)) {
|
||||
this._destroyElement(element)
|
||||
return
|
||||
}
|
||||
|
||||
$(element)
|
||||
.one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
}
|
||||
|
||||
_destroyElement(element) {
|
||||
$(element)
|
||||
.detach()
|
||||
.trigger(Event.CLOSED)
|
||||
.remove()
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const $element = $(this)
|
||||
let data = $element.data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = new Alert(this)
|
||||
$element.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (config === 'close') {
|
||||
data[config](this)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static _handleDismiss(alertInstance) {
|
||||
return function (event) {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
alertInstance.close(this)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document).on(
|
||||
Event.CLICK_DATA_API,
|
||||
Selector.DISMISS,
|
||||
Alert._handleDismiss(new Alert())
|
||||
)
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Alert._jQueryInterface
|
||||
$.fn[NAME].Constructor = Alert
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Alert._jQueryInterface
|
||||
}
|
||||
|
||||
return Alert
|
||||
|
||||
})($)
|
||||
|
||||
export default Alert
|
||||
@ -1,187 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): button.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Button = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'button'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.button'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const ClassName = {
|
||||
ACTIVE : 'active',
|
||||
BUTTON : 'btn',
|
||||
FOCUS : 'focus'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
DATA_TOGGLE_CARROT : '[data-toggle^="button"]',
|
||||
DATA_TOGGLE : '[data-toggle="buttons"]',
|
||||
INPUT : 'input',
|
||||
ACTIVE : '.active',
|
||||
BUTTON : '.btn'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
|
||||
FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} `
|
||||
+ `blur${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Button {
|
||||
|
||||
constructor(element) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
toggle() {
|
||||
let triggerChangeEvent = true
|
||||
let addAriaPressed = true
|
||||
const rootElement = $(this._element).closest(
|
||||
Selector.DATA_TOGGLE
|
||||
)[0]
|
||||
|
||||
if (rootElement) {
|
||||
const input = $(this._element).find(Selector.INPUT)[0]
|
||||
|
||||
if (input) {
|
||||
if (input.type === 'radio') {
|
||||
if (input.checked &&
|
||||
$(this._element).hasClass(ClassName.ACTIVE)) {
|
||||
triggerChangeEvent = false
|
||||
|
||||
} else {
|
||||
const activeElement = $(rootElement).find(Selector.ACTIVE)[0]
|
||||
|
||||
if (activeElement) {
|
||||
$(activeElement).removeClass(ClassName.ACTIVE)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (triggerChangeEvent) {
|
||||
if (input.hasAttribute('disabled') ||
|
||||
rootElement.hasAttribute('disabled') ||
|
||||
input.classList.contains('disabled') ||
|
||||
rootElement.classList.contains('disabled')) {
|
||||
return
|
||||
}
|
||||
input.checked = !$(this._element).hasClass(ClassName.ACTIVE)
|
||||
$(input).trigger('change')
|
||||
}
|
||||
|
||||
input.focus()
|
||||
addAriaPressed = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (addAriaPressed) {
|
||||
this._element.setAttribute('aria-pressed',
|
||||
!$(this._element).hasClass(ClassName.ACTIVE))
|
||||
}
|
||||
|
||||
if (triggerChangeEvent) {
|
||||
$(this._element).toggleClass(ClassName.ACTIVE)
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
this._element = null
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = new Button(this)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (config === 'toggle') {
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
|
||||
event.preventDefault()
|
||||
|
||||
let button = event.target
|
||||
|
||||
if (!$(button).hasClass(ClassName.BUTTON)) {
|
||||
button = $(button).closest(Selector.BUTTON)
|
||||
}
|
||||
|
||||
Button._jQueryInterface.call($(button), 'toggle')
|
||||
})
|
||||
.on(Event.FOCUS_BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, (event) => {
|
||||
const button = $(event.target).closest(Selector.BUTTON)[0]
|
||||
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Button._jQueryInterface
|
||||
$.fn[NAME].Constructor = Button
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Button._jQueryInterface
|
||||
}
|
||||
|
||||
return Button
|
||||
|
||||
})($)
|
||||
|
||||
export default Button
|
||||
@ -1,524 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): carousel.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Carousel = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'carousel'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.carousel'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const TRANSITION_DURATION = 600
|
||||
const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key
|
||||
const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
|
||||
const TOUCHEVENT_COMPAT_WAIT = 500 // Time for mouse compat events to fire after touch
|
||||
|
||||
const Default = {
|
||||
interval : 5000,
|
||||
keyboard : true,
|
||||
slide : false,
|
||||
pause : 'hover',
|
||||
wrap : true
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
interval : '(number|boolean)',
|
||||
keyboard : 'boolean',
|
||||
slide : '(boolean|string)',
|
||||
pause : '(string|boolean)',
|
||||
wrap : 'boolean'
|
||||
}
|
||||
|
||||
const Direction = {
|
||||
NEXT : 'next',
|
||||
PREV : 'prev',
|
||||
LEFT : 'left',
|
||||
RIGHT : 'right'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
SLIDE : `slide${EVENT_KEY}`,
|
||||
SLID : `slid${EVENT_KEY}`,
|
||||
KEYDOWN : `keydown${EVENT_KEY}`,
|
||||
MOUSEENTER : `mouseenter${EVENT_KEY}`,
|
||||
MOUSELEAVE : `mouseleave${EVENT_KEY}`,
|
||||
TOUCHEND : `touchend${EVENT_KEY}`,
|
||||
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`,
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
CAROUSEL : 'carousel',
|
||||
ACTIVE : 'active',
|
||||
SLIDE : 'slide',
|
||||
RIGHT : 'carousel-item-right',
|
||||
LEFT : 'carousel-item-left',
|
||||
NEXT : 'carousel-item-next',
|
||||
PREV : 'carousel-item-prev',
|
||||
ITEM : 'carousel-item'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
ACTIVE : '.active',
|
||||
ACTIVE_ITEM : '.active.carousel-item',
|
||||
ITEM : '.carousel-item',
|
||||
NEXT_PREV : '.carousel-item-next, .carousel-item-prev',
|
||||
INDICATORS : '.carousel-indicators',
|
||||
DATA_SLIDE : '[data-slide], [data-slide-to]',
|
||||
DATA_RIDE : '[data-ride="carousel"]'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Carousel {
|
||||
|
||||
constructor(element, config) {
|
||||
this._items = null
|
||||
this._interval = null
|
||||
this._activeElement = null
|
||||
|
||||
this._isPaused = false
|
||||
this._isSliding = false
|
||||
|
||||
this.touchTimeout = null
|
||||
|
||||
this._config = this._getConfig(config)
|
||||
this._element = $(element)[0]
|
||||
this._indicatorsElement = $(this._element).find(Selector.INDICATORS)[0]
|
||||
|
||||
this._addEventListeners()
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
next() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(Direction.NEXT)
|
||||
}
|
||||
}
|
||||
|
||||
nextWhenVisible() {
|
||||
// Don't call next when the page isn't visible
|
||||
// or the carousel or its parent isn't visible
|
||||
if (!document.hidden &&
|
||||
($(this._element).is(':visible') && $(this._element).css('visibility') !== 'hidden')) {
|
||||
this.next()
|
||||
}
|
||||
}
|
||||
|
||||
prev() {
|
||||
if (!this._isSliding) {
|
||||
this._slide(Direction.PREV)
|
||||
}
|
||||
}
|
||||
|
||||
pause(event) {
|
||||
if (!event) {
|
||||
this._isPaused = true
|
||||
}
|
||||
|
||||
if ($(this._element).find(Selector.NEXT_PREV)[0] &&
|
||||
Util.supportsTransitionEnd()) {
|
||||
Util.triggerTransitionEnd(this._element)
|
||||
this.cycle(true)
|
||||
}
|
||||
|
||||
clearInterval(this._interval)
|
||||
this._interval = null
|
||||
}
|
||||
|
||||
cycle(event) {
|
||||
if (!event) {
|
||||
this._isPaused = false
|
||||
}
|
||||
|
||||
if (this._interval) {
|
||||
clearInterval(this._interval)
|
||||
this._interval = null
|
||||
}
|
||||
|
||||
if (this._config.interval && !this._isPaused) {
|
||||
this._interval = setInterval(
|
||||
(document.visibilityState ? this.nextWhenVisible : this.next).bind(this),
|
||||
this._config.interval
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
to(index) {
|
||||
this._activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
|
||||
|
||||
const activeIndex = this._getItemIndex(this._activeElement)
|
||||
|
||||
if (index > this._items.length - 1 || index < 0) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this._isSliding) {
|
||||
$(this._element).one(Event.SLID, () => this.to(index))
|
||||
return
|
||||
}
|
||||
|
||||
if (activeIndex === index) {
|
||||
this.pause()
|
||||
this.cycle()
|
||||
return
|
||||
}
|
||||
|
||||
const direction = index > activeIndex ?
|
||||
Direction.NEXT :
|
||||
Direction.PREV
|
||||
|
||||
this._slide(direction, this._items[index])
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$(this._element).off(EVENT_KEY)
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
|
||||
this._items = null
|
||||
this._config = null
|
||||
this._element = null
|
||||
this._interval = null
|
||||
this._isPaused = null
|
||||
this._isSliding = null
|
||||
this._activeElement = null
|
||||
this._indicatorsElement = null
|
||||
}
|
||||
|
||||
|
||||
// private
|
||||
|
||||
_getConfig(config) {
|
||||
config = $.extend({}, Default, config)
|
||||
Util.typeCheckConfig(NAME, config, DefaultType)
|
||||
return config
|
||||
}
|
||||
|
||||
_addEventListeners() {
|
||||
if (this._config.keyboard) {
|
||||
$(this._element)
|
||||
.on(Event.KEYDOWN, (event) => this._keydown(event))
|
||||
}
|
||||
|
||||
if (this._config.pause === 'hover') {
|
||||
$(this._element)
|
||||
.on(Event.MOUSEENTER, (event) => this.pause(event))
|
||||
.on(Event.MOUSELEAVE, (event) => this.cycle(event))
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
// if it's a touch-enabled device, mouseenter/leave are fired as
|
||||
// part of the mouse compatibility events on first tap - the carousel
|
||||
// would stop cycling until user tapped out of it;
|
||||
// here, we listen for touchend, explicitly pause the carousel
|
||||
// (as if it's the second time we tap on it, mouseenter compat event
|
||||
// is NOT fired) and after a timeout (to allow for mouse compatibility
|
||||
// events to fire) we explicitly restart cycling
|
||||
$(this._element).on(Event.TOUCHEND, () => {
|
||||
this.pause()
|
||||
if (this.touchTimeout) {
|
||||
clearTimeout(this.touchTimeout)
|
||||
}
|
||||
this.touchTimeout = setTimeout((event) => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_keydown(event) {
|
||||
if (/input|textarea/i.test(event.target.tagName)) {
|
||||
return
|
||||
}
|
||||
|
||||
switch (event.which) {
|
||||
case ARROW_LEFT_KEYCODE:
|
||||
event.preventDefault()
|
||||
this.prev()
|
||||
break
|
||||
case ARROW_RIGHT_KEYCODE:
|
||||
event.preventDefault()
|
||||
this.next()
|
||||
break
|
||||
default:
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
_getItemIndex(element) {
|
||||
this._items = $.makeArray($(element).parent().find(Selector.ITEM))
|
||||
return this._items.indexOf(element)
|
||||
}
|
||||
|
||||
_getItemByDirection(direction, activeElement) {
|
||||
const isNextDirection = direction === Direction.NEXT
|
||||
const isPrevDirection = direction === Direction.PREV
|
||||
const activeIndex = this._getItemIndex(activeElement)
|
||||
const lastItemIndex = this._items.length - 1
|
||||
const isGoingToWrap = isPrevDirection && activeIndex === 0 ||
|
||||
isNextDirection && activeIndex === lastItemIndex
|
||||
|
||||
if (isGoingToWrap && !this._config.wrap) {
|
||||
return activeElement
|
||||
}
|
||||
|
||||
const delta = direction === Direction.PREV ? -1 : 1
|
||||
const itemIndex = (activeIndex + delta) % this._items.length
|
||||
|
||||
return itemIndex === -1 ?
|
||||
this._items[this._items.length - 1] : this._items[itemIndex]
|
||||
}
|
||||
|
||||
|
||||
_triggerSlideEvent(relatedTarget, eventDirectionName) {
|
||||
const targetIndex = this._getItemIndex(relatedTarget)
|
||||
const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0])
|
||||
const slideEvent = $.Event(Event.SLIDE, {
|
||||
relatedTarget,
|
||||
direction: eventDirectionName,
|
||||
from: fromIndex,
|
||||
to: targetIndex
|
||||
})
|
||||
|
||||
$(this._element).trigger(slideEvent)
|
||||
|
||||
return slideEvent
|
||||
}
|
||||
|
||||
_setActiveIndicatorElement(element) {
|
||||
if (this._indicatorsElement) {
|
||||
$(this._indicatorsElement)
|
||||
.find(Selector.ACTIVE)
|
||||
.removeClass(ClassName.ACTIVE)
|
||||
|
||||
const nextIndicator = this._indicatorsElement.children[
|
||||
this._getItemIndex(element)
|
||||
]
|
||||
|
||||
if (nextIndicator) {
|
||||
$(nextIndicator).addClass(ClassName.ACTIVE)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_slide(direction, element) {
|
||||
const activeElement = $(this._element).find(Selector.ACTIVE_ITEM)[0]
|
||||
const activeElementIndex = this._getItemIndex(activeElement)
|
||||
const nextElement = element || activeElement &&
|
||||
this._getItemByDirection(direction, activeElement)
|
||||
const nextElementIndex = this._getItemIndex(nextElement)
|
||||
const isCycling = Boolean(this._interval)
|
||||
|
||||
let directionalClassName
|
||||
let orderClassName
|
||||
let eventDirectionName
|
||||
|
||||
if (direction === Direction.NEXT) {
|
||||
directionalClassName = ClassName.LEFT
|
||||
orderClassName = ClassName.NEXT
|
||||
eventDirectionName = Direction.LEFT
|
||||
} else {
|
||||
directionalClassName = ClassName.RIGHT
|
||||
orderClassName = ClassName.PREV
|
||||
eventDirectionName = Direction.RIGHT
|
||||
}
|
||||
|
||||
if (nextElement && $(nextElement).hasClass(ClassName.ACTIVE)) {
|
||||
this._isSliding = false
|
||||
return
|
||||
}
|
||||
|
||||
const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName)
|
||||
if (slideEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!activeElement || !nextElement) {
|
||||
// some weirdness is happening, so we bail
|
||||
return
|
||||
}
|
||||
|
||||
this._isSliding = true
|
||||
|
||||
if (isCycling) {
|
||||
this.pause()
|
||||
}
|
||||
|
||||
this._setActiveIndicatorElement(nextElement)
|
||||
|
||||
const slidEvent = $.Event(Event.SLID, {
|
||||
relatedTarget: nextElement,
|
||||
direction: eventDirectionName,
|
||||
from: activeElementIndex,
|
||||
to: nextElementIndex
|
||||
})
|
||||
|
||||
if (Util.supportsTransitionEnd() &&
|
||||
$(this._element).hasClass(ClassName.SLIDE)) {
|
||||
|
||||
$(nextElement).addClass(orderClassName)
|
||||
|
||||
Util.reflow(nextElement)
|
||||
|
||||
$(activeElement).addClass(directionalClassName)
|
||||
$(nextElement).addClass(directionalClassName)
|
||||
|
||||
$(activeElement)
|
||||
.one(Util.TRANSITION_END, () => {
|
||||
$(nextElement)
|
||||
.removeClass(`${directionalClassName} ${orderClassName}`)
|
||||
.addClass(ClassName.ACTIVE)
|
||||
|
||||
$(activeElement).removeClass(`${ClassName.ACTIVE} ${orderClassName} ${directionalClassName}`)
|
||||
|
||||
this._isSliding = false
|
||||
|
||||
setTimeout(() => $(this._element).trigger(slidEvent), 0)
|
||||
|
||||
})
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
|
||||
} else {
|
||||
$(activeElement).removeClass(ClassName.ACTIVE)
|
||||
$(nextElement).addClass(ClassName.ACTIVE)
|
||||
|
||||
this._isSliding = false
|
||||
$(this._element).trigger(slidEvent)
|
||||
}
|
||||
|
||||
if (isCycling) {
|
||||
this.cycle()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = $.extend({}, Default, $(this).data())
|
||||
|
||||
if (typeof config === 'object') {
|
||||
$.extend(_config, config)
|
||||
}
|
||||
|
||||
const action = typeof config === 'string' ? config : _config.slide
|
||||
|
||||
if (!data) {
|
||||
data = new Carousel(this, _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'number') {
|
||||
data.to(config)
|
||||
} else if (typeof action === 'string') {
|
||||
if (typeof data[action] === 'undefined') {
|
||||
throw new Error(`No method named "${action}"`)
|
||||
}
|
||||
data[action]()
|
||||
} else if (_config.interval) {
|
||||
data.pause()
|
||||
data.cycle()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static _dataApiClickHandler(event) {
|
||||
const selector = Util.getSelectorFromElement(this)
|
||||
|
||||
if (!selector) {
|
||||
return
|
||||
}
|
||||
|
||||
const target = $(selector)[0]
|
||||
|
||||
if (!target || !$(target).hasClass(ClassName.CAROUSEL)) {
|
||||
return
|
||||
}
|
||||
|
||||
const config = $.extend({}, $(target).data(), $(this).data())
|
||||
const slideIndex = this.getAttribute('data-slide-to')
|
||||
|
||||
if (slideIndex) {
|
||||
config.interval = false
|
||||
}
|
||||
|
||||
Carousel._jQueryInterface.call($(target), config)
|
||||
|
||||
if (slideIndex) {
|
||||
$(target).data(DATA_KEY).to(slideIndex)
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.CLICK_DATA_API, Selector.DATA_SLIDE, Carousel._dataApiClickHandler)
|
||||
|
||||
$(window).on(Event.LOAD_DATA_API, () => {
|
||||
$(Selector.DATA_RIDE).each(function () {
|
||||
const $carousel = $(this)
|
||||
Carousel._jQueryInterface.call($carousel, $carousel.data())
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Carousel._jQueryInterface
|
||||
$.fn[NAME].Constructor = Carousel
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Carousel._jQueryInterface
|
||||
}
|
||||
|
||||
return Carousel
|
||||
|
||||
})($)
|
||||
|
||||
export default Carousel
|
||||
@ -1,409 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): collapse.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Collapse = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'collapse'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.collapse'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const TRANSITION_DURATION = 600
|
||||
|
||||
const Default = {
|
||||
toggle : true,
|
||||
parent : ''
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
toggle : 'boolean',
|
||||
parent : '(string|element)'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
SHOW : `show${EVENT_KEY}`,
|
||||
SHOWN : `shown${EVENT_KEY}`,
|
||||
HIDE : `hide${EVENT_KEY}`,
|
||||
HIDDEN : `hidden${EVENT_KEY}`,
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
SHOW : 'show',
|
||||
COLLAPSE : 'collapse',
|
||||
COLLAPSING : 'collapsing',
|
||||
COLLAPSED : 'collapsed'
|
||||
}
|
||||
|
||||
const Dimension = {
|
||||
WIDTH : 'width',
|
||||
HEIGHT : 'height'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
ACTIVES : '.show, .collapsing',
|
||||
DATA_TOGGLE : '[data-toggle="collapse"]'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Collapse {
|
||||
|
||||
constructor(element, config) {
|
||||
this._isTransitioning = false
|
||||
this._element = element
|
||||
this._config = this._getConfig(config)
|
||||
this._triggerArray = $.makeArray($(
|
||||
`[data-toggle="collapse"][href="#${element.id}"],` +
|
||||
`[data-toggle="collapse"][data-target="#${element.id}"]`
|
||||
))
|
||||
const tabToggles = $(Selector.DATA_TOGGLE)
|
||||
for (let i = 0; i < tabToggles.length; i++) {
|
||||
const elem = tabToggles[i]
|
||||
const selector = Util.getSelectorFromElement(elem)
|
||||
if (selector !== null && $(selector).filter(element).length > 0) {
|
||||
this._triggerArray.push(elem)
|
||||
}
|
||||
}
|
||||
|
||||
this._parent = this._config.parent ? this._getParent() : null
|
||||
|
||||
if (!this._config.parent) {
|
||||
this._addAriaAndCollapsedClass(this._element, this._triggerArray)
|
||||
}
|
||||
|
||||
if (this._config.toggle) {
|
||||
this.toggle()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
toggle() {
|
||||
if ($(this._element).hasClass(ClassName.SHOW)) {
|
||||
this.hide()
|
||||
} else {
|
||||
this.show()
|
||||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
if (this._isTransitioning ||
|
||||
$(this._element).hasClass(ClassName.SHOW)) {
|
||||
return
|
||||
}
|
||||
|
||||
let actives
|
||||
let activesData
|
||||
|
||||
if (this._parent) {
|
||||
actives = $.makeArray($(this._parent).children().children(Selector.ACTIVES))
|
||||
if (!actives.length) {
|
||||
actives = null
|
||||
}
|
||||
}
|
||||
|
||||
if (actives) {
|
||||
activesData = $(actives).data(DATA_KEY)
|
||||
if (activesData && activesData._isTransitioning) {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const startEvent = $.Event(Event.SHOW)
|
||||
$(this._element).trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
if (actives) {
|
||||
Collapse._jQueryInterface.call($(actives), 'hide')
|
||||
if (!activesData) {
|
||||
$(actives).data(DATA_KEY, null)
|
||||
}
|
||||
}
|
||||
|
||||
const dimension = this._getDimension()
|
||||
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSE)
|
||||
.addClass(ClassName.COLLAPSING)
|
||||
|
||||
this._element.style[dimension] = 0
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
$(this._triggerArray)
|
||||
.removeClass(ClassName.COLLAPSED)
|
||||
.attr('aria-expanded', true)
|
||||
}
|
||||
|
||||
this.setTransitioning(true)
|
||||
|
||||
const complete = () => {
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE)
|
||||
.addClass(ClassName.SHOW)
|
||||
|
||||
this._element.style[dimension] = ''
|
||||
|
||||
this.setTransitioning(false)
|
||||
|
||||
$(this._element).trigger(Event.SHOWN)
|
||||
}
|
||||
|
||||
if (!Util.supportsTransitionEnd()) {
|
||||
complete()
|
||||
return
|
||||
}
|
||||
|
||||
const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1)
|
||||
const scrollSize = `scroll${capitalizedDimension}`
|
||||
|
||||
$(this._element)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
|
||||
this._element.style[dimension] = `${this._element[scrollSize]}px`
|
||||
}
|
||||
|
||||
hide() {
|
||||
if (this._isTransitioning ||
|
||||
!$(this._element).hasClass(ClassName.SHOW)) {
|
||||
return
|
||||
}
|
||||
|
||||
const startEvent = $.Event(Event.HIDE)
|
||||
$(this._element).trigger(startEvent)
|
||||
if (startEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
const dimension = this._getDimension()
|
||||
|
||||
this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px`
|
||||
|
||||
Util.reflow(this._element)
|
||||
|
||||
$(this._element)
|
||||
.addClass(ClassName.COLLAPSING)
|
||||
.removeClass(ClassName.COLLAPSE)
|
||||
.removeClass(ClassName.SHOW)
|
||||
|
||||
if (this._triggerArray.length) {
|
||||
for (let i = 0; i < this._triggerArray.length; i++) {
|
||||
const trigger = this._triggerArray[i]
|
||||
const selector = Util.getSelectorFromElement(trigger)
|
||||
if (selector !== null) {
|
||||
const $elem = $(selector)
|
||||
if (!$elem.hasClass(ClassName.SHOW)) {
|
||||
$(trigger).addClass(ClassName.COLLAPSED)
|
||||
.attr('aria-expanded', false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.setTransitioning(true)
|
||||
|
||||
const complete = () => {
|
||||
this.setTransitioning(false)
|
||||
$(this._element)
|
||||
.removeClass(ClassName.COLLAPSING)
|
||||
.addClass(ClassName.COLLAPSE)
|
||||
.trigger(Event.HIDDEN)
|
||||
}
|
||||
|
||||
this._element.style[dimension] = ''
|
||||
|
||||
if (!Util.supportsTransitionEnd()) {
|
||||
complete()
|
||||
return
|
||||
}
|
||||
|
||||
$(this._element)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
}
|
||||
|
||||
setTransitioning(isTransitioning) {
|
||||
this._isTransitioning = isTransitioning
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
|
||||
this._config = null
|
||||
this._parent = null
|
||||
this._element = null
|
||||
this._triggerArray = null
|
||||
this._isTransitioning = null
|
||||
}
|
||||
|
||||
|
||||
// private
|
||||
|
||||
_getConfig(config) {
|
||||
config = $.extend({}, Default, config)
|
||||
config.toggle = Boolean(config.toggle) // coerce string values
|
||||
Util.typeCheckConfig(NAME, config, DefaultType)
|
||||
return config
|
||||
}
|
||||
|
||||
_getDimension() {
|
||||
const hasWidth = $(this._element).hasClass(Dimension.WIDTH)
|
||||
return hasWidth ? Dimension.WIDTH : Dimension.HEIGHT
|
||||
}
|
||||
|
||||
_getParent() {
|
||||
let parent = null
|
||||
if (Util.isElement(this._config.parent)) {
|
||||
parent = this._config.parent
|
||||
|
||||
// it's a jQuery object
|
||||
if (typeof this._config.parent.jquery !== 'undefined') {
|
||||
parent = this._config.parent[0]
|
||||
}
|
||||
} else {
|
||||
parent = $(this._config.parent)[0]
|
||||
}
|
||||
|
||||
const selector =
|
||||
`[data-toggle="collapse"][data-parent="${this._config.parent}"]`
|
||||
|
||||
$(parent).find(selector).each((i, element) => {
|
||||
this._addAriaAndCollapsedClass(
|
||||
Collapse._getTargetFromElement(element),
|
||||
[element]
|
||||
)
|
||||
})
|
||||
|
||||
return parent
|
||||
}
|
||||
|
||||
_addAriaAndCollapsedClass(element, triggerArray) {
|
||||
if (element) {
|
||||
const isOpen = $(element).hasClass(ClassName.SHOW)
|
||||
|
||||
if (triggerArray.length) {
|
||||
$(triggerArray)
|
||||
.toggleClass(ClassName.COLLAPSED, !isOpen)
|
||||
.attr('aria-expanded', isOpen)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _getTargetFromElement(element) {
|
||||
const selector = Util.getSelectorFromElement(element)
|
||||
return selector ? $(selector)[0] : null
|
||||
}
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const $this = $(this)
|
||||
let data = $this.data(DATA_KEY)
|
||||
const _config = $.extend(
|
||||
{},
|
||||
Default,
|
||||
$this.data(),
|
||||
typeof config === 'object' && config
|
||||
)
|
||||
|
||||
if (!data && _config.toggle && /show|hide/.test(config)) {
|
||||
_config.toggle = false
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Collapse(this, _config)
|
||||
$this.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
// preventDefault only for <a> elements (which change the URL) not inside the collapsible element
|
||||
if (event.currentTarget.tagName === 'A') {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const $trigger = $(this)
|
||||
const selector = Util.getSelectorFromElement(this)
|
||||
$(selector).each(function () {
|
||||
const $target = $(this)
|
||||
const data = $target.data(DATA_KEY)
|
||||
const config = data ? 'toggle' : $trigger.data()
|
||||
Collapse._jQueryInterface.call($target, config)
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Collapse._jQueryInterface
|
||||
$.fn[NAME].Constructor = Collapse
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Collapse._jQueryInterface
|
||||
}
|
||||
|
||||
return Collapse
|
||||
|
||||
})($)
|
||||
|
||||
export default Collapse
|
||||
@ -1,450 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Popper from 'popper.js'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): dropdown.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Dropdown = (() => {
|
||||
|
||||
/**
|
||||
* Check for Popper dependency
|
||||
* Popper - https://popper.js.org
|
||||
*/
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)')
|
||||
}
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'dropdown'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.dropdown'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key
|
||||
const SPACE_KEYCODE = 32 // KeyboardEvent.which value for space key
|
||||
const TAB_KEYCODE = 9 // KeyboardEvent.which value for tab key
|
||||
const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key
|
||||
const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key
|
||||
const RIGHT_MOUSE_BUTTON_WHICH = 3 // MouseEvent.which value for the right button (assuming a right-handed mouse)
|
||||
const REGEXP_KEYDOWN = new RegExp(`${ARROW_UP_KEYCODE}|${ARROW_DOWN_KEYCODE}|${ESCAPE_KEYCODE}`)
|
||||
|
||||
const Event = {
|
||||
HIDE : `hide${EVENT_KEY}`,
|
||||
HIDDEN : `hidden${EVENT_KEY}`,
|
||||
SHOW : `show${EVENT_KEY}`,
|
||||
SHOWN : `shown${EVENT_KEY}`,
|
||||
CLICK : `click${EVENT_KEY}`,
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
|
||||
KEYDOWN_DATA_API : `keydown${EVENT_KEY}${DATA_API_KEY}`,
|
||||
KEYUP_DATA_API : `keyup${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
DISABLED : 'disabled',
|
||||
SHOW : 'show',
|
||||
DROPUP : 'dropup',
|
||||
MENURIGHT : 'dropdown-menu-right',
|
||||
MENULEFT : 'dropdown-menu-left'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
DATA_TOGGLE : '[data-toggle="dropdown"]',
|
||||
FORM_CHILD : '.dropdown form',
|
||||
MENU : '.dropdown-menu',
|
||||
NAVBAR_NAV : '.navbar-nav',
|
||||
VISIBLE_ITEMS : '.dropdown-menu .dropdown-item:not(.disabled)'
|
||||
}
|
||||
|
||||
const AttachmentMap = {
|
||||
TOP : 'top-start',
|
||||
TOPEND : 'top-end',
|
||||
BOTTOM : 'bottom-start',
|
||||
BOTTOMEND : 'bottom-end'
|
||||
}
|
||||
|
||||
const Default = {
|
||||
offset : 0,
|
||||
flip : true
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
offset : '(number|string|function)',
|
||||
flip : 'boolean'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Dropdown {
|
||||
|
||||
constructor(element, config) {
|
||||
this._element = element
|
||||
this._popper = null
|
||||
this._config = this._getConfig(config)
|
||||
this._menu = this._getMenuElement()
|
||||
this._inNavbar = this._detectNavbar()
|
||||
|
||||
this._addEventListeners()
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType
|
||||
}
|
||||
|
||||
// public
|
||||
|
||||
toggle() {
|
||||
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
|
||||
return
|
||||
}
|
||||
|
||||
const parent = Dropdown._getParentFromElement(this._element)
|
||||
const isActive = $(this._menu).hasClass(ClassName.SHOW)
|
||||
|
||||
Dropdown._clearMenus()
|
||||
|
||||
if (isActive) {
|
||||
return
|
||||
}
|
||||
|
||||
const relatedTarget = {
|
||||
relatedTarget : this._element
|
||||
}
|
||||
const showEvent = $.Event(Event.SHOW, relatedTarget)
|
||||
|
||||
$(parent).trigger(showEvent)
|
||||
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
let element = this._element
|
||||
// for dropup with alignment we use the parent as popper container
|
||||
if ($(parent).hasClass(ClassName.DROPUP)) {
|
||||
if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||
element = parent
|
||||
}
|
||||
}
|
||||
this._popper = new Popper(element, this._menu, this._getPopperConfig())
|
||||
|
||||
// if this is a touch-enabled device we add extra
|
||||
// empty mouseover listeners to the body's immediate children;
|
||||
// only needed because of broken event delegation on iOS
|
||||
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
||||
if ('ontouchstart' in document.documentElement &&
|
||||
!$(parent).closest(Selector.NAVBAR_NAV).length) {
|
||||
$('body').children().on('mouseover', null, $.noop)
|
||||
}
|
||||
|
||||
this._element.focus()
|
||||
this._element.setAttribute('aria-expanded', true)
|
||||
|
||||
$(this._menu).toggleClass(ClassName.SHOW)
|
||||
$(parent)
|
||||
.toggleClass(ClassName.SHOW)
|
||||
.trigger($.Event(Event.SHOWN, relatedTarget))
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
$(this._element).off(EVENT_KEY)
|
||||
this._element = null
|
||||
this._menu = null
|
||||
if (this._popper !== null) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
this._popper = null
|
||||
}
|
||||
|
||||
update() {
|
||||
this._inNavbar = this._detectNavbar()
|
||||
if (this._popper !== null) {
|
||||
this._popper.scheduleUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
_addEventListeners() {
|
||||
$(this._element).on(Event.CLICK, (event) => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
this.toggle()
|
||||
})
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = $.extend(
|
||||
{},
|
||||
this.constructor.Default,
|
||||
$(this._element).data(),
|
||||
config
|
||||
)
|
||||
|
||||
Util.typeCheckConfig(
|
||||
NAME,
|
||||
config,
|
||||
this.constructor.DefaultType
|
||||
)
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_getMenuElement() {
|
||||
if (!this._menu) {
|
||||
const parent = Dropdown._getParentFromElement(this._element)
|
||||
this._menu = $(parent).find(Selector.MENU)[0]
|
||||
}
|
||||
return this._menu
|
||||
}
|
||||
|
||||
_getPlacement() {
|
||||
const $parentDropdown = $(this._element).parent()
|
||||
let placement = AttachmentMap.BOTTOM
|
||||
|
||||
// Handle dropup
|
||||
if ($parentDropdown.hasClass(ClassName.DROPUP)) {
|
||||
placement = AttachmentMap.TOP
|
||||
if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||
placement = AttachmentMap.TOPEND
|
||||
}
|
||||
} else if ($(this._menu).hasClass(ClassName.MENURIGHT)) {
|
||||
placement = AttachmentMap.BOTTOMEND
|
||||
}
|
||||
return placement
|
||||
}
|
||||
|
||||
_detectNavbar() {
|
||||
return $(this._element).closest('.navbar').length > 0
|
||||
}
|
||||
|
||||
_getPopperConfig() {
|
||||
const offsetConf = {}
|
||||
if (typeof this._config.offset === 'function') {
|
||||
offsetConf.fn = (data) => {
|
||||
data.offsets = $.extend({}, data.offsets, this._config.offset(data.offsets) || {})
|
||||
return data
|
||||
}
|
||||
} else {
|
||||
offsetConf.offset = this._config.offset
|
||||
}
|
||||
const popperConfig = {
|
||||
placement : this._getPlacement(),
|
||||
modifiers : {
|
||||
offset : offsetConf,
|
||||
flip : {
|
||||
enabled : this._config.flip
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Disable Popper.js for Dropdown in Navbar
|
||||
if (this._inNavbar) {
|
||||
popperConfig.modifiers.applyStyle = {
|
||||
enabled: !this._inNavbar
|
||||
}
|
||||
}
|
||||
return popperConfig
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = typeof config === 'object' ? config : null
|
||||
|
||||
if (!data) {
|
||||
data = new Dropdown(this, _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
static _clearMenus(event) {
|
||||
if (event && (event.which === RIGHT_MOUSE_BUTTON_WHICH ||
|
||||
event.type === 'keyup' && event.which !== TAB_KEYCODE)) {
|
||||
return
|
||||
}
|
||||
|
||||
const toggles = $.makeArray($(Selector.DATA_TOGGLE))
|
||||
for (let i = 0; i < toggles.length; i++) {
|
||||
const parent = Dropdown._getParentFromElement(toggles[i])
|
||||
const context = $(toggles[i]).data(DATA_KEY)
|
||||
const relatedTarget = {
|
||||
relatedTarget : toggles[i]
|
||||
}
|
||||
|
||||
if (!context) {
|
||||
continue
|
||||
}
|
||||
|
||||
const dropdownMenu = context._menu
|
||||
if (!$(parent).hasClass(ClassName.SHOW)) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (event && (event.type === 'click' &&
|
||||
/input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE)
|
||||
&& $.contains(parent, event.target)) {
|
||||
continue
|
||||
}
|
||||
|
||||
const hideEvent = $.Event(Event.HIDE, relatedTarget)
|
||||
$(parent).trigger(hideEvent)
|
||||
if (hideEvent.isDefaultPrevented()) {
|
||||
continue
|
||||
}
|
||||
|
||||
// if this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
$('body').children().off('mouseover', null, $.noop)
|
||||
}
|
||||
|
||||
toggles[i].setAttribute('aria-expanded', 'false')
|
||||
|
||||
$(dropdownMenu).removeClass(ClassName.SHOW)
|
||||
$(parent)
|
||||
.removeClass(ClassName.SHOW)
|
||||
.trigger($.Event(Event.HIDDEN, relatedTarget))
|
||||
}
|
||||
}
|
||||
|
||||
static _getParentFromElement(element) {
|
||||
let parent
|
||||
const selector = Util.getSelectorFromElement(element)
|
||||
|
||||
if (selector) {
|
||||
parent = $(selector)[0]
|
||||
}
|
||||
|
||||
return parent || element.parentNode
|
||||
}
|
||||
|
||||
static _dataApiKeydownHandler(event) {
|
||||
if (!REGEXP_KEYDOWN.test(event.which) || /button/i.test(event.target.tagName) && event.which === SPACE_KEYCODE ||
|
||||
/input|textarea/i.test(event.target.tagName)) {
|
||||
return
|
||||
}
|
||||
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
if (this.disabled || $(this).hasClass(ClassName.DISABLED)) {
|
||||
return
|
||||
}
|
||||
|
||||
const parent = Dropdown._getParentFromElement(this)
|
||||
const isActive = $(parent).hasClass(ClassName.SHOW)
|
||||
|
||||
if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) ||
|
||||
isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
|
||||
|
||||
if (event.which === ESCAPE_KEYCODE) {
|
||||
const toggle = $(parent).find(Selector.DATA_TOGGLE)[0]
|
||||
$(toggle).trigger('focus')
|
||||
}
|
||||
|
||||
$(this).trigger('click')
|
||||
return
|
||||
}
|
||||
|
||||
const items = $(parent).find(Selector.VISIBLE_ITEMS).get()
|
||||
|
||||
if (!items.length) {
|
||||
return
|
||||
}
|
||||
|
||||
let index = items.indexOf(event.target)
|
||||
|
||||
if (event.which === ARROW_UP_KEYCODE && index > 0) { // up
|
||||
index--
|
||||
}
|
||||
|
||||
if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { // down
|
||||
index++
|
||||
}
|
||||
|
||||
if (index < 0) {
|
||||
index = 0
|
||||
}
|
||||
|
||||
items[index].focus()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler)
|
||||
.on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler)
|
||||
.on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus)
|
||||
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
Dropdown._jQueryInterface.call($(this), 'toggle')
|
||||
})
|
||||
.on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => {
|
||||
e.stopPropagation()
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Dropdown._jQueryInterface
|
||||
$.fn[NAME].Constructor = Dropdown
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Dropdown._jQueryInterface
|
||||
}
|
||||
|
||||
return Dropdown
|
||||
|
||||
})($, Popper)
|
||||
|
||||
export default Dropdown
|
||||
@ -1,50 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Alert from './alert'
|
||||
import Button from './button'
|
||||
import Carousel from './carousel'
|
||||
import Collapse from './collapse'
|
||||
import Dropdown from './dropdown'
|
||||
import Modal from './modal'
|
||||
import Popover from './popover'
|
||||
import Scrollspy from './scrollspy'
|
||||
import Tab from './tab'
|
||||
import Tooltip from './tooltip'
|
||||
import Util from './util'
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-alpha.6): index.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
(() => {
|
||||
if (typeof $ === 'undefined') {
|
||||
throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
|
||||
}
|
||||
|
||||
const version = $.fn.jquery.split(' ')[0].split('.')
|
||||
const minMajor = 1
|
||||
const ltMajor = 2
|
||||
const minMinor = 9
|
||||
const minPatch = 1
|
||||
const maxMajor = 4
|
||||
|
||||
if (version[0] < ltMajor && version[1] < minMinor || version[0] === minMajor && version[1] === minMinor && version[2] < minPatch || version[0] >= maxMajor) {
|
||||
throw new Error('Bootstrap\'s JavaScript requires at least jQuery v1.9.1 but less than v4.0.0')
|
||||
}
|
||||
})($)
|
||||
|
||||
export {
|
||||
Util,
|
||||
Alert,
|
||||
Button,
|
||||
Carousel,
|
||||
Collapse,
|
||||
Dropdown,
|
||||
Modal,
|
||||
Popover,
|
||||
Scrollspy,
|
||||
Tab,
|
||||
Tooltip
|
||||
}
|
||||
@ -1,590 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): modal.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Modal = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'modal'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.modal'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const TRANSITION_DURATION = 300
|
||||
const BACKDROP_TRANSITION_DURATION = 150
|
||||
const ESCAPE_KEYCODE = 27 // KeyboardEvent.which value for Escape (Esc) key
|
||||
|
||||
const Default = {
|
||||
backdrop : true,
|
||||
keyboard : true,
|
||||
focus : true,
|
||||
show : true
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
backdrop : '(boolean|string)',
|
||||
keyboard : 'boolean',
|
||||
focus : 'boolean',
|
||||
show : 'boolean'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
HIDE : `hide${EVENT_KEY}`,
|
||||
HIDDEN : `hidden${EVENT_KEY}`,
|
||||
SHOW : `show${EVENT_KEY}`,
|
||||
SHOWN : `shown${EVENT_KEY}`,
|
||||
FOCUSIN : `focusin${EVENT_KEY}`,
|
||||
RESIZE : `resize${EVENT_KEY}`,
|
||||
CLICK_DISMISS : `click.dismiss${EVENT_KEY}`,
|
||||
KEYDOWN_DISMISS : `keydown.dismiss${EVENT_KEY}`,
|
||||
MOUSEUP_DISMISS : `mouseup.dismiss${EVENT_KEY}`,
|
||||
MOUSEDOWN_DISMISS : `mousedown.dismiss${EVENT_KEY}`,
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
|
||||
BACKDROP : 'modal-backdrop',
|
||||
OPEN : 'modal-open',
|
||||
FADE : 'fade',
|
||||
SHOW : 'show'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
DIALOG : '.modal-dialog',
|
||||
DATA_TOGGLE : '[data-toggle="modal"]',
|
||||
DATA_DISMISS : '[data-dismiss="modal"]',
|
||||
FIXED_CONTENT : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
|
||||
STICKY_CONTENT : '.sticky-top',
|
||||
NAVBAR_TOGGLER : '.navbar-toggler'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Modal {
|
||||
|
||||
constructor(element, config) {
|
||||
this._config = this._getConfig(config)
|
||||
this._element = element
|
||||
this._dialog = $(element).find(Selector.DIALOG)[0]
|
||||
this._backdrop = null
|
||||
this._isShown = false
|
||||
this._isBodyOverflowing = false
|
||||
this._ignoreBackdropClick = false
|
||||
this._originalBodyPadding = 0
|
||||
this._scrollbarWidth = 0
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
toggle(relatedTarget) {
|
||||
return this._isShown ? this.hide() : this.show(relatedTarget)
|
||||
}
|
||||
|
||||
show(relatedTarget) {
|
||||
if (this._isTransitioning || this._isShown) {
|
||||
return
|
||||
}
|
||||
|
||||
if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)) {
|
||||
this._isTransitioning = true
|
||||
}
|
||||
|
||||
const showEvent = $.Event(Event.SHOW, {
|
||||
relatedTarget
|
||||
})
|
||||
|
||||
$(this._element).trigger(showEvent)
|
||||
|
||||
if (this._isShown || showEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
this._isShown = true
|
||||
|
||||
this._checkScrollbar()
|
||||
this._setScrollbar()
|
||||
|
||||
this._adjustDialog()
|
||||
|
||||
$(document.body).addClass(ClassName.OPEN)
|
||||
|
||||
this._setEscapeEvent()
|
||||
this._setResizeEvent()
|
||||
|
||||
$(this._element).on(
|
||||
Event.CLICK_DISMISS,
|
||||
Selector.DATA_DISMISS,
|
||||
(event) => this.hide(event)
|
||||
)
|
||||
|
||||
$(this._dialog).on(Event.MOUSEDOWN_DISMISS, () => {
|
||||
$(this._element).one(Event.MOUSEUP_DISMISS, (event) => {
|
||||
if ($(event.target).is(this._element)) {
|
||||
this._ignoreBackdropClick = true
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this._showBackdrop(() => this._showElement(relatedTarget))
|
||||
}
|
||||
|
||||
hide(event) {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
if (this._isTransitioning || !this._isShown) {
|
||||
return
|
||||
}
|
||||
|
||||
const hideEvent = $.Event(Event.HIDE)
|
||||
|
||||
$(this._element).trigger(hideEvent)
|
||||
|
||||
if (!this._isShown || hideEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
this._isShown = false
|
||||
|
||||
const transition = Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.FADE)
|
||||
|
||||
if (transition) {
|
||||
this._isTransitioning = true
|
||||
}
|
||||
|
||||
this._setEscapeEvent()
|
||||
this._setResizeEvent()
|
||||
|
||||
$(document).off(Event.FOCUSIN)
|
||||
|
||||
$(this._element).removeClass(ClassName.SHOW)
|
||||
|
||||
$(this._element).off(Event.CLICK_DISMISS)
|
||||
$(this._dialog).off(Event.MOUSEDOWN_DISMISS)
|
||||
|
||||
if (transition) {
|
||||
|
||||
$(this._element)
|
||||
.one(Util.TRANSITION_END, (event) => this._hideModal(event))
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
} else {
|
||||
this._hideModal()
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
|
||||
$(window, document, this._element, this._backdrop).off(EVENT_KEY)
|
||||
|
||||
this._config = null
|
||||
this._element = null
|
||||
this._dialog = null
|
||||
this._backdrop = null
|
||||
this._isShown = null
|
||||
this._isBodyOverflowing = null
|
||||
this._ignoreBackdropClick = null
|
||||
this._scrollbarWidth = null
|
||||
}
|
||||
|
||||
handleUpdate() {
|
||||
this._adjustDialog()
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
_getConfig(config) {
|
||||
config = $.extend({}, Default, config)
|
||||
Util.typeCheckConfig(NAME, config, DefaultType)
|
||||
return config
|
||||
}
|
||||
|
||||
_showElement(relatedTarget) {
|
||||
const transition = Util.supportsTransitionEnd() &&
|
||||
$(this._element).hasClass(ClassName.FADE)
|
||||
|
||||
if (!this._element.parentNode ||
|
||||
this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
|
||||
// don't move modals dom position
|
||||
document.body.appendChild(this._element)
|
||||
}
|
||||
|
||||
this._element.style.display = 'block'
|
||||
this._element.removeAttribute('aria-hidden')
|
||||
this._element.scrollTop = 0
|
||||
|
||||
if (transition) {
|
||||
Util.reflow(this._element)
|
||||
}
|
||||
|
||||
$(this._element).addClass(ClassName.SHOW)
|
||||
|
||||
if (this._config.focus) {
|
||||
this._enforceFocus()
|
||||
}
|
||||
|
||||
const shownEvent = $.Event(Event.SHOWN, {
|
||||
relatedTarget
|
||||
})
|
||||
|
||||
const transitionComplete = () => {
|
||||
if (this._config.focus) {
|
||||
this._element.focus()
|
||||
}
|
||||
this._isTransitioning = false
|
||||
$(this._element).trigger(shownEvent)
|
||||
}
|
||||
|
||||
if (transition) {
|
||||
$(this._dialog)
|
||||
.one(Util.TRANSITION_END, transitionComplete)
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
} else {
|
||||
transitionComplete()
|
||||
}
|
||||
}
|
||||
|
||||
_enforceFocus() {
|
||||
$(document)
|
||||
.off(Event.FOCUSIN) // guard against infinite focus loop
|
||||
.on(Event.FOCUSIN, (event) => {
|
||||
if (document !== event.target &&
|
||||
this._element !== event.target &&
|
||||
!$(this._element).has(event.target).length) {
|
||||
this._element.focus()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
_setEscapeEvent() {
|
||||
if (this._isShown && this._config.keyboard) {
|
||||
$(this._element).on(Event.KEYDOWN_DISMISS, (event) => {
|
||||
if (event.which === ESCAPE_KEYCODE) {
|
||||
event.preventDefault()
|
||||
this.hide()
|
||||
}
|
||||
})
|
||||
|
||||
} else if (!this._isShown) {
|
||||
$(this._element).off(Event.KEYDOWN_DISMISS)
|
||||
}
|
||||
}
|
||||
|
||||
_setResizeEvent() {
|
||||
if (this._isShown) {
|
||||
$(window).on(Event.RESIZE, (event) => this.handleUpdate(event))
|
||||
} else {
|
||||
$(window).off(Event.RESIZE)
|
||||
}
|
||||
}
|
||||
|
||||
_hideModal() {
|
||||
this._element.style.display = 'none'
|
||||
this._element.setAttribute('aria-hidden', true)
|
||||
this._isTransitioning = false
|
||||
this._showBackdrop(() => {
|
||||
$(document.body).removeClass(ClassName.OPEN)
|
||||
this._resetAdjustments()
|
||||
this._resetScrollbar()
|
||||
$(this._element).trigger(Event.HIDDEN)
|
||||
})
|
||||
}
|
||||
|
||||
_removeBackdrop() {
|
||||
if (this._backdrop) {
|
||||
$(this._backdrop).remove()
|
||||
this._backdrop = null
|
||||
}
|
||||
}
|
||||
|
||||
_showBackdrop(callback) {
|
||||
const animate = $(this._element).hasClass(ClassName.FADE) ?
|
||||
ClassName.FADE : ''
|
||||
|
||||
if (this._isShown && this._config.backdrop) {
|
||||
const doAnimate = Util.supportsTransitionEnd() && animate
|
||||
|
||||
this._backdrop = document.createElement('div')
|
||||
this._backdrop.className = ClassName.BACKDROP
|
||||
|
||||
if (animate) {
|
||||
$(this._backdrop).addClass(animate)
|
||||
}
|
||||
|
||||
$(this._backdrop).appendTo(document.body)
|
||||
|
||||
$(this._element).on(Event.CLICK_DISMISS, (event) => {
|
||||
if (this._ignoreBackdropClick) {
|
||||
this._ignoreBackdropClick = false
|
||||
return
|
||||
}
|
||||
if (event.target !== event.currentTarget) {
|
||||
return
|
||||
}
|
||||
if (this._config.backdrop === 'static') {
|
||||
this._element.focus()
|
||||
} else {
|
||||
this.hide()
|
||||
}
|
||||
})
|
||||
|
||||
if (doAnimate) {
|
||||
Util.reflow(this._backdrop)
|
||||
}
|
||||
|
||||
$(this._backdrop).addClass(ClassName.SHOW)
|
||||
|
||||
if (!callback) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!doAnimate) {
|
||||
callback()
|
||||
return
|
||||
}
|
||||
|
||||
$(this._backdrop)
|
||||
.one(Util.TRANSITION_END, callback)
|
||||
.emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
|
||||
|
||||
} else if (!this._isShown && this._backdrop) {
|
||||
$(this._backdrop).removeClass(ClassName.SHOW)
|
||||
|
||||
const callbackRemove = () => {
|
||||
this._removeBackdrop()
|
||||
if (callback) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
if (Util.supportsTransitionEnd() &&
|
||||
$(this._element).hasClass(ClassName.FADE)) {
|
||||
$(this._backdrop)
|
||||
.one(Util.TRANSITION_END, callbackRemove)
|
||||
.emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
|
||||
} else {
|
||||
callbackRemove()
|
||||
}
|
||||
|
||||
} else if (callback) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// the following methods are used to handle overflowing modals
|
||||
// todo (fat): these should probably be refactored out of modal.js
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
_adjustDialog() {
|
||||
const isModalOverflowing =
|
||||
this._element.scrollHeight > document.documentElement.clientHeight
|
||||
|
||||
if (!this._isBodyOverflowing && isModalOverflowing) {
|
||||
this._element.style.paddingLeft = `${this._scrollbarWidth}px`
|
||||
}
|
||||
|
||||
if (this._isBodyOverflowing && !isModalOverflowing) {
|
||||
this._element.style.paddingRight = `${this._scrollbarWidth}px`
|
||||
}
|
||||
}
|
||||
|
||||
_resetAdjustments() {
|
||||
this._element.style.paddingLeft = ''
|
||||
this._element.style.paddingRight = ''
|
||||
}
|
||||
|
||||
_checkScrollbar() {
|
||||
const rect = document.body.getBoundingClientRect()
|
||||
this._isBodyOverflowing = rect.left + rect.right < window.innerWidth
|
||||
this._scrollbarWidth = this._getScrollbarWidth()
|
||||
}
|
||||
|
||||
_setScrollbar() {
|
||||
if (this._isBodyOverflowing) {
|
||||
// Note: DOMNode.style.paddingRight returns the actual value or '' if not set
|
||||
// while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set
|
||||
|
||||
// Adjust fixed content padding
|
||||
$(Selector.FIXED_CONTENT).each((index, element) => {
|
||||
const actualPadding = $(element)[0].style.paddingRight
|
||||
const calculatedPadding = $(element).css('padding-right')
|
||||
$(element).data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
|
||||
})
|
||||
|
||||
// Adjust sticky content margin
|
||||
$(Selector.STICKY_CONTENT).each((index, element) => {
|
||||
const actualMargin = $(element)[0].style.marginRight
|
||||
const calculatedMargin = $(element).css('margin-right')
|
||||
$(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`)
|
||||
})
|
||||
|
||||
// Adjust navbar-toggler margin
|
||||
$(Selector.NAVBAR_TOGGLER).each((index, element) => {
|
||||
const actualMargin = $(element)[0].style.marginRight
|
||||
const calculatedMargin = $(element).css('margin-right')
|
||||
$(element).data('margin-right', actualMargin).css('margin-right', `${parseFloat(calculatedMargin) + this._scrollbarWidth}px`)
|
||||
})
|
||||
|
||||
// Adjust body padding
|
||||
const actualPadding = document.body.style.paddingRight
|
||||
const calculatedPadding = $('body').css('padding-right')
|
||||
$('body').data('padding-right', actualPadding).css('padding-right', `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`)
|
||||
}
|
||||
}
|
||||
|
||||
_resetScrollbar() {
|
||||
// Restore fixed content padding
|
||||
$(Selector.FIXED_CONTENT).each((index, element) => {
|
||||
const padding = $(element).data('padding-right')
|
||||
if (typeof padding !== 'undefined') {
|
||||
$(element).css('padding-right', padding).removeData('padding-right')
|
||||
}
|
||||
})
|
||||
|
||||
// Restore sticky content and navbar-toggler margin
|
||||
$(`${Selector.STICKY_CONTENT}, ${Selector.NAVBAR_TOGGLER}`).each((index, element) => {
|
||||
const margin = $(element).data('margin-right')
|
||||
if (typeof margin !== 'undefined') {
|
||||
$(element).css('margin-right', margin).removeData('margin-right')
|
||||
}
|
||||
})
|
||||
|
||||
// Restore body padding
|
||||
const padding = $('body').data('padding-right')
|
||||
if (typeof padding !== 'undefined') {
|
||||
$('body').css('padding-right', padding).removeData('padding-right')
|
||||
}
|
||||
}
|
||||
|
||||
_getScrollbarWidth() { // thx d.walsh
|
||||
const scrollDiv = document.createElement('div')
|
||||
scrollDiv.className = ClassName.SCROLLBAR_MEASURER
|
||||
document.body.appendChild(scrollDiv)
|
||||
const scrollbarWidth = scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth
|
||||
document.body.removeChild(scrollDiv)
|
||||
return scrollbarWidth
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config, relatedTarget) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = $.extend(
|
||||
{},
|
||||
Modal.Default,
|
||||
$(this).data(),
|
||||
typeof config === 'object' && config
|
||||
)
|
||||
|
||||
if (!data) {
|
||||
data = new Modal(this, _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config](relatedTarget)
|
||||
} else if (_config.show) {
|
||||
data.show(relatedTarget)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document).on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
let target
|
||||
const selector = Util.getSelectorFromElement(this)
|
||||
|
||||
if (selector) {
|
||||
target = $(selector)[0]
|
||||
}
|
||||
|
||||
const config = $(target).data(DATA_KEY) ?
|
||||
'toggle' : $.extend({}, $(target).data(), $(this).data())
|
||||
|
||||
if (this.tagName === 'A' || this.tagName === 'AREA') {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const $target = $(target).one(Event.SHOW, (showEvent) => {
|
||||
if (showEvent.isDefaultPrevented()) {
|
||||
// only register focus restorer if modal will actually get shown
|
||||
return
|
||||
}
|
||||
|
||||
$target.one(Event.HIDDEN, () => {
|
||||
if ($(this).is(':visible')) {
|
||||
this.focus()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
Modal._jQueryInterface.call($(target), config, this)
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Modal._jQueryInterface
|
||||
$.fn[NAME].Constructor = Modal
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Modal._jQueryInterface
|
||||
}
|
||||
|
||||
return Modal
|
||||
|
||||
})($)
|
||||
|
||||
export default Modal
|
||||
@ -1,194 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Tooltip from './tooltip'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): popover.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Popover = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'popover'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.popover'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const CLASS_PREFIX = 'bs-popover'
|
||||
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
|
||||
|
||||
const Default = $.extend({}, Tooltip.Default, {
|
||||
placement : 'right',
|
||||
trigger : 'click',
|
||||
content : '',
|
||||
template : '<div class="popover" role="tooltip">'
|
||||
+ '<div class="arrow"></div>'
|
||||
+ '<h3 class="popover-header"></h3>'
|
||||
+ '<div class="popover-body"></div></div>'
|
||||
})
|
||||
|
||||
const DefaultType = $.extend({}, Tooltip.DefaultType, {
|
||||
content : '(string|element|function)'
|
||||
})
|
||||
|
||||
const ClassName = {
|
||||
FADE : 'fade',
|
||||
SHOW : 'show'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
TITLE : '.popover-header',
|
||||
CONTENT : '.popover-body'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
HIDE : `hide${EVENT_KEY}`,
|
||||
HIDDEN : `hidden${EVENT_KEY}`,
|
||||
SHOW : `show${EVENT_KEY}`,
|
||||
SHOWN : `shown${EVENT_KEY}`,
|
||||
INSERTED : `inserted${EVENT_KEY}`,
|
||||
CLICK : `click${EVENT_KEY}`,
|
||||
FOCUSIN : `focusin${EVENT_KEY}`,
|
||||
FOCUSOUT : `focusout${EVENT_KEY}`,
|
||||
MOUSEENTER : `mouseenter${EVENT_KEY}`,
|
||||
MOUSELEAVE : `mouseleave${EVENT_KEY}`
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Popover extends Tooltip {
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
static get NAME() {
|
||||
return NAME
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
return DATA_KEY
|
||||
}
|
||||
|
||||
static get Event() {
|
||||
return Event
|
||||
}
|
||||
|
||||
static get EVENT_KEY() {
|
||||
return EVENT_KEY
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType
|
||||
}
|
||||
|
||||
|
||||
// overrides
|
||||
|
||||
isWithContent() {
|
||||
return this.getTitle() || this._getContent()
|
||||
}
|
||||
|
||||
addAttachmentClass(attachment) {
|
||||
$(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`)
|
||||
}
|
||||
|
||||
getTipElement() {
|
||||
this.tip = this.tip || $(this.config.template)[0]
|
||||
return this.tip
|
||||
}
|
||||
|
||||
setContent() {
|
||||
const $tip = $(this.getTipElement())
|
||||
|
||||
// we use append for html objects to maintain js events
|
||||
this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
|
||||
this.setElementContent($tip.find(Selector.CONTENT), this._getContent())
|
||||
|
||||
$tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
|
||||
}
|
||||
|
||||
// private
|
||||
|
||||
_getContent() {
|
||||
return this.element.getAttribute('data-content')
|
||||
|| (typeof this.config.content === 'function' ?
|
||||
this.config.content.call(this.element) :
|
||||
this.config.content)
|
||||
}
|
||||
|
||||
_cleanTipClass() {
|
||||
const $tip = $(this.getTipElement())
|
||||
const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
|
||||
if (tabClass !== null && tabClass.length > 0) {
|
||||
$tip.removeClass(tabClass.join(''))
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = typeof config === 'object' ? config : null
|
||||
|
||||
if (!data && /destroy|hide/.test(config)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Popover(this, _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Popover._jQueryInterface
|
||||
$.fn[NAME].Constructor = Popover
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Popover._jQueryInterface
|
||||
}
|
||||
|
||||
return Popover
|
||||
|
||||
})($)
|
||||
|
||||
export default Popover
|
||||
@ -1,340 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): scrollspy.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const ScrollSpy = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'scrollspy'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.scrollspy'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
|
||||
const Default = {
|
||||
offset : 10,
|
||||
method : 'auto',
|
||||
target : ''
|
||||
}
|
||||
|
||||
const DefaultType = {
|
||||
offset : 'number',
|
||||
method : 'string',
|
||||
target : '(string|element)'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
ACTIVATE : `activate${EVENT_KEY}`,
|
||||
SCROLL : `scroll${EVENT_KEY}`,
|
||||
LOAD_DATA_API : `load${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
DROPDOWN_ITEM : 'dropdown-item',
|
||||
DROPDOWN_MENU : 'dropdown-menu',
|
||||
ACTIVE : 'active'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
DATA_SPY : '[data-spy="scroll"]',
|
||||
ACTIVE : '.active',
|
||||
NAV_LIST_GROUP : '.nav, .list-group',
|
||||
NAV_LINKS : '.nav-link',
|
||||
NAV_ITEMS : '.nav-item',
|
||||
LIST_ITEMS : '.list-group-item',
|
||||
DROPDOWN : '.dropdown',
|
||||
DROPDOWN_ITEMS : '.dropdown-item',
|
||||
DROPDOWN_TOGGLE : '.dropdown-toggle'
|
||||
}
|
||||
|
||||
const OffsetMethod = {
|
||||
OFFSET : 'offset',
|
||||
POSITION : 'position'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class ScrollSpy {
|
||||
|
||||
constructor(element, config) {
|
||||
this._element = element
|
||||
this._scrollElement = element.tagName === 'BODY' ? window : element
|
||||
this._config = this._getConfig(config)
|
||||
this._selector = `${this._config.target} ${Selector.NAV_LINKS},`
|
||||
+ `${this._config.target} ${Selector.LIST_ITEMS},`
|
||||
+ `${this._config.target} ${Selector.DROPDOWN_ITEMS}`
|
||||
this._offsets = []
|
||||
this._targets = []
|
||||
this._activeTarget = null
|
||||
this._scrollHeight = 0
|
||||
|
||||
$(this._scrollElement).on(Event.SCROLL, (event) => this._process(event))
|
||||
|
||||
this.refresh()
|
||||
this._process()
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
refresh() {
|
||||
const autoMethod = this._scrollElement !== this._scrollElement.window ?
|
||||
OffsetMethod.POSITION : OffsetMethod.OFFSET
|
||||
|
||||
const offsetMethod = this._config.method === 'auto' ?
|
||||
autoMethod : this._config.method
|
||||
|
||||
const offsetBase = offsetMethod === OffsetMethod.POSITION ?
|
||||
this._getScrollTop() : 0
|
||||
|
||||
this._offsets = []
|
||||
this._targets = []
|
||||
|
||||
this._scrollHeight = this._getScrollHeight()
|
||||
|
||||
const targets = $.makeArray($(this._selector))
|
||||
|
||||
targets
|
||||
.map((element) => {
|
||||
let target
|
||||
const targetSelector = Util.getSelectorFromElement(element)
|
||||
|
||||
if (targetSelector) {
|
||||
target = $(targetSelector)[0]
|
||||
}
|
||||
|
||||
if (target) {
|
||||
const targetBCR = target.getBoundingClientRect()
|
||||
if (targetBCR.width || targetBCR.height) {
|
||||
// todo (fat): remove sketch reliance on jQuery position/offset
|
||||
return [
|
||||
$(target)[offsetMethod]().top + offsetBase,
|
||||
targetSelector
|
||||
]
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
.filter((item) => item)
|
||||
.sort((a, b) => a[0] - b[0])
|
||||
.forEach((item) => {
|
||||
this._offsets.push(item[0])
|
||||
this._targets.push(item[1])
|
||||
})
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
$(this._scrollElement).off(EVENT_KEY)
|
||||
|
||||
this._element = null
|
||||
this._scrollElement = null
|
||||
this._config = null
|
||||
this._selector = null
|
||||
this._offsets = null
|
||||
this._targets = null
|
||||
this._activeTarget = null
|
||||
this._scrollHeight = null
|
||||
}
|
||||
|
||||
|
||||
// private
|
||||
|
||||
_getConfig(config) {
|
||||
config = $.extend({}, Default, config)
|
||||
|
||||
if (typeof config.target !== 'string') {
|
||||
let id = $(config.target).attr('id')
|
||||
if (!id) {
|
||||
id = Util.getUID(NAME)
|
||||
$(config.target).attr('id', id)
|
||||
}
|
||||
config.target = `#${id}`
|
||||
}
|
||||
|
||||
Util.typeCheckConfig(NAME, config, DefaultType)
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_getScrollTop() {
|
||||
return this._scrollElement === window ?
|
||||
this._scrollElement.pageYOffset : this._scrollElement.scrollTop
|
||||
}
|
||||
|
||||
_getScrollHeight() {
|
||||
return this._scrollElement.scrollHeight || Math.max(
|
||||
document.body.scrollHeight,
|
||||
document.documentElement.scrollHeight
|
||||
)
|
||||
}
|
||||
|
||||
_getOffsetHeight() {
|
||||
return this._scrollElement === window ?
|
||||
window.innerHeight : this._scrollElement.getBoundingClientRect().height
|
||||
}
|
||||
|
||||
_process() {
|
||||
const scrollTop = this._getScrollTop() + this._config.offset
|
||||
const scrollHeight = this._getScrollHeight()
|
||||
const maxScroll = this._config.offset
|
||||
+ scrollHeight
|
||||
- this._getOffsetHeight()
|
||||
|
||||
if (this._scrollHeight !== scrollHeight) {
|
||||
this.refresh()
|
||||
}
|
||||
|
||||
if (scrollTop >= maxScroll) {
|
||||
const target = this._targets[this._targets.length - 1]
|
||||
|
||||
if (this._activeTarget !== target) {
|
||||
this._activate(target)
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
if (this._activeTarget && scrollTop < this._offsets[0] && this._offsets[0] > 0) {
|
||||
this._activeTarget = null
|
||||
this._clear()
|
||||
return
|
||||
}
|
||||
|
||||
for (let i = this._offsets.length; i--;) {
|
||||
const isActiveTarget = this._activeTarget !== this._targets[i]
|
||||
&& scrollTop >= this._offsets[i]
|
||||
&& (typeof this._offsets[i + 1] === 'undefined' ||
|
||||
scrollTop < this._offsets[i + 1])
|
||||
|
||||
if (isActiveTarget) {
|
||||
this._activate(this._targets[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_activate(target) {
|
||||
this._activeTarget = target
|
||||
|
||||
this._clear()
|
||||
|
||||
let queries = this._selector.split(',')
|
||||
// eslint-disable-next-line arrow-body-style
|
||||
queries = queries.map((selector) => {
|
||||
return `${selector}[data-target="${target}"],` +
|
||||
`${selector}[href="${target}"]`
|
||||
})
|
||||
|
||||
const $link = $(queries.join(','))
|
||||
|
||||
if ($link.hasClass(ClassName.DROPDOWN_ITEM)) {
|
||||
$link.closest(Selector.DROPDOWN).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
|
||||
$link.addClass(ClassName.ACTIVE)
|
||||
} else {
|
||||
// Set triggered link as active
|
||||
$link.addClass(ClassName.ACTIVE)
|
||||
// Set triggered links parents as active
|
||||
// With both <ul> and <nav> markup a parent is the previous sibling of any nav ancestor
|
||||
$link.parents(Selector.NAV_LIST_GROUP).prev(`${Selector.NAV_LINKS}, ${Selector.LIST_ITEMS}`).addClass(ClassName.ACTIVE)
|
||||
// Handle special case when .nav-link is inside .nav-item
|
||||
$link.parents(Selector.NAV_LIST_GROUP).prev(Selector.NAV_ITEMS).children(Selector.NAV_LINKS).addClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
||||
$(this._scrollElement).trigger(Event.ACTIVATE, {
|
||||
relatedTarget: target
|
||||
})
|
||||
}
|
||||
|
||||
_clear() {
|
||||
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = typeof config === 'object' && config
|
||||
|
||||
if (!data) {
|
||||
data = new ScrollSpy(this, _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(window).on(Event.LOAD_DATA_API, () => {
|
||||
const scrollSpys = $.makeArray($(Selector.DATA_SPY))
|
||||
|
||||
for (let i = scrollSpys.length; i--;) {
|
||||
const $spy = $(scrollSpys[i])
|
||||
ScrollSpy._jQueryInterface.call($spy, $spy.data())
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = ScrollSpy._jQueryInterface
|
||||
$.fn[NAME].Constructor = ScrollSpy
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return ScrollSpy._jQueryInterface
|
||||
}
|
||||
|
||||
return ScrollSpy
|
||||
|
||||
})($)
|
||||
|
||||
export default ScrollSpy
|
||||
@ -1,287 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): tab.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Tab = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'tab'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.tab'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const DATA_API_KEY = '.data-api'
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const TRANSITION_DURATION = 150
|
||||
|
||||
const Event = {
|
||||
HIDE : `hide${EVENT_KEY}`,
|
||||
HIDDEN : `hidden${EVENT_KEY}`,
|
||||
SHOW : `show${EVENT_KEY}`,
|
||||
SHOWN : `shown${EVENT_KEY}`,
|
||||
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
DROPDOWN_MENU : 'dropdown-menu',
|
||||
ACTIVE : 'active',
|
||||
DISABLED : 'disabled',
|
||||
FADE : 'fade',
|
||||
SHOW : 'show'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
DROPDOWN : '.dropdown',
|
||||
NAV_LIST_GROUP : '.nav, .list-group',
|
||||
ACTIVE : '.active',
|
||||
ACTIVE_UL : '> li > .active',
|
||||
DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
|
||||
DROPDOWN_TOGGLE : '.dropdown-toggle',
|
||||
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Tab {
|
||||
|
||||
constructor(element) {
|
||||
this._element = element
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
show() {
|
||||
if (this._element.parentNode &&
|
||||
this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
|
||||
$(this._element).hasClass(ClassName.ACTIVE) ||
|
||||
$(this._element).hasClass(ClassName.DISABLED)) {
|
||||
return
|
||||
}
|
||||
|
||||
let target
|
||||
let previous
|
||||
const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0]
|
||||
const selector = Util.getSelectorFromElement(this._element)
|
||||
|
||||
if (listElement) {
|
||||
const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE
|
||||
previous = $.makeArray($(listElement).find(itemSelector))
|
||||
previous = previous[previous.length - 1]
|
||||
}
|
||||
|
||||
const hideEvent = $.Event(Event.HIDE, {
|
||||
relatedTarget: this._element
|
||||
})
|
||||
|
||||
const showEvent = $.Event(Event.SHOW, {
|
||||
relatedTarget: previous
|
||||
})
|
||||
|
||||
if (previous) {
|
||||
$(previous).trigger(hideEvent)
|
||||
}
|
||||
|
||||
$(this._element).trigger(showEvent)
|
||||
|
||||
if (showEvent.isDefaultPrevented() ||
|
||||
hideEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
if (selector) {
|
||||
target = $(selector)[0]
|
||||
}
|
||||
|
||||
this._activate(
|
||||
this._element,
|
||||
listElement
|
||||
)
|
||||
|
||||
const complete = () => {
|
||||
const hiddenEvent = $.Event(Event.HIDDEN, {
|
||||
relatedTarget: this._element
|
||||
})
|
||||
|
||||
const shownEvent = $.Event(Event.SHOWN, {
|
||||
relatedTarget: previous
|
||||
})
|
||||
|
||||
$(previous).trigger(hiddenEvent)
|
||||
$(this._element).trigger(shownEvent)
|
||||
}
|
||||
|
||||
if (target) {
|
||||
this._activate(target, target.parentNode, complete)
|
||||
} else {
|
||||
complete()
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
$.removeData(this._element, DATA_KEY)
|
||||
this._element = null
|
||||
}
|
||||
|
||||
|
||||
// private
|
||||
|
||||
_activate(element, container, callback) {
|
||||
let activeElements
|
||||
if (container.nodeName === 'UL') {
|
||||
activeElements = $(container).find(Selector.ACTIVE_UL)
|
||||
} else {
|
||||
activeElements = $(container).children(Selector.ACTIVE)
|
||||
}
|
||||
|
||||
const active = activeElements[0]
|
||||
const isTransitioning = callback
|
||||
&& Util.supportsTransitionEnd()
|
||||
&& (active && $(active).hasClass(ClassName.FADE))
|
||||
|
||||
const complete = () => this._transitionComplete(
|
||||
element,
|
||||
active,
|
||||
isTransitioning,
|
||||
callback
|
||||
)
|
||||
|
||||
if (active && isTransitioning) {
|
||||
$(active)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
|
||||
} else {
|
||||
complete()
|
||||
}
|
||||
|
||||
if (active) {
|
||||
$(active).removeClass(ClassName.SHOW)
|
||||
}
|
||||
}
|
||||
|
||||
_transitionComplete(element, active, isTransitioning, callback) {
|
||||
if (active) {
|
||||
$(active).removeClass(ClassName.ACTIVE)
|
||||
|
||||
const dropdownChild = $(active.parentNode).find(
|
||||
Selector.DROPDOWN_ACTIVE_CHILD
|
||||
)[0]
|
||||
|
||||
if (dropdownChild) {
|
||||
$(dropdownChild).removeClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
||||
if (active.getAttribute('role') === 'tab') {
|
||||
active.setAttribute('aria-selected', false)
|
||||
}
|
||||
}
|
||||
|
||||
$(element).addClass(ClassName.ACTIVE)
|
||||
if (element.getAttribute('role') === 'tab') {
|
||||
element.setAttribute('aria-selected', true)
|
||||
}
|
||||
|
||||
if (isTransitioning) {
|
||||
Util.reflow(element)
|
||||
$(element).addClass(ClassName.SHOW)
|
||||
} else {
|
||||
$(element).removeClass(ClassName.FADE)
|
||||
}
|
||||
|
||||
if (element.parentNode &&
|
||||
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
|
||||
|
||||
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
|
||||
if (dropdownElement) {
|
||||
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
|
||||
}
|
||||
|
||||
element.setAttribute('aria-expanded', true)
|
||||
}
|
||||
|
||||
if (callback) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
const $this = $(this)
|
||||
let data = $this.data(DATA_KEY)
|
||||
|
||||
if (!data) {
|
||||
data = new Tab(this)
|
||||
$this.data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Data Api implementation
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$(document)
|
||||
.on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
|
||||
event.preventDefault()
|
||||
Tab._jQueryInterface.call($(this), 'show')
|
||||
})
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Tab._jQueryInterface
|
||||
$.fn[NAME].Constructor = Tab
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Tab._jQueryInterface
|
||||
}
|
||||
|
||||
return Tab
|
||||
|
||||
})($)
|
||||
|
||||
export default Tab
|
||||
@ -1,733 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
import Popper from 'popper.js'
|
||||
import Util from './util'
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): tooltip.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Tooltip = (() => {
|
||||
|
||||
/**
|
||||
* Check for Popper dependency
|
||||
* Popper - https://popper.js.org
|
||||
*/
|
||||
if (typeof Popper === 'undefined') {
|
||||
throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)')
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Constants
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const NAME = 'tooltip'
|
||||
const VERSION = '4.0.0-beta.2'
|
||||
const DATA_KEY = 'bs.tooltip'
|
||||
const EVENT_KEY = `.${DATA_KEY}`
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
const TRANSITION_DURATION = 150
|
||||
const CLASS_PREFIX = 'bs-tooltip'
|
||||
const BSCLS_PREFIX_REGEX = new RegExp(`(^|\\s)${CLASS_PREFIX}\\S+`, 'g')
|
||||
|
||||
const DefaultType = {
|
||||
animation : 'boolean',
|
||||
template : 'string',
|
||||
title : '(string|element|function)',
|
||||
trigger : 'string',
|
||||
delay : '(number|object)',
|
||||
html : 'boolean',
|
||||
selector : '(string|boolean)',
|
||||
placement : '(string|function)',
|
||||
offset : '(number|string)',
|
||||
container : '(string|element|boolean)',
|
||||
fallbackPlacement : '(string|array)'
|
||||
}
|
||||
|
||||
const AttachmentMap = {
|
||||
AUTO : 'auto',
|
||||
TOP : 'top',
|
||||
RIGHT : 'right',
|
||||
BOTTOM : 'bottom',
|
||||
LEFT : 'left'
|
||||
}
|
||||
|
||||
const Default = {
|
||||
animation : true,
|
||||
template : '<div class="tooltip" role="tooltip">'
|
||||
+ '<div class="arrow"></div>'
|
||||
+ '<div class="tooltip-inner"></div></div>',
|
||||
trigger : 'hover focus',
|
||||
title : '',
|
||||
delay : 0,
|
||||
html : false,
|
||||
selector : false,
|
||||
placement : 'top',
|
||||
offset : 0,
|
||||
container : false,
|
||||
fallbackPlacement : 'flip'
|
||||
}
|
||||
|
||||
const HoverState = {
|
||||
SHOW : 'show',
|
||||
OUT : 'out'
|
||||
}
|
||||
|
||||
const Event = {
|
||||
HIDE : `hide${EVENT_KEY}`,
|
||||
HIDDEN : `hidden${EVENT_KEY}`,
|
||||
SHOW : `show${EVENT_KEY}`,
|
||||
SHOWN : `shown${EVENT_KEY}`,
|
||||
INSERTED : `inserted${EVENT_KEY}`,
|
||||
CLICK : `click${EVENT_KEY}`,
|
||||
FOCUSIN : `focusin${EVENT_KEY}`,
|
||||
FOCUSOUT : `focusout${EVENT_KEY}`,
|
||||
MOUSEENTER : `mouseenter${EVENT_KEY}`,
|
||||
MOUSELEAVE : `mouseleave${EVENT_KEY}`
|
||||
}
|
||||
|
||||
const ClassName = {
|
||||
FADE : 'fade',
|
||||
SHOW : 'show'
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
TOOLTIP : '.tooltip',
|
||||
TOOLTIP_INNER : '.tooltip-inner',
|
||||
ARROW : '.arrow'
|
||||
}
|
||||
|
||||
const Trigger = {
|
||||
HOVER : 'hover',
|
||||
FOCUS : 'focus',
|
||||
CLICK : 'click',
|
||||
MANUAL : 'manual'
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Class Definition
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
class Tooltip {
|
||||
|
||||
constructor(element, config) {
|
||||
|
||||
// private
|
||||
this._isEnabled = true
|
||||
this._timeout = 0
|
||||
this._hoverState = ''
|
||||
this._activeTrigger = {}
|
||||
this._popper = null
|
||||
|
||||
// protected
|
||||
this.element = element
|
||||
this.config = this._getConfig(config)
|
||||
this.tip = null
|
||||
|
||||
this._setListeners()
|
||||
|
||||
}
|
||||
|
||||
|
||||
// getters
|
||||
|
||||
static get VERSION() {
|
||||
return VERSION
|
||||
}
|
||||
|
||||
static get Default() {
|
||||
return Default
|
||||
}
|
||||
|
||||
static get NAME() {
|
||||
return NAME
|
||||
}
|
||||
|
||||
static get DATA_KEY() {
|
||||
return DATA_KEY
|
||||
}
|
||||
|
||||
static get Event() {
|
||||
return Event
|
||||
}
|
||||
|
||||
static get EVENT_KEY() {
|
||||
return EVENT_KEY
|
||||
}
|
||||
|
||||
static get DefaultType() {
|
||||
return DefaultType
|
||||
}
|
||||
|
||||
|
||||
// public
|
||||
|
||||
enable() {
|
||||
this._isEnabled = true
|
||||
}
|
||||
|
||||
disable() {
|
||||
this._isEnabled = false
|
||||
}
|
||||
|
||||
toggleEnabled() {
|
||||
this._isEnabled = !this._isEnabled
|
||||
}
|
||||
|
||||
toggle(event) {
|
||||
if (!this._isEnabled) {
|
||||
return
|
||||
}
|
||||
|
||||
if (event) {
|
||||
const dataKey = this.constructor.DATA_KEY
|
||||
let context = $(event.currentTarget).data(dataKey)
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(
|
||||
event.currentTarget,
|
||||
this._getDelegateConfig()
|
||||
)
|
||||
$(event.currentTarget).data(dataKey, context)
|
||||
}
|
||||
|
||||
context._activeTrigger.click = !context._activeTrigger.click
|
||||
|
||||
if (context._isWithActiveTrigger()) {
|
||||
context._enter(null, context)
|
||||
} else {
|
||||
context._leave(null, context)
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
if ($(this.getTipElement()).hasClass(ClassName.SHOW)) {
|
||||
this._leave(null, this)
|
||||
return
|
||||
}
|
||||
|
||||
this._enter(null, this)
|
||||
}
|
||||
}
|
||||
|
||||
dispose() {
|
||||
clearTimeout(this._timeout)
|
||||
|
||||
$.removeData(this.element, this.constructor.DATA_KEY)
|
||||
|
||||
$(this.element).off(this.constructor.EVENT_KEY)
|
||||
$(this.element).closest('.modal').off('hide.bs.modal')
|
||||
|
||||
if (this.tip) {
|
||||
$(this.tip).remove()
|
||||
}
|
||||
|
||||
this._isEnabled = null
|
||||
this._timeout = null
|
||||
this._hoverState = null
|
||||
this._activeTrigger = null
|
||||
if (this._popper !== null) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
|
||||
this._popper = null
|
||||
this.element = null
|
||||
this.config = null
|
||||
this.tip = null
|
||||
}
|
||||
|
||||
show() {
|
||||
if ($(this.element).css('display') === 'none') {
|
||||
throw new Error('Please use show on visible elements')
|
||||
}
|
||||
|
||||
const showEvent = $.Event(this.constructor.Event.SHOW)
|
||||
if (this.isWithContent() && this._isEnabled) {
|
||||
$(this.element).trigger(showEvent)
|
||||
|
||||
const isInTheDom = $.contains(
|
||||
this.element.ownerDocument.documentElement,
|
||||
this.element
|
||||
)
|
||||
|
||||
if (showEvent.isDefaultPrevented() || !isInTheDom) {
|
||||
return
|
||||
}
|
||||
|
||||
const tip = this.getTipElement()
|
||||
const tipId = Util.getUID(this.constructor.NAME)
|
||||
|
||||
tip.setAttribute('id', tipId)
|
||||
this.element.setAttribute('aria-describedby', tipId)
|
||||
|
||||
this.setContent()
|
||||
|
||||
if (this.config.animation) {
|
||||
$(tip).addClass(ClassName.FADE)
|
||||
}
|
||||
|
||||
const placement = typeof this.config.placement === 'function' ?
|
||||
this.config.placement.call(this, tip, this.element) :
|
||||
this.config.placement
|
||||
|
||||
const attachment = this._getAttachment(placement)
|
||||
this.addAttachmentClass(attachment)
|
||||
|
||||
const container = this.config.container === false ? document.body : $(this.config.container)
|
||||
|
||||
$(tip).data(this.constructor.DATA_KEY, this)
|
||||
|
||||
if (!$.contains(this.element.ownerDocument.documentElement, this.tip)) {
|
||||
$(tip).appendTo(container)
|
||||
}
|
||||
|
||||
$(this.element).trigger(this.constructor.Event.INSERTED)
|
||||
|
||||
this._popper = new Popper(this.element, tip, {
|
||||
placement: attachment,
|
||||
modifiers: {
|
||||
offset: {
|
||||
offset: this.config.offset
|
||||
},
|
||||
flip: {
|
||||
behavior: this.config.fallbackPlacement
|
||||
},
|
||||
arrow: {
|
||||
element: Selector.ARROW
|
||||
}
|
||||
},
|
||||
onCreate: (data) => {
|
||||
if (data.originalPlacement !== data.placement) {
|
||||
this._handlePopperPlacementChange(data)
|
||||
}
|
||||
},
|
||||
onUpdate : (data) => {
|
||||
this._handlePopperPlacementChange(data)
|
||||
}
|
||||
})
|
||||
|
||||
$(tip).addClass(ClassName.SHOW)
|
||||
|
||||
// if this is a touch-enabled device we add extra
|
||||
// empty mouseover listeners to the body's immediate children;
|
||||
// only needed because of broken event delegation on iOS
|
||||
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
$('body').children().on('mouseover', null, $.noop)
|
||||
}
|
||||
|
||||
const complete = () => {
|
||||
if (this.config.animation) {
|
||||
this._fixTransition()
|
||||
}
|
||||
const prevHoverState = this._hoverState
|
||||
this._hoverState = null
|
||||
|
||||
$(this.element).trigger(this.constructor.Event.SHOWN)
|
||||
|
||||
if (prevHoverState === HoverState.OUT) {
|
||||
this._leave(null, this)
|
||||
}
|
||||
}
|
||||
|
||||
if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) {
|
||||
$(this.tip)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.emulateTransitionEnd(Tooltip._TRANSITION_DURATION)
|
||||
} else {
|
||||
complete()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hide(callback) {
|
||||
const tip = this.getTipElement()
|
||||
const hideEvent = $.Event(this.constructor.Event.HIDE)
|
||||
const complete = () => {
|
||||
if (this._hoverState !== HoverState.SHOW && tip.parentNode) {
|
||||
tip.parentNode.removeChild(tip)
|
||||
}
|
||||
|
||||
this._cleanTipClass()
|
||||
this.element.removeAttribute('aria-describedby')
|
||||
$(this.element).trigger(this.constructor.Event.HIDDEN)
|
||||
if (this._popper !== null) {
|
||||
this._popper.destroy()
|
||||
}
|
||||
|
||||
if (callback) {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
$(this.element).trigger(hideEvent)
|
||||
|
||||
if (hideEvent.isDefaultPrevented()) {
|
||||
return
|
||||
}
|
||||
|
||||
$(tip).removeClass(ClassName.SHOW)
|
||||
|
||||
// if this is a touch-enabled device we remove the extra
|
||||
// empty mouseover listeners we added for iOS support
|
||||
if ('ontouchstart' in document.documentElement) {
|
||||
$('body').children().off('mouseover', null, $.noop)
|
||||
}
|
||||
|
||||
this._activeTrigger[Trigger.CLICK] = false
|
||||
this._activeTrigger[Trigger.FOCUS] = false
|
||||
this._activeTrigger[Trigger.HOVER] = false
|
||||
|
||||
if (Util.supportsTransitionEnd() &&
|
||||
$(this.tip).hasClass(ClassName.FADE)) {
|
||||
|
||||
$(tip)
|
||||
.one(Util.TRANSITION_END, complete)
|
||||
.emulateTransitionEnd(TRANSITION_DURATION)
|
||||
|
||||
} else {
|
||||
complete()
|
||||
}
|
||||
|
||||
this._hoverState = ''
|
||||
|
||||
}
|
||||
|
||||
update() {
|
||||
if (this._popper !== null) {
|
||||
this._popper.scheduleUpdate()
|
||||
}
|
||||
}
|
||||
|
||||
// protected
|
||||
|
||||
isWithContent() {
|
||||
return Boolean(this.getTitle())
|
||||
}
|
||||
|
||||
addAttachmentClass(attachment) {
|
||||
$(this.getTipElement()).addClass(`${CLASS_PREFIX}-${attachment}`)
|
||||
}
|
||||
|
||||
getTipElement() {
|
||||
this.tip = this.tip || $(this.config.template)[0]
|
||||
return this.tip
|
||||
}
|
||||
|
||||
setContent() {
|
||||
const $tip = $(this.getTipElement())
|
||||
this.setElementContent($tip.find(Selector.TOOLTIP_INNER), this.getTitle())
|
||||
$tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
|
||||
}
|
||||
|
||||
setElementContent($element, content) {
|
||||
const html = this.config.html
|
||||
if (typeof content === 'object' && (content.nodeType || content.jquery)) {
|
||||
// content is a DOM node or a jQuery
|
||||
if (html) {
|
||||
if (!$(content).parent().is($element)) {
|
||||
$element.empty().append(content)
|
||||
}
|
||||
} else {
|
||||
$element.text($(content).text())
|
||||
}
|
||||
} else {
|
||||
$element[html ? 'html' : 'text'](content)
|
||||
}
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
let title = this.element.getAttribute('data-original-title')
|
||||
|
||||
if (!title) {
|
||||
title = typeof this.config.title === 'function' ?
|
||||
this.config.title.call(this.element) :
|
||||
this.config.title
|
||||
}
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
|
||||
// private
|
||||
|
||||
_getAttachment(placement) {
|
||||
return AttachmentMap[placement.toUpperCase()]
|
||||
}
|
||||
|
||||
_setListeners() {
|
||||
const triggers = this.config.trigger.split(' ')
|
||||
|
||||
triggers.forEach((trigger) => {
|
||||
if (trigger === 'click') {
|
||||
$(this.element).on(
|
||||
this.constructor.Event.CLICK,
|
||||
this.config.selector,
|
||||
(event) => this.toggle(event)
|
||||
)
|
||||
|
||||
} else if (trigger !== Trigger.MANUAL) {
|
||||
const eventIn = trigger === Trigger.HOVER ?
|
||||
this.constructor.Event.MOUSEENTER :
|
||||
this.constructor.Event.FOCUSIN
|
||||
const eventOut = trigger === Trigger.HOVER ?
|
||||
this.constructor.Event.MOUSELEAVE :
|
||||
this.constructor.Event.FOCUSOUT
|
||||
|
||||
$(this.element)
|
||||
.on(
|
||||
eventIn,
|
||||
this.config.selector,
|
||||
(event) => this._enter(event)
|
||||
)
|
||||
.on(
|
||||
eventOut,
|
||||
this.config.selector,
|
||||
(event) => this._leave(event)
|
||||
)
|
||||
}
|
||||
|
||||
$(this.element).closest('.modal').on(
|
||||
'hide.bs.modal',
|
||||
() => this.hide()
|
||||
)
|
||||
})
|
||||
|
||||
if (this.config.selector) {
|
||||
this.config = $.extend({}, this.config, {
|
||||
trigger : 'manual',
|
||||
selector : ''
|
||||
})
|
||||
} else {
|
||||
this._fixTitle()
|
||||
}
|
||||
}
|
||||
|
||||
_fixTitle() {
|
||||
const titleType = typeof this.element.getAttribute('data-original-title')
|
||||
if (this.element.getAttribute('title') ||
|
||||
titleType !== 'string') {
|
||||
this.element.setAttribute(
|
||||
'data-original-title',
|
||||
this.element.getAttribute('title') || ''
|
||||
)
|
||||
this.element.setAttribute('title', '')
|
||||
}
|
||||
}
|
||||
|
||||
_enter(event, context) {
|
||||
const dataKey = this.constructor.DATA_KEY
|
||||
|
||||
context = context || $(event.currentTarget).data(dataKey)
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(
|
||||
event.currentTarget,
|
||||
this._getDelegateConfig()
|
||||
)
|
||||
$(event.currentTarget).data(dataKey, context)
|
||||
}
|
||||
|
||||
if (event) {
|
||||
context._activeTrigger[
|
||||
event.type === 'focusin' ? Trigger.FOCUS : Trigger.HOVER
|
||||
] = true
|
||||
}
|
||||
|
||||
if ($(context.getTipElement()).hasClass(ClassName.SHOW) ||
|
||||
context._hoverState === HoverState.SHOW) {
|
||||
context._hoverState = HoverState.SHOW
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(context._timeout)
|
||||
|
||||
context._hoverState = HoverState.SHOW
|
||||
|
||||
if (!context.config.delay || !context.config.delay.show) {
|
||||
context.show()
|
||||
return
|
||||
}
|
||||
|
||||
context._timeout = setTimeout(() => {
|
||||
if (context._hoverState === HoverState.SHOW) {
|
||||
context.show()
|
||||
}
|
||||
}, context.config.delay.show)
|
||||
}
|
||||
|
||||
_leave(event, context) {
|
||||
const dataKey = this.constructor.DATA_KEY
|
||||
|
||||
context = context || $(event.currentTarget).data(dataKey)
|
||||
|
||||
if (!context) {
|
||||
context = new this.constructor(
|
||||
event.currentTarget,
|
||||
this._getDelegateConfig()
|
||||
)
|
||||
$(event.currentTarget).data(dataKey, context)
|
||||
}
|
||||
|
||||
if (event) {
|
||||
context._activeTrigger[
|
||||
event.type === 'focusout' ? Trigger.FOCUS : Trigger.HOVER
|
||||
] = false
|
||||
}
|
||||
|
||||
if (context._isWithActiveTrigger()) {
|
||||
return
|
||||
}
|
||||
|
||||
clearTimeout(context._timeout)
|
||||
|
||||
context._hoverState = HoverState.OUT
|
||||
|
||||
if (!context.config.delay || !context.config.delay.hide) {
|
||||
context.hide()
|
||||
return
|
||||
}
|
||||
|
||||
context._timeout = setTimeout(() => {
|
||||
if (context._hoverState === HoverState.OUT) {
|
||||
context.hide()
|
||||
}
|
||||
}, context.config.delay.hide)
|
||||
}
|
||||
|
||||
_isWithActiveTrigger() {
|
||||
for (const trigger in this._activeTrigger) {
|
||||
if (this._activeTrigger[trigger]) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
_getConfig(config) {
|
||||
config = $.extend(
|
||||
{},
|
||||
this.constructor.Default,
|
||||
$(this.element).data(),
|
||||
config
|
||||
)
|
||||
|
||||
if (typeof config.delay === 'number') {
|
||||
config.delay = {
|
||||
show : config.delay,
|
||||
hide : config.delay
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof config.title === 'number') {
|
||||
config.title = config.title.toString()
|
||||
}
|
||||
|
||||
if (typeof config.content === 'number') {
|
||||
config.content = config.content.toString()
|
||||
}
|
||||
|
||||
Util.typeCheckConfig(
|
||||
NAME,
|
||||
config,
|
||||
this.constructor.DefaultType
|
||||
)
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_getDelegateConfig() {
|
||||
const config = {}
|
||||
|
||||
if (this.config) {
|
||||
for (const key in this.config) {
|
||||
if (this.constructor.Default[key] !== this.config[key]) {
|
||||
config[key] = this.config[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return config
|
||||
}
|
||||
|
||||
_cleanTipClass() {
|
||||
const $tip = $(this.getTipElement())
|
||||
const tabClass = $tip.attr('class').match(BSCLS_PREFIX_REGEX)
|
||||
if (tabClass !== null && tabClass.length > 0) {
|
||||
$tip.removeClass(tabClass.join(''))
|
||||
}
|
||||
}
|
||||
|
||||
_handlePopperPlacementChange(data) {
|
||||
this._cleanTipClass()
|
||||
this.addAttachmentClass(this._getAttachment(data.placement))
|
||||
}
|
||||
|
||||
_fixTransition() {
|
||||
const tip = this.getTipElement()
|
||||
const initConfigAnimation = this.config.animation
|
||||
if (tip.getAttribute('x-placement') !== null) {
|
||||
return
|
||||
}
|
||||
$(tip).removeClass(ClassName.FADE)
|
||||
this.config.animation = false
|
||||
this.hide()
|
||||
this.show()
|
||||
this.config.animation = initConfigAnimation
|
||||
}
|
||||
|
||||
// static
|
||||
|
||||
static _jQueryInterface(config) {
|
||||
return this.each(function () {
|
||||
let data = $(this).data(DATA_KEY)
|
||||
const _config = typeof config === 'object' && config
|
||||
|
||||
if (!data && /dispose|hide/.test(config)) {
|
||||
return
|
||||
}
|
||||
|
||||
if (!data) {
|
||||
data = new Tooltip(this, _config)
|
||||
$(this).data(DATA_KEY, data)
|
||||
}
|
||||
|
||||
if (typeof config === 'string') {
|
||||
if (typeof data[config] === 'undefined') {
|
||||
throw new Error(`No method named "${config}"`)
|
||||
}
|
||||
data[config]()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
$.fn[NAME] = Tooltip._jQueryInterface
|
||||
$.fn[NAME].Constructor = Tooltip
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Tooltip._jQueryInterface
|
||||
}
|
||||
|
||||
return Tooltip
|
||||
|
||||
})($, Popper)
|
||||
|
||||
export default Tooltip
|
||||
@ -1,166 +0,0 @@
|
||||
import $ from 'jquery'
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Bootstrap (v4.0.0-beta.2): util.js
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Util = (() => {
|
||||
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* Private TransitionEnd Helpers
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
let transition = false
|
||||
|
||||
const MAX_UID = 1000000
|
||||
|
||||
const TransitionEndEvent = {
|
||||
WebkitTransition : 'webkitTransitionEnd',
|
||||
MozTransition : 'transitionend',
|
||||
OTransition : 'oTransitionEnd otransitionend',
|
||||
transition : 'transitionend'
|
||||
}
|
||||
|
||||
// shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
function toType(obj) {
|
||||
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
|
||||
}
|
||||
|
||||
function getSpecialTransitionEndEvent() {
|
||||
return {
|
||||
bindType: transition.end,
|
||||
delegateType: transition.end,
|
||||
handle(event) {
|
||||
if ($(event.target).is(this)) {
|
||||
return event.handleObj.handler.apply(this, arguments) // eslint-disable-line prefer-rest-params
|
||||
}
|
||||
return undefined // eslint-disable-line no-undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function transitionEndTest() {
|
||||
if (window.QUnit) {
|
||||
return false
|
||||
}
|
||||
|
||||
const el = document.createElement('bootstrap')
|
||||
|
||||
for (const name in TransitionEndEvent) {
|
||||
if (typeof el.style[name] !== 'undefined') {
|
||||
return {
|
||||
end: TransitionEndEvent[name]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
function transitionEndEmulator(duration) {
|
||||
let called = false
|
||||
|
||||
$(this).one(Util.TRANSITION_END, () => {
|
||||
called = true
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
if (!called) {
|
||||
Util.triggerTransitionEnd(this)
|
||||
}
|
||||
}, duration)
|
||||
|
||||
return this
|
||||
}
|
||||
|
||||
function setTransitionEndSupport() {
|
||||
transition = transitionEndTest()
|
||||
|
||||
$.fn.emulateTransitionEnd = transitionEndEmulator
|
||||
|
||||
if (Util.supportsTransitionEnd()) {
|
||||
$.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* --------------------------------------------------------------------------
|
||||
* Public Util Api
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const Util = {
|
||||
|
||||
TRANSITION_END: 'bsTransitionEnd',
|
||||
|
||||
getUID(prefix) {
|
||||
do {
|
||||
// eslint-disable-next-line no-bitwise
|
||||
prefix += ~~(Math.random() * MAX_UID) // "~~" acts like a faster Math.floor() here
|
||||
} while (document.getElementById(prefix))
|
||||
return prefix
|
||||
},
|
||||
|
||||
getSelectorFromElement(element) {
|
||||
let selector = element.getAttribute('data-target')
|
||||
if (!selector || selector === '#') {
|
||||
selector = element.getAttribute('href') || ''
|
||||
}
|
||||
|
||||
try {
|
||||
const $selector = $(document).find(selector)
|
||||
return $selector.length > 0 ? selector : null
|
||||
} catch (error) {
|
||||
return null
|
||||
}
|
||||
},
|
||||
|
||||
reflow(element) {
|
||||
return element.offsetHeight
|
||||
},
|
||||
|
||||
triggerTransitionEnd(element) {
|
||||
$(element).trigger(transition.end)
|
||||
},
|
||||
|
||||
supportsTransitionEnd() {
|
||||
return Boolean(transition)
|
||||
},
|
||||
|
||||
isElement(obj) {
|
||||
return (obj[0] || obj).nodeType
|
||||
},
|
||||
|
||||
typeCheckConfig(componentName, config, configTypes) {
|
||||
for (const property in configTypes) {
|
||||
if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
|
||||
const expectedTypes = configTypes[property]
|
||||
const value = config[property]
|
||||
const valueType = value && Util.isElement(value) ?
|
||||
'element' : toType(value)
|
||||
|
||||
if (!new RegExp(expectedTypes).test(valueType)) {
|
||||
throw new Error(
|
||||
`${componentName.toUpperCase()}: ` +
|
||||
`Option "${property}" provided type "${valueType}" ` +
|
||||
`but expected type "${expectedTypes}".`)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
setTransitionEndSupport()
|
||||
|
||||
return Util
|
||||
|
||||
})($)
|
||||
|
||||
export default Util
|
||||
@ -1,46 +0,0 @@
|
||||
{
|
||||
"env": {
|
||||
"es6": false,
|
||||
"qunit": true,
|
||||
"jquery": true
|
||||
},
|
||||
"globals": {
|
||||
"Util": false
|
||||
},
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 5,
|
||||
"sourceType": "script"
|
||||
},
|
||||
"extends": "../.eslintrc.json",
|
||||
"rules": {
|
||||
// Best Practices
|
||||
"consistent-return": "off",
|
||||
"no-alert": "off",
|
||||
"no-console": "off",
|
||||
"no-empty-function": "off",
|
||||
"no-extend-native": "off",
|
||||
"no-magic-numbers": "off",
|
||||
"vars-on-top": "off",
|
||||
|
||||
// NodeJS and CommonJS
|
||||
"global-require": "off",
|
||||
"no-process-env": "off",
|
||||
"no-process-exit": "off",
|
||||
"no-sync": "off",
|
||||
|
||||
// Stylistic Issues
|
||||
"brace-style": "off",
|
||||
"func-style": "off",
|
||||
"max-statements-per-line": "off",
|
||||
"object-curly-newline": "off",
|
||||
"object-property-newline": "off",
|
||||
"spaced-comment": "off",
|
||||
|
||||
// ECMAScript 6
|
||||
"no-var": "off",
|
||||
"object-shorthand": "off",
|
||||
"prefer-arrow-callback": "off",
|
||||
"prefer-template": "off",
|
||||
"prefer-rest-params": "off"
|
||||
}
|
||||
}
|
||||
@ -1,61 +0,0 @@
|
||||
## How does Bootstrap's test suite work?
|
||||
|
||||
Bootstrap uses [QUnit](https://qunitjs.com/), a powerful, easy-to-use JavaScript unit test framework. Each plugin has a file dedicated to its tests in `unit/<plugin-name>.js`.
|
||||
|
||||
* `unit/` contains the unit test files for each Bootstrap plugin.
|
||||
* `vendor/` contains third-party testing-related code (QUnit and jQuery).
|
||||
* `visual/` contains "visual" tests which are run interactively in real browsers and require manual verification by humans.
|
||||
|
||||
To run the unit test suite via [PhantomJS](http://phantomjs.org/), run `npm run js-test`.
|
||||
|
||||
To run the unit test suite via a real web browser, open `index.html` in the browser.
|
||||
|
||||
|
||||
## How do I add a new unit test?
|
||||
|
||||
1. Locate and open the file dedicated to the plugin which you need to add tests to (`unit/<plugin-name>.js`).
|
||||
2. Review the [QUnit API Documentation](https://api.qunitjs.com/) and use the existing tests as references for how to structure your new tests.
|
||||
3. Write the necessary unit test(s) for the new or revised functionality.
|
||||
4. Run `npm run js-test` to see the results of your newly-added test(s).
|
||||
|
||||
**Note:** Your new unit tests should fail before your changes are applied to the plugin, and should pass after your changes are applied to the plugin.
|
||||
|
||||
## What should a unit test look like?
|
||||
|
||||
* Each test should have a unique name clearly stating what unit is being tested.
|
||||
* Each test should test only one unit per test, although one test can include several assertions. Create multiple tests for multiple units of functionality.
|
||||
* Each test should begin with [`assert.expect`](https://api.qunitjs.com/assert/expect/) to ensure that the expected assertions are run.
|
||||
* Each test should follow the project's [JavaScript Code Guidelines](https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js)
|
||||
|
||||
### Example tests
|
||||
|
||||
```javascript
|
||||
// Synchronous test
|
||||
QUnit.test('should describe the unit being tested', function (assert) {
|
||||
assert.expect(1)
|
||||
var templateHTML = '<div class="alert alert-danger fade show">'
|
||||
+ '<a class="close" href="#" data-dismiss="alert">×</a>'
|
||||
+ '<p><strong>Template necessary for the test.</p>'
|
||||
+ '</div>'
|
||||
var $alert = $(templateHTML).appendTo('#qunit-fixture').bootstrapAlert()
|
||||
|
||||
$alert.find('.close').trigger('click')
|
||||
|
||||
// Make assertion
|
||||
assert.strictEqual($alert.hasClass('show'), false, 'remove .show class on .close click')
|
||||
})
|
||||
|
||||
// Asynchronous test
|
||||
QUnit.test('should describe the unit being tested', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
assert.ok(true, '"shown" event was fired after calling "show"')
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
```
|
||||
@ -1,129 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<title>Bootstrap Plugin Test Suite</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../assets/js/vendor/popper.min.js"></script>
|
||||
|
||||
<!-- QUnit -->
|
||||
<link rel="stylesheet" href="vendor/qunit.css" media="screen">
|
||||
<script src="vendor/qunit.js"></script>
|
||||
|
||||
<script>
|
||||
// Disable jQuery event aliases to ensure we don't accidentally use any of them
|
||||
[
|
||||
'blur',
|
||||
'focus',
|
||||
'focusin',
|
||||
'focusout',
|
||||
'resize',
|
||||
'scroll',
|
||||
'click',
|
||||
'dblclick',
|
||||
'mousedown',
|
||||
'mouseup',
|
||||
'mousemove',
|
||||
'mouseover',
|
||||
'mouseout',
|
||||
'mouseenter',
|
||||
'mouseleave',
|
||||
'change',
|
||||
'select',
|
||||
'submit',
|
||||
'keydown',
|
||||
'keypress',
|
||||
'keyup',
|
||||
'contextmenu'
|
||||
].forEach(function(eventAlias) {
|
||||
$.fn[eventAlias] = function() {
|
||||
throw new Error('Using the ".' + eventAlias + '()" method is not allowed, so that Bootstrap can be compatible with custom jQuery builds which exclude the "event aliases" module that defines said method. See https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md#js')
|
||||
}
|
||||
})
|
||||
|
||||
// Require assert.expect in each test
|
||||
QUnit.config.requireExpects = true
|
||||
|
||||
// See https://github.com/axemclion/grunt-saucelabs#test-result-details-with-qunit
|
||||
var log = []
|
||||
var testName
|
||||
|
||||
QUnit.done(function(testResults) {
|
||||
var tests = []
|
||||
for (var i = 0; i < log.length; i++) {
|
||||
var details = log[i]
|
||||
tests.push({
|
||||
name: details.name,
|
||||
result: details.result,
|
||||
expected: details.expected,
|
||||
actual: details.actual,
|
||||
source: details.source
|
||||
})
|
||||
}
|
||||
testResults.tests = tests
|
||||
|
||||
window.global_test_results = testResults
|
||||
})
|
||||
|
||||
QUnit.testStart(function(testDetails) {
|
||||
QUnit.log(function(details) {
|
||||
if (!details.result) {
|
||||
details.name = testDetails.name
|
||||
log.push(details)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Cleanup
|
||||
QUnit.testDone(function () {
|
||||
$('#modal-test, .modal-backdrop').remove()
|
||||
})
|
||||
|
||||
// Display fixture on-screen on iOS to avoid false positives
|
||||
// See https://github.com/twbs/bootstrap/pull/15955
|
||||
if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
|
||||
QUnit.begin(function() {
|
||||
$('#qunit-fixture').css({ top: 0, left: 0 })
|
||||
})
|
||||
|
||||
QUnit.done(function() {
|
||||
$('#qunit-fixture').css({ top: '', left: '' })
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Transpiled Plugins -->
|
||||
<script src="../dist/util.js"></script>
|
||||
<script src="../dist/alert.js"></script>
|
||||
<script src="../dist/button.js"></script>
|
||||
<script src="../dist/carousel.js"></script>
|
||||
<script src="../dist/collapse.js"></script>
|
||||
<script src="../dist/dropdown.js"></script>
|
||||
<script src="../dist/modal.js"></script>
|
||||
<script src="../dist/scrollspy.js"></script>
|
||||
<script src="../dist/tab.js"></script>
|
||||
<script src="../dist/tooltip.js"></script>
|
||||
<script src="../dist/popover.js"></script>
|
||||
|
||||
<!-- Unit Tests -->
|
||||
<script src="unit/alert.js"></script>
|
||||
<script src="unit/button.js"></script>
|
||||
<script src="unit/carousel.js"></script>
|
||||
<script src="unit/collapse.js"></script>
|
||||
<script src="unit/dropdown.js"></script>
|
||||
<script src="unit/modal.js"></script>
|
||||
<script src="unit/scrollspy.js"></script>
|
||||
<script src="unit/tab.js"></script>
|
||||
<script src="unit/tooltip.js"></script>
|
||||
<script src="unit/popover.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="qunit-container">
|
||||
<div id="qunit"></div>
|
||||
<div id="qunit-fixture"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,79 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('alert plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).alert, 'alert method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('alert', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapAlert = $.fn.alert.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.alert = $.fn.bootstrapAlert
|
||||
delete $.fn.bootstrapAlert
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.alert, 'undefined', 'alert was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $alert = $el.bootstrapAlert()
|
||||
assert.ok($alert instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($alert[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should fade element out on clicking .close', function (assert) {
|
||||
assert.expect(1)
|
||||
var alertHTML = '<div class="alert alert-danger fade show">'
|
||||
+ '<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>'
|
||||
|
||||
var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture'))
|
||||
|
||||
$alert.find('.close').trigger('click')
|
||||
|
||||
assert.strictEqual($alert.hasClass('show'), false, 'remove .show 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 show">'
|
||||
+ '<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>'
|
||||
var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
|
||||
|
||||
assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom')
|
||||
|
||||
$alert.find('.close').trigger('click')
|
||||
|
||||
assert.strictEqual($('#qunit-fixture').find('.alert').length, 0, 'element removed from dom')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire closed when close is prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
$('<div class="alert"/>')
|
||||
.on('close.bs.alert', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'close event fired')
|
||||
done()
|
||||
})
|
||||
.on('closed.bs.alert', function () {
|
||||
assert.ok(false, 'closed event fired')
|
||||
})
|
||||
.bootstrapAlert('close')
|
||||
})
|
||||
|
||||
})
|
||||
@ -1,176 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('button plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).button, 'button method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('button', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapButton = $.fn.button.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.button = $.fn.bootstrapButton
|
||||
delete $.fn.bootstrapButton
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.button, 'undefined', 'button was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $button = $el.bootstrapButton()
|
||||
assert.ok($button instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($button[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should toggle active', function (assert) {
|
||||
assert.expect(2)
|
||||
var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
|
||||
assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
|
||||
$btn.bootstrapButton('toggle')
|
||||
assert.ok($btn.hasClass('active'), 'btn has class active')
|
||||
})
|
||||
|
||||
QUnit.test('should toggle active when btn children are clicked', function (assert) {
|
||||
assert.expect(2)
|
||||
var $btn = $('<button class="btn" data-toggle="button">mdo</button>')
|
||||
var $inner = $('<i/>')
|
||||
$btn
|
||||
.append($inner)
|
||||
.appendTo('#qunit-fixture')
|
||||
assert.ok(!$btn.hasClass('active'), 'btn does not have active class')
|
||||
$inner.trigger('click')
|
||||
assert.ok($btn.hasClass('active'), 'btn has class active')
|
||||
})
|
||||
|
||||
QUnit.test('should toggle aria-pressed', function (assert) {
|
||||
assert.expect(2)
|
||||
var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
|
||||
assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
|
||||
$btn.bootstrapButton('toggle')
|
||||
assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
|
||||
})
|
||||
|
||||
QUnit.test('should toggle aria-pressed on buttons with container', function (assert) {
|
||||
assert.expect(1)
|
||||
var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
|
||||
'<button id="btn1" class="btn btn-secondary" type="button">One</button>' +
|
||||
'<button class="btn btn-secondary" type="button">Two</button>' +
|
||||
'</div>'
|
||||
$('#qunit-fixture').append(groupHTML)
|
||||
$('#btn1').bootstrapButton('toggle')
|
||||
assert.strictEqual($('#btn1').attr('aria-pressed'), 'true')
|
||||
})
|
||||
|
||||
QUnit.test('should toggle aria-pressed when btn children are clicked', function (assert) {
|
||||
assert.expect(2)
|
||||
var $btn = $('<button class="btn" data-toggle="button" aria-pressed="false">redux</button>')
|
||||
var $inner = $('<i/>')
|
||||
$btn
|
||||
.append($inner)
|
||||
.appendTo('#qunit-fixture')
|
||||
assert.strictEqual($btn.attr('aria-pressed'), 'false', 'btn aria-pressed state is false')
|
||||
$inner.trigger('click')
|
||||
assert.strictEqual($btn.attr('aria-pressed'), 'true', 'btn aria-pressed state is true')
|
||||
})
|
||||
|
||||
QUnit.test('should trigger input change event when toggled button has input field', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
|
||||
+ '<label class="btn btn-primary">'
|
||||
+ '<input type="radio" id="radio" autocomplete="off">Radio'
|
||||
+ '</label>'
|
||||
+ '</div>'
|
||||
var $group = $(groupHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$group.find('input').on('change', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'change event fired')
|
||||
done()
|
||||
})
|
||||
|
||||
$group.find('label').trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should check for closest matching toggle', function (assert) {
|
||||
assert.expect(12)
|
||||
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
|
||||
+ '<label class="btn btn-primary active">'
|
||||
+ '<input type="radio" name="options" id="option1" checked="true"> Option 1'
|
||||
+ '</label>'
|
||||
+ '<label class="btn btn-primary">'
|
||||
+ '<input type="radio" name="options" id="option2"> Option 2'
|
||||
+ '</label>'
|
||||
+ '<label class="btn btn-primary">'
|
||||
+ '<input type="radio" name="options" id="option3"> Option 3'
|
||||
+ '</label>'
|
||||
+ '</div>'
|
||||
var $group = $(groupHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var $btn1 = $group.children().eq(0)
|
||||
var $btn2 = $group.children().eq(1)
|
||||
|
||||
assert.ok($btn1.hasClass('active'), 'btn1 has active class')
|
||||
assert.ok($btn1.find('input').prop('checked'), 'btn1 is checked')
|
||||
assert.ok(!$btn2.hasClass('active'), 'btn2 does not have active class')
|
||||
assert.ok(!$btn2.find('input').prop('checked'), 'btn2 is not checked')
|
||||
$btn2.find('input').trigger('click')
|
||||
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
|
||||
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
|
||||
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
|
||||
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
|
||||
|
||||
$btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it
|
||||
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
|
||||
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
|
||||
assert.ok($btn2.hasClass('active'), 'btn2 has active class')
|
||||
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
|
||||
})
|
||||
|
||||
QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
|
||||
assert.expect(2)
|
||||
var groupHTML = '<div class="btn-group" data-toggle="buttons">'
|
||||
+ '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>'
|
||||
+ '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>'
|
||||
+ '</div>'
|
||||
var $group = $(groupHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var $btn1 = $group.children().eq(0)
|
||||
var $btn2 = $group.children().eq(1)
|
||||
|
||||
$btn1.find('input').trigger('click')
|
||||
assert.ok($btn1.is(':not([aria-pressed])'), 'label for nested checkbox input has not been given an aria-pressed attribute')
|
||||
|
||||
$btn2.find('input').trigger('click')
|
||||
assert.ok($btn2.is(':not([aria-pressed])'), 'label for nested radio input has not been given an aria-pressed attribute')
|
||||
})
|
||||
|
||||
QUnit.test('should handle disabled attribute on non-button elements', function (assert) {
|
||||
assert.expect(2)
|
||||
var groupHTML = ' <div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>'
|
||||
+ '<label class="btn btn-danger disabled" aria-disabled="true" disabled>'
|
||||
+ '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>'
|
||||
+ '</label>'
|
||||
+ '</div>'
|
||||
var $group = $(groupHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var $btn = $group.children().eq(0)
|
||||
var $input = $btn.children().eq(0)
|
||||
|
||||
$btn.trigger('click')
|
||||
assert.ok($btn.is(':not(.active)'), 'button did not become active')
|
||||
assert.ok(!$input.is(':checked'), 'checkbox did not get checked')
|
||||
})
|
||||
|
||||
})
|
||||
@ -1,921 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('carousel plugin')
|
||||
|
||||
QUnit.test('should be defined on jQuery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).carousel, 'carousel method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('carousel', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapCarousel = $.fn.carousel.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.carousel = $.fn.bootstrapCarousel
|
||||
delete $.fn.bootstrapCarousel
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.carousel, 'undefined', 'carousel was set back to undefined (orig value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>')
|
||||
$el.bootstrapCarousel()
|
||||
try {
|
||||
$el.bootstrapCarousel('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $carousel = $el.bootstrapCarousel()
|
||||
assert.ok($carousel instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($carousel[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should type check config options', function (assert) {
|
||||
assert.expect(2)
|
||||
|
||||
var message
|
||||
var expectedMessage = 'CAROUSEL: Option "interval" provided type "string" but expected type "(number|boolean)".'
|
||||
var config = {
|
||||
interval: 'fat sux'
|
||||
}
|
||||
|
||||
try {
|
||||
$('<div/>').bootstrapCarousel(config)
|
||||
} catch (e) {
|
||||
message = e.message
|
||||
}
|
||||
|
||||
assert.ok(message === expectedMessage, 'correct error message')
|
||||
|
||||
config = {
|
||||
keyboard: document.createElement('div')
|
||||
}
|
||||
expectedMessage = 'CAROUSEL: Option "keyboard" provided type "element" but expected type "boolean".'
|
||||
|
||||
try {
|
||||
$('<div/>').bootstrapCarousel(config)
|
||||
} catch (e) {
|
||||
message = e.message
|
||||
}
|
||||
|
||||
assert.ok(message === expectedMessage, 'correct error message')
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should not fire slid when slide is prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
$('<div class="carousel"/>')
|
||||
.on('slide.bs.carousel', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'slide event fired')
|
||||
done()
|
||||
})
|
||||
.on('slid.bs.carousel', function () {
|
||||
assert.ok(false, 'slid event fired')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should reset when slide is prevented', function (assert) {
|
||||
assert.expect(6)
|
||||
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide">'
|
||||
+ '<ol class="carousel-indicators">'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
|
||||
+ '</ol>'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
|
||||
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
|
||||
var done = assert.async()
|
||||
$carousel
|
||||
.one('slide.bs.carousel', function (e) {
|
||||
e.preventDefault()
|
||||
setTimeout(function () {
|
||||
assert.ok($carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
|
||||
assert.ok($carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
|
||||
$carousel.bootstrapCarousel('next')
|
||||
}, 0)
|
||||
})
|
||||
.one('slid.bs.carousel', function () {
|
||||
setTimeout(function () {
|
||||
assert.ok(!$carousel.find('.carousel-item:eq(0)').is('.active'), 'first item still active')
|
||||
assert.ok(!$carousel.find('.carousel-indicators li:eq(0)').is('.active'), 'first indicator still active')
|
||||
assert.ok($carousel.find('.carousel-item:eq(1)').is('.active'), 'second item active')
|
||||
assert.ok($carousel.find('.carousel-indicators li:eq(1)').is('.active'), 'second indicator active')
|
||||
done()
|
||||
}, 0)
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should fire slide event with direction', function (assert) {
|
||||
assert.expect(4)
|
||||
var carouselHTML = '<div id="myCarousel" class="carousel slide">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>First Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Second Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Third Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$carousel
|
||||
.one('slide.bs.carousel', function (e) {
|
||||
assert.ok(e.direction, 'direction present on next')
|
||||
assert.strictEqual(e.direction, 'left', 'direction is left on next')
|
||||
|
||||
$carousel
|
||||
.one('slide.bs.carousel', function (e) {
|
||||
assert.ok(e.direction, 'direction present on prev')
|
||||
assert.strictEqual(e.direction, 'right', 'direction is right on prev')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('prev')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should fire slid event with direction', function (assert) {
|
||||
assert.expect(4)
|
||||
var carouselHTML = '<div id="myCarousel" class="carousel slide">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>First Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Second Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Third Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function (e) {
|
||||
assert.ok(e.direction, 'direction present on next')
|
||||
assert.strictEqual(e.direction, 'left', 'direction is left on next')
|
||||
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function (e) {
|
||||
assert.ok(e.direction, 'direction present on prev')
|
||||
assert.strictEqual(e.direction, 'right', 'direction is right on prev')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('prev')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should fire slide event with relatedTarget', function (assert) {
|
||||
assert.expect(2)
|
||||
var template = '<div id="myCarousel" class="carousel slide">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>First Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Second Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Third Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$(template)
|
||||
.on('slide.bs.carousel', function (e) {
|
||||
assert.ok(e.relatedTarget, 'relatedTarget present')
|
||||
assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should fire slid event with relatedTarget', function (assert) {
|
||||
assert.expect(2)
|
||||
var template = '<div id="myCarousel" class="carousel slide">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>First Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Second Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Third Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$(template)
|
||||
.on('slid.bs.carousel', function (e) {
|
||||
assert.ok(e.relatedTarget, 'relatedTarget present')
|
||||
assert.ok($(e.relatedTarget).hasClass('carousel-item'), 'relatedTarget has class "item"')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should fire slid and slide events with from and to', function (assert) {
|
||||
assert.expect(4)
|
||||
var template = '<div id="myCarousel" class="carousel slide">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>First Thumbnail label</h4>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Second Thumbnail label</h4>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Third Thumbnail label</h4>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
|
||||
var done = assert.async()
|
||||
$(template)
|
||||
.on('slid.bs.carousel', function (e) {
|
||||
assert.ok(typeof e.from !== 'undefined', 'from present')
|
||||
assert.ok(typeof e.to !== 'undefined', 'to present')
|
||||
$(this).off()
|
||||
done()
|
||||
})
|
||||
.on('slide.bs.carousel', function (e) {
|
||||
assert.ok(typeof e.from !== 'undefined', 'from present')
|
||||
assert.ok(typeof e.to !== 'undefined', 'to present')
|
||||
$(this).off('slide.bs.carousel')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should set interval from data attribute', function (assert) {
|
||||
assert.expect(4)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel slide">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>First Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Second Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '<div class="carousel-caption">'
|
||||
+ '<h4>Third Thumbnail label</h4>'
|
||||
+ '<p>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.</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
var $carousel = $(templateHTML)
|
||||
$carousel.attr('data-interval', 1814)
|
||||
|
||||
$carousel.appendTo('body')
|
||||
$('[data-slide]').first().trigger('click')
|
||||
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814)
|
||||
$carousel.remove()
|
||||
|
||||
$carousel.appendTo('body').attr('data-modal', 'foobar')
|
||||
$('[data-slide]').first().trigger('click')
|
||||
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'even if there is an data-modal attribute set')
|
||||
$carousel.remove()
|
||||
|
||||
$carousel.appendTo('body')
|
||||
$('[data-slide]').first().trigger('click')
|
||||
$carousel.attr('data-interval', 1860)
|
||||
$('[data-slide]').first().trigger('click')
|
||||
assert.strictEqual($carousel.data('bs.carousel')._config.interval, 1814, 'attributes should be read only on initialization')
|
||||
$carousel.remove()
|
||||
|
||||
$carousel.attr('data-interval', false)
|
||||
$carousel.appendTo('body')
|
||||
$carousel.bootstrapCarousel(1)
|
||||
assert.strictEqual($carousel.data('bs.carousel')._config.interval, false, 'data attribute has higher priority than default options')
|
||||
$carousel.remove()
|
||||
})
|
||||
|
||||
QUnit.test('should skip over non-items when using item indices', function (assert) {
|
||||
assert.expect(2)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<script type="text/x-metamorph" id="thingy"/>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
|
||||
|
||||
$template.bootstrapCarousel(1)
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
|
||||
})
|
||||
|
||||
QUnit.test('should skip over non-items when using next/prev methods', function (assert) {
|
||||
assert.expect(2)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<script type="text/x-metamorph" id="thingy"/>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
|
||||
|
||||
$template.bootstrapCarousel('next')
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
|
||||
})
|
||||
|
||||
QUnit.test('should go to previous item if left arrow key is pressed', function (assert) {
|
||||
assert.expect(2)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div id="first" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="second" class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="third" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
|
||||
|
||||
$template.trigger($.Event('keydown', { which: 37 }))
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
|
||||
})
|
||||
|
||||
QUnit.test('should go to next item if right arrow key is pressed', function (assert) {
|
||||
assert.expect(2)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div id="first" class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="second" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="third" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
|
||||
|
||||
$template.trigger($.Event('keydown', { which: 39 }))
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
|
||||
})
|
||||
|
||||
QUnit.test('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', function (assert) {
|
||||
assert.expect(2)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div id="first" class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
var done = assert.async()
|
||||
|
||||
var eventArrowDown = $.Event('keydown', { which: 40 })
|
||||
var eventArrowUp = $.Event('keydown', { which: 38 })
|
||||
|
||||
$template.one('keydown', function (event) {
|
||||
assert.strictEqual(event.isDefaultPrevented(), false)
|
||||
})
|
||||
|
||||
$template.trigger(eventArrowDown)
|
||||
|
||||
$template.one('keydown', function (event) {
|
||||
assert.strictEqual(event.isDefaultPrevented(), false)
|
||||
done()
|
||||
})
|
||||
|
||||
$template.trigger(eventArrowUp)
|
||||
})
|
||||
|
||||
QUnit.test('should support disabling the keyboard navigation', function (assert) {
|
||||
assert.expect(3)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div id="first" class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="second" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="third" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
|
||||
|
||||
$template.trigger($.Event('keydown', { which: 39 }))
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press')
|
||||
|
||||
$template.trigger($.Event('keydown', { which: 37 }))
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press')
|
||||
})
|
||||
|
||||
QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
|
||||
assert.expect(7)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div id="first" class="carousel-item active">'
|
||||
+ '<img alt="">'
|
||||
+ '<input type="text" id="in-put">'
|
||||
+ '<textarea id="text-area"></textarea>'
|
||||
+ '</div>'
|
||||
+ '<div id="second" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '<div id="third" class="carousel-item">'
|
||||
+ '<img alt="">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
var $input = $template.find('#in-put')
|
||||
var $textarea = $template.find('#text-area')
|
||||
|
||||
assert.strictEqual($input.length, 1, 'found <input>')
|
||||
assert.strictEqual($textarea.length, 1, 'found <textarea>')
|
||||
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
|
||||
|
||||
|
||||
$input.trigger($.Event('keydown', { which: 39 }))
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>')
|
||||
|
||||
$input.trigger($.Event('keydown', { which: 37 }))
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>')
|
||||
|
||||
|
||||
$textarea.trigger($.Event('keydown', { which: 39 }))
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>')
|
||||
|
||||
$textarea.trigger($.Event('keydown', { which: 37 }))
|
||||
assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>')
|
||||
})
|
||||
|
||||
QUnit.test('should wrap around from end to start when wrap option is true', function (assert) {
|
||||
assert.expect(3)
|
||||
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
|
||||
+ '<ol class="carousel-indicators">'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
|
||||
+ '</ol>'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active" id="one">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="two">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="three">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
|
||||
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function () {
|
||||
assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function () {
|
||||
assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function () {
|
||||
assert.strictEqual(getActiveId(), 'one', 'carousel wrapped around and slid from 3rd to 1st slide')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should wrap around from start to end when wrap option is true', function (assert) {
|
||||
assert.expect(1)
|
||||
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">'
|
||||
+ '<ol class="carousel-indicators">'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
|
||||
+ '</ol>'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active" id="one">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="two">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="three">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
|
||||
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$carousel
|
||||
.on('slid.bs.carousel', function () {
|
||||
assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'three', 'carousel wrapped around and slid from 1st to 3rd slide')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('prev')
|
||||
})
|
||||
|
||||
QUnit.test('should stay at the end when the next method is called and wrap is false', function (assert) {
|
||||
assert.expect(3)
|
||||
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
|
||||
+ '<ol class="carousel-indicators">'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
|
||||
+ '</ol>'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active" id="one">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="two">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="three">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
|
||||
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') }
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function () {
|
||||
assert.strictEqual(getActiveId(), 'two', 'carousel slid from 1st to 2nd slide')
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function () {
|
||||
assert.strictEqual(getActiveId(), 'three', 'carousel slid from 2nd to 3rd slide')
|
||||
$carousel
|
||||
.one('slid.bs.carousel', function () {
|
||||
assert.ok(false, 'carousel slid when it should not have slid')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
assert.strictEqual(getActiveId(), 'three', 'carousel did not wrap around and stayed on 3rd slide')
|
||||
done()
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
.bootstrapCarousel('next')
|
||||
})
|
||||
|
||||
QUnit.test('should stay at the start when the prev method is called and wrap is false', function (assert) {
|
||||
assert.expect(1)
|
||||
var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">'
|
||||
+ '<ol class="carousel-indicators">'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="1"/>'
|
||||
+ '<li data-target="#carousel-example-generic" data-slide-to="2"/>'
|
||||
+ '</ol>'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div class="carousel-item active" id="one">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="two">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '<div class="carousel-item" id="three">'
|
||||
+ '<div class="carousel-caption"/>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>'
|
||||
+ '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>'
|
||||
+ '</div>'
|
||||
var $carousel = $(carouselHTML)
|
||||
|
||||
$carousel
|
||||
.on('slid.bs.carousel', function () {
|
||||
assert.ok(false, 'carousel slid when it should not have slid')
|
||||
})
|
||||
.bootstrapCarousel('prev')
|
||||
assert.strictEqual($carousel.find('.carousel-item.active').attr('id'), 'one', 'carousel did not wrap around and stayed on 1st slide')
|
||||
})
|
||||
|
||||
QUnit.test('should not prevent keydown for inputs and textareas', function (assert) {
|
||||
assert.expect(2)
|
||||
var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">'
|
||||
+ '<div class="carousel-inner">'
|
||||
+ '<div id="first" class="carousel-item">'
|
||||
+ '<input type="text" id="inputText" />'
|
||||
+ '</div>'
|
||||
+ '<div id="second" class="carousel-item active">'
|
||||
+ '<textarea id="txtArea"></textarea>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $template = $(templateHTML)
|
||||
var done = assert.async()
|
||||
$template.appendTo('#qunit-fixture')
|
||||
var $inputText = $template.find('#inputText')
|
||||
var $textArea = $template.find('#txtArea')
|
||||
$template.bootstrapCarousel()
|
||||
|
||||
var eventKeyDown = $.Event('keydown', { which: 65 }) // 65 for "a"
|
||||
$inputText.on('keydown', function (event) {
|
||||
assert.strictEqual(event.isDefaultPrevented(), false)
|
||||
})
|
||||
$inputText.trigger(eventKeyDown)
|
||||
|
||||
$textArea.on('keydown', function (event) {
|
||||
assert.strictEqual(event.isDefaultPrevented(), false)
|
||||
done()
|
||||
})
|
||||
$textArea.trigger(eventKeyDown)
|
||||
})
|
||||
|
||||
QUnit.test('Should not go to the next item when the carousel is not visible', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var html = '<div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">'
|
||||
+ ' <div class="carousel-inner">'
|
||||
+ ' <div id="firstItem" class="carousel-item active">'
|
||||
+ ' <img alt="">'
|
||||
+ ' </div>'
|
||||
+ ' <div class="carousel-item">'
|
||||
+ ' <img alt="">'
|
||||
+ ' </div>'
|
||||
+ ' <div class="carousel-item">'
|
||||
+ ' <img alt="">'
|
||||
+ ' </div>'
|
||||
+ ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ ' <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ '</div>'
|
||||
var $html = $(html)
|
||||
$html
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapCarousel()
|
||||
|
||||
var $firstItem = $('#firstItem')
|
||||
setTimeout(function () {
|
||||
assert.ok($firstItem.hasClass('active'))
|
||||
$html
|
||||
.bootstrapCarousel('dispose')
|
||||
.attr('style', 'visibility: hidden;')
|
||||
.bootstrapCarousel()
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($firstItem.hasClass('active'))
|
||||
done()
|
||||
}, 80)
|
||||
}, 80)
|
||||
})
|
||||
|
||||
QUnit.test('Should not go to the next item when the parent of the carousel is not visible', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var html = '<div id="parent" style="display: none;">'
|
||||
+ ' <div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">'
|
||||
+ ' <div class="carousel-inner">'
|
||||
+ ' <div id="firstItem" class="carousel-item active">'
|
||||
+ ' <img alt="">'
|
||||
+ ' </div>'
|
||||
+ ' <div class="carousel-item">'
|
||||
+ ' <img alt="">'
|
||||
+ ' </div>'
|
||||
+ ' <div class="carousel-item">'
|
||||
+ ' <img alt="">'
|
||||
+ ' </div>'
|
||||
+ ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>'
|
||||
+ ' <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>'
|
||||
+ ' </div>'
|
||||
+ '</div>'
|
||||
var $html = $(html)
|
||||
$html.appendTo('#qunit-fixture')
|
||||
var $parent = $html.find('#parent')
|
||||
var $carousel = $html.find('#myCarousel')
|
||||
$carousel.bootstrapCarousel()
|
||||
var $firstItem = $('#firstItem')
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($firstItem.hasClass('active'))
|
||||
$carousel.bootstrapCarousel('dispose')
|
||||
$parent.attr('style', 'visibility: hidden;')
|
||||
$carousel.bootstrapCarousel()
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($firstItem.hasClass('active'))
|
||||
done()
|
||||
}, 80)
|
||||
}, 80)
|
||||
})
|
||||
})
|
||||
@ -1,745 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('collapse plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).collapse, 'collapse method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('collapse', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapCollapse = $.fn.collapse.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.collapse = $.fn.bootstrapCollapse
|
||||
delete $.fn.bootstrapCollapse
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.collapse, 'undefined', 'collapse was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>')
|
||||
$el.bootstrapCollapse()
|
||||
try {
|
||||
$el.bootstrapCollapse('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $collapse = $el.bootstrapCollapse()
|
||||
assert.ok($collapse instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($collapse[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should show a collapsed element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div class="collapse"/>').bootstrapCollapse('show')
|
||||
|
||||
assert.ok($el.hasClass('show'), 'has class "show"')
|
||||
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should show multiple collapsed elements', function (assert) {
|
||||
assert.expect(4)
|
||||
var done = assert.async()
|
||||
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href=".multi"/>').appendTo('#qunit-fixture')
|
||||
var $el = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
|
||||
var $el2 = $('<div class="collapse multi"/>').appendTo('#qunit-fixture')
|
||||
$el.one('shown.bs.collapse', function () {
|
||||
assert.ok($el.hasClass('show'), 'has class "show"')
|
||||
assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
|
||||
})
|
||||
$el2.one('shown.bs.collapse', function () {
|
||||
assert.ok($el2.hasClass('show'), 'has class "show"')
|
||||
assert.ok(!/height/i.test($el2.attr('style')), 'has height reset')
|
||||
done()
|
||||
})
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should collapse only the first collapse', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var html = [
|
||||
'<div class="panel-group" id="accordion1">',
|
||||
'<div class="panel">',
|
||||
'<div id="collapse1" class="collapse"/>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<div class="panel-group" id="accordion2">',
|
||||
'<div class="panel">',
|
||||
'<div id="collapse2" class="collapse show"/>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('')
|
||||
$(html).appendTo('#qunit-fixture')
|
||||
var $el1 = $('#collapse1')
|
||||
var $el2 = $('#collapse2')
|
||||
$el1.one('shown.bs.collapse', function () {
|
||||
assert.ok($el1.hasClass('show'))
|
||||
assert.ok($el2.hasClass('show'))
|
||||
done()
|
||||
}).bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
QUnit.test('should hide a collapsed element', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div class="collapse"/>').bootstrapCollapse('hide')
|
||||
|
||||
assert.ok(!$el.hasClass('show'), 'does not have class "show"')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire shown when show is prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="collapse"/>')
|
||||
.on('show.bs.collapse', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'show event fired')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok(false, 'shown event fired')
|
||||
})
|
||||
.bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
QUnit.test('should reset style to auto after finishing opening collapse', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="collapse" style="height: 0px"/>')
|
||||
.on('show.bs.collapse', function () {
|
||||
assert.strictEqual(this.style.height, '0px', 'height is 0px')
|
||||
})
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.strictEqual(this.style.height, '', 'height is auto')
|
||||
done()
|
||||
})
|
||||
.bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
QUnit.test('should reset style to auto after finishing closing collapse', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="collapse"/>')
|
||||
.on('shown.bs.collapse', function () {
|
||||
$(this).bootstrapCollapse('hide')
|
||||
})
|
||||
.on('hidden.bs.collapse', function () {
|
||||
assert.strictEqual(this.style.height, '', 'height is auto')
|
||||
done()
|
||||
})
|
||||
.bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
QUnit.test('should remove "collapsed" class from target when collapse is shown', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok(!$target.hasClass('collapsed'), 'target does not have collapsed class')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should add "collapsed" class to target when collapse is hidden', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1" class="show"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.collapse', function () {
|
||||
assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should remove "collapsed" class from all triggers targeting the collapse when the collapse is shown', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok(!$target.hasClass('collapsed'), 'target trigger does not have collapsed class')
|
||||
assert.ok(!$alt.hasClass('collapsed'), 'alt trigger does not have collapsed class')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should add "collapsed" class to all triggers targeting the collapse when the collapse is hidden', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
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="show"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.collapse', function () {
|
||||
assert.ok($target.hasClass('collapsed'), 'target has collapsed class')
|
||||
assert.ok($alt.hasClass('collapsed'), 'alt trigger has collapsed class')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not close a collapse when initialized with "show" option if already shown', function (assert) {
|
||||
assert.expect(0)
|
||||
var done = assert.async()
|
||||
|
||||
var $test = $('<div id="test1" class="show"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hide.bs.collapse', function () {
|
||||
assert.ok(false)
|
||||
})
|
||||
|
||||
$test.bootstrapCollapse('show')
|
||||
|
||||
setTimeout(done, 0)
|
||||
})
|
||||
|
||||
QUnit.test('should open a collapse when initialized with "show" option if not already shown', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $test = $('<div id="test1" />')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('show.bs.collapse', function () {
|
||||
assert.ok(true)
|
||||
})
|
||||
|
||||
$test.bootstrapCollapse('show')
|
||||
|
||||
setTimeout(done, 0)
|
||||
})
|
||||
|
||||
QUnit.test('should not show a collapse when initialized with "hide" option if already hidden', function (assert) {
|
||||
assert.expect(0)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="collapse"></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('show.bs.collapse', function () {
|
||||
assert.ok(false, 'showing a previously-uninitialized hidden collapse when the "hide" method is called')
|
||||
})
|
||||
.bootstrapCollapse('hide')
|
||||
|
||||
setTimeout(done, 0)
|
||||
})
|
||||
|
||||
QUnit.test('should hide a collapse when initialized with "hide" option if not already hidden', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="collapse show"></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hide.bs.collapse', function () {
|
||||
assert.ok(true, 'hiding a previously-uninitialized shown collapse when the "hide" method is called')
|
||||
})
|
||||
.bootstrapCollapse('hide')
|
||||
|
||||
setTimeout(done, 0)
|
||||
})
|
||||
|
||||
QUnit.test('should remove "collapsed" class from active accordion target', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var accordionHTML = '<div id="accordion">'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '</div>'
|
||||
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
|
||||
|
||||
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0))
|
||||
|
||||
$('<div id="body1" class="show" data-parent="#accordion"/>').appendTo($groups.eq(0))
|
||||
|
||||
var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2" />').appendTo($groups.eq(1))
|
||||
|
||||
$('<div id="body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
|
||||
|
||||
var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3" />').appendTo($groups.eq(2))
|
||||
|
||||
$('<div id="body3" data-parent="#accordion"/>')
|
||||
.appendTo($groups.eq(2))
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
|
||||
assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
|
||||
assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
|
||||
|
||||
done()
|
||||
})
|
||||
|
||||
$target3.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should allow dots in data-parent', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var accordionHTML = '<div class="accordion">'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '</div>'
|
||||
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
|
||||
|
||||
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
|
||||
|
||||
$('<div id="body1" class="show" data-parent=".accordion"/>').appendTo($groups.eq(0))
|
||||
|
||||
var $target2 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body2"/>').appendTo($groups.eq(1))
|
||||
|
||||
$('<div id="body2" data-parent=".accordion"/>').appendTo($groups.eq(1))
|
||||
|
||||
var $target3 = $('<a class="collapsed" data-toggle="collapse" role="button" href="#body3"/>').appendTo($groups.eq(2))
|
||||
|
||||
$('<div id="body3" data-parent=".accordion"/>')
|
||||
.appendTo($groups.eq(2))
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok($target1.hasClass('collapsed'), 'inactive target 1 does have class "collapsed"')
|
||||
assert.ok($target2.hasClass('collapsed'), 'inactive target 2 does have class "collapsed"')
|
||||
assert.ok(!$target3.hasClass('collapsed'), 'active target 3 does not have class "collapsed"')
|
||||
|
||||
done()
|
||||
})
|
||||
|
||||
$target3.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="true" on trigger/control when collapse is shown', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on target is "true"')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="false" on trigger/control when collapse is hidden', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" href="#test1" aria-expanded="true"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1" class="show"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.collapse', function () {
|
||||
assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on target is "false"')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="true" on all triggers targeting the collapse when the collapse is shown', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
|
||||
var $alt = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1" aria-expanded="false"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.strictEqual($target.attr('aria-expanded'), 'true', 'aria-expanded on trigger/control is "true"')
|
||||
assert.strictEqual($alt.attr('aria-expanded'), 'true', 'aria-expanded on alternative trigger/control is "true"')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="false" on all triggers targeting the collapse when the collapse is hidden', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
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="show"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.collapse', function () {
|
||||
assert.strictEqual($target.attr('aria-expanded'), 'false', 'aria-expanded on trigger/control is "false"')
|
||||
assert.strictEqual($alt.attr('aria-expanded'), 'false', 'aria-expanded on alternative trigger/control is "false"')
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should change aria-expanded from active accordion trigger/control to "false" and set the trigger/control for the newly active one to "true"', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var accordionHTML = '<div id="accordion">'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '</div>'
|
||||
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
|
||||
|
||||
var $target1 = $('<a role="button" data-toggle="collapse" aria-expanded="true" href="#body1"/>').appendTo($groups.eq(0))
|
||||
|
||||
$('<div id="body1" class="show" data-parent="#accordion"/>').appendTo($groups.eq(0))
|
||||
|
||||
var $target2 = $('<a role="button" data-toggle="collapse" aria-expanded="false" href="#body2" class="collapsed" aria-expanded="false" />').appendTo($groups.eq(1))
|
||||
|
||||
$('<div id="body2" data-parent="#accordion"/>').appendTo($groups.eq(1))
|
||||
|
||||
var $target3 = $('<a class="collapsed" data-toggle="collapse" aria-expanded="false" role="button" href="#body3"/>').appendTo($groups.eq(2))
|
||||
|
||||
$('<div id="body3" data-parent="#accordion"/>')
|
||||
.appendTo($groups.eq(2))
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.strictEqual($target1.attr('aria-expanded'), 'false', 'inactive trigger/control 1 has aria-expanded="false"')
|
||||
assert.strictEqual($target2.attr('aria-expanded'), 'false', 'inactive trigger/control 2 has aria-expanded="false"')
|
||||
assert.strictEqual($target3.attr('aria-expanded'), 'true', 'active trigger/control 3 has aria-expanded="true"')
|
||||
|
||||
done()
|
||||
})
|
||||
|
||||
$target3.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire show event if show is prevented because other element is still transitioning', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var accordionHTML = '<div id="accordion">'
|
||||
+ '<div class="card"/>'
|
||||
+ '<div class="card"/>'
|
||||
+ '</div>'
|
||||
var showFired = false
|
||||
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
|
||||
|
||||
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
|
||||
|
||||
$('<div id="body1" class="collapse" data-parent="#accordion"/>')
|
||||
.appendTo($groups.eq(0))
|
||||
.on('show.bs.collapse', function () {
|
||||
showFired = true
|
||||
})
|
||||
|
||||
var $target2 = $('<a role="button" data-toggle="collapse" href="#body2"/>').appendTo($groups.eq(1))
|
||||
var $body2 = $('<div id="body2" class="collapse" data-parent="#accordion"/>').appendTo($groups.eq(1))
|
||||
|
||||
$target2.trigger('click')
|
||||
|
||||
$body2
|
||||
.toggleClass('show collapsing')
|
||||
.data('bs.collapse')._isTransitioning = 1
|
||||
|
||||
$target1.trigger('click')
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!showFired, 'show event did not fire')
|
||||
done()
|
||||
}, 1)
|
||||
})
|
||||
|
||||
QUnit.test('should add "collapsed" class to target when collapse is hidden via manual invocation', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1" class="show"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.collapse', function () {
|
||||
assert.ok($target.hasClass('collapsed'))
|
||||
done()
|
||||
})
|
||||
.bootstrapCollapse('hide')
|
||||
})
|
||||
|
||||
QUnit.test('should remove "collapsed" class from target when collapse is shown via manual invocation', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<a role="button" data-toggle="collapse" class="collapsed" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="test1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok(!$target.hasClass('collapsed'))
|
||||
done()
|
||||
})
|
||||
.bootstrapCollapse('show')
|
||||
})
|
||||
|
||||
QUnit.test('should allow accordion to use children other than card', function (assert) {
|
||||
assert.expect(4)
|
||||
var done = assert.async()
|
||||
var accordionHTML = '<div id="accordion">'
|
||||
+ '<div class="item">'
|
||||
+ '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
|
||||
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>'
|
||||
+ '</div>'
|
||||
+ '<div class="item">'
|
||||
+ '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
|
||||
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(accordionHTML).appendTo('#qunit-fixture')
|
||||
var $trigger = $('#linkTrigger')
|
||||
var $triggerTwo = $('#linkTriggerTwo')
|
||||
var $collapseOne = $('#collapseOne')
|
||||
var $collapseTwo = $('#collapseTwo')
|
||||
$collapseOne.on('shown.bs.collapse', function () {
|
||||
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
|
||||
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
|
||||
$collapseTwo.on('shown.bs.collapse', function () {
|
||||
assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
|
||||
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
|
||||
done()
|
||||
})
|
||||
$triggerTwo.trigger($.Event('click'))
|
||||
})
|
||||
$trigger.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
QUnit.test('should collapse accordion children but not nested accordion children', function (assert) {
|
||||
assert.expect(9)
|
||||
var done = assert.async()
|
||||
$('<div id="accordion">'
|
||||
+ '<div class="item">'
|
||||
+ '<a id="linkTrigger" data-parent="#accordion" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>'
|
||||
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
|
||||
+ '<div id="nestedAccordion">'
|
||||
+ '<div class="item">'
|
||||
+ '<a id="nestedLinkTrigger" data-parent="#nestedAccordion" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>'
|
||||
+ '<div id="nestedCollapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree">'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="item">'
|
||||
+ '<a id="linkTriggerTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>'
|
||||
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>'
|
||||
+ '</div>'
|
||||
+ '</div>').appendTo('#qunit-fixture')
|
||||
var $trigger = $('#linkTrigger')
|
||||
var $triggerTwo = $('#linkTriggerTwo')
|
||||
var $nestedTrigger = $('#nestedLinkTrigger')
|
||||
var $collapseOne = $('#collapseOne')
|
||||
var $collapseTwo = $('#collapseTwo')
|
||||
var $nestedCollapseOne = $('#nestedCollapseOne')
|
||||
|
||||
|
||||
$collapseOne.one('shown.bs.collapse', function () {
|
||||
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
|
||||
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
|
||||
assert.ok(!$('#nestedCollapseOne').hasClass('show'), '#nestedCollapseOne is not shown')
|
||||
$nestedCollapseOne.one('shown.bs.collapse', function () {
|
||||
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
|
||||
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
|
||||
assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
|
||||
$collapseTwo.one('shown.bs.collapse', function () {
|
||||
assert.ok(!$collapseOne.hasClass('show'), '#collapseOne is not shown')
|
||||
assert.ok($collapseTwo.hasClass('show'), '#collapseTwo is shown')
|
||||
assert.ok($nestedCollapseOne.hasClass('show'), '#nestedCollapseOne is shown')
|
||||
done()
|
||||
})
|
||||
$triggerTwo.trigger($.Event('click'))
|
||||
})
|
||||
$nestedTrigger.trigger($.Event('click'))
|
||||
})
|
||||
$trigger.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
QUnit.test('should not prevent event for input', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="collapsediv1"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok($(this).hasClass('show'))
|
||||
assert.ok($target.attr('aria-expanded') === 'true')
|
||||
assert.ok($target.prop('checked'))
|
||||
done()
|
||||
})
|
||||
|
||||
$target.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
QUnit.test('should add "collapsed" class to triggers only when all the targeted collapse are hidden', function (assert) {
|
||||
assert.expect(9)
|
||||
var done = assert.async()
|
||||
|
||||
var $trigger1 = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
var $trigger2 = $('<a role="button" data-toggle="collapse" href="#test2"/>').appendTo('#qunit-fixture')
|
||||
var $trigger3 = $('<a role="button" data-toggle="collapse" href=".multi"/>').appendTo('#qunit-fixture')
|
||||
|
||||
var $target1 = $('<div id="test1" class="multi"/>').appendTo('#qunit-fixture')
|
||||
var $target2 = $('<div id="test2" class="multi"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$target2.one('shown.bs.collapse', function () {
|
||||
assert.ok(!$trigger1.hasClass('collapsed'), 'trigger1 does not have collapsed class')
|
||||
assert.ok(!$trigger2.hasClass('collapsed'), 'trigger2 does not have collapsed class')
|
||||
assert.ok(!$trigger3.hasClass('collapsed'), 'trigger3 does not have collapsed class')
|
||||
$target2.one('hidden.bs.collapse', function () {
|
||||
assert.ok(!$trigger1.hasClass('collapsed'), 'trigger1 does not have collapsed class')
|
||||
assert.ok($trigger2.hasClass('collapsed'), 'trigger2 has collapsed class')
|
||||
assert.ok(!$trigger3.hasClass('collapsed'), 'trigger3 does not have collapsed class')
|
||||
$target1.one('hidden.bs.collapse', function () {
|
||||
assert.ok($trigger1.hasClass('collapsed'), 'trigger1 has collapsed class')
|
||||
assert.ok($trigger2.hasClass('collapsed'), 'trigger2 has collapsed class')
|
||||
assert.ok($trigger3.hasClass('collapsed'), 'trigger3 has collapsed class')
|
||||
done()
|
||||
})
|
||||
$trigger1.trigger('click')
|
||||
})
|
||||
$trigger2.trigger('click')
|
||||
})
|
||||
$trigger3.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="true" to triggers targetting shown collaspe and aria-expanded="false" only when all the targeted collapses are shown', function (assert) {
|
||||
assert.expect(9)
|
||||
var done = assert.async()
|
||||
|
||||
var $trigger1 = $('<a role="button" data-toggle="collapse" href="#test1"/>').appendTo('#qunit-fixture')
|
||||
var $trigger2 = $('<a role="button" data-toggle="collapse" href="#test2"/>').appendTo('#qunit-fixture')
|
||||
var $trigger3 = $('<a role="button" data-toggle="collapse" href=".multi"/>').appendTo('#qunit-fixture')
|
||||
|
||||
var $target1 = $('<div id="test1" class="multi collapse"/>').appendTo('#qunit-fixture')
|
||||
var $target2 = $('<div id="test2" class="multi collapse"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$target2.one('shown.bs.collapse', function () {
|
||||
assert.strictEqual($trigger1.attr('aria-expanded'), 'true', 'aria-expanded on trigger1 is "true"')
|
||||
assert.strictEqual($trigger2.attr('aria-expanded'), 'true', 'aria-expanded on trigger2 is "true"')
|
||||
assert.strictEqual($trigger3.attr('aria-expanded'), 'true', 'aria-expanded on trigger3 is "true"')
|
||||
$target2.one('hidden.bs.collapse', function () {
|
||||
assert.strictEqual($trigger1.attr('aria-expanded'), 'true', 'aria-expanded on trigger1 is "true"')
|
||||
assert.strictEqual($trigger2.attr('aria-expanded'), 'false', 'aria-expanded on trigger2 is "false"')
|
||||
assert.strictEqual($trigger3.attr('aria-expanded'), 'true', 'aria-expanded on trigger3 is "true"')
|
||||
$target1.one('hidden.bs.collapse', function () {
|
||||
assert.strictEqual($trigger1.attr('aria-expanded'), 'false', 'aria-expanded on trigger1 is "fasle"')
|
||||
assert.strictEqual($trigger2.attr('aria-expanded'), 'false', 'aria-expanded on trigger2 is "false"')
|
||||
assert.strictEqual($trigger3.attr('aria-expanded'), 'false', 'aria-expanded on trigger3 is "false"')
|
||||
done()
|
||||
})
|
||||
$trigger1.trigger('click')
|
||||
})
|
||||
$trigger2.trigger('click')
|
||||
})
|
||||
$trigger3.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not prevent interactions inside the collapse element', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $target = $('<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />').appendTo('#qunit-fixture')
|
||||
var htmlCollapse =
|
||||
'<div id="collapsediv1" class="collapse">' +
|
||||
' <input type="checkbox" id="testCheckbox" />' +
|
||||
'</div>'
|
||||
|
||||
$(htmlCollapse)
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.collapse', function () {
|
||||
assert.ok($target.prop('checked'), '$trigger is checked')
|
||||
var $testCheckbox = $('#testCheckbox')
|
||||
$testCheckbox.trigger($.Event('click'))
|
||||
setTimeout(function () {
|
||||
assert.ok($testCheckbox.prop('checked'), '$testCheckbox is checked too')
|
||||
done()
|
||||
}, 5)
|
||||
})
|
||||
|
||||
$target.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
QUnit.test('should allow jquery object in parent config', function (assert) {
|
||||
assert.expect(1)
|
||||
var html =
|
||||
'<div class="my-collapse">' +
|
||||
' <div class="item">' +
|
||||
' <a data-toggle="collapse" href="#">Toggle item</a>' +
|
||||
' <div class="collapse">Lorem ipsum</div>' +
|
||||
' </div>' +
|
||||
'</div>'
|
||||
|
||||
$(html).appendTo('#qunit-fixture')
|
||||
try {
|
||||
$('[data-toggle="collapse"]').bootstrapCollapse({
|
||||
parent: $('.my-collapse')
|
||||
})
|
||||
assert.ok(true, 'collapse correctly created')
|
||||
}
|
||||
catch (e) {
|
||||
assert.ok(false, 'collapse not created')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should allow DOM object in parent config', function (assert) {
|
||||
assert.expect(1)
|
||||
var html =
|
||||
'<div class="my-collapse">' +
|
||||
' <div class="item">' +
|
||||
' <a data-toggle="collapse" href="#">Toggle item</a>' +
|
||||
' <div class="collapse">Lorem ipsum</div>' +
|
||||
' </div>' +
|
||||
'</div>'
|
||||
|
||||
$(html).appendTo('#qunit-fixture')
|
||||
try {
|
||||
$('[data-toggle="collapse"]').bootstrapCollapse({
|
||||
parent: $('.my-collapse')[0]
|
||||
})
|
||||
assert.ok(true, 'collapse correctly created')
|
||||
}
|
||||
catch (e) {
|
||||
assert.ok(false, 'collapse not created')
|
||||
}
|
||||
})
|
||||
})
|
||||
@ -1,652 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('dropdowns plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).dropdown, 'dropdown method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('dropdowns', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapDropdown = $.fn.dropdown.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.dropdown = $.fn.bootstrapDropdown
|
||||
delete $.fn.bootstrapDropdown
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.dropdown, 'undefined', 'dropdown was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>')
|
||||
$el.bootstrapDropdown()
|
||||
try {
|
||||
$el.bootstrapDropdown('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $dropdown = $el.bootstrapDropdown()
|
||||
assert.ok($dropdown instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($dropdown[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should not open dropdown if target is disabled via attribute', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
$(dropdownHTML).appendTo('#qunit-fixture')
|
||||
var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
|
||||
$dropdown.on('click', function () {
|
||||
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.strictEqual($dropdown.attr('aria-expanded'), 'true', 'aria-expanded is set to string "true" on click')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('hidden.bs.dropdown', function () {
|
||||
assert.strictEqual($dropdown.attr('aria-expanded'), 'false', 'aria-expanded is set to string "false" on hide')
|
||||
done()
|
||||
})
|
||||
|
||||
$dropdown.trigger('click')
|
||||
$(document.body).trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(dropdownHTML).appendTo('#qunit-fixture')
|
||||
var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
|
||||
$dropdown.on('click', function () {
|
||||
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'))
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger($.Event('click'))
|
||||
})
|
||||
|
||||
QUnit.test('should add class show to menu if clicked', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should remove "show" class if body is clicked', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
|
||||
$(document.body).trigger('click')
|
||||
}).on('hidden.bs.dropdown', function () {
|
||||
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="dropdown-divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click')
|
||||
var e = $.Event('keyup')
|
||||
e.which = 9 // Tab
|
||||
$(document.body).trigger(e)
|
||||
}).on('hidden.bs.dropdown', function () {
|
||||
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
|
||||
assert.expect(7)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="nav">'
|
||||
+ '<div class="dropdown" id="testmenu">'
|
||||
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#sub1">Submenu 1</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="btn-group">'
|
||||
+ '<button class="btn">Actions</button>'
|
||||
+ '<button class="btn dropdown-toggle" data-toggle="dropdown"></button>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Action 1</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
|
||||
var $first = $dropdowns.first()
|
||||
var $last = $dropdowns.last()
|
||||
|
||||
assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
|
||||
|
||||
$first.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
|
||||
$(document.body).trigger('click')
|
||||
}).on('hidden.bs.dropdown', function () {
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
|
||||
$last.trigger('click')
|
||||
})
|
||||
|
||||
$last.parent('.btn-group')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
|
||||
$(document.body).trigger('click')
|
||||
}).on('hidden.bs.dropdown', function () {
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
|
||||
done()
|
||||
})
|
||||
$first.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {
|
||||
assert.expect(7)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="nav">'
|
||||
+ '<div class="dropdown" id="testmenu">'
|
||||
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#sub1">Submenu 1</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div class="btn-group">'
|
||||
+ '<button class="btn">Actions</button>'
|
||||
+ '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Action 1</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
|
||||
var $first = $dropdowns.first()
|
||||
var $last = $dropdowns.last()
|
||||
|
||||
assert.strictEqual($dropdowns.length, 2, 'two dropdowns')
|
||||
|
||||
$first.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click')
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
|
||||
var e = $.Event('keyup')
|
||||
e.which = 9 // Tab
|
||||
$(document.body).trigger(e)
|
||||
}).on('hidden.bs.dropdown', function () {
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
|
||||
$last.trigger('click')
|
||||
})
|
||||
|
||||
$last.parent('.btn-group')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click')
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown')
|
||||
var e = $.Event('keyup')
|
||||
e.which = 9 // Tab
|
||||
$(document.body).trigger(e)
|
||||
}).on('hidden.bs.dropdown', function () {
|
||||
assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed')
|
||||
done()
|
||||
})
|
||||
$first.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should fire show and hide event', function (assert) {
|
||||
assert.expect(2)
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('show.bs.dropdown', function () {
|
||||
assert.ok(true, 'show was fired')
|
||||
})
|
||||
.on('hide.bs.dropdown', function () {
|
||||
assert.ok(true, 'hide was fired')
|
||||
done()
|
||||
})
|
||||
|
||||
$dropdown.trigger('click')
|
||||
$(document.body).trigger('click')
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should fire shown and hidden event', function (assert) {
|
||||
assert.expect(2)
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
var done = assert.async()
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok(true, 'shown was fired')
|
||||
})
|
||||
.on('hidden.bs.dropdown', function () {
|
||||
assert.ok(true, 'hidden was fired')
|
||||
done()
|
||||
})
|
||||
|
||||
$dropdown.trigger('click')
|
||||
$(document.body).trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
|
||||
assert.expect(2)
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
var done = assert.async()
|
||||
|
||||
$dropdown.parent('.dropdown')
|
||||
.on('hidden.bs.dropdown', function (e) {
|
||||
assert.strictEqual(e.relatedTarget, $dropdown[0])
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.dropdown', function (e) {
|
||||
assert.strictEqual(e.relatedTarget, $dropdown[0])
|
||||
$(document.body).trigger('click')
|
||||
})
|
||||
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item" href="#">Secondary link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ '<div class="divider"/>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '<input type="text" id="input">'
|
||||
+ '<textarea id="textarea"/>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
var $input = $('#input')
|
||||
var $textarea = $('#textarea')
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok(true, 'shown was fired')
|
||||
|
||||
$input.trigger('focus').trigger($.Event('keydown', { which: 38 }))
|
||||
assert.ok($(document.activeElement).is($input), 'input still focused')
|
||||
|
||||
$textarea.trigger('focus').trigger($.Event('keydown', { which: 38 }))
|
||||
assert.ok($(document.activeElement).is($textarea), 'textarea still focused')
|
||||
|
||||
done()
|
||||
})
|
||||
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item disabled" href="#">Disabled link</a>'
|
||||
+ '<a class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok(true, 'shown was fired')
|
||||
$dropdown.trigger($.Event('keydown', { which: 40 }))
|
||||
$dropdown.trigger($.Event('keydown', { which: 40 }))
|
||||
assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
|
||||
assert.expect(4)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="tabs">'
|
||||
+ '<div class="dropdown">'
|
||||
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a id="item1" class="dropdown-item" href="#">A link</a>'
|
||||
+ '<a id="item2" class="dropdown-item" href="#">Another link</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok(true, 'shown was fired')
|
||||
$dropdown.trigger($.Event('keydown', { which: 40 }))
|
||||
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
|
||||
|
||||
$(document.activeElement).trigger($.Event('keydown', { which: 40 }))
|
||||
assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
|
||||
|
||||
$(document.activeElement).trigger($.Event('keydown', { which: 38 }))
|
||||
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
|
||||
done()
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
|
||||
})
|
||||
|
||||
QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="dropdown">'
|
||||
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<input id="textField" type="text" />'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
var $textfield = $('#textField')
|
||||
$textfield.on('click', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
|
||||
done()
|
||||
})
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
|
||||
$textfield.trigger($.Event('click'))
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var dropdownHTML = '<div class="dropdown">'
|
||||
+ '<button type="button" data-toggle="dropdown">Dropdown</button>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<textarea id="textArea"></textarea>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $dropdown = $(dropdownHTML)
|
||||
.appendTo('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
|
||||
var $textarea = $('#textArea')
|
||||
$textarea.on('click', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
|
||||
done()
|
||||
})
|
||||
|
||||
$dropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
|
||||
$textarea.trigger($.Event('click'))
|
||||
})
|
||||
$dropdown.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">'
|
||||
+ '<div class="dropdown">'
|
||||
+ ' <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>'
|
||||
+ ' <div class="dropdown-menu" aria-labelledby="dropdown">'
|
||||
+ ' <a class="dropdown-item" href="#">Action</a>'
|
||||
+ ' <a class="dropdown-item" href="#">Another action</a>'
|
||||
+ ' <a class="dropdown-item" href="#">Something else here</a>'
|
||||
+ ' </div>'
|
||||
+ '</div>'
|
||||
+ '</nav>'
|
||||
|
||||
$(html).appendTo('#qunit-fixture')
|
||||
var $triggerDropdown = $('#qunit-fixture')
|
||||
.find('[data-toggle="dropdown"]')
|
||||
.bootstrapDropdown()
|
||||
var $dropdownMenu = $triggerDropdown.next()
|
||||
|
||||
$triggerDropdown
|
||||
.parent('.dropdown')
|
||||
.on('shown.bs.dropdown', function () {
|
||||
assert.ok(typeof $dropdownMenu.attr('style') === 'undefined', 'No inline style applied by Popper.js')
|
||||
done()
|
||||
})
|
||||
$triggerDropdown.trigger($.Event('click'))
|
||||
})
|
||||
})
|
||||
@ -1,692 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('modal plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).modal, 'modal method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('modal', {
|
||||
before: function () {
|
||||
// Enable the scrollbar measurer
|
||||
$('<style type="text/css"> .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } </style>').appendTo('head')
|
||||
// Function to calculate the scrollbar width which is then compared to the padding or margin changes
|
||||
$.fn.getScrollbarWidth = function () {
|
||||
var scrollDiv = document.createElement('div')
|
||||
scrollDiv.className = 'modal-scrollbar-measure'
|
||||
document.body.appendChild(scrollDiv)
|
||||
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth
|
||||
document.body.removeChild(scrollDiv)
|
||||
return scrollbarWidth
|
||||
}
|
||||
// Simulate scrollbars in PhantomJS
|
||||
$('html').css('padding-right', '16px')
|
||||
},
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapModal = $.fn.modal.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.modal = $.fn.bootstrapModal
|
||||
delete $.fn.bootstrapModal
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.modal, 'undefined', 'modal was set back to undefined (orig value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div id="modal-test"/>')
|
||||
$el.bootstrapModal()
|
||||
try {
|
||||
$el.bootstrapModal('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div id="modal-test"/>')
|
||||
var $modal = $el.bootstrapModal()
|
||||
assert.ok($modal instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($modal[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should expose defaults var for settings', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($.fn.bootstrapModal.Constructor.Default, 'default object exposed')
|
||||
})
|
||||
|
||||
QUnit.test('should insert into dom when show method is called', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should fire show event', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('show.bs.modal', function () {
|
||||
assert.ok(true, 'show event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire shown when show was prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('show.bs.modal', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'show event fired')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok(false, 'shown event fired')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should hide modal when hide is called', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should toggle when toggle is called', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
|
||||
$(this).bootstrapModal('toggle')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('toggle')
|
||||
})
|
||||
|
||||
QUnit.test('should remove from dom when click [data-dismiss="modal"]', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
|
||||
$(this).find('.close').trigger('click')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('toggle')
|
||||
})
|
||||
|
||||
QUnit.test('should allow modal close with "backdrop:false"', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test" data-backdrop="false"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should close modal when clicking outside of modal-content', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"><div class="contents"/></div>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom')
|
||||
$('.contents').trigger('click')
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
$('#modal-test').trigger('click')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not close modal when clicking outside of modal-content if data-backdrop="true"', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test" data-backdrop="false"><div class="contents"/></div>')
|
||||
.on('shown.bs.modal', function () {
|
||||
$('#modal-test').trigger('click')
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal not hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should close modal when escape key is pressed via keydown', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var $div = $('<div id="modal-test"/>')
|
||||
$div
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok($('#modal-test').length, 'modal inserted into dom')
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
$div.trigger($.Event('keydown', { which: 27 }))
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
$div.remove()
|
||||
done()
|
||||
}, 0)
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not close modal when escape key is pressed via keyup', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var $div = $('<div id="modal-test"/>')
|
||||
$div
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.ok($('#modal-test').length, 'modal inserted into dom')
|
||||
assert.ok($('#modal-test').is(':visible'), 'modal visible')
|
||||
$div.trigger($.Event('keyup', { which: 27 }))
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($div.is(':visible'), 'modal still visible')
|
||||
$div.remove()
|
||||
done()
|
||||
}, 0)
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should trigger hide event once when clicking outside of modal-content', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var triggered
|
||||
|
||||
$('<div id="modal-test"><div class="contents"/></div>')
|
||||
.on('shown.bs.modal', function () {
|
||||
triggered = 0
|
||||
$('#modal-test').trigger('click')
|
||||
})
|
||||
.on('hide.bs.modal', function () {
|
||||
triggered += 1
|
||||
assert.strictEqual(triggered, 1, 'modal hide triggered once')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should remove aria-hidden attribute when shown, add it back when hidden', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test" aria-hidden="true"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.notOk($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute removed')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.ok($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute added')
|
||||
assert.strictEqual($('#modal-test').attr('aria-hidden'), 'true', 'correct aria-hidden="true" added')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
|
||||
.one('shown.bs.modal', function () {
|
||||
$('#close').trigger('click')
|
||||
})
|
||||
.one('hidden.bs.modal', function () {
|
||||
// after one open-close cycle
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
$(this)
|
||||
.one('shown.bs.modal', function () {
|
||||
$('#close').trigger('click')
|
||||
})
|
||||
.one('hidden.bs.modal', function () {
|
||||
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
setTimeout(function () {
|
||||
assert.ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused')
|
||||
done()
|
||||
}, 0)
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
$('#close').trigger('click')
|
||||
})
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$toggleBtn.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not restore focus to toggling element if the associated show event gets prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture')
|
||||
var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>')
|
||||
.one('show.bs.modal', function (e) {
|
||||
e.preventDefault()
|
||||
$otherBtn.trigger('focus')
|
||||
setTimeout($.proxy(function () {
|
||||
$(this).bootstrapModal('show')
|
||||
}, this), 0)
|
||||
})
|
||||
.on('hidden.bs.modal', function () {
|
||||
setTimeout(function () {
|
||||
assert.ok($(document.activeElement).is($otherBtn), 'focus returned to toggling element')
|
||||
done()
|
||||
}, 0)
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
$('#close').trigger('click')
|
||||
})
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$toggleBtn.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should adjust the inline padding of the modal when opening', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
var expectedPadding = $(this).getScrollbarWidth() + 'px'
|
||||
var currentPadding = $(this).css('padding-right')
|
||||
assert.strictEqual(currentPadding, expectedPadding, 'modal padding should be adjusted while opening')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should adjust the inline body padding when opening and restore when closing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $body = $(document.body)
|
||||
var originalPadding = $body.css('padding-right')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
var currentPadding = $body.css('padding-right')
|
||||
assert.strictEqual(currentPadding, originalPadding, 'body padding should be reset after closing')
|
||||
$body.removeAttr('style')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
var expectedPadding = parseFloat(originalPadding) + $(this).getScrollbarWidth() + 'px'
|
||||
var currentPadding = $body.css('padding-right')
|
||||
assert.strictEqual(currentPadding, expectedPadding, 'body padding should be adjusted while opening')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should store the original body padding in data-padding-right before showing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $body = $(document.body)
|
||||
var originalPadding = '0px'
|
||||
$body.css('padding-right', originalPadding)
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual(typeof $body.data('padding-right'), 'undefined', 'data-padding-right should be cleared after closing')
|
||||
$body.removeAttr('style')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.strictEqual($body.data('padding-right'), originalPadding, 'original body padding should be stored in data-padding-right')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not adjust the inline body padding when it does not overflow', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var $body = $(document.body)
|
||||
var originalPadding = $body.css('padding-right')
|
||||
|
||||
// Hide scrollbars to prevent the body overflowing
|
||||
$body.css('overflow', 'hidden') // real scrollbar (for in-browser testing)
|
||||
$('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS)
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('shown.bs.modal', function () {
|
||||
var currentPadding = $body.css('padding-right')
|
||||
assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted')
|
||||
$(this).bootstrapModal('hide')
|
||||
|
||||
// restore scrollbars
|
||||
$body.css('overflow', 'auto')
|
||||
$('html').css('padding-right', '16px')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should adjust the inline padding of fixed elements when opening and restore when closing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $element = $('<div class="fixed-top"></div>').appendTo('#qunit-fixture')
|
||||
var originalPadding = $element.css('padding-right')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
var currentPadding = $element.css('padding-right')
|
||||
assert.strictEqual(currentPadding, originalPadding, 'fixed element padding should be reset after closing')
|
||||
$element.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
var expectedPadding = parseFloat(originalPadding) + $(this).getScrollbarWidth() + 'px'
|
||||
var currentPadding = $element.css('padding-right')
|
||||
assert.strictEqual(currentPadding, expectedPadding, 'fixed element padding should be adjusted while opening')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should store the original padding of fixed elements in data-padding-right before showing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $element = $('<div class="fixed-top"></div>').appendTo('#qunit-fixture')
|
||||
var originalPadding = '0px'
|
||||
$element.css('padding-right', originalPadding)
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual(typeof $element.data('padding-right'), 'undefined', 'data-padding-right should be cleared after closing')
|
||||
$element.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.strictEqual($element.data('padding-right'), originalPadding, 'original fixed element padding should be stored in data-padding-right')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should adjust the inline margin of sticky elements when opening and restore when closing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
|
||||
var originalPadding = $element.css('margin-right')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
var currentPadding = $element.css('margin-right')
|
||||
assert.strictEqual(currentPadding, originalPadding, 'sticky element margin should be reset after closing')
|
||||
$element.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
var expectedPadding = parseFloat(originalPadding) - $(this).getScrollbarWidth() + 'px'
|
||||
var currentPadding = $element.css('margin-right')
|
||||
assert.strictEqual(currentPadding, expectedPadding, 'sticky element margin should be adjusted while opening')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should store the original margin of sticky elements in data-margin-right before showing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture')
|
||||
var originalPadding = '0px'
|
||||
$element.css('margin-right', originalPadding)
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
|
||||
$element.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.strictEqual($element.data('margin-right'), originalPadding, 'original sticky element margin should be stored in data-margin-right')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should adjust the inline margin of the navbar-toggler when opening and restore when closing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
|
||||
var originalMargin = $element.css('margin-right')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
var currentMargin = $element.css('margin-right')
|
||||
assert.strictEqual(currentMargin, originalMargin, 'navbar-toggler margin should be reset after closing')
|
||||
$element.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
var expectedMargin = parseFloat(originalMargin) + $(this).getScrollbarWidth() + 'px'
|
||||
var currentMargin = $element.css('margin-right')
|
||||
assert.strictEqual(currentMargin, expectedMargin, 'navbar-toggler margin should be adjusted while opening')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should store the original margin of the navbar-toggler in data-margin-right before showing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $element = $('<div class="navbar-toggler"></div>').appendTo('#qunit-fixture')
|
||||
var originalMargin = '0px'
|
||||
$element.css('margin-right', originalMargin)
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual(typeof $element.data('margin-right'), 'undefined', 'data-margin-right should be cleared after closing')
|
||||
$element.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
assert.strictEqual($element.data('margin-right'), originalMargin, 'original navbar-toggler margin should be stored in data-margin-right')
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should ignore values set via CSS when trying to restore body padding after closing', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var $body = $(document.body)
|
||||
var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual($body.attr('style').indexOf('padding-right'), -1, 'body does not have inline padding set')
|
||||
$style.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should ignore other inline styles when trying to restore body padding after closing', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $body = $(document.body)
|
||||
var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head')
|
||||
|
||||
$body.css('color', 'red')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual($body[0].style.paddingRight, '', 'body does not have inline padding set')
|
||||
assert.strictEqual($body[0].style.color, 'red', 'body still has other inline styles set')
|
||||
$body.removeAttr('style')
|
||||
$style.remove()
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should properly restore non-pixel inline body padding after closing', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var $body = $(document.body)
|
||||
|
||||
$body.css('padding-right', '5%')
|
||||
|
||||
$('<div id="modal-test"/>')
|
||||
.on('hidden.bs.modal', function () {
|
||||
assert.strictEqual($body[0].style.paddingRight, '5%', 'body does not have inline padding set')
|
||||
$body.removeAttr('style')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.modal', function () {
|
||||
$(this).bootstrapModal('hide')
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not follow link in area tag', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
$('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>')
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$('#test')
|
||||
.on('click.bs.modal.data-api', function (event) {
|
||||
assert.notOk(event.isDefaultPrevented(), 'navigating to href will happen')
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(event.isDefaultPrevented(), 'model shown instead of navigating to href')
|
||||
done()
|
||||
}, 1)
|
||||
})
|
||||
.trigger('click')
|
||||
})
|
||||
|
||||
QUnit.test('should not parse target as html', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var $toggleBtn = $('<button data-toggle="modal" data-target="<div id="modal-test"><div class="contents"<div<div id="close" data-dismiss="modal"/></div></div>"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$toggleBtn.trigger('click')
|
||||
setTimeout(function () {
|
||||
assert.strictEqual($('#modal-test').length, 0, 'target has not been parsed and added to the document')
|
||||
done()
|
||||
}, 1)
|
||||
})
|
||||
|
||||
QUnit.test('should not execute js from target', function (assert) {
|
||||
assert.expect(0)
|
||||
var done = assert.async()
|
||||
|
||||
// This toggle button contains XSS payload in its data-target
|
||||
// Note: it uses the onerror handler of an img element to execute the js, because a simple script element does not work here
|
||||
// a script element works in manual tests though, so here it is likely blocked by the qunit framework
|
||||
var $toggleBtn = $('<button data-toggle="modal" data-target="<div><image src="missing.png" onerror="$('#qunit-fixture button.control').trigger('click')"></div>"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
// The XSS payload above does not have a closure over this function and cannot access the assert object directly
|
||||
// However, it can send a click event to the following control button, which will then fail the assert
|
||||
$('<button>')
|
||||
.addClass('control')
|
||||
.on('click', function () {
|
||||
assert.notOk(true, 'XSS payload is not executed as js')
|
||||
})
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$toggleBtn.trigger('click')
|
||||
setTimeout(done, 500)
|
||||
})
|
||||
|
||||
QUnit.test('should not try to open a modal which is already visible', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var count = 0
|
||||
|
||||
$('<div id="modal-test"/>').on('shown.bs.modal', function () {
|
||||
count++
|
||||
}).on('hidden.bs.modal', function () {
|
||||
assert.strictEqual(count, 1, 'show() runs only once')
|
||||
done()
|
||||
})
|
||||
.bootstrapModal('show')
|
||||
.bootstrapModal('show')
|
||||
.bootstrapModal('hide')
|
||||
})
|
||||
})
|
||||
@ -1,413 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('popover plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).popover, 'popover method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('popover', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapPopover = $.fn.popover.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.popover = $.fn.bootstrapPopover
|
||||
delete $.fn.bootstrapPopover
|
||||
$('.popover').remove()
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.popover, 'undefined', 'popover was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>')
|
||||
$el.bootstrapPopover()
|
||||
try {
|
||||
$el.bootstrapPopover('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $popover = $el.bootstrapPopover()
|
||||
assert.ok($popover instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($popover[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should render popover element', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
$('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.popover', function () {
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
$(this).bootstrapPopover('hide')
|
||||
})
|
||||
.on('hidden.bs.popover', function () {
|
||||
assert.strictEqual($('.popover').length, 0, 'popover removed')
|
||||
done()
|
||||
})
|
||||
.bootstrapPopover('show')
|
||||
})
|
||||
|
||||
QUnit.test('should store popover instance in popover data object', function (assert) {
|
||||
assert.expect(1)
|
||||
var $popover = $('<a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a>').bootstrapPopover()
|
||||
|
||||
assert.ok($popover.data('bs.popover'), 'popover instance exists')
|
||||
})
|
||||
|
||||
QUnit.test('should store popover trigger in popover instance data object', function (assert) {
|
||||
assert.expect(1)
|
||||
var $popover = $('<a href="#" title="ResentedHook">@ResentedHook</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover()
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
|
||||
assert.ok($('.popover').data('bs.popover'), 'popover trigger stored in instance data')
|
||||
})
|
||||
|
||||
QUnit.test('should get title and content from options', function (assert) {
|
||||
assert.expect(4)
|
||||
var $popover = $('<a href="#">@fat</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
title: function () {
|
||||
return '@fat'
|
||||
},
|
||||
content: function () {
|
||||
return 'loves writing tests （╯°□°）╯︵ ┻━┻'
|
||||
}
|
||||
})
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.strictEqual($('.popover .popover-header').text(), '@fat', 'title correctly inserted')
|
||||
assert.strictEqual($('.popover .popover-body').text(), 'loves writing tests （╯°□°）╯︵ ┻━┻', 'content correctly inserted')
|
||||
|
||||
$popover.bootstrapPopover('hide')
|
||||
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
})
|
||||
|
||||
QUnit.test('should allow DOMElement title and content (html: true)', function (assert) {
|
||||
assert.expect(5)
|
||||
var title = document.createTextNode('@glebm <3 writing tests')
|
||||
var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
|
||||
var $popover = $('<a href="#" rel="tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({ html: true, title: title, content: content })
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
|
||||
assert.notEqual($('.popover').length, 0, 'popover inserted')
|
||||
assert.strictEqual($('.popover .popover-header').text(), '@glebm <3 writing tests', 'title inserted')
|
||||
assert.ok($.contains($('.popover').get(0), title), 'title node moved, not copied')
|
||||
// toLowerCase because IE8 will return <I>...</I>
|
||||
assert.strictEqual($('.popover .popover-body').html().toLowerCase(), '<i>¯\\_(ツ)_/¯</i>', 'content inserted')
|
||||
assert.ok($.contains($('.popover').get(0), content), 'content node moved, not copied')
|
||||
})
|
||||
|
||||
QUnit.test('should allow DOMElement title and content (html: false)', function (assert) {
|
||||
assert.expect(5)
|
||||
var title = document.createTextNode('@glebm <3 writing tests')
|
||||
var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
|
||||
var $popover = $('<a href="#" rel="tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({ title: title, content: content })
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
|
||||
assert.notEqual($('.popover').length, 0, 'popover inserted')
|
||||
assert.strictEqual($('.popover .popover-header').text(), '@glebm <3 writing tests', 'title inserted')
|
||||
assert.ok(!$.contains($('.popover').get(0), title), 'title node copied, not moved')
|
||||
assert.strictEqual($('.popover .popover-body').html(), '¯\\_(ツ)_/¯', 'content inserted')
|
||||
assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should not duplicate HTML object', function (assert) {
|
||||
assert.expect(6)
|
||||
var $div = $('<div/>').html('loves writing tests （╯°□°）╯︵ ┻━┻')
|
||||
|
||||
var $popover = $('<a href="#">@fat</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
html: true,
|
||||
content: function () {
|
||||
return $div
|
||||
}
|
||||
})
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted')
|
||||
|
||||
$popover.bootstrapPopover('hide')
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.equal($('.popover .popover-body').html(), $div[0].outerHTML, 'content correctly inserted')
|
||||
|
||||
$popover.bootstrapPopover('hide')
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
})
|
||||
|
||||
QUnit.test('should get title and content from attributes', function (assert) {
|
||||
assert.expect(4)
|
||||
var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover()
|
||||
.bootstrapPopover('show')
|
||||
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
|
||||
assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
|
||||
|
||||
$popover.bootstrapPopover('hide')
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
})
|
||||
|
||||
QUnit.test('should get title and content from attributes ignoring options passed via js', function (assert) {
|
||||
assert.expect(4)
|
||||
var $popover = $('<a href="#" title="@mdo" data-content="loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻" >@mdo</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
title: 'ignored title option',
|
||||
content: 'ignored content option'
|
||||
})
|
||||
.bootstrapPopover('show')
|
||||
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.strictEqual($('.popover .popover-header').text(), '@mdo', 'title correctly inserted')
|
||||
assert.strictEqual($('.popover .popover-body').text(), 'loves data attributes (づ｡◕‿‿◕｡)づ ︵ ┻━┻', 'content correctly inserted')
|
||||
|
||||
$popover.bootstrapPopover('hide')
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
})
|
||||
|
||||
QUnit.test('should respect custom template', function (assert) {
|
||||
assert.expect(3)
|
||||
var $popover = $('<a href="#">@fat</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
title: 'Test',
|
||||
content: 'Test',
|
||||
template: '<div class="popover foobar"><div class="arrow"></div><div class="inner"><h3 class="title"/><div class="content"><p/></div></div></div>'
|
||||
})
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.ok($('.popover').hasClass('foobar'), 'custom class is present')
|
||||
|
||||
$popover.bootstrapPopover('hide')
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
})
|
||||
|
||||
QUnit.test('should destroy popover', function (assert) {
|
||||
assert.expect(7)
|
||||
var $popover = $('<div/>')
|
||||
.bootstrapPopover({
|
||||
trigger: 'hover'
|
||||
})
|
||||
.on('click.foo', $.noop)
|
||||
|
||||
assert.ok($popover.data('bs.popover'), 'popover has data')
|
||||
assert.ok($._data($popover[0], 'events').mouseover && $._data($popover[0], 'events').mouseout, 'popover has hover event')
|
||||
assert.strictEqual($._data($popover[0], 'events').click[0].namespace, 'foo', 'popover has extra click.foo event')
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
$popover.bootstrapPopover('dispose')
|
||||
|
||||
assert.ok(!$popover.hasClass('show'), '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')
|
||||
})
|
||||
|
||||
QUnit.test('should render popover element using delegated selector', function (assert) {
|
||||
assert.expect(2)
|
||||
var $div = $('<div><a href="#" title="mdo" data-content="https://twitter.com/mdo">@mdo</a></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
selector: 'a',
|
||||
trigger: 'click'
|
||||
})
|
||||
|
||||
$div.find('a').trigger('click')
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
|
||||
$div.find('a').trigger('click')
|
||||
assert.strictEqual($('.popover').length, 0, 'popover was removed')
|
||||
})
|
||||
|
||||
QUnit.test('should detach popover content rather than removing it so that event handlers are left intact', function (assert) {
|
||||
assert.expect(1)
|
||||
var $content = $('<div class="content-with-handler"><a class="btn btn-warning">Button with event handler</a></div>').appendTo('#qunit-fixture')
|
||||
|
||||
var handlerCalled = false
|
||||
$('.content-with-handler .btn').on('click', function () {
|
||||
handlerCalled = true
|
||||
})
|
||||
|
||||
var $div = $('<div><a href="#">Show popover</a></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
html: true,
|
||||
trigger: 'manual',
|
||||
container: 'body',
|
||||
content: function () {
|
||||
return $content
|
||||
}
|
||||
})
|
||||
|
||||
var done = assert.async()
|
||||
$div
|
||||
.one('shown.bs.popover', function () {
|
||||
$div
|
||||
.one('hidden.bs.popover', function () {
|
||||
$div
|
||||
.one('shown.bs.popover', function () {
|
||||
$('.content-with-handler .btn').trigger('click')
|
||||
$div.bootstrapPopover('dispose')
|
||||
assert.ok(handlerCalled, 'content\'s event handler still present')
|
||||
done()
|
||||
})
|
||||
.bootstrapPopover('show')
|
||||
})
|
||||
.bootstrapPopover('hide')
|
||||
})
|
||||
.bootstrapPopover('show')
|
||||
})
|
||||
|
||||
QUnit.test('should do nothing when an attempt is made to hide an uninitialized popover', function (assert) {
|
||||
assert.expect(1)
|
||||
|
||||
var $popover = $('<span data-toggle="popover" data-title="some title" data-content="some content">some text</span>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.popover shown.bs.popover', function () {
|
||||
assert.ok(false, 'should not fire any popover events')
|
||||
})
|
||||
.bootstrapPopover('hide')
|
||||
assert.strictEqual(typeof $popover.data('bs.popover'), 'undefined', 'should not initialize the popover')
|
||||
})
|
||||
|
||||
QUnit.test('should fire inserted event', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
$('<a href="#">@Johann-S</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('inserted.bs.popover', function () {
|
||||
assert.notEqual($('.popover').length, 0, 'popover was inserted')
|
||||
assert.ok(true, 'inserted event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapPopover({
|
||||
title: 'Test',
|
||||
content: 'Test'
|
||||
})
|
||||
.bootstrapPopover('show')
|
||||
})
|
||||
|
||||
QUnit.test('should throw an error when show is called on hidden elements', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
try {
|
||||
$('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'Please use show on visible elements')
|
||||
done()
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should hide popovers when their containing modal is closed', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var templateHTML = '<div id="modal-test" class="modal">' +
|
||||
'<div class="modal-dialog" role="document">' +
|
||||
'<div class="modal-content">' +
|
||||
'<div class="modal-body">' +
|
||||
'<button id="popover-test" type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="Popover">' +
|
||||
'Popover on top' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$(templateHTML).appendTo('#qunit-fixture')
|
||||
$('#popover-test')
|
||||
.on('shown.bs.popover', function () {
|
||||
$('#modal-test').modal('hide')
|
||||
})
|
||||
.on('hide.bs.popover', function () {
|
||||
assert.ok(true, 'popover hide')
|
||||
done()
|
||||
})
|
||||
|
||||
$('#modal-test')
|
||||
.on('shown.bs.modal', function () {
|
||||
$('#popover-test').bootstrapPopover('show')
|
||||
})
|
||||
.modal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should convert number to string without error for content and title', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $popover = $('<a href="#">@mdo</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
title: 5,
|
||||
content: 7
|
||||
})
|
||||
.on('shown.bs.popover', function () {
|
||||
assert.strictEqual($('.popover .popover-header').text(), '5')
|
||||
assert.strictEqual($('.popover .popover-body').text(), '7')
|
||||
done()
|
||||
})
|
||||
|
||||
$popover.bootstrapPopover('show')
|
||||
})
|
||||
|
||||
QUnit.test('popover should be shown right away after the call of disable/enable', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $popover = $('<a href="#">@mdo</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapPopover({
|
||||
title: 'Test popover',
|
||||
content: 'with disable/enable'
|
||||
})
|
||||
.on('shown.bs.popover', function () {
|
||||
assert.strictEqual($('.popover').hasClass('show'), true)
|
||||
done()
|
||||
})
|
||||
|
||||
$popover.bootstrapPopover('disable')
|
||||
$popover.trigger($.Event('click'))
|
||||
setTimeout(function () {
|
||||
assert.strictEqual($('.popover').length === 0, true)
|
||||
$popover.bootstrapPopover('enable')
|
||||
$popover.trigger($.Event('click'))
|
||||
}, 200)
|
||||
})
|
||||
})
|
||||
@ -1,659 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('scrollspy plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).scrollspy, 'scrollspy method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('scrollspy', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapScrollspy = $.fn.scrollspy.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.scrollspy = $.fn.bootstrapScrollspy
|
||||
delete $.fn.bootstrapScrollspy
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.scrollspy, 'undefined', 'scrollspy was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>').appendTo('#qunit-fixture')
|
||||
$el.bootstrapScrollspy()
|
||||
try {
|
||||
$el.bootstrapScrollspy('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>').appendTo('#qunit-fixture')
|
||||
var $scrollspy = $el.bootstrapScrollspy()
|
||||
assert.ok($scrollspy instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($scrollspy[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should only switch "active" class on current target', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var sectionHTML = '<div id="root" class="active">'
|
||||
+ '<div class="topbar">'
|
||||
+ '<div class="topbar-inner">'
|
||||
+ '<div class="container" id="ss-target">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a href="#masthead">Overview</a></li>'
|
||||
+ '<li class="nav-item"><a href="#detail">Detail</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">'
|
||||
+ '<div style="height: 200px;">'
|
||||
+ '<h4 id="masthead">Overview</h4>'
|
||||
+ '<p style="height: 200px">'
|
||||
+ 'Ad leggings keytar, brunch id art party dolor labore.'
|
||||
+ '</p>'
|
||||
+ '</div>'
|
||||
+ '<div style="height: 200px;">'
|
||||
+ '<h4 id="detail">Detail</h4>'
|
||||
+ '<p style="height: 200px">'
|
||||
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.'
|
||||
+ '</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $section = $(sectionHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var $scrollspy = $section
|
||||
.show()
|
||||
.find('#scrollspy-example')
|
||||
.bootstrapScrollspy({ target: '#ss-target' })
|
||||
|
||||
$scrollspy.one('scroll', function () {
|
||||
assert.ok($section.hasClass('active'), '"active" class still on root node')
|
||||
done()
|
||||
})
|
||||
|
||||
$scrollspy.scrollTop(350)
|
||||
})
|
||||
|
||||
QUnit.test('should only switch "active" class on current target specified w element', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var sectionHTML = '<div id="root" class="active">'
|
||||
+ '<div class="topbar">'
|
||||
+ '<div class="topbar-inner">'
|
||||
+ '<div class="container" id="ss-target">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a href="#masthead">Overview</a></li>'
|
||||
+ '<li class="nav-item"><a href="#detail">Detail</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">'
|
||||
+ '<div style="height: 200px;">'
|
||||
+ '<h4 id="masthead">Overview</h4>'
|
||||
+ '<p style="height: 200px">'
|
||||
+ 'Ad leggings keytar, brunch id art party dolor labore.'
|
||||
+ '</p>'
|
||||
+ '</div>'
|
||||
+ '<div style="height: 200px;">'
|
||||
+ '<h4 id="detail">Detail</h4>'
|
||||
+ '<p style="height: 200px">'
|
||||
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.'
|
||||
+ '</p>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
var $section = $(sectionHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var $scrollspy = $section
|
||||
.show()
|
||||
.find('#scrollspy-example')
|
||||
.bootstrapScrollspy({ target: document.getElementById('#ss-target') })
|
||||
|
||||
$scrollspy.one('scroll', function () {
|
||||
assert.ok($section.hasClass('active'), '"active" class still on root node')
|
||||
done()
|
||||
})
|
||||
|
||||
$scrollspy.scrollTop(350)
|
||||
})
|
||||
|
||||
QUnit.test('should correctly select middle navigation option when large offset is used', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
|
||||
+ '<nav id="navigation" class="navbar">'
|
||||
+ '<ul class="navbar-nav">'
|
||||
+ '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
+ '<div id="content" style="height: 200px; overflow-y: auto;">'
|
||||
+ '<div id="one" style="height: 500px;"></div>'
|
||||
+ '<div id="two" style="height: 300px;"></div>'
|
||||
+ '<div id="three" style="height: 10px;"></div>'
|
||||
+ '</div>'
|
||||
var $section = $(sectionHTML).appendTo('#qunit-fixture')
|
||||
var $scrollspy = $section
|
||||
.show()
|
||||
.filter('#content')
|
||||
|
||||
$scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top })
|
||||
|
||||
$scrollspy.one('scroll', function () {
|
||||
assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section')
|
||||
assert.ok($section.find('#two-link').hasClass('active'), '"active" class on middle section')
|
||||
assert.ok(!$section.find('#three-link').hasClass('active'), '"active" class not on last section')
|
||||
done()
|
||||
})
|
||||
|
||||
$scrollspy.scrollTop(550)
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class to the correct element', function (assert) {
|
||||
assert.expect(2)
|
||||
var navbarHtml =
|
||||
'<nav class="navbar">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
var contentHtml =
|
||||
'<div class="content" style="overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
|
||||
|
||||
var done = assert.async()
|
||||
var testElementIsActiveAfterScroll = function (element, target) {
|
||||
var deferred = $.Deferred()
|
||||
var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
|
||||
deferred.resolve()
|
||||
})
|
||||
$content.scrollTop(scrollHeight)
|
||||
return deferred.promise()
|
||||
}
|
||||
|
||||
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
|
||||
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
|
||||
.then(function () { done() })
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class to the correct element (nav markup)', function (assert) {
|
||||
assert.expect(2)
|
||||
var navbarHtml =
|
||||
'<nav class="navbar">'
|
||||
+ '<nav class="nav">'
|
||||
+ '<a class="nav-link" id="a-1" href="#div-1">div 1</a>'
|
||||
+ '<a class="nav-link" id="a-2" href="#div-2">div 2</a>'
|
||||
+ '</nav>'
|
||||
+ '</nav>'
|
||||
var contentHtml =
|
||||
'<div class="content" style="overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
|
||||
|
||||
var done = assert.async()
|
||||
var testElementIsActiveAfterScroll = function (element, target) {
|
||||
var deferred = $.Deferred()
|
||||
var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
|
||||
deferred.resolve()
|
||||
})
|
||||
$content.scrollTop(scrollHeight)
|
||||
return deferred.promise()
|
||||
}
|
||||
|
||||
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
|
||||
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
|
||||
.then(function () { done() })
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class to the correct element (list-group markup)', function (assert) {
|
||||
assert.expect(2)
|
||||
var navbarHtml =
|
||||
'<nav class="navbar">'
|
||||
+ '<div class="list-group">'
|
||||
+ '<a class="list-group-item" id="a-1" href="#div-1">div 1</a>'
|
||||
+ '<a class="list-group-item" id="a-2" href="#div-2">div 2</a>'
|
||||
+ '</div>'
|
||||
+ '</nav>'
|
||||
var contentHtml =
|
||||
'<div class="content" style="overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
|
||||
|
||||
var done = assert.async()
|
||||
var testElementIsActiveAfterScroll = function (element, target) {
|
||||
var deferred = $.Deferred()
|
||||
var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($(element).hasClass('active'), 'target:' + target + ', element' + element)
|
||||
deferred.resolve()
|
||||
})
|
||||
$content.scrollTop(scrollHeight)
|
||||
return deferred.promise()
|
||||
}
|
||||
|
||||
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
|
||||
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') })
|
||||
.then(function () { done() })
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
|
||||
assert.expect(6)
|
||||
var times = 0
|
||||
var done = assert.async()
|
||||
var navbarHtml = '<nav id="navigation" class="navbar">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
|
||||
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="padding: 0; margin: 0">'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
|
||||
|
||||
function testActiveElements() {
|
||||
if (++times > 3) { return done() }
|
||||
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
|
||||
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
$content.scrollTop($content.scrollTop() + 10)
|
||||
}
|
||||
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class correctly when there are nested elements (nav markup)', function (assert) {
|
||||
assert.expect(6)
|
||||
var times = 0
|
||||
var done = assert.async()
|
||||
var navbarHtml = '<nav id="navigation" class="navbar">'
|
||||
+ '<nav class="nav">'
|
||||
+ '<a id="a-1" class="nav-link" href="#div-1">div 1</a>'
|
||||
+ '<nav class="nav">'
|
||||
+ '<a id="a-2" class="nav-link" href="#div-2">div 2</a>'
|
||||
+ '</nav>'
|
||||
+ '</nav>'
|
||||
+ '</nav>'
|
||||
|
||||
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="padding: 0; margin: 0">'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
|
||||
|
||||
function testActiveElements() {
|
||||
if (++times > 3) { return done() }
|
||||
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
|
||||
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
$content.scrollTop($content.scrollTop() + 10)
|
||||
}
|
||||
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) {
|
||||
assert.expect(6)
|
||||
var times = 0
|
||||
var done = assert.async()
|
||||
var navbarHtml = '<nav id="navigation" class="navbar">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
|
||||
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="padding: 0; margin: 0">'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
|
||||
|
||||
function testActiveElements() {
|
||||
if (++times > 3) { return done() }
|
||||
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
|
||||
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
$content.scrollTop($content.scrollTop() + 10)
|
||||
}
|
||||
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
QUnit.test('should add the active class correctly when there are nested elements (list-group markup)', function (assert) {
|
||||
assert.expect(6)
|
||||
var times = 0
|
||||
var done = assert.async()
|
||||
var navbarHtml = '<nav id="navigation" class="navbar">'
|
||||
+ '<div class="list-group">'
|
||||
+ '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>'
|
||||
+ '<div class="list-group">'
|
||||
+ '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
+ '</nav>'
|
||||
|
||||
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">'
|
||||
+ '<div id="div-1" style="padding: 0; margin: 0">'
|
||||
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '#navigation' })
|
||||
|
||||
function testActiveElements() {
|
||||
if (++times > 3) { return done() }
|
||||
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
|
||||
assert.ok($('#a-2').hasClass('active'), 'nav item for inner element has "active" class')
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
$content.scrollTop($content.scrollTop() + 10)
|
||||
}
|
||||
|
||||
testActiveElements()
|
||||
})
|
||||
|
||||
QUnit.test('should clear selection if above the first section', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var sectionHTML = '<div id="header" style="height: 500px;"></div>'
|
||||
+ '<nav id="navigation" class="navbar">'
|
||||
+ '<ul class="navbar-nav">'
|
||||
+ '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>'
|
||||
+ '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>'
|
||||
+ '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
$(sectionHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
|
||||
+ '<div id="spacer" style="height: 100px;"/>'
|
||||
+ '<div id="one" style="height: 100px;"/>'
|
||||
+ '<div id="two" style="height: 100px;"/>'
|
||||
+ '<div id="three" style="height: 100px;"/>'
|
||||
+ '<div id="spacer" style="height: 100px;"/>'
|
||||
+ '</div>'
|
||||
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, 0, 'selection cleared')
|
||||
done()
|
||||
})
|
||||
.scrollTop(0)
|
||||
})
|
||||
.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 = '<div id="header" style="height: 500px;"></div>'
|
||||
+ '<nav id="navigation" class="navbar">'
|
||||
+ '<ul class="navbar-nav">'
|
||||
+ '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>'
|
||||
+ '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>'
|
||||
+ '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
$(sectionHTML).appendTo('#qunit-fixture')
|
||||
|
||||
var negativeHeight = -10
|
||||
var startOfSectionTwo = 101
|
||||
|
||||
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">'
|
||||
+ '<div id="one" style="height: 100px;"/>'
|
||||
+ '<div id="two" style="height: 100px;"/>'
|
||||
+ '<div id="three" style="height: 100px;"/>'
|
||||
+ '<div id="spacer" style="height: 100px;"/>'
|
||||
+ '</div>'
|
||||
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 =
|
||||
'<nav class="navbar">'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>'
|
||||
+ '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>'
|
||||
+ '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>'
|
||||
+ '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>'
|
||||
+ '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
var contentHtml =
|
||||
'<div class="content" style="position: relative; overflow: auto; height: 100px">'
|
||||
+ '<div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>'
|
||||
+ '<div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>'
|
||||
+ '<div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>'
|
||||
+ '<div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>'
|
||||
+ '<div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(navbarHtml).appendTo('#qunit-fixture')
|
||||
var $content = $(contentHtml)
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapScrollspy({ offset: 0, target: '.navbar' })
|
||||
|
||||
var testElementIsActiveAfterScroll = function (element, target) {
|
||||
var deferred = $.Deferred()
|
||||
var scrollHeight = Math.ceil($content.scrollTop() + $(target).position().top)
|
||||
$content.one('scroll', function () {
|
||||
assert.ok($(element).hasClass('active'), 'target:' + target + ', element: ' + element)
|
||||
deferred.resolve()
|
||||
})
|
||||
$content.scrollTop(scrollHeight)
|
||||
return deferred.promise()
|
||||
}
|
||||
|
||||
var done = assert.async()
|
||||
$.when(testElementIsActiveAfterScroll('#li-100-5', '#div-100-5'))
|
||||
.then(function () { return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4') })
|
||||
.then(function () { return testElementIsActiveAfterScroll('#li-100-3', '#div-100-3') })
|
||||
.then(function () { return testElementIsActiveAfterScroll('#li-100-2', '#div-100-2') })
|
||||
.then(function () { return testElementIsActiveAfterScroll('#li-100-1', '#div-100-1') })
|
||||
.then(function () { done() })
|
||||
})
|
||||
|
||||
QUnit.test('should allow passed in option offset method: offset', function (assert) {
|
||||
assert.expect(4)
|
||||
|
||||
var testOffsetMethod = function (type) {
|
||||
var $navbar = $(
|
||||
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>'
|
||||
+ '<li class="nav-item"><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>'
|
||||
+ '<li class="nav-item"><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
)
|
||||
var $content = $(
|
||||
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="offset"' : '') + ' style="position: relative; overflow: auto; height: 100px">'
|
||||
+ '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>'
|
||||
+ '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>'
|
||||
+ '</div>'
|
||||
)
|
||||
|
||||
$navbar.appendTo('#qunit-fixture')
|
||||
$content.appendTo('#qunit-fixture')
|
||||
|
||||
if (type === 'js') {
|
||||
$content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'offset' })
|
||||
}
|
||||
else if (type === 'data') {
|
||||
$(window).trigger('load')
|
||||
}
|
||||
|
||||
var $target = $('#div-' + type + 'm-2')
|
||||
var scrollspy = $content.data('bs.scrollspy')
|
||||
|
||||
assert.ok(scrollspy._offsets[1] === $target.offset().top, 'offset method with ' + type + ' option')
|
||||
assert.ok(scrollspy._offsets[1] !== $target.position().top, 'position method with ' + type + ' option')
|
||||
$navbar.remove()
|
||||
$content.remove()
|
||||
}
|
||||
|
||||
testOffsetMethod('js')
|
||||
testOffsetMethod('data')
|
||||
})
|
||||
|
||||
QUnit.test('should allow passed in option offset method: position', function (assert) {
|
||||
assert.expect(4)
|
||||
|
||||
var testOffsetMethod = function (type) {
|
||||
var $navbar = $(
|
||||
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>'
|
||||
+ '<ul class="nav">'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>'
|
||||
+ '</ul>'
|
||||
+ '</nav>'
|
||||
)
|
||||
var $content = $(
|
||||
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="position"' : '') + ' style="position: relative; overflow: auto; height: 100px">'
|
||||
+ '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>'
|
||||
+ '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>'
|
||||
+ '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>'
|
||||
+ '</div>'
|
||||
)
|
||||
|
||||
$navbar.appendTo('#qunit-fixture')
|
||||
$content.appendTo('#qunit-fixture')
|
||||
|
||||
if (type === 'js') { $content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'position' }) }
|
||||
else if (type === 'data') { $(window).trigger('load') }
|
||||
|
||||
var $target = $('#div-' + type + 'm-2')
|
||||
var scrollspy = $content.data('bs.scrollspy')
|
||||
|
||||
assert.ok(scrollspy._offsets[1] !== $target.offset().top, 'offset method with ' + type + ' option')
|
||||
assert.ok(scrollspy._offsets[1] === $target.position().top, 'position method with ' + type + ' option')
|
||||
$navbar.remove()
|
||||
$content.remove()
|
||||
}
|
||||
|
||||
testOffsetMethod('js')
|
||||
testOffsetMethod('data')
|
||||
})
|
||||
|
||||
})
|
||||
@ -1,385 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('tabs plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).tab, 'tabs method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('tabs', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapTab = $.fn.tab.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.tab = $.fn.bootstrapTab
|
||||
delete $.fn.bootstrapTab
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.tab, 'undefined', 'tab was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>')
|
||||
$el.bootstrapTab()
|
||||
try {
|
||||
$el.bootstrapTab('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $tab = $el.bootstrapTab()
|
||||
assert.ok($tab instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($tab[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
|
||||
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('li:last a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(tabsHTML).find('li:first a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id', function (assert) {
|
||||
assert.expect(2)
|
||||
var pillsHTML = '<ul class="nav nav-pills">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
|
||||
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
|
||||
|
||||
$(pillsHTML).find('li:last a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(pillsHTML).find('li:first a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id in ordered list', function (assert) {
|
||||
assert.expect(2)
|
||||
var pillsHTML = '<ol class="nav nav-pills">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ol>'
|
||||
|
||||
$('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
|
||||
|
||||
$(pillsHTML).find('li:last a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(pillsHTML).find('li:first a').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id in nav list', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<nav class="nav">' +
|
||||
'<a href="#home">Home</a>' +
|
||||
'<a href="#profile">Profile</a>' +
|
||||
'</nav>'
|
||||
|
||||
$('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('a:last').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(tabsHTML).find('a:first').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should activate element by tab id in list group', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<div class="list-group">' +
|
||||
'<a href="#home">Home</a>' +
|
||||
'<a href="#profile">Profile</a>' +
|
||||
'</div>'
|
||||
|
||||
$('<nav><div id="home"></div><div id="profile"></div></nav>').appendTo('#qunit-fixture')
|
||||
|
||||
$(tabsHTML).find('a:last').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'profile')
|
||||
|
||||
$(tabsHTML).find('a:first').bootstrapTab('show')
|
||||
assert.strictEqual($('#qunit-fixture').find('.active').attr('id'), 'home')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire shown when show is prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div class="nav"/>')
|
||||
.on('show.bs.tab', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'show event fired')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.tab', function () {
|
||||
assert.ok(false, 'shown event fired')
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire shown when tab is already active', function (assert) {
|
||||
assert.expect(0)
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
|
||||
+ '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
|
||||
+ '<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
+ '<div class="tab-content">'
|
||||
+ '<div class="tab-pane active" id="home" role="tabpanel"></div>'
|
||||
+ '<div class="tab-pane" id="profile" role="tabpanel"></div>'
|
||||
+ '</div>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('a.active')
|
||||
.on('shown.bs.tab', function () {
|
||||
assert.ok(true, 'shown event fired')
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire shown when tab is disabled', function (assert) {
|
||||
assert.expect(0)
|
||||
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
|
||||
+ '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
|
||||
+ '<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
+ '<div class="tab-content">'
|
||||
+ '<div class="tab-pane active" id="home" role="tabpanel"></div>'
|
||||
+ '<div class="tab-pane" id="profile" role="tabpanel"></div>'
|
||||
+ '</div>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('a.disabled')
|
||||
.on('shown.bs.tab', function () {
|
||||
assert.ok(true, 'shown event fired')
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('show and shown events should reference correct relatedTarget', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var dropHTML =
|
||||
'<ul class="drop nav">'
|
||||
+ ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
|
||||
+ ' <ul class="dropdown-menu nav">'
|
||||
+ ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>'
|
||||
+ ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>'
|
||||
+ ' </ul>'
|
||||
+ ' </li>'
|
||||
+ '</ul>'
|
||||
|
||||
$(dropHTML)
|
||||
.find('ul > li:first a')
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('ul > li:last a')
|
||||
.on('show.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
|
||||
})
|
||||
.on('shown.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget')
|
||||
done()
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('should fire hide and hidden events', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first a')
|
||||
.on('hide.bs.tab', function () {
|
||||
assert.ok(true, 'hide event fired')
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last a')
|
||||
.bootstrapTab('show')
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first a')
|
||||
.on('hidden.bs.tab', function () {
|
||||
assert.ok(true, 'hidden event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last a')
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire hidden when hide is prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first a')
|
||||
.on('hide.bs.tab', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'hide event fired')
|
||||
done()
|
||||
})
|
||||
.on('hidden.bs.tab', function () {
|
||||
assert.ok(false, 'hidden event fired')
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last a')
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('hide and hidden events contain correct relatedTarget', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var tabsHTML = '<ul class="nav">'
|
||||
+ '<li><a href="#home">Home</a></li>'
|
||||
+ '<li><a href="#profile">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
|
||||
$(tabsHTML)
|
||||
.find('li:first a')
|
||||
.on('hide.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
|
||||
})
|
||||
.on('hidden.bs.tab', function (e) {
|
||||
assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget')
|
||||
done()
|
||||
})
|
||||
.bootstrapTab('show')
|
||||
.end()
|
||||
.find('li:last a')
|
||||
.bootstrapTab('show')
|
||||
})
|
||||
|
||||
QUnit.test('selected tab should have aria-selected', function (assert) {
|
||||
assert.expect(8)
|
||||
var tabsHTML = '<ul class="nav nav-tabs">'
|
||||
+ '<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>'
|
||||
+ '<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$tabs.find('li:first a').bootstrapTab('show')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
|
||||
|
||||
$tabs.find('li:last a').trigger('click')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after click, shown tab has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after click, hidden tab has aria-selected = false')
|
||||
|
||||
$tabs.find('li:first a').bootstrapTab('show')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'shown tab has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'hidden tab has aria-selected = false')
|
||||
|
||||
$tabs.find('li:first a').trigger('click')
|
||||
assert.strictEqual($tabs.find('.active').attr('aria-selected'), 'true', 'after second show event, shown tab still has aria-selected = true')
|
||||
assert.strictEqual($tabs.find('a:not(.active)').attr('aria-selected'), 'false', 'after second show event, hidden tab has aria-selected = false')
|
||||
})
|
||||
|
||||
QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
|
||||
assert.expect(2)
|
||||
var tabsHTML = '<ul class="nav nav-tabs">'
|
||||
+ '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
|
||||
+ '</ul>'
|
||||
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$tabs.find('li:last a').trigger('click')
|
||||
assert.notOk($tabs.find('li:first a').hasClass('active'))
|
||||
assert.ok($tabs.find('li:last a').hasClass('active'))
|
||||
})
|
||||
|
||||
QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
|
||||
assert.expect(3)
|
||||
var tabsHTML = '<ul class="nav nav-tabs">'
|
||||
+ '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>'
|
||||
+ '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
|
||||
+ '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>'
|
||||
+ '<div class="dropdown-menu">'
|
||||
+ '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>'
|
||||
+ '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>'
|
||||
+ '</div>'
|
||||
+ '</li>'
|
||||
+ '</ul>'
|
||||
var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$tabs.find('li:first > a').trigger('click')
|
||||
assert.ok($tabs.find('li:first a').hasClass('active'))
|
||||
assert.notOk($tabs.find('li:last > a').hasClass('active'))
|
||||
assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active'))
|
||||
})
|
||||
|
||||
QUnit.test('Nested tabs', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var tabsHTML =
|
||||
'<nav class="nav nav-tabs" role="tablist">'
|
||||
+ ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>'
|
||||
+ ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>'
|
||||
+ ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>'
|
||||
+ '</nav>'
|
||||
+ '<div class="tab-content">'
|
||||
+ ' <div class="tab-pane" id="x-tab1" role="tabpanel">'
|
||||
+ ' <nav class="nav nav-tabs" role="tablist">'
|
||||
+ ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>'
|
||||
+ ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>'
|
||||
+ ' </nav>'
|
||||
+ ' <div class="tab-content">'
|
||||
+ ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>'
|
||||
+ ' <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>'
|
||||
+ ' </div>'
|
||||
+ ' </div>'
|
||||
+ ' <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>'
|
||||
+ ' <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>'
|
||||
+ '</div>'
|
||||
|
||||
$(tabsHTML).appendTo('#qunit-fixture')
|
||||
|
||||
$('#tabNested2').on('shown.bs.tab', function () {
|
||||
assert.ok($('#x-tab1').hasClass('active'))
|
||||
done()
|
||||
})
|
||||
|
||||
$('#tab1').on('shown.bs.tab', function () {
|
||||
assert.ok($('#x-tab1').hasClass('active'))
|
||||
$('#tabNested2').trigger($.Event('click'))
|
||||
})
|
||||
.trigger($.Event('click'))
|
||||
})
|
||||
})
|
||||
@ -1,851 +0,0 @@
|
||||
$(function () {
|
||||
'use strict'
|
||||
|
||||
QUnit.module('tooltip plugin')
|
||||
|
||||
QUnit.test('should be defined on jquery object', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($(document.body).tooltip, 'tooltip method is defined')
|
||||
})
|
||||
|
||||
QUnit.module('tooltip', {
|
||||
beforeEach: function () {
|
||||
// Run all tests in noConflict mode -- it's the only way to ensure that the plugin works in noConflict mode
|
||||
$.fn.bootstrapTooltip = $.fn.tooltip.noConflict()
|
||||
},
|
||||
afterEach: function () {
|
||||
$.fn.tooltip = $.fn.bootstrapTooltip
|
||||
delete $.fn.bootstrapTooltip
|
||||
$('.tooltip').remove()
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should provide no conflict', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.strictEqual(typeof $.fn.tooltip, 'undefined', 'tooltip was set back to undefined (org value)')
|
||||
})
|
||||
|
||||
QUnit.test('should throw explicit error on undefined method', function (assert) {
|
||||
assert.expect(1)
|
||||
var $el = $('<div/>')
|
||||
$el.bootstrapTooltip()
|
||||
try {
|
||||
$el.bootstrapTooltip('noMethod')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'No method named "noMethod"')
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should return jquery collection containing the element', function (assert) {
|
||||
assert.expect(2)
|
||||
var $el = $('<div/>')
|
||||
var $tooltip = $el.bootstrapTooltip()
|
||||
assert.ok($tooltip instanceof $, 'returns jquery collection')
|
||||
assert.strictEqual($tooltip[0], $el[0], 'collection contains element')
|
||||
})
|
||||
|
||||
QUnit.test('should expose default settings', function (assert) {
|
||||
assert.expect(1)
|
||||
assert.ok($.fn.bootstrapTooltip.Constructor.Default, 'defaults is defined')
|
||||
})
|
||||
|
||||
QUnit.test('should empty title attribute', function (assert) {
|
||||
assert.expect(1)
|
||||
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>').bootstrapTooltip()
|
||||
assert.strictEqual($trigger.attr('title'), '', 'title attribute was emptied')
|
||||
})
|
||||
|
||||
QUnit.test('should add data attribute for referencing original title', function (assert) {
|
||||
assert.expect(1)
|
||||
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>').bootstrapTooltip()
|
||||
assert.strictEqual($trigger.attr('data-original-title'), 'Another tooltip', 'original title preserved in data attribute')
|
||||
})
|
||||
|
||||
QUnit.test('should add aria-describedby to the trigger on show', function (assert) {
|
||||
assert.expect(3)
|
||||
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.bootstrapTooltip()
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip('show')
|
||||
|
||||
var id = $('.tooltip').attr('id')
|
||||
|
||||
assert.strictEqual($('#' + id).length, 1, 'has a unique id')
|
||||
assert.strictEqual($('.tooltip').attr('aria-describedby'), $trigger.attr('id'), 'tooltip id and aria-describedby on trigger match')
|
||||
assert.ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby')
|
||||
})
|
||||
|
||||
QUnit.test('should remove aria-describedby from trigger on hide', function (assert) {
|
||||
assert.expect(2)
|
||||
var $trigger = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.bootstrapTooltip()
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$trigger.bootstrapTooltip('show')
|
||||
assert.ok($trigger[0].hasAttribute('aria-describedby'), 'trigger has aria-describedby')
|
||||
|
||||
$trigger.bootstrapTooltip('hide')
|
||||
assert.ok(!$trigger[0].hasAttribute('aria-describedby'), 'trigger does not have aria-describedby')
|
||||
})
|
||||
|
||||
QUnit.test('should assign a unique id tooltip element', function (assert) {
|
||||
assert.expect(2)
|
||||
$('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip('show')
|
||||
|
||||
var id = $('.tooltip').attr('id')
|
||||
|
||||
assert.strictEqual($('#' + id).length, 1, 'tooltip has unique id')
|
||||
assert.strictEqual(id.indexOf('tooltip'), 0, 'tooltip id has prefix')
|
||||
})
|
||||
|
||||
QUnit.test('should place tooltips relative to placement option', function (assert) {
|
||||
assert.expect(2)
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ placement: 'bottom' })
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
|
||||
assert
|
||||
.ok($('.tooltip')
|
||||
.is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
|
||||
assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
|
||||
})
|
||||
|
||||
QUnit.test('should allow html entities', function (assert) {
|
||||
assert.expect(2)
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ html: true })
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
|
||||
})
|
||||
|
||||
QUnit.test('should allow DOMElement title (html: false)', function (assert) {
|
||||
assert.expect(3)
|
||||
var title = document.createTextNode('<3 writing tests')
|
||||
var $tooltip = $('<a href="#" rel="tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ title: title })
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
|
||||
assert.notEqual($('.tooltip').length, 0, 'tooltip inserted')
|
||||
assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted')
|
||||
assert.ok(!$.contains($('.tooltip').get(0), title), 'title node copied, not moved')
|
||||
})
|
||||
|
||||
QUnit.test('should allow DOMElement title (html: true)', function (assert) {
|
||||
assert.expect(3)
|
||||
var title = document.createTextNode('<3 writing tests')
|
||||
var $tooltip = $('<a href="#" rel="tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ html: true, title: title })
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
|
||||
assert.notEqual($('.tooltip').length, 0, 'tooltip inserted')
|
||||
assert.strictEqual($('.tooltip').text(), '<3 writing tests', 'title inserted')
|
||||
assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied')
|
||||
})
|
||||
|
||||
|
||||
QUnit.test('should respect custom classes', function (assert) {
|
||||
assert.expect(2)
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' })
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
assert.strictEqual($tooltip.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
|
||||
})
|
||||
|
||||
QUnit.test('should fire show event', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"/>')
|
||||
.on('show.bs.tooltip', function () {
|
||||
assert.ok(true, 'show event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should throw an error when show is called on hidden elements', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
try {
|
||||
$('<div title="tooltip title" style="display: none"/>').bootstrapTooltip('show')
|
||||
}
|
||||
catch (err) {
|
||||
assert.strictEqual(err.message, 'Please use show on visible elements')
|
||||
done()
|
||||
}
|
||||
})
|
||||
|
||||
QUnit.test('should fire inserted event', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('inserted.bs.tooltip', function () {
|
||||
assert.notEqual($('.tooltip').length, 0, 'tooltip was inserted')
|
||||
assert.ok(true, 'inserted event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should fire shown event', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"></div>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
assert.ok(true, 'shown was called')
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire shown event when show was prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"/>')
|
||||
.on('show.bs.tooltip', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'show event fired')
|
||||
done()
|
||||
})
|
||||
.on('shown.bs.tooltip', function () {
|
||||
assert.ok(false, 'shown event fired')
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should fire hide event', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
$(this).bootstrapTooltip('hide')
|
||||
})
|
||||
.on('hide.bs.tooltip', function () {
|
||||
assert.ok(true, 'hide event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should fire hidden event', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
$(this).bootstrapTooltip('hide')
|
||||
})
|
||||
.on('hidden.bs.tooltip', function () {
|
||||
assert.ok(true, 'hidden event fired')
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should not fire hidden event when hide was prevented', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
$('<div title="tooltip title"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
$(this).bootstrapTooltip('hide')
|
||||
})
|
||||
.on('hide.bs.tooltip', function (e) {
|
||||
e.preventDefault()
|
||||
assert.ok(true, 'hide event fired')
|
||||
done()
|
||||
})
|
||||
.on('hidden.bs.tooltip', function () {
|
||||
assert.ok(false, 'hidden event fired')
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should destroy tooltip', function (assert) {
|
||||
assert.expect(7)
|
||||
var $tooltip = $('<div/>')
|
||||
.bootstrapTooltip()
|
||||
.on('click.foo', function () {})
|
||||
|
||||
assert.ok($tooltip.data('bs.tooltip'), 'tooltip has data')
|
||||
assert.ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events')
|
||||
assert.strictEqual($._data($tooltip[0], 'events').click[0].namespace, 'foo', 'tooltip has extra click.foo event')
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
$tooltip.bootstrapTooltip('dispose')
|
||||
|
||||
assert.ok(!$tooltip.hasClass('show'), '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')
|
||||
})
|
||||
|
||||
// QUnit.test('should show tooltip with delegate selector on click', function (assert) {
|
||||
// assert.expect(2)
|
||||
// var $div = $('<div><a href="#" rel="tooltip" title="Another tooltip"/></div>')
|
||||
// .appendTo('#qunit-fixture')
|
||||
// .bootstrapTooltip({
|
||||
// selector: 'a[rel="tooltip"]',
|
||||
// trigger: 'click'
|
||||
// })
|
||||
|
||||
// $div.find('a').trigger('click')
|
||||
// assert.ok($('.tooltip').is('.fade.in'), 'tooltip is faded in')
|
||||
|
||||
// $div.find('a').trigger('click')
|
||||
// assert.strictEqual($div.data('bs.tooltip').tip.parentNode, null, 'tooltip removed')
|
||||
// })
|
||||
|
||||
QUnit.test('should show tooltip when toggle is called', function (assert) {
|
||||
assert.expect(1)
|
||||
$('<a href="#" rel="tooltip" title="tooltip on toggle"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ trigger: 'manual' })
|
||||
.bootstrapTooltip('toggle')
|
||||
|
||||
assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active')
|
||||
})
|
||||
|
||||
QUnit.test('should hide previously shown tooltip when toggle is called on tooltip', function (assert) {
|
||||
assert.expect(1)
|
||||
$('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ trigger: 'manual' })
|
||||
.bootstrapTooltip('show')
|
||||
|
||||
$('.tooltip').bootstrapTooltip('toggle')
|
||||
assert.ok($('.tooltip').not('.fade.show'), 'tooltip was faded out')
|
||||
})
|
||||
|
||||
QUnit.test('should place tooltips inside body when container is body', function (assert) {
|
||||
assert.expect(3)
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ container: 'body' })
|
||||
.bootstrapTooltip('show')
|
||||
|
||||
assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body')
|
||||
assert.strictEqual($('#qunit-fixture > .tooltip').length, 0, 'tooltip is not in parent')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
assert.strictEqual($('body > .tooltip').length, 0, 'tooltip was removed from dom')
|
||||
})
|
||||
|
||||
QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var styles = '<style>'
|
||||
+ '.bs-tooltip-right { white-space: nowrap; }'
|
||||
+ '.bs-tooltip-right .tooltip-inner { max-width: none; }'
|
||||
+ '</style>'
|
||||
var $styles = $(styles).appendTo('head')
|
||||
|
||||
var $container = $('<div/>').appendTo('#qunit-fixture')
|
||||
$('<a href="#" rel="tooltip" title="very very very very very very very very long tooltip in one line"/>')
|
||||
.appendTo($container)
|
||||
.bootstrapTooltip({
|
||||
placement: 'right',
|
||||
trigger: 'manual'
|
||||
})
|
||||
.on('inserted.bs.tooltip', function () {
|
||||
var $tooltip = $($(this).data('bs.tooltip').tip)
|
||||
assert.ok($tooltip.hasClass('bs-tooltip-right'))
|
||||
assert.ok(typeof $tooltip.attr('style') === 'undefined')
|
||||
$styles.remove()
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should use title attribute for tooltip text', function (assert) {
|
||||
assert.expect(2)
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip()
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title from title attribute is set')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
|
||||
})
|
||||
|
||||
QUnit.test('should prefer title attribute over title option', function (assert) {
|
||||
assert.expect(2)
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Simple tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({
|
||||
title: 'This is a tooltip with some content'
|
||||
})
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'Simple tooltip', 'title is set from title attribute while preferred over title option')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
|
||||
})
|
||||
|
||||
QUnit.test('should use title option', function (assert) {
|
||||
assert.expect(2)
|
||||
var $tooltip = $('<a href="#" rel="tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({
|
||||
title: 'This is a tooltip with some content'
|
||||
})
|
||||
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
assert.strictEqual($('.tooltip').children('.tooltip-inner').text(), 'This is a tooltip with some content', 'title from title option is set')
|
||||
|
||||
$tooltip.bootstrapTooltip('hide')
|
||||
assert.strictEqual($('.tooltip').length, 0, 'tooltip removed from dom')
|
||||
})
|
||||
|
||||
QUnit.test('should not error when trying to show an top-placed tooltip that has been removed from the dom', function (assert) {
|
||||
assert.expect(1)
|
||||
var passed = true
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.one('show.bs.tooltip', function () {
|
||||
$(this).remove()
|
||||
})
|
||||
.bootstrapTooltip({ placement: 'top' })
|
||||
|
||||
try {
|
||||
$tooltip.bootstrapTooltip('show')
|
||||
} catch (err) {
|
||||
passed = false
|
||||
console.log(err)
|
||||
}
|
||||
|
||||
assert.ok(passed, '.tooltip(\'show\') should not throw an error if element no longer is in dom')
|
||||
})
|
||||
|
||||
QUnit.test('should place tooltip on top of element', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
|
||||
var containerHTML = '<div id="test">'
|
||||
+ '<p style="margin-top: 200px">'
|
||||
+ '<a href="#" title="very very very very very very very long tooltip">Hover me</a>'
|
||||
+ '</p>'
|
||||
+ '</div>'
|
||||
|
||||
var $container = $(containerHTML)
|
||||
.css({
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
textAlign: 'right',
|
||||
width: 300,
|
||||
height: 300
|
||||
})
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$container
|
||||
.find('a')
|
||||
.css('margin-top', 200)
|
||||
.bootstrapTooltip({
|
||||
placement: 'top',
|
||||
animate: false
|
||||
})
|
||||
.on('shown.bs.tooltip', function () {
|
||||
var $tooltip = $($(this).data('bs.tooltip').tip)
|
||||
if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
|
||||
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top))
|
||||
}
|
||||
else {
|
||||
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
|
||||
}
|
||||
done()
|
||||
})
|
||||
.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('should show tooltip if leave event hasn\'t occurred before delay expires', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ delay: 150 })
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip is not faded active')
|
||||
}, 100)
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($('.tooltip').is('.fade.show'), '200ms: tooltip is faded active')
|
||||
done()
|
||||
}, 200)
|
||||
|
||||
$tooltip.trigger('mouseenter')
|
||||
})
|
||||
|
||||
QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ delay: 150 })
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
|
||||
$tooltip.trigger('mouseout')
|
||||
}, 100)
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '200ms: tooltip not faded active')
|
||||
done()
|
||||
}, 200)
|
||||
|
||||
$tooltip.trigger('mouseenter')
|
||||
})
|
||||
|
||||
QUnit.test('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ delay: { show: 0, hide: 150 } })
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
|
||||
$tooltip.trigger('mouseout')
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($('.tooltip').is('.fade.show'), '100ms: tooltip still faded active')
|
||||
$tooltip.trigger('mouseenter')
|
||||
}, 100)
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($('.tooltip').is('.fade.show'), '200ms: tooltip still faded active')
|
||||
done()
|
||||
}, 200)
|
||||
}, 0)
|
||||
|
||||
$tooltip.trigger('mouseenter')
|
||||
})
|
||||
|
||||
QUnit.test('should not show tooltip if leave event occurs before delay expires', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ delay: 150 })
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
|
||||
$tooltip.trigger('mouseout')
|
||||
}, 100)
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '200ms: tooltip not faded active')
|
||||
done()
|
||||
}, 200)
|
||||
|
||||
$tooltip.trigger('mouseenter')
|
||||
})
|
||||
|
||||
QUnit.test('should not show tooltip if leave event occurs before delay expires, even if hide delay is 0', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ delay: { show: 150, hide: 0 } })
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
|
||||
$tooltip.trigger('mouseout')
|
||||
}, 100)
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$('.tooltip').is('.fade.show'), '250ms: tooltip not faded active')
|
||||
done()
|
||||
}, 250)
|
||||
|
||||
$tooltip.trigger('mouseenter')
|
||||
})
|
||||
|
||||
QUnit.test('should wait 200ms before hiding the tooltip', function (assert) {
|
||||
assert.expect(3)
|
||||
var done = assert.async()
|
||||
|
||||
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ delay: { show: 0, hide: 150 } })
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
|
||||
|
||||
$tooltip.trigger('mouseout')
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '100ms: tooltip still faded active')
|
||||
}, 100)
|
||||
|
||||
setTimeout(function () {
|
||||
assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
|
||||
done()
|
||||
}, 200)
|
||||
|
||||
}, 0)
|
||||
|
||||
$tooltip.trigger('mouseenter')
|
||||
})
|
||||
|
||||
QUnit.test('should not reload the tooltip on subsequent mouseenter events', function (assert) {
|
||||
assert.expect(1)
|
||||
var titleHtml = function () {
|
||||
var uid = Util.getUID('tooltip')
|
||||
return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
|
||||
}
|
||||
|
||||
var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$tooltip.bootstrapTooltip({
|
||||
html: true,
|
||||
animation: false,
|
||||
trigger: 'hover',
|
||||
delay: { show: 0, hide: 500 },
|
||||
container: $tooltip,
|
||||
title: titleHtml
|
||||
})
|
||||
|
||||
$('#tt-outer').trigger('mouseenter')
|
||||
|
||||
var currentUid = $('#tt-content').text()
|
||||
|
||||
$('#tt-content').trigger('mouseenter')
|
||||
assert.strictEqual(currentUid, $('#tt-content').text())
|
||||
})
|
||||
|
||||
QUnit.test('should not reload the tooltip if the mouse leaves and re-enters before hiding', function (assert) {
|
||||
assert.expect(4)
|
||||
|
||||
var titleHtml = function () {
|
||||
var uid = Util.getUID('tooltip')
|
||||
return '<p id="tt-content">' + uid + '</p><p>' + uid + '</p><p>' + uid + '</p>'
|
||||
}
|
||||
|
||||
var $tooltip = $('<span id="tt-outer" rel="tooltip" data-trigger="hover" data-placement="top">some text</span>')
|
||||
.appendTo('#qunit-fixture')
|
||||
|
||||
$tooltip.bootstrapTooltip({
|
||||
html: true,
|
||||
animation: false,
|
||||
trigger: 'hover',
|
||||
delay: { show: 0, hide: 500 },
|
||||
title: titleHtml
|
||||
})
|
||||
|
||||
var obj = $tooltip.data('bs.tooltip')
|
||||
|
||||
$('#tt-outer').trigger('mouseenter')
|
||||
|
||||
var currentUid = $('#tt-content').text()
|
||||
|
||||
$('#tt-outer').trigger('mouseleave')
|
||||
assert.strictEqual(currentUid, $('#tt-content').text())
|
||||
|
||||
assert.ok(obj._hoverState === 'out', 'the tooltip hoverState should be set to "out"')
|
||||
|
||||
$('#tt-outer').trigger('mouseenter')
|
||||
assert.ok(obj._hoverState === 'show', 'the tooltip hoverState should be set to "show"')
|
||||
|
||||
assert.strictEqual(currentUid, $('#tt-content').text())
|
||||
})
|
||||
|
||||
QUnit.test('should do nothing when an attempt is made to hide an uninitialized tooltip', function (assert) {
|
||||
assert.expect(1)
|
||||
|
||||
var $tooltip = $('<span data-toggle="tooltip" title="some tip">some text</span>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.on('hidden.bs.tooltip shown.bs.tooltip', function () {
|
||||
assert.ok(false, 'should not fire any tooltip events')
|
||||
})
|
||||
.bootstrapTooltip('hide')
|
||||
assert.strictEqual(typeof $tooltip.data('bs.tooltip'), 'undefined', 'should not initialize the tooltip')
|
||||
})
|
||||
|
||||
QUnit.test('should not remove tooltip if multiple triggers are set and one is still active', function (assert) {
|
||||
assert.expect(41)
|
||||
var $el = $('<button>Trigger</button>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ trigger: 'click hover focus', animation: false })
|
||||
var tooltip = $el.data('bs.tooltip')
|
||||
var $tooltip = $(tooltip.getTipElement())
|
||||
|
||||
function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' }
|
||||
|
||||
var tests = [
|
||||
['mouseenter', 'mouseleave'],
|
||||
|
||||
['focusin', 'focusout'],
|
||||
|
||||
['click', 'click'],
|
||||
|
||||
['mouseenter', 'focusin', 'focusout', 'mouseleave'],
|
||||
['mouseenter', 'focusin', 'mouseleave', 'focusout'],
|
||||
|
||||
['focusin', 'mouseenter', 'mouseleave', 'focusout'],
|
||||
['focusin', 'mouseenter', 'focusout', 'mouseleave'],
|
||||
|
||||
['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'],
|
||||
['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'],
|
||||
['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout']
|
||||
]
|
||||
|
||||
assert.ok(!showingTooltip())
|
||||
|
||||
$.each(tests, function (idx, triggers) {
|
||||
for (var i = 0, len = triggers.length; i < len; i++) {
|
||||
$el.trigger(triggers[i])
|
||||
assert.equal(i < len - 1, showingTooltip())
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
QUnit.test('should show on first trigger after hide', function (assert) {
|
||||
assert.expect(3)
|
||||
var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip({ trigger: 'click hover focus', animation: false })
|
||||
|
||||
var tooltip = $el.data('bs.tooltip')
|
||||
var $tooltip = $(tooltip.getTipElement())
|
||||
|
||||
function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' }
|
||||
|
||||
$el.trigger('click')
|
||||
assert.ok(showingTooltip(), 'tooltip is faded in')
|
||||
|
||||
$el.bootstrapTooltip('hide')
|
||||
assert.ok(!showingTooltip(), 'tooltip was faded out')
|
||||
|
||||
$el.trigger('click')
|
||||
assert.ok(showingTooltip(), 'tooltip is faded in again')
|
||||
})
|
||||
|
||||
QUnit.test('should hide tooltip when their containing modal is closed', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var templateHTML = '<div id="modal-test" class="modal">' +
|
||||
'<div class="modal-dialog" role="document">' +
|
||||
'<div class="modal-content">' +
|
||||
'<div class="modal-body">' +
|
||||
'<a id="tooltipTest" href="#" data-toggle="tooltip" title="Some tooltip text!">Tooltip</a>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$(templateHTML).appendTo('#qunit-fixture')
|
||||
$('#tooltipTest')
|
||||
.bootstrapTooltip({ trigger: 'manuel' })
|
||||
.on('shown.bs.tooltip', function () {
|
||||
$('#modal-test').modal('hide')
|
||||
})
|
||||
.on('hide.bs.tooltip', function () {
|
||||
assert.ok(true, 'tooltip hide')
|
||||
done()
|
||||
})
|
||||
|
||||
$('#modal-test')
|
||||
.on('shown.bs.modal', function () {
|
||||
$('#tooltipTest').bootstrapTooltip('show')
|
||||
})
|
||||
.modal('show')
|
||||
})
|
||||
|
||||
QUnit.test('should reset tip classes when hidden event triggered', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip('show')
|
||||
.on('hidden.bs.tooltip', function () {
|
||||
var tooltip = $el.data('bs.tooltip')
|
||||
var $tooltip = $(tooltip.getTipElement())
|
||||
assert.ok($tooltip.hasClass('tooltip'))
|
||||
assert.ok($tooltip.hasClass('fade'))
|
||||
done()
|
||||
})
|
||||
|
||||
$el.bootstrapTooltip('hide')
|
||||
})
|
||||
|
||||
QUnit.test('should convert number in title to string', function (assert) {
|
||||
assert.expect(1)
|
||||
var done = assert.async()
|
||||
var $el = $('<a href="#" rel="tooltip" title="7"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip('show')
|
||||
.on('shown.bs.tooltip', function () {
|
||||
var tooltip = $el.data('bs.tooltip')
|
||||
var $tooltip = $(tooltip.getTipElement())
|
||||
assert.strictEqual($tooltip.children().text(), '7')
|
||||
done()
|
||||
})
|
||||
|
||||
$el.bootstrapTooltip('show')
|
||||
})
|
||||
|
||||
QUnit.test('tooltip should be shown right away after the call of disable/enable', function (assert) {
|
||||
assert.expect(2)
|
||||
var done = assert.async()
|
||||
|
||||
var $trigger = $('<a href="#" rel="tooltip" data-trigger="click" title="Another tooltip"/>')
|
||||
.appendTo('#qunit-fixture')
|
||||
.bootstrapTooltip()
|
||||
.on('shown.bs.tooltip', function () {
|
||||
assert.strictEqual($('.tooltip').hasClass('show'), true)
|
||||
done()
|
||||
})
|
||||
|
||||
|
||||
$trigger.bootstrapTooltip('disable')
|
||||
$trigger.trigger($.Event('click'))
|
||||
setTimeout(function () {
|
||||
assert.strictEqual($('.tooltip').length === 0, true)
|
||||
$trigger.bootstrapTooltip('enable')
|
||||
$trigger.trigger($.Event('click'))
|
||||
}, 200)
|
||||
})
|
||||
})
|
||||
436
assets/javascript/tests/vendor/qunit.css
vendored
436
assets/javascript/tests/vendor/qunit.css
vendored
@ -1,436 +0,0 @@
|
||||
/*!
|
||||
* QUnit 2.4.0
|
||||
* https://qunitjs.com/
|
||||
*
|
||||
* Copyright jQuery Foundation and other contributors
|
||||
* Released under the MIT license
|
||||
* https://jquery.org/license
|
||||
*
|
||||
* Date: 2017-07-08T15:20Z
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header (excluding toolbar) */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699A4;
|
||||
background-color: #0D3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: 400;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #C2CCD1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-filteredTest {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
color: #366097;
|
||||
background-color: #F4FF77;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
color: #FFF;
|
||||
background-color: #2B81AF;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
|
||||
/** Toolbar */
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
color: #5E740B;
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar .clearfix {
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar input[type=checkbox],
|
||||
#qunit-testrunner-toolbar input[type=radio] {
|
||||
margin: 3px;
|
||||
vertical-align: -2px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar input[type=text] {
|
||||
box-sizing: border-box;
|
||||
height: 1.6em;
|
||||
}
|
||||
|
||||
.qunit-url-config,
|
||||
.qunit-filter,
|
||||
#qunit-modulefilter {
|
||||
display: inline-block;
|
||||
line-height: 2.1em;
|
||||
}
|
||||
|
||||
.qunit-filter,
|
||||
#qunit-modulefilter {
|
||||
float: right;
|
||||
position: relative;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.qunit-url-config label {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-search {
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-search-container:after {
|
||||
position: absolute;
|
||||
right: 0.3em;
|
||||
content: "\25bc";
|
||||
color: black;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown {
|
||||
/* align with #qunit-modulefilter-search */
|
||||
box-sizing: border-box;
|
||||
width: 400px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: 0.8em;
|
||||
|
||||
border: 1px solid #D3D3D3;
|
||||
border-top: none;
|
||||
border-radius: 0 0 .25em .25em;
|
||||
color: #000;
|
||||
background-color: #F5F5F5;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown .clickable.checked {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
background-color: #D2E0E6;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown .clickable:hover {
|
||||
color: #FFF;
|
||||
background-color: #0D3349;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-actions {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
|
||||
/* align with #qunit-modulefilter-dropdown-list */
|
||||
font: smaller/1.5em sans-serif;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > * {
|
||||
box-sizing: border-box;
|
||||
max-height: 2.8em;
|
||||
display: block;
|
||||
padding: 0.4em;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > button {
|
||||
float: right;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > :last-child {
|
||||
/* insert padding to align with checkbox margins */
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
border-top: 2px groove threedhighlight;
|
||||
padding: 0.4em 0 0;
|
||||
font: smaller/1.5em sans-serif;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown-list li {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-dropdown-list .clickable {
|
||||
display: block;
|
||||
padding-left: 0.15em;
|
||||
}
|
||||
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 1em 0.4em 1em;
|
||||
border-bottom: 1px solid #FFF;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests > li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li.running,
|
||||
#qunit-tests li.pass,
|
||||
#qunit-tests li.fail,
|
||||
#qunit-tests li.skipped,
|
||||
#qunit-tests li.aborted {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.running,
|
||||
#qunit-tests.hidepass li.pass:not(.todo) {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li.skipped strong {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #C2CCD1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests li p a {
|
||||
padding: 0.25em;
|
||||
color: #6B6464;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #FFF;
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-source {
|
||||
margin: 0.6em 0 0.3em;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: 0.2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 0.5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
color: #374E0C;
|
||||
background-color: #E0F2BE;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
color: #500;
|
||||
background-color: #FFCACA;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: #000; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #FFF;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3C510C;
|
||||
background-color: #FFF;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #FFF;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: #008000; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/*** Aborted tests */
|
||||
#qunit-tests .aborted { color: #000; background-color: orange; }
|
||||
/*** Skipped tests */
|
||||
|
||||
#qunit-tests .skipped {
|
||||
background-color: #EBECE9;
|
||||
}
|
||||
|
||||
#qunit-tests .qunit-todo-label,
|
||||
#qunit-tests .qunit-skipped-label {
|
||||
background-color: #F4FF77;
|
||||
display: inline-block;
|
||||
font-style: normal;
|
||||
color: #366097;
|
||||
line-height: 1.8em;
|
||||
padding: 0 0.5em;
|
||||
margin: -0.4em 0.4em -0.4em 0;
|
||||
}
|
||||
|
||||
#qunit-tests .qunit-todo-label {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
color: #2B81AF;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid #FFF;
|
||||
}
|
||||
#qunit-testresult .clearfix {
|
||||
height: 0;
|
||||
clear: both;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: 700;
|
||||
}
|
||||
#qunit-testresult-display {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
width: 85%;
|
||||
float:left;
|
||||
}
|
||||
#qunit-testresult-controls {
|
||||
padding: 0.5em 1em 0.5em 1em;
|
||||
width: 10%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
5048
assets/javascript/tests/vendor/qunit.js
vendored
5048
assets/javascript/tests/vendor/qunit.js
vendored
File diff suppressed because it is too large
Load Diff
@ -1,51 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Alert</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Alert <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<div class="alert alert-warning alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<p>
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
|
||||
</p>
|
||||
<p>
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger alert-dismissible fade show" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<p>
|
||||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting 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>
|
||||
<p>
|
||||
<button type="button" class="btn btn-danger">Take this action</button>
|
||||
<button type="button" class="btn btn-primary">Or do this</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/alert.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,51 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Button</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Button <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
|
||||
<p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p>
|
||||
<p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p>
|
||||
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 3
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p>
|
||||
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/button.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,56 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Carousel</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Carousel <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
|
||||
|
||||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
|
||||
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item active">
|
||||
<img src="https://i.imgur.com/iEZgY7Y.jpg" alt="First slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://i.imgur.com/eNWn1Xs.jpg" alt="Second slide">
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide">
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/carousel.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
// Test to show that the carousel doesn't slide when the current tab isn't visible
|
||||
$('#carousel-example-generic').on('slid.bs.carousel', function(event) {
|
||||
console.log('slid at ', event.timeStamp)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Collapse</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Collapse <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<div id="accordion" role="tablist">
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingOne">
|
||||
<h5 class="mb-0">
|
||||
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="card-body">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingTwo">
|
||||
<h5 class="mb-0">
|
||||
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo">
|
||||
<div class="card-body">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingThree">
|
||||
<h5 class="mb-0">
|
||||
<a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree">
|
||||
<div class="card-body">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,126 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Dropdown</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Dropdown <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarResponsive">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ul class="nav nav-pills mt-3">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown2">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12 mt-4">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup split</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Dropup split</span>
|
||||
</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</button>
|
||||
<div class="dropdown-menu">
|
||||
<a class="dropdown-item" href="#">Action</a>
|
||||
<a class="dropdown-item" href="#">Another action</a>
|
||||
<a class="dropdown-item" href="#">Something else here</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
This dropdown's menu is right-aligned
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 mt-4">
|
||||
<div class="btn-group dropup" role="group">
|
||||
<a href="#" class="btn btn-secondary">Dropup split align right</a>
|
||||
<button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Product actions</span>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here with a long text</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup align right</button>
|
||||
<div class="dropdown-menu dropdown-menu-right">
|
||||
<button class="dropdown-item" type="button">Action</button>
|
||||
<button class="dropdown-item" type="button">Another action</button>
|
||||
<button class="dropdown-item" type="button">Something else here with a long text</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,231 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Modal</title>
|
||||
<style>
|
||||
#tall {
|
||||
height: 1500px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-full navbar-dark bg-dark">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
|
||||
<div class="collapse navbar-expand-md" id="navbarResponsive">
|
||||
<a class="navbar-brand" href="#">This shouldn't jump!</a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active">
|
||||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-3">
|
||||
<h1>Modal <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h4>Text in a modal</h4>
|
||||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||||
|
||||
<h4>Popover in a modal</h4>
|
||||
<p>This <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p>
|
||||
|
||||
|
||||
<h4>Tooltips in a modal</h4>
|
||||
<p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p>
|
||||
|
||||
<div id="accordion" role="tablist">
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingOne">
|
||||
<h5 class="mb-0">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="card-body">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingTwo">
|
||||
<h5 class="mb-0">
|
||||
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
<div class="card-body">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" role="tab" id="headingThree">
|
||||
<h5 class="mb-0">
|
||||
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
<div class="card-body">
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h4>Overflowing text to show scroll behavior</h4>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="firefoxModal" tabindex="-1" role="dialog" aria-labelledby="firefoxModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ol>
|
||||
<li>Ensure you're using Firefox.</li>
|
||||
<li>Open a new tab and then switch back to this tab.</li>
|
||||
<li>Click into this input: <input type="text" id="ff-bug-input"></li>
|
||||
<li>Switch to the other tab and then back to this tab.</li>
|
||||
</ol>
|
||||
<p>Test result: <strong id="ff-bug-test-result"></strong></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary">Save changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-primary btn-lg" id="tall-toggle">
|
||||
Toggle tall <body> content
|
||||
</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#firefoxModal">
|
||||
Launch Firefox bug test modal
|
||||
</button>
|
||||
(<a href="https://github.com/twbs/bootstrap/issues/18365">See Issue #18365</a>)
|
||||
|
||||
<br><br>
|
||||
|
||||
<div class="bg-dark text-white p-2" id="tall" style="display: none;">
|
||||
Tall body content to force the page to have a scrollbar.
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="<div class="modal fade the-bad" tabindex="-1" role="dialog"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-target attribute of it's show-button</div></div></div></div>">
|
||||
Modal with an XSS inside the data-target
|
||||
</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
<button type="button" class="btn btn-secondary btn-lg" id="btnPreventModal">
|
||||
Launch prevented modal on hide (to see the result open your console)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/modal.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
<script src="../../dist/tooltip.js"></script>
|
||||
<script src="../../dist/popover.js"></script>
|
||||
|
||||
<script>
|
||||
var firefoxTestDone = false
|
||||
function reportFirefoxTestResult(result) {
|
||||
if (!firefoxTestDone) {
|
||||
$('#ff-bug-test-result')
|
||||
.addClass(result ? 'text-success' : 'text-danger')
|
||||
.text(result ? 'PASS' : 'FAIL')
|
||||
}
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover()
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
|
||||
$('#tall-toggle').click(function () {
|
||||
$('#tall').toggle()
|
||||
})
|
||||
|
||||
$('#ff-bug-input').one('focus', function () {
|
||||
$('#firefoxModal').on('focus', reportFirefoxTestResult.bind(false))
|
||||
$('#ff-bug-input').on('focus', reportFirefoxTestResult.bind(true))
|
||||
})
|
||||
|
||||
$('#btnPreventModal').on('click', function () {
|
||||
$('#firefoxModal').one('shown.bs.modal', function () {
|
||||
$(this).modal('hide')
|
||||
})
|
||||
.one('hide.bs.modal', function (event) {
|
||||
event.preventDefault()
|
||||
if ($(this).data('bs.modal')._isTransitioning) {
|
||||
console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
|
||||
} else {
|
||||
console.log('Test passed')
|
||||
$(this).modal('hide') // work as expected
|
||||
}
|
||||
})
|
||||
.modal('show')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Popover</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Popover <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on auto
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Default placement was on top but not enough place">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/tooltip.js"></script>
|
||||
<script src="../../dist/popover.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="popover"]').popover()
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,96 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Scrollspy</title>
|
||||
<style>
|
||||
body { padding-top: 70px; }
|
||||
</style>
|
||||
</head>
|
||||
<body data-spy="scroll" data-target=".navbar" data-offset="70">
|
||||
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
|
||||
<a class="navbar-brand" href="#">Scrollspy test</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#fat">@fat</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#mdo">@mdo</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown">
|
||||
<a class="dropdown-item" href="#one">One</a>
|
||||
<a class="dropdown-item" href="#two">Two</a>
|
||||
<a class="dropdown-item" href="#three">Three</a>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#final">Final</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<h2 id="fat">@fat</h2>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<hr>
|
||||
<h2 id="mdo">@mdo</h2>
|
||||
<p>Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<hr>
|
||||
<h2 id="one">one</h2>
|
||||
<p>Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<hr>
|
||||
<h2 id="two">two</h2>
|
||||
<p>In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<hr>
|
||||
<h2 id="three">three</h2>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</p>
|
||||
<hr>
|
||||
<h2 id="final">Final section</h2>
|
||||
<p>Ad leggings keytar, brunch id art party dolor labore.</p>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/scrollspy.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
<script src="../../dist/collapse.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,233 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Tab</title>
|
||||
<style>
|
||||
h4 {
|
||||
margin: 40px 0 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Tab <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<h4>Tabs without fade</h4>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown">
|
||||
<a class="dropdown-item" data-toggle="tab" href="#fat" role="tab">@fat</a>
|
||||
<a class="dropdown-item" data-toggle="tab" href="#mdo" role="tab">@mdo</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" role="tablist">
|
||||
<div class="tab-pane active" id="home" role="tabpanel">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="profile" role="tabpanel">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="fat" role="tabpanel">
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="mdo" role="tabpanel">
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Tabs with fade</h4>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown2">
|
||||
<a class="dropdown-item" data-toggle="tab" href="#fat2" role="tab">@fat</a>
|
||||
<a class="dropdown-item" data-toggle="tab" href="#mdo2" role="tab">@mdo</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" role="tablist">
|
||||
<div class="tab-pane fade show active" id="home2" role="tabpanel">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile2" role="tabpanel">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="fat2" role="tabpanel">
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="mdo2" role="tabpanel">
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Tabs without fade (no initially active pane)</h4>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown3">
|
||||
<a class="dropdown-item" data-toggle="tab" href="#fat3" role="tab">@fat</a>
|
||||
<a class="dropdown-item" data-toggle="tab" href="#mdo3" role="tab">@mdo</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" role="tablist">
|
||||
<div class="tab-pane" id="home3" role="tabpanel">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="profile3" role="tabpanel">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="fat3" role="tabpanel">
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
</div>
|
||||
<div class="tab-pane" id="mdo3" role="tabpanel">
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Tabs with fade (no initially active pane)</h4>
|
||||
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a>
|
||||
</li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown4">
|
||||
<a class="dropdown-item" data-toggle="tab" href="#fat4" role="tab">@fat</a>
|
||||
<a class="dropdown-item" data-toggle="tab" href="#mdo4" role="tab">@mdo</a>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade" id="home4" role="tabpanel">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="profile4" role="tabpanel">
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="fat4" role="tabpanel">
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="mdo4" role="tabpanel">
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Tabs with nav (with fade)</h4>
|
||||
<nav class="nav nav-pills">
|
||||
<a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a>
|
||||
<a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a>
|
||||
<div class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<div class="dropdown-menu" aria-labelledby="dropdown5">
|
||||
<a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a>
|
||||
<a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a>
|
||||
</div>
|
||||
</div>
|
||||
<a class="nav-link nav-item disabled" href="#">Disabled</a>
|
||||
</nav>
|
||||
|
||||
<div class="tab-content" role="tabpanel">
|
||||
<div role="tabpanel" class="tab-pane fade show active" id="home5">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div role="tabpanel" class="tab-pane fade" id="profile5">
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="fat5" role="tabpanel">
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="mdo5" role="tabpanel">
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Tabs with list-group (with fade)</h4>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="list-group" id="list-tab" role="tablist">
|
||||
<a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
|
||||
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="tab-content" id="nav-tabContent">
|
||||
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
|
||||
<p>Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
|
||||
<p>Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
|
||||
<p>Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.</p>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
|
||||
<p>Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/tab.js"></script>
|
||||
<script src="../../dist/dropdown.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,71 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
|
||||
<title>Tooltip</title>
|
||||
<style>
|
||||
#target {
|
||||
border: 1px solid;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
border: 1px solid;
|
||||
margin-left: 50px;
|
||||
-webkit-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
margin-top: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Tooltip <small>Bootstrap Visual Test</small></h1>
|
||||
|
||||
<p class="text-muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto">
|
||||
Tooltip on auto
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
|
||||
Tooltip with HTML
|
||||
</button>
|
||||
<svg width="30" height="20">
|
||||
<circle cx="15" cy="10" r="10" fill="#62448F" data-toggle="tooltip" data-placement="top" title="Tooltip on SVG" />
|
||||
</svg>
|
||||
</p>
|
||||
<div id="target" title="Test tooltip on transformed element"></div>
|
||||
</div>
|
||||
|
||||
<script src="../../../assets/js/vendor/jquery-slim.min.js"></script>
|
||||
<script src="../../../assets/js/vendor/popper.min.js"></script>
|
||||
<script src="../../dist/util.js"></script>
|
||||
<script src="../../dist/tooltip.js"></script>
|
||||
|
||||
<script>
|
||||
$(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip()
|
||||
$('#target').tooltip({
|
||||
placement : 'top',
|
||||
trigger : 'manual'
|
||||
}).tooltip('show')
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
assets/scss
Symbolic link
1
assets/scss
Symbolic link
@ -0,0 +1 @@
|
||||
../lego/assests/scss
|
||||
@ -1,49 +0,0 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.alert {
|
||||
position: relative;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
margin-bottom: $alert-margin-bottom;
|
||||
border: $alert-border-width solid transparent;
|
||||
@include border-radius($alert-border-radius);
|
||||
}
|
||||
|
||||
// Headings for larger alerts
|
||||
.alert-heading {
|
||||
// Specified to prevent conflicts of changing $headings-color
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Provide class for links that match alerts
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
}
|
||||
|
||||
|
||||
// Dismissible alerts
|
||||
//
|
||||
// Expand the right padding and account for the close button's positioning.
|
||||
|
||||
.alert-dismissible {
|
||||
// Adjust close link position
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: $alert-padding-y $alert-padding-x;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Alternate styles
|
||||
//
|
||||
// Generate contextual modifier classes for colorizing the alert.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.alert-#{$color} {
|
||||
@include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
// Base class
|
||||
//
|
||||
// Requires one of the contextual, color modifier classes for `color` and
|
||||
// `background-color`.
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: $badge-padding-y $badge-padding-x;
|
||||
font-size: $badge-font-size;
|
||||
font-weight: $badge-font-weight;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: baseline;
|
||||
@include border-radius($badge-border-radius);
|
||||
|
||||
// Empty badges collapse automatically
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Quick fix for badges in buttons
|
||||
.btn .badge {
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
// Pill badges
|
||||
//
|
||||
// Make them extra rounded with a modifier to replace v3's badges.
|
||||
|
||||
.badge-pill {
|
||||
padding-right: $badge-pill-padding-x;
|
||||
padding-left: $badge-pill-padding-x;
|
||||
@include border-radius($badge-pill-border-radius);
|
||||
}
|
||||
|
||||
// Colors
|
||||
//
|
||||
// Contextual variations (linked badges get darker on :hover).
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.badge-#{$color} {
|
||||
@include badge-variant($value);
|
||||
}
|
||||
}
|
||||
@ -1,38 +0,0 @@
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
|
||||
margin-bottom: $breadcrumb-margin-bottom;
|
||||
list-style: none;
|
||||
background-color: $breadcrumb-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
// The separator between breadcrumbs (by default, a forward-slash: "/")
|
||||
+ .breadcrumb-item::before {
|
||||
display: inline-block; // Suppress underlining of the separator in modern browsers
|
||||
padding-right: $breadcrumb-item-padding;
|
||||
padding-left: $breadcrumb-item-padding;
|
||||
color: $breadcrumb-divider-color;
|
||||
content: "#{$breadcrumb-divider}";
|
||||
}
|
||||
|
||||
// IE9-11 hack to properly handle hyperlink underlines for breadcrumbs built
|
||||
// without `<ul>`s. The `::before` pseudo-element generates an element
|
||||
// *within* the .breadcrumb-item and thereby inherits the `text-decoration`.
|
||||
//
|
||||
// To trick IE into suppressing the underline, we give the pseudo-element an
|
||||
// underline and then immediately remove it.
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: underline;
|
||||
}
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
+ .breadcrumb-item:hover::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $breadcrumb-active-color;
|
||||
}
|
||||
}
|
||||
@ -1,207 +0,0 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
// Make the div behave like a button
|
||||
.btn-group,
|
||||
.btn-group-vertical {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
vertical-align: middle; // match .btn alignment given font-size hack above
|
||||
|
||||
> .btn {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
|
||||
// Bring the hover, focused, and "active" buttons to the front to overlay
|
||||
// the borders properly
|
||||
@include hover {
|
||||
z-index: 2;
|
||||
}
|
||||
&:focus,
|
||||
&:active,
|
||||
&.active {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Prevent double borders when buttons are next to each other
|
||||
.btn + .btn,
|
||||
.btn + .btn-group,
|
||||
.btn-group + .btn,
|
||||
.btn-group + .btn-group {
|
||||
margin-left: -$input-btn-border-width;
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Group multiple button groups together for a toolbar
|
||||
.btn-toolbar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Set corners individual because sometimes a single button can be in a .btn-group
|
||||
// and we need :first-child and :last-child to both match
|
||||
.btn-group > .btn:first-child {
|
||||
margin-left: 0;
|
||||
|
||||
&:not(:last-child):not(.dropdown-toggle) {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu
|
||||
// immediately after it
|
||||
.btn-group > .btn:last-child:not(:first-child),
|
||||
.btn-group > .dropdown-toggle:not(:first-child) {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
// Custom edits for including btn-groups within btn-groups (useful for including
|
||||
// dropdown buttons within a btn-group)
|
||||
.btn-group > .btn-group {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
|
||||
|
||||
// Sizing
|
||||
//
|
||||
// Remix the default button sizing classes into new ones for easier manipulation.
|
||||
|
||||
.btn-group-sm > .btn { @extend .btn-sm; }
|
||||
.btn-group-lg > .btn { @extend .btn-lg; }
|
||||
|
||||
|
||||
//
|
||||
// Split button dropdowns
|
||||
//
|
||||
|
||||
.btn + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x * .75;
|
||||
padding-left: $input-btn-padding-x * .75;
|
||||
|
||||
&::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-sm + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x-sm * .75;
|
||||
padding-left: $input-btn-padding-x-sm * .75;
|
||||
}
|
||||
|
||||
.btn-lg + .dropdown-toggle-split {
|
||||
padding-right: $input-btn-padding-x-lg * .75;
|
||||
padding-left: $input-btn-padding-x-lg * .75;
|
||||
}
|
||||
|
||||
|
||||
// The clickable button for toggling the menu
|
||||
// Set the same inset shadow as the :active state
|
||||
.btn-group.show .dropdown-toggle {
|
||||
@include box-shadow($btn-active-box-shadow);
|
||||
|
||||
// Show no shadow for `.btn-link` since it has no other button styles.
|
||||
&.btn-link {
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Vertical button groups
|
||||
//
|
||||
|
||||
.btn-group-vertical {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.btn,
|
||||
.btn-group {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
> .btn + .btn,
|
||||
> .btn + .btn-group,
|
||||
> .btn-group + .btn,
|
||||
> .btn-group + .btn-group {
|
||||
margin-top: -$input-btn-border-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .btn {
|
||||
&:not(:first-child):not(:last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-group:not(:first-child):not(:last-child) > .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> .btn-group:first-child:not(:last-child) {
|
||||
> .btn:last-child,
|
||||
> .dropdown-toggle {
|
||||
@include border-bottom-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
> .btn-group:last-child:not(:first-child) > .btn:first-child {
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkbox and radio options
|
||||
//
|
||||
// In order to support the browser's form validation feedback, powered by the
|
||||
// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
|
||||
// `display: none;` or `visibility: hidden;` as that also hides the popover.
|
||||
// Simply visually hiding the inputs via `opacity` would leave them clickable in
|
||||
// certain cases which is prevented by using `clip` and `pointer-events`.
|
||||
// This way, we ensure a DOM element is visible to position the popover from.
|
||||
//
|
||||
// See https://github.com/twbs/bootstrap/pull/12794 and
|
||||
// https://github.com/twbs/bootstrap/pull/14559 for more information.
|
||||
|
||||
[data-toggle="buttons"] {
|
||||
> .btn,
|
||||
> .btn-group > .btn {
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
clip: rect(0,0,0,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,136 +0,0 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-weight: $btn-font-weight;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
user-select: none;
|
||||
border: $input-btn-border-width solid transparent;
|
||||
@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
|
||||
@include transition($btn-transition);
|
||||
|
||||
// Share hover and focus styles
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
box-shadow: $input-btn-focus-box-shadow;
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
opacity: .65;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active {
|
||||
background-image: none;
|
||||
@include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Future-proof disabling of clicks on `<a>` elements
|
||||
a.btn.disabled,
|
||||
fieldset[disabled] a.btn {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Alternate buttons
|
||||
//
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-#{$color} {
|
||||
@include button-variant($value, $value);
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.btn-outline-#{$color} {
|
||||
@if $color == "light" {
|
||||
@include button-outline-variant($value, $gray-900);
|
||||
} @else {
|
||||
@include button-outline-variant($value, $white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Link buttons
|
||||
//
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
font-weight: $font-weight-normal;
|
||||
color: $link-color;
|
||||
background-color: transparent;
|
||||
|
||||
@include hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
color: $btn-link-disabled-color;
|
||||
}
|
||||
|
||||
// No need for an active state here
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Button Sizes
|
||||
//
|
||||
|
||||
.btn-lg {
|
||||
@include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Block button
|
||||
//
|
||||
|
||||
.btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Vertically space out multiple block buttons
|
||||
.btn-block + .btn-block {
|
||||
margin-top: $btn-block-spacing-y;
|
||||
}
|
||||
|
||||
// Specificity overrides
|
||||
input[type="submit"],
|
||||
input[type="reset"],
|
||||
input[type="button"] {
|
||||
&.btn-block {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,259 +0,0 @@
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
word-wrap: break-word;
|
||||
background-color: $card-bg;
|
||||
background-clip: border-box;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
> hr {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .list-group:first-child {
|
||||
.list-group-item:first-child {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
> .list-group:last-child {
|
||||
.list-group-item:last-child {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||
flex: 1 1 auto;
|
||||
padding: $card-spacer-x;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: $card-spacer-y;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: -($card-spacer-y / 2);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
@include hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-left: $card-spacer-x;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Optional textual caps
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
background-color: $card-cap-bg;
|
||||
border-bottom: $card-border-width solid $card-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-radius($card-inner-border-radius $card-inner-border-radius 0 0);
|
||||
}
|
||||
|
||||
+ .list-group {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
background-color: $card-cap-bg;
|
||||
border-top: $card-border-width solid $card-border-color;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 $card-inner-border-radius $card-inner-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Header navs
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-right: -($card-spacer-x / 2);
|
||||
margin-left: -($card-spacer-x / 2);
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: $card-img-overlay-padding;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
// Card image caps
|
||||
.card-img-top {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-top-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
.card-img-bottom {
|
||||
width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
|
||||
@include border-bottom-radius($card-inner-border-radius);
|
||||
}
|
||||
|
||||
|
||||
// Card deck
|
||||
|
||||
.card-deck {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-deck-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
margin-right: -$card-deck-margin;
|
||||
margin-left: -$card-deck-margin;
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||
flex: 1 0 0%;
|
||||
flex-direction: column;
|
||||
margin-right: $card-deck-margin;
|
||||
margin-bottom: 0; // Override the default
|
||||
margin-left: $card-deck-margin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Card groups
|
||||
//
|
||||
|
||||
.card-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.card {
|
||||
margin-bottom: $card-group-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
flex-flow: row wrap;
|
||||
|
||||
.card {
|
||||
// Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored
|
||||
flex: 1 0 0%;
|
||||
margin-bottom: 0;
|
||||
|
||||
+ .card {
|
||||
margin-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Handle rounded corners
|
||||
@if $enable-rounded {
|
||||
&:first-child {
|
||||
@include border-right-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@include border-left-radius(0);
|
||||
|
||||
.card-img-top {
|
||||
border-top-left-radius: 0;
|
||||
}
|
||||
.card-img-bottom {
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
.card-img-top {
|
||||
@include border-top-radius($card-border-radius);
|
||||
}
|
||||
.card-img-bottom {
|
||||
@include border-bottom-radius($card-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||
border-radius: 0;
|
||||
|
||||
.card-img-top,
|
||||
.card-img-bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Columns
|
||||
//
|
||||
|
||||
.card-columns {
|
||||
.card {
|
||||
margin-bottom: $card-columns-margin;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
column-count: $card-columns-count;
|
||||
column-gap: $card-columns-gap;
|
||||
|
||||
.card {
|
||||
display: inline-block; // Don't let them vertically span multiple columns
|
||||
width: 100%; // Don't let their width change
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
// Wrapper for the slide container and indicators
|
||||
.carousel {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
display: none;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
@include transition($carousel-transition);
|
||||
backface-visibility: hidden;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.carousel-item.active,
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.carousel-item-prev {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// CSS3 transforms when supported by the browser
|
||||
.carousel-item-next.carousel-item-left,
|
||||
.carousel-item-prev.carousel-item-right {
|
||||
transform: translateX(0);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-next,
|
||||
.active.carousel-item-right {
|
||||
transform: translateX(100%);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-item-prev,
|
||||
.active.carousel-item-left {
|
||||
transform: translateX(-100%);
|
||||
|
||||
@supports (transform-style: preserve-3d) {
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Left/right controls for nav
|
||||
//
|
||||
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
// Use flex for alignment (1-3)
|
||||
display: flex; // 1. allow flex styles
|
||||
align-items: center; // 2. vertically center contents
|
||||
justify-content: center; // 3. horizontally center contents
|
||||
width: $carousel-control-width;
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
opacity: $carousel-control-opacity;
|
||||
// We can't have a transition here because WebKit cancels the carousel
|
||||
// animation if you trip this while in the middle of another animation.
|
||||
|
||||
// Hover/focus state
|
||||
@include hover-focus {
|
||||
color: $carousel-control-color;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
opacity: .9;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
@if $enable-gradients {
|
||||
background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
||||
}
|
||||
}
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
@if $enable-gradients {
|
||||
background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001));
|
||||
}
|
||||
}
|
||||
|
||||
// Icons for within
|
||||
.carousel-control-prev-icon,
|
||||
.carousel-control-next-icon {
|
||||
display: inline-block;
|
||||
width: $carousel-control-icon-width;
|
||||
height: $carousel-control-icon-width;
|
||||
background: transparent no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.carousel-control-prev-icon {
|
||||
background-image: $carousel-control-prev-icon-bg;
|
||||
}
|
||||
.carousel-control-next-icon {
|
||||
background-image: $carousel-control-next-icon-bg;
|
||||
}
|
||||
|
||||
|
||||
// Optional indicator pips
|
||||
//
|
||||
// Add an ordered list with the following class and add a list item for each
|
||||
// slide your carousel holds.
|
||||
|
||||
.carousel-indicators {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 0; // override <ol> default
|
||||
// Use the .carousel-control's width as margin so we don't overlay those
|
||||
margin-right: $carousel-control-width;
|
||||
margin-left: $carousel-control-width;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
flex: 0 1 auto;
|
||||
width: $carousel-indicator-width;
|
||||
height: $carousel-indicator-height;
|
||||
margin-right: $carousel-indicator-spacer;
|
||||
margin-left: $carousel-indicator-spacer;
|
||||
text-indent: -999px;
|
||||
background-color: rgba($carousel-indicator-active-bg, .5);
|
||||
|
||||
// Use pseudo classes to increase the hit area by 10px on top and bottom.
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
&::after {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $carousel-indicator-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Optional captions
|
||||
//
|
||||
//
|
||||
|
||||
.carousel-caption {
|
||||
position: absolute;
|
||||
right: ((100% - $carousel-caption-width) / 2);
|
||||
bottom: 20px;
|
||||
left: ((100% - $carousel-caption-width) / 2);
|
||||
z-index: 10;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
color: $carousel-caption-color;
|
||||
text-align: center;
|
||||
}
|
||||
@ -1,29 +0,0 @@
|
||||
.close {
|
||||
float: right;
|
||||
font-size: $close-font-size;
|
||||
font-weight: $close-font-weight;
|
||||
line-height: 1;
|
||||
color: $close-color;
|
||||
text-shadow: $close-text-shadow;
|
||||
opacity: .5;
|
||||
|
||||
@include hover-focus {
|
||||
color: $close-color;
|
||||
text-decoration: none;
|
||||
opacity: .75;
|
||||
}
|
||||
}
|
||||
|
||||
// Additional properties for button version
|
||||
// iOS requires the button element instead of an anchor tag.
|
||||
// If you want the anchor version, it requires `href="#"`.
|
||||
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
|
||||
// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
|
||||
button.close {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
// stylelint-enable
|
||||
@ -1,64 +0,0 @@
|
||||
// Inline and block code styles
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
// Inline code
|
||||
code {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $code-color;
|
||||
background-color: $code-bg;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
a > & {
|
||||
padding: 0;
|
||||
color: inherit;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
// User input typically entered via keyboard
|
||||
kbd {
|
||||
padding: $code-padding-y $code-padding-x;
|
||||
font-size: $code-font-size;
|
||||
color: $kbd-color;
|
||||
background-color: $kbd-bg;
|
||||
@include border-radius($border-radius-sm);
|
||||
@include box-shadow($kbd-box-shadow);
|
||||
|
||||
kbd {
|
||||
padding: 0;
|
||||
font-size: 100%;
|
||||
font-weight: $nested-kbd-font-weight;
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
|
||||
// Blocks of code
|
||||
pre {
|
||||
display: block;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
font-size: $code-font-size;
|
||||
color: $pre-color;
|
||||
|
||||
// Account for some code outputs that place code tags in pre tags
|
||||
code {
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Enable scrollable blocks of code
|
||||
.pre-scrollable {
|
||||
max-height: $pre-scrollable-max-height;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -1,438 +0,0 @@
|
||||
// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Grid examples
|
||||
//
|
||||
|
||||
.bd-example-row {
|
||||
.row {
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
background-color: rgba(86, 61, 124, .15);
|
||||
border: 1px solid rgba(86, 61, 124, .2);
|
||||
}
|
||||
}
|
||||
|
||||
.row + .row {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.flex-items-top,
|
||||
.flex-items-middle,
|
||||
.flex-items-bottom {
|
||||
min-height: 6rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-example-row-flex-cols .row {
|
||||
min-height: 10rem;
|
||||
background-color: rgba(255, 0, 0, .1);
|
||||
}
|
||||
|
||||
.bd-highlight {
|
||||
background-color: rgba($bd-purple, .15);
|
||||
border: 1px solid rgba($bd-purple, .15);
|
||||
}
|
||||
|
||||
// Grid mixins
|
||||
.example-container {
|
||||
width: 800px;
|
||||
@include make-container();
|
||||
}
|
||||
|
||||
.example-row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
.example-content-main {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(8);
|
||||
}
|
||||
}
|
||||
|
||||
.example-content-secondary {
|
||||
@include make-col-ready();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
@include make-col(6);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(4);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Container illustrations
|
||||
//
|
||||
|
||||
.bd-example-container {
|
||||
min-width: 16rem;
|
||||
max-width: 25rem;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.bd-example-container-header {
|
||||
height: 3rem;
|
||||
margin-bottom: .5rem;
|
||||
background-color: lighten($blue, 50%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-sidebar {
|
||||
float: right;
|
||||
width: 4rem;
|
||||
height: 8rem;
|
||||
background-color: lighten($blue, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-body {
|
||||
height: 8rem;
|
||||
margin-right: 4.5rem;
|
||||
background-color: lighten($bd-purple, 25%);
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-example-container-fluid {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Docs examples
|
||||
//
|
||||
|
||||
.bd-example {
|
||||
position: relative;
|
||||
padding: 1rem;
|
||||
margin: 1rem (-$grid-gutter-width / 2);
|
||||
overflow: auto;
|
||||
border: solid #f7f7f9;
|
||||
border-width: .2rem 0 0;
|
||||
@include clearfix();
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1.5rem;
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0;
|
||||
border-width: .2rem;
|
||||
}
|
||||
|
||||
+ .highlight,
|
||||
+ .clipboard + .highlight {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
+ p {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.pos-f-t {
|
||||
position: relative;
|
||||
margin: -1rem;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin: -1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .form-control {
|
||||
+ .form-control {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .nav + .nav,
|
||||
> .alert + .alert,
|
||||
> .navbar + .navbar,
|
||||
> .progress + .progress,
|
||||
> .progress + .btn {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> .dropdown-menu:first-child {
|
||||
position: static;
|
||||
display: block;
|
||||
}
|
||||
|
||||
> .form-group:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
> .close {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Typography
|
||||
.bd-example-type {
|
||||
.table {
|
||||
.type-info {
|
||||
color: #999;
|
||||
vertical-align: middle;
|
||||
}
|
||||
td {
|
||||
padding: 1rem 0;
|
||||
border-color: #eee;
|
||||
}
|
||||
tr:first-child td {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Contextual background colors
|
||||
.bd-example-bg-classes p {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
// Images
|
||||
.bd-example > img {
|
||||
+ img {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.bd-example {
|
||||
> .btn-group {
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
> .btn-toolbar + .btn-toolbar {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Forms
|
||||
.bd-example-control-sizing select,
|
||||
.bd-example-control-sizing input[type="text"] + input[type="text"] {
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.bd-example-form .input-group {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
.bd-example > textarea.form-control {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
// List groups
|
||||
.bd-example > .list-group {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
// Navbars
|
||||
.bd-example {
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
position: static;
|
||||
margin: -1rem -1rem 1rem;
|
||||
}
|
||||
.fixed-bottom {
|
||||
position: static;
|
||||
margin: 1rem -1rem -1rem;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.fixed-top,
|
||||
.sticky-top {
|
||||
margin: -1.5rem -1.5rem 1rem;
|
||||
}
|
||||
.fixed-bottom {
|
||||
margin: 1rem -1.5rem -1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.bd-example .pagination {
|
||||
margin-top: .5rem;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Example modals
|
||||
.modal {
|
||||
z-index: 1072;
|
||||
|
||||
.tooltip,
|
||||
.popover {
|
||||
z-index: 1073;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
z-index: 1071;
|
||||
}
|
||||
|
||||
.bd-example-modal {
|
||||
background-color: #fafafa;
|
||||
|
||||
.modal {
|
||||
position: relative;
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
left: auto;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Example tabbable tabs
|
||||
.bd-example-tabs .nav-tabs {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.bd-example-tooltips {
|
||||
text-align: center;
|
||||
|
||||
> .btn {
|
||||
margin-top: .25rem;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
}
|
||||
.bs-tooltip-top-docs,
|
||||
.bs-tooltip-bottom-docs {
|
||||
.arrow {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.bs-tooltip-right-docs,
|
||||
.bs-tooltip-left-docs {
|
||||
.arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Popovers
|
||||
.bd-example-popover-static {
|
||||
padding-bottom: 1.5rem;
|
||||
background-color: #f9f9f9;
|
||||
|
||||
.popover {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 260px;
|
||||
margin: 1.25rem;
|
||||
}
|
||||
}
|
||||
.bs-popover-top-docs,
|
||||
.bs-popover-bottom-docs {
|
||||
.arrow {
|
||||
left: 50%;
|
||||
}
|
||||
}
|
||||
.bs-popover-right-docs,
|
||||
.bs-popover-left-docs {
|
||||
.arrow {
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
.tooltip-demo a {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bd-example-tooltip-static .tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 10px 20px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Scrollspy demo on fixed height div
|
||||
.scrollspy-example {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
margin-top: .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollspy-example-2 {
|
||||
position: relative;
|
||||
height: 350px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.bd-example-border-utils {
|
||||
[class^="border"] {
|
||||
display: inline-block;
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
margin: .25rem;
|
||||
background-color: #f5f5f5;
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Code snippets
|
||||
//
|
||||
|
||||
.highlight {
|
||||
padding: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
background-color: #f7f7f9;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-content .highlight {
|
||||
margin-right: (-$grid-gutter-width / 2);
|
||||
margin-left: (-$grid-gutter-width / 2);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
pre {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
pre code {
|
||||
font-size: inherit;
|
||||
color: $gray-900; // Effectively the base text color
|
||||
}
|
||||
}
|
||||
@ -1,257 +0,0 @@
|
||||
// Embedded icons from Open Iconic.
|
||||
// Released under MIT and copyright 2014 Waybury.
|
||||
// https://useiconic.com/open
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Base class takes care of all the key behavioral aspects.
|
||||
|
||||
.custom-control {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
min-height: (1rem * $line-height-base);
|
||||
padding-left: $custom-control-gutter;
|
||||
margin-right: $custom-control-spacer-x;
|
||||
}
|
||||
|
||||
.custom-control-input {
|
||||
position: absolute;
|
||||
z-index: -1; // Put the input behind the label so it doesn't overlay text
|
||||
opacity: 0;
|
||||
|
||||
&:checked ~ .custom-control-indicator {
|
||||
color: $custom-control-indicator-checked-color;
|
||||
@include gradient-bg($custom-control-indicator-checked-bg);
|
||||
@include box-shadow($custom-control-indicator-checked-box-shadow);
|
||||
}
|
||||
|
||||
&:focus ~ .custom-control-indicator {
|
||||
// the mixin is not used here to make sure there is feedback
|
||||
box-shadow: $custom-control-indicator-focus-box-shadow;
|
||||
}
|
||||
|
||||
&:active ~ .custom-control-indicator {
|
||||
color: $custom-control-indicator-active-color;
|
||||
@include gradient-bg($custom-control-indicator-active-bg);
|
||||
@include box-shadow($custom-control-indicator-active-box-shadow);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
~ .custom-control-indicator {
|
||||
background-color: $custom-control-indicator-disabled-bg;
|
||||
}
|
||||
|
||||
~ .custom-control-description {
|
||||
color: $custom-control-description-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom indicator
|
||||
//
|
||||
// Generates a shadow element to create our makeshift checkbox/radio background.
|
||||
|
||||
.custom-control-indicator {
|
||||
position: absolute;
|
||||
top: (($line-height-base - $custom-control-indicator-size) / 2);
|
||||
left: 0;
|
||||
display: block;
|
||||
width: $custom-control-indicator-size;
|
||||
height: $custom-control-indicator-size;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-control-indicator-bg;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $custom-control-indicator-bg-size;
|
||||
@include box-shadow($custom-control-indicator-box-shadow);
|
||||
}
|
||||
|
||||
// Checkboxes
|
||||
//
|
||||
// Tweak just a few things for checkboxes.
|
||||
|
||||
.custom-checkbox {
|
||||
.custom-control-indicator {
|
||||
@include border-radius($custom-checkbox-indicator-border-radius);
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-checkbox-indicator-icon-checked;
|
||||
}
|
||||
|
||||
.custom-control-input:indeterminate ~ .custom-control-indicator {
|
||||
background-color: $custom-checkbox-indicator-indeterminate-bg;
|
||||
background-image: $custom-checkbox-indicator-icon-indeterminate;
|
||||
@include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
// Radios
|
||||
//
|
||||
// Tweak just a few things for radios.
|
||||
|
||||
.custom-radio {
|
||||
.custom-control-indicator {
|
||||
border-radius: $custom-radio-indicator-border-radius;
|
||||
}
|
||||
|
||||
.custom-control-input:checked ~ .custom-control-indicator {
|
||||
background-image: $custom-radio-indicator-icon-checked;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Layout options
|
||||
//
|
||||
// By default radios and checkboxes are `inline-block` with no additional spacing
|
||||
// set. Use these optional classes to tweak the layout.
|
||||
|
||||
.custom-controls-stacked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.custom-control {
|
||||
margin-bottom: $custom-control-spacer-y;
|
||||
|
||||
+ .custom-control {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Select
|
||||
//
|
||||
// Replaces the browser default select with a custom one, mostly pulled from
|
||||
// http://primercss.io.
|
||||
//
|
||||
|
||||
.custom-select {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: $input-height;
|
||||
padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x;
|
||||
line-height: $custom-select-line-height;
|
||||
color: $custom-select-color;
|
||||
vertical-align: middle;
|
||||
background: $custom-select-bg $custom-select-indicator no-repeat right $custom-select-padding-x center;
|
||||
background-size: $custom-select-bg-size;
|
||||
border: $custom-select-border-width solid $custom-select-border-color;
|
||||
@if $enable-rounded {
|
||||
border-radius: $custom-select-border-radius;
|
||||
} @else {
|
||||
border-radius: 0;
|
||||
}
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
border-color: $custom-select-focus-border-color;
|
||||
outline: none;
|
||||
@include box-shadow($custom-select-focus-box-shadow);
|
||||
|
||||
&::-ms-value {
|
||||
// For visual consistency with other platforms/browsers,
|
||||
// supress the default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&[multiple] {
|
||||
height: auto;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $custom-select-disabled-color;
|
||||
background-color: $custom-select-disabled-bg;
|
||||
}
|
||||
|
||||
// Hides the default caret in IE11
|
||||
&::-ms-expand {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-select-sm {
|
||||
height: $custom-select-height-sm;
|
||||
padding-top: $custom-select-padding-y;
|
||||
padding-bottom: $custom-select-padding-y;
|
||||
font-size: $custom-select-font-size-sm;
|
||||
}
|
||||
|
||||
|
||||
// File
|
||||
//
|
||||
// Custom file input.
|
||||
|
||||
.custom-file {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.custom-file-input {
|
||||
min-width: $custom-file-width;
|
||||
max-width: 100%;
|
||||
height: $custom-file-height;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus ~ .custom-file-control {
|
||||
box-shadow: $custom-file-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-file-control {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-color;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
background-color: $custom-file-bg;
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius($custom-file-border-radius);
|
||||
@include box-shadow($custom-file-box-shadow);
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, placeholder) {
|
||||
&:lang(#{$lang}):empty::after {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: -$custom-file-border-width;
|
||||
right: -$custom-file-border-width;
|
||||
bottom: -$custom-file-border-width;
|
||||
z-index: 6;
|
||||
display: block;
|
||||
height: $custom-file-height;
|
||||
padding: $custom-file-padding-y $custom-file-padding-x;
|
||||
line-height: $custom-file-line-height;
|
||||
color: $custom-file-button-color;
|
||||
@include gradient-bg($custom-file-button-bg);
|
||||
border: $custom-file-border-width solid $custom-file-border-color;
|
||||
@include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0);
|
||||
}
|
||||
|
||||
@each $lang, $text in map-get($custom-file-text, button-label) {
|
||||
&:lang(#{$lang})::before {
|
||||
content: $text;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,103 +0,0 @@
|
||||
// The dropdown wrapper (`<div>`)
|
||||
.dropup,
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
// Generate the caret automatically
|
||||
@include caret;
|
||||
}
|
||||
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: $zindex-dropdown;
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
float: left;
|
||||
min-width: $dropdown-min-width;
|
||||
padding: $dropdown-padding-y 0;
|
||||
margin: $dropdown-spacer 0 0; // override default ul
|
||||
font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
|
||||
color: $body-color;
|
||||
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: $dropdown-bg;
|
||||
background-clip: padding-box;
|
||||
border: $dropdown-border-width solid $dropdown-border-color;
|
||||
@include border-radius($border-radius);
|
||||
@include box-shadow($dropdown-box-shadow);
|
||||
}
|
||||
|
||||
// Allow for dropdowns to go bottom up (aka, dropup-menu)
|
||||
// Just add .dropup after the standard .dropdown class and you're set.
|
||||
.dropup {
|
||||
.dropdown-menu {
|
||||
margin-top: 0;
|
||||
margin-bottom: $dropdown-spacer;
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@include caret(up);
|
||||
}
|
||||
}
|
||||
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
@include nav-divider($dropdown-divider-bg);
|
||||
}
|
||||
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
//
|
||||
// `<button>`-specific styles are denoted with `// For <button>s`
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: $dropdown-link-color;
|
||||
text-align: inherit; // For `<button>`s
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background: none; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
|
||||
@include hover-focus {
|
||||
color: $dropdown-link-hover-color;
|
||||
text-decoration: none;
|
||||
@include gradient-bg($dropdown-link-hover-bg);
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: $dropdown-link-active-color;
|
||||
text-decoration: none;
|
||||
@include gradient-bg($dropdown-link-active-bg);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $dropdown-link-disabled-color;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@if $enable-gradients {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
font-size: $font-size-sm;
|
||||
color: $dropdown-header-color;
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
@ -1,358 +0,0 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Textual form controls
|
||||
//
|
||||
|
||||
.form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
font-size: $font-size-base;
|
||||
line-height: $input-btn-line-height;
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
// Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214.
|
||||
background-image: none;
|
||||
background-clip: padding-box;
|
||||
border: $input-btn-border-width solid $input-border-color;
|
||||
|
||||
// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
|
||||
@if $enable-rounded {
|
||||
// Manually use the if/else instead of the mixin to account for iOS override
|
||||
border-radius: $input-border-radius;
|
||||
} @else {
|
||||
// Otherwise undo the iOS default
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@include box-shadow($input-box-shadow);
|
||||
@include transition($input-transition);
|
||||
|
||||
// Unstyle the caret on `<select>`s in IE10+.
|
||||
&::-ms-expand {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// Customize the `:focus` state to imitate native WebKit styles.
|
||||
@include form-control-focus();
|
||||
|
||||
// Placeholder
|
||||
&::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
// Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Disabled and read-only inputs
|
||||
//
|
||||
// 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] {
|
||||
background-color: $input-disabled-bg;
|
||||
// iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
select.form-control {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height;
|
||||
}
|
||||
|
||||
&:focus::-ms-value {
|
||||
// Suppress the nested default white text on blue background highlight given to
|
||||
// the selected option text when the (still closed) <select> receives focus
|
||||
// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
|
||||
// match the appearance of the native widget.
|
||||
// See https://github.com/twbs/bootstrap/issues/19398.
|
||||
color: $input-color;
|
||||
background-color: $input-bg;
|
||||
}
|
||||
}
|
||||
|
||||
// Make file inputs better match text inputs by forcing them to new lines.
|
||||
.form-control-file,
|
||||
.form-control-range {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Labels
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the label text to
|
||||
// align with the form controls.
|
||||
.col-form-label {
|
||||
padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
||||
padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width});
|
||||
margin-bottom: 0; // Override the `<label>` default
|
||||
line-height: $input-btn-line-height;
|
||||
}
|
||||
|
||||
.col-form-label-lg {
|
||||
padding-top: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
||||
padding-bottom: calc(#{$input-btn-padding-y-lg} + #{$input-btn-border-width});
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
}
|
||||
|
||||
.col-form-label-sm {
|
||||
padding-top: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
||||
padding-bottom: calc(#{$input-btn-padding-y-sm} + #{$input-btn-border-width});
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-btn-line-height-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Legends
|
||||
//
|
||||
|
||||
// For use with horizontal and inline forms, when you need the legend text to
|
||||
// be the same size as regular labels, and to align with the form controls.
|
||||
.col-form-legend {
|
||||
padding-top: $input-btn-padding-y;
|
||||
padding-bottom: $input-btn-padding-y;
|
||||
margin-bottom: 0;
|
||||
font-size: $font-size-base;
|
||||
}
|
||||
|
||||
|
||||
// Readonly controls as plain text
|
||||
//
|
||||
// Apply class to a readonly input to make it appear like regular plain
|
||||
// text (without any border, background color, focus indicator)
|
||||
|
||||
.form-control-plaintext {
|
||||
padding-top: $input-btn-padding-y;
|
||||
padding-bottom: $input-btn-padding-y;
|
||||
margin-bottom: 0; // match inputs if this class comes on inputs with default margins
|
||||
line-height: $input-btn-line-height;
|
||||
background-color: transparent;
|
||||
border: solid transparent;
|
||||
border-width: $input-btn-border-width 0;
|
||||
|
||||
&.form-control-sm,
|
||||
&.form-control-lg {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form control sizing
|
||||
//
|
||||
// Build on `.form-control` with modifier classes to decrease or increase the
|
||||
// height and font-size of form controls.
|
||||
//
|
||||
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
|
||||
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
|
||||
|
||||
.form-control-sm {
|
||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
line-height: $input-btn-line-height-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
select.form-control-sm {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-sm;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control-lg {
|
||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
line-height: $input-btn-line-height-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
select.form-control-lg {
|
||||
&:not([size]):not([multiple]) {
|
||||
height: $input-height-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form groups
|
||||
//
|
||||
// Designed to help with the organization and spacing of vertical forms. For
|
||||
// horizontal forms, use the predefined grid classes.
|
||||
|
||||
.form-group {
|
||||
margin-bottom: $form-group-margin-bottom;
|
||||
}
|
||||
|
||||
.form-text {
|
||||
display: block;
|
||||
margin-top: $form-text-margin-top;
|
||||
}
|
||||
|
||||
|
||||
// Form grid
|
||||
//
|
||||
// Special replacement for our grid system's `.row` for tighter form layouts.
|
||||
|
||||
.form-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -5px;
|
||||
margin-left: -5px;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Checkboxes and radios
|
||||
//
|
||||
// Indent the labels to position radios/checkboxes as hanging controls.
|
||||
|
||||
.form-check {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: $form-check-margin-bottom;
|
||||
|
||||
&.disabled {
|
||||
.form-check-label {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-check-label {
|
||||
padding-left: $form-check-input-gutter;
|
||||
margin-bottom: 0; // Override default `<label>` bottom margin
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
position: absolute;
|
||||
margin-top: $form-check-input-margin-y;
|
||||
margin-left: -$form-check-input-gutter;
|
||||
}
|
||||
|
||||
// Radios and checkboxes on same line
|
||||
.form-check-inline {
|
||||
display: inline-block;
|
||||
margin-right: $form-check-inline-margin-x;
|
||||
|
||||
.form-check-label {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Form validation
|
||||
//
|
||||
// Provide feedback to users when form field values are valid or invalid. Works
|
||||
// primarily for client-side validation via scoped `:invalid` and `:valid`
|
||||
// pseudo-classes but also includes `.is-invalid` and `.is-valid` classes for
|
||||
// server side validation.
|
||||
|
||||
@include form-validation-state("valid", $form-feedback-valid-color);
|
||||
@include form-validation-state("invalid", $form-feedback-invalid-color);
|
||||
|
||||
// Inline forms
|
||||
//
|
||||
// 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 {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: center; // Prevent shorter elements from growing to same height as others (e.g., small buttons growing to normal sized button height)
|
||||
|
||||
// Because we use flex, the initial sizing of checkboxes is collapsed and
|
||||
// doesn't occupy the full-width (which is what we want for xs grid tier),
|
||||
// so we force that here.
|
||||
.form-check {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Kick in the inline
|
||||
@include media-breakpoint-up(sm) {
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Inline-block all the things for "inline"
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
flex-flow: row wrap;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Allow folks to *not* use `.form-group`
|
||||
.form-control {
|
||||
display: inline-block;
|
||||
width: auto; // Prevent labels from stacking above inputs in `.form-group`
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Make static controls behave like regular ones
|
||||
.form-control-plaintext {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Remove default margin on radios/checkboxes that were used for stacking, and
|
||||
// then undo the floating of radios and checkboxes to match.
|
||||
.form-check {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.form-check-label {
|
||||
padding-left: 0;
|
||||
}
|
||||
.form-check-input {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-right: $form-check-input-margin-x;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Custom form controls
|
||||
.custom-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
.custom-control-indicator {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
margin-right: $form-check-input-margin-x; // Flexbox alignment means we lose our HTML space here, so we compensate.
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
// Re-override the feedback icon.
|
||||
.has-feedback .form-control-feedback {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
// Bootstrap functions
|
||||
//
|
||||
// Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
|
||||
|
||||
// Ascending
|
||||
// Used to evaluate Sass maps like our grid breakpoints.
|
||||
@mixin _assert-ascending($map, $map-name) {
|
||||
$prev-key: null;
|
||||
$prev-num: null;
|
||||
@each $key, $num in $map {
|
||||
@if $prev-num == null {
|
||||
// Do nothing
|
||||
} @else if not comparable($prev-num, $num) {
|
||||
@warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
} @else if $prev-num >= $num {
|
||||
@warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
|
||||
}
|
||||
$prev-key: $key;
|
||||
$prev-num: $num;
|
||||
}
|
||||
}
|
||||
|
||||
// Starts at zero
|
||||
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
|
||||
@mixin _assert-starts-at-zero($map) {
|
||||
$values: map-values($map);
|
||||
$first-value: nth($values, 1);
|
||||
@if $first-value != 0 {
|
||||
@warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
|
||||
}
|
||||
}
|
||||
|
||||
// Replace `$search` with `$replace` in `$string`
|
||||
// Used on our SVG icon backgrounds for custom forms.
|
||||
//
|
||||
// @author Hugo Giraudel
|
||||
// @param {String} $string - Initial string
|
||||
// @param {String} $search - Substring to replace
|
||||
// @param {String} $replace ('') - New value
|
||||
// @return {String} - Updated string
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
// Color contrast
|
||||
@function color-yiq($color) {
|
||||
$r: red($color);
|
||||
$g: green($color);
|
||||
$b: blue($color);
|
||||
|
||||
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
|
||||
|
||||
@if ($yiq >= 150) {
|
||||
@return #111;
|
||||
} @else {
|
||||
@return #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// Retreive color Sass maps
|
||||
@function color($key: "blue") {
|
||||
@return map-get($colors, $key);
|
||||
}
|
||||
|
||||
@function theme-color($key: "primary") {
|
||||
@return map-get($theme-colors, $key);
|
||||
}
|
||||
|
||||
@function gray($key: "100") {
|
||||
@return map-get($grays, $key);
|
||||
}
|
||||
|
||||
// Request a theme color level
|
||||
@function theme-color-level($color-name: "primary", $level: 0) {
|
||||
$color: theme-color($color-name);
|
||||
$color-base: if($level > 0, #000, #fff);
|
||||
$level: abs($level);
|
||||
|
||||
@return mix($color-base, $color, $level * $theme-color-interval);
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
// Container widths
|
||||
//
|
||||
// Set the container width, and override it for fixed navbars in media queries.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container {
|
||||
@include make-container();
|
||||
@include make-container-max-widths();
|
||||
}
|
||||
}
|
||||
|
||||
// Fluid container
|
||||
//
|
||||
// Utilizes the mixin meant for fixed width containers, but with 100% width for
|
||||
// fluid, full width layouts.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.container-fluid {
|
||||
@include make-container();
|
||||
}
|
||||
}
|
||||
|
||||
// Row
|
||||
//
|
||||
// Rows contain and clear the floats of your columns.
|
||||
|
||||
@if $enable-grid-classes {
|
||||
.row {
|
||||
@include make-row();
|
||||
}
|
||||
|
||||
// Remove the negative margin from default .row, then the horizontal padding
|
||||
// from all immediate children columns (to prevent runaway style inheritance).
|
||||
.no-gutters {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Columns
|
||||
//
|
||||
// Common styles for small and large grid columns
|
||||
|
||||
@if $enable-grid-classes {
|
||||
@include make-grid-columns();
|
||||
}
|
||||
@ -1,237 +0,0 @@
|
||||
.fa-arrow-down-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/solid/arrow-down.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
a:hover .fa-arrow-down-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/dark/solid/arrow-down.png');
|
||||
}
|
||||
|
||||
.fa-arrow-down-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/arrow-down.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-arrow-right-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/arrow-right.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
a:hover .fa-arrow-right-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/solid/arrow-right.png');
|
||||
}
|
||||
|
||||
.fa-android-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/android.png');
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
background-size: cover;
|
||||
margin: 22%;;
|
||||
}
|
||||
|
||||
.fa-apple-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/apple.png');
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
background-size: cover;
|
||||
margin: 22%;;
|
||||
}
|
||||
|
||||
|
||||
.fa-windows-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/windows.png');
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
background-size: cover;
|
||||
margin: 22%;;
|
||||
}
|
||||
|
||||
|
||||
.fa-linux-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/linux.png');
|
||||
width: 1.0em;
|
||||
height: 1.0em;
|
||||
background-size: cover;
|
||||
margin: 22%;;
|
||||
}
|
||||
|
||||
.fa-facebook-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/facebook.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-mastodon-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/mastodon.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-twitter-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/twitter.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-instagram-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/instagram.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-linkedin-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/linkedin.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-github-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/white/brands/github.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-facebook-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/brands/facebook.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-mastodon-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/brands/mastodon.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-twitter-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/brands/twitter.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-instagram-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/brands/instagram.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-linkedin-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/brands/linkedin.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-youtube-png-purple {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/brands/youtube.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-table-tennis-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/table-tennis.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-comments-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/comments.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-lock-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/lock.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-flag-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/flag.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-spider-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/spider.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-file-alt-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/regular/file-alt.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-signature-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/signature.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-key-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/key.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-life-ring-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/life-ring.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-folder-open-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/folder-open.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-paper-plane-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/paper-plane.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-hands-helping-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/hands-helping.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.fa-cube-png {
|
||||
background-image: url('/static/fonts/fontawesome/png/primary/solid/cube.png');
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
background-size: cover;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.illo-container {
|
||||
padding-top: 7%;
|
||||
padding-left: 3% !important;
|
||||
padding-right: 3% !important;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
img {
|
||||
max-width: 4em;
|
||||
}
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
// Responsive images (ensure images don't scale beyond their parents)
|
||||
//
|
||||
// This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
|
||||
// We previously tried the "images are responsive by default" approach in Bootstrap v2,
|
||||
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
|
||||
// which weren't expecting the images within themselves to be involuntarily resized.
|
||||
// See also https://github.com/twbs/bootstrap/issues/18178
|
||||
.img-fluid {
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
.img-thumbnail {
|
||||
padding: $thumbnail-padding;
|
||||
background-color: $thumbnail-bg;
|
||||
border: $thumbnail-border-width solid $thumbnail-border-color;
|
||||
@include border-radius($thumbnail-border-radius);
|
||||
@include transition($thumbnail-transition);
|
||||
@include box-shadow($thumbnail-box-shadow);
|
||||
|
||||
// Keep them at most 100% wide
|
||||
@include img-fluid;
|
||||
}
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
.figure {
|
||||
// Ensures the caption's text aligns with the image.
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.figure-img {
|
||||
margin-bottom: ($spacer / 2);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.figure-caption {
|
||||
font-size: $figure-caption-font-size;
|
||||
color: $figure-caption-color;
|
||||
}
|
||||
@ -1,186 +0,0 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
//
|
||||
// Base styles
|
||||
//
|
||||
|
||||
.input-group {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
|
||||
.form-control {
|
||||
// Ensure that the input is always above the *appended* addon button for
|
||||
// proper border colors.
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
flex: 1 1 auto;
|
||||
// Add width 1% and flex-basis auto to ensure that button will not wrap out
|
||||
// the column. Applies to IE Edge+ and Firefox. Chrome does not require this.
|
||||
width: 1%;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Bring the "active" form control to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn,
|
||||
.input-group .form-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&:not(:first-child):not(:last-child) {
|
||||
@include border-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-addon,
|
||||
.input-group-btn {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
||||
// 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-group-lg > .input-group-btn > .btn {
|
||||
@extend .form-control-lg;
|
||||
}
|
||||
.input-group-sm > .form-control,
|
||||
.input-group-sm > .input-group-addon,
|
||||
.input-group-sm > .input-group-btn > .btn {
|
||||
@extend .form-control-sm;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Text input groups
|
||||
//
|
||||
|
||||
.input-group-addon {
|
||||
padding: $input-btn-padding-y $input-btn-padding-x;
|
||||
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
|
||||
font-size: $font-size-base; // Match inputs
|
||||
font-weight: $font-weight-normal;
|
||||
line-height: $input-btn-line-height;
|
||||
color: $input-group-addon-color;
|
||||
text-align: center;
|
||||
background-color: $input-group-addon-bg;
|
||||
border: $input-btn-border-width solid $input-group-addon-border-color;
|
||||
@include border-radius($input-border-radius);
|
||||
|
||||
// Sizing
|
||||
&.form-control-sm {
|
||||
padding: $input-btn-padding-y-sm $input-btn-padding-x-sm;
|
||||
font-size: $font-size-sm;
|
||||
@include border-radius($input-border-radius-sm);
|
||||
}
|
||||
|
||||
&.form-control-lg {
|
||||
padding: $input-btn-padding-y-lg $input-btn-padding-x-lg;
|
||||
font-size: $font-size-lg;
|
||||
@include border-radius($input-border-radius-lg);
|
||||
}
|
||||
|
||||
// Nuke default margins from checkboxes and radios to vertically center within.
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Reset rounded corners
|
||||
//
|
||||
|
||||
.input-group .form-control:not(:last-child),
|
||||
.input-group-addon:not(:last-child),
|
||||
.input-group-btn:not(:last-child) > .btn,
|
||||
.input-group-btn:not(:last-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:last-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:first-child) > .btn:not(:last-child):not(.dropdown-toggle),
|
||||
.input-group-btn:not(:first-child) > .btn-group:not(:last-child) > .btn {
|
||||
@include border-right-radius(0);
|
||||
}
|
||||
.input-group-addon:not(:last-child) {
|
||||
border-right: 0;
|
||||
}
|
||||
.input-group .form-control:not(:first-child),
|
||||
.input-group-addon:not(:first-child),
|
||||
.input-group-btn:not(:first-child) > .btn,
|
||||
.input-group-btn:not(:first-child) > .btn-group > .btn,
|
||||
.input-group-btn:not(:first-child) > .dropdown-toggle,
|
||||
.input-group-btn:not(:last-child) > .btn:not(:first-child),
|
||||
.input-group-btn:not(:last-child) > .btn-group:not(:first-child) > .btn {
|
||||
@include border-left-radius(0);
|
||||
}
|
||||
.form-control + .input-group-addon:not(:first-child) {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
//
|
||||
// Button input groups
|
||||
//
|
||||
|
||||
.input-group-btn {
|
||||
position: relative;
|
||||
align-items: stretch;
|
||||
// Jankily prevent input button groups from wrapping with `white-space` and
|
||||
// `font-size` in combination with `inline-block` on buttons.
|
||||
font-size: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
// Negative margin for spacing, position for bringing hovered/focused/actived
|
||||
// element above the siblings.
|
||||
> .btn {
|
||||
position: relative;
|
||||
|
||||
+ .btn {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
}
|
||||
|
||||
// Bring the "active" button to the front
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child > .btn + .btn {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
// Negative margin to only have a single, shared border between the two
|
||||
&:not(:last-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
margin-right: (-$input-btn-border-width);
|
||||
}
|
||||
}
|
||||
&:not(:first-child) {
|
||||
> .btn,
|
||||
> .btn-group {
|
||||
z-index: 2;
|
||||
// remove nagative margin ($input-btn-border-width) to solve overlapping issue with button.
|
||||
margin-left: 0;
|
||||
|
||||
// When input is first, overlap the right side of it with the button(-group)
|
||||
&:first-child {
|
||||
margin-left: (-$input-btn-border-width);
|
||||
}
|
||||
|
||||
// Because specificity
|
||||
@include hover-focus-active {
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
.jumbotron {
|
||||
padding: $jumbotron-padding ($jumbotron-padding / 2);
|
||||
margin-bottom: $jumbotron-padding;
|
||||
background-color: $jumbotron-bg;
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
padding: ($jumbotron-padding * 2) $jumbotron-padding;
|
||||
}
|
||||
}
|
||||
|
||||
.jumbotron-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
@ -1,114 +0,0 @@
|
||||
// Base class
|
||||
//
|
||||
// Easily usable on <ul>, <ol>, or <div>.
|
||||
|
||||
.list-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-left: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
// Interactive list items
|
||||
//
|
||||
// Use anchor or button elements instead of `li`s or `div`s to create interactive
|
||||
// list items. Includes an extra `.active` modifier class for selected items.
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: $list-group-action-color;
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
// Hover state
|
||||
@include hover-focus {
|
||||
color: $list-group-action-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $list-group-hover-bg;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: $list-group-action-active-color;
|
||||
background-color: $list-group-action-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Individual list items
|
||||
//
|
||||
// Use on `li`s or `div`s within the `.list-group` parent.
|
||||
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $list-group-item-padding-y $list-group-item-padding-x;
|
||||
// Place the border on the list items and negative margin up for better styling
|
||||
margin-bottom: -$list-group-border-width;
|
||||
background-color: $list-group-bg;
|
||||
border: $list-group-border-width solid $list-group-border-color;
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
@include border-bottom-radius($list-group-border-radius);
|
||||
}
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $list-group-disabled-color;
|
||||
background-color: $list-group-disabled-bg;
|
||||
}
|
||||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: $list-group-active-color;
|
||||
background-color: $list-group-active-bg;
|
||||
border-color: $list-group-active-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Flush list items
|
||||
//
|
||||
// Remove borders and border-radius to keep list group items edge-to-edge. Most
|
||||
// useful within other components (e.g., cards).
|
||||
|
||||
.list-group-flush {
|
||||
.list-group-item {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
.list-group-item:first-child {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.list-group-item:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Contextual variants
|
||||
//
|
||||
// Add modifier classes to change text and background color on individual items.
|
||||
// Organizationally, this must come after the `:hover` states.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.media {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.media-body {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1,42 +0,0 @@
|
||||
// Toggles
|
||||
//
|
||||
// Used in conjunction with global variables to enable certain theme features.
|
||||
|
||||
// Utilities
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/hover";
|
||||
@import "mixins/image";
|
||||
@import "mixins/badge";
|
||||
@import "mixins/resize";
|
||||
@import "mixins/screen-reader";
|
||||
@import "mixins/size";
|
||||
@import "mixins/reset-text";
|
||||
@import "mixins/text-emphasis";
|
||||
@import "mixins/text-hide";
|
||||
@import "mixins/text-truncate";
|
||||
@import "mixins/visibility";
|
||||
|
||||
// // Components
|
||||
@import "mixins/alert";
|
||||
@import "mixins/buttons";
|
||||
@import "mixins/caret";
|
||||
@import "mixins/pagination";
|
||||
@import "mixins/lists";
|
||||
@import "mixins/list-group";
|
||||
@import "mixins/nav-divider";
|
||||
@import "mixins/forms";
|
||||
@import "mixins/table-row";
|
||||
|
||||
// // Skins
|
||||
@import "mixins/background-variant";
|
||||
@import "mixins/border-radius";
|
||||
@import "mixins/box-shadow";
|
||||
@import "mixins/gradients";
|
||||
@import "mixins/transition";
|
||||
|
||||
// // Layout
|
||||
@import "mixins/clearfix";
|
||||
// @import "mixins/navbar-align";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
@import "mixins/float";
|
||||
@ -1,153 +0,0 @@
|
||||
// .modal-open - body class for killing the scroll
|
||||
// .modal - container to scroll within
|
||||
// .modal-dialog - positioning shell for the actual modal
|
||||
// .modal-content - actual modal w/ bg and corners and stuff
|
||||
|
||||
|
||||
// Kill the scroll on the body
|
||||
.modal-open {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Container that the modal scrolls within
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal;
|
||||
display: none;
|
||||
overflow: hidden;
|
||||
// Prevent Chrome on Windows from adding a focus outline. For details, see
|
||||
// https://github.com/twbs/bootstrap/pull/10951.
|
||||
outline: 0;
|
||||
// We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
|
||||
// gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
|
||||
// See also https://github.com/twbs/bootstrap/issues/17695
|
||||
|
||||
// When fading in the modal, animate it to slide down
|
||||
&.fade .modal-dialog {
|
||||
@include transition($modal-transition);
|
||||
transform: translate(0, -25%);
|
||||
}
|
||||
&.show .modal-dialog { transform: translate(0, 0); }
|
||||
}
|
||||
.modal-open .modal {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// Shell div to position the modal with bottom padding
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: $modal-dialog-margin;
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
pointer-events: auto;
|
||||
background-color: $modal-content-bg;
|
||||
background-clip: padding-box;
|
||||
border: $modal-content-border-width solid $modal-content-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($modal-content-box-shadow-xs);
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $modal-backdrop-bg;
|
||||
|
||||
// Fade for backdrop
|
||||
&.fade { opacity: 0; }
|
||||
&.show { opacity: $modal-backdrop-opacity; }
|
||||
}
|
||||
|
||||
// Modal header
|
||||
// Top section of the modal w/ title and dismiss
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: flex-start; // so the close btn always stays on the upper right corner
|
||||
justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
|
||||
padding: $modal-header-padding;
|
||||
border-bottom: $modal-header-border-width solid $modal-header-border-color;
|
||||
@include border-top-radius($border-radius-lg);
|
||||
|
||||
.close {
|
||||
padding: $modal-header-padding;
|
||||
// auto on the left force icon to the right even when there is no .modal-title
|
||||
margin: (-$modal-header-padding) (-$modal-header-padding) (-$modal-header-padding) auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: $modal-title-line-height;
|
||||
}
|
||||
|
||||
// Modal body
|
||||
// Where all modal content resides (sibling of .modal-header and .modal-footer)
|
||||
.modal-body {
|
||||
position: relative;
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when should there be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: $modal-inner-padding;
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
align-items: center; // vertically center
|
||||
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: $modal-inner-padding;
|
||||
border-top: $modal-footer-border-width solid $modal-footer-border-color;
|
||||
|
||||
// Easily place margin between footer elements
|
||||
> :not(:first-child) { margin-left: .25rem; }
|
||||
> :not(:last-child) { margin-right: .25rem; }
|
||||
}
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
.modal-scrollbar-measure {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: $modal-md;
|
||||
margin: $modal-dialog-margin-y-sm-up auto;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@include box-shadow($modal-content-box-shadow-sm-up);
|
||||
}
|
||||
|
||||
.modal-sm { max-width: $modal-sm; }
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg { max-width: $modal-lg; }
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
// Base class
|
||||
//
|
||||
// Kickstart any navigation component with a set of style resets. Works with
|
||||
// `<nav>`s or `<ul>`s.
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $nav-link-padding-y $nav-link-padding-x;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Disabled state lightens text
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Tabs
|
||||
//
|
||||
|
||||
.nav-tabs {
|
||||
border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
|
||||
|
||||
.nav-item {
|
||||
margin-bottom: -$nav-tabs-border-width;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
border: $nav-tabs-border-width solid transparent;
|
||||
@include border-top-radius($nav-tabs-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $nav-link-disabled-color;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: $nav-tabs-link-active-color;
|
||||
background-color: $nav-tabs-link-active-bg;
|
||||
border-color: $nav-tabs-link-active-border-color $nav-tabs-link-active-border-color $nav-tabs-link-active-bg;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: -$nav-tabs-border-width;
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Pills
|
||||
//
|
||||
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
@include border-radius($nav-pills-border-radius);
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: $nav-pills-link-active-color;
|
||||
background-color: $nav-pills-link-active-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Justified variants
|
||||
//
|
||||
|
||||
.nav-fill {
|
||||
.nav-item {
|
||||
flex: 1 1 auto;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-justified {
|
||||
.nav-item {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tabbable tabs
|
||||
//
|
||||
// Hide tabbable panes to start, show them when `.active`
|
||||
|
||||
.tab-content {
|
||||
> .tab-pane {
|
||||
display: none;
|
||||
}
|
||||
> .active {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@ -1,306 +0,0 @@
|
||||
// Contents
|
||||
//
|
||||
// Navbar
|
||||
// Navbar brand
|
||||
// Navbar nav
|
||||
// Navbar text
|
||||
// Navbar divider
|
||||
// Responsive navbar
|
||||
// Navbar position
|
||||
// Navbar themes
|
||||
|
||||
|
||||
// Navbar
|
||||
//
|
||||
// Provide a static navbar from which we expand to create full-width, fixed, and
|
||||
// other navbar variations.
|
||||
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||
align-items: center;
|
||||
justify-content: space-between; // space out brand from logo
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
|
||||
// Because flex properties aren't inherited, we need to redeclare these first
|
||||
// few properities so that content nested within behave properly.
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar brand
|
||||
//
|
||||
// Used for brand, project, or site names.
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
padding-top: $navbar-brand-padding-y;
|
||||
padding-bottom: $navbar-brand-padding-y;
|
||||
margin-right: $navbar-padding-x;
|
||||
font-size: $navbar-brand-font-size;
|
||||
line-height: inherit;
|
||||
white-space: nowrap;
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar nav
|
||||
//
|
||||
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
|
||||
|
||||
.navbar-nav {
|
||||
display: flex;
|
||||
flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
|
||||
padding-left: 0;
|
||||
margin-bottom: 0;
|
||||
list-style: none;
|
||||
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: static;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar text
|
||||
//
|
||||
//
|
||||
|
||||
.navbar-text {
|
||||
display: inline-block;
|
||||
padding-top: $nav-link-padding-y;
|
||||
padding-bottom: $nav-link-padding-y;
|
||||
}
|
||||
|
||||
|
||||
// Responsive navbar
|
||||
//
|
||||
// Custom styles for responsive collapsing and toggling of navbar contents.
|
||||
// Powered by the collapse Bootstrap JavaScript plugin.
|
||||
|
||||
// When collapsed, prevent the toggleable navbar contents from appearing in
|
||||
// the default flexbox row orienation. Requires the use of `flex-wrap: wrap`
|
||||
// on the `.navbar` parent.
|
||||
.navbar-collapse {
|
||||
flex-basis: 100%;
|
||||
flex-grow: 1;
|
||||
// For always expanded or extra full navbars, ensure content aligns itself
|
||||
// properly vertically. Can be easily overridden with flex utilities.
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.navbar-toggler {
|
||||
padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
|
||||
font-size: $navbar-toggler-font-size;
|
||||
line-height: 1;
|
||||
background: transparent; // remove default button style
|
||||
border: $border-width solid transparent; // remove default button style
|
||||
@include border-radius($navbar-toggler-border-radius);
|
||||
|
||||
@include hover-focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Keep as a separate element so folks can easily override it with another icon
|
||||
// or image file as needed.
|
||||
.navbar-toggler-icon {
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
content: "";
|
||||
background: no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
// Generate series of `.navbar-expand-*` responsive classes for configuring
|
||||
// where your navbar collapses.
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($next) {
|
||||
flex-flow: row nowrap;
|
||||
justify-content: flex-start;
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-right: .5rem;
|
||||
padding-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// For nesting containers, have to redeclare for alignment purposes
|
||||
> .container,
|
||||
> .container-fluid {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
display: flex !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
// Changes flex-bases to auto because of an IE10 bug
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropup {
|
||||
.dropdown-menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Navbar themes
|
||||
//
|
||||
// Styles for switching between navbars with light or dark background.
|
||||
|
||||
// Dark links against a light background
|
||||
.navbar-light {
|
||||
.navbar-brand {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-light-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-light-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-light-color;
|
||||
border-color: $navbar-light-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-light-toggler-icon-bg;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-light-color;
|
||||
a {
|
||||
color: $navbar-light-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-light-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// White links against a dark background
|
||||
.navbar-dark {
|
||||
.navbar-brand {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-dark-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-hover-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: $navbar-dark-disabled-color;
|
||||
}
|
||||
}
|
||||
|
||||
.show > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.show,
|
||||
.nav-link.active {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: $navbar-dark-color;
|
||||
border-color: $navbar-dark-toggler-border-color;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: $navbar-dark-toggler-icon-bg;
|
||||
}
|
||||
|
||||
.navbar-text {
|
||||
color: $navbar-dark-color;
|
||||
a {
|
||||
color: $navbar-dark-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-dark-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
.pagination {
|
||||
display: flex;
|
||||
@include list-unstyled();
|
||||
@include border-radius();
|
||||
}
|
||||
|
||||
.page-item {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
margin-left: 0;
|
||||
@include border-left-radius($border-radius);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-right-radius($border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
&.active .page-link {
|
||||
z-index: 2;
|
||||
color: $pagination-active-color;
|
||||
background-color: $pagination-active-bg;
|
||||
border-color: $pagination-active-border-color;
|
||||
}
|
||||
|
||||
&.disabled .page-link {
|
||||
color: $pagination-disabled-color;
|
||||
pointer-events: none;
|
||||
background-color: $pagination-disabled-bg;
|
||||
border-color: $pagination-disabled-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: $pagination-padding-y $pagination-padding-x;
|
||||
margin-left: -$pagination-border-width;
|
||||
line-height: $pagination-line-height;
|
||||
color: $pagination-color;
|
||||
background-color: $pagination-bg;
|
||||
border: $pagination-border-width solid $pagination-border-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $pagination-hover-color;
|
||||
text-decoration: none;
|
||||
background-color: $pagination-hover-bg;
|
||||
border-color: $pagination-hover-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Sizing
|
||||
//
|
||||
|
||||
.pagination-lg {
|
||||
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $border-radius-lg);
|
||||
}
|
||||
|
||||
.pagination-sm {
|
||||
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $border-radius-sm);
|
||||
}
|
||||
@ -1,194 +0,0 @@
|
||||
.popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-popover;
|
||||
display: block;
|
||||
max-width: $popover-max-width;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||
word-wrap: break-word;
|
||||
background-color: $popover-bg;
|
||||
background-clip: padding-box;
|
||||
border: $popover-border-width solid $popover-border-color;
|
||||
@include border-radius($border-radius-lg);
|
||||
@include box-shadow($popover-box-shadow);
|
||||
|
||||
// Arrows
|
||||
//
|
||||
// .arrow is outer, .arrow::after is inner
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $popover-arrow-width;
|
||||
height: $popover-arrow-height;
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
content: "";
|
||||
border-width: $popover-arrow-width;
|
||||
}
|
||||
.arrow::after {
|
||||
content: "";
|
||||
border-width: $popover-arrow-width;
|
||||
}
|
||||
|
||||
// Popover directions
|
||||
|
||||
&.bs-popover-top {
|
||||
margin-bottom: $popover-arrow-width;
|
||||
|
||||
.arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
bottom: -$popover-arrow-width;
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-right {
|
||||
margin-left: $popover-arrow-width;
|
||||
|
||||
.arrow {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
margin-top: -$popover-arrow-width;
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
left: -$popover-arrow-width;
|
||||
border-right-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
border-right-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-bottom {
|
||||
margin-top: $popover-arrow-width;
|
||||
|
||||
.arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
margin-left: -$popover-arrow-width;
|
||||
border-top-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
top: -$popover-arrow-width;
|
||||
border-bottom-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
border-bottom-color: $popover-arrow-color;
|
||||
}
|
||||
|
||||
// This will remove the popover-header's border just below the arrow
|
||||
.popover-header::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: block;
|
||||
width: 20px;
|
||||
margin-left: -10px;
|
||||
content: "";
|
||||
border-bottom: $popover-border-width solid $popover-header-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.bs-popover-left {
|
||||
margin-right: $popover-arrow-width;
|
||||
|
||||
.arrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.arrow::before,
|
||||
.arrow::after {
|
||||
margin-top: -$popover-arrow-width;
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
right: -$popover-arrow-width;
|
||||
border-left-color: $popover-arrow-outer-color;
|
||||
}
|
||||
|
||||
.arrow::after {
|
||||
right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
|
||||
border-left-color: $popover-arrow-color;
|
||||
}
|
||||
}
|
||||
&.bs-popover-auto {
|
||||
&[x-placement^="top"] {
|
||||
@extend .bs-popover-top;
|
||||
}
|
||||
&[x-placement^="right"] {
|
||||
@extend .bs-popover-right;
|
||||
}
|
||||
&[x-placement^="bottom"] {
|
||||
@extend .bs-popover-bottom;
|
||||
}
|
||||
&[x-placement^="left"] {
|
||||
@extend .bs-popover-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-header {
|
||||
padding: $popover-header-padding-y $popover-header-padding-x;
|
||||
margin-bottom: 0; // Reset the default from Reboot
|
||||
font-size: $font-size-base;
|
||||
color: $popover-header-color;
|
||||
background-color: $popover-header-bg;
|
||||
border-bottom: $popover-border-width solid darken($popover-header-bg, 5%);
|
||||
$offset-border-width: calc(#{$border-radius-lg} - #{$popover-border-width});
|
||||
@include border-top-radius($offset-border-width);
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: $popover-body-padding-y $popover-body-padding-x;
|
||||
color: $popover-body-color;
|
||||
}
|
||||
@ -1,136 +0,0 @@
|
||||
/* General Portal Styles
|
||||
*
|
||||
*/
|
||||
.content {
|
||||
font-family: Source Serif Pro;
|
||||
color: #333333 !important;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
line-height: 36px;
|
||||
text-align: left;
|
||||
}
|
||||
.preamble p {
|
||||
color: #777777;
|
||||
font-family: Source Sans Pro;
|
||||
font-size: 2em;
|
||||
line-height: 1.3em;
|
||||
font-weight: $font-weight-light;
|
||||
}
|
||||
|
||||
.human-name {
|
||||
font-family: Source Sans Pro;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
width: 95%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.human-name-small {
|
||||
font-size: 24px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.nick {
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: Source Sans Pro;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 25px;
|
||||
width: 95%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.description-small, .description-small p {
|
||||
font-size: 16px;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.jobs-ul {
|
||||
color: #272755;
|
||||
font-family: $font-family-monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19px;
|
||||
text-align: left;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.section-nav {
|
||||
padding-top: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
#sidenav-topics .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
color: #7D4698;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.toc-entry a:hover {
|
||||
color: $purple !important;
|
||||
}
|
||||
|
||||
.sidetopics {
|
||||
background: transparent;
|
||||
position: sticky;
|
||||
top: 114px;
|
||||
padding-top: inherit;
|
||||
}
|
||||
|
||||
#topics {
|
||||
min-height: 500px;
|
||||
margin-bottom: 200px;
|
||||
}
|
||||
|
||||
#topics h5{
|
||||
padding-top: 7rem;
|
||||
}
|
||||
|
||||
.question {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
.border-active {
|
||||
border-bottom: 3px solid !important;
|
||||
border-color: $primary !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
z-index:99999999999;
|
||||
}
|
||||
.footer a.nav-link {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
box-shadow: 0 1px 0 0 #E5E5E5 !important;
|
||||
}
|
||||
|
||||
footer .border{
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.display-4 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.toc-entry a {
|
||||
display: block;
|
||||
padding: 0.4rem 0 !important;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
// stylelint-disable declaration-no-important, selector-no-qualifying-type
|
||||
|
||||
// Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css
|
||||
|
||||
// ==========================================================================
|
||||
// Print styles.
|
||||
// Inlined to avoid the additional HTTP request:
|
||||
// http://www.phpied.com/delay-loading-your-print-css/
|
||||
// ==========================================================================
|
||||
|
||||
@if $enable-print-styles {
|
||||
@media print {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
// Bootstrap specific; comment out `color` and `background`
|
||||
//color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
|
||||
text-shadow: none !important;
|
||||
//background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//a[href]::after {
|
||||
// content: " (" attr(href) ")";
|
||||
//}
|
||||
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
// Bootstrap specific; comment the following selector out
|
||||
//
|
||||
// Don't show links that are fragment identifiers,
|
||||
// or use the `javascript:` pseudo protocol
|
||||
//
|
||||
|
||||
//a[href^="#"]::after,
|
||||
//a[href^="javascript:"]::after {
|
||||
// content: "";
|
||||
//}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap !important;
|
||||
}
|
||||
pre,
|
||||
blockquote {
|
||||
border: $border-width solid #999; // Bootstrap custom code; using `$border-width` instead of 1px
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
//
|
||||
// Printing Tables:
|
||||
// http://css-discuss.incutio.com/wiki/Printing_Tables
|
||||
//
|
||||
|
||||
thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
tr,
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
p,
|
||||
h2,
|
||||
h3 {
|
||||
orphans: 3;
|
||||
widows: 3;
|
||||
}
|
||||
|
||||
h2,
|
||||
h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
// Bootstrap specific changes start
|
||||
|
||||
// Bootstrap components
|
||||
.navbar {
|
||||
display: none;
|
||||
}
|
||||
.badge {
|
||||
border: $border-width solid #000;
|
||||
}
|
||||
|
||||
.table {
|
||||
border-collapse: collapse !important;
|
||||
|
||||
td,
|
||||
th {
|
||||
background-color: #fff !important;
|
||||
}
|
||||
}
|
||||
.table-bordered {
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #ddd !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap specific changes end
|
||||
}
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@keyframes progress-bar-stripes {
|
||||
from { background-position: $progress-height 0; }
|
||||
to { background-position: 0 0; }
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
height: $progress-height;
|
||||
overflow: hidden; // force rounded corners by cropping it
|
||||
font-size: $progress-font-size;
|
||||
background-color: $progress-bg;
|
||||
@include border-radius($progress-border-radius);
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: $progress-bar-color;
|
||||
background-color: $progress-bar-bg;
|
||||
}
|
||||
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
background-size: $progress-height $progress-height;
|
||||
}
|
||||
|
||||
.progress-bar-animated {
|
||||
animation: progress-bar-stripes $progress-bar-animation-timing;
|
||||
}
|
||||
@ -1,504 +0,0 @@
|
||||
// stylelint-disable at-rule-no-vendor-prefix, declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
|
||||
|
||||
// Reboot
|
||||
//
|
||||
// Normalization of HTML elements, manually forked from Normalize.css to remove
|
||||
// styles targeting irrelevant browsers while applying new styles.
|
||||
//
|
||||
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
|
||||
|
||||
|
||||
// Document
|
||||
//
|
||||
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
|
||||
// 2. Change the default font family in all browsers.
|
||||
// 3. Correct the line height in all browsers.
|
||||
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
|
||||
// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
|
||||
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
|
||||
// 6. Change the default tap highlight to be completely transparent in iOS.
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: sans-serif; // 2
|
||||
line-height: 1.15; // 3
|
||||
-webkit-text-size-adjust: 100%; // 4
|
||||
-ms-text-size-adjust: 100%; // 4
|
||||
-ms-overflow-style: scrollbar; // 5
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0); // 6
|
||||
}
|
||||
|
||||
// IE10+ doesn't honor `<meta name="viewport">` in some cases.
|
||||
@at-root {
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable selector-list-comma-newline-after
|
||||
// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block;
|
||||
}
|
||||
// stylelint-enable selector-list-comma-newline-after
|
||||
|
||||
// Body
|
||||
//
|
||||
// 1. Remove the margin in all browsers.
|
||||
// 2. As a best practice, apply a default `background-color`.
|
||||
// 3. Set an explicit initial text-align value so that we can later use the
|
||||
// the `inherit` value on things like `<th>` elements.
|
||||
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-family: $font-family-base;
|
||||
font-size: $font-size-base;
|
||||
font-weight: $font-weight-base;
|
||||
line-height: $line-height-base;
|
||||
color: $body-color;
|
||||
text-align: left; // 3
|
||||
background-color: $body-bg; // 2
|
||||
}
|
||||
|
||||
// Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
// This prevents an unwanted focus outline from appearing around elements that
|
||||
// might still respond to pointer events.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
|
||||
// Content grouping
|
||||
//
|
||||
// 1. Add the correct box sizing in Firefox.
|
||||
// 2. Show the overflow in Edge and IE.
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; // 1
|
||||
height: 0; // 1
|
||||
overflow: visible; // 2
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// Remove top margins from headings
|
||||
//
|
||||
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
// margin for easier control within type scales as it avoids margin collapsing.
|
||||
// stylelint-disable selector-list-comma-newline-after
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
}
|
||||
// stylelint-enable selector-list-comma-newline-after
|
||||
|
||||
// Reset margins on paragraphs
|
||||
//
|
||||
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
// bottom margin to use `rem` units instead of `em`.
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: $paragraph-margin-bottom;
|
||||
}
|
||||
|
||||
// Abbreviations
|
||||
//
|
||||
// 1. Remove the bottom border in Firefox 39-.
|
||||
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
// 3. Add explicit cursor to indicate changed behavior.
|
||||
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] { // 4
|
||||
text-decoration: underline; // 2
|
||||
text-decoration: underline dotted; // 2
|
||||
cursor: help; // 3
|
||||
border-bottom: 0; // 1
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: $dt-font-weight;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; // Undo browser default
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic; // Add the correct font style in Android 4.3-
|
||||
}
|
||||
|
||||
// stylelint-disable font-weight-notation
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
|
||||
}
|
||||
// stylelint-enable font-weight-notation
|
||||
|
||||
small {
|
||||
font-size: 80%; // Add the correct font size in all browsers
|
||||
}
|
||||
|
||||
//
|
||||
// Prevent `sub` and `sup` elements from affecting the line height in
|
||||
// all browsers.
|
||||
//
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub { bottom: -.25em; }
|
||||
sup { top: -.5em; }
|
||||
|
||||
|
||||
//
|
||||
// Links
|
||||
//
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: $link-decoration;
|
||||
background-color: transparent; // Remove the gray background on active links in IE 10.
|
||||
-webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
|
||||
@include hover {
|
||||
color: $link-hover-color;
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
|
||||
// And undo these styles for placeholder links/named anchors (without href)
|
||||
// which have not been made explicitly keyboard-focusable (without tabindex).
|
||||
// It would be more straightforward to just use a[href] in previous block, but that
|
||||
// causes specificity issues in many other styles that are too complex to fix.
|
||||
// See https://github.com/twbs/bootstrap/issues/19402
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
@include hover-focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Code
|
||||
//
|
||||
|
||||
// stylelint-disable font-family-no-duplicate-names
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; // Correct the inheritance and scaling of font size in all browsers.
|
||||
font-size: 1em; // Correct the odd `em` font sizing in all browsers.
|
||||
}
|
||||
// stylelint-enable font-family-no-duplicate-names
|
||||
|
||||
pre {
|
||||
// Remove browser default top margin
|
||||
margin-top: 0;
|
||||
// Reset browser default of `1em` to use `rem`s
|
||||
margin-bottom: 1rem;
|
||||
// Don't allow content to break outside
|
||||
overflow: auto;
|
||||
// We have @viewport set which causes scrollbars to overlap content in IE11 and Edge, so
|
||||
// we force a non-overlapping, non-auto-hiding scrollbar to counteract.
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Figures
|
||||
//
|
||||
|
||||
figure {
|
||||
// Apply a consistent margin strategy (matches our type styles).
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Images and content
|
||||
//
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none; // Remove the border on images inside links in IE 10-.
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; // Hide the overflow in IE
|
||||
}
|
||||
|
||||
|
||||
// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
//
|
||||
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
// However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
// See:
|
||||
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
|
||||
// * https://caniuse.com/#feat=css-touch-action
|
||||
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
border-collapse: collapse; // Prevent double borders
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: $table-cell-padding;
|
||||
padding-bottom: $table-cell-padding;
|
||||
color: $text-muted;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
// Matches default `<td>` alignment by inheriting from the `<body>`, or the
|
||||
// closest parent with a set `text-align`.
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Forms
|
||||
//
|
||||
|
||||
label {
|
||||
// Allow labels to use `margin` for spacing.
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
// Remove the default `border-radius` that macOS Chrome adds.
|
||||
//
|
||||
// Details at https://github.com/twbs/bootstrap/issues/24093
|
||||
button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
// Work around a Firefox/IE bug where the transparent `button` background
|
||||
// results in a loss of the default `button` focus styles.
|
||||
//
|
||||
// Credit: https://github.com/suitcss/base/
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0; // Remove the margin in Firefox and Safari
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible; // Show the overflow in Edge
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; // Remove the inheritance of text transform in Firefox
|
||||
}
|
||||
|
||||
// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
// controls in Android 4.
|
||||
// 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
button,
|
||||
html [type="button"], // 1
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; // 2
|
||||
}
|
||||
|
||||
// Remove inner border and padding from Firefox, but don't restore the outline like Normalize.
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
|
||||
padding: 0; // 2. Remove the padding in IE 10-
|
||||
}
|
||||
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
// bug where setting a custom line-height prevents text from being vertically
|
||||
// centered within the input.
|
||||
// See https://bugs.webkit.org/show_bug.cgi?id=139848
|
||||
// and https://github.com/twbs/bootstrap/issues/11266
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto; // Remove the default vertical scrollbar in IE.
|
||||
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
// Browsers set a default `min-width: min-content;` on fieldsets,
|
||||
// unlike e.g. `<div>`s, which have `min-width: 0;` by default.
|
||||
// So we reset that to ensure fieldsets behave more like a standard block element.
|
||||
// See https://github.com/twbs/bootstrap/issues/12359
|
||||
// and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
|
||||
min-width: 0;
|
||||
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
// 1. Correct the text wrapping in Edge and IE.
|
||||
// 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%; // 1
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit; // 2
|
||||
white-space: normal; // 1
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
}
|
||||
|
||||
// Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
// This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
// `.form-control` class can properly style them. Note that this cannot simply
|
||||
// be added to `.form-control` as it's not specific enough. For details, see
|
||||
// https://github.com/twbs/bootstrap/issues/11586.
|
||||
outline-offset: -2px; // 2. Correct the outline style in Safari.
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
//
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
//
|
||||
// 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
// 2. Change font properties to `inherit` in Safari.
|
||||
//
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit; // 2
|
||||
-webkit-appearance: button; // 1
|
||||
}
|
||||
|
||||
//
|
||||
// Correct element displays
|
||||
//
|
||||
|
||||
output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
summary {
|
||||
display: list-item; // Add the correct display in all browsers
|
||||
}
|
||||
|
||||
template {
|
||||
display: none; // Add the correct display in IE
|
||||
}
|
||||
|
||||
// Always hide an element with the `hidden` HTML attribute (from PureCSS).
|
||||
// Needed for proper display in IE 10-.
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
:root {
|
||||
// Custom variable values only support SassScript inside `#{}`.
|
||||
@each $color, $value in $colors {
|
||||
--#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
--#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $bp, $value in $grid-breakpoints {
|
||||
--breakpoint-#{$bp}: #{$value};
|
||||
}
|
||||
|
||||
// Use `inspect` for lists so that quoted items keep the quotes.
|
||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
|
||||
--font-family-monospace: #{inspect($font-family-monospace)};
|
||||
}
|
||||
@ -1,166 +0,0 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
//
|
||||
// Right side table of contents
|
||||
//
|
||||
|
||||
.bd-toc {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
height: calc(100vh - 4rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
order: 2;
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.section-nav {
|
||||
padding-left: 0;
|
||||
border-left: 1px solid #eee;
|
||||
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
|
||||
ul {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toc-entry {
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: .125rem 1.5rem;
|
||||
color: #99979c;
|
||||
|
||||
&:hover {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Left side navigation
|
||||
//
|
||||
|
||||
.bd-sidebar {
|
||||
order: 0;
|
||||
// background-color: #f5f2f9;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .1);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
position: sticky;
|
||||
top: 4rem;
|
||||
z-index: 1000;
|
||||
height: calc(100vh - 4rem);
|
||||
}
|
||||
border-right: 1px solid rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-links {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@supports (position: sticky) {
|
||||
max-height: calc(100vh - 9rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Override collapse behaviors
|
||||
@include media-breakpoint-up(md) {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-search {
|
||||
position: relative; // To contain the Algolia search
|
||||
padding: 1rem 15px;
|
||||
margin-right: -15px;
|
||||
margin-left: -15px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, .05);
|
||||
|
||||
.form-control:focus {
|
||||
border-color: $bd-purple-bright;
|
||||
box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
|
||||
}
|
||||
}
|
||||
|
||||
.bd-search-docs-toggle {
|
||||
line-height: 1;
|
||||
color: $gray-900;
|
||||
}
|
||||
|
||||
.bd-sidenav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-toc-link {
|
||||
display: block;
|
||||
padding: .25rem 1.5rem;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
|
||||
&:hover {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-toc-item {
|
||||
&.active {
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
> .bd-toc-link {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
> .bd-sidenav {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// All levels of nav
|
||||
.bd-sidebar .nav > li > a {
|
||||
display: block;
|
||||
padding: .25rem 1.5rem;
|
||||
font-size: 90%;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > li > a:hover {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > .active > a,
|
||||
.bd-sidebar .nav > .active:hover > a {
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
background-color: transparent;
|
||||
}
|
||||
@ -1,180 +0,0 @@
|
||||
//
|
||||
// Basic Bootstrap table
|
||||
//
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
background-color: $table-bg; // Reset for nesting within parents with `background-color`.
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding;
|
||||
vertical-align: top;
|
||||
border-top: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
tbody + tbody {
|
||||
border-top: (2 * $table-border-width) solid $table-border-color;
|
||||
}
|
||||
|
||||
.table {
|
||||
background-color: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Condensed table w/ half padding
|
||||
//
|
||||
|
||||
.table-sm {
|
||||
th,
|
||||
td {
|
||||
padding: $table-cell-padding-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Bordered version
|
||||
//
|
||||
// Add borders all around the table and between all the columns.
|
||||
|
||||
.table-bordered {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
|
||||
th,
|
||||
td {
|
||||
border: $table-border-width solid $table-border-color;
|
||||
}
|
||||
|
||||
thead {
|
||||
th,
|
||||
td {
|
||||
border-bottom-width: (2 * $table-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zebra-striping
|
||||
//
|
||||
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
|
||||
|
||||
.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Hover effect
|
||||
//
|
||||
// Placed here since it has to come after the potential zebra striping
|
||||
|
||||
.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Table backgrounds
|
||||
//
|
||||
// Exact selectors below required to override `.table-striped` and prevent
|
||||
// inheritance to nested tables.
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
@include table-row-variant($color, theme-color-level($color, -9));
|
||||
}
|
||||
|
||||
@include table-row-variant(active, $table-active-bg);
|
||||
|
||||
|
||||
// Dark styles
|
||||
//
|
||||
// Same table markup, but inverted color scheme: dark background and light text.
|
||||
|
||||
// stylelint-disable-next-line no-duplicate-selectors
|
||||
.table {
|
||||
.thead-dark {
|
||||
th {
|
||||
color: $table-dark-color;
|
||||
background-color: $table-dark-bg;
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.thead-light {
|
||||
th {
|
||||
color: $table-head-color;
|
||||
background-color: $table-head-bg;
|
||||
border-color: $table-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-dark {
|
||||
color: $table-dark-color;
|
||||
background-color: $table-dark-bg;
|
||||
|
||||
th,
|
||||
td,
|
||||
thead th {
|
||||
border-color: $table-dark-border-color;
|
||||
}
|
||||
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.table-striped {
|
||||
tbody tr:nth-of-type(odd) {
|
||||
background-color: $table-dark-accent-bg;
|
||||
}
|
||||
}
|
||||
|
||||
&.table-hover {
|
||||
tbody tr {
|
||||
@include hover {
|
||||
background-color: $table-dark-hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Responsive tables
|
||||
//
|
||||
// Generate series of `.table-responsive-*` classes for configuring the screen
|
||||
// size of where your table will overflow.
|
||||
|
||||
.table-responsive {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
&#{$infix} {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
|
||||
|
||||
// Prevent double border on horizontal scroll due to use of `display: block;`
|
||||
&.table-bordered {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
// Base class
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
z-index: $zindex-tooltip;
|
||||
display: block;
|
||||
margin: $tooltip-margin;
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
font-size: $font-size-sm;
|
||||
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
|
||||
&.show { opacity: $tooltip-opacity; }
|
||||
|
||||
.arrow {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: $tooltip-arrow-width;
|
||||
height: $tooltip-arrow-height;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
position: absolute;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&.bs-tooltip-top {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
.arrow {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
margin-left: -($tooltip-arrow-width - 2);
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-top-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-right {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
.arrow {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
margin-top: -($tooltip-arrow-width - 2);
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
|
||||
border-right-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-bottom {
|
||||
padding: $tooltip-arrow-width 0;
|
||||
.arrow {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
margin-left: -($tooltip-arrow-width - 2);
|
||||
content: "";
|
||||
border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-bottom-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-left {
|
||||
padding: 0 $tooltip-arrow-width;
|
||||
.arrow {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.arrow::before {
|
||||
right: 0;
|
||||
margin-top: -($tooltip-arrow-width - 2);
|
||||
content: "";
|
||||
border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
|
||||
border-left-color: $tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
&.bs-tooltip-auto {
|
||||
&[x-placement^="top"] {
|
||||
@extend .bs-tooltip-top;
|
||||
}
|
||||
&[x-placement^="right"] {
|
||||
@extend .bs-tooltip-right;
|
||||
}
|
||||
&[x-placement^="bottom"] {
|
||||
@extend .bs-tooltip-bottom;
|
||||
}
|
||||
&[x-placement^="left"] {
|
||||
@extend .bs-tooltip-left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: $tooltip-max-width;
|
||||
padding: $tooltip-padding-y $tooltip-padding-x;
|
||||
color: $tooltip-color;
|
||||
text-align: center;
|
||||
background-color: $tooltip-bg;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
@ -1,62 +0,0 @@
|
||||
// Tor Main Color Palette
|
||||
$purple: #7D4698 !default;
|
||||
$purple-dark: #59316B !default;
|
||||
$green: #68B030 !default;
|
||||
$gray-dark: #333A41 !default;
|
||||
$white: #FFFFFF !default;
|
||||
$purple-darker: #401753 !default;
|
||||
|
||||
// Other Colors
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #EF243E !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #FFBF00 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #00A5BB !default;
|
||||
|
||||
$gray-100: #F8F9FA !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #848E97 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #333A41 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$primary: $purple !default;
|
||||
$secondary: $gray-800 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $purple-dark !default;
|
||||
$darker: $purple-darker !default;
|
||||
|
||||
$navbar-dark-color: $white !default;
|
||||
$navbar-light-color: $purple-dark !default;
|
||||
|
||||
// Local docs variables
|
||||
$bd-purple: #7D4698 !default;
|
||||
$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%) !default;
|
||||
$bd-purple-light: lighten(saturate($bd-purple, 5%), 45%) !default;
|
||||
$bd-dark: #59316B !default;
|
||||
$bd-download: #ffe484 !default;
|
||||
$bd-info: #5bc0de !default;
|
||||
$bd-warning: #f0ad4e !default;
|
||||
$bd-danger: #d9534f !default;
|
||||
|
||||
// Fonts - Source Sans Pro
|
||||
$font-family-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-serif: "Source Serif Pro", -apple-system, "Georgia", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-monospace: "Source Code Pro", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans !default;
|
||||
|
||||
$mark-bg: $bd-purple-light;
|
||||
|
||||
// Tables
|
||||
$table-accent-bg: $bd-purple-light;
|
||||
@ -1,738 +0,0 @@
|
||||
/*
|
||||
* Base structure
|
||||
*/
|
||||
|
||||
/* Move down content because we have a fixed navbar that is 3.5rem tall */
|
||||
.page {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
|
||||
.no-border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.no-background {
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown-select select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none; /* remove default arrow */
|
||||
}
|
||||
|
||||
.dropdown-select:after {
|
||||
content: '⏷';
|
||||
position: absolute;
|
||||
left: 85%;
|
||||
right: 0;
|
||||
top: 15%;
|
||||
bottom: 0;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
// Define darker background
|
||||
.bg-darker{
|
||||
background-color: $purple-darker;
|
||||
}
|
||||
|
||||
/*
|
||||
* Typography
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: Source Sans Pro;
|
||||
src: url('fonts/SourceSansPro/SourceSansPro-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Source Sans Pro Light;
|
||||
src: url('fonts/SourceSansPro/SourceSansPro-Light.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Source Sans Pro Bold;
|
||||
src: url('fonts/SourceSansPro/SourceSansPro-Bold.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Source Serif Pro;
|
||||
src: url('fonts/SourceSerifPro/SourceSerifPro-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Source Code Pro;
|
||||
src: url('fonts/SourceCodePro/SourceCodePro-Regular.ttf');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Tor Icons;
|
||||
src: url('fonts/TorIcons/tor-icons.eot?#iefix') format('embedded-opentype'),
|
||||
url('fonts/TorIcons/tor-icons.woff2') format('woff2'),
|
||||
url('fonsts/TorIcons/tor-icons.woff') format('woff'),
|
||||
url('fonts/TorIcons/tor-icons.ttf') format('truetype'),
|
||||
url('fonts/TorIcons/tor-icons.svg?#tor-icons') format('svg');
|
||||
}
|
||||
|
||||
.ti:before {
|
||||
font-family: Tor Icons !important;
|
||||
font-style: normal;
|
||||
font-weight: normal !important;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.ti-authority:before {
|
||||
content: "\f101";
|
||||
}
|
||||
.ti-badexit:before {
|
||||
content: "\f102";
|
||||
}
|
||||
.ti-bridge:before {
|
||||
content: "\f103";
|
||||
}
|
||||
.ti-country:before {
|
||||
content: "\f104";
|
||||
}
|
||||
.ti-directory:before {
|
||||
content: "\f105";
|
||||
}
|
||||
.ti-exit:before {
|
||||
content: "\f106";
|
||||
}
|
||||
.ti-fallbackdir:before {
|
||||
content: "\f107";
|
||||
}
|
||||
.ti-fast:before {
|
||||
content: "\f108";
|
||||
}
|
||||
.ti-fingerprint:before {
|
||||
content: "\f109";
|
||||
}
|
||||
.ti-guard:before {
|
||||
content: "\f10a";
|
||||
}
|
||||
.ti-hibernating:before {
|
||||
content: "\f10b";
|
||||
}
|
||||
.ti-hsdir:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
.ti-ipv4:before {
|
||||
content: "\f10d";
|
||||
}
|
||||
.ti-ipv6:before {
|
||||
content: "\f10e";
|
||||
}
|
||||
.ti-ipv6exit:before {
|
||||
content: "\f10f";
|
||||
}
|
||||
.ti-noedconsensus:before {
|
||||
content: "\f110";
|
||||
}
|
||||
.ti-notrecommended:before {
|
||||
content: "\f111";
|
||||
}
|
||||
.ti-onion-alt:before {
|
||||
content: "\f112";
|
||||
}
|
||||
.ti-onion:before {
|
||||
content: "\f113";
|
||||
}
|
||||
.ti-reachableipv4:before {
|
||||
content: "\f114";
|
||||
}
|
||||
.ti-reachableipv6:before {
|
||||
content: "\f115";
|
||||
}
|
||||
.ti-relay:before {
|
||||
content: "\f116";
|
||||
}
|
||||
.ti-running:before {
|
||||
content: "\f117";
|
||||
}
|
||||
.ti-stable:before {
|
||||
content: "\f118";
|
||||
}
|
||||
.ti-tshirt:before {
|
||||
content: "\f119";
|
||||
}
|
||||
.ti-unmeasured:before {
|
||||
content: "\f11a";
|
||||
}
|
||||
.ti-unreachableipv4:before {
|
||||
content: "\f11b";
|
||||
}
|
||||
.ti-unreachableipv6:before {
|
||||
content: "\f11c";
|
||||
}
|
||||
.ti-v2dir:before {
|
||||
content: "\f11d";
|
||||
}
|
||||
.ti-valid:before {
|
||||
content: "\f11e";
|
||||
}
|
||||
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4 {
|
||||
font-family: Source Sans Pro Light;
|
||||
}
|
||||
|
||||
.font-family-serif {
|
||||
font-family: $font-family-serif !important;
|
||||
}
|
||||
.font-weight-light {
|
||||
font-family: Source Sans Pro Light
|
||||
}
|
||||
.font-weight-bold {
|
||||
font-family: Source Sans Pro Bold
|
||||
}
|
||||
|
||||
small, .small{
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
h6 {
|
||||
text-transform: none !important;
|
||||
font-weight: bold;
|
||||
color: $purple;
|
||||
}
|
||||
p {
|
||||
font-size: 1.3rem; // We need at least 18px minuim +_+
|
||||
color: $gray-900;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.display-5 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.display-6 {
|
||||
font-size: 1.3em
|
||||
}
|
||||
mark, .mark {
|
||||
color: $purple;
|
||||
}
|
||||
|
||||
.bd-sidebar{
|
||||
border: 0 !important;
|
||||
}
|
||||
.bd-toc{
|
||||
order: 0 !important;
|
||||
}
|
||||
|
||||
#components-nav .nav-pills .nav-link,
|
||||
#visuals-nav .nav-pills .nav-link{
|
||||
border-radius: 0;
|
||||
}
|
||||
#components-nav .nav-pills .nav-link.active,
|
||||
#visuals-nav .nav-pills .nav-link.active{
|
||||
background-color: $white;
|
||||
color: $purple;
|
||||
border-left: 2px solid $purple;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
* Nav
|
||||
*/
|
||||
.navbar {
|
||||
background-image: url('./images/onion-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 10px 12px;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
span {
|
||||
font-size: 0.6em;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidetopics {
|
||||
z-index: 1000;
|
||||
padding: 20px 0;
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
|
||||
.sidetopics .nav {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.sidetopics .nav-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidetopics .nav-item + .nav-item {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidetopics .nav-link {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.toc-h4 {
|
||||
padding-left: 0.8em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
// Styleguide Nav Update
|
||||
|
||||
// All levels of nav
|
||||
.bd-sidebar .nav > li > a {
|
||||
font-size: 100%;
|
||||
color: rgba(0, 0, 0, .85);
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > li > a:hover {
|
||||
color: $purple !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#bd-docs-nav{
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
overflow-y: scroll;
|
||||
max-height: 350px;
|
||||
}
|
||||
|
||||
.dropdown .btn {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.btn {text-transform: none !important;}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
display: none; /* hide the checkbox */
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
display: none; /* hide the checkbox */
|
||||
}
|
||||
|
||||
.side-toggler {
|
||||
float:right !important;
|
||||
}
|
||||
|
||||
#menu-toggle:checked + .burger-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav-toggle:checked + .hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover .chevron-up {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover .chevron-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.side-nav.active {
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.smalltopics {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: -10px -1px 1px -1px;
|
||||
}
|
||||
|
||||
.chevron-up {
|
||||
display: none !important;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
.chevron-down {
|
||||
display: block;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
/*
|
||||
* Dashboard
|
||||
*/
|
||||
|
||||
/* Placeholders */
|
||||
.placeholders {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.placeholder img {
|
||||
padding-top: 1.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* Forms
|
||||
*/
|
||||
.form-wide {
|
||||
width: 100% !important;
|
||||
|
||||
input {
|
||||
padding: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Text variations
|
||||
//
|
||||
|
||||
.text-tpo {
|
||||
font-family: $font-family-sans;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Badges
|
||||
//
|
||||
.badge{
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumbs
|
||||
//
|
||||
.breadcrumb{
|
||||
background-color: $white;
|
||||
}
|
||||
|
||||
//
|
||||
// Cards
|
||||
//
|
||||
.card-body p{
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.7rem;
|
||||
}
|
||||
|
||||
//
|
||||
// Tables
|
||||
//
|
||||
.table-striped td{
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
//
|
||||
// Callouts
|
||||
//
|
||||
.bd-callout {
|
||||
padding: 1.25rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-bottom: 1.25rem;
|
||||
border: 1px solid #eee;
|
||||
border-left-width: .25rem;
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
.bd-callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bd-callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.bd-callout + .bd-callout {
|
||||
margin-top: -.25rem;
|
||||
}
|
||||
|
||||
// Images
|
||||
|
||||
.image-thumb {
|
||||
object-fit: cover;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
// Variations
|
||||
@mixin bs-callout-variant($color) {
|
||||
border-left-color: $color;
|
||||
|
||||
h4 { color: $color; }
|
||||
}
|
||||
|
||||
.bd-callout-info { @include bs-callout-variant($bd-info); }
|
||||
.bd-callout-warning { @include bs-callout-variant($bd-warning); }
|
||||
.bd-callout-danger { @include bs-callout-variant($bd-danger); }
|
||||
|
||||
// Styleguide Nav Update
|
||||
|
||||
// All levels of nav
|
||||
.bd-sidebar .nav > li > a {
|
||||
color: rgba(0, 0, 0, .85);
|
||||
}
|
||||
|
||||
.bd-sidebar .nav > li > a:hover {
|
||||
color: $purple !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#bd-docs-nav{
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
// stylelint-disable declaration-block-single-line-max-declarations
|
||||
|
||||
.hll { background-color: #ffc; }
|
||||
.c { color: #999; }
|
||||
.k { color: #069; }
|
||||
.o { color: #555; }
|
||||
.cm { color: #999; }
|
||||
.cp { color: #099; }
|
||||
.c1 { color: #999; }
|
||||
.cs { color: #999; }
|
||||
.gd { background-color: #fcc; border: 1px solid #c00; }
|
||||
.ge { font-style: italic; }
|
||||
.gr { color: #f00; }
|
||||
.gh { color: #030; }
|
||||
.gi { background-color: #cfc; border: 1px solid #0c0; }
|
||||
.go { color: #aaa; }
|
||||
.gp { color: #009; }
|
||||
.gu { color: #030; }
|
||||
.gt { color: #9c6; }
|
||||
.kc { color: #069; }
|
||||
.kd { color: #069; }
|
||||
.kn { color: #069; }
|
||||
.kp { color: #069; }
|
||||
.kr { color: #069; }
|
||||
.kt { color: #078; }
|
||||
.m { color: #f60; }
|
||||
.s { color: #d44950; }
|
||||
.na { color: #4f9fcf; }
|
||||
.nb { color: #366; }
|
||||
.nc { color: #0a8; }size
|
||||
.no { color: #360; }
|
||||
.nd { color: #99f; }
|
||||
.ni { color: #999; }
|
||||
.ne { color: #c00; }
|
||||
.nf { color: #c0f; }
|
||||
.nl { color: #99f; }
|
||||
.nn { color: #0cf; }
|
||||
.nt { color: #2f6f9f; }
|
||||
.nv { color: #033; }
|
||||
.ow { color: #000; }
|
||||
.w { color: #bbb; }
|
||||
.mf { color: #f60; }
|
||||
.mh { color: #f60; }
|
||||
.mi { color: #f60; }
|
||||
.mo { color: #f60; }
|
||||
.sb { color: #c30; }
|
||||
.sc { color: #c30; }
|
||||
.sd { font-style: italic; color: #c30; }
|
||||
.s2 { color: #c30; }
|
||||
.se { color: #c30; }
|
||||
.sh { color: #c30; }
|
||||
.si { color: #a00; }
|
||||
.sx { color: #c30; }
|
||||
.sr { color: #3aa; }
|
||||
.s1 { color: #c30; }
|
||||
.ss { color: #fc3; }
|
||||
.bp { color: #366; }
|
||||
.vc { color: #033; }
|
||||
.vg { color: #033; }
|
||||
.vi { color: #033; }
|
||||
.il { color: #f60; }
|
||||
|
||||
.css .o,
|
||||
.css .o + .nt,
|
||||
.css .nt + .nt { color: #999; }
|
||||
|
||||
.language-bash::before,
|
||||
.language-sh::before {
|
||||
color: #009;
|
||||
content: "$ ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.language-powershell::before {
|
||||
color: #009;
|
||||
content: "PM> ";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.text-primary-light {
|
||||
color: $bd-purple-light;
|
||||
}
|
||||
|
||||
.dropdown{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// Small devices (landscape phones, less than 768px)
|
||||
@include media-breakpoint-down(sm) {
|
||||
.mobile {
|
||||
display: block !important;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
.display-1 {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.display-2 {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
.display-3{
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.display-4{
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Footer //
|
||||
|
||||
.footer a.nav-link {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
footer .border{
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
.footer a.nav-link {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#menu-toggle {
|
||||
display: none; /* hide the checkbox */
|
||||
}
|
||||
|
||||
#nav-toggle {
|
||||
display: none; /* hide the checkbox */
|
||||
}
|
||||
|
||||
.side-toggler {
|
||||
float:right !important;
|
||||
}
|
||||
|
||||
#menu-toggle:checked + .burger-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#nav-toggle:checked + .hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover .chevron-up {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.navbar-toggler:hover .chevron-down {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
a.side-nav.active {
|
||||
color: $primary !important;
|
||||
}
|
||||
|
||||
.smalltopics {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: -10px -1px 1px -1px;
|
||||
}
|
||||
|
||||
.chevron-up {
|
||||
display: none !important;
|
||||
top: 10px !important;
|
||||
}
|
||||
.chevron-down {
|
||||
display: block;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
|
||||
// Small devices (landscape phones, less than 768px)
|
||||
@include media-breakpoint-down(sm) {
|
||||
nav.sidetopics {
|
||||
display: none !important;
|
||||
visibility: hidden !important;
|
||||
}
|
||||
|
||||
nav.smalltopics {
|
||||
display: block;
|
||||
width:100%;
|
||||
position: sticky;
|
||||
padding-top: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tablet and Mobile menu
|
||||
@include media-breakpoint-down(md) {
|
||||
.nav-link {
|
||||
padding-bottom: 1rem;
|
||||
padding-top: 2rem;
|
||||
font-size: 150%;
|
||||
}
|
||||
}
|
||||
|
||||
.no-gutters {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
@ -1,145 +0,0 @@
|
||||
/* TPO Styles
|
||||
*
|
||||
*/
|
||||
|
||||
#sidenav-topics .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
|
||||
color: #7D4698;
|
||||
background-color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#wrapper {
|
||||
width: 100%;
|
||||
position: relative !important;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.shape {
|
||||
padding: 35%;
|
||||
}
|
||||
|
||||
.section-nav {
|
||||
padding-top: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.toc-entry a:hover {
|
||||
color: $purple !important;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: relative;
|
||||
z-index:99999999999;
|
||||
a.text-light:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.footer a.nav-link {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
footer .border{
|
||||
border: 0 !important;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.3) !important;
|
||||
}
|
||||
|
||||
main{
|
||||
padding-bottom: 5em;
|
||||
}
|
||||
|
||||
.window-bg {
|
||||
background-image: url("images/tb85/tb85@2x.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.onion-bg{
|
||||
background: url("images/circle-pattern.png");
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
background-position-x: -85%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 65%;
|
||||
}
|
||||
|
||||
.btn-shadow {
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.20000000298023224);
|
||||
opacity: 0.8;
|
||||
border: 2px solid #FFFFFF;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.oval {
|
||||
background-color: #D8D8D8;
|
||||
border-radius: 100%;
|
||||
width: 390px;
|
||||
height: 390px;
|
||||
}
|
||||
|
||||
.oval-2 {
|
||||
background-color: #D8D8D8;
|
||||
border-radius: 100%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.oval-3 {
|
||||
background-color: #D8D8D8;
|
||||
border-radius: 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.oval-2 i{
|
||||
font-size: 5em;
|
||||
padding: 0.4em 0.5em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.oval-3 i {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.oval-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.hero > p{
|
||||
color: #484848;
|
||||
font-family: Source Sans Pro Light;
|
||||
font-size: 4.5rem;
|
||||
line-height: 5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row--limit-overflow {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100vw;
|
||||
left: -($grid-gutter-width/2);
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.display-4 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.toc-entry a {
|
||||
display: block;
|
||||
padding: 0.4rem 0 !important;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.window-bg,
|
||||
.onion-bg {
|
||||
background: none;
|
||||
}
|
||||
.hero > p{
|
||||
font-size: 2.5rem;
|
||||
line-height: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
|
||||
}
|
||||
@include media-breakpoint-up(lg) {}
|
||||
@ -1,36 +0,0 @@
|
||||
// stylelint-disable selector-no-qualifying-type
|
||||
|
||||
.fade {
|
||||
opacity: 0;
|
||||
@include transition($transition-fade);
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse {
|
||||
display: none;
|
||||
&.show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
&.collapse.show {
|
||||
display: table-row;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
&.collapse.show {
|
||||
display: table-row-group;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsing {
|
||||
position: relative;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
@include transition($transition-collapse);
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
// stylelint-disable declaration-no-important, selector-list-comma-newline-after
|
||||
|
||||
//
|
||||
// Headings
|
||||
//
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
margin-bottom: $headings-margin-bottom;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: $headings-color;
|
||||
}
|
||||
|
||||
h1, .h1 { font-size: $h1-font-size; }
|
||||
h2, .h2 { font-size: $h2-font-size; }
|
||||
h3, .h3 { font-size: $h3-font-size; }
|
||||
h4, .h4 { font-size: $h4-font-size; }
|
||||
h5, .h5 { font-size: $h5-font-size; }
|
||||
h6, .h6 { font-size: $h6-font-size; }
|
||||
|
||||
.lead {
|
||||
font-size: $lead-font-size;
|
||||
font-weight: $lead-font-weight;
|
||||
}
|
||||
|
||||
// Type display classes
|
||||
.display-1 {
|
||||
font-size: $display1-size;
|
||||
font-weight: $display1-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
.display-2 {
|
||||
font-size: $display2-size;
|
||||
font-weight: $display2-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
.display-3 {
|
||||
font-size: $display3-size;
|
||||
font-weight: $display3-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
.display-4 {
|
||||
font-size: $display4-size;
|
||||
font-weight: $display4-weight;
|
||||
line-height: $display-line-height;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Horizontal rules
|
||||
//
|
||||
|
||||
hr {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border: 0;
|
||||
border-top: $hr-border-width solid $hr-border-color;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Emphasis
|
||||
//
|
||||
|
||||
small,
|
||||
.small {
|
||||
font-size: $small-font-size;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
|
||||
mark,
|
||||
.mark {
|
||||
padding: $mark-padding;
|
||||
background-color: $mark-bg;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Lists
|
||||
//
|
||||
|
||||
.list-unstyled {
|
||||
@include list-unstyled;
|
||||
}
|
||||
|
||||
// Inline turns list items into inline-block
|
||||
.list-inline {
|
||||
@include list-unstyled;
|
||||
}
|
||||
.list-inline-item {
|
||||
display: inline-block;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: $list-inline-padding;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
// Builds on `abbr`
|
||||
.initialism {
|
||||
font-size: 90%;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
.blockquote {
|
||||
margin-bottom: $spacer;
|
||||
font-size: $blockquote-font-size;
|
||||
}
|
||||
|
||||
.blockquote-footer {
|
||||
display: block;
|
||||
font-size: 80%; // back to default font-size
|
||||
color: $blockquote-small-color;
|
||||
|
||||
&::before {
|
||||
content: "\2014 \00A0"; // em dash, nbsp
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
@import "utilities/align";
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/clearfix";
|
||||
@import "utilities/display";
|
||||
@import "utilities/embed";
|
||||
@import "utilities/flex";
|
||||
@import "utilities/float";
|
||||
@import "utilities/position";
|
||||
@import "utilities/screenreaders";
|
||||
@import "utilities/sizing";
|
||||
@import "utilities/spacing";
|
||||
@import "utilities/text";
|
||||
@import "utilities/visibility";
|
||||
@ -1,828 +0,0 @@
|
||||
// Variables
|
||||
//
|
||||
// Variables should follow the `$component-state-property-size` formula for
|
||||
// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
|
||||
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
// stylelint-disable
|
||||
$white: #fff !default;
|
||||
$gray-100: #f8f9fa !default;
|
||||
$gray-200: #e9ecef !default;
|
||||
$gray-300: #dee2e6 !default;
|
||||
$gray-400: #ced4da !default;
|
||||
$gray-500: #adb5bd !default;
|
||||
$gray-600: #868e96 !default;
|
||||
$gray-700: #495057 !default;
|
||||
$gray-800: #343a40 !default;
|
||||
$gray-900: #212529 !default;
|
||||
$black: #000 !default;
|
||||
|
||||
$grays: () !default;
|
||||
$grays: map-merge((
|
||||
"100": $gray-100,
|
||||
"200": $gray-200,
|
||||
"300": $gray-300,
|
||||
"400": $gray-400,
|
||||
"500": $gray-500,
|
||||
"600": $gray-600,
|
||||
"700": $gray-700,
|
||||
"800": $gray-800,
|
||||
"900": $gray-900
|
||||
), $grays);
|
||||
|
||||
$blue: #007bff !default;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #dc3545 !default;
|
||||
$orange: #fd7e14 !default;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #28a745 !default;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #17a2b8 !default;
|
||||
|
||||
$colors: () !default;
|
||||
$colors: map-merge((
|
||||
"blue": $blue,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
"white": $white,
|
||||
"gray": $gray-600,
|
||||
"gray-dark": $gray-800
|
||||
), $colors);
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-800 !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
$theme-colors: map-merge((
|
||||
"primary": $primary,
|
||||
"secondary": $secondary,
|
||||
"success": $success,
|
||||
"info": $info,
|
||||
"warning": $warning,
|
||||
"danger": $danger,
|
||||
"light": $light,
|
||||
"dark": $dark
|
||||
), $theme-colors);
|
||||
// stylelint-enable
|
||||
|
||||
// Set a specific jump point for requesting color jumps
|
||||
$theme-color-interval: 8% !default;
|
||||
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: false !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-hover-media-query: false !default;
|
||||
$enable-grid-classes: true !default;
|
||||
$enable-print-styles: true !default;
|
||||
|
||||
|
||||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
// You can add more entries to the $spacers map, should you need more variation.
|
||||
|
||||
$spacer: 1rem !default;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: ($spacer * .25),
|
||||
2: ($spacer * .5),
|
||||
3: $spacer,
|
||||
4: ($spacer * 1.5),
|
||||
5: ($spacer * 3)
|
||||
) !default;
|
||||
|
||||
// This variable affects the `.h-*` and `.w-*` classes.
|
||||
$sizes: (
|
||||
25: 25%,
|
||||
50: 50%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
) !default;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: $white !default;
|
||||
$body-color: $gray-900 !default;
|
||||
|
||||
// Links
|
||||
//
|
||||
// Style anchor elements.
|
||||
|
||||
$link-color: theme-color("primary") !default;
|
||||
$link-decoration: none !default;
|
||||
$link-hover-color: darken($link-color, 15%) !default;
|
||||
$link-hover-decoration: underline !default;
|
||||
|
||||
// Paragraphs
|
||||
//
|
||||
// Style p element.
|
||||
|
||||
$paragraph-margin-bottom: 1rem !default;
|
||||
|
||||
|
||||
// Grid breakpoints
|
||||
//
|
||||
// Define the minimum dimensions at which your layout will change,
|
||||
// adapting to different screen sizes, for use in media queries.
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px
|
||||
) !default;
|
||||
|
||||
@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
|
||||
@include _assert-starts-at-zero($grid-breakpoints);
|
||||
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
// Define the maximum width of `.container` for different screen sizes.
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px
|
||||
) !default;
|
||||
|
||||
@include _assert-ascending($container-max-widths, "$container-max-widths");
|
||||
|
||||
|
||||
// Grid columns
|
||||
//
|
||||
// Set the number of columns and specify the width of the gutters.
|
||||
|
||||
$grid-columns: 12 !default;
|
||||
$grid-gutter-width: 30px !default;
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$line-height-lg: 1.5 !default;
|
||||
$line-height-sm: 1.5 !default;
|
||||
|
||||
$border-width: 1px !default;
|
||||
$border-color: $gray-200 !default;
|
||||
|
||||
$border-radius: .25rem !default;
|
||||
$border-radius-lg: .3rem !default;
|
||||
$border-radius-sm: .2rem !default;
|
||||
|
||||
$component-active-color: $white !default;
|
||||
$component-active-bg: theme-color("primary") !default;
|
||||
|
||||
$caret-width: .3em !default;
|
||||
|
||||
$transition-base: all .2s ease-in-out !default;
|
||||
$transition-fade: opacity .15s linear !default;
|
||||
$transition-collapse: height .35s ease !default;
|
||||
|
||||
|
||||
// Fonts
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
// stylelint-disable value-keyword-case
|
||||
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
|
||||
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
|
||||
$font-family-base: $font-family-sans-serif !default;
|
||||
// stylelint-enable value-keyword-case
|
||||
|
||||
$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
|
||||
$font-size-lg: ($font-size-base * 1.25) !default;
|
||||
$font-size-sm: ($font-size-base * .875) !default;
|
||||
|
||||
$font-weight-light: 300 !default;
|
||||
$font-weight-normal: 400 !default;
|
||||
$font-weight-bold: 700 !default;
|
||||
|
||||
$font-weight-base: $font-weight-normal !default;
|
||||
$line-height-base: 1.5 !default;
|
||||
|
||||
$h1-font-size: $font-size-base * 2.5 !default;
|
||||
$h2-font-size: $font-size-base * 2 !default;
|
||||
$h3-font-size: $font-size-base * 1.75 !default;
|
||||
$h4-font-size: $font-size-base * 1.5 !default;
|
||||
$h5-font-size: $font-size-base * 1.25 !default;
|
||||
$h6-font-size: $font-size-base !default;
|
||||
|
||||
$headings-margin-bottom: ($spacer / 2) !default;
|
||||
$headings-font-family: inherit !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
$headings-color: inherit !default;
|
||||
|
||||
$display1-size: 6rem !default;
|
||||
$display2-size: 5.5rem !default;
|
||||
$display3-size: 4.5rem !default;
|
||||
$display4-size: 3.5rem !default;
|
||||
|
||||
$display1-weight: 300 !default;
|
||||
$display2-weight: 300 !default;
|
||||
$display3-weight: 300 !default;
|
||||
$display4-weight: 300 !default;
|
||||
$display-line-height: $headings-line-height !default;
|
||||
|
||||
$lead-font-size: ($font-size-base * 1.25) !default;
|
||||
$lead-font-weight: 300 !default;
|
||||
|
||||
$small-font-size: 80% !default;
|
||||
|
||||
$text-muted: $gray-600 !default;
|
||||
|
||||
$blockquote-small-color: $gray-600 !default;
|
||||
$blockquote-font-size: ($font-size-base * 1.25) !default;
|
||||
|
||||
$hr-border-color: rgba($black,.1) !default;
|
||||
$hr-border-width: $border-width !default;
|
||||
|
||||
$mark-padding: .2em !default;
|
||||
|
||||
$dt-font-weight: $font-weight-bold !default;
|
||||
|
||||
$kbd-box-shadow: inset 0 -.1rem 0 rgba($black,.25) !default;
|
||||
$nested-kbd-font-weight: $font-weight-bold !default;
|
||||
|
||||
$list-inline-padding: 5px !default;
|
||||
|
||||
$mark-bg: #fcf8e3 !default;
|
||||
|
||||
|
||||
// Tables
|
||||
//
|
||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
$table-cell-padding: .75rem !default;
|
||||
$table-cell-padding-sm: .3rem !default;
|
||||
|
||||
$table-bg: transparent !default;
|
||||
$table-accent-bg: rgba($black,.05) !default;
|
||||
$table-hover-bg: rgba($black,.075) !default;
|
||||
$table-active-bg: $table-hover-bg !default;
|
||||
|
||||
$table-border-width: $border-width !default;
|
||||
$table-border-color: $gray-200 !default;
|
||||
|
||||
$table-head-bg: $gray-200 !default;
|
||||
$table-head-color: $gray-700 !default;
|
||||
|
||||
$table-dark-bg: $gray-900 !default;
|
||||
$table-dark-accent-bg: rgba($white, .05) !default;
|
||||
$table-dark-hover-bg: rgba($white, .075) !default;
|
||||
$table-dark-border-color: lighten($gray-900, 7.5%) !default;
|
||||
$table-dark-color: $body-bg !default;
|
||||
|
||||
|
||||
// Buttons
|
||||
//
|
||||
// For each of Bootstrap's buttons, define text, background and border color.
|
||||
|
||||
$input-btn-padding-y: .375rem !default;
|
||||
$input-btn-padding-x: .75rem !default;
|
||||
$input-btn-line-height: $line-height-base !default;
|
||||
|
||||
$input-btn-focus-width: .2rem !default;
|
||||
$input-btn-focus-color: rgba(theme-color("primary"), .25) !default;
|
||||
$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
|
||||
|
||||
$input-btn-padding-y-sm: .25rem !default;
|
||||
$input-btn-padding-x-sm: .5rem !default;
|
||||
$input-btn-line-height-sm: $line-height-sm !default;
|
||||
|
||||
$input-btn-padding-y-lg: .5rem !default;
|
||||
$input-btn-padding-x-lg: 1rem !default;
|
||||
$input-btn-line-height-lg: $line-height-lg !default;
|
||||
|
||||
$btn-font-weight: $font-weight-normal !default;
|
||||
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
|
||||
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
|
||||
|
||||
$btn-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$btn-block-spacing-y: .5rem !default;
|
||||
|
||||
// Allows for customizing button radius independently from global border radius
|
||||
$btn-border-radius: $border-radius !default;
|
||||
$btn-border-radius-lg: $border-radius-lg !default;
|
||||
$btn-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$btn-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
|
||||
|
||||
|
||||
// Forms
|
||||
|
||||
$input-bg: $white !default;
|
||||
$input-disabled-bg: $gray-200 !default;
|
||||
|
||||
$input-color: $gray-700 !default;
|
||||
$input-border-color: $gray-400 !default;
|
||||
$input-btn-border-width: $border-width !default; // For form controls and buttons
|
||||
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
|
||||
|
||||
$input-border-radius: $border-radius !default;
|
||||
$input-border-radius-lg: $border-radius-lg !default;
|
||||
$input-border-radius-sm: $border-radius-sm !default;
|
||||
|
||||
$input-focus-bg: $input-bg !default;
|
||||
$input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$input-focus-color: $input-color !default;
|
||||
|
||||
$input-placeholder-color: $gray-600 !default;
|
||||
|
||||
$input-height-border: $input-btn-border-width * 2 !default;
|
||||
|
||||
$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
|
||||
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
|
||||
|
||||
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
|
||||
$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
|
||||
|
||||
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
|
||||
$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
|
||||
|
||||
$input-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
|
||||
|
||||
$form-text-margin-top: .25rem !default;
|
||||
|
||||
$form-check-margin-bottom: .5rem !default;
|
||||
$form-check-input-gutter: 1.25rem !default;
|
||||
$form-check-input-margin-y: .25rem !default;
|
||||
$form-check-input-margin-x: .25rem !default;
|
||||
|
||||
$form-check-inline-margin-x: .75rem !default;
|
||||
|
||||
$form-group-margin-bottom: 1rem !default;
|
||||
|
||||
$input-group-addon-color: $input-color !default;
|
||||
$input-group-addon-bg: $gray-200 !default;
|
||||
$input-group-addon-border-color: $input-border-color !default;
|
||||
|
||||
$custom-control-gutter: 1.5rem !default;
|
||||
$custom-control-spacer-y: .25rem !default;
|
||||
$custom-control-spacer-x: 1rem !default;
|
||||
|
||||
$custom-control-indicator-size: 1rem !default;
|
||||
$custom-control-indicator-bg: #ddd !default;
|
||||
$custom-control-indicator-bg-size: 50% 50% !default;
|
||||
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
|
||||
|
||||
$custom-control-indicator-disabled-bg: $gray-200 !default;
|
||||
$custom-control-description-disabled-color: $gray-600 !default;
|
||||
|
||||
$custom-control-indicator-checked-color: $white !default;
|
||||
$custom-control-indicator-checked-bg: theme-color("primary") !default;
|
||||
$custom-control-indicator-checked-box-shadow: none !default;
|
||||
|
||||
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
|
||||
|
||||
$custom-control-indicator-active-color: $white !default;
|
||||
$custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
|
||||
$custom-control-indicator-active-box-shadow: none !default;
|
||||
|
||||
$custom-checkbox-indicator-border-radius: $border-radius !default;
|
||||
$custom-checkbox-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-checkbox-indicator-indeterminate-bg: theme-color("primary") !default;
|
||||
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
|
||||
$custom-checkbox-indicator-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
|
||||
|
||||
$custom-radio-indicator-border-radius: 50% !default;
|
||||
$custom-radio-indicator-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$custom-select-padding-y: .375rem !default;
|
||||
$custom-select-padding-x: .75rem !default;
|
||||
$custom-select-height: $input-height !default;
|
||||
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
|
||||
$custom-select-line-height: $input-btn-line-height !default;
|
||||
$custom-select-color: $input-color !default;
|
||||
$custom-select-disabled-color: $gray-600 !default;
|
||||
$custom-select-bg: $white !default;
|
||||
$custom-select-disabled-bg: $gray-200 !default;
|
||||
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
|
||||
$custom-select-indicator-color: #333 !default;
|
||||
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$custom-select-border-width: $input-btn-border-width !default;
|
||||
$custom-select-border-color: $input-border-color !default;
|
||||
$custom-select-border-radius: $border-radius !default;
|
||||
|
||||
$custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
|
||||
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
|
||||
|
||||
$custom-select-font-size-sm: 75% !default;
|
||||
$custom-select-height-sm: $input-height-sm !default;
|
||||
|
||||
$custom-file-height: $input-height !default;
|
||||
$custom-file-width: 14rem !default;
|
||||
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
|
||||
|
||||
$custom-file-padding-y: $input-btn-padding-y !default;
|
||||
$custom-file-padding-x: $input-btn-padding-x !default;
|
||||
$custom-file-line-height: $input-btn-line-height !default;
|
||||
$custom-file-color: $input-color !default;
|
||||
$custom-file-bg: $input-bg !default;
|
||||
$custom-file-border-width: $input-btn-border-width !default;
|
||||
$custom-file-border-color: $input-border-color !default;
|
||||
$custom-file-border-radius: $input-border-radius !default;
|
||||
$custom-file-box-shadow: $input-box-shadow !default;
|
||||
$custom-file-button-color: $custom-file-color !default;
|
||||
$custom-file-button-bg: $input-group-addon-bg !default;
|
||||
$custom-file-text: (
|
||||
placeholder: (
|
||||
en: "Choose file..."
|
||||
),
|
||||
button-label: (
|
||||
en: "Browse"
|
||||
)
|
||||
) !default;
|
||||
|
||||
|
||||
// Form validation
|
||||
$form-feedback-valid-color: theme-color("success") !default;
|
||||
$form-feedback-invalid-color: theme-color("danger") !default;
|
||||
|
||||
|
||||
// Dropdowns
|
||||
//
|
||||
// Dropdown menu container and contents.
|
||||
|
||||
$dropdown-min-width: 10rem !default;
|
||||
$dropdown-padding-y: .5rem !default;
|
||||
$dropdown-spacer: .125rem !default;
|
||||
$dropdown-bg: $white !default;
|
||||
$dropdown-border-color: rgba($black,.15) !default;
|
||||
$dropdown-border-width: $border-width !default;
|
||||
$dropdown-divider-bg: $gray-200 !default;
|
||||
$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default;
|
||||
|
||||
$dropdown-link-color: $gray-900 !default;
|
||||
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
|
||||
$dropdown-link-hover-bg: $gray-100 !default;
|
||||
|
||||
$dropdown-link-active-color: $component-active-color !default;
|
||||
$dropdown-link-active-bg: $component-active-bg !default;
|
||||
|
||||
$dropdown-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$dropdown-item-padding-y: .25rem !default;
|
||||
$dropdown-item-padding-x: 1.5rem !default;
|
||||
|
||||
$dropdown-header-color: $gray-600 !default;
|
||||
|
||||
|
||||
// Z-index master list
|
||||
//
|
||||
// Warning: Avoid customizing these values. They're used for a bird's eye view
|
||||
// of components dependent on the z-axis and are designed to all work together.
|
||||
|
||||
$zindex-dropdown: 1000 !default;
|
||||
$zindex-sticky: 1020 !default;
|
||||
$zindex-fixed: 1030 !default;
|
||||
$zindex-modal-backdrop: 1040 !default;
|
||||
$zindex-modal: 1050 !default;
|
||||
$zindex-popover: 1060 !default;
|
||||
$zindex-tooltip: 1070 !default;
|
||||
|
||||
// Navs
|
||||
|
||||
$nav-link-padding-y: .5rem !default;
|
||||
$nav-link-padding-x: 1rem !default;
|
||||
$nav-link-disabled-color: $gray-600 !default;
|
||||
|
||||
$nav-tabs-border-color: #ddd !default;
|
||||
$nav-tabs-border-width: $border-width !default;
|
||||
$nav-tabs-border-radius: $border-radius !default;
|
||||
$nav-tabs-link-hover-border-color: $gray-200 !default;
|
||||
$nav-tabs-link-active-color: $gray-700 !default;
|
||||
$nav-tabs-link-active-bg: $body-bg !default;
|
||||
$nav-tabs-link-active-border-color: #ddd !default;
|
||||
|
||||
$nav-pills-border-radius: $border-radius !default;
|
||||
$nav-pills-link-active-color: $component-active-color !default;
|
||||
$nav-pills-link-active-bg: $component-active-bg !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-padding-y: ($spacer / 2) !default;
|
||||
$navbar-padding-x: $spacer !default;
|
||||
|
||||
$navbar-brand-font-size: $font-size-lg !default;
|
||||
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
|
||||
$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
|
||||
$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
|
||||
$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
|
||||
|
||||
$navbar-toggler-padding-y: .25rem !default;
|
||||
$navbar-toggler-padding-x: .75rem !default;
|
||||
$navbar-toggler-font-size: $font-size-lg !default;
|
||||
$navbar-toggler-border-radius: $btn-border-radius !default;
|
||||
|
||||
$navbar-dark-color: rgba($white,.5) !default;
|
||||
$navbar-dark-hover-color: rgba($white,.75) !default;
|
||||
$navbar-dark-active-color: $white !default;
|
||||
$navbar-dark-disabled-color: rgba($white,.25) !default;
|
||||
$navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-dark-toggler-border-color: rgba($white,.1) !default;
|
||||
|
||||
$navbar-light-color: rgba($black,.5) !default;
|
||||
$navbar-light-hover-color: rgba($black,.7) !default;
|
||||
$navbar-light-active-color: rgba($black,.9) !default;
|
||||
$navbar-light-disabled-color: rgba($black,.3) !default;
|
||||
$navbar-light-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-light-toggler-border-color: rgba($black,.1) !default;
|
||||
|
||||
// Pagination
|
||||
|
||||
$pagination-padding-y: .5rem !default;
|
||||
$pagination-padding-x: .75rem !default;
|
||||
$pagination-padding-y-sm: .25rem !default;
|
||||
$pagination-padding-x-sm: .5rem !default;
|
||||
$pagination-padding-y-lg: .75rem !default;
|
||||
$pagination-padding-x-lg: 1.5rem !default;
|
||||
$pagination-line-height: 1.25 !default;
|
||||
|
||||
$pagination-color: $link-color !default;
|
||||
$pagination-bg: $white !default;
|
||||
$pagination-border-width: $border-width !default;
|
||||
$pagination-border-color: #ddd !default;
|
||||
|
||||
$pagination-hover-color: $link-hover-color !default;
|
||||
$pagination-hover-bg: $gray-200 !default;
|
||||
$pagination-hover-border-color: #ddd !default;
|
||||
|
||||
$pagination-active-color: $white !default;
|
||||
$pagination-active-bg: theme-color("primary") !default;
|
||||
$pagination-active-border-color: theme-color("primary") !default;
|
||||
|
||||
$pagination-disabled-color: $gray-600 !default;
|
||||
$pagination-disabled-bg: $white !default;
|
||||
$pagination-disabled-border-color: #ddd !default;
|
||||
|
||||
|
||||
// Jumbotron
|
||||
|
||||
$jumbotron-padding: 2rem !default;
|
||||
$jumbotron-bg: $gray-200 !default;
|
||||
|
||||
|
||||
// Cards
|
||||
|
||||
$card-spacer-y: .75rem !default;
|
||||
$card-spacer-x: 1.25rem !default;
|
||||
$card-border-width: $border-width !default;
|
||||
$card-border-radius: $border-radius !default;
|
||||
$card-border-color: rgba($black,.125) !default;
|
||||
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
|
||||
$card-cap-bg: rgba($black, .03) !default;
|
||||
$card-bg: $white !default;
|
||||
|
||||
$card-img-overlay-padding: 1.25rem !default;
|
||||
|
||||
$card-group-margin: ($grid-gutter-width / 2) !default;
|
||||
$card-deck-margin: $card-group-margin !default;
|
||||
|
||||
$card-columns-count: 3 !default;
|
||||
$card-columns-gap: 1.25rem !default;
|
||||
$card-columns-margin: $card-spacer-y !default;
|
||||
|
||||
|
||||
// Tooltips
|
||||
|
||||
$tooltip-max-width: 200px !default;
|
||||
$tooltip-color: $white !default;
|
||||
$tooltip-bg: $black !default;
|
||||
$tooltip-opacity: .9 !default;
|
||||
$tooltip-padding-y: 3px !default;
|
||||
$tooltip-padding-x: 8px !default;
|
||||
$tooltip-margin: 0 !default;
|
||||
|
||||
|
||||
$tooltip-arrow-width: 5px !default;
|
||||
$tooltip-arrow-height: 5px !default;
|
||||
$tooltip-arrow-color: $tooltip-bg !default;
|
||||
|
||||
|
||||
// Popovers
|
||||
|
||||
$popover-bg: $white !default;
|
||||
$popover-max-width: 276px !default;
|
||||
$popover-border-width: $border-width !default;
|
||||
$popover-border-color: rgba($black,.2) !default;
|
||||
$popover-box-shadow: 0 .25rem .5rem rgba($black,.2) !default;
|
||||
|
||||
$popover-header-bg: darken($popover-bg, 3%) !default;
|
||||
$popover-header-color: $headings-color !default;
|
||||
$popover-header-padding-y: .5rem !default;
|
||||
$popover-header-padding-x: .75rem !default;
|
||||
|
||||
$popover-body-color: $body-color !default;
|
||||
$popover-body-padding-y: $popover-header-padding-y !default;
|
||||
$popover-body-padding-x: $popover-header-padding-x !default;
|
||||
|
||||
$popover-arrow-width: .8rem !default;
|
||||
$popover-arrow-height: .4rem !default;
|
||||
$popover-arrow-color: $popover-bg !default;
|
||||
|
||||
$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
|
||||
|
||||
|
||||
// Badges
|
||||
|
||||
$badge-font-size: 75% !default;
|
||||
$badge-font-weight: $font-weight-bold !default;
|
||||
$badge-padding-y: .25em !default;
|
||||
$badge-padding-x: .4em !default;
|
||||
$badge-border-radius: $border-radius !default;
|
||||
|
||||
$badge-pill-padding-x: .6em !default;
|
||||
// Use a higher than normal value to ensure completely rounded edges when
|
||||
// customizing padding or font-size on labels.
|
||||
$badge-pill-border-radius: 10rem !default;
|
||||
|
||||
|
||||
// Modals
|
||||
|
||||
// Padding applied to the modal body
|
||||
$modal-inner-padding: 15px !default;
|
||||
|
||||
$modal-dialog-margin: 10px !default;
|
||||
$modal-dialog-margin-y-sm-up: 30px !default;
|
||||
|
||||
$modal-title-line-height: $line-height-base !default;
|
||||
|
||||
$modal-content-bg: $white !default;
|
||||
$modal-content-border-color: rgba($black,.2) !default;
|
||||
$modal-content-border-width: $border-width !default;
|
||||
$modal-content-box-shadow-xs: 0 3px 9px rgba($black,.5) !default;
|
||||
$modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
|
||||
|
||||
$modal-backdrop-bg: $black !default;
|
||||
$modal-backdrop-opacity: .5 !default;
|
||||
$modal-header-border-color: $gray-200 !default;
|
||||
$modal-footer-border-color: $modal-header-border-color !default;
|
||||
$modal-header-border-width: $modal-content-border-width !default;
|
||||
$modal-footer-border-width: $modal-header-border-width !default;
|
||||
$modal-header-padding: 15px !default;
|
||||
|
||||
$modal-lg: 800px !default;
|
||||
$modal-md: 500px !default;
|
||||
$modal-sm: 300px !default;
|
||||
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
|
||||
|
||||
// Alerts
|
||||
//
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding-y: .75rem !default;
|
||||
$alert-padding-x: 1.25rem !default;
|
||||
$alert-margin-bottom: 1rem !default;
|
||||
$alert-border-radius: $border-radius !default;
|
||||
$alert-link-font-weight: $font-weight-bold !default;
|
||||
$alert-border-width: $border-width !default;
|
||||
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-height: 1rem !default;
|
||||
$progress-font-size: ($font-size-base * .75) !default;
|
||||
$progress-bg: $gray-200 !default;
|
||||
$progress-border-radius: $border-radius !default;
|
||||
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
|
||||
$progress-bar-color: $white !default;
|
||||
$progress-bar-bg: theme-color("primary") !default;
|
||||
$progress-bar-animation-timing: 1s linear infinite !default;
|
||||
$progress-bar-transition: width .6s ease !default;
|
||||
|
||||
// List group
|
||||
|
||||
$list-group-bg: $white !default;
|
||||
$list-group-border-color: rgba($black,.125) !default;
|
||||
$list-group-border-width: $border-width !default;
|
||||
$list-group-border-radius: $border-radius !default;
|
||||
|
||||
$list-group-item-padding-y: .75rem !default;
|
||||
$list-group-item-padding-x: 1.25rem !default;
|
||||
|
||||
$list-group-hover-bg: $gray-100 !default;
|
||||
$list-group-active-color: $component-active-color !default;
|
||||
$list-group-active-bg: $component-active-bg !default;
|
||||
$list-group-active-border-color: $list-group-active-bg !default;
|
||||
|
||||
$list-group-disabled-color: $gray-600 !default;
|
||||
$list-group-disabled-bg: $list-group-bg !default;
|
||||
|
||||
$list-group-action-color: $gray-700 !default;
|
||||
$list-group-action-hover-color: $list-group-action-color !default;
|
||||
|
||||
$list-group-action-active-color: $body-color !default;
|
||||
$list-group-action-active-bg: $gray-200 !default;
|
||||
|
||||
|
||||
// Image thumbnails
|
||||
|
||||
$thumbnail-padding: .25rem !default;
|
||||
$thumbnail-bg: $body-bg !default;
|
||||
$thumbnail-border-width: $border-width !default;
|
||||
$thumbnail-border-color: #ddd !default;
|
||||
$thumbnail-border-radius: $border-radius !default;
|
||||
$thumbnail-box-shadow: 0 1px 2px rgba($black,.075) !default;
|
||||
$thumbnail-transition: all .2s ease-in-out !default;
|
||||
|
||||
|
||||
// Figures
|
||||
|
||||
$figure-caption-font-size: 90% !default;
|
||||
$figure-caption-color: $gray-600 !default;
|
||||
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-padding-y: .75rem !default;
|
||||
$breadcrumb-padding-x: 1rem !default;
|
||||
$breadcrumb-item-padding: .5rem !default;
|
||||
|
||||
$breadcrumb-margin-bottom: 1rem !default;
|
||||
|
||||
$breadcrumb-bg: $gray-200 !default;
|
||||
$breadcrumb-divider-color: $gray-600 !default;
|
||||
$breadcrumb-active-color: $gray-600 !default;
|
||||
$breadcrumb-divider: "/" !default;
|
||||
|
||||
|
||||
// Carousel
|
||||
|
||||
$carousel-control-color: $white !default;
|
||||
$carousel-control-width: 15% !default;
|
||||
$carousel-control-opacity: .5 !default;
|
||||
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-spacer: 3px !default;
|
||||
$carousel-indicator-active-bg: $white !default;
|
||||
|
||||
$carousel-caption-width: 70% !default;
|
||||
$carousel-caption-color: $white !default;
|
||||
|
||||
$carousel-control-icon-width: 20px !default;
|
||||
|
||||
$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
$carousel-transition: transform .6s ease !default;
|
||||
|
||||
|
||||
// Close
|
||||
|
||||
$close-font-size: $font-size-base * 1.5 !default;
|
||||
$close-font-weight: $font-weight-bold !default;
|
||||
$close-color: $black !default;
|
||||
$close-text-shadow: 0 1px 0 $white !default;
|
||||
|
||||
// Code
|
||||
|
||||
$code-font-size: 90% !default;
|
||||
$code-padding-y: .2rem !default;
|
||||
$code-padding-x: .4rem !default;
|
||||
$code-color: #bd4147 !default;
|
||||
$code-bg: $gray-100 !default;
|
||||
|
||||
$kbd-color: $white !default;
|
||||
$kbd-bg: $gray-900 !default;
|
||||
|
||||
$pre-color: $gray-900 !default;
|
||||
$pre-scrollable-max-height: 340px !default;
|
||||
1168
assets/scss/bootstrap-grid.css
vendored
1168
assets/scss/bootstrap-grid.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
35
assets/scss/bootstrap-grid.scss
vendored
35
assets/scss/bootstrap-grid.scss
vendored
@ -1,35 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap Grid v4.0.0-beta.2 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
|
||||
@at-root {
|
||||
@-ms-viewport { width: device-width; } // stylelint-disable-line at-rule-no-vendor-prefix
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
-ms-overflow-style: scrollbar;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
|
||||
//
|
||||
// Grid mixins
|
||||
//
|
||||
|
||||
@import "mixins/breakpoints";
|
||||
@import "mixins/grid-framework";
|
||||
@import "mixins/grid";
|
||||
|
||||
@import "grid";
|
||||
@import "utilities/flex";
|
||||
279
assets/scss/bootstrap-reboot.css
vendored
279
assets/scss/bootstrap-reboot.css
vendored
@ -1,279 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-ms-overflow-style: scrollbar;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width; }
|
||||
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
|
||||
display: block; }
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
color: #212529;
|
||||
text-align: left;
|
||||
background-color: #fff; }
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important; }
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem; }
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
cursor: help;
|
||||
border-bottom: 0; }
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit; }
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem; }
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0; }
|
||||
|
||||
dt {
|
||||
font-weight: 700; }
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; }
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem; }
|
||||
|
||||
dfn {
|
||||
font-style: italic; }
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder; }
|
||||
|
||||
small {
|
||||
font-size: 80%; }
|
||||
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline; }
|
||||
|
||||
sub {
|
||||
bottom: -.25em; }
|
||||
|
||||
sup {
|
||||
top: -.5em; }
|
||||
|
||||
a {
|
||||
color: #007bff;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects; }
|
||||
a:hover {
|
||||
color: #0056b3;
|
||||
text-decoration: underline; }
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
a:not([href]):not([tabindex]):focus {
|
||||
outline: 0; }
|
||||
|
||||
pre,
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em; }
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: scrollbar; }
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem; }
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
border-style: none; }
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden; }
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input:not([type="range"]),
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation; }
|
||||
|
||||
table {
|
||||
border-collapse: collapse; }
|
||||
|
||||
caption {
|
||||
padding-top: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
color: #868e96;
|
||||
text-align: left;
|
||||
caption-side: bottom; }
|
||||
|
||||
th {
|
||||
text-align: inherit; }
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem; }
|
||||
|
||||
button {
|
||||
border-radius: 0; }
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color; }
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
optgroup,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit; }
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible; }
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none; }
|
||||
|
||||
button,
|
||||
html [type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; }
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border-style: none; }
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0; }
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox; }
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical; }
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0; }
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
white-space: normal; }
|
||||
|
||||
progress {
|
||||
vertical-align: baseline; }
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto; }
|
||||
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
-webkit-appearance: none; }
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
font: inherit;
|
||||
-webkit-appearance: button; }
|
||||
|
||||
output {
|
||||
display: inline-block; }
|
||||
|
||||
summary {
|
||||
display: list-item; }
|
||||
|
||||
template {
|
||||
display: none; }
|
||||
|
||||
[hidden] {
|
||||
display: none !important; }
|
||||
|
||||
/*# sourceMappingURL=bootstrap-reboot.css.map */
|
||||
@ -1,7 +0,0 @@
|
||||
{
|
||||
"version": 3,
|
||||
"mappings": "AAAA;;;;;;GAMG;ACcH;;QAES;EACP,UAAU,EAAE,UAAU;;AAGxB,IAAK;EACH,WAAW,EAAE,UAAU;EACvB,WAAW,EAAE,IAAI;EACjB,wBAAwB,EAAE,IAAI;EAC9B,oBAAoB,EAAE,IAAI;EAC1B,kBAAkB,EAAE,SAAS;EAC7B,2BAA2B,EAAE,gBAAa;;AAK1C,aAEC;EADC,KAAK,EAAE,YAAY;AAMvB,sFAAuF;EACrF,OAAO,EAAE,KAAK;;AAWhB,IAAK;EACH,MAAM,EAAE,CAAC;EACT,WAAW,ECkKiB,oJAAuB;EDjKnD,SAAS,ECoKmB,IAAI;EDnKhC,WAAW,EC2KiB,GAAmB;ED1K/C,WAAW,EC2KiB,GAAG;ED1K/B,KAAK,EC4vB6B,OAAS;ED3vB3C,UAAU,EAAE,IAAI;EAChB,gBAAgB,ECuvBkB,IAAM;;AD/uB1C,qBAAsB;EACpB,OAAO,EAAE,eAAe;;AAS1B,EAAG;EACD,UAAU,EAAE,WAAW;EACvB,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,OAAO;;AAanB,sBAAuB;EACrB,UAAU,EAAE,CAAC;EACb,aAAa,EC6IgB,MAAW;;ADrI1C,CAAE;EACA,UAAU,EAAE,CAAC;EACb,aAAa,ECsCa,IAAI;;AD5BhC;yBAC0B;EACxB,eAAe,EAAE,SAAS;EAC1B,eAAe,EAAE,gBAAgB;EACjC,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,CAAC;;AAGlB,OAAQ;EACN,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,OAAO;;AAGtB;;EAEG;EACD,UAAU,EAAE,CAAC;EACb,aAAa,EAAE,IAAI;;AAGrB;;;KAGM;EACJ,aAAa,EAAE,CAAC;;AAGlB,EAAG;EACD,WAAW,EC4HiB,GAAiB;;ADzH/C,EAAG;EACD,aAAa,EAAE,KAAK;EACpB,WAAW,EAAE,CAAC;;AAGhB,UAAW;EACT,MAAM,EAAE,QAAQ;;AAGlB,GAAI;EACF,UAAU,EAAE,MAAM;;AAIpB;MACO;EACL,WAAW,EAAE,MAAM;;AAIrB,KAAM;EACJ,SAAS,EAAE,GAAG;;AAQhB;GACI;EACF,QAAQ,EAAE,QAAQ;EAClB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,CAAC;EACd,cAAc,EAAE,QAAQ;;AAG1B,GAAI;EAAE,MAAM,EAAE,MAAM;;AACpB,GAAI;EAAE,GAAG,EAAE,KAAK;;AAOhB,CAAE;EACA,KAAK,ECiiB6B,OAAqB;EDhiBvD,eAAe,EC3DW,IAAI;ED4D9B,gBAAgB,EAAE,WAAW;EAC7B,4BAA4B,EAAE,OAAO;EE9LnC,OAAQ;IFiMR,KAAK,ECyX2B,OAAiB;IDxXjD,eAAe,EC/DS,SAAS;;ADyErC,6BAA8B;EAC5B,KAAK,EAAE,OAAO;EACd,eAAe,EAAE,IAAI;EElMnB,wEACQ;IFoMR,KAAK,EAAE,OAAO;IACd,eAAe,EAAE,IAAI;EAGvB,mCAAQ;IACN,OAAO,EAAE,CAAC;;AAUd;;;IAGK;EACH,WAAW,EAAE,oBAAoB;EACjC,SAAS,EAAE,GAAG;;AAIhB,GAAI;EAEF,UAAU,EAAE,CAAC;EAEb,aAAa,EAAE,IAAI;EAEnB,QAAQ,EAAE,IAAI;EAGd,kBAAkB,EAAE,SAAS;;AAQ/B,MAAO;EAEL,MAAM,EAAE,QAAQ;;AAQlB,GAAI;EACF,cAAc,EAAE,MAAM;EACtB,YAAY,EAAE,IAAI;;AAGpB,cAAe;EACb,QAAQ,EAAE,MAAM;;AAclB;;;;;;;;QAQS;EACP,YAAY,EAAE,YAAY;;AAQ5B,KAAM;EACJ,eAAe,EAAE,QAAQ;;AAG3B,OAAQ;EACN,WAAW,EC1BiB,OAAM;ED2BlC,cAAc,EC3Bc,OAAM;ED4BlC,KAAK,ECmd6B,OAAS;EDld3C,UAAU,EAAE,IAAI;EAChB,YAAY,EAAE,MAAM;;AAGtB,EAAG;EAGD,UAAU,EAAE,OAAO;;AAQrB,KAAM;EAEJ,OAAO,EAAE,YAAY;EACrB,aAAa,EAAE,KAAK;;AAMtB,MAAO;EACL,aAAa,EAAE,CAAC;;AAOlB,YAAa;EACX,OAAO,EAAE,UAAU;EACnB,OAAO,EAAE,iCAAiC;;AAG5C;;;;QAIS;EACP,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,OAAO;EACpB,SAAS,EAAE,OAAO;EAClB,WAAW,EAAE,OAAO;;AAGtB;KACM;EACJ,QAAQ,EAAE,OAAO;;AAGnB;MACO;EACL,cAAc,EAAE,IAAI;;AAMtB;;;eAGgB;EACd,kBAAkB,EAAE,MAAM;;AAI5B;;;iCAGkC;EAChC,OAAO,EAAE,CAAC;EACV,YAAY,EAAE,IAAI;;AAGpB;sBACuB;EACrB,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,CAAC;;AAIZ;;;mBAGoB;EAMlB,kBAAkB,EAAE,OAAO;;AAG7B,QAAS;EACP,QAAQ,EAAE,IAAI;EAEd,MAAM,EAAE,QAAQ;;AAGlB,QAAS;EAMP,SAAS,EAAE,CAAC;EAEZ,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,MAAM,EAAE,CAAC;;AAKX,MAAO;EACL,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,IAAI;EACX,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,CAAC;EACV,aAAa,EAAE,KAAK;EACpB,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,OAAO;EACpB,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,MAAM;;AAGrB,QAAS;EACP,cAAc,EAAE,QAAQ;;AAI1B;0CAC2C;EACzC,MAAM,EAAE,IAAI;;AAGd,eAAgB;EAKd,cAAc,EAAE,IAAI;EACpB,kBAAkB,EAAE,IAAI;;AAO1B;0CAC2C;EACzC,kBAAkB,EAAE,IAAI;;AAQ1B,4BAA6B;EAC3B,IAAI,EAAE,OAAO;EACb,kBAAkB,EAAE,MAAM;;AAO5B,MAAO;EACL,OAAO,EAAE,YAAY;;AAGvB,OAAQ;EACN,OAAO,EAAE,SAAS;;AAGpB,QAAS;EACP,OAAO,EAAE,IAAI;;AAKf,QAAS;EACP,OAAO,EAAE,eAAe",
|
||||
"sources": ["bootstrap-reboot.scss","_reboot.scss","_variables.scss","mixins/_hover.scss"],
|
||||
"names": [],
|
||||
"file": "bootstrap-reboot.css"
|
||||
}
|
||||
12
assets/scss/bootstrap-reboot.scss
vendored
12
assets/scss/bootstrap-reboot.scss
vendored
@ -1,12 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap Reboot v4.0.0-beta.2 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
* Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
|
||||
*/
|
||||
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "reboot";
|
||||
7392
assets/scss/bootstrap.css
vendored
7392
assets/scss/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
49
assets/scss/bootstrap.scss
vendored
49
assets/scss/bootstrap.scss
vendored
@ -1,49 +0,0 @@
|
||||
/*!
|
||||
* Bootstrap v4.0.0-beta.2 (https://getbootstrap.com)
|
||||
* Copyright 2011-2017 The Bootstrap Authors
|
||||
* Copyright 2011-2017 Twitter, Inc.
|
||||
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
|
||||
*/
|
||||
@import "tor-variables";
|
||||
@import "icons";
|
||||
@import "illos";
|
||||
@import "functions";
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
@import "root";
|
||||
@import "print";
|
||||
@import "reboot";
|
||||
@import "type";
|
||||
@import "images";
|
||||
@import "code";
|
||||
@import "grid";
|
||||
@import "tables";
|
||||
@import "forms";
|
||||
@import "buttons";
|
||||
@import "transitions";
|
||||
@import "dropdown";
|
||||
@import "button-group";
|
||||
@import "input-group";
|
||||
@import "custom-forms";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "card";
|
||||
@import "breadcrumb";
|
||||
@import "pagination";
|
||||
@import "badge";
|
||||
@import "jumbotron";
|
||||
@import "alert";
|
||||
@import "progress";
|
||||
@import "media";
|
||||
@import "list-group";
|
||||
@import "close";
|
||||
@import "modal";
|
||||
@import "tooltip";
|
||||
@import "popover";
|
||||
@import "carousel";
|
||||
@import "utilities";
|
||||
@import "sidebar";
|
||||
@import "component-examples";
|
||||
@import "portal";
|
||||
@import "tpo";
|
||||
@import "tor";
|
||||
@ -1,13 +0,0 @@
|
||||
@mixin alert-variant($background, $border, $color) {
|
||||
color: $color;
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
|
||||
hr {
|
||||
border-top-color: darken($border, 5%);
|
||||
}
|
||||
|
||||
.alert-link {
|
||||
color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
// Contextual backgrounds
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-gradient-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
|
||||
}
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@mixin badge-variant($bg) {
|
||||
color: color-yiq($bg);
|
||||
background-color: $bg;
|
||||
|
||||
&[href] {
|
||||
@include hover-focus {
|
||||
color: color-yiq($bg);
|
||||
text-decoration: none;
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
// Single side border-radius
|
||||
|
||||
@mixin border-radius($radius: $border-radius) {
|
||||
@if $enable-rounded {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-top-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-left-radius: $radius;
|
||||
border-top-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-right-radius: $radius;
|
||||
border-bottom-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-bottom-right-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radius) {
|
||||
@if $enable-rounded {
|
||||
border-top-left-radius: $radius;
|
||||
border-bottom-left-radius: $radius;
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
@mixin box-shadow($shadow...) {
|
||||
@if $enable-shadows {
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
}
|
||||
@ -1,119 +0,0 @@
|
||||
// Breakpoint viewport sizes and media queries.
|
||||
//
|
||||
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
||||
//
|
||||
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
|
||||
//
|
||||
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
||||
|
||||
// Name of the next breakpoint, or null for the last breakpoint.
|
||||
//
|
||||
// >> breakpoint-next(sm)
|
||||
// md
|
||||
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// md
|
||||
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
|
||||
// md
|
||||
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
||||
}
|
||||
|
||||
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
||||
//
|
||||
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 576px
|
||||
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: map-get($breakpoints, $name);
|
||||
@return if($min != 0, $min, null);
|
||||
}
|
||||
|
||||
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
||||
// The maximum value is calculated as the minimum of the next one less 0.1.
|
||||
//
|
||||
// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// 767px
|
||||
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
|
||||
$next: breakpoint-next($name, $breakpoints);
|
||||
@return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
|
||||
}
|
||||
|
||||
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
|
||||
// Useful for making responsive utilities.
|
||||
//
|
||||
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "" (Returns a blank string)
|
||||
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
|
||||
// "-sm"
|
||||
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
|
||||
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
|
||||
}
|
||||
|
||||
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and wider.
|
||||
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
@if $min {
|
||||
@media (min-width: $min) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
||||
// Makes the @content apply to the given breakpoint and narrower.
|
||||
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
@if $max {
|
||||
@media (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Media that spans multiple breakpoint widths.
|
||||
// Makes the @content apply between the min and max breakpoints
|
||||
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($lower, $breakpoints);
|
||||
$max: breakpoint-max($upper, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
@include media-breakpoint-up($lower) {
|
||||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
@include media-breakpoint-down($upper) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Media between the breakpoint's minimum and maximum widths.
|
||||
// No minimum for the smallest breakpoint, and no maximum for the largest one.
|
||||
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
||||
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
|
||||
$min: breakpoint-min($name, $breakpoints);
|
||||
$max: breakpoint-max($name, $breakpoints);
|
||||
|
||||
@if $min != null and $max != null {
|
||||
@media (min-width: $min) and (max-width: $max) {
|
||||
@content;
|
||||
}
|
||||
} @else if $max == null {
|
||||
@include media-breakpoint-up($name) {
|
||||
@content;
|
||||
}
|
||||
} @else if $min == null {
|
||||
@include media-breakpoint-down($name) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,94 +0,0 @@
|
||||
// Button variants
|
||||
//
|
||||
// Easily pump out default styles, as well as :hover, :focus, :active,
|
||||
// and disabled options for all buttons
|
||||
|
||||
@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
|
||||
color: color-yiq($background);
|
||||
@include gradient-bg($background);
|
||||
border-color: $border;
|
||||
@include box-shadow($btn-box-shadow);
|
||||
|
||||
@include hover {
|
||||
color: color-yiq($hover-background);
|
||||
@include gradient-bg($hover-background);
|
||||
border-color: $hover-border;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||
} @else {
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled comes first so active can properly restyle
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: color-yiq($active-background);
|
||||
background-color: $active-background;
|
||||
@if $enable-gradients {
|
||||
background-image: none; // Remove the gradient for the pressed/active state
|
||||
}
|
||||
border-color: $active-border;
|
||||
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: $btn-active-box-shadow, 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||
} @else {
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($border, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color, $color-hover: #fff) {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
border-color: $color;
|
||||
|
||||
@include hover {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $color;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:not([disabled]):not(.disabled):active,
|
||||
&:not([disabled]):not(.disabled).active,
|
||||
.show > &.dropdown-toggle {
|
||||
color: $color-hover;
|
||||
background-color: $color;
|
||||
border-color: $color;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: 0 0 0 $input-btn-focus-width rgba($color, .5);
|
||||
}
|
||||
}
|
||||
|
||||
// Button sizes
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
@mixin caret-down {
|
||||
border-top: $caret-width solid;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-bottom: 0;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret-up {
|
||||
border-top: 0;
|
||||
border-right: $caret-width solid transparent;
|
||||
border-bottom: $caret-width solid;
|
||||
border-left: $caret-width solid transparent;
|
||||
}
|
||||
|
||||
@mixin caret($direction: down) {
|
||||
@if $enable-caret {
|
||||
&::after {
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-left: $caret-width * .85;
|
||||
vertical-align: $caret-width * .85;
|
||||
content: "";
|
||||
@if $direction == down {
|
||||
@include caret-down;
|
||||
} @else if $direction == up {
|
||||
@include caret-up;
|
||||
}
|
||||
}
|
||||
|
||||
&:empty::after {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
@mixin clearfix() {
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user