.woocommerce-inbox-message { position: relative; color: $gray-text; background: $core-grey-light-200; border-radius: 2px; @include font-size( 13 ); margin: 20px; -ms-box-orient: horizontal; &.banner { -webkit-flex-direction: column; flex-direction: column; img { width: 100%; height: 120px; } } &.thumbnail { display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; img { width: 128px; height: 100%; } } .woocommerce-homepage-column & { margin: 20px 0; } &:not(.is-placeholder) { border: 1px solid $light-gray-secondary; } &.message-is-unread { background: $studio-white; } .line { width: 100%; } .third-line { width: 33%; } .fifth-line { width: 20%; } .sixth-line { width: 16%; } } .woocommerce-inbox-message__content { .woocommerce-inbox-message__title { color: $dark-gray-primary; @include font-size( 16 ); font-style: normal; line-height: 1.5; font-weight: normal; margin: $gap-smaller 0; .message-is-unread & { font-weight: bold; } .is-placeholder & { & > div { @include placeholder(); margin: 5px 0; } margin-bottom: 10px; } } .woocommerce-inbox-message__date { color: $medium-gray-text; @include font-size( 12 ); margin-bottom: $gap; font-style: normal; font-weight: normal; line-height: 16px; .is-placeholder & { & > div { @include placeholder(); } margin-bottom: 10px; } } } .woocommerce-inbox-message__text { color: $medium-gray-text; font-style: normal; font-weight: normal; @include font-size( 14 ); line-height: 20px; & > p:first-child { margin-top: 0; } & > p:last-child { margin-bottom: 0; } .is-placeholder & { & > div { @include placeholder(); margin: 5px 0; } } } .woocommerce-inbox-message__actions { padding-top: $gap; border-top: 1px solid $light-gray-tertiary; // Ensures any immediate child with a sibling has space between the items & > * + * { margin-left: 0.5em; } a, button { cursor: pointer; } .components-dropdown { display: inline; .components-popover__content { min-width: 195px; margin-top: 7px; ul { padding: 0 20px; } li { margin: 12px 0; cursor: pointer; } li:first-child { padding-top: 5px; } li:last-child { padding-bottom: 5px; } } } .is-placeholder & { & > div { @include placeholder(); float: left; height: 28px; margin-right: 8px; } } } .woocommerce-inbox-dismiss-confirmation_modal { text-align: left; } .woocommerce-inbox-dismiss-confirmation_wrapper { p { font-size: 16px; color: #50575e; } .woocommerce-inbox-dismiss-confirmation_buttons { text-align: right; button { margin-left: 10px; } } } .woocommerce-inbox-message__wrapper > div { padding: $gap $gap-large; .is-placeholder & { padding: 10px 24px; display: flow-root; } } .woocommerce-inbox-message__image { .banner-block { .is-placeholder & { @include placeholder(); width: 100%; height: 120px; } } } .woocommerce-layout__inbox-panel-header { .woocommerce-homepage-column & { padding: 0 24px; } } .woocommerce-homepage-notes-wrapper { .is-inbox & { height: calc(100% - 30px); & > div { overflow: auto; } } }