Skip to content

Commit ff6ae71

Browse files
FileEXFileEX
committed
NoteBox rework
- New look - Added a tip-type notebox - Each notebox has its own style
1 parent 995f2d7 commit ff6ae71

File tree

1 file changed

+83
-38
lines changed

1 file changed

+83
-38
lines changed

‎web/src/components/NoteBox.astro‎

Lines changed: 83 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,62 +2,107 @@
22
import type { HTMLAttributes } from 'astro/types';
33
44
interface Props extends HTMLAttributes<'div'> {
5-
type?: 'info' | 'warning' | 'important';
5+
type?: 'info' | 'warning' | 'important' | 'tip';
66
}
77
88
const { type = 'info', class: className, ...rest } = Astro.props;
99
---
10+
1011
<div
11-
class:list={["custom-note-box", { 'note-important': type === 'important' }, className]}
12+
class:list={[
13+
"custom-note-box",
14+
{
15+
'note-info': type === 'info',
16+
'note-warning': type === 'warning',
17+
'note-important': type === 'important',
18+
'note-tip': type === 'tip',
19+
},
20+
className
21+
]}
1222
{...rest}
1323
>
14-
{type === 'important' && (
15-
<span class="note-icon" aria-label="Importante">
16-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
17-
<circle cx="10" cy="10" r="10" fill="#e53935"/>
18-
<text x="10" y="15" text-anchor="middle" font-size="14" fill="#fff" font-family="Arial" font-weight="bold">!</text>
19-
</svg>
20-
</span>
21-
)}
22-
<slot />
23-
</div >
24+
{type === 'important' && (
25+
<span class="note-icon" aria-label="Important">
26+
<svg width="28" height="28" viewBox="0 0 20 20" fill="none" aria-hidden="true">
27+
<circle cx="10" cy="10" r="10" fill="#e53935"/>
28+
<text x="10" y="15" text-anchor="middle" font-size="14" fill="#fff" font-family="Arial" font-weight="bold">!</text>
29+
</svg>
30+
</span>
31+
)}
32+
33+
{type === 'warning' && (
34+
<span class="note-icon" aria-label="Warning">
35+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="#ff9800" stroke-width="2" stroke-linejoin="round" stroke-linecap="round">
36+
<path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
37+
<line x1="12" y1="9" x2="12" y2="13"/>
38+
<line x1="12" y1="17" x2="12.01" y2="17"/>
39+
</svg>
40+
</span>
41+
)}
42+
43+
{type === 'info' && (
44+
<span class="note-icon" aria-label="Info">
45+
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true" stroke="#2196f3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
46+
<circle cx="12" cy="12" r="10"/>
47+
<line x1="12" y1="16" x2="12" y2="12"/>
48+
<line x1="12" y1="8" x2="12.01" y2="8"/>
49+
</svg>
50+
</span>
51+
)}
52+
53+
{type === 'tip' && (
54+
<span class="note-icon" aria-label="Tip">
55+
<svg width="28" height="28" viewBox="0 0 20 20" fill="none" aria-hidden="true" stroke="#4caf50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
56+
<path d="M9 18h6"/>
57+
<path d="M12 2a7 7 0 0 0-7 7c0 3.93 3.13 7 7 7s7-3.07 7-7a7 7 0 0 0-7-7z"/>
58+
<line x1="12" y1="9" x2="12" y2="12"/>
59+
<line x1="12" y1="16" x2="12" y2="16"/>
60+
</svg>
61+
</span>
62+
)}
63+
64+
<slot />
65+
</div>
2466

2567
<style>
2668
.custom-note-box {
27-
background-color: var(--sl-color-blue-low);
28-
border-left: 4px solid var(--sl-color-blue);
29-
border-radius: 8px;
30-
padding: 1rem 1.25rem;
31-
margin-bottom: 1rem;
32-
color: var(--sl-color-text);
33-
position: relative;
69+
background-color: var(--sl-color-gray-5);
70+
position: relative;
71+
border-left: 4px solid transparent;
72+
border-radius: 8px;
73+
padding: 1rem 1.25rem;
74+
margin-bottom: 1rem;
75+
color: var(--sl-color-text);
3476
}
3577

36-
html[data-theme="dark"] .custom-note-box {
37-
background-color: var(--sl-color-gray-5);
78+
.custom-note-box.note-info,
79+
.custom-note-box.note-warning,
80+
.custom-note-box.note-important,
81+
.custom-note-box.note-tip {
82+
padding-left: 3.5rem;
83+
padding-right: 1.25rem;
84+
}
85+
86+
.custom-note-box.note-info {
87+
border-left-color: var(--sl-color-blue);
88+
}
89+
90+
.custom-note-box.note-warning {
91+
border-left-color: #ff9800;
3892
}
3993

4094
.custom-note-box.note-important {
41-
background-color: var(--sl-color-red-low);
42-
border-left-color: #d32f2f;
95+
border-left-color: #d32f2f;
4396
}
4497

45-
html[data-theme="dark"] .custom-note-box.note-important {
46-
--sl-color-red-low: hsl(var(--sl-color-red-hue), 50%, 20%);
98+
.custom-note-box.note-tip {
99+
border-left-color: #4caf50;
47100
}
48101

49102
.note-icon {
50-
position: absolute;
51-
top: 0.75rem;
52-
right: 0.75rem;
53-
z-index: 1;
54-
display: flex;
55-
align-items: center;
56-
justify-content: center;
57-
pointer-events: none;
58-
}
59-
.custom-note-box.note-important {
60-
padding-right: 2.5rem;
61-
padding-left: 1.25rem;
103+
position: absolute;
104+
top: 50%;
105+
left: 0.75rem;
106+
transform: translateY(-50%);
62107
}
63-
</style>
108+
</style>

0 commit comments

Comments
 (0)