Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-17 12:50:03 +04:00
Code Issues Projects Releases Wiki Activity

Rollback accordion component structure (#2207)

Browse Source
This commit is contained in:
Paweł Kuna
2025-03-10 21:53:44 +01:00
committed by GitHub
parent cd592b4743
commit aea3b0a614
3 changed files with 52 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/chatty-bottles-jam.md
+6
View File
@@ -0,0 +1,6 @@
---
"@tabler/core": patch
"preview": patch
---
Rollback accordion component structure
core/scss/ui/_accordion.scss
+31 -26
View File
@@ -3,41 +3,57 @@
--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
--#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-gap: 0;
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
--#{$prefix}accordion-btn-toggle-width: 1.25rem;
--#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
--#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
--#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
--#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
--#{$prefix}accordion-gap: 0;
display: flex;
flex-direction: column;
gap: var(--#{$prefix}accordion-gap);
}
.accordion-header {
.accordion-button {
position: relative;
display: flex;
gap: 1rem;
align-items: center;
width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
color: var(--#{$prefix}accordion-btn-color);
text-align: left;
color: inherit;
text-align: inherit;
background-color: transparent;
border: 0;
overflow-anchor: none;
transition: transform $transition-time;
font-size: inherit;
font-weight: var(--#{$prefix}accordion-btn-font-weight);
gap: .75rem;
&:not(.collapsed) {
border-bottom-color: transparent;
box-shadow: none;
color: var(--#{$prefix}accordion-active-color);
}
}
.accordion-header {
margin: 0;
position: relative;
display: flex;
gap: 1rem;
align-items: center;
width: 100%;
color: var(--#{$prefix}accordion-btn-color);
text-align: left;
background-color: transparent;
border: 0;
overflow-anchor: none;
transition: transform $transition-time;
&:hover {
z-index: 2;
@@ -55,11 +71,11 @@
}
}
.accordion-header-icon {
.accordion-button-icon {
color: var(--#{$prefix}secondary);
}
.accordion-header-toggle {
.accordion-button-toggle {
display: flex;
line-height: 1;
transition: $transition-time transform;
@@ -69,7 +85,7 @@
width: var(--#{$prefix}accordion-btn-toggle-width);
height: var(--#{$prefix}accordion-btn-toggle-width);
.accordion-header:not(.collapsed) & {
.accordion-button:not(.collapsed) & {
transform: rotate(-180deg);
color: var(--#{$prefix}accordion-active-color);
}
@@ -79,23 +95,14 @@
}
}
.accordion-header-toggle-plus {
.accordion-header:not(.collapsed) & {
.accordion-button-toggle-plus {
.accordion-button:not(.collapsed) & {
path:first-child {
opacity: 0;
}
}
}
.accordion-header-text {
margin-bottom: 0;
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0;
}
}
.accordion-item {
color: var(--#{$prefix}accordion-color);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
@@ -145,13 +152,11 @@
border-bottom: 0;
}
// stylelint-disable selector-max-class
> .accordion-collapse,
> .accordion-header .accordion-button,
> .accordion-header .accordion-button.collapsed {
@include border-radius(0);
}
// stylelint-enable selector-max-class
}
}
@@ -165,7 +170,7 @@
}
.accordion-inverted {
.accordion-header-toggle {
.accordion-button-toggle {
order: -1;
margin-left: 0;
}
preview/pages/_includes/ui/accordion.html
+15 -13
View File
@@ -7,19 +7,21 @@
<div class="accordion{% for type in accordion-types %} accordion-{{ type }}{% endfor %}" id="accordion-{{ accordion-id }}">
{% for question in questions limit: accordion-count %}
<div class="accordion-item">
<button class="accordion-header {% unless forloop.index == 1 %}collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ forloop.index }}-{{ accordion-id }}" aria-expanded="{% if forloop.index == 1 %}true{% else %}false{% endif %}">
{% if include.show-icon %}
<div class="accordion-header-icon">
{% include "ui/icon.html" icon="link" %}
</div>
{% endif %}
<div class="accordion-header-text">
<h4>{{ question.question }}</h4>
</div>
<div class="accordion-header-toggle{% if include.toggle-icon %} accordion-header-toggle-plus{% endif %}">
{% include "ui/icon.html" icon=accordion-toggle-icon %}
</div>
</button>
<div class="accordion-header">
<button class="accordion-button{% unless forloop.index == 1 %} collapsed{% endunless %}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{ forloop.index }}-{{ accordion-id }}" aria-expanded="{% if forloop.index == 1 %}true{% else %}false{% endif %}">
{% if include.show-icon %}
<div class="accordion-button-icon">
{% include "ui/icon.html" icon="link" %}
</div>
{% endif %}
{{ question.question }}
<div class="accordion-button-toggle{% if include.toggle-icon %} accordion-button-toggle-plus{% endif %}">
{% include "ui/icon.html" icon=accordion-toggle-icon %}
</div>
</button>
</div>
<div id="collapse-{{ forloop.index }}-{{ accordion-id }}" class="accordion-collapse collapse{% if forloop.index == 1 %} show{% endif %}" data-bs-parent="#accordion-{{ accordion-id }}">
<div class="accordion-body">
{{ question.answer }}