woocommerce/plugins/woocommerce-admin/client/header/activity-panel/panels/inbox/style.scss

210 lines
3.2 KiB
SCSS

.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;
}
}
}