Last updated
These docs are intended for a developer audience.Dismiss

CSS reference

This page lists Rebilly Instruments CSS classes. Use these CSS classes for advanced style customization.

Base. Typography

Parent wrappers

.rebilly-instruments-content {
}
/* Is possible to use .is-summary, .is-methods, .is-confirmation, .is-results
to target specific views for example .rebilly-instruments-content.is-summary {} */
.rebilly-instruments-link {
}
.rebilly-instruments-link:hover {
}
.rebilly-instruments-link .rebilly-instruments-icon {
}
.rebilly-instruments-link.has-icon-left .rebilly-instruments-icon {
}
.rebilly-instruments-link.has-icon-right .rebilly-instruments-icon {
}

Headings

.rebilly-instruments-h1 {
}
.rebilly-instruments-h2 {
}

Components

Form

.rebilly-instruments-form {
}

Field (Form element control)

.rebilly-instruments-form-field {
}

Field group (multiple form elements control group)

.rebilly-instruments-form-field-group {
}

Input

.rebilly-instruments-form-field-input {
  /* Shared with select */
}
.rebilly-instruments-form-field-input:hover {
  /* Shared with input */
}
.rebilly-instruments-form-field-input:focus {
  /* Shared with select */
}
.rebilly-instruments-form-field-input::placeholder {
}
.rebilly-instruments-form-field-input::selection {
}
.rebilly-instruments-form-field-input:disabled {
}

Select

.rebilly-instruments-form-field-select {
  /* Shared with input */
}
.rebilly-instruments-form-field-select:hover {
  /* Shared with input */
}
.rebilly-instruments-form-field-select:focus {
  /* Shared with input */
}
.rebilly-instruments-form-field-select::selection {
}
.rebilly-instruments-form-field-select:disabled {
}
.rebilly-instruments-form-field-select + .rebilly-instruments-form-field-label {
}
.rebilly-instruments-form-field-select::-ms-expand {
}
.rebilly-instruments-form-field-select-arrow {
}

Label

.rebilly-instruments-form-field-label {
}

/* Floating labels */
.is-floating .rebilly-instruments-form-field-label {
}
.is-floating .rebilly-instruments-form-field-input:focus + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-select:focus + .rebilly-instruments-form-field-label,
.is-floating .rebilly-instruments-form-field-label.is-active {
  /* Focus field label */
}

Checkbox

.rebilly-instruments-form-field-checkbox {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox'] {
}
.rebilly-instruments-form-field-checkbox span {
  /* Box */
}
.rebilly-instruments-form-field-checkbox span:after {
  /* Checkmark */
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:checked ~ span {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:checked ~ span:after {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:focus ~ span {
}
.rebilly-instruments-form-field-checkbox input[type='checkbox']:disabled ~ span {
}

Validation

.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-input,
.rebilly-instruments-form-field.is-error .rebilly-instruments-form-field-select {
}
.rebilly-instruments-form-field-error-wrapper {
}
.rebilly-instruments-form-field-error-wrapper > li {
}

.rebilly-instruments-button-group {
}
.rebilly-instruments-button-group .rebilly-instruments-button {
}
.rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
}
.rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
}

Buttons

.rebilly-instruments-button {
}
.rebilly-instruments-button:not([disabled]):hover {
}
.rebilly-instruments-button:not([disabled]):active {
}

.rebilly-instruments-button.rebilly-instruments-button-secondary {
}
.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):hover,
.rebilly-instruments-button.rebilly-instruments-button-secondary:not([disabled]):active {
}

.rebilly-instruments-button:focus {
}
.rebilly-instruments-button:disabled {
}
.rebilly-instruments-button::first-letter {
}

Express methods

.rebilly-instruments-express-methods {
}
.rebilly-instruments-express-methods.is-compact {
}
.rebilly-instruments-express-methods .rebilly-instruments-express-methods-label {
}
.rebilly-instruments-express-methods.is-compact .rebilly-instruments-express-methods-label {
}
@keyframes rebillyExpressShine {
  /* background-position-x */
}

Methods tabs

.rebilly-instruments-methods-tabs {
}
.rebilly-instruments-method-tab {
}
.rebilly-instruments-method-tab.is-active {
}
.rebilly-instruments-method-tab-logo {
}
.rebilly-instruments-method-tab-name {
}
.rebilly-instruments-method-tab:hover .rebilly-instruments-method-tab-name {
}
.rebilly-instruments-method-tab.is-active .rebilly-instruments-method-tab-name {
}

Divider

.rebilly-instruments-divider {
}
.rebilly-instruments-divider::before {
}
.rebilly-instruments-divider .rebilly-instruments-divider-label {
}

