Styling Guide
General
Theming enables you to customize the style of the nuvo importer. You can adjust the theme for the importer to match your branding by changing the global styles but also the style of individual components. It also provides you control over the :hover and :active CSS classes.
style
is one of many optional properties within the nuvo importer settings
object. To understand the concept, you can use the code below to see how you can adjust the global style settings. Afterward, you will get to know which areas can be themed and how to do it.
- React
- Angular
- Vue.js 2
- Vue.js 3
- JavaScript
<NuvoImporter
licenseKey="Your License Key"
settings={{
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
},
}}
>
Select File
</NuvoImporter>
- Add the nuvo component in the HTML file.
<nuvo-importer [licenseKey]="licenseKey" [settings]="settings">Select File</nuvo-importer>
- Define the property in the component file.
licenseKey!: string
settings!: SettingsAPI;
ngOnInit(): void {
this.licenseKey = "Your License Key"
this.settings = {
developerMode: true,
identifier: "customer_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
},
}
}
For Vue.js 3, the setup is slightly different. Please check out the "Vue.js 3"-tab.
- Add the nuvo component inside the
<template>
tag in the fileApp.vue
.
<template>
<div id="app">
<NuvoImporter :settings="settings" :licenseKey="licenseKey" />
</div>
</template>
- Define the property inside the
<script>
tag in the component file.
export default {
name: "App",
components: {
NuvoImporter,
},
data: () => {
return {
licenseKey: "Your License Key",
settings: {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
},
},
};
},
};
For Vue.js 2, the setup is slightly different. Please check out the "Vue.js 2"-tab.
- Add the nuvo component inside the
<template>
tag in the fileApp.vue
.
<template>
<div id="app">
<NuvoImporter :settings="settings" :licenseKey="licenseKey" />
</div>
</template>
- Define the property inside the
<script>
tag in the component file.
export default {
name: "App",
components: {
NuvoImporter,
},
setup() {
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
},
};
return { settings };
},
data: () => {
return {
licenseKey: "Your License Key",
};
},
};
const settings = {
developerMode: true,
identifier: "product_data",
columns: [
{
label: "Product ID",
key: "product_id",
},
{
label: "Article Name",
key: "article_name",
},
],
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
},
};
In the following, we display an overview with all available style keys:
style: {
globals: {},
buttons: {},
progressBar: {},
header: {},
dropzone: {},
footer: {},
sheetSelect: {},
headerSelect: {},
joinSheet: {},
columnMatch: {},
reviewEntries: {},
popover: {},
dialog: {},
messagePopup: {},
popoverInfo: {},
loader: {}
}
Advanced styling
As you can see in the example above, the style
setting can be used to adjust the theme of the nuvo importer to match your branding. The style
object contains keys for each changeable area of the importer. In the following, you will get to know each key in-depth and how to use them properly.
globals
The globals
key helps you implement a general and global theming. Its options are generic and easy to use. The available keys are the following:
textColor
- This sets the default color for the text of the nuvo importer. This text color does not apply to the text of the table within the "Header Selection" and "Review Entries"-steps. To control this instead, you will find other options below.fontFamily
- This enables you to use your preferred font within the nuvo importer.backgroundColor
- This allows you to control the general background color of the nuvo importer. Necessary, you will only see an effect ifmodal
is set tofalse
.primaryTextColor
- This and the following key enable you to define different text font colors within the nuvo importer more specifically.secondaryTextColor
- Like mentioned above, this is a more specific styling than thetextColor
key.
buttons
If you want to change the styling of the nuvo importer buttons, you can use the buttons
key for it. It allows you to control the backgroundColor
, borderColor
, color
, padding
, fontSize
, borderRadius
as well as the :hover
and :active
CSS classes of the buttons. There are two types of buttons:
primary
- This allows you to control the primary buttons within the nuvo importer.secondary
- This will control the secondary buttons within the nuvo importer.manualEntry
- This will control the manualEntry button forallowManualInput
is enabled within the nuvo importer.editData
- This will control the editData button forbuttonMode
isedit
orboth
within the nuvo importer.
In the following, you can see an example of a style
object using the buttons
key:
style: {
buttons: {
primary: {
backgroundColor: "#143a52",
borderColor: "#143a52",
color: "#ffffff",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#24516D",
borderColor: "#ffffff",
},
":active": {
backgroundColor: "##0C3046",
borderColor: "#ffffff",
}
},
secondary: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D"
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046"
}
},
manualEntry: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D"
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046"
}
},
editData: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D"
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046"
}
}
}
}
The remaining keys below will all use a root
option. This option controls the basic styling of the section. This allows you to control the backgroundColor
, border
, borderRadius
, and the padding
, while the more determined options within each key will control fontWeight
, fontSize
, and color
.
progressBar
The progressBar
key allows the theming of the progress bar starting at the top left of the nuvo importer that displays the steps of the import process, which have already been completed, are currently on, and which are still coming. In the following, all options for this key are listed:
root
- This allows you to control the base stylings of the section.icon
- This setting controls the icon of the section.current
- This allows you to control the styling of the current step.complete
- Controls the theming of the completed steps.incomplete
- Controls the styling of the incomplete steps.
style: {
progressBar: {
root: {
backgroundColor: "grey",
borderRadius: "7px",
border: "1px solid white",
padding: "20px"
},
icon: {
fill: "red",
},
current: {
color: "darkblue",
fontSize: "18px",
fontWeight: "600"
},
complete: {
color: "green"
},
incomplete: {
color: "yellow"
}
}
}
header
By using the header
key, you can control the theming of the header section. The header section is placed between the progressbar
and the dropzone
within the "Upload"-step, between the progressbar
and headerMatch
within the "Header Selection"-step and between the progressbar
and the sheetSelect
within the "Sheet Selection"-step. Here are the available options listed:
root
- This allows you to control the base stylings of the section.title
- This setting controls the header title styles in the upper left.description
- Controls the header description styles below thetitle
.
style: {
header: {
root: {
backgroundColor: "#E1E1E1"
},
title: {
color: "darkblue",
fontSize: "10px"
},
description: {
color: "black",
fontSize: "8px"
}
}
}
dropzone
This setting allows for controlling the drag and drop area, also called dropzone
section, that is displayed when the nuvo importer is launched. The button inside of this section is controlled by the buttons
key mentioned above. Therefore the button can't be controlled by this setting. Here are the available options for use:
root
- This allows you to control the base stylings of the dropdown section.icon
- This setting controls the file icons of the dropdown section.content
- Controls the stylings of the "Download Template"-card. It contains the same theming options asroot
with additional nested options forcontent
:root
,title
,description
andillustration
.
style: {
dropzone: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black"
},
icon: {
box: {
fill: "black"
}
},
content: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
borderRadius: "20px",
padding: "40px 60px",
},
title: {
color: "darkblue",
},
description: {
color: "green",
},
illustration: {
borderColor: "red",
headerColor: "green",
circleHeaderColor: "blue",
circleRowColor: "brown",
downloadIconColor: "gray",
shadowColor: "#E0EAFD"
}
}
}
}
The "Download Template"-card is only displayed when modal
and embedUploadArea
is set to true
, and disableTemplates
is not set to true
.
footer
The footer
key can be used to control the root styling of the nuvo importer's bottom. It only contains the root
key:
root
- This allows you to control the base stylings of the footer.
style: {
footer: {
root: {
backgroundColor: "#E1E1E1";
}
}
}
sheetSelect
With this key you can access and change the style of the elements of the "Sheet Selection"-step of the nuvo importer.
root
- Controls the base stylings for the section.header
- Controls the theming of the header text.sheetName
- Controls the file tab on the left side of the section with nested options forsheetName
:root
,title
,description
andborder
.grid
- Controls the styles of the sheet selection section in grid mode with additional options nested:root
,title
,description
andcheckbox
.list
- Controls the styles of the sheet selection section in list mode with additional options nested:root
,title
,description
andcheckbox
.pagination
- Controls the stylings of the pagination in the bottom left with the following options nested:root
,pageButton
,pageMore
,currentPageButton
,nextButton
andprevButton
.icon
- Controls the color of both icons in the top right.sheetLists
- Controls the styles of the layout of the file tab which is on the left side of the section with options nested:root
.scrollbar
- Controls the styles of the scrollbar of the file tab which is on the left side and the styles of the scrollbar of the sheet selection section with options nested:backgroundColor
andnavigatorColor
.unSelectSheetName
Controls the styles of the file tab when it's not selected. This apply whenmultipleFileUpload
istrue
. The nested options areroot
,title
,description
andborder
.addFileButton
Controls the styles of add file button which is on the left side. This button is visible whenmultipleFileUpload
istrue
. The nested options areroot
andicon
.
style: {
sheetSelect: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
},
header: {
color: "red",
},
sheetName: {
root: {
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "orange"
},
border: {
backgroundColor: "#143a52"
}
},
grid: {
root: {
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "orange"
},
checkbox: {
backgroundColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
}
}
},
list: {
root: {
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "orange"
},
checkbox: {
backgroundColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
}
}
},
pagination: {
currentPageButton: {
backgroundColor: "red",
color: "white"
}
},
icon: {
stroke: "red"
},
sheetLists: {
root: {
backgroundColor: "brown"
}
},
scrollbar: {
backgroundColor: "blue",
navigatorColor: "red",
},
unSelectSheetName: {
root: {
backgroundColor: "green"
},
title: {
color: "pink"
},
description: {
color: "purple"
},
border: {
backgroundColor: "green"
}
},
addFileButton: {
root: {
backgroundColor: "red",
color: "blue",
},
icon: {
stroke: "green"
}
}
}
}
headerSelect
headerMatch
controls the theming of the "Select Header"-step of the nuvo importer. All available keys are listed below:
root
- Controls the base stylings for the section.content
- Controls the theming of the table content.sheetName
- Controls the sheet name badge placed at the top left with additional nested options forsheetName
:root
,title
,description
andborder
fullscreen
– Controls the fullscreen icon on the top right of the section. Important: This icon is only displayed when your screen width is above 1910px.table
- Controls the table of the "Select Header"-step. The nested options are table elements, for example,td
,th
,scrollbar
,selectRowColor
, etc.progressBar
- Controls the style of the progress bar whenmultipleFileUpload
istrue
and at least two sheets are selected by the user. The nested options areroot
andprogress
.sheetNameSelected
- Controls the selected sheet name badge placed at the top left. The nested options areroot
,title
,description
andborder
.
style: {
headerSelect: {
root: {
borderRadius: "20px"
},
content: {
fontSize: "12px",
color: "red"
},
sheetName: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
padding: "8px"
},
title: {
color: "orange"
},
description: {
color: "yellow"
},
border: {
backgroundColor: "#143a52"
}
},
fullScreen: {
root: {
width: 200
},
icon: {
stroke: "red"
}
},
table: {
th: {
backgroundColor: "#E1E1E1",
borderColor: "black",
color: "yellow"
},
td: {
backgroundColor: "#f2f2f2",
borderColor: "black"
},
scrollbar: {
navigatorColor: "#4b357f",
backgroundColor: "#e9e6ef"
},
selectRowColor: "yellow"
},
progressBar: {
root: {
backgroundColor: "red"
},
progress: {
navigatorColor: "blue",
backgroundColor: "green",
}
},
sheetNameSelected: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
},
title: {
color: "orange"
},
description: {
color: "yellow"
},
border: {
backgroundColor: "#143a52"
}
}
}
}
joinSheet
With joinSheet
the theming of the elements within the "Join Sheets"-step can be controlled. Here are the available keys:
root
- Controls the styles of the background in each table displaying example data from the sheet.content
- Controls the styles of the table content which is displayed as example data from the sheet.sheet
- Controls the styles of the header which shows the information of the sheet on the top of each example table. The nested options arefileName
,name
andicon
.matchStatus
- Controls the styles of the box which displays the matching percentage of the selected join column for each sheet with the selected join column of the first sheet. The nested options arewarning
,success
,error
andloading
.table
- Controls the styles of table wherre example data from each sheet is displayed. The nested options areroot
,th
,td
,scrollbar
,selectColumnColor
andhoverColumnColor
.
style: {
joinSheet: {
root: {
backgroundColor: "green",
borderRadius: "20px",
},
content: {
backgroundColor: "white"
},
sheet: {
fileName: {
color: "red"
},
name: {
color: "blue"
},
icon: {
valid: "red",
invalid: "green",
}
},
matchStatus: {
warning: {
root: {
backgroundColor: "lightblue",
color: "orange",
},
icon: {
color: "orange"
},
percent: {
backgroundColor: "blue",
color: "white",
}
},
success: {
root: {
backgroundColor: "lightblue",
color: "green",
},
icon: {
color: "green"
},
percent: {
backgroundColor: "blue",
color: "white",
}
},
error: {
root: {
backgroundColor: "lightblue",
color: "red",
},
icon: {
color: "red"
},
percent: {
backgroundColor: "blue",
color: "white",
}
},
loading: {
root: {
backgroundColor: "lightgreen",
color: "black",
},
icon: {
color: "blue"
},
}
},
table: {
root: {
backgroundColor: "green",
borderColor: "red",
},
th: {
backgroundColor: "blue",
color: "green",
borderColor: "red",
},
td: {
backgroundColor: "yellow",
color: "red",
borderColor: "green",
},
scrollbar: {
navigatorColor: "red",
backgroundColor: "blue",
},
selectColumnColor: "purple",
hoverColumnColor: "pink",
}
}
}
columnMatch
With the columnMatch
key, the theming of the elements within the "Match Columns"-step can be controlled. Here are the available keys:
root
- Controls the base theming of the section.icon
- Controls the color of the expand and collapse arrow.matchingTitle
- Controls the stylings of the matching title, which is shown in the first row on the right side of each matching card.matchingPercent
- Controls the stylings of the row value percentage, which is shown in the second row on the right side of each matching card.notMatchingValue
- Controls the stylings of the row, which is shown in the third row on the right side of each matching card. Important: This row is only displayed when not all unique values of an imported column are matched with a dropdown option of a category column.columnMatchHeader
- Controls the header stylings for the left section of each matching card with addition options:root
,icon
anddropdown
columnMatchValue
- Controls the stylings of the value rows displayed inside the left section of each matching card. It also contains additional nested options:root
,icon
,scrollbar
, anddropdown
requiredColumns
- Controls the stylings of the "Required Columns"-section within the footer.buttonJoined
- Controls the styling of the button which show on the join column. The nested options areroot
andicon
.dialogJoinColumn
Controls the styling of the modal and content which shows example rows for joined columns. The nested options areroot
,overlay
,closeIcon
,title
,description
andtable
.
style: {
columnMatch: {
root: {
color: "blueviolet",
borderColor: "red"
},
icon: {
color: "black"
},
matchingTitle: {
root: {
backgroundColor: "tomato"
},
icon: {
color: "green"
},
checkIcon: {
color: "chocolate"
},
},
matchingPercent: {
root: {
backgroundColor: "green",
color: "yellow"
},
icon: {
color: "pink"
},
},
notMatchingValue: {
root: {
backgroundColor: "green",
color: "red"
},
icon: {
color: "red"
},
},
columnMatchHeader: {
root: {
backgroundColor: "burlywood",
borderColor: "tomato",
color: "burlywood"
},
icon: {
stroke: "yellow"
},
dropdown: {
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink"
},
search: {
placeholder: "red"
},
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "blue"
},
selectedOption: {
backgroundColor: "green",
":hover": {
backgroundColor: "yellow"
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato"
},
icon: {
color: "black"
},
},
header: {
backgroundColor: "gold",
color: "navy"
},
option: {
color: "yellow",
":hover": {
backgroundColor: "pink",
color: "blue"
},
},
badge: {
root: {
backgroundColor: "blue",
color: "white",
":hover": {
backgroundColor: "yellow",
color: "gold"
},
},
icon: {
color: "purple"
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
}
},
},
columnMatchValue: {
root: {
backgroundColor: "lemonchiffon",
borderColor: "red",
color: "blue"
},
emptyValue: {
color: "gold"
},
icon: {
stroke: "red"
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
dropdown: {
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "red"
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink"
},
selectedOption: {
backgroundColor: "navy"
},
option: {
":hover": {
backgroundColor: "pink",
color: "blue"
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato"
},
icon: {
color: "chocolate"
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
},
multiSelectionBadge: {
root: {
backgroundColor: "green",
color: "blue"
},
icon: {
color: "blue"
},
},
iconCheckedColor: "yellow"
},
},
requiredColumns: {
title: {
color: "red"
},
showMore: {
root: {
backgroundColor: "yellow"
},
badge: {
backgroundColor: "blue",
color: "yellow"
},
text: {
color: "purple",
fontSize: 24
},
icon: {
stroke: "blue"
},
},
notMatchErrorIcon: {
stroke: "green"
},
notMatchError: {
color: "blue"
},
hasMatchIcon: {
stroke: "purple"
},
hasMatch: {
color: "yellow"
},
notMatch: {
color: "purple"
},
notMatchIcon: {
color: "black"
},
},
buttonJoined: {
root: {
backgroundColor: "red",
color: "green",
},
icon: {
color: "white"
}
},
dialogJoinColumn: {
root: {
backgroundColor: "green"
},
overlay: {
backgroundColor: "black"
},
closeIcon: {
stroke: "white"
},
title: {
color: "red"
},
description: {
color: "orange"
},
table: {
wrapper: {
backgroundColor: "green",
borderRadius: 20,
},
root: {
borderColor: "black",
borderRadius: 20,
},
background: {
backgroundColor: "violet"
},
title: {
color: "gold"
},
description: {
color: "purple"
},
th: {
backgroundColor: "blue",
color: "red",
borderColor: "black",
},
td: {
color: "blue",
backgroundColor: "red",
borderColor: "black",
},
scrollbar: {
backgroundColor: "black",
navigatorColor: "red",
}
}
}
}
}
reviewEntries
To control the elements within the "Review Entries"-step of the nuvo importer, the reviewEntries
key can be used. In the following, all available options are listed:
root
- Controls the general styling of the section.switchError
- Controls the color of the "Show all rows with errors"-button for the section.selectRowColor
- Controls the color of the selected row in the table section.selectedBackground
- Controls the color of the selection frame which is displayed when one field is selected.fullscreen
- Controls the fullscreen icon on the top right of the section. Important: This icon is only displayed when your screen width is above 1910px.infoIcon
- Controls the stylings of the info icon right next to the column name within the header row.edit
- Controls the styles for fields in edit mode with separate options for the dropdown fieldsboolean
andcategory
. These keys have the nested optionitem
which uses the keysoption
, andselectedOption
. Forcategory
there're also keysheader
andsearch
for adjust style of search bar.table
- Controls the table of the "Review Entries"-step. The nested options are table elements, for example,td
,th
,scrollbar
, etc.td
also has the additional options for themingnormal
,error
,info
andwarning
fields.
style: {
reviewEntries: {
switchError: {
label: {
color: "red",
fontSize: 20,
},
badge: {
backgroundColor: "orange",
color: "black",
},
},
selectRowColor: "orange",
selectedBackground: {
normal: "yellow",
},
fullScreen: {
root: {
width: 200,
},
icon: {
stroke: "red",
},
},
infoIcon: {
color: "orange",
":hover": {
color: "blue",
},
},
edit: {
category: {
header: {
backgroundColor: "blue"
},
search: {
root: {
backgroundColor: "red"
},
icon: {
color: "green"
},
placeholder: {
color: "blue"
}
},
item: {
option: {
backgroundColor: "red",
":hover": {
color: "blue",
},
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "yellow",
},
closeIcon: {
color: "yellow",
},
},
multiSelectionBadge: {
root: {
backgroundColor: "green",
color: "blue"
},
icon: {
color: "blue"
},
},
iconCheckedColor: "yellow"
},
string: {
backgroundColor: "blue",
},
currency: {
backgroundColor: "pink"
},
percentage: {
backgroundColor: "black"
},
date: {
backgroundColor: "#4F8AAB",
borderColor: "#4BC589"
},
time: {
backgroundColor: "#9AC54B",
borderColor: "#C5B64B"
},
boolean: {
item: {
option: {
backgroundColor: "red",
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "red",
},
closeIcon: {
color: "red",
},
},
},
},
table: {
scrollbar: {
backgroundColor: "red",
navigatorColor: "blue",
},
dragStyle: {
color: "orange",
style: "solid",
},
th: {
borderColor: "blue",
backgroundColor: "yellow",
},
td: {
root: {
borderColor: "grey",
},
warning: {
backgroundColor: "yellow",
color: "black",
},
error: {
backgroundColor: "red",
color: "white",
},
info: {
backgroundColor: "blue",
color: "red",
},
normal: {
backgroundColor: "green",
color: "red",
},
},
},
}
}
popover
The popover
key allows the styling of the error, warning and info popover indicator, that occur when hovering over a cell containing an error, warning or info.
All three classes (info
, warning
and error
) contain the following key:
root
- Controls the basic styling for the popover indicator
style: {
popover: {
info: {
root: {
color: "white",
backgroundColor: "#11b981",
borderColor: "#11b981"
}
},
warning: {
root: {
color: "white",
backgroundColor: "orange",
borderColor: "orange"
}
},
error: {
root: {
color: "white",
backgroundColor: "#9b0707",
borderColor: "#9b0707"
}
}
}
}
dialog
The dialog
key allows controlling the style of the pop-up screens, which occurs when modal
is set to true
:
root
- Controls the base stylings for the section.overlay
- Controls the stylings of the overlay that surrounds the dialog container.closeIcon
- Controls the style of the "X" icon on the top right of the pop-ups.
style: {
dialog: {
root: {
backgroundColor: "yellow",
},
overlay: {
backgroundColor: "white",
},
closeIcon: {
stroke: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
}
}
messagePopup
The messagePopup
key allows controlling the style of the pop-ups which occur when going backward or for confirmations during the import process. In the following, all available options are listed:
root
- Controls the base stylings for the section.overlay
- Controls the stylings of the overlay that surrounds the dialog container.title
- Controls the style of the pop-up title.description
- Controls the style of the pop-up description text.warnIcon
- Controls the style of the pop-up warning icon.successIcon
- Controls the style of the pop-up success animation.closeIcon
- Controls the style of the "X" icon on the top right of the pop-ups.
style: {
messagePopup: {
root: {
backgroundColor: "green",
},
overlay: {
backgroundColor: "blue",
},
title: {
color: "red",
},
description: {
color: "blue",
},
warnIcon: {
stroke: "red",
},
successIcon: {
stroke: "red",
},
closeIcon: {
stroke: "blue",
},
}
}
popoverInfo
The popoverInfo allows for the styling of the popover indicator, mainly inside the section containing additional information to lookup.
This option has only a root
key assigned with CSS directly to this option.
style: {
popoverInfo: {
backgroundColor: "white",
color: "red",
}
}
loader
When a file is uploaded, a loading indicator will appear. This key controls the stylings of that indicator and its container.
root
- Controls the base stylings for the section.content
- Controls the styling of content in the loading section.loadAnimationColor
- Controls the color of the animation inside the spin icon.
style: {
loader: {
root: {
backgroundColor: "#f2f2f2",
},
content: {
color: "green",
},
loadAnimationColor: "green",
}
}
Complete styling
Here you can find a complete code snippet with all the main keys mentioned above:
style: {
globals: {
textColor: "#162338",
fontFamily: "arial",
backgroundColor: "#f1f1f1",
primaryTextColor: "#111111",
secondaryTextColor: "#143a52",
},
buttons: {
primary: {
backgroundColor: "#143a52",
borderColor: "#143a52",
color: "#ffffff",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#24516D",
borderColor: "#ffffff",
},
":active": {
backgroundColor: "##0C3046",
borderColor: "#ffffff",
},
},
secondary: {
backgroundColor: "#ffffff",
borderColor: "#143a52",
color: "#143a52",
padding: "4px 11px",
fontSize: "16px",
borderRadius: "10px",
":hover": {
backgroundColor: "#ffffff",
borderColor: "#24516D",
color: "#24516D",
},
":active": {
backgroundColor: "#FFFFFF",
borderColor: "#0C3046",
color: "#0C3046",
},
},
},
progressBar: {
root: {
backgroundColor: "grey",
borderRadius: "7px",
border: "1px solid white",
padding: "20px",
},
icon: {
fill: "red",
},
current: {
color: "darkblue",
fontSize: "18px",
fontWeight: "600",
},
complete: {
color: "green",
},
incomplete: {
color: "yellow",
},
},
header: {
root: {
backgroundColor: "#E1E1E1",
},
title: {
color: "darkblue",
fontSize: "10px",
},
description: {
color: "black",
fontSize: "8px",
},
},
dropzone: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black"
},
icon: {
box: {
fill: "black",
},
},
content: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
borderRadius: "20px",
padding: "40px 60px",
},
title: {
color: "darkblue",
},
description: {
color: "green",
},
illustration: {
borderColor: "red",
headerColor: "green",
circleHeaderColor: "blue",
circleRowColor: "brown",
downloadIconColor: "gray",
shadowColor: "#E0EAFD"
}
},
},
footer: {
root: {
backgroundColor: "#E1E1E1",
}
},
sheetSelect: {
root: {
backgroundColor: "#E1E1E1",
border: "1px solid black",
},
header: {
color: "red",
},
sheetName: {
root: {
backgroundColor: "yellow",
},
title: {
color: "green",
},
description: {
color: "orange",
},
border: {
backgroundColor: "#143a52",
},
},
grid: {
root: {
backgroundColor: "yellow",
},
title: {
color: "green",
},
description: {
color: "orange",
},
checkbox: {
backgroundColor: "red",
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow",
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
}
},
container: {
backgroundColor: "white",
}
},
list: {
root: {
backgroundColor: "yellow",
},
title: {
color: "green",
},
description: {
color: "orange"
},
checkbox: {
backgroundColor: "red"
},
checked: {
root: {
borderColor: "red",
backgroundColor: "blue",
backgroundColor: "yellow"
},
title: {
color: "green"
},
description: {
color: "yellow"
},
checkbox: {
backgroundColor: "red"
}
},
container: {
backgroundColor: "white",
}
},
pagination: {
currentPageButton: {
backgroundColor: "red",
color: "white",
},
},
icon: {
stroke: "red",
},
sheetLists: {
root: {
backgroundColor: "brown"
}
},
scrollbar: {
backgroundColor: "blue",
navigatorColor: "red",
},
unSelectSheetName: {
root: {
backgroundColor: "green"
},
title: {
color: "pink"
},
description: {
color: "purple"
},
border: {
backgroundColor: "green"
}
},
addFileButton: {
root: {
backgroundColor: "red",
color: "blue",
},
icon: {
stroke: "green"
}
}
},
headerSelect: {
root: {
borderRadius: "20px",
},
content: {
fontSize: "12px",
color: "red",
},
sheetName: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
padding: "8px",
},
title: {
color: "orange",
},
description: {
color: "yellow",
},
border: {
backgroundColor: "#143a52",
},
},
fullScreen: {
root: {
width: 200,
},
icon: {
stroke: "red",
},
},
table: {
th: {
backgroundColor: "#E1E1E1",
borderColor: "black",
color: "yellow",
},
td: {
backgroundColor: "#f2f2f2",
borderColor: "black",
},
scrollbar: {
navigatorColor: "#4b357f",
backgroundColor: "#e9e6ef",
},
selectRowColor: "yellow"
},
progressBar: {
root: {
backgroundColor: "red"
},
progress: {
navigatorColor: "blue",
backgroundColor: "green",
}
},
sheetNameSelected: {
root: {
backgroundColor: "grey",
borderRadius: "5px",
},
title: {
color: "orange"
},
description: {
color: "yellow"
},
border: {
backgroundColor: "#143a52"
}
}
},
joinSheet: {
root: {
backgroundColor: "green",
borderRadius: "20px",
},
content: {
backgroundColor: "white"
},
sheet: {
fileName: {
color: "red"
},
name: {
color: "blue"
},
icon: {
valid: "red",
invalid: "green",
}
},
matchStatus: {
warning: {
root: {
backgroundColor: "lightblue",
color: "orange",
},
icon: {
color: "orange"
},
percent: {
backgroundColor: "blue",
color: "white",
}
},
success: {
root: {
backgroundColor: "lightblue",
color: "green",
},
icon: {
color: "green"
},
percent: {
backgroundColor: "blue",
color: "white",
}
},
error: {
root: {
backgroundColor: "lightblue",
color: "red",
},
icon: {
color: "red"
},
percent: {
backgroundColor: "blue",
color: "white",
}
},
loading: {
root: {
backgroundColor: "lightgreen",
color: "black",
},
icon: {
color: "blue"
},
}
},
table: {
root: {
backgroundColor: "green",
borderColor: "red",
},
th: {
backgroundColor: "blue",
color: "green",
borderColor: "red",
},
td: {
backgroundColor: "yellow",
color: "red",
borderColor: "green",
},
scrollbar: {
navigatorColor: "red",
backgroundColor: "blue",
},
selectColumnColor: "purple",
hoverColumnColor: "pink",
}
},
columnMatch: {
root: {
color: "blueviolet",
borderColor: "red",
},
icon: {
color: "black",
},
matchingTitle: {
root: {
backgroundColor: "tomato",
},
icon: {
color: "green",
},
checkIcon: {
color: "chocolate",
},
},
matchingPercent: {
root: {
backgroundColor: "green",
color: "yellow",
},
icon: {
color: "pink",
},
},
notMatchingValue: {
root: {
backgroundColor: "green",
color: "red",
},
icon: {
color: "red",
},
},
columnMatchHeader: {
root: {
backgroundColor: "burlywood",
borderColor: "tomato",
color: "burlywood",
},
icon: {
stroke: "yellow",
},
dropdown: {
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
search: {
placeholder: "red",
},
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "blue",
},
selectedOption: {
backgroundColor: "green",
":hover": {
backgroundColor: "yellow",
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato",
},
icon: {
color: "black",
},
},
header: {
backgroundColor: "gold",
color: "navy",
},
option: {
color: "yellow",
":hover": {
backgroundColor: "pink",
color: "blue",
},
},
badge: {
root: {
backgroundColor: "blue",
color: "white",
":hover": {
backgroundColor: "yellow",
color: "gold",
},
},
icon: {
color: "purple",
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
}
},
},
columnMatchValue: {
root: {
backgroundColor: "lemonchiffon",
borderColor: "red",
color: "blue",
},
emptyValue: {
color: "gold",
},
icon: {
stroke: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
dropdown: {
root: {
backgroundColor: "salmon",
color: "darkblue",
borderColor: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
selectedOption: {
backgroundColor: "navy",
},
option: {
":hover": {
backgroundColor: "pink",
color: "blue",
},
},
button: {
placeholder: "yellow",
root: {
backgroundColor: "tomato",
},
icon: {
color: "chocolate",
},
},
createNewOption: {
root: {
backgroundColor: "blue",
color: "green"
},
icon: {
color: "white"
}
},
iconCheckedColor: "yellow"
},
},
requiredColumns: {
title: {
color: "red",
},
showMore: {
root: {
backgroundColor: "yellow",
},
badge: {
backgroundColor: "blue",
color: "yellow",
},
text: {
color: "purple",
fontSize: 24,
},
icon: {
stroke: "blue",
},
},
notMatchErrorIcon: {
stroke: "green",
},
notMatchError: {
color: "blue",
},
hasMatchIcon: {
stroke: "purple",
},
hasMatch: {
color: "yellow",
},
notMatch: {
color: "purple",
},
notMatchIcon: {
color: "black",
},
},
buttonJoined: {
root: {
backgroundColor: "red",
color: "green",
},
icon: {
color: "white"
}
},
dialogJoinColumn: {
root: {
backgroundColor: "green"
},
overlay: {
backgroundColor: "black"
},
closeIcon: {
stroke: "white"
},
title: {
color: "red"
},
description: {
color: "orange"
},
table: {
wrapper: {
backgroundColor: "green",
borderRadius: 20,
},
root: {
borderColor: "black",
borderRadius: 20,
},
background: {
backgroundColor: "violet"
},
title: {
color: "gold"
},
description: {
color: "purple"
},
th: {
backgroundColor: "blue",
color: "red",
borderColor: "black",
},
td: {
color: "blue",
backgroundColor: "red",
borderColor: "black",
},
scrollbar: {
backgroundColor: "black",
navigatorColor: "red",
}
}
}
},
reviewEntries: {
switchError: {
label: {
color: "red",
fontSize: 20,
},
badge: {
backgroundColor: "orange",
color: "black",
},
},
selectRowColor: "orange",
selectedBackground: {
normal: "yellow",
},
fullScreen: {
root: {
width: 200,
},
icon: {
stroke: "red",
},
},
infoIcon: {
color: "orange",
":hover": {
color: "blue",
},
},
edit: {
category: {
header: {
backgroundColor: "blue"
},
search: {
root: {
backgroundColor: "red"
},
icon: {
color: "green"
},
placeholder: {
color: "blue"
}
},
item: {
option: {
backgroundColor: "red",
":hover": {
color: "blue",
},
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "yellow",
},
closeIcon: {
color: "yellow",
},
},
iconCheckedColor: "yellow"
},
string: {
backgroundColor: "blue",
},
currency: {
backgroundColor: "pink"
},
percentage: {
backgroundColor: "black"
},
date: {
backgroundColor: "#4F8AAB",
borderColor: "#4BC589"
},
time: {
backgroundColor: "#9AC54B",
borderColor: "#C5B64B"
},
boolean: {
item: {
option: {
backgroundColor: "red",
},
selectedOption: {
backgroundColor: "blue",
},
},
button: {
arrowIcon: {
color: "red",
},
closeIcon: {
color: "red",
},
},
},
},
table: {
scrollbar: {
backgroundColor: "red",
navigatorColor: "blue",
},
dragStyle: {
color: "orange",
style: "solid",
},
th: {
borderColor: "blue",
backgroundColor: "yellow",
},
td: {
root: {
borderColor: "grey",
},
warning: {
backgroundColor: "yellow",
color: "black",
},
error: {
backgroundColor: "red",
color: "white",
},
info: {
backgroundColor: "blue",
color: "red",
},
normal: {
backgroundColor: "green",
color: "red",
},
},
},
},
popover: {
info: {
root: {
color: "white",
backgroundColor: "#11b981",
borderColor: "#11b981"
}
},
warning: {
root: {
color: "white",
backgroundColor: "orange",
borderColor: "orange"
}
},
error: {
root: {
color: "white",
backgroundColor: "#9b0707",
borderColor: "#9b0707"
}
}
},
dialog: {
root: {
backgroundColor: "yellow",
},
overlay: {
backgroundColor: "white",
},
closeIcon: {
stroke: "red",
},
scrollbar: {
backgroundColor: "purple",
navigatorColor: "pink",
},
},
messagePopup: {
root: {
backgroundColor: "green",
},
overlay: {
backgroundColor: "blue",
},
title: {
color: "red",
},
description: {
color: "blue",
},
warnIcon: {
stroke: "red",
},
successIcon: {
stroke: "red",
},
closeIcon: {
stroke: "blue",
},
},
popoverInfo: {
backgroundColor: "white",
color: "red",
},
loader: {
root: {
backgroundColor: "#f2f2f2",
},
content: {
color: "green",
},
loadAnimationColor: "green",
}
}