Global Styles
While each component may have its own styles, some styles are globally defined
ScandiPWA defines certain global styles. These are defined in SCSS in the
style directory, which contains 3 subdirectories, as well as a file that imports all the styles from them.The
abstract subdirectory includes SCSS definitions that do not directly affect any element. Instead, they define utilities such as media selectors (_media.scss), SCSS variable declarations (_variables.scss) and some generic styles that could be used to style an element (_loader.scss, _button.scss).This directory defines the base styles for various HTML elements, such as tables, links, buttons and lists. In
_breakpoints.scss, it defines classes that can be added to elements to easily hide them on some devices (mobile/tablet/desktop)This directory contains styles for defining the look of various content inserted through a content management system (typically Magento CMS). Currently, it styles various promotion blocks, as well as sliders.
Selector | Visible on Mobile | Visible on Tablet | Visible on Desktop |
desktop | | | ✔️ |
before-desktop | ✔️ | ✔️ | |
tablet | | ✔️ | |
tablet-landscape | | landscape only | |
after-mobile | | | ✔️ |
mobile | ✔️ | | |
To use a breakpoint, use
include:@include mobile {
// your styles
}
Last modified 2yr ago