/** @format */ .woocommerce-activity-card { position: relative; padding: $fallback-gutter; padding: $gutter; background: $white; border-bottom: 1px solid $core-grey-light-400; color: $gray-text; @include font-size( 13 ); display: grid; grid-template-columns: 84px 1fr; grid-template-areas: 'icon header' 'icon body' 'icon actions'; @include breakpoint( '<782px' ) { grid-template-columns: 76px 1fr; } } .woocommerce-activity-card__unread { position: absolute; top: calc(#{ $fallback-gutter } - 6px); top: calc(#{ $gutter } - 6px); right: calc(#{ $fallback-gutter } - 6px); right: calc(#{ $gutter } - 6px); width: 6px; height: 6px; border-radius: 50%; background: $core-orange; } .woocommerce-activity-card__icon { grid-area: icon; fill: $core-grey-light-600; @include breakpoint( '<782px' ) { .gridicon, img { height: 24px; width: 24px; margin-left: $gap-small; } } } .woocommerce-activity-card__header { margin-bottom: $gap; display: flex; flex-direction: column; a { color: $woocommerce; text-decoration: none; } .woocommerce-activity-card__title { margin: 0; @include font-size( 13 ); order: 2; } .woocommerce-activity-card__date { color: $core-grey-dark-300; text-transform: uppercase; @include font-size( 11 ); margin-bottom: $gap-small; order: 1; } .woocommerce-activity-card__subtitle { order: 3; } @include breakpoint( '>782px' ) { grid-area: header; display: grid; grid-template: 'title date' 'subtitle date' / 1fr auto; .woocommerce-activity-card__title { grid-area: title; } .woocommerce-activity-card__date { display: block; grid-area: date; justify-self: end; margin-bottom: 0; } .woocommerce-activity-card__subtitle { grid-area: subtitle; } } } .woocommerce-activity-card__body { grid-area: body; } .woocommerce-activity-card__actions { grid-area: actions; margin-top: $gap; // Ensures any immediate child with a sibling has space between the items & > * + * { margin-left: 0.5em; } a.components-button.is-button { color: $gray-text; } } .woocommerce-activity-card.is-loading { .is-placeholder { @include placeholder(); display: inline-block; height: 16px; } .woocommerce-activity-card__title { width: 80%; } .woocommerce-activity-card__subtitle { margin-top: $gap-smallest; } .woocommerce-activity-card__date { width: 100%; margin-bottom: $gap; @include breakpoint( '>782px' ) { text-align: right; margin-bottom: 0; } .is-placeholder { // Fixed width for a fake date width: 68px; } } .woocommerce-activity-card__icon { margin-right: $fallback-gutter; margin-right: $gutter; .is-placeholder { height: 48px; width: 48px; } @include breakpoint( '<782px' ) { .gridicon, img, .is-placeholder { height: 24px; width: 24px; margin-left: $gap-small; } } } .woocommerce-activity-card__body .is-placeholder { width: 100%; margin-bottom: $gap-smallest; &:last-of-type { width: 65%; margin-bottom: 0; } } .woocommerce-activity-card__actions { .is-placeholder { width: 91px; height: 34px; } } }