Basic Theming

By default, the theme variable defined in Configuration is used with every component; no additional configuration needed.

Custom Basic Theming

You can overwrite an individual Available In's theme by setting the vs-theme attribute. Note: If you change your global theme configuration, the change will not reflect on components with custom theme defined.

<div class="vs-available" data-vs-theme="red"></div>

Advanced Theming

You can define CSS Variables to customize the look based on our themes. Below defines all available settings with the default settings.

.vs-available {
  --vs-available-spacer: calc(var(--vs-spacer, 1rem) * 1);
  --vs-available-font-family: 'Proxima Nova', sans-serif;
  
  --vs-available-header-font-family: var(--vs-header-font-family, inherit);
  --vs-available-header-font-weight: var(--vs-header-font-weight, 600);
  --vs-available-header-font-size: 1.3125rem;
  
  --vs-available-titles-font-size: 1.15rem;
  --vs-available-titles-font-weight: 600;

  --vs-available-state-gap: calc(var(--vs-spacer, 1rem) * 1);
  --vs-available-state-font-size: 12px;
  --vs-available-state-font-weight: 600;
  --vs-available-state-line-height: 1.5;
  --vs-available-state-letter-spacing: normal;
  --vs-available-state-color: #05172C;
  --vs-available-state-background-color: #D1E3F8;
  --vs-available-state-min-width: 36px;
  --vs-available-state-padding: 4px 8px;
  --vs-available-state-border: inherit;
  --vs-available-state-border-radius: 12rem;
  --vs-available-state-text-transform: uppercase;

  --vs-available-state-tooltip-color: #ffffff;
  --vs-available-state-tooltip-background-color: #222222;
  --vs-available-state-tooltip-padding: 12px 16px;
  --vs-available-state-tooltip-border-radius: 4px;
  --vs-available-state-tooltip-font-size: 1rem;
  --vs-available-state-tooltip-font-weight: normal;
  --vs-available-state-tooltip-text-transform: capitalize;
  --vs-available-state-tooltip-offset: 4px;
  --vs-available-state-tooltip-arrow-size: 8px;

  --vs-available-pickups-gap: var(--vs-available-state-gap);
  --vs-available-pickups-font-size: var(--vs-available-state-font-size, 12px);
  --vs-available-pickups-font-weight: var(--vs-available-state-font-weight, 600);
  --vs-available-pickups-line-height: var(--vs-available-state-line-height, 1);
  --vs-available-pickups-letter-spacing: var(--vs-available-state-letter-spacing, normal);
  --vs-available-pickups-color: var(--vs-available-state-color, #05172C);
  --vs-available-pickups-background-color: var(--vs-available-state-background-color, #D1E3F8);
  --vs-available-pickups-min-width: var(--vs-available-state-min-width, 36px);
  --vs-available-pickups-padding: var(--vs-available-state-padding, 4px 8px);
  --vs-available-pickups-border-radius: var(--vs-available-state-border-radius, 12rem);
  --vs-available-pickups-text-transform: uppercase;

  --vs-available-extras-gap: calc(var(--vs-spacer, 1rem) * 1) calc(var(--vs-spacer, 1rem) * 1.5);

  --vs-available-restricted-color: #ffffff;
  --vs-available-restricted-background-color: #6C757D;
  --vs-available-restricted-padding: var(--vs-available-state-padding, 4px 8px);
  --vs-available-restricted-border-radius: var(--vs-available-state-border-radius, 12rem);
  --vs-available-restricted-font-size: var(--vs-available-state-font-size, 12px);
  --vs-available-restricted-font-weight: var(--vs-available-state-font-weight, 600);
}