diff --git a/packages/bootstrap4-theme/src/scss/extends/_cards.scss b/packages/bootstrap4-theme/src/scss/extends/_cards.scss index 6f1e2c73e1..419ff0b6fc 100644 --- a/packages/bootstrap4-theme/src/scss/extends/_cards.scss +++ b/packages/bootstrap4-theme/src/scss/extends/_cards.scss @@ -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; } /*------------------------------------------------------------------ @@ -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 { @@ -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 { @@ -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; @@ -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; @@ -133,7 +132,7 @@ Cards - Table of Contents line-height: 1rem; } .card > div:last-child { - padding-bottom:24px; + padding-bottom: 24px; } } @@ -143,7 +142,6 @@ Cards - Table of Contents .card-img-top { height: 240px; } - } .col-lg-6 .card-horizontal .card-img-top { height: auto; @@ -151,11 +149,10 @@ Cards - Table of Contents } } - .card-sm { .card-body { - padding-right:24px; - padding-left:24px; + padding-right: 24px; + padding-left: 24px; } .card-header { padding: 24px 24px 16px 24px; @@ -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 { @@ -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; @@ -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; } } @@ -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; @@ -332,7 +329,7 @@ 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 { @@ -340,21 +337,21 @@ Cards - Table of Contents 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; @@ -362,6 +359,7 @@ Cards - Table of Contents .card-event.card-horizontal .card-content-wrapper { border-left: solid 8px $gold; } + /*------------------------------------------------------------------ 5. Foldable Cards --------------------------------------------------------------------*/ @@ -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; + } + } +} diff --git a/packages/bootstrap4-theme/stories/components/accordion/accordion.stories.js b/packages/bootstrap4-theme/stories/components/accordion/accordion.stories.js index 0bafeef169..9af9c64cee 100644 --- a/packages/bootstrap4-theme/stories/components/accordion/accordion.stories.js +++ b/packages/bootstrap4-theme/stories/components/accordion/accordion.stories.js @@ -7,10 +7,21 @@ storiesOf('Components/Accordion', module) happo: false, }) -.add('Card - Foldable', () => ` +.add('Foldable card', () => `
+
+

Foldable Card

+

The .card-foldable class is a wrapper for a generic card which creates a single section that expands and contracts independently of other surrounding foldable cards.

+
    +
  • The cards will conform to the width of the surrounding container.
    • +
  • There is a recommended character limit of 75 characters for the text within the header of a foldable card.
    • +
+
+
+ +
@@ -82,25 +93,30 @@ storiesOf('Components/Accordion', module)
`) -.add('Card - Foldable, Mobile Only', () => ` -
-
+.add('Disable folding on desktop', () => ` +
+ +
-

Foldable at various breakpoints

+

Foldable cards, disabled at breakpoints

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.

Use a variant of the .desktop-disable along with a .card-foldable class to enable the functionality.

+
+
+
+

-

-
+

This uses the .desktop-disable-md class.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. @@ -110,19 +126,17 @@ storiesOf('Components/Accordion', module)

-
-
-
+

-

-
+

This uses the .desktop-disable-lg class.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. @@ -132,20 +146,17 @@ storiesOf('Components/Accordion', module)

-
- -
-
+

-

-
+

This uses the .desktop-disable-xl class.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. diff --git a/packages/component-forms/package.json b/packages/component-forms/package.json index 1edfce4f8c..1fa456b710 100644 --- a/packages/component-forms/package.json +++ b/packages/component-forms/package.json @@ -1,6 +1,6 @@ { "name": "@asu-design-system/component-forms", - "version": "1.0.8", + "version": "1.0.9", "description": "ASU Web Standards-compliant Preact forms", "main": "src/index.js", "module": "esm/index.js",