DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

style(spinner): replace legacy spinner

Browse source
This commit is contained in:
Colin Darie 2023-01-05 15:51:24 +01:00
parent 3a48f201ee
commit 587a4c4d95
4 changed files with 19 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/forms.scss
View file

@ -181,7 +181,7 @@
margin-bottom: 0;
}
+ .spinner {
+ .spinner:not(.right):not(.left) {
position: relative;
top: -($default-fields-spacer / 2);
}

82
app/assets/stylesheets/spinner.scss
View file

@ -1,67 +1,6 @@
@import "colors";
.spinner-old {
color: $black;
width: 1em;
height: 1em;
border-radius: 50%;
position: relative;
text-indent: -9999em;
animation: load4 1.3s infinite linear;
transform: translateZ(0);
&.right {
position: absolute;
top: 3.7em;
right: 1.2em;
transform: scale(0.3);
}
&.left {
top: 1.2em;
left: 1.2em;
transform: scale(0.4);
}
}
@keyframes load4 {
0%,
100% {
box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
}
12.5% {
box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
25% {
box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
}
37.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
50% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
}
62.5% {
box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
}
75% {
box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
}
87.5% {
box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
}
}
.spinner {
/* Add a loading spinner using the `::before` pseudo-element */
vertical-align: middle;
&::before {
content: "";
display: inline-block;
@ -70,12 +9,23 @@
border: 3px solid var(--text-default-grey);
border-radius: 50%;
border-top-color: var(--background-default-grey);
animation: spinner 0.7s cubic-bezier(0,0,.36,.78) infinite;
animation: spin 0.7s cubic-bezier(0, 0, 0.36, 0.78) infinite;
}
&.right {
position: absolute;
top: 3.7em;
right: 1.2em;
}
&.left {
top: 1.2em;
left: 1.2em;
}
}
/* Add the keyframes for the spinner animation */
@keyframes spinner {
// Add the keyframes for the spinner animation
@keyframes spin {
to {
transform: rotate(360deg);
}

2
app/views/administrateurs/procedures/administrateurs.html.haml
View file

@ -14,7 +14,7 @@
%table#all-admins
%caption
= "#{@admins.total_count} administrateurs"
%span.hidden.fr-icon-ball-pen-fill{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
%span.hidden.spinner{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
- if @filter.email
.selected-email.fr-mb-2w
= link_to @filter.email, administrateurs_admin_procedures_path(@filter.without(:email)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'

2
app/views/administrateurs/procedures/all.html.haml
View file

@ -16,7 +16,7 @@
%table#all-demarches
%caption
= "#{@procedures.total_count} démarches"
%span.hidden.fr-icon-ball-pen-fill{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
%span.hidden.spinner{ 'aria-hidden': 'true', 'data-turbo-target': 'spinner' }
- if @filter.libelle
.selected-query.fr-mb-2w
= link_to @filter.libelle, all_admin_procedures_path(@filter.without(:libelle)), class: 'fr-tag fr-tag--dismiss fr-mb-1w'