woocommerce/plugins/woocommerce-admin/client/inbox-panel/style.scss

237 lines
3.8 KiB
SCSS

.woocommerce-inbox-message {
position: relative;
color: $gray-text;
background: $gray-100;
border-radius: 2px;
@include font-size( 13 );
margin: 0 0 $gap-large;
-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 $gray-200;
}
&.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: $gray-900;
@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: $gray-700;
@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: $gray-700;
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 $gray-200;
// 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;
ul {
text-align: center;
}
li {
margin: 0;
cursor: pointer;
}
}
}
.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: $gray-700;
}
.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;
}
}
}
#activity-panel-inbox {
margin: 0 $gap-large;
}
.woocommerce-layout__inbox-panel-header {
padding: $gap-large;
.woocommerce-homepage-column & {
padding: 0 24px;
}
}
// Tweak to fix dropdown and placeholder in IE 11
@media all and ( -ms-high-contrast: none ), ( -ms-high-contrast: active ) {
.woocommerce-admin-dismiss-dropdown {
margin-top: 0;
}
.woocommerce-inbox-message__wrapper {
.is-placeholder & {
padding-bottom: 10px;
}
}
}
.woocommerce-inbox-message-enter {
opacity: 0;
max-height: 0;
transform: translateX(50%);
}
.woocommerce-inbox-message-enter-active {
opacity: 1;
max-height: 100vh;
transform: translateX(0%);
transition: opacity 500ms, transform 500ms, max-height 500ms;
}
.woocommerce-inbox-message-exit {
opacity: 1;
max-height: 100vh;
transform: translateX(0%);
}
.woocommerce-inbox-message-exit-active {
opacity: 0;
max-height: 0;
transform: translateX(50%);
transition: opacity 500ms, transform 500ms, max-height 500ms;
}