Adding upstream version 0.46.
Signed-off-by: Daniel Baumann <daniel@debian.org>
This commit is contained in:
parent
eb42e29864
commit
5ea73fcab5
GPG key ID:
FBB4F0E80A80222F
125 changed files with 8421 additions and 71 deletions
59
docs/components/ui/Tabs/DemoCSS.jinja
Normal file
59
docs/components/ui/Tabs/DemoCSS.jinja
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```css
|
||||
.ui-tablist {
|
||||
display: flex;
|
||||
}
|
||||
.ui-tablist > :not([hidden]) ~ :not([hidden]) {
|
||||
margin-left: 0.25rem ;
|
||||
}
|
||||
.ui-tablist {
|
||||
border-radius: 1rem;
|
||||
background-color: rgb(30 58 138 / 0.6);
|
||||
padding: 0.5rem;
|
||||
color: #111;
|
||||
}
|
||||
.ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.ui-tab {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
color: #222;
|
||||
background-color: rgb(255 255 255 / 0.7);
|
||||
padding: 0.75rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.ui-tab:focus {
|
||||
outline: 2px solid rgb(59 130 246 / 0.8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ui-tab.ui-selected {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
.ui-tab:hover:not(.ui-selected, .ui-disabled),
|
||||
.ui-tab:focus:not(.ui-selected, .ui-disabled) {
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
}
|
||||
.ui-tabpanel {
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background-color: rgb(254 254 254);
|
||||
border: 2px solid rgb(59 130 246 / 0.8);
|
||||
padding: 0.1rem;
|
||||
min-height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui-tabpanel:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ui-tabpanel.ui-hidden {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
23
docs/components/ui/Tabs/DemoHTML.jinja
Normal file
23
docs/components/ui/Tabs/DemoHTML.jinja
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```html+jinja
|
||||
<TabGroup>
|
||||
<TabList>
|
||||
<Tab target="demo-recent" selected>Recent</Tab>
|
||||
<Tab target="demo-popular">Popular</Tab>
|
||||
<Tab target="demo-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id>
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="demo-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="demo-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
28
docs/components/ui/Tabs/DemoResult.jinja
Normal file
28
docs/components/ui/Tabs/DemoResult.jinja
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{#css ui/Tabs/Tabs.css #}
|
||||
|
||||
<div class="bg-cover"
|
||||
style="background-image:linear-gradient(to right, rgba(56,189,248, 0.9), rgba(37,99,235, 0.9))"
|
||||
data-md-skip
|
||||
></div>
|
||||
|
||||
<div class="horizontal-tabs" data-md-skip>
|
||||
<TabGroup>
|
||||
<TabList>
|
||||
<Tab target="demo-recent" selected>Recent</Tab>
|
||||
<Tab target="demo-popular">Popular</Tab>
|
||||
<Tab target="demo-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="demo-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="demo-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="demo-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
</div>
|
||||
28
docs/components/ui/Tabs/ManualHTML.jinja
Normal file
28
docs/components/ui/Tabs/ManualHTML.jinja
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```html+jinja
|
||||
<TabGroup>
|
||||
<TabList manual>
|
||||
<Tab target="manual-recent" selected>Recent</Tab>
|
||||
<Tab target="manual-popular">Popular</Tab>
|
||||
<Tab target="manual-disabled" disabled>Disabled</Tab>
|
||||
<Tab target="manual-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="manual-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="manual-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="manual-disabled" hidden>
|
||||
<p>This is the tab panel for "Disabled".</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="manual-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
33
docs/components/ui/Tabs/ManualResult.jinja
Normal file
33
docs/components/ui/Tabs/ManualResult.jinja
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{#css ui/Tabs/Tabs.css #}
|
||||
|
||||
<div class="bg-cover"
|
||||
style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
|
||||
data-md-skip
|
||||
></div>
|
||||
|
||||
<div class="horizontal-tabs" data-md-skip>
|
||||
<TabGroup>
|
||||
<TabList manual>
|
||||
<Tab target="manual-recent" selected>Recent</Tab>
|
||||
<Tab target="manual-popular">Popular</Tab>
|
||||
<Tab target="manual-disabled" disabled>Disabled</Tab>
|
||||
<Tab target="manual-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="manual-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="manual-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="manual-disabled" hidden>
|
||||
<p>This is the tab panel for "Disabled".</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="manual-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
</div>
|
||||
35
docs/components/ui/Tabs/SelectHTML.jinja
Normal file
35
docs/components/ui/Tabs/SelectHTML.jinja
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```html+jinja
|
||||
<TabGroup>
|
||||
<TabSelect>
|
||||
<TabOption target="select-recent">Recent</TabOption>
|
||||
<TabOption target="select-popular">Popular</TabOption>
|
||||
<TabOption target="select-disabled" disabled>Disabled</TabOption>
|
||||
<TabOption target="select-trending">Trending</TabOption>
|
||||
</TabSelect>
|
||||
|
||||
<TabList>
|
||||
<Tab target="select-recent">Recent</Tab>
|
||||
<Tab target="select-popular" selected>Popular</Tab>
|
||||
<Tab target="select-disabled" disabled>Disabled</Tab>
|
||||
<Tab target="select-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="select-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="select-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="select-disabled" hidden>
|
||||
<p>This is the tab panel for "Disabled".</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="select-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
40
docs/components/ui/Tabs/SelectResult.jinja
Normal file
40
docs/components/ui/Tabs/SelectResult.jinja
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
{#css ui/Tabs/Tabs.css #}
|
||||
|
||||
<div class="bg-cover"
|
||||
style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
|
||||
data-md-skip
|
||||
></div>
|
||||
|
||||
<div class="horizontal-tabs" data-md-skip>
|
||||
<TabGroup>
|
||||
<TabSelect>
|
||||
<TabOption target="select-recent">Recent</TabOption>
|
||||
<TabOption target="select-popular">Popular</TabOption>
|
||||
<TabOption target="select-disabled" disabled>Disabled</TabOption>
|
||||
<TabOption target="select-trending">Trending</TabOption>
|
||||
</TabSelect>
|
||||
|
||||
<TabList>
|
||||
<Tab target="select-recent">Recent</Tab>
|
||||
<Tab target="select-popular" selected>Popular</Tab>
|
||||
<Tab target="select-disabled" disabled>Disabled</Tab>
|
||||
<Tab target="select-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="select-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="select-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="select-disabled" hidden>
|
||||
<p>This is the tab panel for "Disabled".</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="select-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
</div>
|
||||
126
docs/components/ui/Tabs/Tabs.css
Normal file
126
docs/components/ui/Tabs/Tabs.css
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
@scope(.horizontal-tabs,.vertical-tabs) {
|
||||
:scope {
|
||||
width: 100%;
|
||||
max-width: 36rem;
|
||||
margin: 10% auto;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.ui-tablist {
|
||||
display: flex;
|
||||
border-radius: 1rem;
|
||||
background-color: #6383dd;
|
||||
padding: 0.5rem;
|
||||
color: #111;
|
||||
}
|
||||
.ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
.ui-tab {
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
color: #222;
|
||||
background-color: rgb(255 255 255 / 0.7);
|
||||
padding: 0.75rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
.ui-tab:focus {
|
||||
outline: 2px solid rgb(255 255 255 / 0.8);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ui-tab.ui-selected {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
.ui-tab.ui-disabled {
|
||||
background-color: rgb(255 255 255 / 0.5);
|
||||
color: #666;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-tab:hover:not(.ui-selected, .ui-disabled),
|
||||
.ui-tab:focus:not(.ui-selected, .ui-disabled) {
|
||||
background-color: rgb(255 255 255 / 0.8);
|
||||
}
|
||||
.ui-tabpanel {
|
||||
margin-top: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
background-color: rgb(254 254 254);
|
||||
border: 2px solid rgb(59 130 246 / 0.8);
|
||||
padding: 0.1rem;
|
||||
min-height: 8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.ui-tabpanel:focus {
|
||||
outline: 2px solid transparent;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ui-tabpanel.ui-hidden {
|
||||
display: none;
|
||||
}
|
||||
.ui-tabpanel b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.ui-tabselect {
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
border-width: 1px;
|
||||
border-color: rgb(209 213 219);
|
||||
background-color: rgb(249 250 251);
|
||||
padding: 0.5rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.25rem;
|
||||
color: rgb(17 24 39);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.ui-tabselect:focus {
|
||||
border-color: rgb(59 130 246);
|
||||
}
|
||||
.ui-tabselect:is(.dark *) {
|
||||
border-color: rgb(75 85 99);
|
||||
background-color: rgb(55 65 81);
|
||||
color: rgb(255 255 255);
|
||||
}
|
||||
.ui-tabselect:is(.dark *)::-moz-placeholder {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
.ui-tabselect:is(.dark *):-ms-input-placeholder {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
.ui-tabselect:is(.dark *)::placeholder {
|
||||
color: rgb(156 163 175);
|
||||
}
|
||||
.ui-tabselect:is(.dark *):focus {
|
||||
border-color: rgb(59 130 246);
|
||||
}
|
||||
}
|
||||
|
||||
@scope(.vertical-tabs) {
|
||||
.ui-tabgroup {
|
||||
display: flex;
|
||||
}
|
||||
.ui-tablist {
|
||||
flex-direction: column;
|
||||
width: 10rem;
|
||||
border-radius: 1rem 0 0 1rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
.ui-tablist > .ui-tab:not([hidden]) ~ .ui-tab:not([hidden]) {
|
||||
margin: 0.5rem 0 0 0;
|
||||
}
|
||||
.ui-tab {
|
||||
border-radius: 0.5rem 0 0 0.5rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.ui-tabpanel {
|
||||
margin: 0;
|
||||
border-radius: 0 1rem 1rem 0;
|
||||
padding: 2rem;
|
||||
min-width: 24rem;
|
||||
}
|
||||
}
|
||||
28
docs/components/ui/Tabs/VerticalHTML.jinja
Normal file
28
docs/components/ui/Tabs/VerticalHTML.jinja
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
{% filter markdown %}{% raw %}
|
||||
```html+jinja
|
||||
<TabGroup>
|
||||
<TabList vertical>
|
||||
<Tab target="vertical-recent" selected>Recent</Tab>
|
||||
<Tab target="vertical-popular">Popular</Tab>
|
||||
<Tab target="vertical-disabled" disabled>Disabled</Tab>
|
||||
<Tab target="vertical-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="vertical-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="vertical-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="vertical-disabled" hidden>
|
||||
<p>This is the tab panel for "Disabled".</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="vertical-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
```
|
||||
{% endraw %}{% endfilter %}
|
||||
33
docs/components/ui/Tabs/VerticalResult.jinja
Normal file
33
docs/components/ui/Tabs/VerticalResult.jinja
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{#css ui/Tabs/Tabs.css #}
|
||||
|
||||
<div class="bg-cover"
|
||||
style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
|
||||
data-md-skip
|
||||
></div>
|
||||
|
||||
<div class="vertical-tabs" data-md-skip>
|
||||
<TabGroup>
|
||||
<TabList vertical>
|
||||
<Tab target="vertical-recent" selected>Recent</Tab>
|
||||
<Tab target="vertical-popular">Popular</Tab>
|
||||
<Tab target="vertical-disabled" disabled>Disabled</Tab>
|
||||
<Tab target="vertical-trending">Trending</Tab>
|
||||
</TabList>
|
||||
|
||||
<TabPanel id="vertical-recent">
|
||||
<p>This is the tab panel for <b>"Recent"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="vertical-popular" hidden>
|
||||
<p>This is the tab panel for <b>"Popular"</b>.</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="vertical-disabled" hidden>
|
||||
<p>This is the tab panel for "Disabled".</p>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel id="vertical-trending" hidden>
|
||||
<p>This is the tab panel for <b>"Trending"</b>.</p>
|
||||
</TabPanel>
|
||||
</TabGroup>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue