Issues with Gift Card Redemption page..

Shopify Partner
11 0 0

Hi Everyone, 

 

Really hoping someone can help me pinpoint why I am experienceing this issue (thank you in advance):

https://checkout.shopify.com/gift_cards/15972075/57c469f009aba8ab3e053c0fe7b50425

 

{% layout none %}
{% assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency %}
{% assign formatted_initial_value_stripped = formatted_initial_value | strip_html %}
<!doctype html>
<!--[if lt IE 7]><html class="template-giftcard no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="template-giftcard no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="template-giftcard no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie9 template-giftcard no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="template-giftcard no-js"> <!--<![endif]-->
<head>

  <!-- Basic page needs ================================================== -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  {% if settings.favicon_enable %}
  <link rel="shortcut icon" href="{{ 'favicon.png' | asset_url }}" type="image/png" />
  {% endif %}

  <!-- Title and description ================================================== -->
  <title>{{ 'gift_cards.issued.title' | t: value: formatted_initial_value_stripped, shop: shop.name }}</title>
  <meta name="description" content="{{ 'gift_cards.issued.subtext' | t }}">

  <!-- Helpers ================================================== -->
  <link rel="canonical" href="{{ canonical_url }}">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="format-detection" content="telephone=no">

  {{ 'timber.scss.css' | asset_url | stylesheet_tag }}
  {{ 'gift-card.scss.css' | asset_url | stylesheet_tag }}
  {{ 'modernizr.gift-card.js' | shopify_asset_url | script_tag }}
  {{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }}

</head>

<body>

  <div class="wrapper">

    <header class="giftcard-header" role="banner">
      <div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
        {% if settings.logo_use_image %}
          <a href="/" itemprop="url">
            <img src="{{ 'logo.png' | asset_url }}" alt="{{ shop.name }}" itemprop="logo">
          </a>
        {% else %}
          <a href="/" itemprop="url">{{ shop.name }}</a>
        {% endif %}
      </div>
      <div class="shop-url">{{ shop.url }}</div>
    </header>

    <main class="giftcard" role="main">
      <div class="giftcard__border{% if gift_card.expired or gift_card.enabled != true %} disabled{% endif %}">
        <div class="giftcard__content">

          <div class="giftcard__header">
            <h2 class="h4 giftcard__title">{{ 'gift_cards.issued.subtext' | t }}</h2>
            {% unless gift_card.enabled %}
              <span class="giftcard__tag">{{ 'gift_cards.issued.disabled' | t }}</span>
            {% endunless %}
            {% assign gift_card_expiry_date = gift_card.expires_on | date: "%d/%m/%y" %}
            {% if gift_card.expired and gift_card.enabled %}
               <span class="giftcard__tag">{{ 'gift_cards.issued.expired' | t: expiry: gift_card_expiry_date }}</span>
            {% endif %}
            {% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
              <span class="giftcard__tag giftcard__tag--active">{{ 'gift_cards.issued.active' | t: expiry: gift_card_expiry_date }}</span>
            {% endif %}
          </div>

          <div class="giftcard__wrap">
            <img src="{{ 'gift-card/card.jpg' | shopify_asset_url }}" alt="Gift card illustration">

            {% assign initial_value_size = formatted_initial_value | size %}
            <div class="h1 giftcard__amount{% if initial_value_size > 6 %} giftcard__amount--medium{% endif %}">
              {% if gift_card.balance != gift_card.initial_value %}
                <span class="tooltip">
                  <span class="tooltip__label">{{ gift_card.balance | money }} <small>left</small></span>
                </span>
              {% endif %}
              <strong>{{ formatted_initial_value }}</strong>
            </div>

            {% assign code_size = gift_card.code | format_code | size %}
            <div class="giftcard__code{% if code_size <= 25 %} giftcard__code--large{% elsif code_size > 25 and code_size <= 30 %} giftcard__code--medium{% else %} giftcard__code--small{% endif %}" onclick="selectText('GiftCardDigits');">
              <div class="giftcard__code__inner">
                <strong class="giftcard__code__text" id="GiftCardDigits">{{ gift_card.code | format_code }}</strong>
              </div>
            </div>
          </div>

          <p class="giftcard__instructions">
            {{ 'gift_cards.issued.redeem' | t }}
          </p>
          <div id="qr-code"></div>
          <script>
            new QRCode(document.getElementById("qr-code"), {
              text: "{{ gift_card.qr_identifier }}",
              width: 120,
              height: 120
            });
          </script>

          <div class="giftcard__actions">
            <a href="{{ shop.url }}" class="btn" target="_blank">{{ 'gift_cards.issued.shop_link' | t }}</a>
            <a href="#" class="action-link" onclick="window.print();">
              <i class="action-link__print"></i>{{ 'gift_cards.issued.print' | t }}
            </a>
          </div>

        </div>
      </div>
    </main>

    <footer class="giftcard__footer" role="contentinfo">
      {% if gift_card.pass_url %}
        <a class="add-to-apple-wallet" href="{{ gift_card.pass_url }}">
          <img src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}">
        </a>
      {% endif %}
    </footer>

  </div>
