fleet/website/assets/styles/components/stripe-card-element.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

69 lines
1.5 KiB
Plaintext
Vendored

/**
* <stripe-card-element>
*/
[parasails-component='stripe-card-element'] {
.card-element-wrapper {
position: relative;
.form-control {
height: 40px;
}
.card-element {
padding-top: 0;
padding-bottom: 0;
padding-right: 30px;
&.pseudofocused {
// These should mimic your normal form inputs' :focus styles:
border-color: #6a67fe;
outline: 0;
box-shadow: none;
}
}
.status-indicator {
font-size: 15px;
position: absolute;
right: 14px;
top: 8px;
&.hidden {
display: none;
}
&.syncing {
-webkit-animation: fa-spinner-rotate 1.5s infinite linear;
animation: fa-spinner-rotate 1.5s infinite linear;
@-webkit-keyframes fa-spinner-rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate-clockwise {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
&.secret-card-element-wrapper {
opacity: 0;
height: 1px;
}
}
@media screen and (max-width: 450px) {
.card-element-wrapper {
.card-element {
padding-right: 20px;
}
.status-indicator {
right: 9px;
}
}
}
}