From 08b3ebc018e4422f387f03ec5c1018ab58edbeac Mon Sep 17 00:00:00 2001 From: zuramai Date: Tue, 9 Aug 2022 10:29:08 +0700 Subject: [PATCH] feat: component toasts page --- src/assets/js/pages/component-toasts.js | 9 +++ src/assets/scss/_variables.scss | 8 +- src/assets/scss/themes/dark/_mazer-dark.scss | 3 + .../scss/themes/dark/_variables-dark.scss | 8 ++ src/component-toasts.html | 75 +++++++++++++++++++ src/sidebar-items.json | 4 + 6 files changed, 103 insertions(+), 4 deletions(-) create mode 100644 src/assets/js/pages/component-toasts.js create mode 100644 src/component-toasts.html diff --git a/src/assets/js/pages/component-toasts.js b/src/assets/js/pages/component-toasts.js new file mode 100644 index 000000000..2ca36cd3b --- /dev/null +++ b/src/assets/js/pages/component-toasts.js @@ -0,0 +1,9 @@ +const toastTrigger = document.getElementById("liveToastBtn") +const toastLiveExample = document.getElementById("liveToast") +if (toastTrigger) { + toastTrigger.addEventListener("click", () => { + const toast = new bootstrap.Toast(toastLiveExample) + + toast.show() + }) +} diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss index 34920c87a..89604f929 100644 --- a/src/assets/scss/_variables.scss +++ b/src/assets/scss/_variables.scss @@ -1281,12 +1281,12 @@ $toast-max-width: 350px !default; $toast-padding-x: .75rem !default; $toast-padding-y: .5rem !default; $toast-font-size: .875rem !default; -$toast-color: null !default; +$toast-color: $gray-800 !default; $toast-background-color: rgba($white, .85) !default; $toast-border-width: 1px !default; -$toast-border-color: rgba(0, 0, 0, .1) !default; -$toast-border-radius: $border-radius !default; -$toast-box-shadow: $box-shadow !default; +$toast-border-color: rgba(56, 56, 56, 0.1) !default; +$toast-border-radius: .3rem; +$toast-box-shadow: 0 0.5rem 1.5rem rgba(40, 40, 40, 0.1) !default; $toast-spacing: $container-padding-x !default; $toast-header-color: $gray-600 !default; diff --git a/src/assets/scss/themes/dark/_mazer-dark.scss b/src/assets/scss/themes/dark/_mazer-dark.scss index 8510d0d4c..8d95c5b89 100644 --- a/src/assets/scss/themes/dark/_mazer-dark.scss +++ b/src/assets/scss/themes/dark/_mazer-dark.scss @@ -1,3 +1,6 @@ +.toast .btn-close { + background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; +} // Sweetalert2 Dark .swal2-popup, .swal2-validation-message { diff --git a/src/assets/scss/themes/dark/_variables-dark.scss b/src/assets/scss/themes/dark/_variables-dark.scss index 14e4bfcfb..6f9659869 100644 --- a/src/assets/scss/themes/dark/_variables-dark.scss +++ b/src/assets/scss/themes/dark/_variables-dark.scss @@ -231,6 +231,14 @@ $carousel-caption-color: $white; $carousel-dark-indicator-active-bg: $black; $carousel-dark-caption-color: $black; +// Toasts +$toast-color: $body-color ; +$toast-background-color: rgba(44, 46, 66, .85) ; +$toast-header-color: $white; +$toast-header-background-color: #12121e; + + + $btn-close-color: $black; $code-color: $pink; $kbd-color: $white; diff --git a/src/component-toasts.html b/src/component-toasts.html new file mode 100644 index 000000000..153a1ea65 --- /dev/null +++ b/src/component-toasts.html @@ -0,0 +1,75 @@ +{% set title = 'Toast' %} +{% set filename = 'component-toasts.html' %} + +{% extends 'layouts/master.html' %} +{% block content %} +
+
+
+
+

Toast

+

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

+
+
+ +
+
+
+
+
+
+
+
+
Basic Toasts
+
+
+ +
+
+
+
+
+
+
Open Toast Buttons
+
+
+

Click the button to show toasts.

+ +
+ +
+
+
+
+
+
+
+{% endblock %} +{% block js %} + +{% endblock %} \ No newline at end of file diff --git a/src/sidebar-items.json b/src/sidebar-items.json index 30e46325b..b182cf3e8 100644 --- a/src/sidebar-items.json +++ b/src/sidebar-items.json @@ -69,6 +69,10 @@ "name": "Spinner", "url": "component-spinner.html" }, + { + "name": "Toasts", + "url": "component-toasts.html" + }, { "name": "Tooltip", "url": "component-tooltip.html"