Skip to content

Commit

Permalink
Merge pull request #89 from ASU/UDS-248-accordions
Browse files Browse the repository at this point in the history 
Small adjustments to accordion spacing (UDS-248)
  • Loading branch information
@SteveRyan-ASU
SteveRyan-ASU authored Aug 3, 2020
2 parents 15aa65c + 027c2bc commit d049094
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 60 deletions.
95 changes: 53 additions & 42 deletions packages/bootstrap4-theme/src/scss/extends/_cards.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ Cards - Table of Contents
-------------------------------------------------------------------*/

.row-spaced {
margin-bottom:-32px;
margin-bottom: -32px;
}
.row-spaced > .col,
.row-spaced > div {
margin-bottom:32px;
margin-bottom: 32px;
}

/*------------------------------------------------------------------
Expand All @@ -32,7 +32,7 @@ Cards - Table of Contents
box-shadow: $uds-component-card-basic-hover-box-shadow;
}
.card-hover:active {
transform: scale(.95);
transform: scale(0.95);
cursor: $uds-component-card-basic-hover-cursor;
}
.card-hover:focus {
Expand All @@ -49,7 +49,7 @@ Cards - Table of Contents
.card-hover > button:focus {
outline: 0;
box-shadow: 0 0 8px #00baff !important;
border:0;
border: 0;
}

.card-icon-top {
Expand All @@ -76,25 +76,24 @@ Cards - Table of Contents
}
.card-footer {
padding: 0 32px 24px 32px;
border-top:0;
border-top: 0;
}
.card-tags {
padding: 0 32px 24px 32px;
border-top:0;
border-top: 0;
margin-top: -8px;
}
.card-tags .btn-tag {
margin-top:8px;
margin-top: 8px;
}
.card-button {
margin-top: $uds-component-card-basic-button-margin-top;
padding: 0 32px 24px 32px;
}
.card > div:last-child {
padding-bottom:32px;
padding-bottom: 32px;
}


@include media-breakpoint-down(md) {
.card-icon-top {
width: $uds-component-card-basic-icon-top-width;
Expand All @@ -116,11 +115,11 @@ Cards - Table of Contents
}
.card-footer {
padding: 0 24px 24px 24px;
border-top:0;
border-top: 0;
}
.card-tags {
padding: 0 24px 24px 24px;
border-top:0;
border-top: 0;
}
.card-button {
margin-top: $uds-component-card-basic-button-margin-top;
Expand All @@ -133,7 +132,7 @@ Cards - Table of Contents
line-height: 1rem;
}
.card > div:last-child {
padding-bottom:24px;
padding-bottom: 24px;
}
}

Expand All @@ -143,19 +142,17 @@ Cards - Table of Contents
.card-img-top {
height: 240px;
}

}
.col-lg-6 .card-horizontal .card-img-top {
height: auto;
max-width: 40%;
}
}


.card-sm {
.card-body {
padding-right:24px;
padding-left:24px;
padding-right: 24px;
padding-left: 24px;
}
.card-header {
padding: 24px 24px 16px 24px;
Expand All @@ -165,24 +162,24 @@ Cards - Table of Contents
height: 160px;
}
.card-footer-link {
padding-right:24px;
padding-left:24px;
padding-right: 24px;
padding-left: 24px;
}
.card-button {
padding-right:24px;
padding-left:24px;
padding-right: 24px;
padding-left: 24px;
}
.card-link {
padding-right:24px;
padding-left:24px;
padding-right: 24px;
padding-left: 24px;
}
.card-tags {
padding-right:24px;
padding-left:24px;
padding-right: 24px;
padding-left: 24px;
}
.card-event-details {
padding-right:24px;
padding-left:24px;
padding-right: 24px;
padding-left: 24px;
}
}
.card-lg {
Expand Down Expand Up @@ -249,8 +246,8 @@ Cards - Table of Contents
margin-left: 24px;
margin-right: 24px;
background-color: $white;
padding-left:16px;
padding-right:16px;
padding-left: 16px;
padding-right: 16px;
}
.card-story .card-header {
padding-top: 24px;
Expand Down Expand Up @@ -297,8 +294,8 @@ Cards - Table of Contents
margin-left: 0;
margin-right: 0;
background-color: $white;
padding-left:24px;
padding-right:24px;
padding-left: 24px;
padding-right: 24px;
}
}

Expand All @@ -309,19 +306,19 @@ Cards - Table of Contents
border-top: solid 8px $gold;
}
.card-event-details {
display:flex;
display: flex;
padding: $uds-component-card-basic-body-padding;
padding: 0 32px 24px 32px;
}
.card-event-details > div:first-child {
margin-right:16px;
margin-right: 16px;
}
.card-event-icons {
display:flex;
display: flex;
}
.card-event-icons > div:first-child {
width:16px;
margin-right:8px;
width: 16px;
margin-right: 8px;
}
.card-horizontal {
flex-direction: row;
Expand All @@ -332,36 +329,37 @@ Cards - Table of Contents
}
.card-horizontal .card-img-top {
height: 160px !important;
max-width:100% !important;
max-width: 100% !important;
width: 100% !important;
}
.card-event.card-horizontal .card-content-wrapper {
border-top: solid 8px #ffc627;
border-left: 0 !important;
}
.card-story.card-horizontal .card-content-wrapper {
margin-right:16px;
margin-left:16px;
margin-top:-24px;
margin-right: 16px;
margin-left: 16px;
margin-top: -24px;
margin-bottom: 0;
}
}
.card-content-wrapper {
padding-bottom:0 !important;
padding-bottom: 0 !important;
}
.card-story.card-horizontal .card-img-top {
margin-bottom: 0;
margin-bottom: 0;
}
.card-horizontal .card-img-top {
height: auto;
max-width:40%;
max-width: 40%;
}
.card-event.card-horizontal .card-header {
border-top: 0;
}
.card-event.card-horizontal .card-content-wrapper {
border-left: solid 8px $gold;
}

/*------------------------------------------------------------------
5. Foldable Cards
--------------------------------------------------------------------*/
Expand Down Expand Up @@ -486,3 +484,16 @@ Cards - Table of Contents
@include desktop-disable;
}
}

