fleet/website/assets/styles/components/ajax-button.component.less
eashaw e335e835c9
Add customer portal and license dispenser to fleetdm.com (#3546)
* Add images for customer portal, dashboard, and email templates

* updated email layout and reset password template, new email template

* update ajax-button component to have an optional spinner

* updated cloud-error & stripe-card-element component styles

* updates to user model, add quote and subscription

* Login, signup, forgot password, update profile

* link to customer portal from pricing

* new-license page, bootstrap updates

* create quote action, dashboard page, update routes

* Add new page styles to importer, update component styles

* updates to js-timestamp

* update modal styles and layout

* using @submitted on ajax form, controller updates

* Update create-quote.js

* updates to quote model, action updates, truncate license key on dashboard

* update email layout, subscribe action, user model

* Update importer.less

* style updates, order confirmation

* use correct font

* style updates

* create license key

* new-license page changes

* signup page changes

* add billing format to js-timestamp component, dashboard updates, change password

* swap get started link for customers

* order -> subscription

* Update login.ejs

* Lint fixes, page updates, mobile styles

* remove edit-profile route, update layout, bootstrap, forms

* change customer-layout name to match other layout names, update copyright year in layouts

* changes requested from code review and #3570

* submit button width, contact font-size

* Update dashboard.less

* Update bootstrap-overrides.less

* slack logo update, login text
2022-01-04 20:02:42 -06:00

63 lines
1.1 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;
}
.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;
}
.button-text {
display: none;
}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}