diff options
| author |  Fred K. Schott <fkschott@gmail.com>
| 2021-06-08 08:10:56 -0700 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-06-08 11:10:56 -0400 |
| commit | 6bca7c83a7e2d62015f45f873b0f69f11b4d902b (patch) | |
| tree | 5662630e51c6e6e743785d308785cff2e47568f0 /examples/docs/src/components/Note.astro | |
| parent | 9594447335b7fa15f82c0789f18a3fe02ec20d70 (diff) | |
| download | astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.tar.gz astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.tar.zst astro-6bca7c83a7e2d62015f45f873b0f69f11b4d902b.zip | |
redesign create-astro (#301)
* redesign create astro
* add changeset
* Use npm start
* Update the astro version
* Adds the changeset
Co-authored-by: Fred Schott <fks@Freds-MBP.attlocal.net>
Co-authored-by: Matthew Phillips <matthew@skypack.dev>
Diffstat (limited to 'examples/docs/src/components/Note.astro')
| -rw-r--r-- | examples/docs/src/components/Note.astro | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/examples/docs/src/components/Note.astro b/examples/docs/src/components/Note.astro new file mode 100644 index 000000000..46940ddf8 --- /dev/null +++ b/examples/docs/src/components/Note.astro @@ -0,0 +1,49 @@ +--- +export let type = "tip"; +export let title; +--- + +<aside class={`note type-${type}`}> + {title && <label>{title}</label>} + <slot /> +</aside> + +<style> + .note { + --padding-block: 1rem; + --padding-inline: 1.25rem; + + display: flex; + flex-direction: column; + + padding: var(--padding-block) var(--padding-inline); + margin-left: calc(var(--padding-inline) * -1); + margin-right: calc(var(--padding-inline) * -1); + + background: var(--theme-bg-offset); + border-left: calc(var(--padding-inline) / 2) solid var(--color); + border-radius: 0; + } + + .note label { + font-weight: 500; + color: var(--color); + } + + /* .note :global(a) { + color: var(--color); + } */ + + .note.type-tip { + --color: var(--color-green); + --color-rgb: var(--color-green-rgb); + } + .note.type-warning { + --color: var(--color-yellow); + --color-rgb: var(--color-yellow-rgb); + } + .note.type-error { + --color: var(--color-red); + --color-rgb: var(--color-red-rgb); + } +</style> |