Styling

Include the index.css from @databit/filters in either your Typescript or CSS file:

.ts

import "@databit/filters/index.css";

.css

@import "@databit/filters/index.css";

CSS Properties

Property	Description
--dbi-text-font-size	Font size of textbox, must be in px
--dbi-text-line-height	Line height of textbox, must be in px
--dbi-text-font-family	Font family of textbox
--dbi-border	Border of whole input e.g. 1px solid #ccc
--dbi-border-radius	Border radius of whole input
--dbi-margin	Margin of whole input
--dbi-padding	Padding of whole input
--dbi-text-caret-color	Color of the caret inside of textbox
--dbi-background	Background of the input
--dbi-text-selection-background-color	Selection color of the textbox
--dbi-text-selection-color	Selection color of the font of the textbox
--dbi-text-color	Default color of the text in textbox
--dbi-text-placeholder-color	Color of the placeholder

CSS Classes

Class	Description
dbf-operator	Operators e.g. =, >, etc.
dbf-logic-operator	Logic operator and or
dbf-value	Values e.g. "string" or 9
dbf-paren	Parentheses ( )
dbf-paren.dbf-level-[X]	Nested parentheses, for example in ((x = 9)) the inner parentheses would be dbf-paren.dbf-level-1, currently there are levels 1 to 4
dbf-error	Error
dbf-error-message	Error message on the bottom of input
dbi-completion-box	The completion box
dbi-message-box	The message box, for example the ones with hovered errors or variable type info