mirror of https://github.com/ColorlibHQ/AdminLTE
added notification plugins aka toasts (sweetalert2 & toastr)
- added sweetalert2 & toastr to package.json & build/npm/Plugins.js - added plugin related scss fixes and created files per plugin - updated "Modals" demo page to "Modals & Alerts" & renamed link on all demo files - rebuild dist filespull/2133/head
REJack
parent
0b96c5ca71
commit
66f15c4f3d
|
|
@ -182,11 +182,21 @@ const Plugins = [
|
|||
from: 'node_modules/select2/dist/',
|
||||
to : 'plugins/select2'
|
||||
},
|
||||
// Select2
|
||||
// Sparklines
|
||||
{
|
||||
from: 'node_modules/sparklines/source/',
|
||||
to : 'plugins/sparklines'
|
||||
},
|
||||
// SweetAlert2
|
||||
{
|
||||
from: 'node_modules/sweetalert2/dist/',
|
||||
to : 'plugins/sweetalert2'
|
||||
},
|
||||
// Toastr
|
||||
{
|
||||
from: 'node_modules/toastr/build/',
|
||||
to : 'plugins/toastr'
|
||||
},
|
||||
|
||||
|
||||
// // Doc Assets
|
||||
|
|
|
|||
|
|
@ -58,6 +58,8 @@
|
|||
@import "plugins/icheck-bootstrap";
|
||||
@import "plugins/mapael";
|
||||
@import "plugins/jqvmap";
|
||||
@import "plugins/sweetalert2";
|
||||
@import "plugins/toastr";
|
||||
// Miscellaneous
|
||||
// ---------------------------------------------------
|
||||
@import "miscellaneous";
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
/*
|
||||
* Plugin: SweetAlert2
|
||||
* ---------------
|
||||
*/
|
||||
|
||||
// Icon Colors
|
||||
.swal2-icon {
|
||||
&.swal2-info {
|
||||
color: $info;
|
||||
border-color: ligthen($info, 20%);
|
||||
}
|
||||
&.swal2-warning {
|
||||
color: $warning;
|
||||
border-color: ligthen($warning, 20%);
|
||||
}
|
||||
&.swal2-error {
|
||||
color: $danger;
|
||||
border-color: ligthen($danger, 20%);
|
||||
}
|
||||
&.swal2-question {
|
||||
color: $secondary;
|
||||
border-color: ligthen($secondary, 20%);
|
||||
}
|
||||
&.swal2-success {
|
||||
color: $success;
|
||||
border-color: ligthen($success, 20%);
|
||||
|
||||
.swal2-success-ring {
|
||||
border-color: ligthen($success, 20%);
|
||||
}
|
||||
[class^="swal2-success-line"] {
|
||||
background-color: $success;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
* Plugin: Toastr
|
||||
* ---------------
|
||||
*/
|
||||
|
||||
// Background to FontAwesome Icons
|
||||
// #toast-container > .toast {
|
||||
// background-image: none !important;
|
||||
// }
|
||||
// #toast-container > .toast .toast-message:before {
|
||||
// font-family: 'Font Awesome 5 Free';
|
||||
// font-size: 24px;
|
||||
// font-weight: 900;
|
||||
// line-height: 18px;
|
||||
// float: left;
|
||||
// color: #FFF;
|
||||
// padding-right: 0.5em;
|
||||
// margin: auto 0.5em auto -1.5em;
|
||||
// }
|
||||
// #toast-container > .toast-warning .toast-message:before {
|
||||
// content: "\f06a";
|
||||
// }
|
||||
// #toast-container > .toast-error .toast-message:before {
|
||||
// content: "\f071";
|
||||
// }
|
||||
// #toast-container > .toast-info .toast-message:before {
|
||||
// content: "\f05a";
|
||||
// }
|
||||
// #toast-container > .toast-success .toast-message:before {
|
||||
// content: "\f058";
|
||||
// }
|
||||
|
||||
|
||||
// Background color
|
||||
.toast {
|
||||
background-color: $primary;
|
||||
}
|
||||
.toast-success {
|
||||
background-color: $success;
|
||||
}
|
||||
.toast-error {
|
||||
background-color: $danger;
|
||||
}
|
||||
.toast-info {
|
||||
background-color: $info;
|
||||
}
|
||||
.toast-warning {
|
||||
background-color: $warning;
|
||||
}
|
||||
|
|
@ -15528,6 +15528,67 @@ html.maximized-card {
|
|||
background-color: #e7e7e7;
|
||||
}
|
||||
|
||||
/*
|
||||
* Plugin: SweetAlert2
|
||||
* ---------------
|
||||
*/
|
||||
.swal2-icon.swal2-info {
|
||||
color: #17a2b8;
|
||||
border-color: ligthen(#17a2b8, 20%);
|
||||
}
|
||||
|
||||
.swal2-icon.swal2-warning {
|
||||
color: #ffc107;
|
||||
border-color: ligthen(#ffc107, 20%);
|
||||
}
|
||||
|
||||
.swal2-icon.swal2-error {
|
||||
color: #dc3545;
|
||||
border-color: ligthen(#dc3545, 20%);
|
||||
}
|
||||
|
||||
.swal2-icon.swal2-question {
|
||||
color: #6c757d;
|
||||
border-color: ligthen(#6c757d, 20%);
|
||||
}
|
||||
|
||||
.swal2-icon.swal2-success {
|
||||
color: #28a745;
|
||||
border-color: ligthen(#28a745, 20%);
|
||||
}
|
||||
|
||||
.swal2-icon.swal2-success .swal2-success-ring {
|
||||
border-color: ligthen(#28a745, 20%);
|
||||
}
|
||||
|
||||
.swal2-icon.swal2-success [class^="swal2-success-line"] {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
/*
|
||||
* Plugin: Toastr
|
||||
* ---------------
|
||||
*/
|
||||
.toast {
|
||||
background-color: #007bff;
|
||||
}
|
||||
|
||||
.toast-success {
|
||||
background-color: #28a745;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
background-color: #dc3545;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
background-color: #17a2b8;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
background-color: #ffc107;
|
||||
}
|
||||
|
||||
/*
|
||||
* General: Miscellaneous
|
||||
* ----------------------
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -330,7 +330,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="pages/UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -317,7 +317,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="pages/UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -327,7 +327,7 @@ to get the desired effect
|
|||
<li class="nav-item">
|
||||
<a href="pages/UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -12920,6 +12920,11 @@
|
|||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"sweetalert2": {
|
||||
"version": "8.12.1",
|
||||
"resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.12.1.tgz",
|
||||
"integrity": "sha512-C+c/lB95JjePFW9n5cEghKnk3z0sbeOfbt3yzV4QlbBLx+Wh/LzVIb59QTvixHEhvTiSkUMgSY30Uj40hU3MHw=="
|
||||
},
|
||||
"symbol-observable": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.0.1.tgz",
|
||||
|
|
@ -13125,6 +13130,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"toastr": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/toastr/-/toastr-2.1.4.tgz",
|
||||
"integrity": "sha1-i0O+ZPudDEFIcURvLbjoyk6V8YE=",
|
||||
"requires": {
|
||||
"jquery": ">=1.12.0"
|
||||
}
|
||||
},
|
||||
"toidentifier": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
|
||||
|
|
|
|||
|
|
@ -76,7 +76,9 @@
|
|||
"select2": "^4.0.7",
|
||||
"sparklines": "^1.2.0",
|
||||
"summernote": "^0.8.12",
|
||||
"tempusdominus-bootstrap-4": "^5.1.2"
|
||||
"sweetalert2": "^8.12.1",
|
||||
"tempusdominus-bootstrap-4": "^5.1.2",
|
||||
"toastr": "^2.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.4.4",
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -353,7 +353,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,17 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>AdminLTE 3 | Modals</title>
|
||||
<title>AdminLTE 3 | Modals & Alerts</title>
|
||||
<!-- Tell the browser to be responsive to screen width -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
|
||||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
<!-- SweetAlert2 -->
|
||||
<link rel="stylesheet" href="../../plugins/sweetalert2/sweetalert2.min.css">
|
||||
<!-- Toastr -->
|
||||
<link rel="stylesheet" href="../../plugins/toastr/toastr.min.css">
|
||||
<!-- Theme style -->
|
||||
<link rel="stylesheet" href="../../dist/css/adminlte.min.css">
|
||||
<!-- Google Font: Source Sans Pro -->
|
||||
|
|
@ -319,7 +323,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link active">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -538,14 +542,14 @@
|
|||
<div class="row mb-2">
|
||||
<div class="col-sm-6">
|
||||
<h1>
|
||||
Modals
|
||||
Modals & Alerts
|
||||
<small>new</small>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<ol class="breadcrumb float-sm-right">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active">Modals</li>
|
||||
<li class="breadcrumb-item active">Modals & Alerts</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -610,6 +614,63 @@
|
|||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
|
||||
<div class="card card-success card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fas fa-edit"></i>
|
||||
SweetAlert2 Examples
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-success swalDefaultSuccess">
|
||||
Launch Success Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-info swalDefaultInfo">
|
||||
Launch Info Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger swalDefaultError">
|
||||
Launch Error Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning swalDefaultWarning">
|
||||
Launch Warning Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-default swalDefaultQuestion">
|
||||
Launch Question Toast
|
||||
</button>
|
||||
<div class="text-muted mt-3">
|
||||
For more examples look at <a href="https://sweetalert2.github.io/">https://sweetalert2.github.io/</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
|
||||
<div class="card card-success card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">
|
||||
<i class="fas fa-edit"></i>
|
||||
Toastr Examples
|
||||
</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button type="button" class="btn btn-success toastrDefaultSuccess">
|
||||
Launch Success Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-info toastrDefaultInfo">
|
||||
Launch Info Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger toastrDefaultError">
|
||||
Launch Error Toast
|
||||
</button>
|
||||
<button type="button" class="btn btn-warning toastrDefaultWarning">
|
||||
Launch Warning Toast
|
||||
</button>
|
||||
<div class="text-muted mt-3">
|
||||
For more examples look at <a href="https://codeseven.github.io/toastr/">https://codeseven.github.io/toastr/</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
|
|
@ -893,9 +954,69 @@
|
|||
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- FastClick -->
|
||||
<script src="../../plugins/fastclick/fastclick.js"></script>
|
||||
<!-- SweetAlert2 -->
|
||||
<script src="../../plugins/sweetalert2/sweetalert2.min.js"></script>
|
||||
<!-- Toastr -->
|
||||
<script src="../../plugins/toastr/toastr.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="../../dist/js/adminlte.min.js"></script>
|
||||
<!-- AdminLTE for demo purposes -->
|
||||
<script src="../../dist/js/demo.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3000
|
||||
});
|
||||
|
||||
$('.swalDefaultSuccess').click(function() {
|
||||
Toast.fire({
|
||||
type: 'success',
|
||||
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
});
|
||||
$('.swalDefaultInfo').click(function() {
|
||||
Toast.fire({
|
||||
type: 'info',
|
||||
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
});
|
||||
$('.swalDefaultError').click(function() {
|
||||
Toast.fire({
|
||||
type: 'error',
|
||||
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
});
|
||||
$('.swalDefaultWarning').click(function() {
|
||||
Toast.fire({
|
||||
type: 'warning',
|
||||
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
});
|
||||
$('.swalDefaultQuestion').click(function() {
|
||||
Toast.fire({
|
||||
type: 'question',
|
||||
title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.'
|
||||
})
|
||||
});
|
||||
|
||||
$('.toastrDefaultSuccess').click(function() {
|
||||
toastr.success('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
||||
});
|
||||
$('.toastrDefaultInfo').click(function() {
|
||||
toastr.info('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
||||
});
|
||||
$('.toastrDefaultError').click(function() {
|
||||
toastr.error('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
||||
});
|
||||
$('.toastrDefaultWarning').click(function() {
|
||||
toastr.warning('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.')
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -324,7 +324,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -325,7 +325,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -348,7 +348,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -330,7 +330,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -321,7 +321,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -322,7 +322,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="../UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@
|
|||
<li class="nav-item">
|
||||
<a href="UI/modals.html" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Modals</p>
|
||||
<p>Modals & Alerts</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,228 @@
|
|||
.toast-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.toast-message {
|
||||
-ms-word-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.toast-message a,
|
||||
.toast-message label {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
.toast-message a:hover {
|
||||
color: #CCCCCC;
|
||||
text-decoration: none;
|
||||
}
|
||||
.toast-close-button {
|
||||
position: relative;
|
||||
right: -0.3em;
|
||||
top: -0.3em;
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
-webkit-text-shadow: 0 1px 0 #ffffff;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
line-height: 1;
|
||||
}
|
||||
.toast-close-button:hover,
|
||||
.toast-close-button:focus {
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
.rtl .toast-close-button {
|
||||
left: -0.3em;
|
||||
float: left;
|
||||
right: 0.3em;
|
||||
}
|
||||
/*Additional properties for button version
|
||||
iOS requires the button element instead of an anchor tag.
|
||||
If you want the anchor version, it requires `href="#"`.*/
|
||||
button.toast-close-button {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.toast-top-center {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-bottom-center {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-top-full-width {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-bottom-full-width {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.toast-top-left {
|
||||
top: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
.toast-top-right {
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
.toast-bottom-right {
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
}
|
||||
.toast-bottom-left {
|
||||
bottom: 12px;
|
||||
left: 12px;
|
||||
}
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
z-index: 999999;
|
||||
pointer-events: none;
|
||||
/*overrides*/
|
||||
}
|
||||
#toast-container * {
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#toast-container > div {
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
overflow: hidden;
|
||||
margin: 0 0 6px;
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 300px;
|
||||
-moz-border-radius: 3px 3px 3px 3px;
|
||||
-webkit-border-radius: 3px 3px 3px 3px;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
background-position: 15px center;
|
||||
background-repeat: no-repeat;
|
||||
-moz-box-shadow: 0 0 12px #999999;
|
||||
-webkit-box-shadow: 0 0 12px #999999;
|
||||
box-shadow: 0 0 12px #999999;
|
||||
color: #FFFFFF;
|
||||
opacity: 0.8;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
|
||||
filter: alpha(opacity=80);
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
direction: rtl;
|
||||
padding: 15px 50px 15px 15px;
|
||||
background-position: right 15px center;
|
||||
}
|
||||
#toast-container > div:hover {
|
||||
-moz-box-shadow: 0 0 12px #000000;
|
||||
-webkit-box-shadow: 0 0 12px #000000;
|
||||
box-shadow: 0 0 12px #000000;
|
||||
opacity: 1;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
|
||||
filter: alpha(opacity=100);
|
||||
cursor: pointer;
|
||||
}
|
||||
#toast-container > .toast-info {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container > .toast-error {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container > .toast-success {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
|
||||
}
|
||||
#toast-container > .toast-warning {
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
|
||||
}
|
||||
#toast-container.toast-top-center > div,
|
||||
#toast-container.toast-bottom-center > div {
|
||||
width: 300px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
#toast-container.toast-top-full-width > div,
|
||||
#toast-container.toast-bottom-full-width > div {
|
||||
width: 96%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.toast {
|
||||
background-color: #030303;
|
||||
}
|
||||
.toast-success {
|
||||
background-color: #51A351;
|
||||
}
|
||||
.toast-error {
|
||||
background-color: #BD362F;
|
||||
}
|
||||
.toast-info {
|
||||
background-color: #2F96B4;
|
||||
}
|
||||
.toast-warning {
|
||||
background-color: #F89406;
|
||||
}
|
||||
.toast-progress {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 4px;
|
||||
background-color: #000000;
|
||||
opacity: 0.4;
|
||||
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
/*Responsive Design*/
|
||||
@media all and (max-width: 240px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 11em;
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
padding: 8px 50px 8px 8px;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
#toast-container .rtl .toast-close-button {
|
||||
left: -0.2em;
|
||||
right: 0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 241px) and (max-width: 480px) {
|
||||
#toast-container > div {
|
||||
padding: 8px 8px 8px 50px;
|
||||
width: 18em;
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
padding: 8px 50px 8px 8px;
|
||||
}
|
||||
#toast-container .toast-close-button {
|
||||
right: -0.2em;
|
||||
top: -0.2em;
|
||||
}
|
||||
#toast-container .rtl .toast-close-button {
|
||||
left: -0.2em;
|
||||
right: 0.2em;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 481px) and (max-width: 768px) {
|
||||
#toast-container > div {
|
||||
padding: 15px 15px 15px 50px;
|
||||
width: 25em;
|
||||
}
|
||||
#toast-container > div.rtl {
|
||||
padding: 15px 50px 15px 15px;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue