Something went wrong on our end
_card--node.scss 8.37 KiB
@use '../../../01-core' as *;
.block-page-title-block {
margin-left: auto;
margin-right: auto;
max-width: var(--layout-max-width);
}
.card__node {
> .card__header,
> .card__footer {
margin: 0 auto;
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
@include uw-contained-width(var(--layout-max-width));
}
}
.uw-node__with-media & {
> .card__header {
padding: 0;
&.uw-node__with-media{
padding: var(--size-2) 0;
}
}
}
.uw-node__without-media & {
.card__header,
.card__footer {
margin: 0 auto;
max-width: var(--layout-max-width);
padding: 0 var(--size-2);
@media(min-width: $screen-xl) {
padding: 0;
}
}
.card__header {
padding: 0 0 var(--size-2) 0;
&:not(:has(*)) {
padding: 0;
}
}
}
.card__tags {
margin: var(--size-2) auto;
max-width: var(--layout-max-width);
padding: 0 var(--size-2);
@media(min-width: $screen-xl) {
padding: 0;
}
}
.card__footer {
margin-bottom: var(--size-3);
margin-top: auto;
padding: 0 var(--size-2);
@media(min-width: $screen-xl) {
padding: 0;
}
}
// CSS for specific node card presentations:
&--web-page {
// Currently this is PL demo only
// needs to be implemented correctly when webpage has media.
.uw-node__with-media & {
.card__header {
&.uw-node__with-media{
padding: var(--size-2) 0; }
}
.card__featured-image {
.card__header {
@include uw-contained-width(var(--layout-max-width));
align-self: flex-end;
margin-bottom: 4rem;
margin-top: 0;
.card__title {
background: rgba(0, 0, 0, 0.5);
color: #fff;
margin-bottom: 0;
margin-top: var(--size-4);
padding: var(--size-3) var(--size-3);
}
}
}
}
}
// CSS for specific node card presentations:
&--contact {
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
display: block;
@media(min-width: $screen-md) {
display: grid;
grid-template-columns: 100%;
}
.card__media{
grid-column: 1 / 3;
grid-row: 1 / 2;
margin-bottom: var(--size-2);
@media(min-width: $screen-md) {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
&.uw-full-width{
@include uw-full-width-margin;
}
&.uw-contained-width{
margin-left: 0;
margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
}
}
&.uw-contained-width--wide{
margin-left: 0;
margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
max-width: 47.0625rem;
}
}
&.uw-contained-width--narrow{
margin-left: 0;
margin-right: 0;
.card__node--uw_ct_contact{
@include uw-contained-width;
max-width: 31rem;
}
}
&.layout {
padding: 0;
}
}
.uw-node__with-media &{
@media(min-width: $screen-md) {
grid-template-columns: 100%;
}
}
.uw-node__with-portrait &{
grid-template-columns: 100%;
@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;
}
}
}
}
.card__body,
.card__footer {
grid-column: 1 / 3;
padding: 0;
}
.uw-node__without-media & {
@media(min-width: $screen-md) {
grid-template-columns: 100%;
padding: var(--size-2) 0;
}
.card__body,
.card__footer {
grid-column: 1 / 3;
}
}
.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;
}
}
.card__body,
.card__footer {
grid-column: 1 / 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,
&--event {
.uw-node__without-media & {
@include uw-contained-width(var(--layout-max-width-narrow));
@media(min-width: $screen-xl) {
// Reset the width so we use all the width when we have room to.
@include uw-contained-width(var(--layout-max-width));
}
}
.uw-node__with-media & {
.card__header{
display: grid;
padding: 0;
.card__title {
margin: 0;
padding: var(--size-2) 0;
}
&.uw-node__with-media {
padding: var(--size-2) 0;
}
}
.card__featured-image {
align-items: center;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
display: grid;
height: 100%;
justify-items: center;
min-height: 30rem;
position: relative;
@media(min-width: $screen-sm) {
min-height: 32rem;
}
@media(min-width: $screen-md) {
min-height: 44rem;
}
.card__header {
// Width is experimental to match one of the wide-width in
// layouts for small width page look.
@include uw-contained-width(49.0625rem);
&.uw-node__with-media{
padding: 0;
}
align-self: end;
margin-bottom: 0;
margin-top: 0;
position: relative;
//top: var(--size-8);
@media(min-width: $screen-xs) {
top: inherit;
}
.card__date {
margin-bottom: 0;
margin-top: 0;
}
.card__title {
background: var(--uw-white);
font-size: var(--font-size-6); @media(min-width: $screen-md) {
font-size: var(--font-size-8);
}
margin: 0;
padding: var(--size-2);
}
.card__sub-title {
background: var(--uw-white);
font-size: var(--font-size-3);
@media(min-width: $screen-md) {
font-size: var(--font-size-4);
}
margin-bottom: 0;
margin-top: 0;
padding: var(--size-1) var(--size-2);
}
.card__author {
background: var(--uw-white);
margin-bottom: 0;
margin-top: 0;
padding: var(--size-1) var(--size-2);
}
}
}
.card__content {
.layout {
&:first-of-type {
padding-top: var(--size-2);
}
}
}
}
// CSS for displaying the title within the node :
}
&--event {
.uw-node__with-media--banner & {
.card__header {
display: grid;
padding: 0;
.card__date {
grid-row: 2 / 3;
}
.view-interact {
grid-row: 2 / 3;
}
.card__title {
margin: 0;
padding: var(--size-2) 0;
grid-row: 1 / 2;
grid-column: 1 / 3;
@media(min-width: $screen-md) {
grid-column: 1 / 2;
}
}
&.uw-node__with-media {
padding: var(--size-2) 0;
}
}
}
}
&--opportunity {
.uw-node__without-media & {
.card__header {
margin-bottom: var(--size-3);
}
} }
&--project {
.card__footer {
.card__tags {
padding: 0;
}
}
}
}