Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-26 11:16:12 +04:00
Code Issues Projects Releases Wiki Activity

modal improvements

Browse Source
This commit is contained in:
codecalm
2020-12-17 01:16:43 +01:00
parent 9d4314a58a
commit e737b9b248
8 changed files with 65 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/_docs/modals.md
View File

@@ -21,7 +21,16 @@ menu: docs.components.modals
{% capture code %}
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
{% include parts/modals/small.html %}
{% include parts/modals/danger.html %}
</div>
</div>
{% endcapture %}
{% include example.html code=code modal=true %}
{% capture code %}
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
{% include parts/modals/success.html %}
</div>
</div>
{% endcapture %}

18
src/pages/_includes/parts/modals/danger.html Normal file
View File

@@ -0,0 +1,18 @@
{% include ui/modal/close.html %}
<div class="modal-status bg-danger"></div>
<div class="modal-body text-center py-4">
{% include ui/icon.html icon="alert-triangle" color="danger" size="lg" class="mb-2" %}
<h3>Are you sure?</h3>
<div class="text-muted">Do you really want to remove 84 files? What you've done cannot be undone.</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">{% include ui/button.html dismiss=true text="Cancel" block=true %}</div>
<div class="col">{% include ui/button.html color="danger" dismiss=true text="Delete 84 items" block=true %}</div>
</div>
</div>
</div>

13
src/pages/_includes/parts/modals/info.html
View File

@@ -1,13 +0,0 @@
{% include ui/modal/close.html %}
<div class="modal-body text-center py-5">
{% include ui/icon.html icon="circle-check" color="green" class="mb-4" %}
<h3>Payment succedeed</h3>
<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
</div>
<div class="modal-footer">
{% include ui/button.html color="primary" dismiss=true text="View invoice" block=true %}
{% include ui/button.html color="white" dismiss=true text="Go to dashboard" block=true %}
</div>

26
src/pages/_includes/parts/modals/success.html
View File

@@ -1,16 +1,18 @@
<div class="modal-body">
<div class="text-center">
<div class="mb">
{% include ui/avatar.html color="green" icon="check" class="avatar-rounded" %}
</div>
<h3>Payment successful</h3>
<div class="text-muted">Your payment was successful! If you paid via PayPal, you will receive a receipt from both IT Training and PayPal. If you paid via a departmental account, the account you indicated will be charged.</div>
</div>
{% include ui/modal/close.html %}
<div class="modal-status bg-success"></div>
<div class="modal-body text-center py-4">
<div class="mt-5">
<div class="btn-list justify-content-end">
<div class="btn">Cancel payment</div>
<div class="btn btn-success">Go to Application</div>
{% include ui/icon.html icon="circle-check" color="green" size="lg" class="mb-2" %}
<h3>Payment succedeed</h3>
<div class="text-muted">Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.</div>
</div>
<div class="modal-footer">
<div class="w-100">
<div class="row">
<div class="col">{% include ui/button.html dismiss=true text="Go to dashboard" block=true %}</div>
<div class="col">{% include ui/button.html color="success" dismiss=true text="View invoice" block=true %}</div>
</div>
</div>
</div>

6
src/pages/modals.html
View File

@@ -13,7 +13,8 @@ menu: base.modals
{% include ui/button.html text="Full width modal" modal-id="full-width" %}
{% include ui/button.html text="Scrollable modal" modal-id="scrollable" %}
{% include ui/button.html text="Modal with form" modal-id="report" %}
{% include ui/button.html text="Info modal" modal-id="info" %}
{% include ui/button.html text="Success modal" modal-id="success" %}
{% include ui/button.html text="Danger modal" modal-id="danger" %}
{% include ui/button.html text="Modal with simple form" modal-id="team" %}
</div>
@@ -26,5 +27,6 @@ menu: base.modals
{% include ui/modal.html modal-id="full-width" size="full-width" %}
{% include ui/modal.html modal-id="scrollable" scrollable=true %}
{% include ui/modal.html modal-id="report" size="lg" %}
{% include ui/modal.html modal-id="info" size="sm" %}
{% include ui/modal.html modal-id="success" size="sm" %}
{% include ui/modal.html modal-id="danger" size="sm" %}
{% include ui/modal.html modal-id="team" %}

2
src/scss/_variables.scss
View File

@@ -382,6 +382,8 @@ $modal-inner-padding: 1.5rem !default;
$modal-footer-border-width: 0 !default;
$modal-footer-margin-between: .75rem !default;
$modal-status-size: $border-width-wide !default;
$modal-xl: 1140px !default;
$modal-lg: 720px !default;
$modal-md: 540px !default;

7
src/scss/ui/_icons.scss
View File

@@ -26,4 +26,11 @@
.icon-md {
width: 2.5rem;
height: 2.5rem;
stroke-width: 1;
}
.icon-lg {
width: 3.5rem;
height: 3.5rem;
stroke-width: 1;
}

10
src/scss/ui/_modals.scss
View File

@@ -23,6 +23,16 @@
}
}
.modal-status {
position: absolute;
top: 0;
left: 0;
right: 0;
height: $modal-status-size;
background: $text-muted;
border-radius: $modal-content-border-radius $modal-content-border-radius 0 0;
}
.modal-header {
align-items: center;
min-height: $modal-header-height;