mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Improve accordion docs examples and button line height (#3076)
This commit is contained in:
Paweł Kuna authored and 
GitHub committed
1 parent
61b492e449
commit
da79879a7d
5 files changed
+43
-30
No files matched your search
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Updated `.accordion-button` line height to `1.25rem` via the `--tblr-accordion-btn-line-height` variable.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Updated accordion docs examples to use `.bg-surface` on each `.accordion-item`.
|
||||
@@ -1331,6 +1331,7 @@ $accordion-body-padding-y: $accordion-padding-y !default;
|
||||
$accordion-body-padding-x: $accordion-padding-x !default;
|
||||
|
||||
$accordion-button-padding-y: $accordion-padding-y !default;
|
||||
$accordion-button-line-height: 1.25rem !default;
|
||||
$accordion-button-bg: transparent !default;
|
||||
$accordion-button-active-color: inherit !default;
|
||||
$accordion-btn-gap: 0.75rem !default;
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
--accordion-btn-padding-x: var(--accordion-padding-x);
|
||||
--accordion-btn-padding-y: #{$accordion-button-padding-y};
|
||||
--accordion-btn-font-weight: var(--font-weight-medium);
|
||||
--accordion-btn-line-height: #{$accordion-button-line-height};
|
||||
--accordion-body-padding-x: var(--accordion-padding-x);
|
||||
--accordion-body-padding-y: #{$accordion-body-padding-y};
|
||||
--accordion-btn-gap: #{$accordion-btn-gap};
|
||||
@@ -34,6 +35,7 @@
|
||||
padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
|
||||
font-size: inherit;
|
||||
font-weight: var(--accordion-btn-font-weight);
|
||||
line-height: var(--accordion-btn-line-height);
|
||||
color: inherit;
|
||||
text-align: inherit;
|
||||
background-color: transparent;
|
||||
|
||||
@@ -44,26 +44,26 @@ This preview shows the base structure with one expanded section.
|
||||
|
||||
<Example>
|
||||
<div class="accordion" id="accordion-overview">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-1" aria-expanded="true" aria-controls="overview-item-1"> Account details <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="overview-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-overview">
|
||||
<div class="accordion-body">Update profile fields, contact details, and team role settings in this section.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-2" aria-expanded="false" aria-controls="overview-item-2"> Security settings <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="overview-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-overview">
|
||||
<div class="accordion-body">Configure password policy, two-factor requirements, and active device sessions.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#overview-item-3" aria-expanded="false" aria-controls="overview-item-3"> Notification preferences <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="overview-item-3" class="accordion-collapse collapse" data-bs-parent="#accordion-overview">
|
||||
<div class="accordion-body"> Choose which updates to receive by email, browser push, and weekly digest. You can set separate rules for account alerts and product announcements. </div>
|
||||
</div>
|
||||
@@ -79,10 +79,10 @@ Use `.accordion-button-toggle-plus` to hide the first SVG path when expanded. Th
|
||||
|
||||
<Example>
|
||||
<div class="accordion" id="accordion-plus">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#plus-item-1" aria-expanded="true" aria-controls="plus-item-1"> Billing details <span class="accordion-button-toggle accordion-button-toggle-plus"> <Icon name="plus" /> </span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="plus-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-plus">
|
||||
<div class="accordion-body">View invoices, payment method status, and tax details.</div>
|
||||
</div>
|
||||
@@ -96,13 +96,13 @@ Use `.accordion-button-icon` when a row needs a small icon before the label. The
|
||||
|
||||
<Example>
|
||||
<div class="accordion" id="accordion-icon">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#icon-item-1" aria-expanded="true" aria-controls="icon-item-1">
|
||||
<span class="accordion-button-icon"><Icon name="user" /></span> Team profile
|
||||
<span class="accordion-button-toggle"><Icon name="chevron-down" /></span>
|
||||
</button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="icon-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-icon">
|
||||
<div class="accordion-body">Manage member names, avatars, and workspace profile details.</div>
|
||||
</div>
|
||||
@@ -116,18 +116,18 @@ Use `.accordion-flush` to remove side borders and border radius. The first and l
|
||||
|
||||
<Example>
|
||||
<div class="accordion accordion-flush" id="accordion-flush">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-1" aria-expanded="true" aria-controls="flush-item-1"> API access <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="flush-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-flush">
|
||||
<div class="accordion-body">Generate tokens and control access scopes.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-item-2" aria-expanded="false" aria-controls="flush-item-2"> Webhooks <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="flush-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-flush">
|
||||
<div class="accordion-body">Manage delivery URLs, retry policy, and event subscriptions.</div>
|
||||
</div>
|
||||
@@ -143,18 +143,18 @@ Use `.accordion-tabs` to add a gap between items and keep full borders around ea
|
||||
|
||||
<Example>
|
||||
<div class="accordion accordion-tabs" id="accordion-tabs">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-1" aria-expanded="true" aria-controls="tabs-item-1"> Workspace <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="tabs-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-tabs">
|
||||
<div class="accordion-body">Configure workspace name, slug, and timezone.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#tabs-item-2" aria-expanded="false" aria-controls="tabs-item-2"> Notifications <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="tabs-item-2" class="accordion-collapse collapse" data-bs-parent="#accordion-tabs">
|
||||
<div class="accordion-body">Control email, push, and digest notification preferences.</div>
|
||||
</div>
|
||||
@@ -168,10 +168,10 @@ Use `.accordion-inverted` to move the toggle to the start of the button row. Thi
|
||||
|
||||
<Example>
|
||||
<div class="accordion accordion-inverted" id="accordion-inverted">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<div class="accordion-item bg-surface">
|
||||
<h3 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#inverted-item-1" aria-expanded="true" aria-controls="inverted-item-1"> Access policy <span class="accordion-button-toggle"><Icon name="chevron-down" /></span> </button>
|
||||
</h2>
|
||||
</h3>
|
||||
<div id="inverted-item-1" class="accordion-collapse collapse show" data-bs-parent="#accordion-inverted">
|
||||
<div class="accordion-body">Set default policy, invite flow, and sign-in restrictions.</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user