Skip to content

Commit

Permalink
AUT-3407: Include spinner Sass in application.scss
Browse files Browse the repository at this point in the history
This is so that the styles for the spinner will be included
in the distributed CSS.
  • Loading branch information
gtvj committed Aug 6, 2024
1 parent 8091e5e commit 975d372
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/assets/scss/application.scss
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
@import "components/warning-text/warning-text";

@import "../../../node_modules/@govuk-one-login/frontend-language-toggle/stylesheet/styles";
@import "prove-identity-callback/spinner";


.interrupt-screen {
background-color: #1d70b8;
Expand Down
64 changes: 64 additions & 0 deletions src/assets/scss/prove-identity-callback/spinner.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
.spinner {
width: 80px;
height: 80px;
border-radius: 50%;
border-width: 12px;
border-style: solid;
border-color: #dee0e2;
border-top-color: #005ea5;
margin-bottom: govuk-spacing(3);

@media (forced-colors: active) {
forced-color-adjust: none;
border-top-color: transparent !important;
}

@media not (prefers-reduced-motion) {
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}

@media (prefers-reduced-motion) {
transform: rotate(0.125turn);
}

&__ready {
border-color: #005ea5;
-webkit-animation: none;
animation: none;
}
}

.spinner-container {
&__error {
.spinner,
.spinner-state-text {
display: none;
}
}
}

@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}

@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.centre {
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
}

0 comments on commit 975d372

Please sign in to comment.