ThemeClasses
Purpose
In particular, classes from
Assets/scss/base/_custom-classes.scss may not be obvious from markup alone, so they are documented explicitly here.Buttons
Assets/scss/elements/_buttons.scss.btn — base button class..btn__icon — icon-only button styling..btn--primary, .btn--primary-outline, .btn--accent, .btn--transparent.btn--xl, .btn--lg, .btn--md, .btn--smModal
Assets/scss/elements/_modal.scss.modal — modal overlay/backdrop container..modal__box — modal content container..modal__box--product — product quick-view modal variant..modal__box--product__title-cat — header/title/category area..modal__box--product__btn-add — add-to-cart button wrapper.Toast
Assets/scss/elements/_toast.scss.toast — toast notifications container..toast__box — base toast message box..toast__box--info, .toast__box--error, .toast__box--success (commonly map to $store.toast message type).Compare (floating button)
Assets/scss/base/_global.scss.floating-compare-button — floating compare button container..floating-compare-button__count — counter badge shown on the floating compare button.Base layout / content helpers
Assets/scss/base/_global.scss.container — standard page container wrapper (sets responsive max-width and flex layout).[x-cloak] — hides Alpine elements until Alpine initializes..plain-page — base typography spacing for “plain pages” content..post — base typography spacing for blog post content.#post-wrap — blog post content wrapper (mainly image handling).Custom utility classes
Assets/scss/base/_custom-classes.scssResponsive visibility
.desktop-only — hides content on viewports smaller than the desktop breakpoint..mobile-only — hides content on desktop and above.Field helper text
.field-status, .helper — small helper/status text below fields.Loading indicators
.dot-flashing — three-dot loading indicator..isLoading — adds an inline loading “spinner ring” overlay to a container..hideLoading — hides the ring and restores child opacity (used as .isLoading.hideLoading).Skeleton placeholders
.skeleton — paints the element itself as a shimmering grey block..skeleton-cover — hides the element's content and draws the shimmer over the same box, so the layout keeps its final size.%skeleton and %skeleton-cover — the SCSS placeholders behind those classes. Components use @extend %skeleton-cover; inside their own SCSS.%skeleton-shine — the shared shimmer layer (a ::before pseudo-element). It moves with transform: translateX(...) rather than animating background-position, so the animation runs on the compositor and does not repaint every frame.--color-skeleton / --color-skeleton-shine, and --color-dark-skeleton / --color-dark-skeleton-shine in dark mode (Assets/scss/base/_theme.scss). The shimmer stops when the visitor prefers reduced motion.Component loading state
.swiper:not(.swiper-initialized) .swiper-slide in Assets/scss/base/_custom-classes.scss applies %skeleton-cover and hides the pagination and navigation buttons; the placeholders disappear as soon as Swiper adds swiper-initialized, and the slides then fade in over 0.4s (swiper-fade-in, disabled under prefers-reduced-motion). A component that deliberately does not run Swiper at some breakpoint must add swiper-disabled to the .swiper element there, otherwise the skeleton never ends; ProductsBlock does this on desktop (1440px and up).--loading modifier only when an animation is configured, so their text is not blank before the animation plays. BannerCarousel still adds bannerCarousel--loading with an animation, but its skeleton now comes from the shared Swiper rule.1.
<component>--loading modifier, e.g. class="component map map--loading", so the skeleton is visible from the first paint.2.
@extend %skeleton-cover;. Text-like elements also get w-fit, so the bar matches the text width.3.
window.load (which waits for every image and third-party script on the page). Cart binds it with :class="{ 'cart--loading': firstLoading }", so it goes away when the first cart fetch completes; only the item list and the summary prices are covered.requestAnimationFrame; either way it happens in init(), not on window.load.init callback instead.--loading modifier on the section and keep the removal in init(). Otherwise the placeholders either never appear or never go away.Keyframes
Assets/scss/base/_keyframes.scssfade-in, slide-in-left, slide-in-left-short, slide-in-right, slide-in-right-long, slide-in-top, slide-in-bottom, rise-in, rise-in-small, reveal-from-left, clip-reveal-left, zoom-in, pop-in, stomp, skeleton-shimmer, dot-flashing, dot-flashing-dark, rotate-ring.Scrollbar styling
.custom-scrollbar — applies a thin WebKit scrollbar with a primary-colored thumb..custom-scrollbar--lg — slightly thicker scrollbar..custom-scrollbar--gray — gray thumb.Shadows
.shadow--1, .shadow--2, .shadow--3 — predefined box-shadow elevations..lg:shadow--1, .lg:shadow--2, .lg:shadow--3, .lg:shadow-none.Layout helpers
.two-cols — builds a 2-column responsive layout..right-container, .left-container — align content to theme container edges on large screens.Navigation / megamenu positioning helpers
.lg:menu-5-width-first.lg:menu-5-width.lg:left-2-width.lg:left-3-width (supports .burger variant).lg:left-4-width (supports .burger variant).lg:pl-container (desktop container-aligned left padding)Form state helpers
.valid, .invalid — enables field state icons inside the sibling label (~ label .icon-state)..input-disabled — disabled input styling.Modified at 2026-10-15 13:50:14