Address

.rebilly-instruments-address {
}

Icons

.rebilly-instruments-icon {
}

Loader

.rebilly-instruments-loader {
  /* Loader container */
}
.rebilly-instruments-loader.is-active {
}
.rebilly-instruments-loader-spinner {
}
@keyframes spin {
  /* transform: rotate */
}

Overlay

.rebilly-instruments-overlay {
}

Payment instrument (Instrument summary)

.rebilly-instruments-payment-instrument {
}
.rebilly-instruments-payment-instrument-logo {
}
.rebilly-instruments-payment-instrument-logo img {
}
.rebilly-instruments-payment-instrument-brand {
}
.rebilly-instruments-payment-instrument-last4 {
}
.rebilly-instruments-payment-instrument-exp {
}

Payment instrument list

.rebilly-instruments-payment-instrument-list {
}
.rebilly-instruments-payment-instrument-list li {
}
.rebilly-instruments-payment-instrument-list li:first-child {
}
.rebilly-instruments-payment-instrument-list li:last-child {
}
.rebilly-instruments-payment-instrument-list li + li {
}
.rebilly-instruments-payment-instrument-list.is-relaxed li {
}
.rebilly-instruments-payment-instrument-list .rebilly-instruments-form-field {
}
.rebilly-instruments-payment-instrument-list li .rebilly-instruments-payment-instrument-list-container {
}

Addons

.rebilly-instruments-addons {
}

.rebilly-instruments-addons-line-item {
}

.rebilly-instruments-addons-line-item-figure {
}
.rebilly-instruments-addons-line-item-figure img {
}

.rebilly-instruments-addons-line-item-synopsis {
}
.rebilly-instruments-addons-line-item-synopsis-title {
}
.rebilly-instruments-addons-line-item-synopsis-description {
}

.rebilly-instruments-addons-line-item-price-breakdown {
}
.rebilly-instruments-addons-line-item-price-breakdown .rebilly-instruments-icon {
}
.rebilly-instruments-addons-line-item-price-breakdown-unit-price {
}

Bump offer

.rebilly-instruments-bump-offers {
}

.rebilly-instruments-bump-offer {
}

.rebilly-instruments-bump-offer-label {
}

.rebilly-instruments-bump-offer-line-item {
}

.rebilly-instruments-bump-offer-line-item-figure {
}
.rebilly-instruments-bump-offer-line-item-figure img {
}

.rebilly-instruments-bump-offer-line-item-synopsis {
}
.rebilly-instruments-bump-offer-line-item-synopsis-title {
}
.rebilly-instruments-bump-offer-line-item-synopsis-description {
}

.rebilly-instruments-bump-offer-line-item-price-breakdown {
}
.rebilly-instruments-bump-offer-line-item-price-breakdown .rebilly-instruments-icon {
}
.rebilly-instruments-bump-offer-line-item-price-breakdown-unit-price {
}

Views

Summary

.rebilly-instruments-summary-line-item {
}

.rebilly-instruments-summary-line-item-figure {
}
.rebilly-instruments-summary-line-item-figure img {
}

.rebilly-instruments-summary-line-item-synopsis {
}
.rebilly-instruments-summary-line-item-synopsis-title {
}
.rebilly-instruments-summary-line-item-synopsis-description {
}

.rebilly-instruments-summary-line-item-price-breakdown {
}
.rebilly-instruments-summary-line-item-price-breakdown .rebilly-instruments-icon {
}
.rebilly-instruments-summary-line-item-price-breakdown-unit-price {
}

.rebilly-instruments-summary-breakdown table {
}

.rebilly-instruments-summary-breakdown-total {
}
.rebilly-instruments-summary-breakdown-total p {
}
.rebilly-instruments-summary-breakdown-total-amount {
}
.rebilly-instruments-summary-breakdown-total-amount-currency {
}

Confirmation

.rebilly-instruments-confirmation-go-back {
}
.rebilly-instruments-confirmation-address-title {
}

Result

.rebilly-instruments-results-icon {
}
.rebilly-instruments-results-icon g {
}
.rebilly-instruments-results-icon.is-error g {
}
.rebilly-instruments-results-icon path {
}
.rebilly-instruments-results-icon path.circle {
}
.rebilly-instruments-results-icon path.mark {
}
@keyframes rebillyDashResultIcon {
  /* stroke-dashoffset */
}

FramePay

.rebilly-instruments-framepay .rebilly-framepay {
}
.rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-focus {
}
.rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-invalid {
}
.rebilly-instruments-framepay .rebilly-framepay.rebilly-framepay-google-pay {
}