maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

enhanced CardWidget (Widget)

Browse source 
- renamed Widget to CardWidget
- renamed data-widget to data-card-widget
- reworked Selector & ClassName Icons to Option
- splited toggleMaximize to maximize & minimize
- added maximizeTrigger Option
- enhance code to run methods without buttons
This commit is contained in:
REJack 2019-08-20 12:33:52 +02:00
parent ec9f780ed7
commit b816ef347a
No known key found for this signature in database
GPG key ID: 9F3976CC630CC888
28 changed files with 392 additions and 366 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
build/js/AdminLTE.js
View file

@ -4,7 +4,7 @@ import PushMenu from './PushMenu'
import Treeview from './Treeview'
import DirectChat from './DirectChat'
import TodoList from './TodoList'
import Widget from './Widget'
import CardWidget from './CardWidget'
export {
ControlSidebar,
@ -13,5 +13,5 @@ export {
Treeview,
DirectChat,
TodoList,
Widget
CardWidget
}

249
build/js/CardWidget.js Normal file
View file

@ -0,0 +1,249 @@
/**
* --------------------------------------------
* AdminLTE CardWidget.js
* License MIT
* --------------------------------------------
*/
const CardWidget = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'CardWidget'
const DATA_KEY = 'lte.cardwidget'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
EXPANDED: `expanded${EVENT_KEY}`,
COLLAPSED: `collapsed${EVENT_KEY}`,
MAXIMIZED: `maximized${EVENT_KEY}`,
MINIMIZED: `minimized${EVENT_KEY}`,
REMOVED: `removed${EVENT_KEY}`
}
const ClassName = {
CARD: 'card',
COLLAPSED: 'collapsed-card',
WAS_COLLAPSED: 'was-collapsed',
MAXIMIZED: 'maximized-card',
}
const Selector = {
DATA_REMOVE: '[data-card-widget="remove"]',
DATA_COLLAPSE: '[data-card-widget="collapse"]',
DATA_MAXIMIZE: '[data-card-widget="maximize"]',
CARD: `.${ClassName.CARD}`,
CARD_HEADER: '.card-header',
CARD_BODY: '.card-body',
CARD_FOOTER: '.card-footer',
COLLAPSED: `.${ClassName.COLLAPSED}`,
}
const Default = {
animationSpeed: 'normal',
collapseTrigger: Selector.DATA_COLLAPSE,
removeTrigger: Selector.DATA_REMOVE,
maximizeTrigger: Selector.DATA_MAXIMIZE,
collapseIcon: 'fa-minus',
expandIcon: 'fa-plus',
maximizeIcon: 'fa-expand',
minimizeIcon: 'fa-compress',
}
class CardWidget {
constructor(element, settings) {
this._element = element
this._parent = element.parents(Selector.CARD).first()
if (element.hasClass(ClassName.CARD)) {
this._parent = element
}
this._settings = $.extend({}, Default, settings)
}
collapse() {
this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
.slideUp(this._settings.animationSpeed, () => {
this._parent.addClass(ClassName.COLLAPSED)
})
this._element.children(this._settings.collapseTrigger + ' .' + this._settings.collapseIcon)
.addClass(this._settings.expandIcon)
.removeClass(this._settings.collapseIcon)
const collapsed = $.Event(Event.COLLAPSED)
this._element.trigger(collapsed, this._parent)
}
expand() {
this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
.slideDown(this._settings.animationSpeed, () => {
this._parent.removeClass(ClassName.COLLAPSED)
})
this._element.children(this._settings.collapseTrigger + ' .' + this._settings.expandIcon)
.addClass(this._settings.collapseIcon)
.removeClass(this._settings.expandIcon)
const expanded = $.Event(Event.EXPANDED)
this._element.trigger(expanded, this._parent)
}
remove() {
this._parent.slideUp()
const removed = $.Event(Event.REMOVED)
this._element.trigger(removed, this._parent)
}
toggle() {
if (this._parent.hasClass(ClassName.COLLAPSED)) {
this.expand()
return
}
this.collapse()
}
maximize() {
this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.maximizeIcon)
.addClass(this._settings.minimizeIcon)
.removeClass(this._settings.maximizeIcon)
this._parent.css({
'height': this._parent.height(),
'width': this._parent.width(),
'transition': 'all .15s'
}).delay(150).queue(function(){
$(this).addClass(ClassName.MAXIMIZED)
$('html').addClass(ClassName.MAXIMIZED)
if ($(this).hasClass(ClassName.COLLAPSED)) {
$(this).addClass(ClassName.WAS_COLLAPSED)
}
$(this).dequeue()
})
const maximized = $.Event(Event.MAXIMIZED)
this._element.trigger(maximized, this._parent)
}
minimize() {
this._element.children(this._settings.maximizeTrigger + ' .' + this._settings.minimizeIcon)
.addClass(this._settings.maximizeIcon)
.removeClass(this._settings.minimizeIcon)
this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
).delay(10).queue(function(){
$(this).removeClass(ClassName.MAXIMIZED)
$('html').removeClass(ClassName.MAXIMIZED)
$(this).css({
'height': 'inherit',
'width': 'inherit'
})
if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
$(this).removeClass(ClassName.WAS_COLLAPSED)
}
$(this).dequeue()
})
const MINIMIZED = $.Event(Event.MINIMIZED)
this._element.trigger(MINIMIZED, this._parent)
}
toggleMaximize() {
if (this._parent.hasClass(ClassName.MAXIMIZED)) {
this.minimize()
return
}
this.maximize()
}
// Private
_init(card) {
this._parent = card
$(this).find(this._settings.collapseTrigger).click(() => {
this.toggle()
})
$(this).find(this._settings.maximizeTrigger).click(() => {
this.toggleMaximize()
})
$(this).find(this._settings.removeTrigger).click(() => {
this.remove()
})
}
// Static
static _jQueryInterface(config) {
let data = $(this).data(DATA_KEY)
if (!data) {
data = new CardWidget($(this), data)
$(this).data(DATA_KEY, typeof config === 'string' ? data: config)
}
if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|maximize|minimize|toggleMaximize/)) {
data[config]()
} else if (typeof config === 'object') {
data._init($(this))
}
}
}
/**
* Data API
* ====================================================
*/
$(document).on('click', Selector.DATA_COLLAPSE, function (event) {
if (event) {
event.preventDefault()
}
CardWidget._jQueryInterface.call($(this), 'toggle')
})
$(document).on('click', Selector.DATA_REMOVE, function (event) {
if (event) {
event.preventDefault()
}
CardWidget._jQueryInterface.call($(this), 'remove')
})
$(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
if (event) {
event.preventDefault()
}
CardWidget._jQueryInterface.call($(this), 'toggleMaximize')
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = CardWidget._jQueryInterface
$.fn[NAME].Constructor = CardWidget
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return CardWidget._jQueryInterface
}
return CardWidget
})(jQuery)
export default CardWidget

