Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
1388 lines (1163 sloc) 24.2 KB
//= depend_on_asset "fontawesome-webfont.eot"
//= depend_on_asset "fontawesome-webfont.woff"
//= depend_on_asset "fontawesome-webfont.ttf"
//= depend_on_asset "fontawesome-webfont.svg"
//= depend_on_asset "spree/frontend/cart.png"
@import 'spree/frontend/skeleton';
@import 'spree/frontend/variables';
@import 'font-awesome';
/*--------------------------------------*/
/* 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;
}
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;
font-family: $ff_base;
font-size: $input_box_font_size;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&: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;
}
.field {
padding: 10px 0;
label {
display: inline-block;
margin-bottom: 5px;
}
input,
select {
display: block;
}
&-required label:after {
content: "*";
display: inline-block;
color: $c_red;
font-weight: bold;
font-size: 1.2em;
margin-left: 3px;
}
}
fieldset {
margin: 0;
min-width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
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=button],
input[type=submit],
button {
&.disabled {
background:#ccc;
border-color: #ccc;
text-shadow:none;
}
}
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: image-url("spree/frontend/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 {
ul {
margin-left: 1em;
}
li {
font-size: $main_navigation_font_size;
font-weight: normal;
&.current {
font-weight: bold;
}
}
}
}
#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;
background-color: $c_red;
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;
}
}
%price_text {
font-weight: bold;
color: $product_price_text_color;
}
span.price {
@extend %price_text;
&.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: $product_price_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
/*--------------------------------------*/
.checkout_form_wrapper {
text-align: left;
}
.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 %price_text;;
}
}
}
tr[data-hook="order_total"] {
border-bottom: none;
};
#summary-order-total {
@extend %price_text;;
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;
}
}
#billing, #shipping {
input[type="text"], input[type="email"],
input[type="tel"], input[type="number"],
select, textarea {
width: 100%;
}
}
#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 %price_text;;
}
}
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;
}
}
}
&#subtotal {
text-transform: uppercase;
font-size: $base_font_size + 4;
color: $body_text_color;
}
}
.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: 10px 0;
.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;
}
.coupon-code {
margin-top: 20px;
padding: 10px;
form {
display: flex;
flex-flow: row wrap;
}
label {
flex: 1 100%;
text-align: left;
}
input[type="text"] {
flex: 3 0;
width: 100%;
margin-right: 5px;
}
&-apply-button {
white-space: nowrap;
}
}
#coupon_status {
margin-top: 10px;
font-weight: bold;
font-size: 100%;
&.success {
color: $c_green;
}
&.error, &.alert {
color: $c_red;
}
}
.terms_and_conditions {
.policy {
height: 100px;
width: 100%;
overflow: scroll;
}
}
/*--------------------------------------*/
/* Cart
/*--------------------------------------*/
table#cart-detail {
width: 100%;
border-collapse: separate;
tbody#line_items {
tr {
td[data-hook="cart_item_price"], td[data-hook="cart_item_total"] {
@extend %price_text;
font-size: $product_detail_price_font_size;
}
td[data-hook="cart_item_quantity"] {
.line_item_quantity {
width: 65px;
}
}
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 %price_text;
}
}
}
#empty-cart {
margin-top: -50px;
float: left;
}
.cart-subtotal, .cart-total {
background: $cart_total_background_color;
td h5 {
color: $cart_total_text_color;
}
}
.adjustment:nth-child(even) {
background: #eaeaea;
}
/*--------------------------------------*/
/* 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;
h1 {
padding-left: 10px;
}
}
#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 (max-width: 767px) {
#empty-cart {
/* 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;
}
}