<br><br>
  <script type="text/javascript">
    /*============================================================================
      Auto-select gift card code on click, based on ID passed to the function
        - Use a different method depending on IE or others
    ==============================================================================*/
    function selectText(element) {
      var doc = document,
          text = doc.getElementById(element);

      if (doc.body.createTextRange) { // ms
        var range = doc.body.createTextRange();
        range.moveToElementText(text);
        range.select();
      } else if (window.getSelection) { // moz, opera, webkit
        var selection = window.getSelection(),
            range = doc.createRange();
        range.selectNodeContents(text);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  </script>

</body>
</html>

 

0 Likes
Shopify Expert
2656 61 651

Hi,

The problem is that your SCSS comes through uncompiled. Where are you timber.scss.* and gift-card.scss.* are located and how exactly are they called?

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Partner
11 0 0

Tim, 

Thanks so much for your response!

timber.scss.css located in assets

gift-card.scss.css located in assets as well

Should something be changed here?

Thanks again!

0 Likes
Shopify Expert
2656 61 651

The files should be called .scss.liquid, otherwise they would not be compiled.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Partner
11 0 0

Thanks Tim, I recompiled them as scss.liquid, and now it looks even worse? :(

https://checkout.shopify.com/gift_cards/15972075/57c469f009aba8ab3e053c0fe7b50425

0 Likes
Shopify Expert
2656 61 651

You should not recompile them, just rename, the system will compile them for you. Currently, your files come out empy, which meant there are errors in them.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Partner
11 0 0

Tim, really appreciate your time!

I'm so confused.. ok: file #1 timber.scss.liquid - in assets

/*============================================================================
  Shopify Timber
  Copyright 2016 Shopify Inc.
  Author Carson Shold @cshold
  Built with Sass - http://sass-lang.com/

  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 @imports in this file
        * Use grunt or gulp tasks to enable @imports - https://github.com/Shopify/shopify-css-import
    - Helpers variables, mixins, and starter classes are provided. Change as needed.
    - The file is prepped with a CSS reset
    - The font icons are prepared using https://icomoon.io/app
==============================================================================*/

/*============================================================================
  Table of Contents

  #Breakpoint and Grid Variables
  #General Variables
  #Sass Mixins
  #Normalize
  #Grid Setup
  #Basic Styles
  #Helper Classes
  #Typography
  #Rich Text Editor
  #Links and Buttons
  #Lists
  #Tables
  #Reponsive Tables
  #OOCSS Media Object
  #Images and Iframes
  #Forms
  #Icons
  #Pagination
  #Site Header
  #Site Nav and Dropdowns
  #Mobile Nav
  #Drawers
  #Site Footer
  #Product and Collection Grids
  #Collection Filters
  #Breadcrumbs
  #Product Page
  #Notes and Form Feedback
  #Cart Page
  #Ajax Cart Styles
==============================================================================*/

/*============================================================================
  #Breakpoint and Grid Variables
==============================================================================*/
$viewportIncrement: 1px;

$small: 480px;
$medium: 768px;
$large: 769px;

$postSmall: $small + $viewportIncrement;
$preMedium: $medium - $viewportIncrement;
$preLarge: $large - $viewportIncrement;

/*================ The following are dependencies of csswizardry grid ================*/
$breakpoints: (
  'small' '(max-width: #{$small})',
  'medium' '(min-width: #{$postSmall}) and (max-width: #{$medium})',
  'medium-down' '(max-width: #{$medium})',
  'large' '(min-width: #{$large})'
);
$breakpoint-has-widths: ('small', 'medium', 'medium-down', 'large');
$breakpoint-has-push:  ('medium', 'medium-down', 'large');
$breakpoint-has-pull:  ('medium', 'medium-down', 'large');

/*============================================================================
  #General Variables
==============================================================================*/

// Timber Colors
$colorPrimary: {{ settings.color_primary }};
$colorSecondary: {{ settings.color_secondary }};

// Button colors
$colorBtnPrimary: $colorPrimary;
$colorBtnPrimaryHover: darken($colorBtnPrimary, 10%);
$colorBtnPrimaryActive: darken($colorBtnPrimaryHover, 10%);
$colorBtnPrimaryText: #fff;

$colorBtnSecondary: $colorSecondary;
$colorBtnSecondaryHover: darken($colorBtnSecondary, 10%);
$colorBtnSecondaryActive: darken($colorBtnSecondaryHover, 10%);
$colorBtnSecondaryText: #fff;

// Text link colors
$colorLink: $colorPrimary;
$colorLinkHover: lighten($colorPrimary, 15%);

// Text colors
$colorTextBody: {{ settings.color_body_text }};

// Backgrounds
$colorBody: {{ settings.color_body_bg }};

// Border colors
$colorBorder: {{ settings.color_borders }};

// Nav and dropdown link background
$colorNav: #f2f2f2;
$colorNavText: #333;

// Site Footer
$colorFooterBg: {{ settings.color_footer_bg }};
$colorFooterText: {{ settings.color_footer_text }};

// Logo max width
$logoMaxWidth: {{ settings.logo_max_width | default: '450' | remove: 'px' }}px;

// Helper colors
$disabledGrey: #f6f6f6;
$disabledBorder: darken($disabledGrey, 25%);
$errorRed: #d02e2e;
$errorRedBg: #fff6f6;
$successGreen: #56ad6a;
$successGreenBg: #ecfef0;

// Drawers
$drawerNavWidth: 300px;
$drawerCartWidth: 300px;
$colorDrawers: #f6f6f6;
$colorDrawerBorder: darken($colorDrawers, 5%);
$colorDrawerText: #333;
$drawerTransition: all 0.4s cubic-bezier(0.46, 0.01, 0.32, 1);

// Sizing variables
$siteWidth: 1180px;
$gutter: 30px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$radius: 3px;

// Z-index
$zindexNavDropdowns: 5;
$zindexDrawer: 10;

/*================ Typography ================*/

$headerFontStack: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$headerFontWeight: 700;

$bodyFontStack: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$baseFontSize: 14px; // Henceforth known as 1em

@font-face {
  font-family: 'icons';
  src: url('{{ "icons.eot" | asset_url }}');
  src: url('{{ "icons.eot" | asset_url }}#iefix') format("embedded-opentype"),
       url('{{ "icons.woff" | asset_url }}') format("woff"),
       url('{{ "icons.ttf" | asset_url }}') format("truetype"),
       url('{{ "icons.svg" | asset_url }}#timber-icons') format("svg");
  font-weight: normal;
  font-style: normal;
}
$socialIconFontStack: 'icons';


/*============================================================================
  #Sass Mixins
==============================================================================*/
.clearfix {
  &:after {
    content: '';
    display: table;
    clear: both; }
  *zoom: 1;
}

@mixin clearfix() {
  &:after {
    content: '';
    display: table;
    clear: both; }
  *zoom: 1;
}

/*============================================================================
  Prefixer mixin for generating vendor prefixes:
    - Based on https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss
    - Usage:

      // Input:
      .element {
        @include prefixer(transform, scale(1), ms webkit spec);
      }

      // Output:
      .element {
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
      }
==============================================================================*/

@mixin prefixer($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 transform($transform) {
  @include prefixer(transform, $transform, ms webkit spec);
}

@mixin user-select($value: none) {
  @include prefixer(user-select, $value, webkit moz ms spec);
}

@mixin backface($visibility: hidden) {
  @include prefixer(backface-visibility, $visibility, webkit spec);
}

@function em($target, $context: $baseFontSize) {
  @if $target == 0 {
    @return 0;
  }
  @return $target / $context + 0em;
}

@function color-control($color) {
  @if (lightness( $color ) > 40) {
    @return #000;
  }
  @else {
    @return #fff;
  }
}

/*============================================================================
  Layer promotion mixin for creating smoother animations with higher FPS.
==============================================================================*/
@mixin promote-layer($properties: transform) {
  -webkit-transform: translateZ(0); // translateZ hack
  will-change: $properties; // spec
}

/*============================================================================
  Dependency-free breakpoint mixin
    - Based on http://blog.grayghostvisuals.com/sass/sass-media-query-mixin/
    - Usage docs: http://shopify.github.io/Timber/#sass-mixins
==============================================================================*/
$min: min-width;
$max: max-width;
@mixin at-query ($constraint_, $viewport1_, $viewport2_:null) {
 $constraint: $constraint_; $viewport1: $viewport1_; $viewport2: $viewport2_;
  @if type-of($constraint_) == number {
    $viewport1 : $constraint_; $viewport2 : $viewport1_; $constraint : null;
  }
  @if $constraint == $min {
    @media screen and ($min: $viewport1) {
      @content;
    }
  } @else if $constraint == $max {
    @media screen and ($max: $viewport1) {
      @content;
    }
  } @else {
    @media screen and ($min: $viewport1) and ($max: $viewport2) {
      @content;
    }
  }
}

/*============================================================================
  #Normalize
==============================================================================*/
*, input, :before, :after {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block;
  vertical-align: baseline;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*============================================================================
  #Grid Setup
    - Based on csswizardry grid, but with floated columns, a fixed gutter size, and BEM classes
    - Breakpoints defined above, under #Breakpoint and Grid Variables
    - Note the inclusion of .grid-uniform to take care of clearfixes on evenly sized grid items
==============================================================================*/
$responsive:         true;
$mobile-first:       true;
$use-silent-classes: false;
$push:               true;
$pull:               false;

/* Force clearfix on grids */
.grid,
.grid-uniform {
  @include clearfix;
}

/* Manual grid__item clearfix */
.grid__item.clear {
  clear: both;
}

$class-type: unquote(".");

@if $use-silent-classes == true {
  $class-type: unquote("%");
}

@mixin grid-media-query($media-query) {
  $breakpoint-found: false;

  @each $breakpoint in $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";
  }
}


/*============================================================================
  Drop relative positioning into silent classes which can't take advantage of
  the `[class*="push--"]` and `[class*="pull--"]` selectors.
==============================================================================*/
@mixin silent-relative() {
  @if $use-silent-classes == true {
    position:relative;
  }
}

/*============================================================================
  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.
==============================================================================*/
#{$class-type}grid,
#{$class-type}grid-uniform {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: -$gridGutter;
}

#{$class-type}grid__item {
  box-sizing: border-box;
  float: left;
  min-height: 1px;
  padding-left: $gridGutter;
  vertical-align: top;
  @if $mobile-first == true {
    width: 100%;
  }
}

/*============================================================================
  Reversed grids allow you to structure your source in the opposite
  order to how your rendered layout will appear.
==============================================================================*/
#{$class-type}grid--rev {
  @extend #{$class-type}grid;
  direction: rtl;
  text-align: left;

  > #{$class-type}grid__item {
    direction: ltr;
    text-align: left;
    float: right;
  }
}

