diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index afd67afc6..8a2e6c65f 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -181,7 +181,7 @@ margin-bottom: 0; } - + .spinner { + + .spinner:not(.right):not(.left) { position: relative; top: -($default-fields-spacer / 2); } diff --git a/app/assets/stylesheets/spinner.scss b/app/assets/stylesheets/spinner.scss index 33fa4fe39..d0be31b8a 100644 --- a/app/assets/stylesheets/spinner.scss +++ b/app/assets/stylesheets/spinner.scss @@ -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); } diff --git a/app/views/administrateurs/procedures/administrateurs.html.haml b/app/views/administrateurs/procedures/administrateurs.html.haml index fb49b445e..c3051c65a 100644 --- a/app/views/administrateurs/procedures/administrateurs.html.haml +++ b/app/views/administrateurs/procedures/administrateurs.html.haml @@ -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' diff --git a/app/views/administrateurs/procedures/all.html.haml b/app/views/administrateurs/procedures/all.html.haml index 3e5ba02bd..fda6e255a 100644 --- a/app/views/administrateurs/procedures/all.html.haml +++ b/app/views/administrateurs/procedures/all.html.haml @@ -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'