woocommerce/plugins/woocommerce-admin/client/marketplace/components/notice/notice.scss

96 lines
1.4 KiB
SCSS

@import "../../stylesheets/_variables.scss";
.woocommerce-marketplace {
&__notice {
align-items: center;
border: 1px solid #f0f0f0;
box-shadow: 0 2px 6px 0 #0000000d;
display: flex;
gap: 12px;
margin-bottom: 32px;
opacity: 1;
padding: 12px;
transition: opacity 1s ease-out;
&--info {
border-left: 4px solid var(--wp-admin-theme-color, #007cba);
}
&--error {
border-left: 4px solid $alert-red;
}
&--warning {
border-left: 4px solid $alert-yellow;
}
&--success {
border-left: 4px solid $valid-green;
}
&-icon {
align-self: flex-start;
height: 24px;
&--info {
fill: var(--wp-admin-theme-color, #007cba);
}
&--error {
fill: $alert-red;
}
&--warning {
fill: $alert-yellow;
}
&--success {
fill: $valid-green;
}
}
&-content {
align-items: flex-start;
display: flex;
flex-direction: column;
flex: 1;
gap: 12px;
}
&-description {
color: $gray-900;
font-size: 13px;
font-weight: 400;
line-height: 20px;
margin: 0;
}
&-children {
color: $gray-900;
font-size: 13px;
font-weight: 400;
gap: 8px;
line-height: 20px;
margin: 0;
.components-button {
margin-right: 12px;
}
}
&-close {
align-self: flex-start;
background: none;
border: none;
cursor: pointer;
height: 24px;
}
}
}
@media only screen and (min-width: 600px) {
.woocommerce-marketplace__notice {
margin-bottom: 40px;
}
}