autocomplete-theme-classic
The Classic theme provides styling for Autocomplete experiences.
The theme is designed as a neutral and clean starter. You can use it as a base and customize it with CSS variables.
If you want to build your own theme, you can start from the Classic theme and adjust it.
#
InstallationFirst, you need to install the theme.
Then import it in your project:
If you don't use a package manager, you can link the stylesheet in your HTML:
#
CSS variablesThe theme uses CSS variables that you can customize in your own CSS.
--aa-base-unit
(number) the base value used to calculate font sizes and spacing--aa-font-size
(length) a fixed font size--aa-spacing-factor
(number) the base value used to calculate spacing increments--aa-spacing
(length) a fixed spacing value--aa-spacing-half
(length) a fixed half spacing value--aa-icon-size
(length) a fixed icon size value--aa-primary-color
(color) the accent color--aa-muted-color
(color) the muted color--aa-selected-color
(color) the color for selected, active or focused elements--aa-icon-color
(color) the color for the icon--aa-text-color
(color) the global text color--aa-content-text-color
(color) the text color for the content title and description--aa-background-color
(color) the global background color--aa-background-color-alpha-0
(color) the background color with a 0 alpha layer (useful for gradients on Safari)--aa-panel-shadow
(box-shadow) the shadow for the panel--aa-panel-max-height
(length) the maximum height for the panel before showing a vertical scroll bar--aa-detached-media-query
(media query) the media query to enable detached mode on smaller devices--aa-detached-modal-media-query
(media query) the media query to enable detached mode on bigger devices--aa-detached-modal-max-width
(length) the maximum width of the modal in detached mode--aa-detached-modal-max-height
(length) the maximum height of the modal in detached mode
To customize a value, you can create a custom stylesheet and override the variable.
Make sure to load these styles after the theme.
#
TemplatesFor the theme to work out of the box, you need to use a conventional CSS class set. All class names from the theme come with an aa-
namespace to avoid interfering with your own styles.
#
ItemHere's the markup for an item
template.
#
Link itemTo wrap an item within a link, use the .aa-ItemLink
class in place of the element with .aa-ItemWrapper
. Make sure not to use both together.
#
HeaderHere's the markup for a header
template.
#
No resultsHere's the markup for a noResults
template.
#
Additional CSS classesThe theme provides a set of optional classes for you to use in different contexts.
#
Modifiers.aa-ItemIcon--noBorder
removes the border of the icon.aa-ItemIcon--alignTop
aligns the icon to the top (recommended when the template is longer than three lines).aa-ItemIcon--picture
makes the icon larger (recommended when using an image and the template is longer than three lines).aa-Panel--scrollable
declares the scrollable container(s) of the panel
#
Utilities.aa-ActiveOnly
displays an element only when the item is active.aa-DesktopOnly
displays an element only on desktop devices.aa-TouchOnly
displays an element only on touch devices
#
Dark modeThe theme supports dark mode. You can enable it on the body
tag in two different ways:
<body data-theme="dark" />
<body class="dark" />