/* Gutterless grids have all the properties of regular grids, minus any spacing. */
#{$class-type}grid--full {
  @extend #{$class-type}grid;
  margin-left: 0;

  > #{$class-type}grid__item {
    padding-left: 0;
  }
}

/*============================================================================
  WIDTHS
    - Create width classes, prefixed by the specified namespace.
==============================================================================*/
@mixin device-type($namespace:"") {
  /** Whole */
  #{$class-type}#{$namespace}one-whole       { width: 100%; }

  /* Halves */
  #{$class-type}#{$namespace}one-half        { width: 50%; }

  /* Thirds */
  #{$class-type}#{$namespace}one-third       { width: 33.333%; }
  #{$class-type}#{$namespace}two-thirds      { width: 66.666%; }

  /* Quarters */
  #{$class-type}#{$namespace}one-quarter     { width: 25%; }
  #{$class-type}#{$namespace}two-quarters    { width: 50%; }
  #{$class-type}#{$namespace}three-quarters  { width: 75%; }

  /* Fifths */
  #{$class-type}#{$namespace}one-fifth       { width: 20%; }
  #{$class-type}#{$namespace}two-fifths      { width: 40%; }
  #{$class-type}#{$namespace}three-fifths    { width: 60%; }
  #{$class-type}#{$namespace}four-fifths     { width: 80%; }

  /* Sixths */
  #{$class-type}#{$namespace}one-sixth       { width: 16.666%; }
  #{$class-type}#{$namespace}two-sixths      { width: 33.333%; }
  #{$class-type}#{$namespace}three-sixths    { width: 50%; }
  #{$class-type}#{$namespace}four-sixths     { width: 66.666%; }
  #{$class-type}#{$namespace}five-sixths     { width: 83.333%; }

  /* Eighths */
  #{$class-type}#{$namespace}one-eighth      { width: 12.5%; }
  #{$class-type}#{$namespace}two-eighths     { width: 25%; }
  #{$class-type}#{$namespace}three-eighths   { width: 37.5%; }
  #{$class-type}#{$namespace}four-eighths    { width: 50%; }
  #{$class-type}#{$namespace}five-eighths    { width: 62.5%; }
  #{$class-type}#{$namespace}six-eighths     { width: 75%; }
  #{$class-type}#{$namespace}seven-eighths   { width: 87.5%; }

  /* Tenths */
  #{$class-type}#{$namespace}one-tenth       { width: 10%; }
  #{$class-type}#{$namespace}two-tenths      { width: 20%; }
  #{$class-type}#{$namespace}three-tenths    { width: 30%; }
  #{$class-type}#{$namespace}four-tenths     { width: 40%; }
  #{$class-type}#{$namespace}five-tenths     { width: 50%; }
  #{$class-type}#{$namespace}six-tenths      { width: 60%; }
  #{$class-type}#{$namespace}seven-tenths    { width: 70%; }
  #{$class-type}#{$namespace}eight-tenths    { width: 80%; }
  #{$class-type}#{$namespace}nine-tenths     { width: 90%; }

  /* Twelfths */
  #{$class-type}#{$namespace}one-twelfth     { width: 8.333%; }
  #{$class-type}#{$namespace}two-twelfths    { width: 16.666%; }
  #{$class-type}#{$namespace}three-twelfths  { width: 25%; }
  #{$class-type}#{$namespace}four-twelfths   { width: 33.333%; }
  #{$class-type}#{$namespace}five-twelfths   { width: 41.666% }
  #{$class-type}#{$namespace}six-twelfths    { width: 50%; }
  #{$class-type}#{$namespace}seven-twelfths  { width: 58.333%; }
  #{$class-type}#{$namespace}eight-twelfths  { width: 66.666%; }
  #{$class-type}#{$namespace}nine-twelfths   { width: 75%; }
  #{$class-type}#{$namespace}ten-twelfths    { width: 83.333%; }
  #{$class-type}#{$namespace}eleven-twelfths { width: 91.666%; }
}

/*================ Clearfix helper on uniform grids ================*/
@mixin clearfix-helper($namespace:"") {
  .grid-uniform {
    #{$class-type}#{$namespace}one-half:nth-child(2n+1),
    #{$class-type}#{$namespace}one-third:nth-child(3n+1),
    #{$class-type}#{$namespace}one-quarter:nth-child(4n+1),
    #{$class-type}#{$namespace}one-fifth:nth-child(5n+1),
    #{$class-type}#{$namespace}one-sixth:nth-child(6n+1),
    #{$class-type}#{$namespace}two-sixths:nth-child(3n+1),
    #{$class-type}#{$namespace}three-sixths:nth-child(2n+1),
    #{$class-type}#{$namespace}two-eighths:nth-child(4n+1),
    #{$class-type}#{$namespace}four-eighths:nth-child(2n+1),
    #{$class-type}#{$namespace}five-tenths:nth-child(2n+1),
    #{$class-type}#{$namespace}one-twelfth:nth-child(12n+1),
    #{$class-type}#{$namespace}two-twelfths:nth-child(6n+1),
    #{$class-type}#{$namespace}three-twelfths:nth-child(4n+1),
    #{$class-type}#{$namespace}four-twelfths:nth-child(3n+1),
    #{$class-type}#{$namespace}six-twelfths:nth-child(2n+1)    { clear: both; }
  }
}

/*================ Helper show/hide classes around our breakpoints ================*/
@mixin device-helper($namespace:"") {
  #{$class-type}#{$namespace}show        { display: block!important; }
  #{$class-type}#{$namespace}hide        { display: none!important; }

  #{$class-type}#{$namespace}text-left   { text-align: left!important; }
  #{$class-type}#{$namespace}text-right  { text-align: right!important; }
  #{$class-type}#{$namespace}text-center { text-align: center!important; }

  #{$class-type}#{$namespace}left        { float: left!important; }
  #{$class-type}#{$namespace}right       { float: right!important; }
}

