enhanced card & widget with expand/compress (fullscreen) and some little fixes
- updated Widget.js - updated _cards.scss - enabled gradients in _bootstrap-variables.scss - fixed old bg-*-gradient (theme colors) - added bg-*-gradient (colors) - updated cards demo section in pages/widgets.html
This commit is contained in:
REJack
parent
0f1f556d68
commit
d852f4ba34
|
|
@ -19,12 +19,15 @@ const Widget = (($) => {
|
|||
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',
|
||||
|
|
@ -36,8 +39,12 @@ const Widget = (($) => {
|
|||
|
||||
const ClassName = {
|
||||
COLLAPSED : 'collapsed-card',
|
||||
WAS_COLLAPSED : 'was-collapsed',
|
||||
MAXIMIZED : 'maximized-card',
|
||||
COLLAPSE_ICON : 'fa-minus',
|
||||
EXPAND_ICON : 'fa-plus'
|
||||
EXPAND_ICON : 'fa-plus',
|
||||
MAXIMIZE_ICON : 'fa-expand',
|
||||
MINIMIZE_ICON : 'fa-compress',
|
||||
}
|
||||
|
||||
const Default = {
|
||||
|
|
@ -99,6 +106,44 @@ const Widget = (($) => {
|
|||
|
||||
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
|
||||
|
||||
|
|
@ -155,6 +200,14 @@ const Widget = (($) => {
|
|||
Widget._jQueryInterface.call($(this), 'remove')
|
||||
})
|
||||
|
||||
$(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
|
||||
if (event) {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
Widget._jQueryInterface.call($(this), 'toggleMaximize')
|
||||
})
|
||||
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ $yiq-text-light: $white !default;
|
|||
$enable-caret: true !default;
|
||||
$enable-rounded: true !default;
|
||||
$enable-shadows: true !default;
|
||||
$enable-gradients: false !default;
|
||||
$enable-gradients: true !default;
|
||||
$enable-transitions: true !default;
|
||||
$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
|
||||
$enable-grid-classes: true !default;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,30 @@
|
|||
}
|
||||
}
|
||||
|
||||
&.maximized-card {
|
||||
z-index: 9999;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
&.was-collapsed .card-body {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
[data-widget="collapse"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card-header,
|
||||
.card-footer {
|
||||
@include border-radius(0 !important);
|
||||
}
|
||||
}
|
||||
|
||||
// collapsed mode
|
||||
&.collapsed-card {
|
||||
.card-body,
|
||||
|
|
@ -49,6 +73,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Maximized Card Body Scroll fix
|
||||
html.maximized-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card,
|
||||
.overlay-wrapper {
|
||||
// Box overlay for LOADING STATE effect
|
||||
|
|
|
|||
|
|
@ -70,19 +70,28 @@ a.text-muted:hover {
|
|||
color: color-yiq($white) !important;
|
||||
}
|
||||
|
||||
// Gradient Background colors
|
||||
// Gradient Background colors (theme colors)
|
||||
@each $name, $color in $theme-colors {
|
||||
.bg-#{$name}-gradient {
|
||||
@include gradient($color, $color, lighten($color, 10%));
|
||||
@include gradient-bg($color);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled!
|
||||
// Gradient Background colors (colors)
|
||||
@each $name, $color in $colors {
|
||||
.bg-#{$name}-gradient {
|
||||
@include gradient-bg($color);
|
||||
color: color-yiq($color);
|
||||
}
|
||||
}
|
||||
|
||||
// Backgrund Color Disabled
|
||||
[class^="bg-"].disabled {
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
// Link Styles
|
||||
.link-muted {
|
||||
color: darken($gray-500, 30%);
|
||||
&:hover,
|
||||
|
|
@ -114,23 +123,6 @@ a.text-muted:hover {
|
|||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Unstyled List
|
||||
.list-unstyled {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-group-unbordered {
|
||||
> .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Remove border radius
|
||||
.flat {
|
||||
@include border-radius(0 !important);
|
||||
|
|
@ -151,6 +143,22 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
// List utility classes
|
||||
.list-unstyled {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-group-unbordered {
|
||||
> .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.list-header {
|
||||
font-size: 15px;
|
||||
padding: 10px 4px;
|
||||
|
|
@ -361,3 +369,4 @@ a.text-muted:hover {
|
|||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
272
dist/css/adminlte.css
vendored
272
dist/css/adminlte.css
vendored
|
|
@ -2002,7 +2002,7 @@ textarea.form-control {
|
|||
|
||||
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
|
||||
border-color: #34ce57;
|
||||
background-color: #34ce57;
|
||||
background: #34ce57 linear-gradient(180deg, #52d670, #34ce57) repeat-x;
|
||||
}
|
||||
|
||||
.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
|
||||
|
|
@ -2125,7 +2125,7 @@ textarea.form-control {
|
|||
|
||||
.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
|
||||
border-color: #e4606d;
|
||||
background-color: #e4606d;
|
||||
background: #e4606d linear-gradient(180deg, #e87883, #e4606d) repeat-x;
|
||||
}
|
||||
|
||||
.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
|
||||
|
|
@ -2265,14 +2265,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-primary {
|
||||
color: #ffffff;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
color: #ffffff;
|
||||
background-color: #0069d9;
|
||||
background: #0069d9 linear-gradient(180deg, #267fde, #0069d9) repeat-x;
|
||||
border-color: #0062cc;
|
||||
}
|
||||
|
||||
|
|
@ -2284,12 +2284,14 @@ fieldset:disabled a.btn {
|
|||
color: #ffffff;
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-primary.dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #0062cc;
|
||||
background-image: none;
|
||||
border-color: #005cbf;
|
||||
}
|
||||
|
||||
|
|
@ -2300,14 +2302,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-secondary {
|
||||
color: #ffffff;
|
||||
background-color: #6c757d;
|
||||
background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
|
||||
border-color: #6c757d;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
color: #ffffff;
|
||||
background-color: #5a6268;
|
||||
background: #5a6268 linear-gradient(180deg, #73797f, #5a6268) repeat-x;
|
||||
border-color: #545b62;
|
||||
}
|
||||
|
||||
|
|
@ -2319,12 +2321,14 @@ fieldset:disabled a.btn {
|
|||
color: #ffffff;
|
||||
background-color: #6c757d;
|
||||
border-color: #6c757d;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-secondary.dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #545b62;
|
||||
background-image: none;
|
||||
border-color: #4e555b;
|
||||
}
|
||||
|
||||
|
|
@ -2335,14 +2339,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-success {
|
||||
color: #ffffff;
|
||||
background-color: #28a745;
|
||||
background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
|
||||
border-color: #28a745;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
color: #ffffff;
|
||||
background-color: #218838;
|
||||
background: #218838 linear-gradient(180deg, #429a56, #218838) repeat-x;
|
||||
border-color: #1e7e34;
|
||||
}
|
||||
|
||||
|
|
@ -2354,12 +2358,14 @@ fieldset:disabled a.btn {
|
|||
color: #ffffff;
|
||||
background-color: #28a745;
|
||||
border-color: #28a745;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-success.dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #1e7e34;
|
||||
background-image: none;
|
||||
border-color: #1c7430;
|
||||
}
|
||||
|
||||
|
|
@ -2370,14 +2376,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-info {
|
||||
color: #ffffff;
|
||||
background-color: #17a2b8;
|
||||
background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
|
||||
border-color: #17a2b8;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-info:hover {
|
||||
color: #ffffff;
|
||||
background-color: #138496;
|
||||
background: #138496 linear-gradient(180deg, #3697a6, #138496) repeat-x;
|
||||
border-color: #117a8b;
|
||||
}
|
||||
|
||||
|
|
@ -2389,12 +2395,14 @@ fieldset:disabled a.btn {
|
|||
color: #ffffff;
|
||||
background-color: #17a2b8;
|
||||
border-color: #17a2b8;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-info.dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #117a8b;
|
||||
background-image: none;
|
||||
border-color: #10707f;
|
||||
}
|
||||
|
||||
|
|
@ -2405,14 +2413,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-warning {
|
||||
color: #1F2D3D;
|
||||
background-color: #ffc107;
|
||||
background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
|
||||
border-color: #ffc107;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
color: #1F2D3D;
|
||||
background-color: #e0a800;
|
||||
background: #e0a800 linear-gradient(180deg, #e4b526, #e0a800) repeat-x;
|
||||
border-color: #d39e00;
|
||||
}
|
||||
|
||||
|
|
@ -2424,12 +2432,14 @@ fieldset:disabled a.btn {
|
|||
color: #1F2D3D;
|
||||
background-color: #ffc107;
|
||||
border-color: #ffc107;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-warning.dropdown-toggle {
|
||||
color: #1F2D3D;
|
||||
background-color: #d39e00;
|
||||
background-image: none;
|
||||
border-color: #c69500;
|
||||
}
|
||||
|
||||
|
|
@ -2440,14 +2450,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-danger {
|
||||
color: #ffffff;
|
||||
background-color: #dc3545;
|
||||
background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
|
||||
border-color: #dc3545;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
color: #ffffff;
|
||||
background-color: #c82333;
|
||||
background: #c82333 linear-gradient(180deg, #d04451, #c82333) repeat-x;
|
||||
border-color: #bd2130;
|
||||
}
|
||||
|
||||
|
|
@ -2459,12 +2469,14 @@ fieldset:disabled a.btn {
|
|||
color: #ffffff;
|
||||
background-color: #dc3545;
|
||||
border-color: #dc3545;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-danger.dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #bd2130;
|
||||
background-image: none;
|
||||
border-color: #b21f2d;
|
||||
}
|
||||
|
||||
|
|
@ -2475,14 +2487,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-light {
|
||||
color: #1F2D3D;
|
||||
background-color: #f8f9fa;
|
||||
background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
|
||||
border-color: #f8f9fa;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-light:hover {
|
||||
color: #1F2D3D;
|
||||
background-color: #e2e6ea;
|
||||
background: #e2e6ea linear-gradient(180deg, #e6eaed, #e2e6ea) repeat-x;
|
||||
border-color: #dae0e5;
|
||||
}
|
||||
|
||||
|
|
@ -2494,12 +2506,14 @@ fieldset:disabled a.btn {
|
|||
color: #1F2D3D;
|
||||
background-color: #f8f9fa;
|
||||
border-color: #f8f9fa;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-light.dropdown-toggle {
|
||||
color: #1F2D3D;
|
||||
background-color: #dae0e5;
|
||||
background-image: none;
|
||||
border-color: #d3d9df;
|
||||
}
|
||||
|
||||
|
|
@ -2510,14 +2524,14 @@ fieldset:disabled a.btn {
|
|||
|
||||
.btn-dark {
|
||||
color: #ffffff;
|
||||
background-color: #343a40;
|
||||
background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
|
||||
border-color: #343a40;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
|
||||
}
|
||||
|
||||
.btn-dark:hover {
|
||||
color: #ffffff;
|
||||
background-color: #23272b;
|
||||
background: #23272b linear-gradient(180deg, #44474b, #23272b) repeat-x;
|
||||
border-color: #1d2124;
|
||||
}
|
||||
|
||||
|
|
@ -2529,12 +2543,14 @@ fieldset:disabled a.btn {
|
|||
color: #ffffff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
|
||||
.show > .btn-dark.dropdown-toggle {
|
||||
color: #ffffff;
|
||||
background-color: #1d2124;
|
||||
background-image: none;
|
||||
border-color: #171a1d;
|
||||
}
|
||||
|
||||
|
|
@ -3095,19 +3111,20 @@ input[type="button"].btn-block {
|
|||
.dropdown-item:hover, .dropdown-item:focus {
|
||||
color: #16181b;
|
||||
text-decoration: none;
|
||||
background-color: #f8f9fa;
|
||||
background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
|
||||
}
|
||||
|
||||
.dropdown-item.active, .dropdown-item:active {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
}
|
||||
|
||||
.dropdown-item.disabled, .dropdown-item:disabled {
|
||||
color: #6c757d;
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.dropdown-menu.show {
|
||||
|
|
@ -3463,7 +3480,7 @@ input[type="button"].btn-block {
|
|||
.custom-control-input:checked ~ .custom-control-label::before {
|
||||
color: #ffffff;
|
||||
border-color: #007bff;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -3531,7 +3548,7 @@ input[type="button"].btn-block {
|
|||
|
||||
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
|
||||
border-color: #007bff;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -3723,7 +3740,7 @@ input[type="button"].btn-block {
|
|||
line-height: 1.5;
|
||||
color: #495057;
|
||||
content: "Browse";
|
||||
background-color: #e9ecef;
|
||||
background: #e9ecef linear-gradient(180deg, #eceff1, #e9ecef) repeat-x;
|
||||
border-left: inherit;
|
||||
border-radius: 0 0.25rem 0.25rem 0;
|
||||
}
|
||||
|
|
@ -3762,7 +3779,7 @@ input[type="button"].btn-block {
|
|||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-top: -0.25rem;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -3778,7 +3795,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.custom-range::-webkit-slider-thumb:active {
|
||||
background-color: #b3d7ff;
|
||||
background: #b3d7ff linear-gradient(180deg, #beddff, #b3d7ff) repeat-x;
|
||||
}
|
||||
|
||||
.custom-range::-webkit-slider-runnable-track {
|
||||
|
|
@ -3795,7 +3812,7 @@ input[type="button"].btn-block {
|
|||
.custom-range::-moz-range-thumb {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -3811,7 +3828,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.custom-range::-moz-range-thumb:active {
|
||||
background-color: #b3d7ff;
|
||||
background: #b3d7ff linear-gradient(180deg, #beddff, #b3d7ff) repeat-x;
|
||||
}
|
||||
|
||||
.custom-range::-moz-range-track {
|
||||
|
|
@ -3831,7 +3848,7 @@ input[type="button"].btn-block {
|
|||
margin-top: 0;
|
||||
margin-right: 0.2rem;
|
||||
margin-left: 0.2rem;
|
||||
background-color: #007bff;
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
border: 0;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
|
||||
|
|
@ -3846,7 +3863,7 @@ input[type="button"].btn-block {
|
|||
}
|
||||
|
||||
.custom-range::-ms-thumb:active {
|
||||
background-color: #b3d7ff;
|
||||
background: #b3d7ff linear-gradient(180deg, #beddff, #b3d7ff) repeat-x;
|
||||
}
|
||||
|
||||
.custom-range::-ms-track {
|
||||
|
|
@ -4921,7 +4938,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-primary {
|
||||
color: #004085;
|
||||
background-color: #cce5ff;
|
||||
background: #cce5ff linear-gradient(180deg, #d4e9ff, #cce5ff) repeat-x;
|
||||
border-color: #b8daff;
|
||||
}
|
||||
|
||||
|
|
@ -4935,7 +4952,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-secondary {
|
||||
color: #383d41;
|
||||
background-color: #e2e3e5;
|
||||
background: #e2e3e5 linear-gradient(180deg, #e6e7e9, #e2e3e5) repeat-x;
|
||||
border-color: #d6d8db;
|
||||
}
|
||||
|
||||
|
|
@ -4949,7 +4966,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-success {
|
||||
color: #155724;
|
||||
background-color: #d4edda;
|
||||
background: #d4edda linear-gradient(180deg, #daf0e0, #d4edda) repeat-x;
|
||||
border-color: #c3e6cb;
|
||||
}
|
||||
|
||||
|
|
@ -4963,7 +4980,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-info {
|
||||
color: #0c5460;
|
||||
background-color: #d1ecf1;
|
||||
background: #d1ecf1 linear-gradient(180deg, #d8eff3, #d1ecf1) repeat-x;
|
||||
border-color: #bee5eb;
|
||||
}
|
||||
|
||||
|
|
@ -4977,7 +4994,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-warning {
|
||||
color: #856404;
|
||||
background-color: #fff3cd;
|
||||
background: #fff3cd linear-gradient(180deg, #fff5d5, #fff3cd) repeat-x;
|
||||
border-color: #ffeeba;
|
||||
}
|
||||
|
||||
|
|
@ -4991,7 +5008,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-danger {
|
||||
color: #721c24;
|
||||
background-color: #f8d7da;
|
||||
background: #f8d7da linear-gradient(180deg, #f9dde0, #f8d7da) repeat-x;
|
||||
border-color: #f5c6cb;
|
||||
}
|
||||
|
||||
|
|
@ -5005,7 +5022,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-light {
|
||||
color: #818182;
|
||||
background-color: #fefefe;
|
||||
background: #fefefe linear-gradient(180deg, #fefefe, #fefefe) repeat-x;
|
||||
border-color: #fdfdfe;
|
||||
}
|
||||
|
||||
|
|
@ -5019,7 +5036,7 @@ a.badge-dark:focus, a.badge-dark.focus {
|
|||
|
||||
.alert-dark {
|
||||
color: #1b1e21;
|
||||
background-color: #d6d8d9;
|
||||
background: #d6d8d9 linear-gradient(180deg, #dcdedf, #d6d8d9) repeat-x;
|
||||
border-color: #c6c8ca;
|
||||
}
|
||||
|
||||
|
|
@ -6097,10 +6114,12 @@ a.close.disabled, a.disabled.mailbox-attachment-close {
|
|||
|
||||
.carousel-control-prev {
|
||||
left: 0;
|
||||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001));
|
||||
}
|
||||
|
||||
.carousel-control-next {
|
||||
right: 0;
|
||||
background: linear-gradient(270deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001));
|
||||
}
|
||||
|
||||
.carousel-control-prev-icon,
|
||||
|
|
@ -6368,6 +6387,38 @@ button.bg-dark:focus {
|
|||
background-color: #1d2124 !important;
|
||||
}
|
||||
|
||||
.bg-gradient-primary {
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-secondary {
|
||||
background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-success {
|
||||
background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-info {
|
||||
background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-warning {
|
||||
background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-danger {
|
||||
background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-light {
|
||||
background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-gradient-dark {
|
||||
background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x !important;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
|
@ -12101,7 +12152,7 @@ textarea.form-control.is-warning {
|
|||
|
||||
.custom-control-input.is-warning:checked ~ .custom-control-label::before {
|
||||
border-color: #ffce3a;
|
||||
background-color: #ffce3a;
|
||||
background: #ffce3a linear-gradient(180deg, #ffd558, #ffce3a) repeat-x;
|
||||
}
|
||||
|
||||
.custom-control-input.is-warning:focus ~ .custom-control-label::before {
|
||||
|
|
@ -12666,6 +12717,30 @@ textarea.form-control.is-warning {
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.card.maximized-card {
|
||||
z-index: 9999;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.card.maximized-card.was-collapsed .card-body {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.card.maximized-card [data-widget="collapse"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.card.maximized-card .card-header,
|
||||
.card.maximized-card .card-footer {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.card.collapsed-card .card-body,
|
||||
.card.collapsed-card .card-footer {
|
||||
display: none;
|
||||
|
|
@ -12693,6 +12768,10 @@ textarea.form-control.is-warning {
|
|||
border-left: 1px solid rgba(0, 0, 0, 0.125);
|
||||
}
|
||||
|
||||
html.maximized-card {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card > .overlay,
|
||||
.card > .loading-img,
|
||||
.overlay-wrapper > .overlay,
|
||||
|
|
@ -15659,50 +15738,107 @@ a.text-muted:hover {
|
|||
}
|
||||
|
||||
.bg-primary-gradient {
|
||||
background: #007bff;
|
||||
background: -o-linear-gradient(#3395ff, #007bff);
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-secondary-gradient {
|
||||
background: #6c757d;
|
||||
background: -o-linear-gradient(#868e96, #6c757d);
|
||||
background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-success-gradient {
|
||||
background: #28a745;
|
||||
background: -o-linear-gradient(#34ce57, #28a745);
|
||||
background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-info-gradient {
|
||||
background: #17a2b8;
|
||||
background: -o-linear-gradient(#1fc8e3, #17a2b8);
|
||||
background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-warning-gradient {
|
||||
background: #ffc107;
|
||||
background: -o-linear-gradient(#ffce3a, #ffc107);
|
||||
background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.bg-danger-gradient {
|
||||
background: #dc3545;
|
||||
background: -o-linear-gradient(#e4606d, #dc3545);
|
||||
background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-light-gradient {
|
||||
background: #f8f9fa;
|
||||
background: -o-linear-gradient(white, #f8f9fa);
|
||||
background: #f8f9fa linear-gradient(180deg, #f9fafb, #f8f9fa) repeat-x;
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.bg-dark-gradient {
|
||||
background: #343a40;
|
||||
background: -o-linear-gradient(#4b545c, #343a40);
|
||||
background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-blue-gradient {
|
||||
background: #007bff linear-gradient(180deg, #268fff, #007bff) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-indigo-gradient {
|
||||
background: #6610f2 linear-gradient(180deg, #7d34f4, #6610f2) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-purple-gradient {
|
||||
background: #6f42c1 linear-gradient(180deg, #855eca, #6f42c1) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-pink-gradient {
|
||||
background: #e83e8c linear-gradient(180deg, #eb5b9d, #e83e8c) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-red-gradient {
|
||||
background: #dc3545 linear-gradient(180deg, #e15361, #dc3545) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-orange-gradient {
|
||||
background: #fd7e14 linear-gradient(180deg, #fd9137, #fd7e14) repeat-x;
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.bg-yellow-gradient {
|
||||
background: #ffc107 linear-gradient(180deg, #ffca2c, #ffc107) repeat-x;
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.bg-green-gradient {
|
||||
background: #28a745 linear-gradient(180deg, #48b461, #28a745) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-teal-gradient {
|
||||
background: #20c997 linear-gradient(180deg, #41d1a7, #20c997) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-cyan-gradient {
|
||||
background: #17a2b8 linear-gradient(180deg, #3ab0c3, #17a2b8) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-white-gradient {
|
||||
background: #ffffff linear-gradient(180deg, white, #ffffff) repeat-x;
|
||||
color: #1F2D3D;
|
||||
}
|
||||
|
||||
.bg-gray-gradient {
|
||||
background: #6c757d linear-gradient(180deg, #828a91, #6c757d) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.bg-gray-dark-gradient {
|
||||
background: #343a40 linear-gradient(180deg, #52585d, #343a40) repeat-x;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -15738,20 +15874,6 @@ a.text-muted:hover {
|
|||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.list-unstyled, .chart-legend, .contacts-list, .users-list, .mailbox-attachments {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-group-unbordered > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.flat {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
|
@ -15766,6 +15888,20 @@ a.text-muted:hover {
|
|||
font-size: 16px;
|
||||
}
|
||||
|
||||
.list-unstyled, .chart-legend, .contacts-list, .users-list, .mailbox-attachments {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list-group-unbordered > .list-group-item {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-radius: 0;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
font-size: 15px;
|
||||
padding: 10px 4px;
|
||||
|
|
|
|||
2
dist/css/adminlte.css.map
vendored
2
dist/css/adminlte.css.map
vendored
File diff suppressed because one or more lines are too long
2
dist/css/adminlte.min.css
vendored
2
dist/css/adminlte.min.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/adminlte.min.css.map
vendored
2
dist/css/adminlte.min.css.map
vendored
File diff suppressed because one or more lines are too long
58
dist/js/adminlte.js
vendored
58
dist/js/adminlte.js
vendored
|
|
@ -689,11 +689,14 @@
|
|||
var Event = {
|
||||
EXPANDED: "expanded" + EVENT_KEY,
|
||||
COLLAPSED: "collapsed" + EVENT_KEY,
|
||||
MAXIMIZED: "maximized" + EVENT_KEY,
|
||||
MINIMIZED: "minimized" + EVENT_KEY,
|
||||
REMOVED: "removed" + EVENT_KEY
|
||||
};
|
||||
var 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',
|
||||
|
|
@ -704,8 +707,12 @@
|
|||
};
|
||||
var ClassName = {
|
||||
COLLAPSED: 'collapsed-card',
|
||||
WAS_COLLAPSED: 'was-collapsed',
|
||||
MAXIMIZED: 'maximized-card',
|
||||
COLLAPSE_ICON: 'fa-minus',
|
||||
EXPAND_ICON: 'fa-plus'
|
||||
EXPAND_ICON: 'fa-plus',
|
||||
MAXIMIZE_ICON: 'fa-expand',
|
||||
MINIMIZE_ICON: 'fa-compress'
|
||||
};
|
||||
var Default = {
|
||||
animationSpeed: 'normal',
|
||||
|
|
@ -767,6 +774,48 @@
|
|||
}
|
||||
|
||||
this.collapse();
|
||||
};
|
||||
|
||||
_proto.toggleMaximize = function 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
|
||||
;
|
||||
|
||||
|
|
@ -822,6 +871,13 @@
|
|||
|
||||
Widget._jQueryInterface.call($(this), 'remove');
|
||||
});
|
||||
$(document).on('click', Selector.DATA_MAXIMIZE, function (event) {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
Widget._jQueryInterface.call($(this), 'toggleMaximize');
|
||||
});
|
||||
/**
|
||||
* jQuery API
|
||||
* ====================================================
|
||||
|
|
|
|||
2
dist/js/adminlte.js.map
vendored
2
dist/js/adminlte.js.map
vendored
File diff suppressed because one or more lines are too long
2
dist/js/adminlte.min.js
vendored
2
dist/js/adminlte.min.js
vendored
File diff suppressed because one or more lines are too long
2
dist/js/adminlte.min.js.map
vendored
2
dist/js/adminlte.min.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -859,9 +859,10 @@
|
|||
|
||||
<!-- =========================================================== -->
|
||||
<h4 class="mb-2 mt-4">Cards</h4>
|
||||
<h5 class="mb-2">Abilities</h5>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-default collapsed-card">
|
||||
<div class="card card-primary collapsed-card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
|
||||
|
|
@ -882,6 +883,26 @@
|
|||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
|
||||
|
|
@ -900,10 +921,122 @@
|
|||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<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 type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
|
||||
<button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Loading state</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<!-- Loading (remove the following to stop the loading)-->
|
||||
<div class="overlay">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
</div>
|
||||
<!-- end loading -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
|
||||
<h5 class="mb-2">Colors Variations</h5>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Collapsable</h3>
|
||||
<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>
|
||||
|
|
@ -923,17 +1056,12 @@
|
|||
<div class="col-md-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Loading state</h3>
|
||||
<h3 class="card-title">Danger Outline</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<!-- Loading (remove the following to stop the loading)-->
|
||||
<div class="overlay">
|
||||
<i class="fas fa-sync-alt fa-spin"></i>
|
||||
</div>
|
||||
<!-- end loading -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
|
|
@ -941,16 +1069,14 @@
|
|||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card card-info collapsed-card cardutline">
|
||||
<div class="card card-outline card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Expandable</h3>
|
||||
<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-plus"></i>
|
||||
<button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
|
|
@ -965,13 +1091,12 @@
|
|||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-sucress cardutline">
|
||||
<div class="card card-outline card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Removable</h3>
|
||||
<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-widget="remove"><i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
|
|
@ -986,7 +1111,7 @@
|
|||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-warring cardutline">
|
||||
<div class="card card-outline card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Warning Outline</h3>
|
||||
|
||||
|
|
@ -1006,7 +1131,7 @@
|
|||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card card-darger cardutline">
|
||||
<div class="card card-outline card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Danger Outline</h3>
|
||||
</div>
|
||||
|
|
@ -1021,7 +1146,82 @@
|
|||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<!-- =========================================================== -->
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-primary">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-success">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-warning">
|
||||
<div class="card-header">
|
||||
<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>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-3">
|
||||
<div class="card bg-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Danger</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
|
|
|
|||
Loading…
Reference in a new issue