...
| Code Block |
|---|
@include site-hero($style: 'medium', $static: 'true');
|
Font Settings
Configure various font settings
...
| Code Block |
|---|
@include font-settings(
$inputfont: #{map-deep-get($fonts, 'primary')},
$datepickerfont: #{map-deep-get($fonts, 'primary')},
$pdpheaderfont: #{map-deep-get($fonts, 'primary')},
$labelfont: #{map-deep-get($fonts, 'secondary')},
$minicartfont: #{map-deep-get($fonts, 'secondary')},
$optiontitlecolor: #{map-deep-get($theme-colors, 'secondary')},
$h2color: #{map-deep-get($theme-colors, 'secondary')},
$h4color: #{map-deep-get($theme-colors, 'secondary')}
);
|
Spinner
Configure the loading spinner for the site [GLOBAL]
...
| Code Block |
|---|
@include spinner($logopath: $SPINNER_LOGO_IMAGE);
|
Image Slider
Hide/show the image slider on the PDP
...
| Code Block |
|---|
@include image-slider($display: 'false');
|
Buttons Configuration
Configures the Primary and Secondary buttons
...
| Code Block |
|---|
@include buttons-config(
$primary-btn-bg: #{map-deep-get($theme-colors, 'primary')},
$primary-btn-border: #{map-deep-get($theme-colors, 'primary')},
$primary-btn-text: #ffffff,
$secondarybtn: #{map-deep-get($theme-colors, 'secondary')}
);
|
Card Design
Configures the card design on the product pages
...
| Code Block |
|---|
@include cards-design(
$style: 'option-c',
$buttontextcolor: #{map-deep-get($theme-colors, 'buttons', 'text-color')},
$buttontext: 'Shop Now',
$headercolor: #{map-deep-get($theme-colors, 'text')},
$buttoncolor: #{map-deep-get($theme-colors, 'secondary')},
$buttoncolorhover: #{map-deep-get($theme-colors, 'secondary-hover')}
);
|
Body Style
Configures the body style for all pages.
...
| Code Block |
|---|
@include body-style($style: 'option-b');
|
Simple Header
Configures the simple header for the site if enabled.
...
| Code Block |
|---|
@include simple-header(
$floating: 'true',
$headerheight: 90px,
$headerbackground: #{map-deep-get($theme-colors, 'header', 'background')},
$bodyoffset: 0,
$logoheight: 57px,
$logowidth: 200px,
$logowidthmobile: 180px,
$logoheightmobile: 50px
);
|
Simple Footer
Configures the simple footer for the site if enabled.
...
| Code Block |
|---|
@include simple-footer(
$backgroundcolor: #{map-deep-get($theme-colors, 'footer', 'background')},
$textcolor: #{map-deep-get($theme-colors, 'footer', 'text-color')}
);
|
Checkout Mixin
Configures the checkout screen.
...
| Code Block |
|---|
@include checkout-mixin(
$headertext: #{map-deep-get($theme-colors, 'checkout', 'header-text')},
$headercolor: #{map-deep-get($theme-colors, 'checkout', 'header-background')},
$footertext: #{map-deep-get($theme-colors, 'checkout', 'footer-text')},
$footercolor: #{map-deep-get($theme-colors, 'checkout', 'footer-background')},
$logowidth: 230px
);
|
Tabs Design
Configures the style of the tabs.
...
| Code Block |
|---|
@include tabs-design(
$style: 'tabs-option-3',
$barbackground: #ebebeb,
$textcolor: #4a4a4a
);
|