importOK

Guides

Styling

The importOK wizard is designed to be easily customizable to match the look and feel of your app. This page provides a list of selectors and classes that you can use to style the wizard.

To do this you will need to pass your own CSS rules to the wizard, using the style property. Here is an example that changes the color of the wizard title to blue and making it bold.

1{
2  style: `
3    .title {
4      color: blue;
5      font-weight: bold;
6    }
7  `
8}

Primary Color and Border Radius

A common requirement is to change the primary color used in buttons and links, and to adjust the border radius for buttons and other components. If this is what you are after, we have prepared some examples that you can copy and adjust to your branding.

Change Primary Color to Sky Blue

 1{
 2  style: `
 3    .button-primary {
 4      background-color: #0ea5e9;
 5    }
 6    .button-primary:hover {
 7      background-color: #0369a1;
 8    }
 9    .button-link {
10      color: #0ea5e9;
11    }
12    .button-link:hover {
13      color: #0369a1;
14    }
15    .progress-percentage {
16      color: #0ea5e9;
17    }
18  `
19}

Remove rounded corners

 1{
 2  style: `
 3    .button-primary,
 4    .dropzone,
 5    .dropzone-extension
 6    {
 7      border-radius: 0;
 8    }
 9  `
10}

Reference

General selectors

Selector Description
#importok The wizard component.
.button-link A button without background fill used in links and the "Back" button of the wizard.
.button-primary A button with background fill used in the "Next" action of the wizard.
.title The main title displayed at the top left corner of the wizard.
.subtitle The secondary text displayed at the top left corner of the wizard, right below the title.

Upload screen (Wizard step #1)

Selector Description
.dropzone The dropzone area marked with dashed border and light background color.
.dropzone-icon-upload The upload icon displayed within the dropzone area.
.dropzone-icon-success The success icon being displayed after a successful file upload.
.dropzone-label The help text displayed before uploading a file.
.dropzone-extension The list of allowed extensions i.e. CSV and XLS.
.dropzone-file-name The file name being displayed after a successful file upload.
.dropzone-file-size The file size being displayed after a successful file upload.

Mapping screen (Wizard step #2)

Selector Description
.mapping-header The header for each section of the mapping, displaying the label and the dropdown.
.mapping-field-button The button to toggle the dropdown with the fields to map.
.mapping-field-dropdown The dropdown including the field to map.
.mapping-field-label The field to be mapped, displayed on the left of each section header.
.mapping-field-description The description of the field to be mapped, displayed on the right side.
.mapping-preview-index The index number for each preview row.
.mapping-preview-value The value displayed in each preview row.

Editor screen (Wizard step #3)

Selector Description
.editor-errors-button The button to toggle the dropdown with the errors found.
.editor-errors-dropdown The dropdown including the errors found.
.editor-search The search input field to search for values in the table.
.editor-find-replace-button The "Find and replace" button displayed next to the "Search" input.
.editor-export-button The "Export" button displayed next to the "Find and replace" button.
.editor-delete-button The "Delete" button displayed next to the "Export" button.
.editor-feedback The feedback provided on the top right corner.
.editor-table The table containing the imported data.
.editor-header The header row of the editor.
.editor-row Rows with the imported values.
.editor-row-selected A highlighted row.
.editor-cell Cells with the imported values
.editor-cell-success Cell with valid data
.editor-cell-error Cell with invalid data.

Push screen (Wizard step #4)

Selector Description
.progress-percentage The percentage label of the progress.
.progress-label The text being displayed about the progress i.e. "Getting ready" or "Done".
.progress-success-icon The success icon indicating that all records have been imported successfully.
.progress-warning-icon The error icon indicating that some records have failed to be imported.
.progress-error-icon The error icon indicating that the import has failed.