/*================ Our regular, non-responsive width and helper classes ================*/
@include device-type();
@include device-helper();

/*================ Our responsive classes, if we have enabled them ================*/
@if $responsive == true {
  @each $name in $breakpoint-has-widths {
    @include grid-media-query($name) {
      @include device-type('#{$name}--');
      @include device-helper('#{$name}--');
      @include clearfix-helper('#{$name}--');
    }
  }
}

/*============================================================================
  PUSH
    - Push classes, to move grid items over to the right by certain amounts
==============================================================================*/
@mixin push-setup($namespace: "") {
  /* Whole */
  #{$class-type}push--#{$namespace}one-whole       { left: 100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}push--#{$namespace}one-half        { left: 50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}push--#{$namespace}one-third       { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-thirds      { left: 66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}push--#{$namespace}one-quarter     { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-quarters    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-quarters  { left: 75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}push--#{$namespace}one-fifth       { left: 20%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-fifths      { left: 40%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-fifths    { left: 60%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-fifths     { left: 80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}push--#{$namespace}one-sixth       { left: 16.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-sixths      { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-sixths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-sixths     { left: 66.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-sixths     { left: 83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}push--#{$namespace}one-eighth      { left: 12.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-eighths     { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-eighths   { left: 37.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-eighths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-eighths    { left: 62.5%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-eighths     { left: 75%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-eighths   { left: 87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}push--#{$namespace}one-tenth       { left: 10%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-tenths      { left: 20%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}three-tenths    { left: 30%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-tenths     { left: 40%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-tenths     { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-tenths      { left: 60%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-tenths    { left: 70%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eight-tenths    { left: 80%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}nine-tenths     { left: 90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}push--#{$namespace}one-twelfth     { left: 8.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}two-twelfths    { left: 16.666%; @include silent-relative();  }
  #{$class-type}push--#{$namespace}three-twelfths  { left: 25%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}four-twelfths   { left: 33.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}five-twelfths   { left: 41.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}six-twelfths    { left: 50%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}seven-twelfths  { left: 58.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eight-twelfths  { left: 66.666%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}nine-twelfths   { left: 75%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}ten-twelfths    { left: 83.333%; @include silent-relative(); }
  #{$class-type}push--#{$namespace}eleven-twelfths { left: 91.666%; @include silent-relative(); }
}

@if $push == true {
  [class*="push--"]{ position:relative; }

  @include push-setup();

  @if $responsive == true {
    @each $name in $breakpoint-has-push {
      @include grid-media-query($name) {
        @include push-setup('#{$name}--');
      }
    }
  }
}

/*============================================================================
  PULL
    - Pull classes, to move grid items back to the left by certain amounts
==============================================================================*/
@mixin pull-setup($namespace: "") {
  /* Whole */
  #{$class-type}pull--#{$namespace}one-whole       { right: 100%; @include silent-relative(); }

  /* Halves */
  #{$class-type}pull--#{$namespace}one-half        { right: 50%; @include silent-relative(); }

  /* Thirds */
  #{$class-type}pull--#{$namespace}one-third       { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-thirds      { right: 66.666%; @include silent-relative(); }

  /* Quarters */
  #{$class-type}pull--#{$namespace}one-quarter     { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-quarters    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-quarters  { right: 75%; @include silent-relative(); }

  /* Fifths */
  #{$class-type}pull--#{$namespace}one-fifth       { right: 20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-fifths      { right: 40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-fifths    { right: 60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-fifths     { right: 80%; @include silent-relative(); }

  /* Sixths */
  #{$class-type}pull--#{$namespace}one-sixth       { right: 16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-sixths      { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-sixths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-sixths     { right: 66.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-sixths     { right: 83.333%; @include silent-relative(); }

  /* Eighths */
  #{$class-type}pull--#{$namespace}one-eighth      { right: 12.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-eighths     { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-eighths   { right: 37.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-eighths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-eighths    { right: 62.5%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-eighths     { right: 75%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-eighths   { right: 87.5%; @include silent-relative(); }

  /* Tenths */
  #{$class-type}pull--#{$namespace}one-tenth       { right: 10%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-tenths      { right: 20%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-tenths    { right: 30%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-tenths     { right: 40%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-tenths     { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-tenths      { right: 60%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-tenths    { right: 70%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-tenths    { right: 80%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}nine-tenths     { right: 90%; @include silent-relative(); }

  /* Twelfths */
  #{$class-type}pull--#{$namespace}one-twelfth     { right: 8.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}two-twelfths    { right: 16.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}three-twelfths  { right: 25%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}four-twelfths   { right: 33.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}five-twelfths   { right: 41.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}six-twelfths    { right: 50%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}seven-twelfths  { right: 58.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eight-twelfths  { right: 66.666%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}nine-twelfths   { right: 75%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}ten-twelfths    { right: 83.333%; @include silent-relative(); }
  #{$class-type}pull--#{$namespace}eleven-twelfths { right: 91.666%; @include silent-relative(); }
}

@if $pull == true {
  [class*="pull--"]{ position:relative; }

  @include pull-setup();

  @if $responsive == true {
    @each $name in $breakpoint-has-pull {
      @include grid-media-query($name) {
        @include pull-setup('#{$name}--');
      }
    }
  }
}

/*============================================================================
  #Basic Styles
==============================================================================*/
html {
  background-color: $colorFooterBg;
}

body {
  background-color: $colorBody;
}

[tabindex='-1']:focus {
  outline: none;
}

.wrapper {
  @include clearfix();
  max-width: $siteWidth;
  margin: 0 auto;
  padding: 0 ($gutter / 2);

  @include at-query ($min, $small) {
    padding: 0 $gutter;
  }
}

.main-content {
  display: block;
  margin-top: $gutter;
  padding-bottom: $gutter * 2;
}

/*============================================================================
  #Helper Classes
==============================================================================*/
.is-transitioning {
  display: block !important;
  visibility: visible !important;
}

.display-table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.display-table-cell {
  display: table-cell;
  vertical-align: middle;
  float: none;
}

