0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-29 01:22:07 +01:00
wagtail/client/scss/components/_ping.scss

72 lines
1.4 KiB
SCSS

@keyframes ping-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
);
}
}
@keyframes ping-critical {
0% {
box-shadow: 0 0 0 0
hsla(
var(--w-color-critical-100-hue),
var(--w-color-critical-100-saturation),
var(--w-color-critical-100-lightness),
0.7
);
}
25% {
box-shadow: 0 0 0 8px
hsla(
var(--w-color-critical-100-hue),
var(--w-color-critical-100-saturation),
var(--w-color-critical-100-lightness),
0
);
}
50% {
box-shadow: 0 0 0 0
hsla(
var(--w-color-critical-100-hue),
var(--w-color-critical-100-saturation),
var(--w-color-critical-100-lightness),
0
);
}
}
.w-ping {
&.w-ping--critical {
@media (prefers-reduced-motion: no-preference) {
animation: ping-critical 5s 5;
}
}
}