From 6785ebba0bd8d80dfc2755d31bc1bebc22518a0b Mon Sep 17 00:00:00 2001
From: imanmalekian31 <58827166+imanmalekian31@users.noreply.github.com>
Date: Wed, 23 Nov 2022 22:03:33 +0330
Subject: [PATCH] Feat/chat bubble (#916)
* feat(chat-bubble): :sparkles: Add chat bubble styles
* docs(chat-bubble): :memo: Add chat bubble readme
---
src/components/styled/chat-bubble.css | 115 ++++++++
src/components/unstyled/chat-bubble.css | 19 ++
.../routes/components/chat-bubble.svelte.md | 270 ++++++++++++++++++
3 files changed, 404 insertions(+)
create mode 100644 src/components/styled/chat-bubble.css
create mode 100644 src/components/unstyled/chat-bubble.css
create mode 100644 src/docs/src/routes/components/chat-bubble.svelte.md
diff --git a/src/components/styled/chat-bubble.css b/src/components/styled/chat-bubble.css
new file mode 100644
index 0000000000..b77dbd63d2
--- /dev/null
+++ b/src/components/styled/chat-bubble.css
@@ -0,0 +1,115 @@
+.bubble {
+ /* default */
+ & {
+ --bubble-bg: hsl(var(--n));
+ @apply text-neutral-content;
+ }
+
+ /* brand colors */
+ &-primary {
+ --bubble-bg: hsl(var(--p));
+ @apply text-primary-content;
+ }
+ &-secondary {
+ --bubble-bg: hsl(var(--s));
+ @apply text-secondary-content;
+ }
+ &-accent {
+ --bubble-bg: hsl(var(--a));
+ @apply text-accent-content;
+ }
+
+ /* state colors */
+ &-info {
+ --bubble-bg: hsl(var(--in));
+ @apply text-info-content;
+ }
+ &-success {
+ --bubble-bg: hsl(var(--su));
+ @apply text-success-content;
+ }
+ &-warning {
+ --bubble-bg: hsl(var(--wa));
+ @apply text-warning-content;
+ }
+ &-error {
+ --bubble-bg: hsl(var(--er));
+ @apply text-error-content;
+ }
+
+ &-left {
+ [dir="ltr"] & {
+ @apply mr-auto rounded-r-xl;
+ margin-left: var(--bubble-radius, 0.75rem);
+
+ &:before {
+ --circle-pos: top left;
+ left: calc(var(--bubble-radius, 0.75rem) * -1);
+ background-image: var(--tab-corner-bg);
+ }
+ }
+ [dir="rtl"] & {
+ @apply ml-auto rounded-l-xl;
+ margin-right: var(--bubble-radius, 0.75rem);
+
+ &:after {
+ --circle-pos: top right;
+ right: calc(var(--bubble-radius, 0.75rem) * -1);
+ background-image: var(--tab-corner-bg);
+ }
+ }
+ }
+
+ &-right {
+ [dir="ltr"] & {
+ @apply ml-auto rounded-l-xl;
+ margin-right: var(--bubble-radius, 0.75rem);
+
+ &:after {
+ right: calc(var(--bubble-radius, 0.75rem) * -1);
+ --circle-pos: top right;
+ background-image: var(--tab-corner-bg);
+ }
+ }
+ [dir="rtl"] & {
+ @apply mr-auto rounded-r-xl;
+ margin-left: var(--bubble-radius, 0.75rem);
+
+ &:before {
+ left: calc(var(--bubble-radius, 0.75rem) * -1);
+ --circle-pos: top left;
+ background-image: var(--tab-corner-bg);
+ }
+ }
+ }
+
+ &-topbar {
+ @apply flex items-center;
+ @apply mb-1;
+
+ &-author {
+ @apply font-medium;
+ }
+ &-time {
+ @apply text-xs italic;
+ @apply mx-2;
+ }
+ &-action {
+ [dir="ltr"] & {
+ @apply ml-auto;
+ }
+ [dir="rtl"] & {
+ @apply mr-auto;
+ }
+ }
+ }
+
+ &-action {
+ [dir="ltr"] & {
+ @apply ml-auto;
+ }
+ [dir="rtl"] & {
+ @apply mr-auto;
+ }
+ }
+}
diff --git a/src/components/unstyled/chat-bubble.css b/src/components/unstyled/chat-bubble.css
new file mode 100644
index 0000000000..f65f794a11
--- /dev/null
+++ b/src/components/unstyled/chat-bubble.css
@@ -0,0 +1,19 @@
+.bubble {
+ --bubble-radius: 0.75rem;
+
+ @apply inline-block;
+ @apply px-4 py-2 my-2 rounded-t-xl relative;
+ @apply font-light;
+ background-color: var(--bubble-bg);
+ max-width: 60%;
+
+ &:before,
+ &:after {
+ content: "";
+ position: absolute;
+ width: var(--bubble-radius, 0.75rem);
+ height: var(--bubble-radius, 0.75rem);
+ bottom: 0;
+ --tab-corner-bg: radial-gradient(circle at var(--circle-pos), transparent 68%, transparent 68%, transparent calc(68% + 1px), var(--bubble-bg) 68%);
+ }
+}
diff --git a/src/docs/src/routes/components/chat-bubble.svelte.md b/src/docs/src/routes/components/chat-bubble.svelte.md
new file mode 100644
index 0000000000..0adefef7cc
--- /dev/null
+++ b/src/docs/src/routes/components/chat-bubble.svelte.md
@@ -0,0 +1,270 @@
+---
+title: Chat bubble
+desc: It's a awesome chat bubble!
+published: true
+---
+
+
+
+
{ +`++` +}Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋
{ +`++` +}Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋
{ +`++` +}Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋
{ +`++` +}++ + Thank you 😊
See you soon 👋 +++ + Thank you 😊
See you soon 👋 +
{ +`++` +}++ + Thank you 😊
See you soon 👋 +++ + Thank you 😊
See you soon 👋 +
{ +`++` +}++ + Thank you 😊
See you soon 👋 +++ + Thank you 😊
See you soon 👋 +
{ +`++` +}Thank you 😊+
See you soon 👋Thank you 😊+
See you soon 👋