@include at-query ($min, $large) {
  .large--display-table {
    display: table;
    table-layout: fixed;
    width: 100%;
  }

  .large--display-table-cell {
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

/*============================================================================
  #Typography
==============================================================================*/
body,
input,
textarea,
button,
select {
  font-size: $baseFontSize;
  line-height: 1.6;
  font-family: $bodyFontStack;
  color: $colorTextBody;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  display: block;
  font-family: $headerFontStack;
  font-weight: $headerFontWeight;
  margin: 0 0 0.5em;
  line-height: 1.4;

  a {
    text-decoration: none;
    font-weight: inherit;
  }
}

/*================ Use em() Sass function to declare font-size ================*/
h1 {
  font-size: em(36px);
}

h2 {
  font-size: em(28px);
}

h3 {
  font-size: em(22px);
}

h4 {
  font-size: em(20px);
}

h5 {
  font-size: em(16px);
}

h6 {
  font-size: em(14px);
}


.h1 { @extend h1; }
.h2 { @extend h2; }
.h3 { @extend h3; }
.h4 { @extend h4; }
.h5 { @extend h5; }
.h6 { @extend h6; }

p {
  margin: 0 0 ($gutter / 2) 0;

  img {
    margin: 0;
  }
}

em {
  font-style: italic;
}

b, strong {
  font-weight: bold;
}

small {
  font-size: 0.9em;
}

sup, sub {
  position: relative;
  font-size: 60%;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}

sub {
  bottom: -0.5em;
}

/*================ Blockquotes ================*/
blockquote {
  font-size: 1.125em;
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 $gutter;
  padding: ($gutter / 2) $gutter;
  border-left: 1px solid $colorBorder;

  p {
    margin-bottom: 0;

    & + cite {
      margin-top: $gutter / 2;
    }
  }

  cite {
    display: block;
    font-size: 0.75em;

    &:before {
      content: '\2014 \0020';
    }
  }
}

/*================ Code ================*/
code, pre {
  background-color: #faf7f5;
  font-family: Consolas,monospace;
  font-size: 1em;
  border: 0 none;
  padding: 0 2px;
  color: #51ab62;
}

pre {
  overflow: auto;
  padding: $gutter / 2;
  margin: 0 0 $gutter;
}

/*================ Horizontal Rules ================*/
hr {
  clear: both;
  border-top: solid $colorBorder;
  border-width: 1px 0 0;
  margin: $gutter 0;
  height: 0;

  &.hr--small {
    margin: ($gutter / 2) 0;
  }

  &.hr--clear {
    border-top-color: transparent;
  }
}

/*================ Section Headers ================*/
.section-header {
  margin-bottom: $gutter / 1.5;
}

@include at-query ($min, $large) {
  .section-header {
    display: table;
    width: 100%;
  }

  .section-header__title {
    margin-bottom: $gutter / 2.5;
  }

  .section-header__left {
    display: table-cell;
    vertical-align: middle;
    margin-bottom: 0;

    h1, h2, h3, h4,
    .h1, .h2, .h3, .h4 {
      margin-bottom: 0;
    }
  }

  .section-header__right {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 335px;

    @include at-query ($max, $medium) {
      margin-bottom: $gutter;
    }
  }
}

.section-header__right {
  .form-horizontal,
  .collection-view {
    display: inline-block;
    vertical-align: middle;
  }

  @include at-query ($min, $postSmall) {
    label + select,
    .collection-view {
      margin-left: $gutter / 2;
    }
  }
}

.collection-view {
  display: inline-block;
  border: 1px solid $colorBorder;
  border-radius: $radius;
  padding: 0 5px;
  height: 37px; // same as form elements
  overflow: hidden;

  /*================ Only show on larger screens ================*/
  @include at-query ($min, $large) {
    display: inline-block;
  }
}

.change-view {
  display: block;
  background: none;
  border: 0 none;
  float: left;
  padding: 10px 8px;
  color: $colorBorder;
  line-height: 1;

  &:hover,
  &:focus {
    color: $colorPrimary;
  }
}

.change-view--active {
  cursor: default;
  color: $colorPrimary;
}

/*============================================================================
  #Rich Text Editor
==============================================================================*/
.rte {
  margin-bottom: $gutter / 2;

  a {
    text-decoration: underline;
  }

  // Add some top margin to headers from the rich text editor
  h1, h2, h3, h4, h5, h6 {
    margin-top: 2em;

    &:first-child {
      margin-top: 0;
    }

    a {
      text-decoration: none;
    }
  }

  > div {
    margin-bottom: $gutter / 2;
  }

  li {
    margin-bottom: 0.4em;
  }
}

.rte--header {
  margin-bottom: 0;
}

/*============================================================================
  #Links and Buttons
==============================================================================*/
a,
.text-link {
  color: $colorLink;
  text-decoration: none;
  background: transparent;
}

a:hover,
a:focus {
  color: $colorLinkHover;
}

button {
  overflow: visible;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

.btn,
.rte .btn {
  display: inline-block;
  padding: 8px 10px;
  width: auto;
  margin: 0;
  line-height: 1.42;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  @include user-select(none);
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: $radius;

  /*================ Set primary button colors - can override later ================*/
  background-color: $colorBtnPrimary;
  color: $colorBtnPrimaryText;

  &:hover {
    background-color: $colorBtnPrimaryHover;
    color: $colorBtnPrimaryText;
  }

  &:active,
  &:focus {
   background-color: $colorBtnPrimaryActive;
   color: $colorBtnPrimaryText;
  }

  &[disabled],
  &.disabled {
    cursor: default;
    color: $disabledBorder;
    background-color: $disabledGrey;
  }
}

.btn--secondary,
.rte .btn--secondary {
  @extend .btn;
  background-color: $colorBtnSecondary;

  &:hover {
    background-color: $colorBtnSecondaryHover;
    color: $colorBtnSecondaryText;
  }

  &:active,
  &:focus {
   background-color: $colorBtnSecondaryActive;
   color: $colorBtnSecondaryText;
  }
}

.btn--small {
  padding: 4px 5px;
  font-size: em(12px);
}

.btn--large {
  padding: 12px 15px;
  font-size: em(16px);
}

.btn--full {
  width: 100%;
}

/*================ Force an input/button to look like a text link ================*/
.text-link {
  display: inline;
  border: 0 none;
  background: none;
  padding: 0;
  margin: 0;
}

/*============================================================================
  #Lists
==============================================================================*/
ul, ol {
  margin: 0 0 ($gutter / 2) 20px;
  padding: 0;
}

ol { list-style: decimal; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 20px; }
li { margin-bottom: 0.25em; }

ul.square { list-style: square outside; }
ul.disc { list-style: disc outside; }
ol.alpha { list-style: lower-alpha outside; }

.no-bullets {
  list-style: none outside;
  margin-left: 0;
}

.inline-list {
  margin-left: 0;

  li {
    display: inline-block;
    margin-bottom: 0;
  }
}

/*============================================================================
  #Tables
==============================================================================*/
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

table.full {
  width: 100%;
  margin-bottom: 1em;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

th {
  font-weight: bold;
}

th, td {
  text-align: left;
  padding: $gutter / 2;
  border: 1px solid $colorBorder;
}

/*============================================================================
  Responsive tables, defined with .table--responsive on table element.
  Only defined for IE9+
==============================================================================*/
.table--responsive {
  @include at-query($max, $small) {
    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: 15px;
    }

    td:before {
      content: attr(data-label);
      float: left;
      text-align: center;
      font-size: 12px;
      padding-right: 10px;
    }

    &.cart-table {
      img {
        margin: 0 auto;
      }

      .js-qty {
        float: right;
      }
    }
  }
}

@include at-query($max, $small) {
  .table--small-hide {
    display: none !important;
  }

  .table__section + .table__section {
    position: relative;
    margin-top: 10px;
    padding-top: 15px;

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 15px;
      right: 15px;
      border-bottom: 1px solid $colorBorder;
    }
  }
}


/*============================================================================
  #OOCSS Media Object
    - http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
==============================================================================*/
.media,
.media-flex {
  overflow: hidden;
  _overflow: visible;
  zoom: 1;
}

.media-img {
  float: left;
  margin-right: $gutter;
}

.media-img-right {
  float: right;
  margin-left: $gutter;
}

.media-img img,
.media-img-right img {
  display: block;
}


/*============================================================================
  #Images and Iframes
==============================================================================*/
img {
  border: 0 none;
}

svg:not(:root) {
  overflow: hidden;
}

img,
iframe {
  max-width: 100%;
}

.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
==============================================================================*/
form {
  margin-bottom: 0;
}

.form-vertical {
  margin-bottom: $gutter / 2;
}

/*================ Prevent zoom on touch devices in active inputs ================*/
@include at-query($max, $medium) {
  input,
  textarea {
    font-size: 16px;
  }
}

input,
textarea,
button,
select {
  padding: 0;
  margin: 0;
  @include user-select(text);
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

button,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
}

button {
  background: none;
  border: none;
  display: inline-block;
  cursor: pointer;
}

input[type="image"] {
  padding-left: 0;
  padding-right: 0;
}

fieldset {
  border: 1px solid $colorBorder;
  padding: $gutter / 2;
}

legend {
  border: 0;
  padding: 0;
}

button,
input[type="submit"] {
  cursor: pointer;
}

input,
textarea,
select {
  border: 1px solid $colorBorder;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: $radius;

  &:focus {
    border: 1px solid darken($colorBorder, 10%);
  }

  &[disabled],
  &.disabled {
    cursor: default;
    background-color: $disabledGrey;
    border-color: $disabledBorder;
  }

  &.input-full {
    width: 100%;
  }
}

textarea {
  min-height: 100px;
}

/*================ Input element overrides ================*/
input[type="checkbox"],
input[type="radio"] {
  display: inline;
  margin: 0 8px 0 0;
  padding: 0;
  width: auto;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
}

input[type="image"] {
  padding-left: 0;
  padding-right: 0;
}

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  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 and below ================*/
  .ie9 &,
  .lt-ie9 & {
    padding-right: 10px;
    background-image: none;
  }
}

optgroup {
  font-weight: bold;
}

// Force option color (affects IE only)
option {
  color: #000;
  background-color: #fff;
}

select::-ms-expand {
  display: none;
}

/*================ Form labels ================*/
.hidden-label {
  position: absolute;
  height: 0;
  width: 0;
  margin-bottom: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);

  // No placeholders, so force show labels
  .ie9 &,
  .lt-ie9 & {
    position: static;
    height: auto;
    width: auto;
    margin-bottom: 2px;
    overflow: visible;
    clip: initial;
  }
}

