leviathonbeast/adminkit
1
0
Fork 0
mirror of https://github.com/adminkit/adminkit.git synced 2026-03-31 19:57:44 +01:00
Code Issues Packages Projects Releases Wiki Activity

Replace close buttons with btn-close

Browse Source
This commit is contained in:
Paul Laros
2020-11-07 19:21:03 +01:00
parent 6d73c13b64
commit f13102fac7
2 changed files with 43 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/ui-alerts.html
+28 -84
View File
@@ -314,49 +314,37 @@
<div class="card-body">
<div class="mb-3">
<div class="alert alert-primary alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Hello there!</strong> A simple primary alert—check it out!
</div>
</div>
<div class="alert alert-secondary alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Hello there!</strong> A simple secondary alert—check it out!
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Hello there!</strong> A simple success alert—check it out!
</div>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Hello there!</strong> A simple danger alert—check it out!
</div>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Hello there!</strong> A simple warning alert—check it out!
</div>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<strong>Hello there!</strong> A simple info alert—check it out!
</div>
@@ -375,9 +363,7 @@
<div class="card-body">
<div class="mb-3">
<div class="alert alert-primary alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -386,9 +372,7 @@
</div>
</div>
<div class="alert alert-secondary alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -397,9 +381,7 @@
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -408,9 +390,7 @@
</div>
</div>
<div class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -419,9 +399,7 @@
</div>
</div>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -430,9 +408,7 @@
</div>
</div>
<div class="alert alert-info alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -454,9 +430,7 @@
<div class="card-body">
<div class="mb-3">
<div class="alert alert-primary alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -465,9 +439,7 @@
</div>
</div>
<div class="alert alert-secondary alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -476,9 +448,7 @@
</div>
</div>
<div class="alert alert-success alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -487,9 +457,7 @@
</div>
</div>
<div class="alert alert-danger alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -498,9 +466,7 @@
</div>
</div>
<div class="alert alert-warning alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -509,9 +475,7 @@
</div>
</div>
<div class="alert alert-info alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -533,9 +497,7 @@
<div class="card-body">
<div class="mb-3">
<div class="alert alert-primary alert-outline-coloured alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -544,9 +506,7 @@
</div>
</div>
<div class="alert alert-secondary alert-outline-coloured alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -555,9 +515,7 @@
</div>
</div>
<div class="alert alert-success alert-outline-coloured alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -566,9 +524,7 @@
</div>
</div>
<div class="alert alert-danger alert-outline-coloured alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -577,9 +533,7 @@
</div>
</div>
<div class="alert alert-warning alert-outline-coloured alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -588,9 +542,7 @@
</div>
</div>
<div class="alert alert-info alert-outline-coloured alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-icon">
<i class="far fa-fw fa-bell"></i>
</div>
@@ -612,9 +564,7 @@
<div class="card-body">
<div class="mb-3">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an
@@ -627,9 +577,7 @@
<div class="mb-3">
<div class="alert alert-primary alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an
@@ -652,9 +600,7 @@
<div class="card-body">
<div class="mb-3">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an
@@ -670,9 +616,7 @@
<div class="mb-3">
<div class="alert alert-primary alert-outline alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
<div class="alert-message">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an
static/ui-modals.html
+15 -45
View File
@@ -323,9 +323,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -347,9 +345,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -371,9 +367,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -395,9 +389,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Default modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -432,9 +424,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -456,9 +446,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -480,9 +468,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -504,9 +490,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Colored modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -541,9 +525,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -565,9 +547,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -589,9 +569,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -613,9 +591,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Centered modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -650,9 +626,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Small modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -674,9 +648,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Medium modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
@@ -698,9 +670,7 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body m-3">
<p class="mb-0">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>