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 86a99a4 commit 77a353d
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 77a353d

Please sign in to comment.