label[for] {
  cursor: pointer;
}

/*================ Horizontal Form ================*/
.form-vertical {
  input,
  select,
  textarea {
    display: block;
    margin-bottom: 10px;
  }

  input[type="radio"],
  input[type="checkbox"] {
    display: inline-block;
  }
}

/*================ Error styles ================*/
input,
select,
textarea {
  &.error {
    border-color: $errorRed;
    background-color: $errorRedBg;
    color: $errorRed;
  }
}

label.error {
  color: $errorRed;
}


/*================ Input Group ================*/
.input-group {
  position: relative;
  display: table;
  border-collapse: separate;

  .input-group-field:first-child,
  .input-group-btn:first-child,
  .input-group-btn:first-child > .btn,
  input[type="hidden"]:first-child + .input-group-field,
  input[type="hidden"]:first-child + .input-group-btn > .btn {
    border-radius: $radius 0 0 $radius;
  }

  .input-group-field:last-child,
  .input-group-btn:last-child > .btn {
   border-radius: 0 $radius $radius 0;
  }

  input {
    // Nasty Firefox hack for inputs http://davidwalsh.name/firefox-buttons
    &::-moz-focus-inner {
      border: 0;
      padding: 0;
      margin-top: -1px;
      margin-bottom: -1px;
    }
  }
}

.input-group-field,
.input-group-btn {
  display: table-cell;
  vertical-align: middle;
  margin: 0;
}

.input-group .btn,
.input-group .input-group-field {
  height: 37px;
}

.input-group .input-group-field {
  width: 100%;
}

.input-group-btn {
  position: relative;
  white-space: nowrap;
  width: 1%;
  padding: 0;
}

/*============================================================================
  #Icons
==============================================================================*/
.icon-fallback-text .icon {
  display: none;

  .supports-fontface & {
    display: inline-block;
  }
}

/*============================================================================
  A generic way to visually hide content while
  remaining accessible to screen readers (h5bp.com)
==============================================================================*/
.supports-fontface .icon-fallback-text .fallback-text {
  @extend .visually-hidden;
}

.icon:before {
  display: none;
}

