diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss index eb96036d8c2fd2d5ac046ed2e8ea519f250cdffe..c850295600673f5c10aeb454a8fa58dace25b224 100644 --- a/src/patterns/04-components/card/_card.scss +++ b/src/patterns/04-components/card/_card.scss @@ -2,6 +2,7 @@ // Styles for Cards.. @use '../../01-core' as *; + $card-border-color: var(--gray-3); $card-accent-border-color: var(--uw-black-primary) !default; $card-link-color: var(--uw-black-primary) !default; @@ -135,10 +136,6 @@ $card-padding: var(--size-2) !default; padding: 0 0 var(--size-1) 0; } -.card__media{ -// -} - // body .card__body { width: 100%; diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss index e000fa2f9ed09404829a882440fb04f01f1e6513..283d7345dbd4c10f46a6840f71558ae984f7adb7 100644 --- a/src/patterns/04-components/card/card--node/_card--node.scss +++ b/src/patterns/04-components/card/card--node/_card--node.scss @@ -13,8 +13,11 @@ max-width: var(--layout-max-width); } .uw-node__with-media &{ - > .card__header{ + > .card__header { padding: var(--size-2); + @media(min-width: $screen-xxl) { + padding: var(--size-2) 0; + } } } .uw-node__without-media & { @@ -83,54 +86,113 @@ } // CSS for specific node card presentations: &--contact { - background: $test-color-9; + @include uw-contained-width(); display: grid; - gap: var(--grid-gap); - + grid-template-columns: 100%; + .card__media{ + @include uw-full-width-margin; + grid-column: 1 / 3; + grid-row: 1 / 2; + margin-bottom: var(--size-2); + @media(min-width: $screen-md) { + margin-bottom: 0; + } + &.uw-contained-width{ + .card__node--uw_ct_contact{ + @include uw-contained-width; + } + } + &.uw-contained-width--wide{ + .card__node--uw_ct_contact{ + @include uw-contained-width; + max-width: 47.0625rem; + } + } + &.uw-contained-width--narrow{ + .card__node--uw_ct_contact{ + @include uw-contained-width; + max-width: 31rem; + } + } + &.layout { + padding: 0; + } + } .card__content { .layout { padding: 0; } } - @media(min-width: $screen-md) { - display: grid; - gap: var(--size-4); - //grid-template-columns: var(--size-20) 1fr; + .uw-node__with-media &{ + @media(min-width: $screen-md) { + grid-template-columns: 100%; + } } - - .card__image { - //grid-column: 1 / 3; - background: $test-color-3; + .uw-node__with-portrait &{ + grid-template-columns: 100%; @media(min-width: $screen-md) { - //grid-column: 1 / 2; + gap: var(--size-4); + grid-template-columns: var(--size-20) 1fr; + .card__image { + grid-column: 1 / 3; + @media(min-width: $screen-md) { + grid-column: 1 / 2; + } + } + .card__header{ + grid-column: 1 / 2; + @media(min-width: $screen-md) { + grid-column: 2 / 3; + } + } } } - .card__header, .card__body, .card__footer { - //grid-column: 1 / 3; - @media(min-width: $screen-md) { - //grid-column: 2 / 3; - } + grid-column: 1 / 3; padding: 0; } .uw-node__without-media & { - background: $test-color-9; @media(min-width: $screen-md) { grid-template-columns: 100%; } - .card__header, .card__body, .card__footer { - //grid-column: 1 / 2; + grid-column: 1 / 2; + } + } + .uw-node__without-media.uw-node__with-portrait &{ + @media(min-width: $screen-md) { + gap: var(--size-4); + grid-template-columns: var(--size-20) 1fr; + .card__image { + grid-column: 1 / 3; + @media(min-width: $screen-md) { + grid-column: 1 / 2; + } + } + .card__header{ + grid-column: 1 / 2; + @media(min-width: $screen-md) { + grid-column: 2 / 3; + } + } + } + } + .uw-node__with-media.uw-node__with-portrait &{ + .card__header{ + grid-column: 1 / 2; + padding: 0; + @media(min-width: $screen-md) { + grid-column: 2 / 3; + } } } } - // CSS for specific node card presentations: &--blog, &--news-item, @@ -149,7 +211,6 @@ margin: 0; padding: var(--size-2) 0; } - } .card__media{ // @@ -229,3 +290,6 @@ } } } +.card__node--uw_ct_contact .card__image{ + display: none !important; +}