Accordion styling issue:

[furti]

Round corners on last panel

When the last panel of a accordion is expanded, the bottom corners of the panel are still rounded. And it seems that there are two borders at the bottom of the panel.

I consider this as a minor inconsistency as the stackview does not have rounded corners and duplicated borders for the last panel.

Accordion

Stack View

How to reproduce

Go to https://clarity.design/documentation/accordion and open the last panel of the example accordion to see the rounded corners.

Go to https://clarity.design/documentation/stack-view and open the last panel of the example stack view to see no rounded corners.

Expected behavior

There should be no rounded corners and duplicated borders on the last panel of the accordion.

Versions

App

Clarity Documentation for v2.

Device:

• Type: Notebook
• OS: Windows 10
• Browser chrome
• Version 67

[furti]

As a workaround I added this styles to my scss files.

.clr-accordion:not(.clr-stepper-forms) .clr-accordion-panel:last-child {
    .clr-accordion-panel-open {
        .clr-accordion-header {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            border-bottom: none;
        }
    }
}

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.