mirror
/
wagtail
kopia lustrzana https://github.com/wagtail/wagtail
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Rename pulse-warning animation to ping-warning and extract to its own file 

Tailwind has a similarly-named 'pulse' animation that behaves differently:
it makes the element fade in and out.

Meanwhile, it has a 'ping' animation that behaves similarly to our 'pulse'
animation: https://tailwindcss.com/docs/animation

Follow the Tailwind names to avoid confusion. In the future, we might
want to implement a similar 'pulse' animation. Or, perhaps we can reuse
Tailwind's animations as-is.
pull/12185/head
Sage Abdullah 2024-07-01 14:19:52 +01:00 zatwierdzone przez Thibaud Colas
rodzic 2508b712a9
commit c3cbe81a95
4 zmienionych plików z 34 dodań i 34 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

34
client/scss/components/_dismissible.scss
Wyświetl plik

@ -1,35 +1,3 @@
@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');
@ -53,6 +21,6 @@
line-height: theme('lineHeight.tight');
@media (prefers-reduced-motion: no-preference) {
animation: pulse-warning 5s 5;
animation: ping-warning 5s 5;
}
}

31
client/scss/components/_ping.scss 100644
Wyświetl plik

@ -0,0 +1,31 @@
@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
);
}
}

2
client/scss/components/_whats-new.scss
Wyświetl plik

@ -25,7 +25,7 @@
border-radius: theme('borderRadius.full');
@media (prefers-reduced-motion: no-preference) {
animation: pulse-warning 5s 5;
animation: ping-warning 5s 5;
}
}
}

1
client/scss/core.scss
Wyświetl plik

@ -146,6 +146,7 @@ These are classes for components.
@import 'components/userbar';
@import 'components/breadcrumbs';
@import 'components/pill';
@import 'components/ping';
@import '../src/components/Sidebar/Sidebar';
@import '../src/components/Minimap/Minimap';