From e737b9b248c986bf893d9ad63acad4c50ed1ae69 Mon Sep 17 00:00:00 2001 From: codecalm Date: Thu, 17 Dec 2020 01:16:43 +0100 Subject: [PATCH] modal improvements --- src/pages/_docs/modals.md | 11 +++++++- src/pages/_includes/parts/modals/danger.html | 18 +++++++++++++ src/pages/_includes/parts/modals/info.html | 13 ---------- src/pages/_includes/parts/modals/success.html | 26 ++++++++++--------- src/pages/modals.html | 6 +++-- src/scss/_variables.scss | 2 ++ src/scss/ui/_icons.scss | 7 +++++ src/scss/ui/_modals.scss | 10 +++++++ 8 files changed, 65 insertions(+), 28 deletions(-) create mode 100644 src/pages/_includes/parts/modals/danger.html delete mode 100644 src/pages/_includes/parts/modals/info.html diff --git a/src/pages/_docs/modals.md b/src/pages/_docs/modals.md index 240792b67..73223d777 100644 --- a/src/pages/_docs/modals.md +++ b/src/pages/_docs/modals.md @@ -21,7 +21,16 @@ menu: docs.components.modals {% capture code %}
- {% include parts/modals/small.html %} + {% include parts/modals/danger.html %} +
+
+{% endcapture %} +{% include example.html code=code modal=true %} + +{% capture code %} +
+
+ {% include parts/modals/success.html %}
{% endcapture %} diff --git a/src/pages/_includes/parts/modals/danger.html b/src/pages/_includes/parts/modals/danger.html new file mode 100644 index 000000000..a10f0d617 --- /dev/null +++ b/src/pages/_includes/parts/modals/danger.html @@ -0,0 +1,18 @@ +{% include ui/modal/close.html %} +
+
+ + {% include ui/icon.html icon="alert-triangle" color="danger" size="lg" class="mb-2" %} + +

Are you sure?

+
Do you really want to remove 84 files? What you've done cannot be undone.
+
+ +
+
+
+
{% include ui/button.html dismiss=true text="Cancel" block=true %}
+
{% include ui/button.html color="danger" dismiss=true text="Delete 84 items" block=true %}
+
+
+
\ No newline at end of file diff --git a/src/pages/_includes/parts/modals/info.html b/src/pages/_includes/parts/modals/info.html deleted file mode 100644 index 0e07471af..000000000 --- a/src/pages/_includes/parts/modals/info.html +++ /dev/null @@ -1,13 +0,0 @@ -{% include ui/modal/close.html %} -
- - {% include ui/icon.html icon="circle-check" color="green" class="mb-4" %} - -

Payment succedeed

-
Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
-
- -
- {% 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 %} -
\ No newline at end of file diff --git a/src/pages/_includes/parts/modals/success.html b/src/pages/_includes/parts/modals/success.html index 69b318af0..36dc36d46 100644 --- a/src/pages/_includes/parts/modals/success.html +++ b/src/pages/_includes/parts/modals/success.html @@ -1,16 +1,18 @@ -
-
-
- {% include ui/avatar.html color="green" icon="check" class="avatar-rounded" %} -
-

Payment successful

-
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.
-
+{% include ui/modal/close.html %} +
+
-
-
-
Cancel payment
-
Go to Application
+ {% include ui/icon.html icon="circle-check" color="green" size="lg" class="mb-2" %} + +

Payment succedeed

+
Your payment of $290 has been successfully submitted. Your invoice has been sent to support@tabler.io.
+
+ +
+
+
+
{% include ui/button.html dismiss=true text="Go to dashboard" block=true %}
+
{% include ui/button.html color="success" dismiss=true text="View invoice" block=true %}
\ No newline at end of file diff --git a/src/pages/modals.html b/src/pages/modals.html index 505014de3..850a7162b 100644 --- a/src/pages/modals.html +++ b/src/pages/modals.html @@ -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" %}
@@ -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" %} \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index d496c0e6b..b7813a0b6 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -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; diff --git a/src/scss/ui/_icons.scss b/src/scss/ui/_icons.scss index af199167d..5de6b15a0 100644 --- a/src/scss/ui/_icons.scss +++ b/src/scss/ui/_icons.scss @@ -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; } \ No newline at end of file diff --git a/src/scss/ui/_modals.scss b/src/scss/ui/_modals.scss index b84febe86..c14f5842a 100644 --- a/src/scss/ui/_modals.scss +++ b/src/scss/ui/_modals.scss @@ -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;