0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 09:33:54 +01:00
wagtail/client/scss/components/_dismissible.scss
Sage Abdullah 0a0e07abc0 Add help menu with dismissible badges
By default, the menu contains a link to a blog post
showcasing features in Wagtail 4.1 and a link to the editor guide.

We need to update the links and labels manually in the next release.
2022-10-17 17:39:37 +01:00

59 lines
1.3 KiB
SCSS

@keyframes pulse-warning {
0% {
box-shadow: 0 0 0 0
hsla(
var(--w-color-warning-100-hue),
var(--w-color-warning-100-saturation),
var(--w-color-warning-100-lightness),
0.7
);
}
25% {
box-shadow: 0 0 0 10px
hsla(
var(--w-color-warning-100-hue),
var(--w-color-warning-100-saturation),
var(--w-color-warning-100-lightness),
0
);
}
50% {
box-shadow: 0 0 0 0
hsla(
var(--w-color-warning-100-hue),
var(--w-color-warning-100-saturation),
var(--w-color-warning-100-lightness),
0
);
}
}
.w-dismissible-badge {
border-radius: theme('borderRadius.full');
background-color: theme('colors.warning.100');
flex-shrink: 0;
min-width: theme('spacing.[2.5]');
height: theme('spacing.[2.5]');
@media (forced-colors: active) {
border: 3px solid transparent;
box-sizing: content-box;
}
&--count {
color: theme('colors.primary.DEFAULT');
text-align: center;
font-size: 0.625rem;
font-weight: theme('fontWeight.bold');
min-width: theme('spacing.[3.5]');
height: theme('spacing.[3.5]');
line-height: theme('lineHeight.tight');
@media (prefers-reduced-motion: no-preference) {
animation: pulse-warning 5s 5;
}
}
}