.supports-fontface .icon:before {
  display: inline;
  font-family: $socialIconFontStack;
  text-decoration: none;
  speak: none; // future fallback, limited in effect currently
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*================ Icon mapping ================*/
.icon-amazon_payments:before { content: "\e800"; }
.icon-american_express:before { content: "\41"; }
.icon-arrow-down:before { content: "\e607"; }
.icon-bitcoin:before { content: "\42"; }
.icon-cart:before { content: "\e600"; }
.icon-cirrus:before { content: "\43"; }
.icon-dankort:before { content: "\64"; }
.icon-diners_club:before { content: "\63"; }
.icon-discover:before { content: "\44"; }
.icon-dogecoin:before { content: "\e904"; }
.icon-dwolla:before { content: "\e905"; }
.icon-facebook:before { content: "\66"; }
.icon-fancy:before { content: "\46"; }
.icon-forbrugsforeningen:before { content: "\e906"; }
.icon-google-plus:before { content: "\e900"; }
.icon-grid-view:before { content: "\e603"; }
.icon-hamburger:before { content: "\e601"; }
.icon-instagram:before { content: "\e901"; }
.icon-interac:before { content: "\49"; }
.icon-jcb:before { content: "\4a"; }
.icon-list-view:before { content: "\e604"; }
.icon-litecoin:before { content: "\e908"; }
.icon-maestro:before { content: "\6d"; }
.icon-master:before { content: "\4d"; }
.icon-minus:before { content: "\e602"; }
.icon-paypal:before { content: "\50"; }
.icon-pinterest:before { content: "\70"; }
.icon-plus:before { content: "\e605"; }
.icon-rss:before { content: "\72"; }
.icon-search:before { content: "\73"; }
.icon-stripe:before { content: "\53"; }
.icon-tumblr:before { content: "\74"; }
.icon-twitter:before { content: "\54"; }
.icon-vimeo:before { content: "\76"; }
.icon-visa:before { content: "\56"; }
.icon-x:before { content: "\e606"; }
.icon-youtube:before { content: "\79"; }

.payment-icons {
  @include user-select(none);
  cursor: default;

  li {
    margin: 0 ($gutter / 4) ($gutter / 4);
    color: {{ settings.color_footer_social_link }};
    cursor: default;
  }

  .icon {
    font-size: 30px;
    line-height: 30px;
  }

  .fallback-text {
    text-transform: capitalize;
  }
}

.social-icons li {
  margin: 0 ($gutter / 2) ($gutter / 2);
  vertical-align: middle;

  @include at-query ($min, $postSmall) {
    margin-left: 0;
  }

  .icon {
    font-size: 30px;
    line-height: 26px;
  }

  a {
    color: {{ settings.color_footer_social_link }};

    &:hover {
      color: darken({{ settings.color_footer_social_link }}, 10%);
    }
  }
}

/*============================================================================
  #Pagination
==============================================================================*/
.pagination {
  margin-bottom: 1em;
  text-align: center;

  > span {
    display: inline-block;
    line-height: 1;
  }

  a {
    display: block;
  }

  a,
  .page.current {
    padding: 8px;
  }
}

/*============================================================================
  #Site Header
==============================================================================*/
.site-header {
  padding: ($gutter / 2) 0;

  .grid--table {
    display: table;
    table-layout: fixed;
    width: 100%;

    > .grid__item {
      float: none;
      display: table-cell;
      vertical-align: middle;
    }
  }
}

.site-header__logo {
  text-align: center;
  margin: 0 auto;
  max-width: 100%;

  @include at-query ($min, $large) {
    text-align: left;
  }

  a,
  a:hover,
  a:focus {
    text-decoration: none;
  }

  a, img {
    display: block;
  }

  img {
    margin: 0 auto;
  }
}

.site-header__logo-link {
  max-width: $logoMaxWidth;
  margin: 0 auto;
}

.site-header__cart-toggle {
  display: inline-block;
}

.site-header__search {
  display: inline-block;
  max-width: 400px;
  margin-top: $gutter / 2;
  width: 100%;
}

.search-bar {
  max-width: 100%;

  @include at-query ($max, $medium) {
    margin-left: auto;
    margin-right: auto;
  }
}

/*============================================================================
  #Site Nav and Dropdowns
==============================================================================*/
.nav-bar {
  background-color: $colorNav;
}

.site-nav {
  font-size: em(16px);
  cursor: default;
  margin: 0 0 0 (-$gutter / 2);

  li {
    margin: 0;
    display: block;
  }

  > li {
    position: relative;
    display: inline-block;
  }
}

/*================ Home to hamburger and cart that toggle drawers ================*/
.site-nav--mobile {
  @extend .site-nav;

  .text-right & {
    margin: 0 (-$gutter / 2) 0 0;
  }
}

.site-nav__link {
  display: block;
  text-decoration: none;
  padding: $gutter / 2;
  white-space: nowrap;
  color: $colorNavText;

  &:hover,
  &:active,
  &:focus {
    color: darken($colorNavText, 15%);
  }

  .icon-arrow-down {
    position: relative;
    top: -2px;
    font-size: 10px;
    padding-left: $gutter / 4;
  }

  .site-nav--active > & {
    font-weight: bold;
  }

  .site-nav--mobile & {
    display: inline-block;
  }
}

/*================ Dropdowns ================*/
.site-nav__dropdown {
  display: none;
  position: absolute;
  left: 0;
  margin: 0;
  z-index: $zindexNavDropdowns;

  .supports-no-touch .site-nav--has-dropdown:hover &,
  .site-nav--has-dropdown.nav-hover &,
  .nav-focus + & {
    display: block;
  }

  a {
    background-color: $colorNav;

    &:hover,
    &:active,
    &:focus {
      background-color: darken($colorNav, 10%);
    }
  }
}

/*================ Search bar in header ================*/
.nav-search {
  position: relative;
  padding: 10px 0;

  @include at-query ($max, $medium) {
    padding: 0 0 ($gutter / 2);
    margin: 0 auto;
    text-align: center;
  }
}

/*============================================================================
  #Mobile Nav
  - List of items inside the mobile drawer
==============================================================================*/
.mobile-nav {
  // Negative of .drawer left/right padding for full-width link tap area
  margin: (-$gutter / 2) (-$gutter / 2) 0 (-$gutter / 2);

  li {
    margin-bottom: 0;
  }
}

.mobile-nav__search {
  padding: $gutter / 2;

  .search-bar {
    margin-bottom: 0;
  }
}

.mobile-nav__item {
  position: relative;
  display: block;

  // Background color on top level items so there is no
  // element overlap on subnav's CSS toggle animation
  .mobile-nav > & {
    background-color: $colorDrawers;
  }

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: $gutter / 2;
    right: $gutter / 2;
    border-bottom: 1px solid $colorDrawerBorder;
  }

  .mobile-nav > &:last-child:after {
    display: none;
  }
}

// Login/logout links can't have a class on them, so style <a> element
.mobile-nav__item a {
  display: block;
}

.mobile-nav__item a,
.mobile-nav__toggle button {
  color: $colorDrawerText;
  padding: $gutter / 2;
  text-decoration: none;

  &:hover,
  &:active,
  &:focus {
    color: darken($colorDrawerText, 15%);
  }

  &:active,
  &:focus {
    background-color: darken($colorDrawers, 5%);
  }
}

.mobile-nav__item--active {
  font-weight: bold;
}

.mobile-nav__has-sublist {
  display: table;
  width: 100%;

  .mobile-nav__link {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
  }
}

.mobile-nav__toggle {
  display: table-cell;
  vertical-align: middle;
  width: 1%;
}

.mobile-nav__toggle-open {
  .mobile-nav--expanded & {
    display: none;
  }
}

.mobile-nav__toggle-close {
  display: none;

  .mobile-nav--expanded & {
    display: block;
  }
}

.mobile-nav__sublist {
  margin: 0;
  max-height: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 300ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
  @include backface();

  .mobile-nav--expanded + & {
    visibility: visible;
    max-height: 700px;
    transition: all 700ms cubic-bezier(0.57, 0.06, 0.05, 0.95);
  }

  .mobile-nav__item:after {
    top: 0;
    bottom: auto;
  }

  .mobile-nav__link {
    padding-left: $gutter;
    font-weight: normal;
  }
}

/*============================================================================
  #Drawers
==============================================================================*/
.js-drawer-open {
  overflow: hidden;
}

.drawer {
  @include promote-layer();
  display: none;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  top: 0;
  bottom: 0;
  padding: 0 ($gutter / 2) ($gutter / 2);
  max-width: 95%;
  z-index: $zindexDrawer;
  color: $colorDrawerText;
  background-color: $colorDrawers;
  transition: $drawerTransition;

  a {
    color: $colorDrawerText;

    &:hover,
    &:focus {
      opacity: 0.7;
    }
  }

  input,
  textarea {
    border-color: $colorDrawerBorder;
  }
}

.drawer--left {
  width: $drawerNavWidth;
  left: -$drawerNavWidth;
  border-right: 1px solid $colorDrawerBorder;

  .js-drawer-open-left & {
    display: block;
    @include transform(translateX($drawerNavWidth));

    .lt-ie9 & {
      left: 0;
    }
  }
}

.drawer--right {
  width: $drawerCartWidth;
  right: -$drawerCartWidth;
  border-left: 1px solid $colorDrawerBorder;

  .js-drawer-open-right & {
    display: block;
    @include transform(translateX(-$drawerCartWidth));

    .lt-ie9 & {
      right: 0;
    }
  }
}

#PageContainer {
  overflow: hidden;
}

.is-moved-by-drawer {
  @include promote-layer();
  transition: $drawerTransition;

  .js-drawer-open-left & {
    @include transform(translateX($drawerNavWidth));
  }

  .js-drawer-open-right & {
    @include transform(translateX(-$drawerCartWidth));
  }
}

.drawer__header {
  display: table;
  height: 70px;
  width: 100%;
  margin-bottom: $gutter / 2;
  border-bottom: 1px solid $colorDrawerBorder;
}

.drawer__title,
.drawer__close {
  display: table-cell;
  vertical-align: middle;
}

.drawer__title {
  width: 100%;
}

.drawer__close {
  width: 1%;
  text-align: center;
  font-size: em(18px);
}

