spree_frontend 2.0.0.rc1

data/app/assets/stylesheets/store/_variables.scss

@@ -0,0 +1,61 @@
+/*--------------------------------------*/
+/* Colors
+/*--------------------------------------*/
+$c_green:       #8dba53 !default;  /* Spree green    */
+$c_red:         #e45353 !default;  /* Error red      */
+
+$layout_background_color:   #FFFFFF !default;
+$title_text_color:          #404042 !default;
+$body_text_color:           #404042 !default;
+$link_text_color:           #00ADEE !default;
+
+$product_background_color:  #FFFFFF !default;
+$product_title_text_color:  #404042 !default;
+$product_body_text_color:   #404042 !default;
+$product_link_text_color:   #BBBBBB !default;
+
+/*--------------------------------------*/
+/* Fonts import from remote
+/*--------------------------------------*/
+@import url(//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic|&subset=latin,cyrillic,greek,greek-ext,latin-ext,cyrillic-ext);
+
+/*--------------------------------------*/
+/* Font families
+/*--------------------------------------*/
+$ff_base:       'Ubuntu', sans-serif !default;
+
+/*--------------------------------------
+  | Font sizes
+  |--------------------------------------
+  |- Navigation                         
+  |                                    */
+      $header_navigation_font_size:           14px !default;
+      $horizontal_navigation_font_size:       16px !default;
+      $main_navigation_header_font_size:      14px !default;
+      $main_navigation_font_size:             12px !default;
+/*|------------------------------------
+  |- Product Listing                         
+  |                                  */
+      $product_list_name_font_size:           12px !default;
+      $product_list_price_font_size:          16px !default;
+      $product_list_header_font_size:         20px !default;
+      $product_list_search_font_size:         14px !default;
+/*|------------------------------------
+  |- Product Details
+  |                                  */
+      $product_detail_name_font_size:         24px !default;
+      $product_detail_description_font_size:  12px !default;
+      $product_detail_price_font_size:        20px !default;
+      $product_detail_title_font_size:        14px !default;
+/*|------------------------------------
+  |- Basic
+  |                                  */
+      $heading_font_size:                     24px !default;
+      $sub_heading_font_size:                 14px !default;
+      $button_font_size:                      12px !default;
+      $input_box_font_size:                   13px !default;
+      $base_font_size:                        12px !default;
+      $border_color:                          lighten($body_text_color, 60) !default;
+      $default_border:                        1px solid $border_color !default;
+      $button_border_color:                   rgba(0, 138, 189, .75) !default;
+      $table_head_color:                      lighten($body_text_color, 60) !default;

data/app/assets/stylesheets/store/screen.css.scss

@@ -0,0 +1,1272 @@
+@import 'variables';
+
+/*--------------------------------------*/
+/* Basic styles
+/*--------------------------------------*/
+body {
+  font-family: $ff_base;
+  font-size: $base_font_size;
+  font-weight: 400;
+  color: $body_text_color;
+  line-height: 18px;
+  background-color: $layout_background_color;
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Line style */
+hr {
+  height: 0;
+  background-color: transparent;
+  color: transparent;
+  border: none;
+  border-bottom: $default_border;
+}
+
+/* Custom text-selection colors (remove any text shadows: twitter.com/miketaylr/status/12228805301) */
+::-moz-selection{background: $link_text_color; color: $layout_background_color; text-shadow: none;}
+::selection {background: $link_text_color; color: $layout_background_color; text-shadow: none;}
+
+/*  j.mp/webkit-tap-highlight-color */
+a:link {-webkit-tap-highlight-color: $link_text_color;}
+
+ins {background-color: $link_text_color; color: $layout_background_color; text-decoration: none;}
+mark {background-color: $link_text_color; color: $layout_background_color; font-style: italic; font-weight: bold;}
+
+/*--------------------------------------*/
+/* Links
+/*--------------------------------------*/
+a {
+  text-decoration: none;
+  color: $link_text_color;
+
+  &:hover {
+    color: darken($link_text_color, 10);
+  }
+
+  &:active, &:focus {
+    outline: none;
+  }
+}
+
+/*--------------------------------------*/
+/* Lists
+/*--------------------------------------*/
+ul, ol {
+  margin-left: 0;
+  margin-top: 0;
+  -webkit-padding-start: 0px;
+  padding-left: 0;
+  list-style-position: inside;
+
+  &.inline {
+    li {
+      display: inline-block;
+    }
+  }
+}
+
+dl {
+  dt, dd {
+    display: inline-block;
+    width: 50%;
+    padding: 5px;
+
+    &.odd {
+      background-color: $table_head_color;
+    }
+  }
+  dt {
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+  dd {
+    margin-left: -23px;
+  }
+}
+
+/*--------------------------------------*/
+/* Headers
+/*--------------------------------------*/
+h1 { font-size: $heading_font_size;         line-height: $heading_font_size + 10;         }
+h2 { font-size: $heading_font_size - 2;     line-height: $heading_font_size - 2 + 10;     }
+h3 { font-size: $heading_font_size - 4;     line-height: $heading_font_size - 4 + 10;     }
+h4 { font-size: $heading_font_size - 6;     line-height: $heading_font_size - 6 + 10;     }
+h5 { font-size: $sub_heading_font_size;     line-height: $sub_heading_font_size + 10;     }
+h6 { font-size: $sub_heading_font_size - 2; line-height: $sub_heading_font_size - 2 + 10; }
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  color: $title_text_color;
+  -webkit-margin-before: 0;
+  -webkit-margin-after: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/*--------------------------------------*/
+/* Forms
+/*--------------------------------------*/
+textarea, input[type="date"],
+input[type="datetime"], input[type="datetime-local"],
+input[type="email"], input[type="month"], input[type="number"],
+input[type="password"], input[type="search"], input[type="tel"],
+input[type="text"], input[type="time"], input[type="url"],
+input[type="week"] {
+  border: $default_border;
+  padding: 5px 10px;
+  font-family: $ff_base;
+  font-size: $input_box_font_size;
+
+  &:active, &:focus {
+    border-color: $link_text_color;;
+    outline: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    -o-box-shadow: none;
+    box-shadow: none;
+  }
+
+  &.error {
+    border-color: $c_red;
+  }
+}
+
+label.error {
+  display: block;
+  font-size: $base_font_size - 1;
+  color: $c_red;
+  margin-top: 3px;
+}
+
+span.required {
+  color: $c_red;
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+fieldset {
+  margin: 0;
+}
+
+input[type="submit"], input[type="button"],
+input[type= "reset"], button, a.button {
+  background-color: $link_text_color;
+  background-image: none;
+  text-shadow: none;
+  color: $layout_background_color;
+  font-weight: bold;
+  font-size: $button_font_size;
+  font-family: $ff_base;
+  border: 1px solid $button_border_color;
+  padding: 6px 10px 5px;
+  vertical-align:  top;
+
+  -webkit-font-smoothing: antialiased;
+
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
+   -khtml-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
+     -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
+       -o-box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
+          box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
+  -webkit-border-radius: 0px;
+   -khtml-border-radius: 0px;
+     -moz-border-radius: 0px;
+      -ms-border-radius: 0px;
+       -o-border-radius: 0px;
+          border-radius: 0px;
+
+  &.large {
+    padding: 7px 10px;
+    font-size: $button_font_size + 2;
+  }
+
+  &.gray {
+    background-color: lighten($body_text_color, 20);
+    border-color: lighten($body_text_color, 10);
+  }
+
+  &:hover {
+    background-image: none;
+    background-color: $body_text_color;
+    border-color: $body_text_color;
+    color: $layout_background_color;
+  }
+}
+
+.ie8 {
+  a.button {
+    line-height: 16px;
+  }
+}
+
+input[type="checkbox"], label {
+  vertical-align: middle;
+}
+
+a.button {
+  display: inline-block;
+  line-height: 15px;
+  margin-top: -2px;
+  vertical-align: bottom;
+}
+
+/*--------------------------------------*/
+/* Footer
+/*--------------------------------------*/
+footer#footer {
+  padding: 10px 0;
+  border-top: $default_border;
+}
+
+/*--------------------------------------*/
+/* Paragraphs
+/*--------------------------------------*/
+p {
+  padding: 10px 0;
+}
+
+/*--------------------------------------*/
+/* Tables
+/*--------------------------------------*/
+table {
+  thead {
+    background-color: $table_head_color;
+    text-transform: uppercase;
+
+    tr {
+      th {
+        padding: 5px 10px;
+      }
+    }
+  }
+
+  tbody, tfoot {
+    tr {
+      border-bottom: $default_border;
+
+      td {
+        vertical-align: middle;
+        padding: 5px 10px;
+      }
+
+      &.alt, &.odd {
+        background-color: lighten($link_text_color, 50);
+      }
+    }
+  }
+}
+
+/*--------------------------------------*/
+/* Navigation
+/*--------------------------------------*/
+nav#top-nav-bar {
+  text-align: right;
+  margin-top: 20px;
+
+  ul {
+    li {
+      margin-bottom: 5px;
+      padding-left: 10px;
+
+      a{
+        font-weight: bold;
+        font-size: $header_navigation_font_size;
+        text-transform: uppercase;
+      }
+    }
+  }
+}
+
+nav #main-nav-bar {
+  text-transform: uppercase;
+  font-weight: bold;
+  margin-top: 20px;
+  border-bottom: $default_border;
+  padding-bottom: 6px;
+
+  li {
+
+    a {
+      font-size: $horizontal_navigation_font_size;
+      padding: 5px;
+    }
+
+    &:first-child {
+      a {
+        padding-left: 0
+      }
+    }
+
+    &#link-to-cart {
+      float: right;
+      padding-left: 24px;
+      background: url("cart.png") no-repeat left center;
+
+      &:hover {
+        border-color: $link_text_color;
+
+        .amount {
+          border-color: $link_text_color;
+        }
+      }
+
+      a {
+        font-weight: normal;
+        font-size: $horizontal_navigation_font_size;
+        color: $link_text_color;
+
+        .amount {
+          font-size: $horizontal_navigation_font_size + 2;
+          font-weight: bold;
+          border-left: $default_border;
+          padding-left: 5px;
+          padding-bottom: 5px;
+        }
+      }
+    }
+  }
+}
+
+nav#taxonomies {
+  .taxonomy-root {
+    text-transform: uppercase;
+    border-bottom: $default_border;
+    margin-bottom: 5px;
+    font-size: $main_navigation_header_font_size;
+  }
+
+  .taxons-list {
+    li {
+      a {
+        font-size: $main_navigation_font_size
+      }
+    }
+  }
+}
+
+#breadcrumbs {
+  border-bottom: $default_border;
+  padding: 3px 0;
+  margin-bottom: 15px;
+
+  li {
+    a {
+      color: $link_text_color;
+    }
+    span {
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+  }
+}
+
+/*--------------------------------------*/
+/* Flash notices & errors
+/*--------------------------------------*/
+.flash {
+  padding: 10px;
+  color: $layout_background_color;
+  font-weight: bold;
+  margin-bottom: 10px;
+
+  &.notice {
+    background-color: $link_text_color;
+  }
+  &.success {
+    background-color: $c_green;
+  }
+  &.error {
+    background-color: $c_red;
+  }
+}
+
+.errorExplanation {
+  @extend .flash.error;
+  @extend .flash;
+
+  p {
+    font-weight: normal;
+  }
+
+  ul {
+    list-style: disc outside;
+    margin-left: 30px;
+
+    li {
+      font-weight: normal;
+    }
+  }
+}
+
+/*--------------------------------------*/
+/* Main search bar
+/*--------------------------------------*/
+#search-bar {
+  display: block;
+}
+
+/*--------------------------------------*/
+/* Products
+/*--------------------------------------*/
+[data-hook="product_show"] {
+  h6 {
+    font-size: $product_detail_title_font_size;
+  }
+}
+
+.product-section-title {
+  text-transform: uppercase;
+  margin-top: 15px;
+}
+
+.add-to-cart {
+  margin-top: 15px;
+
+  input[type="number"] {
+    margin-right: 3px;
+    width: 60px;
+    vertical-align: middle;
+    padding: 8px 10px;
+  }
+}
+
+span.price {
+  font-weight: bold;
+  color: $link_text_color;
+
+  &.selling {
+    font-size: $product_detail_price_font_size;
+  }
+  &.diff {
+    font-weight: bold;
+  }
+}
+
+.taxon-title {
+  font-size: $product_list_header_font_size;
+}
+
+.search-results-title {
+  font-size: $product_list_search_font_size;
+}
+
+ul#products {
+  &:after {
+    content: " ";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+  }
+
+  li {
+    text-align: center;
+    font-weight: bold;
+    margin-bottom: 20px;
+
+    a {
+      display: block;
+
+      &.info {
+        height: 35px;
+        margin-top: 5px;
+        font-size: $product_list_name_font_size;
+        color: $product_link_text_color;
+        border-bottom: $default_border;
+        overflow: hidden;
+      }
+    }
+
+    .product-image {
+      border: $default_border;
+      padding: 5px;
+      min-height: 110px;
+      background-color: $product_background_color;
+
+      &:hover {
+        border-color: $link_text_color;
+      }
+
+      img {
+        max-width: 100%; /* Fluid images for product */
+      }
+
+    }
+
+    .price {
+      color: $link_text_color;
+      font-size: $product_list_price_font_size;
+      padding-top: 5px;
+      display: block;
+    }
+  }
+}
+
+.subtaxon-title {
+  text-transform: uppercase;
+
+  a {
+    color: $link_text_color;
+  }
+}
+
+.search-results-title {
+  text-transform: uppercase;
+  border-bottom: $default_border;
+  margin-bottom: 10px;
+}
+
+#sidebar_products_search {
+  .navigation {
+    margin-bottom: 15px;
+  }
+
+  .filter-title {
+    display: block;
+    font-weight: bold;
+    text-transform: uppercase;
+    border-bottom: 1px solid #ededed;
+    margin-bottom: 5px;
+    color: $link_text_color;
+    font-size: $base_font_size + 2;
+    line-height: 24px;
+  }
+}
+
+.taxon {
+  overflow: hidden;
+}
+
+#product-images {
+  #main-image {
+    text-align: center;
+    border: $default_border;
+    background-color: $product_background_color;
+
+    img {
+      min-height: 240px;
+      max-width: 100%; /* Fluid images for product */
+    }
+  }
+  #product-thumbnails {
+    li {
+      background-color: $product_background_color;
+    }
+  }
+}
+
+#product-description {
+  .product-title {
+    border-bottom: $default_border;
+    margin-bottom: 15px;
+    color: $product_title_text_color;
+    font-size: $product_detail_name_font_size;
+  }
+
+  [data-hook="product-description"] {
+    font-size: $product_detail_description_font_size;
+    color: $product_body_text_color;
+  }
+}
+
+#product-thumbnails {
+  margin-top: 10px;
+
+  li {
+    margin-right: 6px;
+    border: $default_border;
+
+    img {
+      padding: 5px;
+    }
+
+    &:hover, &.selected {
+      border-color: $link_text_color;
+    }
+  }
+}
+
+#product-properties {
+  border: $default_border;
+  padding: 10px;
+  width: 100%;
+}
+
+#product-variants {
+  ul {
+    li {
+      padding: 5px;
+    }
+  }
+}
+
+#cart-form {
+  #inside-product-cart-form:after {
+    content: " ";
+    display: block;
+    clear: both;
+    visibility: hidden;
+    line-height: 0;
+    height: 0;
+  }
+}
+
+/*--------------------------------------*/
+/* Checkout
+/*--------------------------------------*/
+.out-of-stock {
+  background: #df0000;
+  color: white;
+  padding: 5px;
+  padding-right: 10px;
+  font-weight: bold;
+}
+
+.progress-steps {
+  list-style: decimal inside;
+  overflow: auto;
+
+  li {
+    float: left;
+    margin-right: 20px;
+    font-weight: bold;
+    text-transform: uppercase;
+    padding: 5px 20px;
+    color: lighten($body_text_color, 20);
+
+    &.current-first, &.current {
+      background-color: $link_text_color;
+      color: $layout_background_color;
+    }
+
+    &.completed-first, &.completed {
+      background-color: $table_head_color;
+      color: $layout_background_color;
+
+      a {
+        color: $layout_background_color;
+      }
+
+      &:hover {
+        background-color: $link_text_color;
+        color: $layout_background_color;
+
+        a {
+          color: $layout_background_color;
+
+          &:hover {
+            color: $layout_background_color;
+          }
+        }
+      }
+    }
+  }
+}
+
+#payment-methods {
+  list-style: none;
+
+  li {
+    fieldset {
+      border: none;
+      padding: 0;
+    }
+  }
+}
+
+
+
+#checkout-summary {
+  text-align: center;
+  border: $default_border;
+  margin-top: 23px;
+  margin-left: 0;
+
+  h3 {
+    text-transform: uppercase;
+    font-size: $base_font_size + 2;
+    border-bottom: $default_border;
+  }
+
+  table {
+    width: 100%;
+
+    tr[data-hook="item_total"] {
+      td:last-child {
+        strong {
+          @extend span.price;
+        }
+      }
+    }
+
+    tr[data-hook="order_total"] {
+      border-bottom: none;
+    };
+
+    #summary-order-total {
+      @extend span.price;
+      font-size: $base_font_size + 2;
+    }
+  }
+}
+
+#billing, #shipping, #shipping_method,
+#payment, #order_details, #order_summary {
+  margin-top: 10px;
+  border: $default_border;
+  padding: 10px;
+
+  legend {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: $base_font_size + 2;
+    color: $link_text_color;
+    padding: 5px;
+    margin-left: 15px;
+  }
+}
+
+#order_details, #order_summary {
+  padding: 0;
+
+  div:last-child {
+    margin-left: -1px;
+  }
+
+  .payment-info {
+    .cc-type {
+      img {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  td.price, td.total {
+    span {
+      @extend span.price;
+    }
+  }
+
+  table tfoot {
+    text-align: right;
+    color: lighten($body_text_color, 20);
+
+    tr {
+      border: none;
+    }
+
+    &#order-total {
+      text-transform: uppercase;
+      font-size: $base_font_size + 4;
+      color: $body_text_color;
+
+      tr {
+        border-top: $default_border;
+
+        td {
+          padding: 10px;
+        }
+      }
+    }
+  }
+
+  .steps-data {
+    div.columns {
+      padding: 5px;
+      margin: 0;
+
+      &:first-child {
+        margin-left: 10px;
+      }
+    }
+
+    h6 {
+      border-bottom: $default_border;
+      margin-bottom: 5px;
+    }
+  }
+}
+
+#shipping_method {
+  p {
+    &#minstrs {
+      clear: both;
+
+      label {
+        width: 100%;
+      }
+    }
+
+    label {
+      float: left;
+      font-weight: bold;
+      font-size: $base_font_size + 2;
+      margin-right: 40px;
+      padding: 5px;
+    }
+  }
+
+  .shipment {
+    margin-bottom: 30px;
+  }
+
+  .stock-shipping-method-title {
+    background-color: lighten($body_text_color, 70);
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: normal;
+    font-size :11px;
+  }
+
+  .stock-location {
+    text-align: center;
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: normal;
+    background-color: $link_text_color;
+    color: white;
+  }
+
+  .unshippable {
+    .stock-location {
+      background-color: $c_red;
+    }
+  }
+
+  .shipping-methods {
+    list-style: none;
+    margin: 0;
+    padding: none;
+
+    .shipping-method {
+      display: inline-block;
+      margin: 5px 10px 5px 0;
+
+      label {
+        font-weight: bold;
+
+        .rate-cost {
+          color: $link_text_color;
+        }
+      }
+    }
+  }
+
+  table.stock-contents {
+    thead {
+      background-color: lighten($body_text_color, 70);
+
+      th {
+        font-size: 11px;
+        font-weight: normal
+      }
+    }
+    tbody {
+      tr {
+        td {
+          text-align: center;
+
+          &.item-name {
+            text-align: left;
+          }
+        }
+      }
+    }
+  }
+}
+
+p[data-hook="use_billing"] {
+  float: right;
+  margin-top: -18px;
+  background-color: $layout_background_color;
+  padding: 5px;
+}
+
+/*--------------------------------------*/
+/* Cart
+/*--------------------------------------*/
+table#cart-detail {
+  width: 100%;
+  tbody#line_items {
+    tr {
+
+      td[data-hook="cart_item_price"], td[data-hook="cart_item_total"] {
+        @extend span.price;
+        @extend span.price.selling;
+      }
+      td[data-hook="cart_item_quantity"] {
+        .line_item_quantity {
+          width: 40px;
+        }
+      }
+      td[data-hook="cart_item_delete"] {
+        .delete {
+          display: block;
+          width: 20px;
+        }
+      }
+    }
+  }
+}
+
+div[data-hook="inside_cart_form"] {
+  .links {
+    margin-top: 15px;
+    text-align: right;
+  }
+
+  #subtotal {
+    text-align: right;
+    text-transform: uppercase;
+    margin-top: 15px;
+
+    span.order-total {
+      @extend span.price;
+    }
+  }
+}
+
+#empty-cart {
+  margin-top: -75px;
+  float: left;
+}
+
+/*--------------------------------------*/
+/* Account
+/*--------------------------------------*/
+#existing-customer, #new-customer, #forgot-password {
+  h6 {
+    text-transform: uppercase;
+  }
+}
+
+#registration {
+  h6 {
+    text-transform: uppercase;
+  }
+
+  #existing-customer {
+    width: auto;
+    text-align: left;
+  }
+}
+
+#user-info {
+  margin-bottom: 15px;
+  border: $default_border;
+  padding: 10px;
+
+  dd {
+    margin-left: 0px;
+  }
+}
+
+/*--------------------------------------*/
+/* Order
+/*--------------------------------------*/
+#order_summary {
+  margin-top: 0;
+}
+#order {
+  p[data-hook="links"] {
+    margin-left: 10px;
+    overflow: auto;
+  }
+}
+
+table.order-summary {
+  tbody {
+    tr {
+      td {
+        width: 10%;
+        text-align: center;
+
+        &:first-child {
+          a {
+            text-transform: uppercase;
+            font-weight: bold;
+            color: $link_text_color;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* #Media Queries
+================================================== */
+
+/* Smaller than standard 960 (devices and browsers) */
+@media only screen and (max-width: 959px) {
+
+}
+
+/* Tablet Portrait size to standard 960 (devices and browsers) */
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .container {
+    padding-left: 10px;
+    width: 758px;
+  }
+  footer#footer {
+    width: 748px;
+  }
+  p[data-hook="use_billing"] {
+    margin-top: -15px;
+  }
+}
+
+/* All Mobile Sizes (devices and browser) */
+@media only screen and (max-width: 767px) {
+
+  html {
+    -webkit-text-size-adjust: none;
+  }
+
+  #order_details .steps-data div.columns,
+  #order_summary .steps-data div.columns {
+    padding: 0;
+    margin: 0;
+
+    &:first-child {
+      margin: 0
+    }
+  }
+
+  nav#taxonomies {
+    text-align: center;
+
+    ul {
+      padding-left: 0;
+      list-style: none;
+    }
+  }
+
+  ul#nav-bar {
+    text-align: center;
+  }
+
+  .steps-data div.columns {
+    margin-bottom: 15px;
+    text-align: center;
+  }
+
+  #order_details, #order {
+    table[data-hook="order_details"] {
+      width: 100%;
+    }
+  }
+
+  #update-cart {
+    #subtotal, .links {
+      width: 50%;
+      float: left;
+      text-align: left;
+    }
+    #subtotal {
+      text-align: right;
+    }
+  }
+}
+
+/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+
+  footer#footer {
+    width: auto;
+  }
+
+  input, select {
+    vertical-align: baseline;
+  }
+
+  figure#logo {
+    text-align: center;
+  }
+
+  #link-to-login {
+    display: block;
+    text-align: center;
+  }
+
+  #search-bar {
+    display: block;
+    text-align: center;
+
+    select {
+      margin-bottom: 10px;
+    }
+  }
+
+  ul#products {
+    margin-left: 0;
+    margin-right: -20px;
+
+    li {
+      width: 133px;
+      margin-right: 10px;
+    }
+  }
+
+  table#cart-detail, table[data-hook="order_details"] {
+    tbody {
+      tr {
+        td[data-hook="cart_item_description"], td[data-hook="order_item_description"] {
+          font-size: $base_font_size - 1;
+          line-height: 15px;
+          width: 100px;
+
+          h4 {
+            font-size: $base_font_size + 2;
+            line-height: 17px;
+            margin-bottom: 10px;
+          }
+        }
+        td[data-hook="cart_item_price"], td[data-hook="cart_item_total"],
+        td[data-hook="order_item_price"], td[data-hook="order_item_total"]  {
+          font-size: $base_font_size;
+        }
+        td[data-hook="cart_item_image"], td[data-hook="order_item_image"] {
+          img {
+            width: 70px;
+          }
+        }
+      }
+    }
+  }
+
+}
+
+@media only screen and (max-width: 767px) {
+  #empty-cart {
+    clear: both;
+    margin-top: 0;
+    float: none;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .container .offset-by-nine.coupon-code-field {
+    padding-left: 380px;
+  }
+}
+
+#update-cart .coupon-code-field {
+  /* yes, this is ugly... */
+  margin-top: -42px !important;
+}
+
+@media only screen and (max-width: 767px) {
+  #empty-cart,
+  #update-cart .coupon-code-field {
+    /* yes, this is ugly... */
+    margin-top: 0 !important;
+  }
+}
+
+/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
+@media only screen and (max-width: 479px) {
+
+  .progress-steps li {
+    padding: 0;
+    margin: 0;
+    width: 50%;
+
+    span {
+      display: block;
+      padding: 10px 20px;
+    }
+  }
+
+  #shipping_method p label {
+    float: none;
+    display: block;
+    text-align: center;
+    margin-right: 0;
+  }
+
+  p[data-hook="use_billing"] {
+    float: none;
+    margin-top: 0;
+  }
+
+  table#cart-detail, table[data-hook="order_details"] {
+    tbody {
+      tr {
+        td[data-hook="cart_item_description"], td[data-hook="order_item_description"] {
+          padding: 0 !important;
+          text-indent: -9999px;
+
+          h4 {
+            display: none;
+          }
+        }
+        td[data-hook="cart_item_image"], td[data-hook="order_item_image"] {
+          img {
+            width: 70px;
+          }
+        }
+        td[data-hook="cart_item_price"], td[data-hook="cart_item_total"] {
+          font-size: $base_font_size + 2 !important;
+        }
+      }
+    }
+  }
+
+  table.order-summary {
+    display: block; position: relative; width: 100%;
+
+    thead { display: block; float: left; }
+    tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }
+    thead tr { display: block; }
+    th { display: block; }
+    tbody tr { display: inline-block; vertical-align: top; }
+    td { display: block; min-height: 1.25em; }
+  }
+
+
+  figure#logo {
+    text-align: center;
+  }
+
+  #link-to-login {
+    display: block;
+    text-align: center;
+  }
+
+  #search-bar {
+    display: block;
+    text-align: center;
+
+    select {
+      margin-bottom: 10px;
+    }
+  }
+
+  aside#sidebar {
+    text-align: center;
+
+    ul {
+      padding-left: 0;
+
+      li {
+        list-style-type: none;
+      }
+    }
+  }
+
+  ul#products {
+    li {
+      width: 142px;
+      margin-right: 15px;
+
+      &.secondary, &.omega {
+        margin-right: 0;
+      }
+    }
+  }
+
+  #content {
+    text-align: center;
+  }
+}