...
$color : hex | Set anchor color [Dev Advanced configuration only]
| Code Block |
|---|
@include standard-links($color: #{map-deep-get($colors, 'primary')}); |
...
$textcolor : hex | Set the color for the basket count [default: primary-color][Dev Advanced configuration only]
| Code Block |
|---|
@include cart-basket($textcolor: #{map-deep-get($theme-colors, 'primary')}); |
...
$inputfont : font-family | Set the font family for the input fields [Dev Advanced configuration only]
$datepickerfont : font-family | Set the the font family for the datepicker [Dev Advanced configuration only]
$pdpheaderfont : font-family | Set the font family to use for PDP headers [Dev Advanced configuration only]
$labelfont : font-family | Set the font family to use for animated.label elements [Dev Advanced configuration only]
$minicartfont: font-family | Set the font family to use for in the minicart [Dev Advanced configuration only]
$optiontitlecolor : font-family | Set the font family to use for option titles on the PDP [default: primary-font][Dev Advanced configuration only]
$h2color : font-family | Set the font family to use for h2's on the site [default: primary-font][Dev Advanced configuration only]
$h4color : font-family | Set the font family to use for h4's on the site [default: primary-font][Dev Advanced configuration only]
| 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')}
); |
...
$logopath : path to image | Set the path to the logo image that is used inside the loader [Dev Advanced configuration only]
| Code Block |
|---|
@include spinner($logopath: $SPINNER_LOGO_IMAGE); |
...
$primary-btn-bg : hex | Primary button background color [default: primary-color]
$primary-btn-border : hex | Primary button border color [default: primary-color][Dev Advanced configuration only]
$primary-btn-text : hex | Primary button text color [default: #ffffff][Dev Advanced configuration only]
$secondarybtn : hex | Secondary button text color and outline as seen in checkout (SHOW GROUP) [Dev Advanced configuration only]
| 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')}
); |
...
$style : 'option-a', 'option-b', 'option-c', 'option-d'| Sets the card option [default: 'option-a']
$buttontextcolor : hex | Sets the card button text or action text color [default: secondary-color][Dev Advanced configuration only]
$buttontext : string | Sets the button or action text [case sensitive][Dev Advanced configuration only]
$headercolor : hex | Sets the color of the card header [Dev Advanced configuration only]
$buttoncolor : hex | Sets the color of the card button background [default: secondary-color]
$buttoncolorhover : hex | Sets the color of the card button background on hover [default: secondary-color-hover]
...
$floating : 'true', 'false'| Enables or disables the floating header [default: 'false']
$headerheight : px | Sets the height of the header [default: 90px][Dev Advanced configuration only]
$headerbackground : hex | Sets the header background color
$bodyoffset : px | Adds margin to the body when using the floating header to prevent obscuring the hero [default: 0][Dev Advanced configuration only]
$logoheight : px | Sets the height for the logo [Dev Advanced configuration only]
$logowidth : px | Sets the width for the logo [Dev Advanced configuration only]
$logowidthmobile : px | Sets the width of the logo on mobile [Dev Advanced configuration only]
$logoheightmobile : px | Sets the height of the logo on mobile [Dev Advanced configuration only]
$centerlogo: ‘true’. ‘false’ | Sets logo to center and hides the back link when set to true
| 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
$centerlogo:'false'
); |
...
Simple Footer
Configures the simple footer for the site if enabled.
$backgroundcolor : hex | Sets the background color for the simple footer [default: 'footer-background']
$textcolor : hex | Sets the text color for the simple footer [default: #ffffff][Dev Advanced configuration only]
| Code Block |
|---|
@include simple-footer(
$backgroundcolor: #{map-deep-get($theme-colors, 'footer', 'background')},
$textcolor: #{map-deep-get($theme-colors, 'footer', 'text-color')}
); |
...
$headertext : hex | Sets the header text color in checkout [Dev Advanced configuration only]
$headercolor : hex | Sets the background color for checkout header [Dev Advanced configuration only]
$footertext : hex | Sets the background color for checkout footer [Dev Advanced configuration only]
$footercolor : hex | Sets the background color for checkout footer [Dev Advanced configuration only]
$logowidth : px | Sets the width of the logo in checkout. The height will auto scale. [Dev Advanced configuration only]
| 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
); |
...
$style : 'tabs-option-1', 'tabs-option-2', 'tabs-option-3', 'tabs-option-4' | Sets the tab style option
$barbackground : hex | Sets the background color for the tabs bar [Dev Advanced configuration only]
$textcolor : hex | Sets the text color for the tabs [Dev Advanced configuration only]
| Code Block |
|---|
@include tabs-design(
$style: 'tabs-option-3',
$barbackground: #ebebeb,
$textcolor: #4a4a4a
); |
...