Mixins
Standard Links
Configure the anchor link colors [GLOBAL]
$color : hex | Set anchor color [Advanced configuration only]
@include standard-links($color: #{map-deep-get($colors, 'primary')});
Cart Basket
Configure the text color for the basket icon
$textcolor : hex | Set the color for the basket count [default: primary-color][Advanced configuration only]
@include cart-basket($textcolor: #{map-deep-get($theme-colors, 'primary')});
Site Hero
Configure the main site hero
$style : 'tall', 'medium' 'short' | Set the height for the hero [default: 'short']
$static : 'true', 'false' | Enable or disable the static hero [default: 'false']
@include site-hero($style: 'medium', $static: 'true');
Font Settings
Configure various font settings
$inputfont : font-family | Set the font family for the input fields [Advanced configuration only]
$datepickerfont : font-family | Set the the font family for the datepicker [Advanced configuration only]
$pdpheaderfont : font-family | Set the font family to use for PDP headers [Advanced configuration only]
$labelfont : font-family | Set the font family to use for animated.label elements [Advanced configuration only]
$minicartfont: font-family | Set the font family to use for in the minicart [Advanced configuration only]
$optiontitlecolor : font-family | Set the font family to use for option titles on the PDP [default: primary-font][Advanced configuration only]
$h2color : font-family | Set the font color to use for h2's on the site [default: primary-color][Advanced configuration only]
$h4color : font-family | Set the font color to use for h4's on the site [default: primary-color][Advanced configuration only]
@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]
$logopath : path to image | Set the path to the logo image that is used inside the loader [Advanced configuration only]
@include spinner($logopath: $SPINNER_LOGO_IMAGE);
Image Slider
Hide/show the image slider on the Non Retail PDP pages. Slider on Retail Pages is always visible.
$display : ‘true', 'false' | Hide or show the slider on the PDP pages [default: 'false’]
@include image-slider($display: 'false');
Buttons Configuration
Configures the Primary and Secondary buttons
$primary-btn-bg : hex | Primary button background color [default: primary-color]
$primary-btn-border : hex | Primary button border color [default: primary-color][Advanced configuration only]
$primary-btn-text : hex | Primary button text color [default: #ffffff][Advanced configuration only]
$secondarybtn : hex | Secondary button text color and outline as seen in checkout (SHOW GROUP) [Advanced configuration only]
@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
$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][Advanced configuration only]
$buttontext : string | Sets the button or action text [case sensitive][Advanced configuration only]
$headercolor : hex | Sets the color of the card header [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]
@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.
$style : 'option-a', 'option-b'| Swaps between a dropshadow or flat design for the page body [default: 'option-a']
@include body-style($style: 'option-b');
Simple Header
Configures the simple header for the site if enabled and configures the logo sizing for the checkout pages.
$floating : 'true', 'false'| Enables or disables the floating header [default: 'false']
$headerheight : px | Sets the height of the header [default: 90px][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][Advanced configuration only]
$logoheight : px | Sets the height for the logo [Advanced configuration only]
$logowidth : px | Sets the width for the logo [Advanced configuration only]
$logowidthmobile : px | Sets the width of the logo on mobile [Advanced configuration only]
$logoheightmobile : px | Sets the height of the logo on mobile [Advanced configuration only]
$centerlogo: ‘true’. ‘false’ | Sets logo to center and hides the back link when set to true
@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][Advanced configuration only]
@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.
$headertext : hex | Sets the header text color in checkout [Advanced configuration only]
$headertextactive : hex | Sets the header active text color in checkout [Advanced configuration only]
$headercolor : hex | Sets the background color for checkout header [Advanced configuration only]
$footertext : hex | Sets the background color for checkout footer [Advanced configuration only]
$footercolor : hex | Sets the background color for checkout footer [Advanced configuration only]
$logowidth : px | Sets the width of the logo in checkout. The height will auto scale. [Advanced configuration only]
@include checkout-mixin(
$headertext: #{map-deep-get($theme-colors, 'checkout', 'header-text')},
$headertextactive: #{map-deep-get($theme-colors, 'checkout', 'header-text-active')},
$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.
$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 [Advanced configuration only]
$textcolor : hex | Sets the text color inactive tab text [Advanced configuration only]
$textcoloractive : hex | Sets the text color for active tab text [Advanced configuration only]
$activebackground: hex | Sets the color for the active tab background. Only applies to ‘tabs-option-3’ and ‘tabs-option-4’
@include tabs-design(
$activebackground: #ffffff,
$style: 'tabs-option-1',
$barbackground: #f6f6f6,
$textcoloractive: #141e55,
$textcolor: #{map-deep-get($theme-colors, 'text')}
);