$collection-thumb-width: 10; $collection-thumb-width-mobile: 8; $collection-thumb-margin: 2;
@include override-prose {
.usa-collection { @include typeset($theme-collection-font-family, "sm", 3); @extend %usa-list; @include u-padding-left(0); } .usa-collection__item { @extend %usa-list-item; @include unstyled-list; @include u-align-items("align-start"); @include u-border-top(1px); @include u-display("flex"); @include u-margin-y(2); @include u-padding-top(2); }
}
.usa-collection__img, .usa-collection__calendar-date {
@include media-block-img; width: units($collection-thumb-width-mobile); margin-right: units($collection-thumb-margin); @include at-media("tablet") { width: units($collection-thumb-width); }
}
.usa-collection__body {
@include u-flex(1);
}
.usa-collection__heading {
@include typeset($theme-collection-header-typeset); @include u-margin-bottom(0); @include u-margin-top(0);
}
.usa-collection__description {
@include u-margin-y(1);
}
.usa-collection__meta {
@include unstyled-list; @include u-margin-top(0.5);
}
.usa-collection__meta-item {
@include u-margin-top(0.5); @include typeset("ui", "2xs", 3); display: block; margin-right: units(1); &.usa-tag { @include u-bg("base-lighter"); @include u-line-height("ui", 1); @include u-padding-y(0.5); @include u-text("ink"); display: inline-block; margin-top: units(0.5); &--new { @include u-bg("accent-warm-dark"); @include u-text("white"); } }
}
.usa-collection__calendar-date {
text-decoration: none;
}
.usa-collection__calendar-date-month, .usa-collection__calendar-date-day {
@include u-font("ui", 6); display: block; font-weight: fw("bold"); padding: units(0.5); text-align: center; @include at-media("tablet") { padding: units(1); }
}
.usa-collection__calendar-date-month {
@include u-radius-top("sm"); background-color: color("primary"); color: color("white");
}
.usa-collection__calendar-date-day {
@include u-radius-bottom("sm"); border: 1px solid color("primary"); color: color("primary");
}
.usa-collection–condensed {
.usa-collection__item { @include u-margin-y(1); @include u-padding-top(1); }
}