Eric
1c605ae720
Changes: - Updated the ajax button component to support a `syncingMessage` prop, a string that, when set, will be displayed with the button's loading spinner. - Updated the ajax button used on the "Talk to us" form to say "Looking up availability…" when the form is submitted before a user is redirected to a Calendly booking page.
75 lines
1.4 KiB
Plaintext
Vendored
75 lines
1.4 KiB
Plaintext
Vendored
|
|
/**
|
|
* <ajax-button>
|
|
*
|
|
* App-wide styles for our ajax buttons.
|
|
*/
|
|
|
|
[parasails-component='ajax-button'] {
|
|
.loading-spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 3px solid #EEE;
|
|
border-bottom-color: transparent;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
animation: rotation 1s linear infinite;
|
|
}
|
|
[purpose='message-with-spinner'] {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 4px;
|
|
[purpose='syncing-message'] {
|
|
font-size: 14px;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
.button-loader, .button-loading {
|
|
display: none;
|
|
margin: auto;
|
|
|
|
.loading-dot {
|
|
opacity: 0;
|
|
display: inline;
|
|
.fade-in();
|
|
.animation-duration(1s);
|
|
.animation-iteration-count(infinite);
|
|
.animation-direction(linear);
|
|
&.dot1 {
|
|
.animation-delay(0.25s);
|
|
}
|
|
&.dot2 {
|
|
.animation-delay(0.5s);
|
|
}
|
|
&.dot3 {
|
|
.animation-delay(0.75s);
|
|
}
|
|
&.dot4 {
|
|
.animation-delay(1s);
|
|
}
|
|
}
|
|
}
|
|
&.syncing {
|
|
.button-loader, .button-loading {
|
|
display: inline-block;
|
|
height: 16px;
|
|
}
|
|
.button-text {
|
|
display: none;
|
|
}
|
|
|
|
|
|
}
|
|
@keyframes rotation {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
}
|