.drawer__close button {
  position: relative;
  right: -20px;
  height: 100%;
  padding: 0 20px;
  color: inherit;

  &:active,
  &:focus {
    background-color: darken($colorDrawers, 5%);
  }
}

/*============================================================================
  #Site Footer
==============================================================================*/
.site-footer {
  background-color: $colorFooterBg;
  padding: $gutter 0;
  color: $colorFooterText;

  @include at-query ($min, $large) {
    padding: ($gutter * 2) 0;
  }
}

/*============================================================================
  #Product and Collection Grids
==============================================================================*/
.grid__image {
  display: block;
  margin: 0 auto ($gutter / 2);

  img {
    display: block;
    margin: 0 auto;
  }
}

/*============================================================================
  #Collection Filters
==============================================================================*/
.filter--active {
  font-weight: bold;
}

/*============================================================================
  #Breadcrumbs
==============================================================================*/
.breadcrumb {
  margin-bottom: $gutter;

  a,
  span {
    display: inline-block;
    padding: 0 7px 0 0;
    margin-right: 7px;

    &:first-child {
      padding-left: 0;
    }
  }
}


/*============================================================================
  #Product Page
==============================================================================*/
.product-single__variants {
  display: none;

  .no-js & {
    display: block;
  }
}

.product-single__photos {
  margin-bottom: $gutter;
}

.product-single__photos,
.product-single__thumbnails {
  a, img {
    display: block;
    margin: 0 auto;
  }

  li {
    margin-bottom: $gutter;
  }
}


/*============================================================================
  #Notes and Form Feedback
==============================================================================*/
.note,
.errors {
  border-radius: $radius;
  padding: 6px 12px;
  margin-bottom: $gutter / 2;
  border: 1px solid transparent;
  font-size: 0.9em;
  text-align: left;

  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }

  li:last-child {
    margin-bottom: 0;
  }

  p {
    margin-bottom: 0;
  }
}

.note {
  border-color: $colorBorder;
}

.errors {
  ul {
    list-style: disc outside;
    margin-left: 20px;
  }
}

.form-success {
  color: $successGreen;
  background-color: $successGreenBg;
  border-color: $successGreen;

  a {
    color: $successGreen;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}

.form-error,
.errors {
  color: $errorRed;
  background-color: $errorRedBg;
  border-color: $errorRed;

  a {
    color: $errorRed;
    text-decoration: underline;

    &:hover {
      text-decoration: none;
    }
  }
}


/*============================================================================
  #Cart Page
==============================================================================*/
.cart__row {
  position: relative;
  margin-top: $gutter;
  padding-top: $gutter;
  border-top: 1px solid $colorBorder;

  &:first-child {
    margin-top: 0;
  }

  &:first-child {
    padding-top: 0;
  }

  .js-qty {
    margin: 0 auto;
  }
}

.cart-table {
  th {
    font-weight: normal;
  }

  td,
  th {
    padding: 30px 15px;
    border: none;
  }
}

@include at-query ($min, $large) {
  .cart__row--table-large {
    display: table;
    table-layout: fixed;
    width: 100%;

    .grid__item {
      display: table-cell;
      vertical-align: middle;
      float: none;
    }
  }
}

.cart__image {
  display: block;

  img {
    display: block;
    max-width: 100%;
  }
}

.cart__subtotal {
  margin: 0 0 0 ($gutter / 3);
  display: inline;
}

.cart__mini-labels {
  display: block;
  margin: ($gutter / 3) 0;
  font-size: em(12px);

  @include at-query ($min, $large) {
    display: none;
  }
}

.cart__remove {
  display: block;
}

/*============================================================================
  #Ajax Cart Styles (conditionally loaded)
==============================================================================*/
{% if settings.ajax_cart_method == "drawer" %}

.ajaxcart__inner {
  margin-bottom: $gutter;
}

.ajaxcart__row {
  > .grid {
    margin-left: -$gutter / 2;

    > .grid__item {
      padding-left: $gutter / 2;
    }
  }
}

.ajaxcart__product {
  position: relative;
  max-height: 500px;

  &.is-removed {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 450ms cubic-bezier(0.57,.06,.05,.95);
    @include backface();
  }
}

.ajaxcart__row {
  padding-bottom: $gutter / 2;
  margin-bottom: $gutter / 2;
  border-bottom: 1px solid $colorDrawerBorder;
}

.ajaxcart__product-image {
  display: block;
  overflow: hidden;
  margin-bottom: 15px;

  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
}

.ajaxcart__product-name,
.ajaxcart__product-meta {
  display: block;
}

.ajaxcart__product-name + .ajaxcart__product-meta {
  padding-top: $gutter / 5;
}

/*================ Quantity Selectors ================*/
.js-qty {
  position: relative;
  margin-bottom: 1em;
  max-width: 100px;
  min-width: 75px;
  overflow: visible;

  input {
    display: block;
    background: none;
    text-align: center;
    width: 100%;
    padding: 5px 25px;
    margin: 0;
  }
}

.js-qty__adjust {
  cursor: pointer;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  border: 0 none;
  padding: 0 8px;
  background: none;
  text-align: center;
  overflow: hidden;
  @include user-select(none);

  &:hover,
  &:focus {
    color: $colorPrimary;
  }
}

.js-qty__adjust--plus {
  right: 0;
  border-left: 1px solid $colorBorder;
}

.js-qty__adjust--minus {
  left: 0;
  border-right: 1px solid $colorBorder;
}

/*================ Quantity Selectors in Ajax Cart ================*/
.ajaxcart__qty {
  @extend .js-qty;
  margin: 0;

  .is-loading & {
    opacity: 0.5;
    transition: none;
  }
}

.ajaxcart__qty-num {
  border-color: $colorDrawerBorder;
  color: $colorDrawerText;
}

.ajaxcart__qty-adjust {
  @extend .js-qty__adjust;
  color: $colorDrawerText;
}

.ajaxcart__qty--plus {
  @extend .js-qty__adjust--plus;
  border-color: $colorDrawerBorder;
}

.ajaxcart__qty--minus {
  @extend .js-qty__adjust--minus;
  border-color: $colorDrawerBorder;
}

.ajaxcart-item__price-strikethrough {
  float: right;
}

{% endif %} // settings.ajax_cart_method

 

 

0 Likes
Shopify Partner
11 0 0

ok, so, I need to figure out where the errors in those 2 files are? any suggestions how to go about that?

0 Likes
Shopify Expert
2656 61 651

Well, you've probably made some changes to them? Look over your changes, publish them here, if you like (just not the full files, they are huge). Or restore the original ones from the backup (or download the theme again, if you have no backup) and try to recreate you changes step-by step...

Debugging is a hard job :(

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
Shopify Partner
11 0 0

ok, so here's what I did:

- am using a theme, created a gift card, but realized that their gift_card.liquid template was missing the .css.. so noticed the timber and googled it, and downloaded the following codes:

https://github.com/Shopify/Timber/blob/master/assets/gift-card.scss.liquid

https://github.com/Shopify/Timber/blob/163f5760e40c8c2db9fafbff7c18b2d1ded0970f/assets/timber.scss.l...

seems though that something is just not jiving here? had issues with the theme developers and after spending a lot of money fixing things, i don't want to just give up the theme..

0 Likes