Skip to content

Commit

Permalink
feat: add accordion component
Browse files Browse the repository at this point in the history
  • Loading branch information
@zuramai
zuramai committed Dec 21, 2022
1 parent 15586a8 commit 41cd619
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 68 deletions.
17 changes: 9 additions & 8 deletions src/assets/scss/_variables.scss
View file
Expand Up @@ -1227,14 +1227,14 @@ $card-img-overlay-padding: $spacer !default;

$card-group-margin: math.div($grid-gutter-width, 2) !default;

// Accordion
// scss-docs-start accordion-variables
$accordion-padding-y: 1rem !default;
$accordion-padding-x: 1.25rem !default;
$accordion-color: $body-color !default;
$accordion-bg: transparent !default;
$accordion-color: $body-color !default; // Sass variable because of $accordion-button-icon
$accordion-bg: $card-bg !default;
$accordion-border-width: $border-width !default;
$accordion-border-color: rgba($black, .125) !default;
$accordion-border-radius: $border-radius !default;
$accordion-border-color: var(--#{$prefix}border-color) !default;
$accordion-border-radius: calc($border-radius + .2rem) !default;
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width) !default;

$accordion-body-padding-y: $accordion-padding-y !default;
Expand All @@ -1243,7 +1243,7 @@ $accordion-body-padding-x: $accordion-padding-x !default;
$accordion-button-padding-y: $accordion-padding-y !default;
$accordion-button-padding-x: $accordion-padding-x !default;
$accordion-button-color: $accordion-color !default;
$accordion-button-bg: $accordion-bg !default;
$accordion-button-bg: var(--#{$prefix}accordion-bg) !default;
$accordion-transition: $btn-transition, border-radius .15s ease !default;
$accordion-button-active-bg: tint-color($component-active-bg, 90%) !default;
$accordion-button-active-color: shade-color($primary, 10%) !default;
Expand All @@ -1252,13 +1252,14 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
$accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;

$accordion-icon-width: 1.25rem !default;
$accordion-icon-color: $accordion-color !default;
$accordion-icon-color: $accordion-button-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
$accordion-icon-transition: transform .2s ease-in-out !default;
$accordion-icon-transform: rotate(180deg) !default;
$accordion-icon-transform: rotate(-180deg) !default;

$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// scss-docs-end accordion-variables

// Tooltips

Expand Down
125 changes: 65 additions & 60 deletions src/component-card.html
View file
Expand Up @@ -43,69 +43,71 @@ <h4 class="card-title">Card With Header And Footer</h4>
</div>
<div class="card collapse-icon accordion-icon-rotate">
<div class="card-header">
<h1 class="card-title pl-1">Accordion</h1>
<h4 class="card-title pl-1">Accordion</h4>
</div>
<div class="card-content">
<div class="card-body">
<div class="accordion" id="cardAccordion">
<div class="card">
<div class="card-header" id="headingOne" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
role="button">
<span class="collapsed collapse-title">Accordion Item 1</span>
</div>
<div id="collapseOne" class="collapse pt-1" aria-labelledby="headingOne"
data-parent="#cardAccordion">
<div class="card-body">
Cheesecake muffin cupcake dragée lemon drops tiramisu cake gummies chocolate
cake. Marshmallow tart
croissant. Tart dessert tiramisu marzipan lollipop lemon drops.
<div class="card-body">
<div class="accordion" id="cardAccordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show"
aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by
default, until the collapse plugin adds the appropriate classes that we use
to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div class="card collapse-header">
<div class="card-header" id="headingTwo" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"
role="button">
<span class="collapsed collapse-title">Accordion Item 2</span>
</div>
<div id="collapseTwo" class="collapse pt-1" aria-labelledby="headingTwo"
data-parent="#cardAccordion">
<div class="card-body">
Pastry pudding cookie toffee bonbon jujubes jujubes powder topping. Jelly
beans
gummi bears sweet
roll bonbon muffin liquorice. Wafer lollipop sesame snaps.
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse"
aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use
to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div class="card open">
<div class="card-header" id="headingThree" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="true"
aria-controls="collapseThree" role="button">
<span class="collapsed collapse-title">Accordion Item 3</span>
</div>
<div id="collapseThree" class="collapse show pt-1" aria-labelledby="headingThree"
data-parent="#cardAccordion">
<div class="card-body">
Sweet pie candy jelly. Sesame snaps biscuit sugar plum. Sweet roll topping
fruitcake. Caramels
liquorice biscuit ice cream fruitcake cotton candy tart.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFour" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false"
aria-controls="collapseFour" role="button">
<span class="collapsed collapse-title">Accordion Item 4</span>
</div>
<div id="collapseFour" class="collapse pt-1" aria-labelledby="headingFour"
data-parent="#cardAccordion">
<div class="card-body">
Sweet pie candy jelly. Sesame snaps biscuit sugar plum. Sweet roll topping
fruitcake. Caramels
liquorice biscuit ice cream fruitcake cotton candy tart.
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse"
aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the third item's accordion body.</strong> It is hidden by
default, until the collapse plugin adds the appropriate classes that we use
to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this
with custom CSS or overriding our default variables. It's also worth noting
that just about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
Expand Down Expand Up @@ -271,13 +273,16 @@ <h4 class="card-title">Social Media</h4>
</div>
<div class="btn-group align-items-center mx-2 px-1">
<button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
<i class="bi bi-heart d-flex align-items-center justify-content-center text-secondary"></i>
<i
class="bi bi-heart d-flex align-items-center justify-content-center text-secondary"></i>
</button>
<button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
<i class="bi bi-chat d-flex align-items-center justify-content-center text-secondary"></i>
<i
class="bi bi-chat d-flex align-items-center justify-content-center text-secondary"></i>
</button>
<button type="button" class="btn btn-link p-2 m-1 text-decoration-none">
<i class="bi bi-bookmark d-flex align-items-center justify-content-center text-secondary"></i>
<i
class="bi bi-bookmark d-flex align-items-center justify-content-center text-secondary"></i>
</button>
</div>
</div>
Expand Down Expand Up @@ -398,4 +403,4 @@ <h4 class="card-title">Card title</h4>
</div>
</section>
</div>
{% endblock %}
{% endblock %}
4 changes: 4 additions & 0 deletions src/sidebar-items.json
View file
Expand Up @@ -13,6 +13,10 @@
"key": "component",
"icon": "stack",
"submenu": [
{
"name": "Accordion",
"url": "component-accordion.html"
},
{
"name": "Alert",
"url": "component-alert.html"
Expand Down

0 comments on commit 41cd619

Please sign in to comment.