fix border issue for nested card inside accordions

[ovpv]

After analysing the code in scss/_card.scss, in line 281, the styles added for .card class inside .accordian class is targeting all the cards inside instead of its immediate children elements with the class .card.

Code now:

.accordion {
  .card {
    ...
  }
}

Fix:

.accordion {
  > .card {
    ...
  }
}

Fixes #27510, fixes #26556.

[MartijnCuppens]

Hi @ovpv,

Can you provide a demo to make clear what this fixes?

[ovpv]

The issue demo
https://codepen.io/JJCoolBean/pen/KGraWv

The fix demo
https://codepen.io/ovpv/pen/vvyRVj

@MartijnCuppens , In the above fix demo, you can see that the the border-bottom: 0 property is only applied to the accordian cards and not the child cards inside the accordian card-body.

[MartijnCuppens]

Hi @ovpv,

Thanks for the PR! If you open a PR which closes an issue, you can add Closes #issuenumber so that we can easily check what the PR is about. This also automatically closes the issue if the PR gets merged.

Apart from that, this looks good! Thanks for the solution.

[MartijnCuppens]

LGTM! 👍

[ovpv]

Hi @ovpv,

Thanks for the PR! If you open a PR which closes an issue, you can add Closes #issuenumber so that we can easily check what the PR is about. This also automatically closes the issue if the PR gets merged.

Apart from that, this looks good! Thanks for the solution.

Thanks for the approval @MartijnCuppens . This is my first contribution on github! 😄

I will make sure that I add the necessary details for a PR in my future contributions 👍

[osnofa]

It didn't solve everything. Please try this:

<div class="container">
        <br />
        <div class="accordion">
          <div class="card">
            <div class="card-header" data-toggle="collapse" id="cardHead" href="#collapseAccordCard" aria-expanded="true">
              <a class="card-title">Accordian Title</a>
            </div>
            <div id="collapseAccordCard" class="collapse show" aria-labelledby="headingAccordCard">
              <div class="card-body">
                <div class="row">
                  <div class="col-md-4">
                    <div class="card">
                      <div class="card-body">Lorem Ipsum 1</div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card">
                  <div class="card-body">Lorem Ipsum 2</div>
                              </div>
                          </div>
                          <div class="col-md-4">
                              <div class="card">
                                  <div class="card-body">Lorem Ipsum 3</div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div> 
  </div> 
  </div> 

[XhmikosR]

@osnofa you should probably make a new issue.

[osnofa]

@osnofa you should probably make a new issue.

Done. #29426