Merging upstream version 0.46.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
d5bf7afd18
commit
76fe8c2886
GPG key ID:
FBB4F0E80A80222F
125 changed files with 8421 additions and 71 deletions
96
docs/components/ui/Popover/DemoCSS.jinja
Normal file
96
docs/components/ui/Popover/DemoCSS.jinja
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```css
|
||||
.ui-popbutton {
|
||||
border-radius: 0.25rem;
|
||||
border-width: 1px;
|
||||
background-color: rgb(0 0 0 / 0.1);
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
||||
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.ui-popbutton:hover {
|
||||
background-color: rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
[popover] {
|
||||
background-color: Canvas;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid #666;
|
||||
color: CanvasText;
|
||||
height: fit-content;
|
||||
margin: 0.75rem auto 0;
|
||||
padding: 1rem;
|
||||
width: 15rem;
|
||||
overflow: visible;
|
||||
transition: all 0.2s allow-discrete;
|
||||
/* Final state of the exit animation */
|
||||
opacity: 0;
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
[popover]:popover-open {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Needs to be after the previous [popover]:popover-open rule
|
||||
to take effect, as the specificity is the same */
|
||||
@starting-style {
|
||||
[popover]:popover-open {
|
||||
opacity: 0;
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Transition for the popover's backdrop */
|
||||
[popover]::backdrop {
|
||||
transition: all 0.2s allow-discrete;
|
||||
/* Final state of the exit animation */
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
[popover]:popover-open::backdrop {
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
}
|
||||
/* The nesting selector (&) cannot represent pseudo-elements
|
||||
so this starting-style rule cannot be nested */
|
||||
@starting-style {
|
||||
[popover]:popover-open::backdrop {
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
}
|
||||
|
||||
[popover] h1 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
[popover] label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
[popover] input {
|
||||
margin-left: auto;
|
||||
width: 66.666667%;
|
||||
border-radius: 0.25rem;
|
||||
border-width: 1px;
|
||||
padding: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
[popover] svg.arrow {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
transform: rotate(180deg);
|
||||
border-color: rgb(255 255 255);
|
||||
fill: white;
|
||||
}
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
23
docs/components/ui/Popover/DemoHTML.jinja
Normal file
23
docs/components/ui/Popover/DemoHTML.jinja
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```html+jinja
|
||||
<PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>
|
||||
|
||||
<Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
|
||||
<h1>Edit Dimensions</h1>
|
||||
<fieldset class="space-y-2">
|
||||
<label>
|
||||
<span>Width</span>
|
||||
<input type="text" name="width" value="340px">
|
||||
</label>
|
||||
<label>
|
||||
<span>Height</span>
|
||||
<input type="text" name="height" value="25px">
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<svg class="arrow" width="10" height="5" viewBox="0 0 30 10" aria-hidden="true">
|
||||
<polygon points="0,0 30,0 15,10"></polygon>
|
||||
</svg>
|
||||
</Popover>
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
27
docs/components/ui/Popover/DemoResult.jinja
Normal file
27
docs/components/ui/Popover/DemoResult.jinja
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{#css ui/Popover/Popover.css #}
|
||||
|
||||
<div class="bg-cover"
|
||||
style="background-image:linear-gradient(to right, rgba(217,70,239, 0.9), rgba(147,51,234, 0.9))"
|
||||
data-md-skip
|
||||
></div>
|
||||
|
||||
<div id="pop-demo" data-md-skip>
|
||||
<PopButton id="pop-demo-btn" target="pop-demo-pop">Open popover</PopButton>
|
||||
|
||||
<Popover id="pop-demo-pop" anchor="pop-demo-btn" anchor-to="bottom">
|
||||
<h1 data-outline-skip=>Edit Dimensions</h1>
|
||||
<fieldset class="space-y-2">
|
||||
<label>
|
||||
<span>Width</span>
|
||||
<input type="text" name="width" value="340px">
|
||||
</label>
|
||||
<label>
|
||||
<span>Height</span>
|
||||
<input type="text" name="height" value="25px">
|
||||
</label>
|
||||
</fieldset>
|
||||
<svg class="arrow" width="10" height="5" viewBox="0 0 30 10" aria-hidden="true">
|
||||
<polygon points="0,0 30,0 15,10"></polygon>
|
||||
</svg>
|
||||
</Popover>
|
||||
</div>
|
||||
101
docs/components/ui/Popover/Popover.css
Normal file
101
docs/components/ui/Popover/Popover.css
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
@scope (#pop-demo) {
|
||||
:scope {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 2rem 0.5rem 0;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ui-popbutton {
|
||||
border-radius: 0.25rem;
|
||||
border-width: 1px;
|
||||
background-color: rgb(0 0 0 / 0.1);
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
|
||||
0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
.ui-popbutton:hover {
|
||||
background-color: rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
[popover] {
|
||||
background-color: Canvas;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid #666;
|
||||
color: CanvasText;
|
||||
height: fit-content;
|
||||
margin: 0.75rem auto 0;
|
||||
padding: 1rem;
|
||||
width: 15rem;
|
||||
overflow: visible;
|
||||
transition: all 0.2s allow-discrete;
|
||||
/* Final state of the exit animation */
|
||||
opacity: 0;
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
[popover]:popover-open {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
/* Needs to be after the previous [popover]:popover-open rule
|
||||
to take effect, as the specificity is the same */
|
||||
@starting-style {
|
||||
[popover]:popover-open {
|
||||
opacity: 0;
|
||||
transform: translateY(-3rem);
|
||||
}
|
||||
}
|
||||
|
||||
/* Transition for the popover's backdrop */
|
||||
[popover]::backdrop {
|
||||
/* Final state of the exit animation */
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
transition: all 0.2s allow-discrete;
|
||||
}
|
||||
[popover]:popover-open::backdrop {
|
||||
background-color: rgb(0 0 0 / 15%);
|
||||
}
|
||||
@starting-style {
|
||||
[popover]:popover-open::backdrop {
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
}
|
||||
}
|
||||
|
||||
[popover] h1 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
[popover] label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
[popover] input {
|
||||
margin-left: auto;
|
||||
width: 66.666667%;
|
||||
border-radius: 0.25rem;
|
||||
border-width: 1px;
|
||||
padding: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
[popover] svg.arrow {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 50%;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
transform: rotate(180deg);
|
||||
border-color: rgb(255 255 255);
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue