Merge branch 'master' of https://github.com/saadeghi/daisyui
This commit is contained in:
Pouya Saadeghi
commit
0d3f5520c8
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
---
|
||||
title: Chat bubble
|
||||
desc: It's a awesome chat bubble!
|
||||
published: true
|
||||
---
|
||||
|
||||
<script>
|
||||
import Component from "@components/Component.svelte"
|
||||
import ClassTable from "@components/ClassTable.svelte"
|
||||
import { prefix } from '$lib/stores';
|
||||
import { replace } from '$lib/actions';
|
||||
</script>
|
||||
|
||||
<ClassTable
|
||||
data="{[
|
||||
{ type:'component', class: 'bubble', desc: 'Bubble' },
|
||||
{ type:'modifier', class: 'bubble-primary', desc: 'Bubble with `secondary` background' },
|
||||
{ type:'modifier', class: 'bubble-secondary', desc: 'Bubble with `secondary` background' },
|
||||
{ type:'modifier', class: 'bubble-accent', desc: 'Bubble with `accent` background' },
|
||||
{ type:'modifier', class: 'bubble-info', desc: 'Bubble with `info` background' },
|
||||
{ type:'modifier', class: 'bubble-success', desc: 'Bubble with `success` background' },
|
||||
{ type:'modifier', class: 'bubble-warning', desc: 'Bubble with `warning` background' },
|
||||
{ type:'modifier', class: 'bubble-error', desc: 'Bubble with `error` background' },
|
||||
{ type:'modifier', class: 'bubble-left', desc: 'Left side bubble' },
|
||||
{ type:'modifier', class: 'bubble-right', desc: 'Right side bubble' },
|
||||
{ type:'modifier', class: 'bubble-topbar-author', desc: 'Showing author name' },
|
||||
{ type:'modifier', class: 'bubble-topbar-time', desc: 'Showing message time' },
|
||||
{ type:'modifier', class: 'bubble-topbar-action', desc: 'Using for more actions' },
|
||||
]}"
|
||||
/>
|
||||
|
||||
<div class="alert alert-info text-sm">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info-content flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
Using dir="ltr" or dir="rtl" is required.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Component title="Chat Bubble">
|
||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="bubble bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
|
||||
<Component title="Chat Bubble with brand colors">
|
||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left bubble-primary">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="bubble bubble-right bubble-secondary">Thank you 😊<br/> see you soon 👋</div>
|
||||
<div class="bubble bubble-left bubble-accent">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left $$bubble-primary">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-right $$bubble-secondary">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-left $$bubble-accent">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
|
||||
<Component title="Chat Bubble with state colors">
|
||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left bubble-info">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="bubble bubble-right bubble-success">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="bubble bubble-left bubble-warning">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="bubble bubble-right bubble-error">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left $$bubble-info">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-right $$bubble-success">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-left $$bubble-warning">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-right $$bubble-error">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
|
||||
<Component title="Chat Bubble with author">
|
||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left">
|
||||
<div class="bubble-topbar">
|
||||
<div class="bubble-topbar-author">Iman</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
<div class="bubble bubble-right">
|
||||
<div class="bubble-topbar">
|
||||
<div class="bubble-topbar-author">Amin</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left">
|
||||
<div class="$$bubble-topbar">
|
||||
<div class="$$bubble-topbar-author">Iman</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
<div class="$$bubble $$bubble-right">
|
||||
<div class="$$bubble-topbar">
|
||||
<div class="$$bubble-topbar-author">Amin</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
|
||||
<Component title="Chat Bubble with time">
|
||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left">
|
||||
<div class="bubble-topbar">
|
||||
<div class="bubble-topbar-author">Iman</div>
|
||||
<div class="bubble-topbar-time">1 min</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
<div class="bubble bubble-right">
|
||||
<div class="bubble-topbar">
|
||||
<div class="bubble-topbar-author">Amin</div>
|
||||
<div class="bubble-topbar-time">30 sec</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left">
|
||||
<div class="$$bubble-topbar">
|
||||
<div class="$$bubble-topbar-author">Iman</div>
|
||||
<div class="$$bubble-topbar-time">1 min</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
<div class="$$bubble $$bubble-right">
|
||||
<div class="$$bubble-topbar">
|
||||
<div class="$$bubble-topbar-author">Amin</div>
|
||||
<div class="$$bubble-topbar-time">30 sec</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
|
||||
<Component title="Chat Bubble with action">
|
||||
<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left">
|
||||
<div class="bubble-topbar">
|
||||
<div class="bubble-topbar-author">Iman</div>
|
||||
<div class="bubble-topbar-time">1 min</div>
|
||||
<div class="bubble-topbar-action">
|
||||
<div class="dropdown">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
||||
>
|
||||
<li><a>Reply</a></li>
|
||||
<li><a>Forward</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
<div class="bubble bubble-right">
|
||||
<div class="bubble-topbar">
|
||||
<div class="bubble-topbar-author">Amin</div>
|
||||
<div class="bubble-topbar-time">30 sec</div>
|
||||
<div class="bubble-topbar-action">
|
||||
<div class="dropdown dropdown-end">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
||||
>
|
||||
<li><a>Reply</a></li>
|
||||
<li><a>Forward</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="ltr" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left">
|
||||
<div class="$$bubble-topbar">
|
||||
<div class="$$bubble-topbar-author">Iman</div>
|
||||
<div class="$$bubble-topbar-time">1 min</div>
|
||||
<div class="$$bubble-topbar-action">
|
||||
<div class="dropdown">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
||||
>
|
||||
<li><a>Reply</a></li>
|
||||
<li><a>Forward</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
<div class="$$bubble $$bubble-right">
|
||||
<div class="$$bubble-topbar">
|
||||
<div class="$$bubble-topbar-author">Amin</div>
|
||||
<div class="$$bubble-topbar-time">30 sec</div>
|
||||
<div class="$$bubble-topbar-action">
|
||||
<div class="dropdown dropdown-end">
|
||||
<label
|
||||
tabindex="0"
|
||||
class="btn btn-circle btn-ghost btn-xs text-base"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block h-6 w-6 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
|
||||
</label>
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40 text-neutral"
|
||||
>
|
||||
<li><a>Reply</a></li>
|
||||
<li><a>Forward</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Thank you 😊<br/> See you soon 👋
|
||||
</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
|
||||
<Component title="Chat Bubble RTL">
|
||||
<div dir="rtl" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="bubble bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="bubble bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>
|
||||
<pre slot="html" use:replace={{ to: $prefix }}>{
|
||||
`<div dir="rtl" class="container mx-auto py-4 flex flex-col">
|
||||
<div class="$$bubble $$bubble-left">Thank you 😊<br/> See you soon 👋</div>
|
||||
<div class="$$bubble $$bubble-right">Thank you 😊<br/> See you soon 👋</div>
|
||||
</div>`
|
||||
}</pre>
|
||||
</Component>
|
||||
Loading…
Reference in New Issue