Skip to content

Instantly share code, notes, and snippets.

@jelenajjo

jelenajjo/gist:739376cf042046c36de4

Created January 5, 2016 22:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jelenajjo/739376cf042046c36de4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jelenajjo/739376cf042046c36de4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
/*============================================================================
Venture by Shopify
Some things to know about this file:
- Sass is compiled on Shopify's server so you don't need to convert it to CSS yourself
- The output CSS is compressed and comments are removed
- You cannot use native CSS/Sass @imports in this file without a build script
- The font icons are prepared using https://icomoon.io/app
==============================================================================*/
/*================ FUNCTIONS ================*/
/*============================================================================
Convert pixels to ems
eg. for a relational value of 12px write em(12) when the parent is 16px
if the parent is another value say 24px write em(12, 24)
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_px-to-em.scss
==============================================================================*/
@function em($pxval, $base: $font-size-base) {
@if not unitless($pxval) {
$pxval: strip-units($pxval);
}
@if not unitless($base) {
$base: strip-units($base);
}
@return ($pxval / $base) * 1em;
}
/*============================================================================
Strips the unit from a number.
@param {Number (With Unit)} $value
@example scss - Usage
$dimension: strip-units(10em);
@example css - CSS Output
$dimension: 10;
@return {Number (Unitless)}
based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/functions/_strip-units.scss
==============================================================================*/
@function strip-units($value) {
@return ($value / ($value * 0 + 1));
}
@function adaptive-color($color, $percentage) {
@if (lightness( $color ) > 40) {
@return darken($color, $percentage);
}
@else {
@return lighten($color, $percentage);
}
}
@function color-control($color) {
@if (lightness( $color ) > 40) {
@return #1c1d1d;
}
@else {
@return #fff;
}
}
/*================ VARIABLES ================*/
/*============================================================================
Grid Breakpoints and Class Names
- Do not change the variable names
==============================================================================*/
$grid-medium: 750px;
$grid-large: 990px;
$grid-widescreen: 1400px;
$grid-gutter: 20px;
$small: 'small';
$medium: 'medium';
$medium-down: 'medium-down';
$medium-up: 'medium-up';
$large: 'large';
$large-down: 'large-down';
$large-up: 'large-up';
$widescreen: 'widescreen';
/*============================================================================
Generate breakpoint-specific column widths and push classes
- Default column widths: $grid-breakpoint-has-widths: ($small, $medium-up);
- Default is no push classes
==============================================================================*/
$grid-breakpoint-has-widths: ($small, $medium-up, $large-up);
$grid-breakpoint-has-push: ($medium-up);
/*================ Color Variables ================*/
// Button colors
$color-btn-primary: {{ settings.color_button_bg }};
$color-btn-primary-hover: adaptive-color($color-btn-primary, 10%);
$color-btn-primary-active: adaptive-color($color-btn-primary-hover, 10%);
$color-btn-primary-text: {{ settings.color_button_text }};
$color-btn-secondary: {{ settings.color_footer_bg }};
$color-btn-secondary-hover: adaptive-color($color-btn-secondary, 5%);
$color-btn-secondary-active: adaptive-color($color-btn-secondary-hover, 10%);
$color-btn-secondary-text: color-control($color-btn-secondary);
// Accent color (nav and links)
$color-accent: {{ settings.color_button_bg }};
$color-accent-hover: darken({{ settings.color_button_bg }}, 15%);
$color-accent-text: {{ settings.color_button_text }};
// General colors
$color-body-text: {{ settings.color_body_text }};
$color-body: {{ settings.color_body_bg }};
$color-content: {{ settings.color_content_bg }};
$color-border: $color-body;
$color-border-body-darken: darken($color-body, 10%);
$color-heading: {{ settings.color_body_headings }};
// Header and footer
$color-header: {{ settings.color_header_bg }};
$color-header-border: adaptive-color($color-header, 5%);
$color-header-links: {{ settings.color_header_links }};
$color-footer: {{ settings.color_footer_bg }};
$color-footer-text: {{ settings.color_footer_text }};
$color-footer-border: adaptive-color($color-footer, 5%);
$color-footer-newsletter: {{ settings.color_newsletter_input }};
$color-footer-newsletter-text: color-control($color-footer-newsletter);
// Hero
$color-hero-title-bg: {{ settings.color_hero_bg }};
$color-hero-title-text: {{ settings.color_hero_text }};
$color-hero-subtitle-bg: $color-header;
$color-hero-subtitle-text: $color-header-links;
$color-hero-arrows: #000;
$color-hero-dots: #000;
$color-hero-dots-active: #fff;
// Password page
$color-password-bg: $color-header;
$color-password-text: color-control($color-password-bg);
$color-password-links: $color-header-links;
// Gift card
$color-giftcard-text: #fff;
$color-giftcard-code-bg: $color-content;
$color-giftcard-code-text: $color-body-text;
$giftcard-code-border-radius: 4px;
$giftcard-image-border-radius: 12px;
// Forms
$color-form: #f4f4f4;
$color-form-text: #333;
$input-padding-top-bottom: 13px;
$input-padding-left-right: 15px;
$input-group-height: 48px;
$width-qty-btn: 30px;
// Featured collections
$color-featured-collection-text: {{ settings.color_featured_collection_text }};
$color-featured-collection-bg: {{ settings.color_featured_collection_bg }};
$color-featured-collection-link: {{ settings.color_featured_collection_links }};
// Collection card
$color-collection-card-overlay: #000;
$color-collection-card-text: #fff;
// Helper colors for form error states
$color-disabled: darken($color-form, 12%);
$color-disabled-border: adaptive-color($color-form, 50%);
$color-error: #ec523e;
$color-error-bg: #ec523e;
$color-error-input-text: #fff;
$color-success: #fff;
$color-success-bg: #59ac6c;
/*================ Sizing Variables ================*/
$width-site: 1180px;
$gutter-site: 20px;
$gutter-heading: 20px;
$logo-max-width: {{ settings.logo_max_width | default: '450' | remove: 'px' | append: 'px'}};
/*================ Product Grid ================*/
{% if settings.product_vendor_enable %}
$product-card-height: 255px;
{% else %}
$product-card-height: 235px;
{% endif %}
{% if settings.product_images_padding %}
$product-image-padding: 25px;
$product-image-margin-bottom: 60px;
{% else %}
$product-image-padding: 0;
$product-image-margin-bottom: 80px;
{% endif %}
/*================ Product slider ================*/
{% if settings.product_images_padding %}
$product-slider-padding: $gutter-site / 2;
{% else %}
$product-slider-padding: 0;
{% endif %}
$product-slider-image-height: 130px;
/*================ Collection Grid ================*/
$collection-card-height: $product-card-height + $product-image-margin-bottom;
/*================ Typography Variables ================*/
{% if settings.type_base_family contains 'Google' %}
{% assign type_base_parts = settings.type_base_family | split: '_' %}
{% assign type_base_name = type_base_parts[1] %}
{% capture base_family %}"{{ type_base_name | split: ':' | first | replace: '+', ' ' }}"{% if type_base_parts.last == 'serif' %}, serif {% else %}, "HelveticaNeue", "Helvetica Neue", sans-serif{% endif %}{% endcapture %}
{% else %}
{% assign base_family = settings.type_base_family %}
{% endif %}
{% if settings.type_accent_family contains 'Google' %}
{% assign type_accent_parts = settings.type_accent_family | split: '_' %}
{% assign type_accent_name = type_accent_parts[1] %}
{% capture accent_family %}"{{ type_accent_name | split: ':' | first | replace: '+', ' ' }}"{% if type_accent_parts.last == 'serif' %}, serif {% else %}, "HelveticaNeue", "Helvetica Neue", sans-serif{% endif %}{% endcapture %}
{% else %}
{% assign accent_family = settings.type_accent_family %}
{% endif %}
$font-stack-accent: {{ accent_family }};
$font-stack-body: {{ base_family }};
$font-size-base: {{ settings.type_base_size }}; // Henseforth known as 1em
$font-size-nav: em({{ settings.type_nav_size }});
$font-size-button: em({{ settings.type_nav_size }} - 1);
$font-weight-normal: 400;
$font-weight-bold: 700;
/*================ Z-Index ================*/
$z-index-dropdown: 5;
$z-index-product-card: 1;
$z-index-collection-card: 1;
$z-index-header-search-input: 1;
$z-index-header-search-submit: 2;
$z-index-content: 2;
$z-index-drawer: 1;
$z-index-drawer-overlay: 10; // should be high enough to cover all content
$z-index-stickynav: 5;
$z-index-nav-links: 7; // must be at least 2 higher than dropdown
$z-index-notification: 4;
$z-index-modal: 15;
$z-index-skip-to-content: 10000;
/*================ Drawers ================*/
$drawer-width: 300px;
$drawer-transition: all 0.35s cubic-bezier(0.33, 0.59, 0.14, 1);
$drawer-content-transition-open: all 0.35s cubic-bezier(0.33, 0.59, 0.14, 1);
$drawer-content-transition-close: all 0.35s cubic-bezier(0.33, 0.59, 0.14, 1);
$color-drawer: $color-content;
$color-drawer-sublist: $color-body;
$color-drawer-text: darken($color-body-text, 25%);
$drawer-link-size: em(26);
/*================ Sticky nav ================*/
$sticky-transition-open: all 0.35s cubic-bezier(0.33, 0.59, 0.14, 1);
/*================ Links and Buttons ================*/
$link-transition: color 0.1s ease-in, background-color 0.1s ease-in;
$button-transition: color 0.1s ease-in, background-color 0.1s ease-in;
/*================ Product and Collection Cards ================*/
$product-card-transition: all 0.15s ease-in;
$collection-bard-transition: opacity 0.15s ease-in;
/*================ Search in header ================*/
$header-search-transition: opacity 0.15s ease-in, width 0.15s ease-in;
/*================ Meganav ================*/
$color-meganav-active-link: $color-drawer-text;
$meganav-site-header-transition-open: all 0.8s cubic-bezier(0.075, 0.820, 0.165, 1), opacity 0.4s cubic-bezier(0.075, 0.820, 0.165, 1);
$meganav-site-header-transition-close: none;
$meganav-drawer-transition-open: all 0.45s cubic-bezier(0.33, 0.59, 0.14, 1);
$meganav-drawer-transition-close: all 0.2s cubic-bezier(0.33, 0.59, 0.14, 1);
/*================ Hero ================*/
$hero-text-transition: all 0.6s cubic-bezier(0.44, 0.13, 0.48, 0.87);
$hero-link-transition: background-color 0.15s ease-in;
$hero-image-transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
/*================ CANVAS ================*/
/*============================================================================
Canvas Table of Contents
#Mixins
#Grid
#Normalize
#Helper Classes
#Basic Styles
#Icons
#Lists
#Rich Text Editor
#Links and Buttons
#Tables
#Reponsive Tables
#Images and Iframes
#Forms
#Site Nav and Dropdowns
#Section Headers
#Giftcard Template
==============================================================================*/
/*================ #Mixins ================*/
@mixin clearfix() {
&:after {
content: '';
display: table;
clear: both;
}
*zoom: 1;
}
/*============================================================================
Prefix mixin for generating vendor prefixes.
Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
Usage:
// Input:
.element {
@include prefix(transform, scale(1), ms webkit spec);
}
// Output:
.element {
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
==============================================================================*/
@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit {
-webkit-#{$property}: $value;
} @else if $prefix == moz {
-moz-#{$property}: $value;
} @else if $prefix == ms {
-ms-#{$property}: $value;
} @else if $prefix == o {
-o-#{$property}: $value;
} @else if $prefix == spec {
#{$property}: $value;
} @else {
@warn "Unrecognized prefix: #{$prefix}";
}
}
}
@mixin user-select($value: none) {
@include prefix('user-select', #{$value}, moz ms webkit spec);
}
/*================ Media Query Mixin ================*/
@mixin media-query($media-query) {
$breakpoint-found: false;
@each $breakpoint in $grid-breakpoints {
$name: nth($breakpoint, 1);
$declaration: nth($breakpoint, 2);
@if $media-query == $name and $declaration {
$breakpoint-found: true;
@media only screen and #{$declaration} {
@content;
}
}
}
@if $breakpoint-found == false {
@warn "Breakpoint '#{$media-query}' does not exist";
}
}
/*================ Responsive Show/Hide Helper ================*/
@mixin responsive-display-helper($grid-breakpoint-type:"") {
.#{$grid-breakpoint-type}show {
display: block !important;
}
.#{$grid-breakpoint-type}hide {
display: none !important;
}
}
/*================ Responsive Text Alignment Helper ================*/
@mixin responsive-text-align-helper($grid-breakpoint-type:"") {
.#{$grid-breakpoint-type}text-left {
text-align: left !important;
}
.#{$grid-breakpoint-type}text-right {
text-align: right !important;
}
.#{$grid-breakpoint-type}text-center {
text-align: center !important;
}
}
/*============================================================================
#Grid
==============================================================================*/
// The `$grid-breakpoints` list is used to build our media queries.
// You can use these in the media-query mixin.
$grid-breakpoints: (
$small '(max-width: #{$grid-medium - 1})',
$medium '(min-width: #{$grid-medium}) and (max-width: #{$grid-large - 1})',
$medium-down '(max-width: #{$grid-large - 1})',
$medium-up '(min-width: #{$grid-medium})',
$large '(min-width: #{$grid-large}) and (max-width: #{$grid-widescreen - 1})',
$large-down '(max-width: #{$grid-widescreen - 1})',
$large-up '(min-width: #{$grid-large})',
$widescreen '(min-width: #{$grid-widescreen})'
);
/*============================================================================
Grid Setup
1. Allow the grid system to be used on lists.
2. Remove any margins and paddings that might affect the grid system.
3. Apply a negative `margin-left` to negate the columns' gutters.
==============================================================================*/
.grid {
@include clearfix();
}
.grid {
list-style: none;
margin: 0;
padding: 0;
margin-left: -$grid-gutter;
}
.grid__item {
float: left;
padding-left: $grid-gutter;
width: 100%;
}
.grid__item[class*="--push"] {
position:relative;
}
/*============================================================================
Reversed grids allow you to structure your source in the opposite
order to how your rendered layout will appear.
==============================================================================*/
.grid--rev {
direction: rtl;
text-align: left;
> .grid__item {
direction: ltr;
text-align: left;
float: right;
}
}
/*============================================================================
Grid Columns
- Create width classes, prepended by the breakpoint name.
==============================================================================*/
@mixin grid-column-generator($grid-breakpoint-type:"") {
/** Whole */
.#{$grid-breakpoint-type}one-whole { width: 100%; }
/* Halves */
.#{$grid-breakpoint-type}one-half { width: percentage(1/2); }
/* Thirds */
.#{$grid-breakpoint-type}one-third { width: percentage(1/3); }
.#{$grid-breakpoint-type}two-thirds { width: percentage(2/3); }
/* Quarters */
.#{$grid-breakpoint-type}one-quarter { width: percentage(1/4); }
.#{$grid-breakpoint-type}two-quarters { width: percentage(2/4); }
.#{$grid-breakpoint-type}three-quarters { width: percentage(3/4); }
/* Fifths */
.#{$grid-breakpoint-type}one-fifth { width: percentage(1/5); }
.#{$grid-breakpoint-type}two-fifths { width: percentage(2/5); }
.#{$grid-breakpoint-type}three-fifths { width: percentage(3/5); }
.#{$grid-breakpoint-type}four-fifths { width: percentage(4/5); }
/* Sixths */
.#{$grid-breakpoint-type}one-sixth { width: percentage(1/6); }
.#{$grid-breakpoint-type}two-sixths { width: percentage(2/6); }
.#{$grid-breakpoint-type}three-sixths { width: percentage(3/6); }
.#{$grid-breakpoint-type}four-sixths { width: percentage(4/6); }
.#{$grid-breakpoint-type}five-sixths { width: percentage(5/6); }
/* Eighths */
.#{$grid-breakpoint-type}one-eighth { width: percentage(1/8); }
.#{$grid-breakpoint-type}two-eighths { width: percentage(2/8); }
.#{$grid-breakpoint-type}three-eighths { width: percentage(3/8); }
.#{$grid-breakpoint-type}four-eighths { width: percentage(4/8); }
.#{$grid-breakpoint-type}five-eighths { width: percentage(5/8); }
.#{$grid-breakpoint-type}six-eighths { width: percentage(6/8); }
.#{$grid-breakpoint-type}seven-eighths { width: percentage(7/8); }
/* Tenths */
.#{$grid-breakpoint-type}one-tenth { width: percentage(1/10); }
.#{$grid-breakpoint-type}two-tenths { width: percentage(2/10); }
.#{$grid-breakpoint-type}three-tenths { width: percentage(3/10); }
.#{$grid-breakpoint-type}four-tenths { width: percentage(4/10); }
.#{$grid-breakpoint-type}five-tenths { width: percentage(5/10); }
.#{$grid-breakpoint-type}six-tenths { width: percentage(6/10); }
.#{$grid-breakpoint-type}seven-tenths { width: percentage(7/10); }
.#{$grid-breakpoint-type}eight-tenths { width: percentage(8/10); }
.#{$grid-breakpoint-type}nine-tenths { width: percentage(9/10); }
/* Twelfths */
.#{$grid-breakpoint-type}one-twelfth { width: percentage(1/12); }
.#{$grid-breakpoint-type}two-twelfths { width: percentage(2/12); }
.#{$grid-breakpoint-type}three-twelfths { width: percentage(3/12); }
.#{$grid-breakpoint-type}four-twelfths { width: percentage(4/12); }
.#{$grid-breakpoint-type}five-twelfths { width: percentage(5/12); }
.#{$grid-breakpoint-type}six-twelfths { width: percentage(6/12); }
.#{$grid-breakpoint-type}seven-twelfths { width: percentage(7/12); }
.#{$grid-breakpoint-type}eight-twelfths { width: percentage(8/12); }
.#{$grid-breakpoint-type}nine-twelfths { width: percentage(9/12); }
.#{$grid-breakpoint-type}ten-twelfths { width: percentage(10/12); }
.#{$grid-breakpoint-type}eleven-twelfths { width: percentage(11/12); }
}
/*================ Grid push classes ================*/
@mixin grid-push-generator($grid-breakpoint-type:"") {
/* Halves */
.#{$grid-breakpoint-type}push-one-half { left: percentage(1/2); }
/* Thirds */
.#{$grid-breakpoint-type}push-one-third { left: percentage(1/3); }
.#{$grid-breakpoint-type}push-two-thirds { left: percentage(2/3); }
/* Quarters */
.#{$grid-breakpoint-type}push-one-quarter { left: percentage(1/4); }
.#{$grid-breakpoint-type}push-two-quarters { left: percentage(2/4); }
.#{$grid-breakpoint-type}push-three-quarters { left: percentage(3/4); }
/* Fifths */
.#{$grid-breakpoint-type}push-one-fifth { left: percentage(1/5); }
.#{$grid-breakpoint-type}push-two-fifths { left: percentage(2/5); }
.#{$grid-breakpoint-type}push-three-fifths { left: percentage(3/5); }
.#{$grid-breakpoint-type}push-four-fifths { left: percentage(4/5); }
/* Sixths */
.#{$grid-breakpoint-type}push-one-sixth { left: percentage(1/6); }
.#{$grid-breakpoint-type}push-two-sixths { left: percentage(2/6); }
.#{$grid-breakpoint-type}push-three-sixths { left: percentage(3/6); }
.#{$grid-breakpoint-type}push-four-sixths { left: percentage(4/6); }
.#{$grid-breakpoint-type}push-five-sixths { left: percentage(5/6); }
/* Eighths */
.#{$grid-breakpoint-type}push-one-eighth { left: percentage(1/8); }
.#{$grid-breakpoint-type}push-two-eighths { left: percentage(2/8); }
.#{$grid-breakpoint-type}push-three-eighths { left: percentage(3/8); }
.#{$grid-breakpoint-type}push-four-eighths { left: percentage(4/8); }
.#{$grid-breakpoint-type}push-five-eighths { left: percentage(5/8); }
.#{$grid-breakpoint-type}push-six-eighths { left: percentage(6/8); }
.#{$grid-breakpoint-type}push-seven-eighths { left: percentage(7/8); }
/* Tenths */
.#{$grid-breakpoint-type}push-one-tenth { left: percentage(1/10); }
.#{$grid-breakpoint-type}push-two-tenths { left: percentage(2/10); }
.#{$grid-breakpoint-type}push-three-tenths { left: percentage(3/10); }
.#{$grid-breakpoint-type}push-four-tenths { left: percentage(4/10); }
.#{$grid-breakpoint-type}push-five-tenths { left: percentage(5/10); }
.#{$grid-breakpoint-type}push-six-tenths { left: percentage(6/10); }
.#{$grid-breakpoint-type}push-seven-tenths { left: percentage(7/10); }
.#{$grid-breakpoint-type}push-eight-tenths { left: percentage(8/10); }
.#{$grid-breakpoint-type}push-nine-tenths { left: percentage(9/10); }
/* Twelfths */
.#{$grid-breakpoint-type}push-one-twelfth { left: percentage(1/12); }
.#{$grid-breakpoint-type}push-two-twelfths { left: percentage(2/12); }
.#{$grid-breakpoint-type}push-three-twelfths { left: percentage(3/12); }
.#{$grid-breakpoint-type}push-four-twelfths { left: percentage(4/12); }
.#{$grid-breakpoint-type}push-five-twelfths { left: percentage(5/12); }
.#{$grid-breakpoint-type}push-six-twelfths { left: percentage(6/12); }
.#{$grid-breakpoint-type}push-seven-twelfths { left: percentage(7/12); }
.#{$grid-breakpoint-type}push-eight-twelfths { left: percentage(8/12); }
.#{$grid-breakpoint-type}push-nine-twelfths { left: percentage(9/12); }
.#{$grid-breakpoint-type}push-ten-twelfths { left: percentage(10/12); }
.#{$grid-breakpoint-type}push-eleven-twelfths { left: percentage(11/12); }
}
/*================ Clearfix helper on uniform grids ================*/
@mixin grid-uniform-clearfix($grid-breakpoint-type:"") {
.grid--uniform {
.#{$grid-breakpoint-type}one-half:nth-child(2n+1),
.#{$grid-breakpoint-type}one-third:nth-child(3n+1),
.#{$grid-breakpoint-type}one-quarter:nth-child(4n+1),
.#{$grid-breakpoint-type}one-fifth:nth-child(5n+1),
.#{$grid-breakpoint-type}one-sixth:nth-child(6n+1),
.#{$grid-breakpoint-type}two-sixths:nth-child(3n+1),
.#{$grid-breakpoint-type}three-sixths:nth-child(2n+1),
.#{$grid-breakpoint-type}two-eighths:nth-child(4n+1),
.#{$grid-breakpoint-type}four-eighths:nth-child(2n+1),
.#{$grid-breakpoint-type}five-tenths:nth-child(2n+1),
.#{$grid-breakpoint-type}one-twelfth:nth-child(12n+1),
.#{$grid-breakpoint-type}two-twelfths:nth-child(6n+1),
.#{$grid-breakpoint-type}three-twelfths:nth-child(4n+1),
.#{$grid-breakpoint-type}four-twelfths:nth-child(3n+1),
.#{$grid-breakpoint-type}six-twelfths:nth-child(2n+1) { clear: both; }
}
}
/*================ Build Base Grid Classes ================*/
@include grid-column-generator();
@include responsive-display-helper();
@include responsive-text-align-helper();
/*================ Build Responsive Grid Classes ================*/
@each $breakpoint in $grid-breakpoint-has-widths {
@include media-query($breakpoint) {
@include grid-column-generator('#{$breakpoint}--');
@include grid-uniform-clearfix('#{$breakpoint}--');
@include responsive-display-helper('#{$breakpoint}--');
@include responsive-text-align-helper('#{$breakpoint}--');
}
}
/*================ Grid Push Classes ================*/
@each $breakpoint in $grid-breakpoint-has-push {
@include media-query($breakpoint) {
@include grid-push-generator('#{$breakpoint}--');
}
}
/*============================================================================
#Normalize
Based on normalize.css v3.0.2 | MIT License | git.io/normalize
==============================================================================*/
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
body,
input,
textarea,
button,
select {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
a {
background-color: transparent;
}
b,
strong {
font-weight: $font-weight-bold;
}
em {
font-style: italic;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
max-width: 100%;
border: 0;
}
button,
input,
optgroup,
select,
textarea {
color: inherit;
font: inherit;
margin: 0;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="search"] {
-webkit-appearance: none;
-moz-appearance: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
textarea {
overflow: auto;
-webkit-appearance: none;
-moz-appearance: none;
}
// hide outline on focus for elements which are given focus by JS
[tabindex='-1']:focus {
outline: none;
}
/*================ #Helper Classes ================*/
.clearfix {
@include clearfix();
}
.visually-hidden {
position: absolute !important;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0; border: 0;
}
.js-focus-hidden:focus {
outline: none;
}
/*============================================================================
Skip to content button
- Overrides .visually-hidden when focused
==============================================================================*/
.skip-link:focus {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: $color-body-text;
background-color: $color-body;
padding: $gutter-site / 2;
z-index: $z-index-skip-to-content;
transition: none;
}
/*================ #Basic Styles ================*/
body,
html {
background-color: $color-body;
}
.page-width {
@include clearfix();
max-width: $width-site;
margin: 0 auto;
padding: 0 ($gutter-site / 2);
@include media-query($medium-up) {
padding: 0 $gutter-site;
}
}
.main-content {
display: block;
margin-top: $gutter-site;
padding-bottom: $gutter-site;
@include media-query($medium-up) {
padding-bottom: $gutter-site * 2;
}
}
/*================ Typography ================*/
blockquote {
p {
& + cite {
margin-top: $gutter-site / 2;
}
}
cite {
display: block;
&:before {
content: '\2014 \0020';
}
}
}
code, pre {
font-family: Consolas,monospace;
font-size: 1em;
}
pre {
overflow: auto;
}
/*================ #Icons ================*/
.icon {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
.supports-no-svg & {
display: none;
}
}
.supports-svg .icon__fallback-text {
@extend .visually-hidden;
}
svg.icon:not(.icon--full-color),
symbol.icon:not(.icon--full-color) {
circle,
ellipse,
g,
line,
path,
polygon,
polyline,
rect {
fill: inherit;
stroke: inherit;
}
}
/*================ Payment Icons ================*/
.payment-icons {
@include user-select();
cursor: default;
.icon {
width: 24px;
height: 24px;
}
}
/*================ Social Icons ================*/
.social-icons .icon {
width: 24px;
height: 24px;
}
/*================ #Lists ================*/
ul, ol {
margin: 0;
padding: 0;
}
ol {
list-style: decimal;
}
.list--inline {
padding: 0;
margin: 0;
li {
display: inline-block;
margin-bottom: 0;
}
}
.rte {
ul, ol {
margin: 0 0 ($gutter-site / 2) $gutter-site;
}
ul {
list-style: disc outside;
ul {
list-style: circle outside;
ul {
list-style: square outside;
}
}
}
}
.text-center.rte,
.text-center .rte {
ul,
ol {
margin-left: 0;
list-style-position: inside;
}
}
/*================ #Rich Text Editor ================*/
// allow table to scroll for tables in the RTE since we don't know
// how many columns they will contain. Class added by JS.
.rte__table-wrapper {
max-width: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*================ #Links and Buttons ================*/
.btn,
.rte .btn {
display: inline-block;
width: auto;
text-decoration: none;
text-align: center;
vertical-align: middle;
white-space: nowrap;
cursor: pointer;
border: 1px solid transparent;
@include user-select();
@include prefix(appearance, none, webkit moz spec);
// Set primary button colors - can override later
background-color: $color-btn-primary;
color: $color-btn-primary-text;
&:hover {
background-color: $color-btn-primary-hover;
color: $color-btn-primary-text;
}
&:active,
&:focus {
background-color: $color-btn-primary-active;
color: $color-btn-primary-text;
}
&[disabled] {
cursor: default;
color: $color-disabled-border;
background-color: $color-disabled;
}
.icon {
fill: currentColor;
path: currentColor;
}
}
.btn--secondary,
.rte .btn--secondary {
@extend .btn;
background-color: $color-btn-secondary;
&:hover {
background-color: $color-btn-secondary-hover;
color: $color-btn-secondary-text;
}
&:active,
&:focus {
background-color: $color-btn-secondary-active;
color: $color-btn-secondary-text;
}
}
/*================ Force an input/button to look like a text link ================*/
.text-link {
display: inline;
border: 0 none;
background: none;
padding: 0;
margin: 0;
}
/*================ #Tables ================*/
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th {
font-weight: $font-weight-bold;
}
th, td {
text-align: left;
border: 1px solid $color-border;
}
/*============================================================================
Responsive tables, defined with .responsive-table on table element.
==============================================================================*/
@include media-query($small) {
.responsive-table {
thead {
display: none;
}
tr {
display: block;
}
// IE9 table layout fixes
tr,
td {
float: left;
clear: both;
width: 100%;
}
th,
td {
display: block;
text-align: right;
padding: $gutter-site / 2;
margin: 0;
}
td:before {
content: attr(data-label);
float: left;
text-align: center;
font-size: 14px;
padding-right: 10px;
}
}
}
.responsive-table__row {
border-bottom: 1px solid $color-border;
}
/*================ #Images and Iframes ================*/
svg:not(:root) {
overflow: hidden;
}
.video-wrapper {
position: relative;
overflow: hidden;
max-width: 100%;
padding-bottom: 56.25%;
height: 0;
height: auto;
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
/*================ Forms ================*/
// Prevent zoom on touch devices in active inputs
@include media-query($medium-down) {
input,
select,
textarea {
font-size: 16px;
}
}
fieldset {
border: 1px solid $color-border;
margin: 0 0 $gutter-site;
padding: $gutter-site / 2;
}
legend {
border: 0;
padding: 0;
}
button,
input[type="submit"] {
cursor: pointer;
}
input,
textarea,
select {
border: 1px solid $color-border;
border-radius: 0;
max-width: 100%;
&:focus {
border-color: darken($color-border, 10%);
}
&[disabled] {
cursor: default;
background-color: $color-disabled;
border-color: $color-disabled-border;
}
}
textarea {
min-height: 100px;
}
/*================ Error styles ================*/
input,
select,
textarea {
&.input--error {
border-color: $color-error;
background-color: $color-error-bg;
color: $color-error;
}
}
select {
@include prefix(appearance, none, webkit moz spec);
background-position: right center;
background: {
image: url('{{ "ico-select.svg" | asset_url }}');
repeat: no-repeat;
position: right 10px center;
color: transparent;
}
padding-right: 28px;
text-indent: 0.01px;
text-overflow: '';
cursor: pointer;
/*================ Hide the svg arrow in IE9 ================*/
.ie9 & {
padding-right: 10px;
background-image: none;
}
}
optgroup {
font-weight: $font-weight-bold;
}
// Force option color (affects IE only)
option {
color: #000;
background-color: #fff;
}
select::-ms-expand {
display: none;
}
/*================ Form labels ================*/
.label--hidden {
position: absolute;
height: 0;
width: 0;
margin-bottom: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
// No placeholders, so force show labels
.ie9 & {
position: static;
height: auto;
width: auto;
margin-bottom: 2px;
overflow: visible;
clip: initial;
}
}
label[for] {
cursor: pointer;
}
/*================ #Site Nav and Dropdowns ================*/
.site-header__logo {
img {
display: block;
width: 100%;
max-width: $logo-max-width;
}
}
.site-nav {
li {
display: inline-block;
}
}
/*================ Site Nav Links ================*/
.site-nav__link {
display: block;
white-space: nowrap;
.icon-arrow-down {
position: relative;
}
.site-nav--active > & {
}
}
/*================ Dropdowns ================*/
.site-nav__dropdown {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
z-index: $z-index-dropdown;
li {
display: block;
}
}
/*================ #Giftcard Template ================*/
.giftcard__qr-code {
img {
margin: 0 auto;
}
}
.giftcard__apple-wallet-image {
display: block;
margin: 0 auto;
}
.giftcard__wrap {
margin: 0 auto $gutter-site;
}
/*================ Print Giftcard Styles ================*/
@media print {
@page {
margin: 0.5cm;
}
p {
orphans: 3;
widows: 3;
}
html, body {
background-color: #fff;
color: #000;
}
.giftcard__print-link,
.giftcard__apple-wallet {
display: none;
}
}
/*================ GLOBAL ================*/
/*================ Prefix mixins ================*/
@mixin transform($transform) {
@include prefix(transform, #{$transform}, ms webkit spec);
}
@mixin animation($animation) {
@include prefix(animation, #{$animation}, moz o webkit spec);
}
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-ms-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
@mixin backface($visibility: hidden) {
@include prefix(backface-visibility, #{$visibility}, webkit spec);
}
/*============================================================================
Flexbox prefix mixins from Bourbon
https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_flex-box.scss
==============================================================================*/
@mixin display-flexbox() {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@mixin flex-wrap($value: nowrap) {
@include prefix(flex-wrap, $value, webkit moz ms spec);
}
@mixin align-items($value: stretch) {
$alt-value: $value;
@if $value == "flex-start" {
$alt-value: start;
} @else if $value == "flex-end" {
$alt-value: end;
}
-ms-flex-align: $alt-value;
@include prefix(align-items, $value, webkit moz ms o spec);
}
@mixin flex($value) {
@include prefix(flex, $value, webkit moz ms spec);
}
@mixin flex-basis($width: auto) {
-ms-flex-preferred-size: $width;
@include prefix(flex-basis, $width, webkit moz spec);
}
/*================ Style mixins ================*/
@mixin accent-text() {
font-family: $font-stack-accent;
{% if settings.type_accent_bold %}
font-weight: $font-weight-bold;
{% else %}
font-weight: $font-weight-normal;
{% endif %}
{% if settings.type_accent_spacing %}
letter-spacing: 0.1em;
{% endif %}
{% if settings.type_accent_transform %}
text-transform: uppercase;
{% endif %}
}
@mixin button-text-style() {
font-size: $font-size-button;
font-weight: $font-weight-bold;
{% if settings.type_nav_spacing %}
letter-spacing: 0.15em;
{% endif %}
{% if settings.type_nav_transform %}
text-transform: uppercase;
{% endif %}
}
@mixin nav-text-style() {
font-size: $font-size-nav;
font-weight: $font-weight-bold;
{% if settings.type_nav_spacing %}
letter-spacing: 0.6px;
{% endif %}
{% if settings.type_nav_transform %}
text-transform: uppercase;
{% endif %}
}
@mixin placeholder-text() {
color: $color-body-text;
opacity: 0.6;
}
@mixin error-placeholder-text() {
color: $color-error-input-text;
opacity: 0.6;
}
@mixin header-placeholder-text() {
color: $color-header-links;
opacity: 0.6;
}
@mixin footer-placeholder-text() {
color: $color-footer-text;
opacity: 0.8;
}
.main-content {
margin-top: $gutter-site * 1.5;
padding-bottom: $gutter-site * 2;
@include media-query($medium-up) {
margin-top: $gutter-site * 3;
padding-bottom: $gutter-site * 4;
}
}
.main-content--flush {
margin-top: 0;
}
.full-width {
padding: ($gutter-site * 4) $gutter-site;
background-color: $color-body;
}
// Negative bottom margin if above footer
.full-width--return-link {
margin-bottom: -($gutter-site * 2); // equivalent to .main-content bottom padding
@include media-query($medium-up) {
margin-bottom: -($gutter-site * 4);
}
// If it follows a content block directly, reduce top margin slightly
.content-block + & {
margin-top: -$gutter-site;
}
}
hr {
margin: $gutter-site 0;
border-color: $color-border;
border-style: solid;
border-width: 1px 0 0 0;
}
/*================ Empty pages (404, cart) ================*/
.page-empty {
padding: 120px 0;
margin-bottom: $gutter-site;
}
/*================ Index sections ================*/
.index-section {
position: relative;
margin-bottom: $gutter-site * 1.5;
&:last-child {
margin-bottom: 0;
}
}
.index-section--page-content {
margin-top: 50px;
margin-bottom: 0;
@include media-query($medium-up) {
margin-top: $gutter-site * 4;
margin-bottom: $gutter-site * 4;
}
}
/*================ Grid | Half gutters ================*/
.grid--half-gutters {
margin-left: -($gutter-site / 2);
> .grid__item {
padding-left: $gutter-site / 2;
}
}
.grid--no-gutters {
margin-left: 0;
> .grid__item {
padding-left: 0;
}
}
/*================ Grid | Vertically centered items ================*/
.grid--table {
display: table;
table-layout: fixed;
width: 100%;
margin-left: 0;
> .grid__item {
float: none;
display: table-cell;
vertical-align: middle;
padding-left: 0;
}
}
.medium-up--grid--table {
display: table;
table-layout: fixed;
width: 100%;
margin-left: 0;
> .grid__item {
float: none;
display: table-cell;
vertical-align: middle;
padding-left: 0;
}
@include media-query($small) {
display: block;
> .grid__item {
display: block;
}
}
}
body,
input,
textarea,
button,
select {
font-size: $font-size-base;
font-family: $font-stack-body;
color: $color-body-text;
line-height: 1.375;
}
// Prevent zoom on touch devices in active inputs
@include media-query($medium-down) {
input,
textarea {
font-size: 16px;
}
}
/*================ Headings ================*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-heading;
margin: 0 0 em($gutter-site / 2);
a {
color: inherit;
text-decoration: none;
font-weight: inherit;
}
}
h2,
h3,
h4,
h5,
h6 {
letter-spacing: inherit;
text-transform: inherit;
font-family: $font-stack-body;
font-weight: $font-weight-bold;
}
//Use em() Sass function to declare font-size
h1 {
@include accent-text();
font-size: em(30);
@include media-query($medium-up) {
font-size: em(36);
}
}
h2 {
font-size: em(30);
}
h3 {
font-size: em(24);
}
h4 {
font-size: em(18);
{% if settings.type_accent_spacing %}
letter-spacing: 1.2px;
{% endif %}
{% if settings.type_accent_transform %}
text-transform: uppercase;
{% endif %}
}
h5 {
font-size: em(20);
}
h6 {
font-size: em(16);
}
.h1 {
@extend h1;
}
.h2 {
@extend h2;
}
.h3 {
@extend h3;
}
.h4 {
@extend h4;
}
.h5 {
@extend h5;
}
.h6 {
@extend h6;
}
/*================ RTE headings ================*/
.rte {
margin-bottom: $gutter-site;
// If an .rte div is the last element in its parent,
// make it flush with the bottom of the container
&:last-child {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: $gutter-site * 2;
&:first-child {
margin-top: 0;
}
}
p {
margin: 0 0 $gutter-site;
}
li {
margin-bottom: $gutter-site / 2;
&:last-child {
margin-bottom: 0;
}
}
}
/*================ Paragraph styles ================*/
p {
margin: 0 0 ($gutter-site / 2);
&:last-child {
margin-bottom: 0;
}
}
/*================ Blockquote ================*/
blockquote {
color: $color-heading;
font-size: em(20px);
font-weight: $font-weight-bold;
text-align: center;
cite {
font-size: 0.85em;
font-weight: $font-weight-normal;
}
@include media-query($small) {
margin-left: 0;
margin-right: 0;
}
}
/*================ Lists ================*/
.list--no-bullets {
list-style: none;
}
.list--bold {
font-weight: $font-weight-bold;
font-size: em(15);
}
/*================ Form elements ================*/
label {
font-size: em(12);
font-weight: $font-weight-bold;
color: $color-body-text;
text-transform: uppercase;
margin-bottom: 13px;
}
/*================ Blog styles ================*/
.blog__meta {
font-size: em(14);
}
.blog__rss-link .icon-rss {
fill: currentColor;
width: 18px;
height: 18px;
vertical-align: baseline;
}
/*================ Tables ================*/
table {
background-color: $color-body;
}
td,
th {
padding: $gutter-site / 2;
border: 1px solid $color-content;
}
/*================ Forms and inputs ================*/
::-webkit-input-placeholder {
@include placeholder-text();
}
:-moz-placeholder {
@include placeholder-text();
}
:-ms-input-placeholder {
@include placeholder-text();
}
input,
textarea,
select {
background-color: $color-form;
color: $color-form-text;
border: 0;
max-width: 100%;
&[disabled] {
color: rgba(0, 0, 0, 0.4);
}
&.input--error {
color: $color-error-input-text;
&::-webkit-input-placeholder {
@include error-placeholder-text();
}
&:-moz-placeholder {
@include error-placeholder-text();
}
&:-ms-input-placeholder {
@include error-placeholder-text();
}
}
}
.input--content-color {
background-color: $color-content;
}
input,
textarea {
padding: $input-padding-top-bottom $input-padding-left-right;
}
// Fix Safari close button position bug - http://codepen.io/cshold/pen/yNWoNo
input[type="search"] {
padding-right: 0;
}
select {
padding-top: $input-padding-top-bottom;
padding-left: $input-padding-left-right;
padding-bottom: $input-padding-top-bottom;
}
.form-vertical {
input,
select,
textarea {
display: block;
width: 100%;
margin-bottom: $gutter-site / 2;
}
input[type="radio"],
input[type="checkbox"] {
display: inline-block;
width: auto;
margin-right: 5px;
}
input[type="submit"],
.btn {
display: inline-block;
}
}
textarea {
min-height: 100px;
}
/*================ Form feedback messages ================*/
.note,
.form-success,
.errors {
padding: $input-padding-top-bottom;
margin: 0 0 ($gutter-site / 2);
}
.note {
border: 1px solid $color-border;
}
.form-success {
background-color: $color-success-bg;
color: $color-success;
}
.errors {
background-color: $color-error-bg;
color: $color-error-input-text;
}
.errors ul {
list-style: none;
padding: 0;
margin: 0;
}
/*============================================================================
Input groups
- Align a text input beside a submit button without
any space between them. The button will size it's parent
based on the 1% width below while maintaining its
padding and styles.
==============================================================================*/
.input-group {
position: relative;
display: table;
width: 100%;
border-collapse: separate;
.form-vertical & {
margin-bottom: $gutter-site;
}
}
.input-group__field,
.input-group__btn {
display: table-cell;
vertical-align: middle;
margin: 0;
}
.input-group__field,
.input-group__btn .btn {
height: $input-group-height;
padding-top: 0;
padding-bottom: 0;
}
.input-group__field {
width: 100%;
.form-vertical & {
margin: 0;
}
}
.input-group__btn {
white-space: nowrap;
width: 1%;
.icon-arrow-right {
width: 14px;
height: 17px;
}
}
/*================ Theme links and buttons ================*/
.btn,
.btn--secondary {
@include button-text-style();
padding: 15px 45px;
transition: $button-transition;
}
.btn--narrow {
padding-left: 15px;
padding-right: 15px;
}
.btn--full {
display: block;
width: 100%;
}
/*================ Default link styles ================*/
a,
.link-accent-color {
color: $color-accent;
text-decoration: none;
transition: $link-transition;
&:hover,
&:focus {
color: $color-accent-hover;
}
}
.text-link {
transition: $button-transition;
}
.link-body-color {
color: $color-body-text;
transition: $link-transition;
&:hover,
&:focus {
color: $color-accent;
}
}
/*================ Return link ================*/
.return-link {
display: block;
text-align: center;
margin-bottom: 0;
font-size: em(24);
.icon {
fill: currentColor;
}
}
/*================ TEMPLATES ================*/
/*============= Templates | Password page =============*/
.template-password {
height: 100vh;
background-color: $color-password-bg;
color: $color-password-text;
.ie9 & {
height: auto;
padding: ($gutter-site * 4) 0;
}
}
.password-page {
display: table;
height: 100%;
width: 100%;
a {
color: $color-password-links;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-password-text;
}
label {
color: $color-password-text;
}
}
.password-page__inner {
display: table-cell;
vertical-align: middle;
}
.password-page__content,
.password-modal__content {
max-width: 450px;
margin: 0 auto;
}
.password-page__content {
padding: $gutter-site 0;
}
.password-logo {
margin-top: $gutter-site / 2;
margin-bottom: $gutter-site;
}
.password-logo__image {
max-width: 100%;
}
.password-page__title {
font-size: em(50);
line-height: 1;
margin-bottom: $gutter-site;
}
.password-page__message {
font-size: em(18);
margin-bottom: $gutter-site * 2;
}
.password-signup-form {
margin-bottom: $gutter-site * 4;
}
.password-social-sharing {
margin-bottom: $gutter-site * 4;
}
/*================ Login link ================*/
.password-login-link {
display: block;
padding: $gutter-site;
text-align: center;
@include media-query($medium-up) {
position: absolute;
top: 0;
right: 0;
}
.icon {
width: 12px;
height: 1em;
margin-right: $gutter-site / 3;
fill: currentColor;
}
}
/*================ Login modal ================*/
.password-login-form {
margin-bottom: $gutter-site * 2;
}
/*================ Password svg icons ================*/
.icon-shopify-logo {
width: 1.5 * $font-size-base * 120 / 35;
height: 1.5 * $font-size-base;
margin-left: $gutter-site / 3;
fill: currentColor;
}
/*============= Templates | Gift card page =============*/
.template-giftcard {
background-color: $color-header;
}
.giftcard__header {
margin: ($gutter-site * 4) auto ($gutter-site * 2);
}
.giftcard__content {
background-color: $color-content;
max-width: 540px;
margin: 0 auto ($gutter-site * 2);
padding: $gutter-site;
}
.giftcard__shop-url {
display: none;
}
/*================ Giftcard image, amount, and code ================*/
.giftcard__wrap {
position: relative;
&:before,
&:after {
content: '';
display: block;
position: absolute;
background-color: $color-giftcard-code-bg;
height: 40px;
width: 40px;
border: 1px solid rgba(0,0,0,0.1);
}
&:before {
top: -2px;
left: -2px;
border-radius: $giftcard-image-border-radius 0 100% 0;
box-shadow: 2px 2px 1px rgba(0,0,0,0.05);
}
&:after {
bottom: -2px;
right: -2px;
border-radius: 100% 0 $giftcard-image-border-radius 0;
box-shadow: -2px -2px 1px rgba(0,0,0,0.05);
}
}
.giftcard__image {
display: block;
border-radius: $giftcard-image-border-radius;
overflow: hidden;
}
.giftcard__amount-wrapper {
position: absolute;
top: $gutter-site / 3;
right: $gutter-site / 2;
}
.giftcard__amount,
.giftcard__amount-remaining {
color: $color-giftcard-text;
}
.giftcard__amount {
font-size: em(28);
margin-bottom: 0;
text-shadow: 2px 2px 1px rgba(0,0,0,0.1);
@include media-query($medium-up) {
font-size: em(40);
}
}
.giftcard__code {
position: absolute;
left: 0;
right: 0;
bottom: $gutter-site;
}
.giftcard__code-bubble {
position: relative;
display: inline-block;
background-color: $color-giftcard-code-bg;
color: $color-giftcard-code-text;
padding: ($gutter-site / 2) $gutter-site;
font-size: em(15);
border-radius: $giftcard-code-border-radius;
@include media-query($medium-up) {
font-size: em(20);
}
&:after {
content: '';
display: block;
position: absolute;
top: $gutter-site / 4;
bottom: $gutter-site / 4;
left: $gutter-site / 4;
right: $gutter-site / 4;
border: 1px dashed $color-giftcard-code-text;
border-radius: $giftcard-code-border-radius;
opacity: 0.3;
}
}
/*================ Print styles ================*/
@media print {
.giftcard__shop-url {
display: block;
}
.giftcard__wrap {
&:before,
&:after {
display: none;
}
}
.giftcard__amount-wrapper {
background-color: #fff;
border-radius: $giftcard-code-border-radius;
padding: 0 ($gutter-site / 3);
}
}
/*================ VENDOR ================*/
/*============================================================================
Slick Slider 1.5.8
- If upgrading Slick's styles, use the following variables/functions
instead of the slick defaults (from slick-theme.scss)
- This file includes default slick.scss styles (at Slick Slider SCSS)
and slick-theme.scss (at Slick Slider Theme). Upgrade each area individually
==============================================================================*/
$slick-font-family: "slick-icons, sans-serif";
$slick-arrow-color: $color-hero-arrows;
$slick-dot-color: $color-hero-dots;
$slick-dot-color-active: $color-hero-dots-active;
$slick-prev-character: '\2190';
$slick-next-character: '\2192';
$slick-dot-character: '\2022';
$slick-dot-size: 6px;
$slick-opacity-default: 0.75;
$slick-opacity-on-hover: 1;
$slick-opacity-not-active: 0.25;
// Only called once so make sure proper file is grabbed
@function slick-image-url($url) {
@return url({{ "ajax-loader.gif" | asset_url }});
}
// Unused intentionally
@function slick-font-url($url) {}
/*================ Slick Slider SCSS ================*/
.slick-slider {
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
&:focus {
outline: none;
}
&.dragging {
cursor: pointer;
cursor: hand;
}
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
&:before,
&:after {
content: "";
display: table;
}
&:after {
clear: both;
}
.slick-loading & {
visibility: hidden;
}
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
[dir="rtl"] & {
float: right;
}
img {
display: block;
}
&.slick-loading img {
display: none;
}
display: none;
&.dragging img {
pointer-events: none;
}
.slick-initialized & {
display: block;
}
.slick-loading & {
visibility: hidden;
}
.slick-vertical & {
display: block;
height: auto;
border: 1px solid transparent;
}
}
.slick-arrow.slick-hidden {
display: none;
}
/*================ Slick Slider Theme ================*/
.slick-list {
.slick-loading & {
background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
}
/* Icons */
@if $slick-font-family == "slick" {
@font-face {
font-family: "slick";
src: slick-font-url("slick.eot");
src: slick-font-url("slick.eot?#iefix") format("embedded-opentype"), slick-font-url("slick.woff") format("woff"), slick-font-url("slick.ttf") format("truetype"), slick-font-url("slick.svg#slick") format("svg");
font-weight: normal;
font-style: normal;
}
}
/* Arrows */
.slick-prev,
.slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
margin-top: -10px\9; /*lte IE 8*/
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none;
&:hover, &:focus {
outline: none;
background: transparent;
color: transparent;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&.slick-disabled:before {
opacity: $slick-opacity-not-active;
}
}
.slick-prev:before, .slick-next:before {
font-family: $slick-font-family;
font-size: 20px;
line-height: 1;
color: $slick-arrow-color;
opacity: $slick-opacity-default;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.slick-prev {
left: -25px;
[dir="rtl"] & {
left: auto;
right: -25px;
}
&:before {
content: $slick-prev-character;
[dir="rtl"] & {
content: $slick-next-character;
}
}
}
.slick-next {
right: -25px;
[dir="rtl"] & {
left: -25px;
right: auto;
}
&:before {
content: $slick-next-character;
[dir="rtl"] & {
content: $slick-prev-character;
}
}
}
/* Dots */
.slick-slider {
margin-bottom: 30px;
}
.slick-dots {
position: absolute;
bottom: -45px;
list-style: none;
display: block;
text-align: center;
padding: 0;
width: 100%;
li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 5px;
cursor: pointer;
&:hover, &:focus {
outline: none;
&:before {
opacity: $slick-opacity-on-hover;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
content: $slick-dot-character;
width: 20px;
height: 20px;
font-family: $slick-font-family;
font-size: $slick-dot-size;
line-height: 20px;
text-align: center;
color: $slick-dot-color;
opacity: $slick-opacity-not-active;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
&.slick-active button:before {
color: $slick-dot-color-active;
opacity: $slick-opacity-default;
}
}
}
/*================ MODULES ================*/
/*================ Site Header ================*/
.site-header {
background-color: $color-header;
}
.site-header__upper {
padding-top: $gutter-site / 2;
padding-bottom: $gutter-site / 2;
@include media-query($medium-up) {
padding-top: $gutter-site;
padding-bottom: $gutter-site;
}
}
.site-header__logo {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
max-width: 100%;
a {
display: block;
color: $color-header-links;
@include media-query($medium-up) {
display: block;
float: left;
}
}
}
// Added if the shop name is long and no logo is set
.site-header__shop-name--small {
font-size: 20px;
}
.template-giftcard .site-header__logo-link {
display: inline-block;
float: none;
}
/*================ Menu toggle, Cart, and Search icons ================*/
.site-header__link {
display: inline-block;
color: $color-header-links;
padding: $gutter-site / 2;
line-height: 1;
.icon {
width: 22px;
height: 22px;
fill: currentColor;
}
&:hover,
&:focus {
color: $color-accent;
}
}
.site-header__menu-toggle--close {
display: none;
}
.site-header__link.js-drawer-open {
.site-header__menu-toggle--open {
display: none;
}
.site-header__menu-toggle--close {
display: block;
}
}
/*================ Cart icon ================*/
.site-header__cart {
position: relative;
}
.site-header__cart-indicator {
position: absolute;
bottom: ($gutter-site / 2) - 1; // account for site-header__link padding
right: ($gutter-site / 2) - 1;
background-color: $color-accent;
height: 10px;
width: 10px;
border-radius: 10px;
.supports-no-svg & {
bottom: auto;
top: -6px;
right: -10px;
}
}
/*================ Header search bar ================*/
.site-header__search {
position: relative;
display: inline;
}
// Need a block element to use absolute positioning properly
.site-header__search-inner {
position: absolute;
right: 0;
top: -4px;
bottom: 0;
display: block;
width: 200px;
@include media-query($large-up) {
width: 250px;
}
}
.site-header__search-input {
position: absolute;
opacity: 0;
top: -4px;
right: 8px;
width: 0;
padding: ($gutter-site / 2) 0;
font-size: em(13);
color: color-control($color-header);
background-color: adaptive-color($color-header, 8%);
transition: $header-search-transition;
z-index: $z-index-header-search-input;
&:focus,
&.site-header__search-input--visible {
width: 100%;
opacity: 1;
padding-left: $gutter-site / 2;
padding-right: $gutter-site * 1.5;
}
&::-webkit-input-placeholder {
@include header-placeholder-text();
}
&:-moz-placeholder {
@include header-placeholder-text();
}
&:-ms-input-placeholder {
@include header-placeholder-text();
}
}
.site-header__search-submit {
position: relative;
z-index: $z-index-header-search-submit;
}
/*================ Nav Bar ================*/
.nav-bar {
position: relative;
border-top: 1px solid $color-header-border;
background-color: $color-header;
z-index: $z-index-stickynav;
// psuedo element sits above meganav dropdown, but below nav links
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: $color-header;
pointer-events: none;
z-index: $z-index-nav-links - 1;
}
}
/*================ Sticky bar ================*/
.sticky {
position: relative;
overflow: visible;
z-index: $z-index-stickynav;
}
.sticky--active {
position: fixed;
top: 0;
left: 0;
width: 100%;
@include transform(translate3d(0, -100%, 0));
}
.sticky--open {
@include transform(translate3d(0, 0, 0));
transition: $sticky-transition-open;
}
// Show/hide elements in the sticky bar
.sticky--active .sticky-hidden {
display: none;
}
.sticky-only {
position: relative;
display: none;
z-index: $z-index-nav-links;
.sticky--active & {
display: block;
}
}
/*================ Site Nav ================*/
.site-nav {
margin-left: -$gutter-site;
white-space: nowrap;
}
.site-nav__item--no-products {
position: relative;
.meganav {
right: auto;
min-width: 200px;
}
}
.site-nav__link {
@include nav-text-style();
position: relative;
color: $color-header-links;
color: rgba($color-header-links, 0.6);
padding: $gutter-site;
z-index: $z-index-nav-links;
.icon {
position: relative;
top: -1.5px;
width: 9px;
height: 9px;
fill: currentColor;
}
&:hover,
&:focus,
.site-nav--active & {
color: $color-header-links;
}
&:focus {
background-color: adaptive-color($color-header, 8%);
}
.site-nav--active &:after {
content: '';
position: absolute;
bottom: 0;
left: $gutter-site;
right: $gutter-site;
height: 3px;
background-color: $color-accent;
}
}
.site-nav__link--compressed {
margin-left: -$gutter-site;
.icon {
width: 22px;
height: 22px;
}
}
// Can't add classes to login/logout links. Style element instead.
.customer-login-links {
position: relative;
display: inline-block;
margin-right: -($gutter-site / 2);
z-index: $z-index-nav-links;
}
.customer-login-links a {
display: inline-block;
color: $color-header-links;
color: rgba($color-header-links, 0.6);
padding: $gutter-site ($gutter-site / 2);
font-size: em({{ settings.type_nav_size }} - 1);
&:hover,
&:focus {
color: $color-header-links;
}
}
/*============================================================================
Meganav
- The meganav is used in three places:
1. Site nav as a dropdown
2. Drawer nav as a dropdown
3. Homepage in accordion links
==============================================================================*/
.meganav {
display: block;
visibility: hidden;
right: 0;
background-color: $color-content;
overflow: hidden;
&.meganav--active {
visibility: visible;
z-index: $z-index-dropdown + 1; // opening meganav is always higher than closing one
}
}
/*================ Site header animation ================*/
.site-header .meganav {
opacity: 0;
@include transform(translate3d(0, -15%, 0));
transition: $meganav-site-header-transition-close;
&.meganav--active {
opacity: 1;
@include transform(translate3d(0, 0, 0));
transition: $meganav-site-header-transition-open;
}
&.meganav--no-animation {
transition: none;
}
}
/*================ Drawer animation ================*/
.drawer__nav .meganav {
max-height: 0;
transition: $meganav-drawer-transition-close;
&.meganav--active {
max-height: 350px; // approx for animation purposes
transition: $meganav-drawer-transition-open;
}
}
/*================ Meganav elements ================*/
.meganav__nav {
position: relative;
list-style: none;
}
.meganav__list {
padding: $gutter-site 0 $gutter-site;
}
.meganav__list--has-title {
padding-top: ($gutter-site * 3.5);
}
// When in the site nav, adjust padding to make a single column of links
.site-nav {
.meganav__list--no-products {
padding-top: 0;
margin-top: -$gutter-site;
}
}
.meganav__title {
position: absolute;
top: $gutter-site * 1.5;
font-size: em(24);
margin-bottom: 0;
}
.meganav__link {
display: block;
color: $color-body-text;
padding: ($gutter-site / 4) ($gutter-site / 2);
margin-left: -($gutter-site / 2); // friendly hit area
&:hover,
&:focus {
color: $color-accent;
}
}
.meganav__link--active {
color: $color-meganav-active-link;
font-weight: $font-weight-bold;
}
/*================ Meganav product cards ================*/
.meganav__product {
.product-card {
border-bottom-width: 0;
}
&:last-child .product-card {
border-right-width: 1px;
}
}
/*================ Site nav specific styles ================*/
.site-nav__dropdown {
box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px;
}
/*================ Drawer meganav styles ================*/
.meganav--drawer {
background-color: $color-body;
.product-card {
margin-top: 1px;
}
// Remove inline-block spacing
.meganav__product {
margin-left: -4px;
}
}
.drawer__nav-toggle--open {
display: block;
.meganav--active & {
display: none;
}
}
.drawer__nav-toggle--close {
display: none;
.meganav--active & {
display: block;
}
}
/*================ Fixed width meganav columns (for horizontal scrolling) ================*/
.meganav__scroller {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
.drawer__nav--template-index & {
background-color: $color-content;
border-top: 1px solid $color-border;
}
.grid__item {
float: none;
display: inline-block;
width: 180px; // fixed column size to enforce horizontal scrolling
vertical-align: top;
white-space: normal;
}
}
.drawer__nav .meganav__scroller--has-list {
padding-left: $gutter-site;
}
/*================ Site footer ================*/
// Make sure footer appears to reach bottom of page
html {
background-color: $color-footer;
}
.site-footer {
background-color: $color-footer;
color: $color-footer-text;
color: rgba($color-footer-text, 0.6);
padding-top: $gutter-site;
@include media-query($medium-up) {
padding-top: $gutter-site * 2;
}
a {
color: $color-footer-text;
color: rgba($color-footer-text, 0.6);
&:hover,
&:focus {
color: $color-footer-text;
}
}
p {
margin-bottom: $gutter-site / 2;
}
@include media-query($small) {
.page-width {
padding: 0 $gutter-site;
}
}
}
.site-footer__section {
padding-bottom: $gutter-site;
@include media-query($medium-up) {
padding-bottom: $gutter-site * 2;
}
}
.site-footer__subsection {
margin-bottom: $gutter-site;
&:last-child {
margin-bottom: 0;
}
}
.site-footer__copyright {
border-top: 1px solid $color-footer-border;
padding: ($gutter-site / 2) 0;
}
/*================ Linklists and page content ================*/
.site-footer__section-title {
color: $color-footer-text;
font-size: em(24);
}
.site-footer__list {
list-style: none;
}
.site-footer__list-item {
margin-bottom: $gutter-site / 2;
}
/*================ Newsletter field ================*/
.site-footer__newsletter-label {
display: block;
color: $color-footer-text;
color: rgba($color-footer-text, 0.6);
font-family: $font-stack-body;
font-size: inherit;
font-weight: $font-weight-normal;
text-transform: inherit;
}
.site-footer__newsletter-input {
color: $color-footer-newsletter-text;
background-color: $color-footer-newsletter;
&::-webkit-input-placeholder {
@include footer-placeholder-text();
}
&:-moz-placeholder {
@include footer-placeholder-text();
}
&:-ms-input-placeholder {
@include footer-placeholder-text();
}
}
/*================ Icons ================*/
.site-footer {
.social-icons .icon,
.payment-icons .icon {
margin-right: 10px;
fill: currentColor;
}
}
/*================ Content blocks ================*/
.content-block {
background-color: $color-content;
padding: $gutter-site;
margin-bottom: $gutter-site;
&:last-child {
margin-bottom: 0;
}
}
@include media-query($medium-up) {
.content-block--large {
padding: $gutter-site * 2;
}
}
// Only intended to be used in a non-variation content-block
.content-block__no-padding {
margin-left: -$gutter-site;
margin-right: -$gutter-site;
margin-bottom: -$gutter-site;
}
.content-block__no-padding--border-top {
border-top: 1px solid $color-border;
}
.content-block__title {
text-align: center;
margin-bottom: $gutter-site;
}
.content-block--search-results {
padding-bottom: 0;
}
.content-block__item {
margin-bottom: $gutter-site;
}
.content-block__full-image {
margin-left: -$gutter-site;
margin-right: -$gutter-site;
margin-bottom: $gutter-site;
img {
display: block;
margin: 0 auto;
}
// If first element in .content-block, get flush with top
&:first-child {
margin-top: -$gutter-site;
}
}
@include media-query($medium-up) {
.content-block__full-image--large {
margin-left: -($gutter-site * 2);
margin-right: -($gutter-site * 2);
margin-bottom: $gutter-site * 2;
// If first element in .content-block, get flush with top
&:first-child {
margin-top: -($gutter-site * 2);
}
}
}
/*================ Product cards ================*/
.product-card {
position: relative;
display: block;
background-color: $color-content;
text-align: center;
padding: $product-image-padding / 2;
border-color: $color-body;
border-style: solid;
border-width: 0 0 1px 0;
color: $color-body-text;
z-index: $z-index-product-card;
.grid--no-gutters & {
border-left-width: 1px;
}
.collection__card--first & {
border-left-width: 0;
}
// Overlay appears on hover/focus, don't change text color
&:hover,
&:focus {
color: $color-body-text;
}
// Prevent browser focus from being cut off
&:focus {
z-index: $z-index-product-card + 1;
}
@include media-query($medium-up) {
padding: $product-image-padding;
}
}
/*================ Product hover/focus overlay ================*/
.product-card__overlay {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.06);
transition: $product-card-transition;
.product-card:hover &,
.product-card:focus & {
visibility: visible;
opacity: 1;
}
.supports-touchevents & {
display: none;
}
}
.product-card__overlay-btn {
position: relative;
top: 50%;
@include transform(translateY(-45%));
transition: $product-card-transition;
.product-card:hover & {
@include transform(translateY(-85%));
}
.supports-no-csstransforms & {
top: 35%;
}
}
/*================ Product image and wrapper ================*/
.product-card__image-wrapper {
height: $product-card-height;
margin-bottom: $product-image-margin-bottom;
}
.product-card__image {
position: relative;
top: 50%;
@include transform(translateY(-50%));
@include backface(hidden);
max-height: 100%;
.supports-no-csstransforms & {
top: 0;
}
}
/*================ Product meta info ================*/
.product-card__info {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: $color-content;
padding: ($gutter-site / 2) ($product-image-padding / 2);
@include media-query($medium-up) {
padding: ($gutter-site / 2) ($product-image-padding / 2) $gutter-site;
}
}
.product-card__name,
.product-card__availability {
position: relative;
z-index: $z-index-product-card + 2;
}
.product-card__name {
font-weight: $font-weight-bold;
color: $color-heading;
white-space: normal;
}
.product-card__availability {
@include nav-text-style();
font-size: em(14);
color: $color-accent;
}
.product-card__brand,
.product-card__price {
font-size: em(14);
}
.product-card__regular-price {
opacity: 0.8;
}
.template-product .page-container {
background-color: $color-content;
}
.product-single {
margin-bottom: $gutter-site * 2;
@include media-query($medium-up) {
margin-bottom: $gutter-site * 4;
}
}
@include media-query($small) {
.product-single__info-wrapper {
padding: 0 ($gutter-site / 2);
}
}
/*================ Product meta ================*/
.product-single__meta-list {
line-height: 1;
li {
padding-right: $gutter-site / 2;
vertical-align: middle;
&:last-child {
padding-right: 0;
}
}
}
.product-single__vendor {
margin-bottom: $gutter-site / 4;
}
.product-single__title {
margin-bottom: $gutter-site / 3;
}
.product-single__price {
font-size: em(20);
}
.product-single__price--compare {
opacity: 0.4;
}
.product-single__stock {
font-size: em(13);
text-transform: uppercase;
}
/*================ Product form ================*/
// Force selects, inputs, and buttons to be the same height,
// regardless of font-size
.product-form {
.btn {
padding-top: 12px;
padding-bottom: 12px;
}
.btn,
select,
input[type="text"] {
min-height: 48px;
}
}
.product-form__variants {
display: none;
.supports-no-js & {
display: block;
margin-bottom: $gutter-site / 2;
}
}
.product-form {
@include display-flexbox();
@include flex-wrap(wrap);
@include align-items(flex-end);
margin: 0 -($gutter-site / 4);
}
.product-form__item {
@include flex(1 0 160px); // enough width to give even small dropdowns a substantial width
margin-bottom: $gutter-site / 2;
padding: 0 ($gutter-site / 4);
label {
display: block;
}
}
.product-form__item--quantity {
@include flex(0 0 100px);
}
.product-form__item--submit {
@include flex-basis(200px);
}
.product-form__input {
display: block;
width: 100%;
}
.btn--sold-out[disabled] {
background-color: $color-error-bg;
color: $color-error-input-text;
}
.product-form__cart-submit {
padding-left: 5px;
padding-right: 5px;
white-space: normal;
}
/*================ Product image and thumbnail layout ================*/
.photos__item--main {
text-align: center;
}
.photos__item--thumbs {
max-width: 100%;
}
@include media-query($medium-up) {
.photos {
@include display-flexbox();
@include align-items(flex-start);
flex-direction: row;
}
.photos__item--main {
@include flex(1 1 auto);
order: 2;
}
.photos__item--thumbs {
order: 1;
@include flex(0 0 15%);
}
}
.product-single__photo {
margin-bottom: $gutter-site;
@include media-query($small) {
max-height: 340px; // keep thumbnails below it visible on (most) small screens
img {
max-height: 340px;
}
}
}
/*================ Product thumbnail layout ================*/
.product-single__thumbnails.slick-vertical .slick-slide {
border: 0;
padding: 2px 0;
}
.product-single__thumbnails {
display: none;
margin: 0 ($gutter-site * 2) $gutter-site;
&.slick-initialized {
display: block;
}
@include media-query($medium-up) {
margin: 0;
}
}
.product-single__thumbnails--static {
display: block;
text-align: center;
@include media-query($small) {
.product-single__thumbnail-item {
display: inline-block;
width: 45%;
max-width: 150px;
}
}
}
.product-single__thumbnail {
position: relative;
display: block;
height: $product-slider-image-height;
padding: $product-slider-padding;
max-width: 200px;
margin: 0 auto;
img {
position: relative;
top: 50%;
@include transform(translateY(-50%));
display: block;
max-height: $product-slider-image-height - ($product-slider-padding * 2);
margin: 0 auto;
.supports-no-csstransforms & {
top: 0;
}
}
.is-active &:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 3px solid $color-accent;
}
}
/*================ Slider arrows ================*/
.product-single__thumbnails {
.slick-prev,
.slick-next {
opacity: 0.2;
transition: opacity 0.15s ease-in;
width: 30px;
height: 30px;
&:before {
display: none;
}
&:hover,
&:focus {
opacity: 0.7;
}
.icon {
fill: $color-body-text;
width: 30px;
height: 30px;
}
}
.slick-disabled {
opacity: 0;
visibility: hidden;
}
}
.product-single__thumbnails.slick-vertical {
.slick-prev,
.slick-next {
left: 0;
right: 0;
margin-top: 0;
width: 100%;
height: auto;
}
.slick-prev {
top: -$gutter-site;
}
.slick-next {
top: auto;
bottom: -$gutter-site * 2;
}
}
/*================ Product image modal ================*/
.product-modal__image {
display: block;
position: relative;
top: 50%;
@include transform(translateY(-50%));
display: block;
max-height: 95%;
max-width: 95%;
margin: 0 auto;
.supports-no-csstransforms & {
top: 2.5%;
}
}
.js-modal-open-product-modal {
cursor: zoom-in;
}
.product-tag {
@include nav-text-style();
display: inline-block;
font-size: em(12);
background-color: $color-btn-primary;
color: $color-btn-primary-text;
padding: ($gutter-site / 5) ($gutter-site / 2);
}
.product-tag--absolute {
display: block;
position: absolute;
top: 0;
left: 0;
}
/*============================================================================
Pagination
- Markup build by liquid tag,
so nesting and element selectors are necessary
==============================================================================*/
.pagination {
text-align: center;
margin: ($gutter-site * 2) ($gutter-site * 2) 0;
a {
color: $color-body-text;
&:hover,
&:focus {
color: $color-accent;
}
}
.current {
font-weight: $font-weight-bold;
color: $color-heading;
}
a,
.current {
display: inline-block;
padding: 5px ($gutter-site / 2);
}
}
/*================ Article comments ================*/
.comment {
margin-bottom: $gutter-site;
&:last-child {
margin-bottom: 0;
}
& + & {
padding-top: $gutter-site;
border-top: 1px solid $color-border;
}
}
/*================ Indented article/page images ================*/
.rte--indented-images .rte__image-indent {
position: relative;
margin-left: -($gutter-site);
margin-right: -($gutter-site);
@include media-query($medium-up) {
margin-left: -($gutter-site * 2);
margin-right: -($gutter-site * 2);
}
}
/*================ Section header ================*/
.section-header {
margin-bottom: $gutter-site * 2;
}
@include media-query($small) {
.section-header__item {
& + & {
margin-top: $gutter-site;
}
}
}
.section-header__title,
.section-header__subtext {
margin-bottom: 0;
}
/*============================================================================
Hero slider
Extends default slick slider styles.
Extra specificity in selectors is used to override defaults.
==============================================================================*/
.hero-wrapper {
position: relative;
}
.hero {
background-color: adaptive-color($color-header, 10%); // default background color
height: 330px;
margin-bottom: -($gutter-site * 1.5);
@include media-query($medium-up) {
height: 600px;
margin-bottom: -($gutter-site * 3);
}
// Make sure slides fill full height
.hero__slide,
.slick-list,
.slick-track {
height: 100%;
}
}
// Pause button (focusable by keyboard only)
.hero__pause:focus {
clip: auto;
width: auto;
height: auto;
margin: 0;
color: $color-hero-title-text;
background-color: $color-hero-title-bg;
padding: $gutter-site / 2;
z-index: $z-index-skip-to-content;
transition: none;
.icon {
fill: currentColor;
}
}
.hero__pause-stop {
display: block;
.is-paused & {
display: none;
}
}
.hero__pause-play {
display: none;
.is-paused & {
display: block;
}
}
/*================ Dots and prev/next pagination ================*/
.hero {
.slick-dots {
margin: 0;
bottom: 10px;
li {
margin: 0;
vertical-align: middle;
button {
position: relative;
}
button:before {
text-indent: -9999px;
background-color: #fff;
border-radius: 100%;
border: 2px solid transparent;
width: 10px;
height: 10px;
margin: 5px 0 0 5px;
opacity: 1;
transition: all 0.2s;
}
&.slick-active button:before {
background-color: transparent;
border-color: #fff;
opacity: 1;
width: 12px;
height: 12px;
margin: 4px 0 0 4px;
}
button:active:before {
opacity: 0.5;
}
}
}
.slick-prev,
.slick-next {
top: 0;
height: 100%;
margin-top: 0;
width: 40px;
}
.slick-prev {
left: 0;
}
.slick-next {
right: 0;
}
}
/*================ General slide styles ================*/
.hero__slide {
position: relative;
}
.hero__image {
position: relative;
opacity: 0;
transition: $hero-image-transition;
.slick-initialized &,
.supports-no-js & {
opacity: 1;
}
img {
display: block;
width: 100%;
}
}
// z-index stacking issues in oldIE
.ie9 {
.hero__slide {
z-index: 1!important;
}
.slick-dots {
z-index: 2;
}
}
/*================ Hero images ================*/
.hero__image {
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
}
/*================ Hero text ================*/
.hero__text-wrap {
position: absolute;
bottom: 45px;
left: 0;
right: $gutter-site / 2;
@include media-query($medium-up) {
bottom: 120px;
}
}
.hero__text-content {
opacity: 0;
@include transform('translateY(40px)');
transition: $hero-text-transition;
transition-delay: 0.3s;
.slick-active &,
.supports-no-js & {
opacity: 1;
@include transform('translateY(0)');
}
}
.hero__title-wrap {
margin-bottom: 8px;
}
.hero__title {
display: inline;
font-size: em(36);
line-height: 1;
margin: 0;
padding: 0 ($gutter-site / 2);
background-color: $color-hero-title-bg;
color: $color-hero-title-text;
@include prefix(box-decoration-break, clone, webkit o spec);
@include media-query($medium-up) {
font-size: em(60);
}
}
.hero__title--has-link {
transition: $hero-link-transition;
&:hover,
&:focus {
background-color: adaptive-color($color-hero-title-bg, 10%);
}
}
.hero__link {
color: inherit;
&:hover,
&:focus {
color: inherit;
}
}
/*================ Subtext and custom arrows share style ================*/
.hero__subtitle,
.hero__arrow {
display: inline;
line-height: 2;
padding: $gutter-site / 2;
background-color: $color-hero-subtitle-bg;
color: $color-hero-subtitle-text;
@include prefix(box-decoration-break, clone, webkit o spec);
@include media-query($medium-up) {
font-size: em(20);
}
}
// Subtitle and arrow hover effects
.hero__subtitle.hero__link,
.hero__arrow {
transition: $hero-link-transition;
&:hover,
&:focus {
color: $color-hero-subtitle-text;
background-color: adaptive-color($color-hero-subtitle-bg, 8%);
}
}
/*================ Custom navigation arrows ================*/
.hero__arrows {
display: inline;
color: $color-hero-subtitle-text;
margin-right: 1px;
.supports-no-js & {
display: none;
}
}
.hero__arrow {
cursor: pointer;
padding-right: 15px;
padding-left: 15px;
.icon {
position: relative;
top: -3px;
left: 3px;
width: 11px;
height: 11px;
fill: currentColor;
}
}
.hero__arrow--next {
border-left: 1px solid adaptive-color($color-hero-subtitle-bg, 5%);;
}
/*================ Drawer Skeleton Styles ================*/
.is-transitioning {
display: block !important;
visibility: visible !important;
}
.page-container {
overflow: hidden;
}
.js-drawer-open .page-container:after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $z-index-drawer-overlay;
}
.js-drawer-open {
overflow: hidden;
}
.drawer {
display: none;
position: fixed;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
top: 0;
bottom: 0;
max-width: 95%;
z-index: $z-index-drawer;
background-color: $color-drawer;
transition: $drawer-transition;
}
.drawer--left {
width: $drawer-width;
left: -$drawer-width;
.js-drawer-open-left & {
display: block;
@include transform(translateX($drawer-width));
.supports-no-csstransforms & {
left: 0;
}
}
}
.drawer--right {
width: $drawer-width;
right: -$drawer-width;
.js-drawer-open-right & {
display: block;
@include transform(translateX(-$drawer-width));
.supports-no-csstransforms & {
right: 0;
}
}
}
.is-moved-by-drawer {
transition: $drawer-transition;
.js-drawer-open-left & {
@include transform(translateX($drawer-width));
.supports-no-csstransforms & {
left: $drawer-width;
}
}
.js-drawer-open-right & {
@include transform(translateX(-$drawer-width));
.supports-no-csstransforms & {
left: -$drawer-width;
}
}
}
/*================ Drawer theme styles ================*/
.page-container {
position: relative;
background-color: $color-body;
z-index: $z-index-content;
}
.is-moved-by-drawer {
transition: $drawer-content-transition-close;
.js-drawer-open & {
transition: $drawer-content-transition-open;
}
.js-drawer-open-left & {
box-shadow: rgba(0, 0, 0, 0.1) 0 0 5px;
}
.js-drawer-open-right & {
box-shadow: rgba(0, 0, 0, 0.1) 0 0 -5px;
}
}
.drawer--left {
left: -($drawer-width / 4);
.js-drawer-open-left & {
@include transform(translateX($drawer-width / 4));
}
}
.drawer {
overflow: visible;
color: $color-drawer-text;
}
.drawer__inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
overflow-x: hidden;
}
/*================ Drawer search field ================*/
.drawer__search {
position: relative;
background-color: $color-body;
padding: $gutter-site / 2;
}
.drawer__search-input {
display: block;
width: 100%;
padding-left: $input-padding-left-right;
background-color: #fff;
&[type="search"] {
padding-right: $gutter-site * 3;
}
&::-webkit-search-decoration {
display: none;
}
}
.drawer__search-submit {
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: 0 $gutter-site;
.icon {
width: 25px;
height: 25px;
fill: $color-drawer-text;
}
}
/*================ Drawer linklist ================*/
.drawer__nav {
list-style: none;
}
.drawer__nav--template-index {
position: relative;
margin-bottom: -($gutter-site / 2);
background-color: $color-content;
}
.drawer__nav-item {
display: block;
border-bottom: 1px solid $color-border;
}
.drawer__nav-link {
@include accent-text();
display: block;
padding: ($gutter-site / 1.5) $gutter-site;
font-size: $drawer-link-size;
color: $color-drawer-text;
&:hover,
&:focus {
color: $color-drawer-text;
background-color: adaptive-color($color-drawer, 2%);
}
}
/*================ Sublist expand/collapse trigger ================*/
.drawer__nav-has-sublist {
display: table;
width: 100%;
.drawer__nav-link {
display: table-cell;
vertical-align: middle;
width: 100%;
}
}
.drawer__nav-toggle {
position: relative;
display: table-cell;
vertical-align: middle;
width: 1%;
}
.drawer__nav-toggle-btn {
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: ($gutter-site / 2 ) $gutter-site;
color: $color-drawer-text;
line-height: 1;
.icon {
width: 18px;
height: 18px;
fill: currentColor;
}
&:hover,
&:focus {
opacity: 0.6;
border-left: 1px solid $color-border;
}
}
.drawer__nav-toggle--open {
display: block;
}
.drawer__nav-toggle--close {
display: none;
}
/*================ Collection sorting select menus ================*/
.collection-sort {
display: inline-block;
text-align: left;
max-width: 150px;
& + & {
margin-left: $gutter-site;
}
@include media-query($small) {
width: 80%;
& + & {
margin: $gutter-site 0 0;
}
}
}
.collection-sort__label {
display: block;
text-align: center;
@include media-query($medium-up) {
text-align: left;
padding-left: $gutter-site / 3;
margin-bottom: 0;
}
}
.collection-sort__input {
background-color: transparent;
font-weight: $font-weight-bold;
padding-top: $gutter-site / 3;
padding-bottom: $gutter-site / 3;
padding-left: $gutter-site / 3;
@include media-query($small) {
width: 100%;
border: 1px solid $color-border-body-darken;
}
}
/*================ Collection card and grid ================*/
.collection {
margin-bottom: $gutter-site * 1.5;
&:last-child {
margin-bottom: 0;
}
}
/*================ Collection card ================*/
.collection-card {
position: relative;
box-sizing: content-box;
display: block;
background: {
color: $color-content;
repeat: no-repeat;
position: center top;
size: cover;
}
padding: $product-image-padding / 2;
height: $collection-card-height;
z-index: $z-index-collection-card;
// Prevent browser focus from being cut off
&:focus {
z-index: $z-index-collection-card + 1;
}
@include media-query($medium-up) {
padding: $product-image-padding;
}
&:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-collection-card-overlay;
opacity: 0.4;
z-index: $z-index-collection-card;
transition: opacity 0.2s ease;
}
&:hover,
&:focus {
&:after {
opacity: 0.5;
}
}
}
.collection-card__meta {
display: block;
position: absolute;
bottom: $gutter-site;
left: 0;
margin-right: $gutter-site / 2;
z-index: $z-index-collection-card + 1;
@include media-query($medium-up) {
bottom: $gutter-site * 2;
}
}
.collection-card__title {
display: inline;
background-color: $color-btn-primary;
color: $color-btn-primary-text;
margin-bottom: $gutter-site / 2;
padding: 2px ($gutter-site / 2);
letter-spacing: 0;
font-size: em(26);
line-height: 1.2;
@include prefix(box-decoration-break, clone, webkit o spec);
@include media-query($large-up) {
font-size: em(32);
}
}
.collection-card__subtext {
@include nav-text-style();
margin: ($gutter-site / 2) 0 0 ($gutter-site / 2);
font-size: em(13);
color: $color-collection-card-text;
}
/*================ Social sharing icons ================*/
.social-sharing {
.icon {
width: 24px;
height: 24px;
fill: currentColor;
}
}
@include media-query($small) {
.social-sharing__title {
display: inline-block;
margin-bottom: 10px;
}
}
.social-sharing__link {
color: $color-body-text;
opacity: 0.7;
&:hover,
&:focus {
opacity: 1;
color: $color-accent;
}
& + & {
margin-left: $gutter-site / 2;
}
}
/*================ Cart ================*/
.cart-table {
background-color: $color-content;
border: none;
margin-bottom: $gutter-site;
td,
th {
border: none;
@include media-query($medium-up) {
padding: $gutter-site;
}
}
}
/*================ Cart cells ================*/
@include media-query($medium-up) {
.cart__cell--image {
width: 180px;
}
.cart__cell--quantity {
width: 130px;
}
.cart__cell--total {
width: 200px;
text-align: right;
}
}
/*================ Cart cell responsive labels ================*/
@include media-query($small) {
.cart-table {
th,
td {
text-align: center;
}
td:before {
display: none;
}
}
}
/*================ Cart items ================*/
.cart__image {
display: inline-block;
max-width: 120px;
margin: ($gutter-site / 2) auto;
@include media-query($small) {
img {
max-height: 120px;
}
}
}
.cart__quantity-label {
display: block;
text-align: center;
}
.cart__cell--quantity {
.js-qty {
max-width: 120px;
margin: 0 auto;
}
}
.cart__quantity {
display: none;
.supports-no-js & {
display: block;
}
}
.cart__item-total {
font-size: 1.2em;
@include media-query($medium-up) {
padding-right: $gutter-site;
}
}
.cart__subtotal {
margin: ($gutter-site * 1.5) 0 0;
@include media-query($medium-up) {
margin-top: $gutter-site;
}
}
.cart__taxes {
margin-bottom: $gutter-site * 2;
}
.cart__note {
width: 100%;
background-color: $color-content;
border: 1px solid $color-border-body-darken;
@include media-query($small) {
min-height: 50px;
}
}
.cart__buttons .btn {
margin-bottom: $gutter-site / 2;
@include media-query($small) {
display: block;
width: 100%;
}
}
.update-cart {
display: none;
.supports-no-js & {
display: inline-block;
}
}
/*================ Quantity selector ================*/
.js-qty {
position: relative;
}
.js-qty--is-loading {
opacity: 0.6;
}
.js-qty__input {
width: 100%;
padding-left: $width-qty-btn;
padding-right: $width-qty-btn;
text-align: center;
}
.js-qty__adjust {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
width: $width-qty-btn;
padding: 0;
background: none;
border-style: solid;
border-color: adaptive-color($color-form, 5%);
border-width: 0;
transition: background-color 0.03s ease-in;
&:hover,
&:focus {
background-color: adaptive-color($color-form, 5%);
transition-duration: 0.08s;
}
.icon {
width: 8px;
height: 8px;
fill: currentColor;
}
}
.js-qty__adjust--minus {
left: 0;
border-right-width: 1px;
}
.js-qty__adjust--plus {
right: 0;
border-left-width: 1px;
}
/*================ Notification bar ================*/
.notification {
visibility: hidden;
position: absolute;
width: 100%;
top: 0;
opacity: 0;
transition: top 0.25s, visibility 0.25s, opacity 0.15s;
transition-timing-function: cubic-bezier(0.33, 0.59, 0.14, 1);
z-index: $z-index-notification;
}
.notification--promo {
position: static;
display: none;
}
.notification--active {
display: block;
visibility: visible;
top: 100%;
opacity: 1;
}
.notification__link {
display: block;
padding: ($gutter-site / 2) 0;
&:hover u {
text-decoration: none;
}
}
.notification__inner {
position: relative;
overflow: visible;
padding: ($gutter-site / 2) 0;
}
.notification__inner--has-link {
padding: 0;
}
.notification__message {
display: block;
padding: 0 ($gutter-site * 3);
text-align: center;
font-weight: $font-weight-bold;
span {
text-decoration: underline;
white-space: nowrap;
}
}
.notification--success,
.notification--promo {
background-color: $color-accent;
color: $color-accent-text;
a {
color: $color-accent-text;
}
}
.notification--error {
background-color: $color-error-bg;
color: $color-error-input-text;
a {
color: $color-error-input-text;
}
}
.notification__close {
position: absolute;
top: 0;
bottom: 0;
right: $gutter-site;
padding: 0 ($gutter-site / 2);
color: inherit;
.icon {
fill: currentColor;
}
}
/*================ Modals ================*/
.modal {
display: none;
opacity: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-body;
color: $color-body-text;
z-index: $z-index-modal;
transition: all ease-in-out 0.2s;
&.modal--is-active {
display: block;
opacity: 1;
}
}
body.modal--is-active {
overflow: hidden;
}
.modal__inner {
height: 100%;
@include transform(translateY(-20px));
@include prefix(transform-style, preserve-3d, moz webkit spec);
transition: all ease-in-out 0.2s;
.modal--is-active & {
@include transform(translateY(0));
}
}
.modal__centered {
position: relative;
top: 50%;
@include transform(translateY(-50%));
.supports-no-csstransforms {
top: 20%;
}
}
.modal__close {
position: absolute;
top: 0;
right: 0;
padding: $gutter-site;
.icon {
font-size: em(20);
}
}
/*================ Featured collection card ================*/
.featured-card {
display: block;
position: relative;
height: 380px;
text-align: center;
border-color: $color-border;
border-style: solid;
border-width: 0 0 1px 1px;
background-color: $color-content;
&:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.06);
opacity: 0;
transition: $collection-bard-transition;
z-index: 1;
}
&:hover:before {
opacity: 1;
}
}
.featured-card--cover {
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
border-width: 0;
}
.featured-card__image-wrapper {
position: absolute;
bottom: 30px;
left: 0;
right: 0;
height: 62%;
}
.featured-card__image {
display: block;
margin: 0 auto;
max-height: 100%;
}
.featured-card__header {
position: relative;
display: inline-block;
padding: 30px 5% 10px;
background-color: $color-featured-collection-bg;
z-index: 1;
}
.featured-card__title {
font-size: em(28);
margin-bottom: 0;
color: $color-featured-collection-text;
}
.featured-card__action {
@include nav-text-style();
font-size: em(13);
color: $color-featured-collection-link;
.featured-card:hover & {
color: inherit;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment