CardView - CSS API Reference

All Common CSS variables:

Specific CSS variables for CardView styling:

• --smart-card-view-default-width: Default width of CardView.
• --smart-card-view-default-height: Default height of CardView.
• --smart-card-view-customize-panel-width: Width of the CardView customize panel (drop down).
• --smart-card-view-filter-panel-width: Width of the CardView filter panel (drop down).
• --smart-card-view-sort-panel-width: Width of the CardView sort panel (drop down).
• --smart-card-view-search-panel-width: Width of the CardView search panel (drop down).
• --smart-card-view-cover-height: Height of CardView cover (carousel).
• --smart-card-view-vertical-offset: Vertical offset of CardView.
• --smart-card-view-column-min-width: Min width of CardView visual columns.
• --smart-card-view-gap: Gap between CardView cards.
• --smart-card-view-add-new-button-size: Size of the "Add new record" (+) button.
• --smart-card-view-add-new-button-background: Background color of the "Add new record" (+) button.
• --smart-card-view-add-new-button-color: Text color of the "Add new record" (+) button.
• --smart-card-view-highlighted-color: Border color of the card currently highlighted by search.
• --smart-card-view-found-color: Border color of the cards currently found by search.

The following CSS selectors can be used to style CardView:

• smart-card-view - the element itself. Can be used to set width and height for the whole element.
  • .smart-container - a container that holds the inner structure of the element. Normally, it shoudn't be used for styling.
    • .smart-card-view-header - the CardView's header.
      • .smart-card-view-header-button - applied to all header buttons.
      • .smart-card-view-customize-button - applied to the "Customize cards" button.
      • .smart-card-view-filter-button - applied to the "Filter" button.
      • .smart-card-view-sort-button - applied to the "Sort" button.
      • .smart-card-view-search-button - applied to the Search icon.
      • .smart-card-view-header-drop-down - applied to the header drop down.
        • smart-switch-button - the switch button in the customize drop down.
        • smart-input - the Cover field selection input in the customize drop down.
        • smart-column-panel - the column customization panel in the customize drop down.
        • smart-multi-column-filter-panel - the filter panel in the filter drop down.
        • smart-sort-panel - the sort panel in the sort drop down.
        • smart-card-view-search-box - the search panel in the search drop down.
    • .smart-card-container - container of all cards.
      • smart-card - cards inside the CardView.
        • smart-carousel - the cover of a card.
        • .smart-card-view-title - applied to the title of a card.
          • .smart-arrow-up - applied to the collapse/expand arrow.
        • .smart-card-view-content - applied to the content section of a card.
          • .smart-card-view-cell - applied to the "cell" of a card.
            • .smart-card-view-label - applied to the label in a card's "cell".
            • .smart-card-view-value - applied to the value in a card's "cell".
    • .smart-loader - applied to the loader of CardView.
    • .smart-add-new-button - applied to the "Add new record" (+) button.
• .smart-card-view-window - applied to the CardView's edit dialog.
  • .smart-card-view-label - applied to "cell" editor labels.
    .toggle-visibility - applied to the icon for toggling column visibility.
  • .smart-card-view-editor - applied to "cell" editors.
  • .image - applied to image column editors.
    • .thumbnail - applied to image thumbnails.
    • .label - applied to the "New image URL:" label.
    • smart-input - the input for adding a new image URL.
    • .add - the button (+) for adding a new image.
  • .ok - applied to the edit dialog's "OK" button.
  • .cancel - applied to the edit dialog's "Cancel" button.