SwissUpLabs Logo

SASS variables

These variables are helpful when customizing a theme. We recommend to use these variables to serve compact css styles for mobile users.

Global Variables

Colors

Variable Value
$brand-color rgb(64, 120, 192)
$light-grey rgb(237, 237, 237)
$mid-grey rgb(153, 153, 153)
$dark-grey rgb(68, 68, 68)
$orange orange
$mango-tango rgb(231, 114, 0)

Typography

Variable Value
$text-font-stack ‘Open Sans’, ‘Helvetica Neue Light’, ‘Helvetica Neue’, ‘Helvetica’, ‘Arial’, sans-serif
$code-font-stack ‘Courier New’, ‘DejaVu Sans Mono’, ‘Bitstream Vera Sans Mono’, ‘Monaco’, monospace
$text-color rgb(34, 34, 34)

Responsive

Variable Value
$max-width 1180px
$breakpoints (‘small’: 320px, ‘medium’: 768px, ‘large’: 1024px)
Variable Value
$link-color $brand-color
$link-hover-color $mango-tango

Icons

Variable Value
$icon-color $dark-grey
$icon-hover-color #000
$icon-size 24px 24px
$icon-width 30px
$icon-height 30px

Buttons

Variable Value
$button-padding 5px 10px
$button-border-radius 2px
$button-background-color tint(saturate($brand-color, 35%), 20%)
$button-hover-background-color shade($button-background-color, 5%)
$button-text-color #fff
$button-text-shadow 1px 1px 0 rgba(0,0,0,0.1)

Helpers

Badge

Badge class helper (.badge) is used by Shopping Cart and Compare icons, to display products count.

Variable Value
$badge-width 15px
$badge-height 15px
$badge-font-size 11px
$badge-color null
$badge-background-color $light-grey
$badge-border-radius 50%
$badge-inversed-background-color $dark-grey
$badge-inversed-color $light-grey

Chips

Chips placeholder (%chips) is used by active layered navigation items and EasyCatalogImages subcategories styles at the homepage.

Variable Value
$chips-item-margin 0 5px - 4px 5px 0
$chips-item-border-radius 2px
$chips-item-padding 5px 10px
$chips-item-background-color tint(saturate($brand-color, 35%), 20%)
$chips-item-hover-background-color shade($chips-item-background-color, 5%)
$chips-item-color #fff
$chips-item-text-shadow 1px 1px 0 rgba(0,0,0,0.1)

Listing

Listing placeholder (%listing, %listing-item, %listing-item-title) is used by products listing and EasyCatalogImages listing.

Variable Value
$listing-columns-count-small 2
$listing-columns-count-medium 3
$listing-columns-count-large 4
$listing-item-margin -1px
$listing-item-padding 10px
$listing-item-border 1px solid $light-grey
$listing-item-primary-background null
$listing-item-primary-padding null
$listing-item-secondary-background null
$listing-item-secondary-padding 10px 0 0 0
$listing-item-title-color $dark-grey

AMP Components

Accordion

Variable Value
$accordion-heading-background-color null
$accordion-heading-border-bottom 1px solid #fff
$accordion-heading-padding 12px 10px
$accordion-heading-font-size 1.2em
$accordion-content-padding 0px 10px
Variable Value
$lightbox-background-color rgba(255,255,255,1)
$lightbox-content-background-color #fff
$lightbox-content-padding 40px 20px 20px
$lightbox-close-mask-image $icon-close
$lightbox-close-mask-size null
$lightbox-close-width 40px
$lightbox-close-height 40px
$lightbox-close-background-color $mid-grey

Switcher

Switcher styles are used by language and sort order switchers.

Variable Value
$switch-shadow 0px 1px 2px #b7b7b7
$switch-font-size 12px
$switch-item-width 160px
$switch-item-height 30px
$switch-item-padding 7px 10px
$switch-item-background-color #f4f4f4
$switch-item-border-bottom 1px solid #e7ebec
$switch-item-color $link-color

Layout

Variable Value
$header-fixed true
$header-background #fff
$header-shadow 0 1px 1px rgba(0, 0, 0, 0.15)
Logo  
$logo-width 160px
$logo-height 50px
$logo-tablet-width 220px
$logo-tablet-height 80px
$logo-vertical-margin 10px
Cart Icon
Variable Value
$cart-icon-width 40px
$cart-icon-height 40px
$cart-icon-mask-image $icon-cart
$cart-icon-mask-size null
$cart-icon-background-color null
Compare Icon
Variable Value
$compare-icon-width 40px
$compare-icon-height 40px
$compare-icon-mask-image $icon-arrow-swap
$compare-icon-mask-size null
$compare-icon-background-color null
Hamburger Icon
Variable Value
$hamburger-width 40px
$hamburger-height 40px
$hamburger-mask-image $icon-hamburger
$hamburger-mask-size 30px 24px
$hamburger-background-color null
Search Icon and Form
Variable Value
$search-button-width 40px
$search-button-height 40px
$search-button-mask-image $icon-search
$search-button-mask-size null
$search-button-background-color null
Search Form  
$search-form-background transparent
$search-form-padding 5px 0
$search-form-border-radius 3px
$search-field-border 1px solid lighten($mid-grey, 10%)
$search-field-background-color #fff
$search-field-padding 6px
Variable Value
$sidebar-width 400px
$sidebar-shadow 0 0 10px rgba(0, 0, 0, 0.2)
$sidebar-background-color #fff
$sidebar-section-heading-color $dark-grey
$sidebar-section-heading-background-color null
$sidebar-section-heading-border-bottom 1px solid #fff
$sidebar-section-active-heading-background-color transparent
$sidebar-section-active-heading-border-bottom none
Language Icon  
$language-icon-width 30px
$language-icon-height 30px
$language-icon-background-color null
$language-icon-mask-image $icon-world-outline
$language-icon-mask-size null
Welcome Links  
$welcome-link-color $link-color
$welcome-link-hover-color $link-hover-color
Sidebar Navigation  
$nav-link-color $link-color
$nav-link-color-active $link-hover-color
$nav-trigger-type ‘triangle’
$nav-trigger-type ‘plus’
$nav-trigger-type ‘shevron-to-cross’
Variable Value
$breadcrumbs-enabled false
$breadcrumbs-padding 10px 0 0
$breadcrumbs-font-size 0.9em
$breadcrumbs-item-margin 0 2px 6px 0
$breadcrumbs-divider-color $mid-grey
Variable Value
$footer-background #050505
$footer-margin-top 40px
$footer-border-top null
$footer-text-color #aaa

Product

Variable Value
$product-name-color $dark-grey
$product-price-color $dark-grey
$product-special-price-color $mango-tango
$product-listing-name-color null
$product-listing-price-color $dark-grey
Next Up
Edit this Page