modal improvements

src/pages/_docs/modals.md

@@ -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 %}

src/pages/_includes/parts/modals/danger.html

@@ -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>

src/pages/_includes/parts/modals/success.html

@@ -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">
+
+	{% 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="mt-5">
-		<div class="btn-list justify-content-end">
-			<div class="btn">Cancel payment</div>
-			<div class="btn btn-success">Go to Application</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>

src/pages/modals.html

@@ -13,7 +13,8 @@
 			{% 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 @@
 {% 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" %}

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;

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;
 }

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;