search

search is an object within the theme property for overriding View Library search box styles.

<Vizzly.Dashboard
  // ...
  theme={{
    search: {
      "&:hover": {
        boxShadow: "0 0 0 3px rgb(224, 242, 255)",
      },
      "&:focus": {
        boxShadow: "0 0 0 3px rgb(224, 242, 255)",
      },
      icons: {
        color: "#3074d9",
      },
    },
  }}
/>

Search

Search is shown within <Vizzly.Dashboard/> View Library by clicking the 'Select Template' button on an empty dashboard cell.

Default Values

import Vizzly, { type VizzlyTheming } from "@vizzly/dashboard"
 
export function Dashboard() {
  const theme: VizzlyTheming.Base = {
    search: {
      // Default Values
      background: "#ffffff",
      border: "0",
      borderRadius: "0.5rem",
      color: "inherit",
      fontSize: "16px",
      fontWeight: 500,
      height: "36px",
      padding: "6px 10px 7px 16px",
      "&:hover": {
        background: "#ffffff",
        boxShadow: "0 0 0 3px rgb(224, 242, 255)",
      },
      "&:focus": {
        boxShadow: "0 0 0 3px rgb(224, 242, 255)",
      },
      icons: {
        color: "#3074d9",
      },
    },
  }
 
  return (
    <Vizzly.Dashboard
      // ...
      theme={theme}
    />
  )
}