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 {} */
Link
.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 { }