SMZ Mentions

A customizable mentions component for Angular applications.

Customization

The mention component styles can be customized using CSS custom properties. Important: The library no longer defines default values for these properties. You must define them in your application to ensure proper styling.

Required CSS Custom Properties

You need to define these CSS custom properties in your application. Here are the recommended default values:

// CSS Custom Properties for customization
// These must be defined by the consuming application
:root {
  // Menu Container
  --smz-mention-menu-bg-color: #fff;
  --smz-mention-menu-text-color: #212529;
  --smz-mention-menu-border-color: rgba(0, 0, 0, 0.15);
  --smz-mention-menu-border-radius: 0.25em;
  --smz-mention-menu-padding: 0.5em 0;
  --smz-mention-menu-margin: 0.125em 0 0;
  --smz-mention-menu-font-size: 1em;
  --smz-mention-menu-min-width: 11em;
  --smz-mention-menu-shadow: none;

  // Menu Items
  --smz-mention-item-bg-color: transparent;
  --smz-mention-item-border: 0;

  // Active/Hovered Items
  --smz-mention-active-text-color: #fff;
  --smz-mention-active-bg-color: #337ab7;
  --smz-mention-active-outline: 0;

  // Scrollable Menu
  --smz-mention-scrollable-max-height: 292px;
}

Available CSS Custom Properties

Menu Container

• --smz-mention-menu-bg-color: Background color of the mention menu
• --smz-mention-menu-text-color: Text color of the mention menu
• --smz-mention-menu-border-color: Border color of the mention menu
• --smz-mention-menu-border-radius: Border radius of the mention menu
• --smz-mention-menu-padding: Padding of the mention menu
• --smz-mention-menu-margin: Margin of the mention menu
• --smz-mention-menu-font-size: Font size of the mention menu
• --smz-mention-menu-min-width: Minimum width of the mention menu
• --smz-mention-menu-shadow: Box shadow of the mention menu

Menu Items

• --smz-mention-item-bg-color: Background color of mention items
• --smz-mention-item-border: Border of mention items

Active/Hovered Items

• --smz-mention-active-text-color: Text color of active mention items
• --smz-mention-active-bg-color: Background color of active mention items
• --smz-mention-active-outline: Outline of active mention items

Scrollable Menu

• --smz-mention-scrollable-max-height: Maximum height of scrollable menu

Usage Examples

Global Customization

Add these variables to your global styles (e.g., styles.scss):

:root {
  // Required base styles
  --smz-mention-menu-bg-color: #fff;
  --smz-mention-menu-text-color: #212529;
  --smz-mention-menu-border-color: rgba(0, 0, 0, 0.15);
  --smz-mention-menu-border-radius: 0.25em;
  --smz-mention-menu-padding: 0.5em 0;
  --smz-mention-menu-margin: 0.125em 0 0;
  --smz-mention-menu-font-size: 1em;
  --smz-mention-menu-min-width: 11em;
  --smz-mention-menu-shadow: none;
  --smz-mention-item-bg-color: transparent;
  --smz-mention-item-border: 0;
  --smz-mention-active-text-color: #fff;
  --smz-mention-active-bg-color: #337ab7;
  --smz-mention-active-outline: 0;
  --smz-mention-scrollable-max-height: 292px;
}

Dark Theme Customization

:root {
  // Dark theme overrides
  --smz-mention-menu-bg-color: #2c3e50;
  --smz-mention-menu-text-color: #ecf0f1;
  --smz-mention-menu-border-color: #34495e;
  --smz-mention-active-bg-color: #3498db;
  --smz-mention-active-text-color: #ffffff;
}

Component-Specific Customization

Override styles for a specific component:

my-component {
  --smz-mention-menu-bg-color: #f8f9fa;
  --smz-mention-menu-border-color: #dee2e6;
  --smz-mention-active-bg-color: #007bff;
}

Theme-Based Customization

.dark-theme {
  --smz-mention-menu-bg-color: #343a40;
  --smz-mention-menu-text-color: #f8f9fa;
  --smz-mention-menu-border-color: #495057;
  --smz-mention-active-bg-color: #007bff;
  --smz-mention-active-text-color: #ffffff;
}

Disabling Internal Styles

You can completely disable the internal styles by setting disableStyle: true in the mention configuration. This allows you to provide your own custom CSS without any interference from the component's default styles.