226
build/js/Widget.js
View file

@ -1,226 +0,0 @@
/**
* --------------------------------------------
* AdminLTE Widget.js
* License MIT
* --------------------------------------------
*/
const Widget = (($) => {
/**
* Constants
* ====================================================
*/
const NAME = 'Widget'
const DATA_KEY = 'lte.widget'
const EVENT_KEY = `.${DATA_KEY}`
const JQUERY_NO_CONFLICT = $.fn[NAME]
const Event = {
EXPANDED : `expanded${EVENT_KEY}`,
COLLAPSED: `collapsed${EVENT_KEY}`,
MAXIMIZED: `maximized${EVENT_KEY}`,
MINIMIZED: `minimized${EVENT_KEY}`,
REMOVED : `removed${EVENT_KEY}`
}
const Selector = {
DATA_REMOVE : '[data-widget="remove"]',
DATA_COLLAPSE : '[data-widget="collapse"]',
DATA_MAXIMIZE : '[data-widget="maximize"]',
CARD : '.card',
CARD_HEADER : '.card-header',
CARD_BODY : '.card-body',
CARD_FOOTER : '.card-footer',
COLLAPSED : '.collapsed-card',
COLLAPSE_ICON : '.fa-minus',
EXPAND_ICON : '.fa-plus'
}
const ClassName = {
COLLAPSED : 'collapsed-card',
WAS_COLLAPSED : 'was-collapsed',
MAXIMIZED : 'maximized-card',
COLLAPSE_ICON : 'fa-minus',
EXPAND_ICON : 'fa-plus',
MAXIMIZE_ICON : 'fa-expand',
MINIMIZE_ICON : 'fa-compress',
}
const Default = {
animationSpeed : 'normal',
collapseTrigger: Selector.DATA_COLLAPSE,
removeTrigger : Selector.DATA_REMOVE
}
class Widget {
constructor(element, settings) {
this._element = element
this._parent = element.parents(Selector.CARD).first()
this._settings = $.extend({}, Default, settings)
}
collapse() {
this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
.slideUp(this._settings.animationSpeed, () => {
this._parent.addClass(ClassName.COLLAPSED)
})
this._element.children(Selector.COLLAPSE_ICON)
.addClass(ClassName.EXPAND_ICON)
.removeClass(ClassName.COLLAPSE_ICON)
const collapsed = $.Event(Event.COLLAPSED)
this._element.trigger(collapsed, this._parent)
}
expand() {
this._parent.children(`${Selector.CARD_BODY}, ${Selector.CARD_FOOTER}`)
.slideDown(this._settings.animationSpeed, () => {
this._parent.removeClass(ClassName.COLLAPSED)
})
this._element.children(Selector.EXPAND_ICON)
.addClass(ClassName.COLLAPSE_ICON)
.removeClass(ClassName.EXPAND_ICON)
const expanded = $.Event(Event.EXPANDED)
this._element.trigger(expanded, this._parent)
}
remove() {
this._parent.slideUp()
const removed = $.Event(Event.REMOVED)
this._element.trigger(removed, this._parent)
}
toggle() {
if (this._parent.hasClass(ClassName.COLLAPSED)) {
this.expand()
return
}
this.collapse()
}
toggleMaximize() {
var button = this._element.find('i')
if (this._parent.hasClass(ClassName.MAXIMIZED)) {
button.addClass(ClassName.MAXIMIZE_ICON).removeClass(ClassName.MINIMIZE_ICON)
this._parent.css('cssText', 'height:' + this._parent[0].style.height + ' !important;' +
'width:' + this._parent[0].style.width + ' !important; transition: all .15s;'
).delay(100).queue(function(){
$(this).removeClass(ClassName.MAXIMIZED)
$('html').removeClass(ClassName.MAXIMIZED)
$(this).trigger(Event.MINIMIZED)
$(this).css({
'height': 'inherit',
'width': 'inherit'
})
if ($(this).hasClass(ClassName.WAS_COLLAPSED)) {
$(this).removeClass(ClassName.WAS_COLLAPSED)
}
$(this).dequeue()
})
} else {
button.addClass(ClassName.MINIMIZE_ICON).removeClass(ClassName.MAXIMIZE_ICON)
this._parent.css({
'height': this._parent.height(),
'width': this._parent.width(),
'transition': 'all .15s'
}).delay(150).queue(function(){
$(this).addClass(ClassName.MAXIMIZED)
$('html').addClass(ClassName.MAXIMIZED)
$(this).trigger(Event.MAXIMIZED)
if ($(this).hasClass(ClassName.COLLAPSED)) {
$(this).addClass(ClassName.WAS_COLLAPSED)
}
$(this).dequeue()
})
}
}
// Private
_init(card) {
this._parent = card
$(this).find(this._settings.collapseTrigger).click(() => {
this.toggle()
})
$(this).find(this._settings.removeTrigger).click(() => {
this.remove()
})
}
// Static
static _jQueryInterface(config) {
return this.each(function () {
let data = $(this).data(DATA_KEY)
if (!data) {
data = new Widget($(this), data)
$(this).data(DATA_KEY, typeof config === 'string' ? data : config)
}
if (typeof config === 'string' && config.match(/collapse|expand|remove|toggle|toggleMaximize/)) {
data[config]()
} else if (typeof config === 'object') {
data._init($(this))
}
})
}
}
/**
* Data API
* ====================================================
*/
$(document).on('click', Selector.DATA_COLLAPSE, function (event) {
if (event) {
event.preventDefault()
}
Widget._jQueryInterface.call($(this), 'toggle')
})
$(document).on('click', Selector.DATA_REMOVE, function (event) {
if (event) {
event.preventDefault()
}
Widget._jQueryInterface.call($(this), 'remove')
})
$(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
if (event) {
event.preventDefault()
}
Widget._jQueryInterface.call($(this), 'toggleMaximize')
})
/**
* jQuery API
* ====================================================
*/
$.fn[NAME] = Widget._jQueryInterface
$.fn[NAME].Constructor = Widget
$.fn[NAME].noConflict = function () {
$.fn[NAME] = JQUERY_NO_CONFLICT
return Widget._jQueryInterface
}
return Widget
})(jQuery)
export default Widget

