python/jinjax
1
0
Fork 0
Code Issues Activity

Adding upstream version 0.46.

Browse source 
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
Daniel Baumann 2025-02-05 18:42:15 +01:00
parent eb42e29864
commit 5ea73fcab5
Signed by: daniel
GPG key ID: FBB4F0E80A80222F
125 changed files with 8421 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

67
docs/components/ui/Accordion/Accordion.css Normal file
View file

@ -0,0 +1,67 @@
@scope (#accordion-demo) {
:scope {
position: relative;
display: block;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 0.5rem 0;
height: 360px;
margin: 0 auto;
}
@media (min-width: 38rem) {
:scope {
width: 36rem;
}
}
details {
margin: 0;
border-width: 1px;
border-color: rgb(212 212 212);
background-color: rgb(245 245 245);
padding: 0;
overflow: hidden;
height: 3.5rem;
transition: all 0.15s ease-in-out;
}
details[open] {
height: 10rem;
}
details:focus-within {
box-shadow: 0 1px 2px 0 #2563eb;
}
details:first-of-type {
margin-top: 0px;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
details:last-of-type {
margin-bottom: 0px;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
summary {
position: relative;
height: 3.5rem;
border-bottom-width: 1px;
border-color: transparent;
background-color: rgb(255, 255, 255);
padding: 1rem 1.25rem;
color: rgb(0, 0, 0);
cursor: default;
}
details[open] > summary {
border-color: rgb(229 229 229);
}
.panel {
color: rgb(82 82 82);
padding: 0 1.25rem;
padding: 0.75rem 1.25rem;
}
.panel code {
font-weight: bold;
}
}

51
docs/components/ui/Accordion/DemoCSS.jinja Normal file
View file

@ -0,0 +1,51 @@
{% filter markdown %}{% raw %}
```css
@scope (#accordion-demo) {
details {
margin: 0;
border-width: 1px;
border-color: rgb(212 212 212);
background-color: rgb(245 245 245);
padding: 0;
overflow: hidden;
height: 3.5rem;
width: 36rem;
transition: all 0.15s ease-in-out;
}
details[open] {
height: 10rem;
}
details:focus-within {
box-shadow: 0 1px 2px 0 #2563eb;
}
details:first-of-type {
margin-top: 0px;
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
details:last-of-type {
margin-bottom: 0px;
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
}
summary {
position: relative;
height: 3.5rem;
border-bottom-width: 1px;
border-color: transparent;
background-color: rgb(255, 255, 255);
padding: 1rem 1.25rem;
color: rgb(0, 0, 0);
cursor: default;
}
details[open] > summary {
border-color: rgb(229 229 229);
}
.panel {
color: rgb(82 82 82);
padding: 0 1.25rem;
padding: 0.75rem 1.25rem;
}
}
```
{% endraw %}{% endfilter %}

29
docs/components/ui/Accordion/DemoHTML.jinja Normal file
View file

@ -0,0 +1,29 @@
{% filter markdown %}{% raw %}
```html+jinja
<Accordion>
<details>
<summary>Is it accessible?</summary>
<div class="panel">
Yes, more than any custom accordion you'll find on the web, because it's made
with native elements.
</div>
</details>
<details>
<summary>Is it unstyled?</summary>
<div class="panel">
Yes. The Accordion doesn't need any styles, you are free to style your
<code>&lt;details&gt;</code> elements however you need.
</div>
</details>
<details>
<summary>Can it be animated?</summary>
<div class="panel">
The <code>&lt;details&gt;</code> elements can be animated (with some restrictions)
using CSS animations, or with JS.
</div>
</details>
</Accordion>
```
{% endraw %}{% endfilter %}

32
docs/components/ui/Accordion/DemoResult.jinja Normal file
View file

@ -0,0 +1,32 @@
{#css ui/Accordion/Accordion.css #}
<div class="bg-cover"
style="background-image:linear-gradient(to right, rgba(252,211,77, 0.9), rgba(251,146,60, 0.9))"
data-md-skip
></div>
<Accordion id="accordion-demo" data-md-skip>
<details>
<summary>Is it accessible?</summary>
<div class="panel">
Yes, more than any custom accordion you'll find on the web, because it's made
with native elements.
</div>
</details>
<details>
<summary>Is it unstyled?</summary>
<div class="panel">
Yes. The Accordion doesn't need any styles, you are free to style your
<code>&lt;details&gt;</code> elements however you need.
</div>
</details>
<details>
<summary>Can it be animated?</summary>
<div class="panel">
The <code>&lt;details&gt;</code> elements can be animated (with some restrictions)
using CSS animations, or with JS.
</div>
</details>
</Accordion>