Created
March 1, 2012 20:02
-
-
Save BDQ/1952717 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*--------------------------------------*/ | |
| /* Colors | |
| /*--------------------------------------*/ | |
| $c_green: #8dba53; /* Spree green */ | |
| $c_red: #e45353; /* Error red */ | |
| $layout_background_color: <%= palette.preferred_layout_background_color %>; | |
| $title_text_color: <%= palette.preferred_title_text_color %>; | |
| $body_text_color: <%= palette.preferred_body_text_color %>; | |
| $link_text_color: <%= palette.preferred_link_text_color %>; | |
| $product_background_color: <%= palette.preferred_product_background_color %>; | |
| $product_title_text_color: <%= palette.preferred_product_title_text_color %>; | |
| $product_body_text_color: <%= palette.preferred_product_body_text_color %>; | |
| $product_link_text_color: <%= palette.preferred_product_link_text_color %>; | |
| /*--------------------------------------*/ | |
| /* Fonts import from remote | |
| /*--------------------------------------*/ | |
| @import url(//fonts.googleapis.com/css?family=<%= CGI::escape(Spraycan::Config.preferred_body_font) %>:400,700,400italic,700italic|&subset=latin,cyrillic,greek,greek-ext,latin-ext,cyrillic-ext); | |
| @import url(//fonts.googleapis.com/css?family=<%= CGI::escape(Spraycan::Config.preferred_title_font) %>:400,700,400italic,700italic|&subset=latin,cyrillic,greek,greek-ext,latin-ext,cyrillic-ext); | |
| /*--------------------------------------*/ | |
| /* Font families | |
| /*--------------------------------------*/ | |
| $ff_base: '<%= Spraycan::Config.preferred_body_font %>', sans-serif; | |
| $ff_title_font: '<%= Spraycan::Config.preferred_title_font %>', sans-serif; | |
| /*-------------------------------------- | |
| | Font sizes | |
| |-------------------------------------- | |
| |- Navigation | |
| | */ | |
| $header_navigation_font_size: <%= Spraycan::Config.header_navigation_font_size %>px; | |
| $horizontal_navigation_font_size: <%= Spraycan::Config.horizontal_navigation_font_size %>px; | |
| $main_navigation_header_font_size: <%= Spraycan::Config.main_navigation_header_font_size %>px; | |
| $main_navigation_font_size: <%= Spraycan::Config.main_navigation_font_size %>px; | |
| /*|------------------------------------ | |
| |- Product Listing | |
| | */ | |
| $product_list_name_font_size: <%= Spraycan::Config.product_list_name_font_size %>px; | |
| $product_list_price_font_size: <%= Spraycan::Config.product_list_price_font_size %>px; | |
| $product_list_header_font_size: <%= Spraycan::Config.product_list_header_font_size %>px; | |
| $product_list_search_font_size: <%= Spraycan::Config.product_list_search_font_size %>px; | |
| /*|------------------------------------ | |
| |- Product Details | |
| | */ | |
| $product_detail_name_font_size: <%= Spraycan::Config.product_detail_name_font_size %>px; | |
| $product_detail_description_font_size: <%= Spraycan::Config.product_detail_description_font_size %>px; | |
| $product_detail_price_font_size: <%= Spraycan::Config.product_detail_price_font_size %>px; | |
| $product_detail_title_font_size: <%= Spraycan::Config.product_detail_title_font_size %>px; | |
| /*|------------------------------------ | |
| |- Basic | |
| | */ | |
| $heading_font_size: <%= Spraycan::Config.heading_font_size %>px; | |
| $sub_heading_font_size: <%= Spraycan::Config.sub_heading_font_size %>px; | |
| $button_font_size: <%= Spraycan::Config.button_font_size %>px; | |
| $input_box_font_size: <%= Spraycan::Config.input_box_font_size %>px; | |
| $base_font_size: <%= Spraycan::Config.base_font_size %>px; | |
| /*--------------------------------------*/ | |
| /* Basic styles | |
| /*--------------------------------------*/ | |
| body { | |
| font-family: $ff_base; | |
| color: $body_text_color; | |
| line-height: $base_font_size + 6; | |
| font-size: $base_font_size; | |
| background-color: $layout_background_color; | |
| <% if Spraycan::Asset.background.present? %> | |
| background-image: url("<%= Spraycan::Asset.background.url %>"); | |
| background-position: <%= Spraycan::Config.background_alignment %>; | |
| background-repeat: <%= Spraycan::Config.background_repeat %>; | |
| <% end %> | |
| } | |
| figure#logo { | |
| min-height: <%= Spraycan::Asset.logo.height %>; | |
| background-image: url("<%= Spraycan::Asset.logo.url %>"); | |
| background-position: <%= Spraycan::Config.logo_alignment %>; | |
| background-repeat: no-repeat; | |
| } | |
| /* Line style */ | |
| hr { | |
| border-color: lighten($body_text_color, 60); | |
| } | |
| /* 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) !important; | |
| } | |
| } | |
| /*--------------------------------------*/ | |
| /* Lists | |
| /*--------------------------------------*/ | |
| ul, ol { | |
| li { | |
| } | |
| &.inline { | |
| li { | |
| display: inline-block; | |
| } | |
| } | |
| } | |
| dl { | |
| dt, dd { | |
| display: inline-block; | |
| width: 50%; | |
| padding: 5px; | |
| &.odd { | |
| background-color: lighten($link_text_color, 28); | |
| } | |
| } | |
| 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: bold; | |
| font-family: $ff_title_font; | |
| color: $title_text_color; | |
| } | |
| /*--------------------------------------*/ | |
| /* 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: 1px solid lighten($body_text_color, 60); | |
| padding: 2px 5px; | |
| font-family: $ff_base; | |
| font-size: $input_box_font_size; | |
| line-height: $input_box_font_size + 5; | |
| &: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; | |
| } | |
| } | |
| select { | |
| border: 1px solid lighten($body_text_color, 60); | |
| font-family: $ff_base; | |
| color: $body_text_color; | |
| background-image: url('select_arrow.gif'); | |
| background-repeat: no-repeat; | |
| background-position: right center; | |
| font-size: $input_box_font_size; | |
| padding: 0px 5px; | |
| line-height: $input_box_font_size + 5; | |
| &:active, &:focus { | |
| @extend input[type="text"]:focus | |
| } | |
| } | |
| label.error { | |
| display: block; | |
| font-size: $base_font_size - 1; | |
| color: $c_red; | |
| margin-top: 3px; | |
| } | |
| 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; | |
| line-height: $button_font_size; | |
| font-family: $ff_base; | |
| border: 1px solid darken($link_text_color, 10); | |
| -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; | |
| vertical-align: text-top; | |
| &.large { | |
| padding: 7px 10px; | |
| font-size: $button_font_size + 2; | |
| line-height: $button_font_size + 2 + 3; | |
| } | |
| &:hover { | |
| background-image: none; | |
| background-color: $body_text_color; | |
| border-color: $body_text_color; | |
| color: $layout_background_color !important; | |
| } | |
| } | |
| .ie8 { | |
| a.button { | |
| line-height: $button_font_size + 4; | |
| } | |
| } | |
| input[type="checkbox"], input[type="button"], | |
| input[type="submit"], input[type="reset"], | |
| button, label { | |
| vertical-align: top; | |
| } | |
| a.button { | |
| display: inline-block; | |
| line-height: $button_font_size + 3; | |
| margin-top: -2px; | |
| vertical-align: bottom; | |
| } | |
| /*--------------------------------------*/ | |
| /* Footer | |
| /*--------------------------------------*/ | |
| footer#footer { | |
| padding: 10px 0; | |
| border-top: 1px solid lighten($body_text_color, 60); | |
| } | |
| /*--------------------------------------*/ | |
| /* Paragraphs | |
| /*--------------------------------------*/ | |
| p { | |
| padding: 10px 0; | |
| } | |
| /*--------------------------------------*/ | |
| /* Tables | |
| /*--------------------------------------*/ | |
| table { | |
| thead { | |
| background-color: lighten($body_text_color, 60); | |
| text-transform: uppercase; | |
| tr { | |
| th { | |
| padding: 5px 10px; | |
| } | |
| } | |
| } | |
| tbody, tfoot { | |
| tr { | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| td { | |
| vertical-align: middle; | |
| padding: 5px 10px; | |
| background-color: $layout_background_color; | |
| } | |
| &.alt, &.odd { | |
| background-color: lighten($link_text_color, 28); | |
| } | |
| } | |
| } | |
| } | |
| /*--------------------------------------*/ | |
| /* Navigation | |
| /*--------------------------------------*/ | |
| nav#top-nav-bar { | |
| text-align: right; | |
| margin-top: 20px; | |
| ul { | |
| li { | |
| margin-bottom: 5px; | |
| padding-left: 0px !important; | |
| a{ | |
| font-weight: bold; | |
| font-size: $header_navigation_font_size; | |
| line-height: $header_navigation_font_size + 5; | |
| text-transform: uppercase; | |
| } | |
| } | |
| } | |
| } | |
| nav #main-nav-bar { | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| margin-top: 20px; | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| padding-bottom: 6px; | |
| li { | |
| a { | |
| font-size: $horizontal_navigation_font_size; | |
| line-height: $horizontal_navigation_font_size + 5; | |
| 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; | |
| line-height: $horizontal_navigation_font_size + 5; | |
| color: $link_text_color; | |
| .amount { | |
| font-size: $horizontal_navigation_font_size + 2; | |
| line-height: $horizontal_navigation_font_size + 2 + 5; | |
| font-weight: bold; | |
| border-left: 1px solid lighten($body_text_color, 60); | |
| padding-left: 5px; | |
| padding-bottom: 5px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| nav#taxonomies { | |
| .taxonomy-root { | |
| text-transform: uppercase; | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| margin-bottom: 5px; | |
| font-size: $main_navigation_header_font_size; | |
| line-height: $main_navigation_header_font_size + 10; | |
| } | |
| .taxons-list { | |
| padding-left: 20px; | |
| margin-bottom: 20px; | |
| list-style: disc outside; | |
| li { | |
| a { | |
| font-size: $main_navigation_font_size; | |
| line-height: $main_navigation_font_size + 5; | |
| } | |
| } | |
| } | |
| } | |
| #breadcrumbs { | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| 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; | |
| line-height: $product_detail_title_font_size + 5; | |
| } | |
| } | |
| .product-section-title { | |
| text-transform: uppercase; | |
| margin-top: 15px; | |
| } | |
| .add-to-cart { | |
| margin-top: 15px; | |
| input[type="number"] { | |
| width: 60px; | |
| vertical-align: middle; | |
| padding: 5px; | |
| height: 35px; | |
| } | |
| } | |
| span.price { | |
| font-weight: bold; | |
| color: $link_text_color; | |
| &.selling { | |
| font-size: $product_detail_price_font_size; | |
| line-height: $product_detail_price_font_size + 5; | |
| } | |
| &.diff { | |
| font-weight: bold; | |
| } | |
| } | |
| .taxon-title { | |
| font-size: $product_list_header_font_size; | |
| line-height: $product_list_header_font_size + 5; | |
| } | |
| .search-results-title { | |
| font-size: $product_list_search_font_size; | |
| line-height: $product_list_search_font_size + 5; | |
| } | |
| ul#products { | |
| li { | |
| text-align: center; | |
| font-weight: bold; | |
| margin-bottom: 20px; | |
| a { | |
| display: block; | |
| &.info { | |
| height: $product_list_name_font_size * 3; | |
| margin-top: 5px; | |
| font-size: $product_list_name_font_size; | |
| font-family: $ff_title_font; | |
| line-height: $product_list_name_font_size + 5; | |
| color: $product_link_text_color; | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| } | |
| } | |
| .product-image { | |
| border: 1px solid lighten($body_text_color, 60); | |
| padding: 5px; | |
| min-height: 110px; | |
| background-color: $product_background_color; | |
| &:hover { | |
| border-color: $link_text_color; | |
| } | |
| } | |
| .price { | |
| color: $link_text_color; | |
| font-size: $product_list_price_font_size; | |
| line-height: $product_list_price_font_size + 5; | |
| padding-top: 5px; | |
| display: block; | |
| } | |
| } | |
| } | |
| .subtaxon-title { | |
| text-transform: uppercase; | |
| a { | |
| color: $link_text_color; | |
| } | |
| } | |
| .search-results-title { | |
| text-transform: uppercase; | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| margin-bottom: 10px; | |
| } | |
| #sidebar_products_search { | |
| .navigation { | |
| margin-bottom: 15px; | |
| } | |
| span.category { | |
| display: block; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| font-size: $main_navigation_header_font_size; | |
| line-height: $main_navigation_header_font_size + 10; | |
| margin-bottom: 5px; | |
| font-family: $ff_title_font; | |
| color: $title_text_color; | |
| } | |
| } | |
| .taxon { | |
| overflow: hidden; | |
| } | |
| #product-images { | |
| #main-image { | |
| text-align: center; | |
| border: 1px solid lighten($body_text_color, 60); | |
| background-color: $product_background_color; | |
| } | |
| #product-thumbnails { | |
| li { | |
| background-color: $product_background_color; | |
| } | |
| } | |
| } | |
| #product-description { | |
| .product-title { | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| margin-bottom: 15px; | |
| color: $product_title_text_color; | |
| font-size: $product_detail_name_font_size; | |
| line-height: $product_detail_name_font_size + 5; | |
| } | |
| [data-hook="product_description"] { | |
| font-size: $product_detail_description_font_size; | |
| line-height: $product_detail_description_font_size + 5; | |
| color: $product_body_text_color; | |
| } | |
| } | |
| #product-thumbnails { | |
| margin-top: 10px; | |
| li { | |
| margin-right: 6px; | |
| border: 1px solid lighten($body_text_color, 60); | |
| img { | |
| padding: 5px; | |
| } | |
| &:hover, &.selected { | |
| border-color: $link_text_color; | |
| } | |
| } | |
| } | |
| #product-properties { | |
| border: 1px solid lighten($body_text_color, 60); | |
| padding: 10px; | |
| } | |
| #product-variants { | |
| ul { | |
| li { | |
| padding: 5px; | |
| } | |
| } | |
| } | |
| /*--------------------------------------*/ | |
| /* Checkout | |
| /*--------------------------------------*/ | |
| .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: lighten($body_text_color, 60); | |
| 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 !important; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| #checkout-summary { | |
| text-align: center; | |
| border: 1px solid lighten($body_text_color, 60); | |
| margin-top: 23px; | |
| margin-left: 0; | |
| h3 { | |
| text-transform: uppercase; | |
| font-size: $base_font_size + 2; | |
| line-height: $base_font_size + 2 + 5; | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| } | |
| 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; | |
| line-height: $base_font_size + 2 + 5; | |
| } | |
| } | |
| } | |
| #billing, #shipping, #shipping_method, | |
| #payment, #order_details, #order_summary { | |
| margin-top: 10px; | |
| border: 1px solid lighten($body_text_color, 60); | |
| padding: 10px; | |
| legend { | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| font-size: $base_font_size + 2; | |
| line-height: $base_font_size + 2 + 5; | |
| 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; | |
| line-height: $base_font_size + 4 + 5; | |
| color: $body_text_color; | |
| tr { | |
| border-top: 1px solid lighten($body_text_color, 60); | |
| td { | |
| padding: 10px; | |
| } | |
| } | |
| } | |
| } | |
| .steps-data { | |
| div.columns { | |
| padding: 5px; | |
| margin: 0; | |
| &:first-child { | |
| margin-left: 10px; | |
| } | |
| } | |
| h6 { | |
| border-bottom: 1px solid lighten($body_text_color, 60); | |
| margin-bottom: 5px; | |
| } | |
| } | |
| } | |
| #shipping_method { | |
| p { | |
| label { | |
| float: left; | |
| font-weight: bold; | |
| font-size: $base_font_size + 2; | |
| line-height: $base_font_size + 2 + 5; | |
| margin-right: 40px; | |
| padding: 5px; | |
| } | |
| } | |
| } | |
| 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; | |
| } | |
| #subtotal { | |
| text-align: right; | |
| text-transform: uppercase; | |
| margin-top: 15px; | |
| span.order-total { | |
| @extend span.price; | |
| } | |
| } | |
| } | |
| #empty-cart { | |
| margin-top: 15px; | |
| float: right; | |
| } | |
| /*--------------------------------------*/ | |
| /* 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: 1px solid lighten($body_text_color, 60); | |
| padding: 10px; | |
| } | |
| /*--------------------------------------*/ | |
| /* 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 !important; | |
| list-style: none !important; | |
| } | |
| } | |
| 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 !important; | |
| } | |
| input, select { | |
| vertical-align: baseline !important; | |
| } | |
| 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: $base_font_size + 3; | |
| width: 100px; | |
| h4 { | |
| font-size: $base_font_size + 2; | |
| line-height: $base_font_size + 5; | |
| margin-bottom: 10px; | |
| a { | |
| font-size: $base_font_size + 2; | |
| } | |
| } | |
| } | |
| 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 !important; | |
| line-height: $base_font_size + 5 !important; | |
| } | |
| td[data-hook="cart_item_image"], td[data-hook="order_item_image"] { | |
| img { | |
| width: 70px; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* 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; | |
| line-height: $base_font_size + 2 + 5 !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 !important; | |
| li { | |
| list-style-type: none; | |
| } | |
| } | |
| } | |
| ul#products { | |
| li { | |
| width: 142px; | |
| margin-right: 15px; | |
| &.secondary, &.omega { | |
| margin-right: 0; | |
| } | |
| } | |
| } | |
| #content { | |
| text-align: center; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment