woocommerce/plugins/woocommerce-blocks/packages/components/store-notices-container/style.scss

81 lines
1.4 KiB
SCSS

.wc-block-components-notices {
display: block;
margin: 1.5em 0;
&:first-child {
margin-top: 0;
}
&:empty {
margin: 0;
}
.wc-block-components-notices__notice {
margin: 0;
display: flex;
flex-wrap: nowrap;
a {
text-decoration: underline;
}
.components-notice__dismiss {
background: transparent none;
padding: 0;
margin: 0 0 0 auto;
border: 0;
outline: 0;
color: currentColor;
svg {
fill: currentColor;
vertical-align: text-top;
}
}
.components-notice__content > div:not(.components-notice__actions) {
*:first-child {
margin-top: 0;
}
*:last-child {
margin-bottom: 0;
}
}
.components-notice__content {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li + li {
margin: 0.25em 0 0 0;
}
}
}
.wc-block-components-notices__notice + .wc-block-components-notices__notice {
margin-top: 1em;
}
}
// @todo Either move notice style fixes to Woo core, or take full control over notice component styling in blocks.
.theme-twentytwentyone,
.theme-twentytwenty {
.wc-block-components-notices__notice {
padding: 1.5rem 3rem;
}
}
.wc-block-components-notices__snackbar {
position: fixed;
bottom: 20px;
left: 16px;
width: auto;
@include breakpoint("<782px") {
position: fixed;
top: 10px;
left: 0;
bottom: auto;
}
.components-snackbar-list__notice-container {
@include breakpoint("<782px") {
margin-left: 10px;
margin-right: 10px;
}
}
}