Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 | 6x 6x 6x 5x 5x 4x 4x 5x 1x 5x 1x 5x 1x 5x 1x 5x 1x 1x 1x 5x 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 5x 1x 1x 1x 1x 1x 1x 5x 1x 1x 5x 1x 1x 1x 1x 5x 1x 5x 1x 5x 1x 1x 5x 6x | import { EmbeddedCheckoutStyles } from '@bigcommerce/checkout-sdk';
import { toCSSRule } from '../common/dom';
export default class EmbeddedCheckoutStyleParser {
parse(styles: EmbeddedCheckoutStyles): string[] {
const rules: string[] = [];
if (styles.body) {
rules.push(toCSSRule('body', styles.body));
rules.push(toCSSRule('.optimizedCheckout-overlay', styles.body));
}
if (styles.text) {
rules.push(toCSSRule('.optimizedCheckout-contentPrimary', styles.text));
}
if (styles.secondaryText) {
rules.push(toCSSRule('.optimizedCheckout-contentSecondary', styles.secondaryText));
}
if (styles.heading) {
rules.push(toCSSRule('.optimizedCheckout-headingPrimary', styles.heading));
}
if (styles.secondaryHeading) {
rules.push(toCSSRule('.optimizedCheckout-headingSecondary', styles.secondaryHeading));
}
if (styles.link) {
rules.push(toCSSRule('a', styles.link));
rules.push(toCSSRule('a:focus', styles.link, styles.link.focus));
rules.push(toCSSRule('a:hover', styles.link, styles.link.hover));
}
if (styles.label) {
rules.push(toCSSRule('.optimizedCheckout-form-label', styles.label));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-label',
styles.label, styles.label.error));
rules.push(toCSSRule('.form-field--error .form-inlineMessage', styles.label, styles.label.error));
}
if (styles.button) {
rules.push(toCSSRule('.optimizedCheckout-buttonPrimary', styles.button));
rules.push(toCSSRule('.optimizedCheckout-buttonPrimary:active', styles.button, styles.button.active));
rules.push(toCSSRule('.optimizedCheckout-buttonPrimary:focus', styles.button, styles.button.focus));
rules.push(toCSSRule('.optimizedCheckout-buttonPrimary:hover', styles.button, styles.button.hover));
rules.push(toCSSRule(
'.optimizedCheckout-buttonPrimary[disabled]',
styles.button,
styles.button.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonPrimary[disabled]:active',
styles.button,
styles.button.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonPrimary[disabled]:focus',
styles.button,
styles.button.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonPrimary[disabled]:hover',
styles.button,
styles.button.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonPrimary[disabled].is-active',
styles.button,
styles.button.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonPrimary[disabled].is-loading',
styles.button,
styles.button.disabled
));
}
if (styles.secondaryButton) {
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary',
styles.secondaryButton
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary:active',
styles.secondaryButton,
styles.secondaryButton.active
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary:focus',
styles.secondaryButton,
styles.secondaryButton.focus
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary:hover',
styles.secondaryButton,
styles.secondaryButton.hover
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary[disabled]',
styles.secondaryButton,
styles.secondaryButton.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary[disabled]:active',
styles.secondaryButton,
styles.secondaryButton.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary[disabled]:focus',
styles.secondaryButton,
styles.secondaryButton.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary[disabled]:hover',
styles.secondaryButton,
styles.secondaryButton.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary[disabled].is-active',
styles.secondaryButton,
styles.secondaryButton.disabled
));
rules.push(toCSSRule(
'.optimizedCheckout-buttonSecondary[disabled].is-loading',
styles.secondaryButton,
styles.secondaryButton.disabled
));
}
if (styles.input) {
rules.push(toCSSRule('.optimizedCheckout-form-input', styles.input));
rules.push(toCSSRule('.optimizedCheckout-form-input:focus', styles.input, styles.input.focus));
rules.push(toCSSRule('.optimizedCheckout-form-input:hover', styles.input, styles.input.hover));
rules.push(toCSSRule(
'.optimizedCheckout-form-input::placeholder',
styles.input,
styles.input.placeholder
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-input',
styles.input,
styles.input.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-input:focus',
styles.input,
styles.input.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-input:hover',
styles.input,
styles.input.error
));
}
if (styles.select) {
rules.push(toCSSRule('.optimizedCheckout-form-select', styles.select));
rules.push(toCSSRule('.optimizedCheckout-form-select:focus', styles.select, styles.select.focus));
rules.push(toCSSRule('.optimizedCheckout-form-select:hover', styles.select, styles.select.hover));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-select',
styles.select,
styles.select.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-select:focus',
styles.select,
styles.select.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-select:hover',
styles.select,
styles.select.error
));
}
if (styles.checkbox) {
rules.push(toCSSRule('.optimizedCheckout-form-checkbox', styles.checkbox));
rules.push(toCSSRule('.optimizedCheckout-form-checkbox:focus', styles.checkbox, styles.checkbox.focus));
rules.push(toCSSRule('.optimizedCheckout-form-checkbox:hover', styles.checkbox, styles.checkbox.hover));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-checkbox',
styles.checkbox,
styles.checkbox.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-checkbox:focus',
styles.checkbox,
styles.checkbox.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-checkbox:hover',
styles.checkbox,
styles.checkbox.error
));
}
if (styles.radio) {
rules.push(toCSSRule('.optimizedCheckout-form-radio', styles.radio));
rules.push(toCSSRule('.optimizedCheckout-form-radio:focus', styles.radio, styles.radio.focus));
rules.push(toCSSRule('.optimizedCheckout-form-radio:hover', styles.radio, styles.radio.hover));
rules.push(toCSSRule('.form-field--error .optimizedCheckout-form-radio', styles.radio, styles.radio.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-radio:focus',
styles.radio,
styles.radio.error
));
rules.push(toCSSRule(
'.form-field--error .optimizedCheckout-form-radio:hover',
styles.radio,
styles.radio.error
));
}
if (styles.step) {
rules.push(toCSSRule('.optimizedCheckout-checkoutStep', styles.step));
rules.push(toCSSRule('.optimizedCheckout-step', styles.step.icon));
}
if (styles.checklist) {
rules.push(toCSSRule('.optimizedCheckout-form-checklist', styles.checklist));
rules.push(toCSSRule('.optimizedCheckout-form-checklist-item', styles.checklist));
rules.push(toCSSRule(
'.optimizedCheckout-form-checklist-item:hover',
styles.checklist,
styles.checklist.hover
));
rules.push(toCSSRule(
'.optimizedCheckout-form-checklist-item--selected',
styles.checklist,
styles.checklist.checked
));
}
if (styles.discountBanner) {
rules.push(toCSSRule('.optimizedCheckout-discountBanner', styles.discountBanner));
}
if (styles.loadingBanner) {
rules.push(toCSSRule('.optimizedCheckout-loadingToaster', styles.loadingBanner));
}
if (styles.orderSummary) {
rules.push(toCSSRule('.optimizedCheckout-orderSummary', styles.orderSummary));
rules.push(toCSSRule('.optimizedCheckout-orderSummary-cartSection', styles.orderSummary));
}
return rules;
}
}
|