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 {
}