css_classes.css

/*
  Name: PSP CSS Cheatsheet
  Author: Bob Orchard
*/

/* Body Classes */
.public-signup-page {} /* Both Signup and Success Pages */
.public-signup-page__signup {}
.public-signup-page__success {}

/* Wrapper: Container that centers the form*/
.wrapper {
  /* Make Form Full-Width */
  /* max-width: 100%; */
}

/* Header: Contains logo/logo text and SSL notice (if enabled) */
.header {}
.header__logo {}
.header__logo h1 {}
.header__logo img {}
.header__ssl-notice {}

.content__headings {
  /* Desktop: When scrolling, these headings attach themselves to the top of the window */
  /* Mobile/Tablet: Hidden */
}

/* Plan Summary Wrapper */
.plan__summary {}
.plan__summary-table {}
.plan__summary-table-row {}
.plan__summary-table-row-label {}
.plan__summary-table-row-total {}
.plan__summary-total {}
.plan__summary-total-description {}

/* Plan Summary Items */
.plan__summary-initial {}
.plan__summary-baseline {}
.plan__summary-component {}
.plan__summary-tax {}

/* Main Content - Contains both the main form and the summary in the sidebar to the right */
.content {}
.content__main {}
.content__secondary {}
.content__heading { /* Main Heading in both .content__main and .content__secondary */ }
.content__heading--mobile { /* Mobile/Tablet: Mobile Heading that sticks to the top of the window */ }
.content__heading-section--total { /* Mobile/Tablet: Mobile Heading total that sticks to the top of the window */ }
.content__signup-form { /* Signup Form Wrapper */ }

.form__section {}
.form__section--product-description {}
.form__section--configure-plan {}
.form__section--apply-coupon {}
.form__section--customer-information {}
.form__section--vat-information {}
.form__section--shipping-information {}
.form__section--billing-information {}
.form__section--billing-address {}
.form__section--terms-submit {}

.form__fields { /* Wrapper for a group of fields */ }
.form__field { /* Individual input field */ }

.form__fields--name {}
.form__field--first-name {}
.form__field--last-name {}

.form__fields--address {}
.form__field--address {}
.form__field--address2 {}
.form__field--country {}
.form__fields--city-state-zip {}
.form__field--city {}
.form__field--state {}
.form__field--zip {}
.form__field--email {}
.form__field--phone {}
.form__field--organization-name {}

.form__fields--apply-vat {}
.form__field--vat-number {}

.form__field--credit-card-number {}
.form__fields--credit-card-details {}
.form__fields--credit-card-cvv {}
.form__fields--credit-card-expiration-month {}
.form__fields--credit-card-expiration-year {}

.form__field--bank-name {}
.form__fields--bank-information {}
.form__field--routing-number {}
.form__field--account-number {}

.form__button {}
.form__button--primary {}
.form__button--large {}
.form__button--is-submitting {}

.success-receipt {}
.success-receipt__icon {}
.success-receipt__icon--success {}
.success-receipt__heading {}
.success-receipt__items {}
.success-receipt__total {}
.success-receipt__home-link {}

/* All Accent Colors */

.plan__summary-total,
.content__heading-section--total,
.success-receipt__icon .fa-check,
.success-receipt__total dl:last-of-type {
  color: red;
}

.form__button--primary {
  background: red;
  border: red;
}

.form__button--primary:hover,
.form__button--primary:active,
.form__button--primary:focus,
.form__button--primary:disabled {
  background: #990000;
}