4
docs/_config.yml
View file

@ -62,8 +62,8 @@ navigation:
url: javascript/push-menu.html
- title: Treeview
url: javascript/treeview.html
- title: Widget
url: javascript/widget.html
- title: Card Widget
url: javascript/card-widget.html
# - title: CardRefresh
# url: javascript/card-refresh.html
- title: Control Sidebar

45
docs/javascript/widget.md → docs/javascript/card-widget.md
View file

@ -1,9 +1,9 @@
---
layout: page
title: Widget Plugin
title: Card Widget Plugin
---
The widget plugin provides the functionality for collapsing, expanding and removing a card.
The card widget plugin provides the functionality for collapsing, expanding and removing a card.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
@ -13,7 +13,7 @@ This plugin can be activated as a jQuery plugin or using the data api.
This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
`data-widget="collapse"`
`data-card-widget="collapse"`
<br />
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.
<div class="row">
@ -22,7 +22,7 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
<div class="card-header">
<h3 class="card-title">Collapsible Card Example</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
</div>
</div>
<div class="card-body">
@ -37,7 +37,7 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
<h3 class="card-title">Collapsible Card Example</h3>
<div class="card-tools">
<!-- Collapse Button -->
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
</div>
<!-- /.card-tools -->
</div>
@ -53,7 +53,7 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
</div>
</div>
`data-widget="remove"`
`data-card-widget="remove"`
<br />
This attribute, when attached to a button, allows the box to be removed when clicked.
<div class="row">
@ -62,7 +62,7 @@ This attribute, when attached to a button, allows the box to be removed when cli
<div class="card-header">
<h3 class="card-title">Removable Card Example</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
@ -77,7 +77,7 @@ This attribute, when attached to a button, allows the box to be removed when cli
<h3 class="card-title">Removable Card Example</h3>
<div class="card-tools">
<!-- Remove Button -->
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
<!-- /.card-tools -->
</div>
@ -93,7 +93,7 @@ This attribute, when attached to a button, allows the box to be removed when cli
</div>
</div>
`data-widget="maximize"`
`data-card-widget="maximize"`
<br />
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.
<div class="row">
@ -102,7 +102,7 @@ This attribute, when attached to a button, allows the box to be maximize/minimiz
<div class="card-header">
<h3 class="card-title">Maximizable Card Example</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
</div>
</div>
<div class="card-body">
@ -117,7 +117,7 @@ This attribute, when attached to a button, allows the box to be maximize/minimiz
<h3 class="card-title">Maximizable Card Example</h3>
<div class="card-tools">
<!-- Maximize Button -->
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
</div>
<!-- /.card-tools -->
</div>
@ -136,7 +136,7 @@ This attribute, when attached to a button, allows the box to be maximize/minimiz
###### jQuery
{: .text-bold }
To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-widget` selectors.
To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-card-widget` selectors.
```js
$('#my-card').Widget(options)
@ -149,14 +149,15 @@ $('#my-card').Widget(options)
| Name | Type | Default | Description
|-|-|-|-
|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
|collapseTrigger | String | `[data-widget="remove"]` | jQuery selector to the element responsible for collapsing the box.
|removeTrigger | String | `[data-widget="collapse"]` | jQuery selector to the element responsible for removing the box.
|collapseTrigger | String | `[data-card-widget="remove"]` | jQuery selector to the element responsible for collapsing the box.
|removeTrigger | String | `[data-card-widget="collapse"]` | jQuery selector to the element responsible for removing the box.
|maximizeTrigger | String | `[data-card-widget="maximize"]` | jQuery selector to the element responsible for maximizing the box.
{: .table .table-bordered .bg-light}
> ##### Tip!
> You can use any option via the data-attributes like this.
> ```html
> <button type="button" class="btn btn-tool" data-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
> <button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
> ```
{: .quote-info}
@ -166,14 +167,14 @@ $('#my-card').Widget(options)
|---
| Event Type | Description
|-|-
|expanded.lte.widget | Triggered after a card expanded.
|collapsed.lte.widget | Triggered after a card collapsed.
|maximized.lte.widget | Triggered after a card maximized.
|minimized.lte.widget | Triggered after a card minimized.
|removed.lte.widget | Triggered after a card removed.
|expanded.lte.cardwidget | Triggered after a card expanded.
|collapsed.lte.cardwidget | Triggered after a card collapsed.
|maximized.lte.cardwidget | Triggered after a card maximized.
|minimized.lte.cardwidget | Triggered after a card minimized.
|removed.lte.cardwidget | Triggered after a card removed.
{: .table .table-bordered .bg-light}
Example: `$('#my-card').on('expanded.lte.widget', handleExpandedEvent)`
Example: `$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)`
##### Methods
@ -186,6 +187,8 @@ Example: `$('#my-card').on('expanded.lte.widget', handleExpandedEvent)`
|expand | Expands the card
|remove | Removes the card
|toggle | Toggles the state of the card between expanded and collapsed
|maximize | Maximizes the card
|minimize | Minimizes the card
|toggleMaximize | Toggles the state of the card between maximized and minimized
{: .table .table-bordered .bg-light}

14
index.html
View file

@ -724,14 +724,14 @@
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge badge-primary">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1071,7 +1071,7 @@
</button>
<button type="button"
class="btn btn-primary btn-sm"
data-widget="collapse"
data-card-widget="collapse"
data-toggle="tooltip"
title="Collapse">
<i class="fas fa-minus"></i>
@ -1115,10 +1115,10 @@
</h3>
<div class="card-tools">
<button type="button" class="btn bg-info btn-sm" data-widget="collapse">
<button type="button" class="btn bg-info btn-sm" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn bg-info btn-sm" data-widget="remove">
<button type="button" class="btn bg-info btn-sm" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -1178,10 +1178,10 @@
<a href="#" class="dropdown-item">View calendar</a>
</div>
</div>
<button type="button" class="btn btn-success btn-sm" data-widget="collapse">
<button type="button" class="btn btn-success btn-sm" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-success btn-sm" data-widget="remove">
<button type="button" class="btn btn-success btn-sm" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>

28
index2.html
View file

@ -676,7 +676,7 @@
<h5 class="card-title">Monthly Recap Report</h5>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<div class="btn-group">
@ -691,7 +691,7 @@
<a href="#" class="dropdown-item">Separated link</a>
</div>
</div>
<button type="button" class="btn btn-tool" data-widget="remove">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -815,10 +815,10 @@
<h3 class="card-title">Visitors Report</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -866,12 +866,12 @@
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge badge-warning">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1069,9 +1069,9 @@
<div class="card-tools">
<span class="badge badge-danger">8 New Members</span>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1139,10 +1139,10 @@
<h3 class="card-title">Latest Orders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -1280,9 +1280,9 @@
<h3 class="card-title">Browser Usage</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1349,10 +1349,10 @@
<h3 class="card-title">Recently Added Products</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>

24
pages/charts/chartjs.html
View file

@ -614,9 +614,9 @@
<h3 class="card-title">Area Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
@ -634,9 +634,9 @@
<h3 class="card-title">Donut Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
@ -652,9 +652,9 @@
<h3 class="card-title">Pie Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
@ -673,9 +673,9 @@
<h3 class="card-title">Line Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
@ -693,9 +693,9 @@
<h3 class="card-title">Bar Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">
@ -713,9 +713,9 @@
<h3 class="card-title">Stacked Bar Chart</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
</div>
<div class="card-body">

16
pages/charts/flot.html
View file

@ -648,9 +648,9 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -670,9 +670,9 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -696,10 +696,10 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse">
<i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove">
<button type="button" class="btn btn-tool" data-card-widget="remove">
<i class="fas fa-times"></i>
</button>
</div>
@ -720,9 +720,9 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>

12
pages/charts/inline.html
View file

@ -620,10 +620,10 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i
class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -692,10 +692,10 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i
class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -751,10 +751,10 @@
</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i
class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>

4
pages/examples/blank.html
View file

@ -614,9 +614,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/examples/language-menu.html
View file

@ -626,9 +626,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/examples/legacy-user-menu.html
View file

@ -641,9 +641,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/examples/project_add.html
View file

@ -614,7 +614,7 @@
<h3 class="card-title">General</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>
@ -655,7 +655,7 @@
<h3 class="card-title">Budget</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>

4
pages/examples/project_detail.html
View file

@ -615,9 +615,9 @@
<h3 class="card-title">Projects Detail</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

6
pages/examples/project_edit.html
View file

@ -614,7 +614,7 @@
<h3 class="card-title">General</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>
@ -655,7 +655,7 @@
<h3 class="card-title">Budget</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>
@ -681,7 +681,7 @@
<h3 class="card-title">Files</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>

4
pages/examples/projects.html
View file

@ -614,9 +614,9 @@
<h3 class="card-title">Projects</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

8
pages/forms/advanced.html
View file

@ -625,8 +625,8 @@
<h3 class="card-title">Select2</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-remove"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
</div>
</div>
<!-- /.card-header -->
@ -707,8 +707,8 @@
<h3 class="card-title">Bootstrap Duallistbox</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-remove"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-remove"></i></button>
</div>
</div>
<!-- /.card-header -->

4
pages/forms/editors.html
View file

@ -618,10 +618,10 @@
</h3>
<!-- tools box -->
<div class="card-tools">
<button type="button" class="btn btn-tool btn-sm" data-widget="collapse" data-toggle="tooltip"
<button type="button" class="btn btn-tool btn-sm" data-card-widget="collapse" data-toggle="tooltip"
title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool btn-sm" data-widget="remove" data-toggle="tooltip"
<button type="button" class="btn btn-tool btn-sm" data-card-widget="remove" data-toggle="tooltip"
title="Remove">
<i class="fas fa-times"></i></button>
</div>

4
pages/layout/boxed.html
View file

@ -615,9 +615,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/layout/collapsed-sidebar.html
View file

@ -615,9 +615,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/layout/fixed-footer.html
View file

@ -614,9 +614,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/layout/fixed-sidebar.html
View file

@ -616,9 +616,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/layout/fixed-topnav.html
View file

@ -614,9 +614,9 @@
<h3 class="card-title">Title</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove" data-toggle="tooltip" title="Remove">
<button type="button" class="btn btn-tool" data-card-widget="remove" data-toggle="tooltip" title="Remove">
<i class="fas fa-times"></i></button>
</div>
</div>

4
pages/mailbox/compose.html
View file

@ -618,7 +618,7 @@
<h3 class="card-title">Folders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
</div>
@ -661,7 +661,7 @@
<h3 class="card-title">Labels</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
</div>

4
pages/mailbox/mailbox.html
View file

@ -616,7 +616,7 @@
<h3 class="card-title">Folders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
</div>
@ -659,7 +659,7 @@
<h3 class="card-title">Labels</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
</div>

4
pages/mailbox/read-mail.html
View file

@ -616,7 +616,7 @@
<h3 class="card-title">Folders</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
</div>
@ -659,7 +659,7 @@
<h3 class="card-title">Labels</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
</div>

62
pages/widgets.html
View file

@ -970,7 +970,7 @@
<h3 class="card-title">Expandable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-plus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-plus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -990,7 +990,7 @@
<h3 class="card-title">Collapsable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1010,7 +1010,7 @@
<h3 class="card-title">Removable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1030,7 +1030,7 @@
<h3 class="card-title">Maximizable</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i>
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1054,9 +1054,9 @@
<h3 class="card-title">All together</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
</div>
<!-- /.card-tools -->
</div>
@ -1119,7 +1119,7 @@
<h3 class="card-title">Primary Outline</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1139,7 +1139,7 @@
<h3 class="card-title">Success Outline</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1159,7 +1159,7 @@
<h3 class="card-title">Warning Outline</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1196,7 +1196,7 @@
<h3 class="card-title">Primary Outline</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1216,7 +1216,7 @@
<h3 class="card-title">Success Outline</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1236,7 +1236,7 @@
<h3 class="card-title">Warning Outline</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1273,7 +1273,7 @@
<h3 class="card-title">Primary</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1293,7 +1293,7 @@
<h3 class="card-title">Success</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1313,7 +1313,7 @@
<h3 class="card-title">Warning</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1350,7 +1350,7 @@
<h3 class="card-title">Primary Gradient</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1370,7 +1370,7 @@
<h3 class="card-title">Success Gradient</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1390,7 +1390,7 @@
<h3 class="card-title">Warning Gradient</h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
</div>
<!-- /.card-tools -->
@ -1433,12 +1433,12 @@
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1528,12 +1528,12 @@
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-success">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1623,12 +1623,12 @@
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge bg-danger">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1718,12 +1718,12 @@
<div class="card-tools">
<span data-toggle="tooltip" title="3 New Messages" class="badge">3</span>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts"
data-widget="chat-pane-toggle">
<i class="fas fa-comments"></i></button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
</div>
@ -1956,9 +1956,9 @@
<div class="card-tools">
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Mark as read">
<i class="far fa-circle"></i></button>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->
@ -2033,9 +2033,9 @@
<div class="card-tools">
<button type="button" class="btn btn-tool" data-toggle="tooltip" title="Mark as read">
<i class="far fa-circle"></i></button>
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
<button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>
</button>
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
<button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i>
</button>
</div>
<!-- /.card-tools -->