summaryrefslogtreecommitdiffstats
path: root/docs/components/ui/Popover
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components/ui/Popover')
-rw-r--r--docs/components/ui/Popover/DemoCSS.jinja96
-rw-r--r--docs/components/ui/Popover/DemoHTML.jinja23
-rw-r--r--docs/components/ui/Popover/DemoResult.jinja27
-rw-r--r--docs/components/ui/Popover/Popover.css101
4 files changed, 247 insertions, 0 deletions
diff --git a/docs/components/ui/Popover/DemoCSS.jinja b/docs/components/ui/Popover/DemoCSS.jinja
new file mode 100644
index 0000000..83418c9
--- /dev/null
+++ b/docs/components/ui/Popover/DemoCSS.jinja
@@ -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 %}
diff --git a/docs/components/ui/Popover/DemoHTML.jinja b/docs/components/ui/Popover/DemoHTML.jinja
new file mode 100644
index 0000000..b40ddfb
--- /dev/null
+++ b/docs/components/ui/Popover/DemoHTML.jinja
@@ -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 %}
diff --git a/docs/components/ui/Popover/DemoResult.jinja b/docs/components/ui/Popover/DemoResult.jinja
new file mode 100644
index 0000000..a0b73e8
--- /dev/null
+++ b/docs/components/ui/Popover/DemoResult.jinja
@@ -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>
diff --git a/docs/components/ui/Popover/Popover.css b/docs/components/ui/Popover/Popover.css
new file mode 100644
index 0000000..724547f
--- /dev/null
+++ b/docs/components/ui/Popover/Popover.css
@@ -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;
+ }
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-22 10:08:23 +0000