/*------------------------------------------------------------------
7. Accordion
--------------------------------------------------------------------*/
.accordion {
.card.card-foldable {
border-bottom: 1px solid $uds-color-base-gray-3;

& + .card-foldable {
margin-top: $uds-size-spacing-3;
}
}
}
47 changes: 29 additions & 18 deletions packages/bootstrap4-theme/stories/components/accordion/accordion.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,21 @@ storiesOf('Components/Accordion', module)
happo: false,
})

.add('Card - Foldable', () => `
.add('Foldable card', () => `
<div class="container my-5">
<div class="row">
<div class="col-md-12">
<h4>Foldable Card</h4>
<p>The <code>.card-foldable</code> class is a wrapper for a generic card which creates a single section that expands and contracts independently of other surrounding foldable cards.</p>
<ul>
<li>The cards will conform to the width of the surrounding container.</li>
<li>There is a recommended character limit of 75 characters for the text within the header of a foldable card.</li>
</ul>
</div>
</div>
<div class="row mt-4">
<div class="col-md-4">
<div class="card card-foldable">
Expand Down Expand Up @@ -82,25 +93,30 @@ storiesOf('Components/Accordion', module)
</div>
`)

.add('Card - Foldable, Mobile Only', () => `
<div class="container">
<div class="row my-4">
.add('Disable folding on desktop', () => `
<div class="container my-5">
<div class="row">
<div class="col">
<h3>Foldable at various breakpoints</h3>
<h4>Foldable cards, disabled at breakpoints</h4>
<p>Several utility class were created to allow an foldable card to display as a fully expanded normal card upon reaching a screen size of a specific breakpoint.</p>
<p>Use a variant of the <code>.desktop-disable</code> along with a <code>.card-foldable</code> class to enable the functionality.</p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-7 mb-4">
<div class="card card-foldable desktop-disable-md">
<div class="card-header">
<h4>
<a id="example-header-4" data-toggle="collapse" href="#example-content-4" role="button" aria-expanded="false" aria-controls="example-content-4">This should look like a normal card until the md breakpoint
<a id="example-header-1" data-toggle="collapse" href="#example-content-1" role="button" aria-expanded="false" aria-controls="example-content-1">This should look like a normal card until the md breakpoint
<span class="fas fa-chevron-up"></span>
</a>
</h4>
</div>
<div id="example-content-4" class="collapse card-body" aria-labelledby="example-header-4">
<div id="example-content-1" class="collapse card-body" aria-labelledby="example-header-1">
<p>This uses the <code>.desktop-disable-md</code> class.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Expand All @@ -110,19 +126,17 @@ storiesOf('Components/Accordion', module)
</div>
</div>
</div><!-- end .col -->
</div><!-- end .row -->
<div class="row my-4">
<div class="col">
<div class="col-md-7 mb-4">
<div class="card card-foldable desktop-disable-lg">
<div class="card-header">
<h4>
<a id="example-header-4" data-toggle="collapse" href="#example-content-4" role="button" aria-expanded="false" aria-controls="example-content-4">This will become an accordion at the lg breakpoint.
<a id="example-header-2" data-toggle="collapse" href="#example-content-2" role="button" aria-expanded="false" aria-controls="example-content-2">This will become an accordion at the lg breakpoint.
<span class="fas fa-chevron-up"></span>
</a>
</h4>
</div>
<div id="example-content-4" class="collapse card-body" aria-labelledby="example-header-4">
<div id="example-content-2" class="collapse card-body" aria-labelledby="example-header-2">
<p>This uses the <code>.desktop-disable-lg</code> class.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Expand All @@ -132,20 +146,17 @@ storiesOf('Components/Accordion', module)
</div>
</div>
</div><!-- end .col -->
</div><!-- end .row -->
<div class="row my-4">
<div class="col">
<div class="col-md-7 mb-4">
<div class="card card-foldable desktop-disable-xl">
<div class="card-header">
<h4>
<a id="example-header-4" data-toggle="collapse" href="#example-content-4" role="button" aria-expanded="false" aria-controls="example-content-4">Collapses to an accordion at the xl breakpoint
<a id="example-header-3" data-toggle="collapse" href="#example-content-3" role="button" aria-expanded="false" aria-controls="example-content-3">Collapses to an accordion at the xl breakpoint
<span class="fas fa-chevron-up"></span>
</a>
</h4>
</div>
<div id="example-content-4" class="collapse card-body" aria-labelledby="example-header-4">
<div id="example-content-3" class="collapse card-body" aria-labelledby="example-header-3">
<p>This uses the <code>.desktop-disable-xl</code> class.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Expand Down

0 comments on commit d049094

Please sign in to comment.