// // Magento Enterprise Edition // // NOTICE OF LICENSE // // This source file is subject to the Magento Enterprise Edition End User License Agreement // that is bundled with this package in the file LICENSE_EE.txt. // It is also available through the world-wide-web at this URL: // http://www.magento.com/license/enterprise-edition // If you did not receive a copy of the license and are unable to // obtain it through the world-wide-web, please send an email // to license@magento.com so we can send you a copy immediately. // // DISCLAIMER // // Do not edit or add to this file if you wish to upgrade Magento to newer // versions in the future. If you wish to customize Magento for your // needs please refer to http://www.magento.com for more information. // // @category design // @package rwd_default // @copyright Copyright (c) 2006-2017 X.commerce, Inc. and affiliates (http://www.magento.com) // @license http://www.magento.com/license/enterprise-edition // /* ============================================ * * Catalog - Product * ============================================ */ @include bp(min-width, $bp-medium + 1) { .catalog-product-view { // background cover .main-container { max-width: 100%; padding-left: 0; padding-right:0; padding-bottom: 0; .breadcrumbs, .product-top, { max-width: $max-container-width; margin: 0 auto; padding: 0 $trim 25px; } .box-up-sell { width: 100%; background: #fff; .products-grid { max-width: $max-container-width; margin: 0 auto; padding: $trim-small; display: flex; justify-content: center; flex-wrap: wrap; li { float:none; margin: 0 .8%; } } } } } } .product-view { .product-essential { .extra-info { .ratings { .rating-box, .amount { float: left; } .rating-box { margin-top: 8px; margin-right: $gap; } &:after { @include clearfix; } } } &:after { @include clearfix; } } .product-shop .product-name .h1, .product-img-box .product-name h1 { //color: $c-action; //margin-bottom: 10px; border: 0; } .product-shop { width: 31%; float: right; .sku { font-size: $f-size-xxs; font-family: $f-stack-gt-extended-medium; padding-bottom: 13px; @include bp(max-width, $bp-medium) { padding-bottom: 5px; } } .product-name { //display: none; float: left; padding-bottom: 36px; .h1 { //float: left; //margin-bottom: 5px; font-size: $f-size-xxl + 2; font-family: $f-stack-gt-standard-medium; text-transform: none; } @include bp(max-width, $bp-medium) { padding-bottom: 20px; } } .short-description { font-size: $f-size-s; line-height: 22px; } .extra-info { float: left; padding-right: $trim/2; clear: left; width: 70%; } .price-info { float: right; padding-left: $trim/2; text-align: right; } .extra-info, .price-info { max-width: 70%; margin-bottom: $box-spacing; } .short-description { margin-bottom: $box-spacing; clear: both; } .ratings { margin-bottom: 8px; } .availability { font-size: $f-size-xl; } .price-box { margin-top: 0; .old-price, .special-price, .regular-price { padding-right: 0; line-height: 1.2; } .regular-price .price, .special-price .price, .full-product-price .price { //color: $c-action; font-size: $f-size-xxl; } .special-price { .price-label { font-size: $f-size-xl; text-transform: uppercase; } span.weee { color: $c-text; span.price { font-size: $f-size-xl; } } } .price-excluding-tax, .price-including-tax { display: block; line-height: 1.2; color: $c-text; .label { font-size: $f-size-xl; font-weight: 300; } .price { font-size: 20px; } } } } .price-box.map-info a { display: inherit; } .old-price { .price-label { display: none; } } .add-to-cart-wrapper, .block-related { /* width: 50%; float: right; clear: right; */ } } @include bp(max-width, 850px) { .product-view { .product-shop { .price-box { .price-excluding-tax, .price-including-tax { .label { font-size: $f-size-l; } .price { font-size: $f-size-xxl; } } } } } } @include bp(max-width, $bp-medium) { .catalog-product-view .main-container { padding-bottom: 0; } .product-view { .add-to-cart-wrapper { float: none; width: 100%; clear: both; } .product-shop { .price-box { .price-excluding-tax, .price-including-tax { .label { font-size: $f-size-xl; } .price { font-size: 20px; } } } } } } @include bp(max-width, 420px) { .product-view { .product-shop { .price-box { .price-excluding-tax, .price-including-tax { margin-bottom: 5px; span { display: block; } } } } } } .product-img-box { width: 68%; float: left; .product-name { h1 { border: 0; } } .product-image { margin-bottom: $box-spacing; } .product-image img { max-width: 100%; // Since product detail page images are not cropped to a specific aspect ratio, in order to make the image not // cut off on tall skinny screens, we are setting a max-height on the image //max-height: 750px; // Centering the image for instances where max-height kicks in margin: 0px auto; cursor: pointer; } .product-image.main_img img { cursor: default; } ul { li { width: 15%; &:first-child { width: 84%; float: right; } } &:after { @include clearfix; } @include bp(max-width, $bp-small) { li { width: 100%; &:first-child { width: 100%; //float: none; } } .slick-prev{ left: 0px; transform: translate(0, -200%); z-index: 2; &:before { display: none; } &:after { @include arrow(left, 10px, 2px, $c-text); } } .slick-next { right: 0px; transform: translate(0, -200%); &:before { display: none; } &:after { @include arrow(right, 10px, 2px, $c-text); } } } } &:after { @include clearfix; } } // On smaller devices, we want to further limit the height of the image, to prevent cropping @include bp(max-width, $bp-xsmall) { .product-img-box .product-image img { max-height: 450px; } } .product-image-gallery { position: relative; .gallery-image { display: none; &.visible { display: block; &.hidden { visibility:hidden; } } } @include loadingOverlay(); } .product-image-thumbs { li { display: inline-block; } li:first-child { margin-left: -1px; } a { display: inline-block; border: 1px solid transparent; } } .no-touch .product-image-thumbs { a:hover { border-color: darken($c-module-border-light, 15%); } } .product-view .product-shop, .product-view .add-to-cart-wrapper, .product-view .block-related { //padding-left: $trim/2; } .product-img-box { //padding-right: $trim/2; } .product-view .product-shop, .product-img-box, .product-collateral, .product-view .block-related, .box-collateral { //margin-bottom: $box-spacing; } .product-view { .add-to-box:after, .add-to-cart:after { @include clearfix; } /* .add-to-cart { padding-bottom: 3px; margin-bottom: 10px; border-bottom: 1px solid $c-module-border; } */ /* Set a min-height so that the floated elements break appropriately */ .add-to-cart .qty-wrapper, .product-options-bottom .price-box, .add-to-cart-buttons { min-height: 40px; } .product-options-bottom .price-box, .add-to-cart .qty-wrapper, .add-to-cart-buttons .button, .add-to-cart-buttons .paypal-logo { margin-bottom: 10px; } .add-to-cart .qty-wrapper, .add-to-cart .qty-wrapper label { margin-right: 7px; float: left; } .add-to-cart .qty-wrapper label { line-height: 40px; } .add-to-cart .qty-wrapper .qty { float: left; height: 40px; } .add-to-cart-buttons { //float: left; //margin-right: 10px; max-width: 100%; // Constrain width in Firefox .paypal-logo { clear: left; text-align: center; .paypal-button { margin: 0 auto; display: block; width: 170px; } .bml_button { display: block; width: 174px; margin: 0 auto; a { text-align: center; } } .paypal-or { display: block; margin-bottom: 10px; margin-left: 0; margin-right: 0; line-height: 1; text-align: center; } } } /* .add-to-cart { margin-bottom: 75px; } */ .shoprunner-wrapper { ._SRD { padding: 20px 0 40px; .srd_logo { display: inline-block; padding: 0 7px 0 0; float: none; position: relative; margin-bottom: -6px; } .srd_iconline { text-align: center; } .srd_msg { display: inline; padding: 0; } .srd_a_wrap { display: block; text-align: center; } @include bp(max-width, $bp-medium) { padding: 20px 0; } } } .add-to-cart-buttons { padding-top: 30px; text-align: center; .button { min-height: 50px; line-height: 50px; font-size: $f-size-xxs+1; padding: 0 58px; //float: left; min-width: 160px; //width: 100%; white-space: normal; display: inline-block; } @include bp(max-width, $bp-medium) { padding-top: 20px; .button { width: 100%; padding: 0; } } } .alert-price, .alert-stock { clear: both; } } @include bp(max-width, $bp-xsmall) { .product-view .add-to-cart-buttons { .paypal-or { line-height: 20px; } .paypal-logo, .paypal-or, .paypal-button, .button { text-align: center; width: 100%; display: block; margin-right: 0; margin-left: 0; float: none; } } } /* This is the "or" that separates the "Add to Cart" and "Add to X" links */ .add-to-box .or { display: none; } .product-view .add-to-links { clear: both; margin-top: 0px; margin-right: 15px; float: left; &:after { @include clearfix; } li { float: left; } a { padding: 2px 7px 2px 0px; margin-left: 7px; border-right: 1px solid $c-module-border; } li:first-child a { margin-left: 0px; } li:last-child a { border-right: 0px; } } .product-view .sharing-links { float: left; &:after { @include clearfix; } li { float: left; padding: 0px 7px 7px; } a { @include image-replacement; @extend .icon-sprite; display: block; width: 26px; height: 26px; } a:hover { opacity: 0.8; } a.link-wishlist { background-position: 0px -225px; } a.link-compare { background-position: 0px -250px; } a.link-email-friend { background-position: 0px (-325px + 3px); } a.link-facebook { background-position: 0px -425px; } a.link-twitter { background-position: 0px (-375px + 3px); } } @include bp(max-width, 599px) { .add-to-box .add-to-links { a { float: none; width: auto; @include image-replacement-override; } } } .product-collateral { clear: both; } .collateral-tabs { dd { h2 { display: none; } } .tab-container { font-family: $f-stack-gt-standard-medium; font-size: 14px; letter-spacing: 0.3px; line-height: 22px; padding-top: 15px; .tab-content { ul li { display: block; } } } } .box-collateral { clear: both; } //@include bp(min-width, $bp-medium + 1) { .product-collateral { @include tabs; @include bp(max-width, $bp-medium) { //border-top: 1px solid $c-text; padding-top: 20px; &:before { content: ''; display: block; border-top : 1px solid $c-text; position: relative; padding: 0 15px; margin: 0 -15px; box-sizing: content-box; height: 20px; } } } //} @include bp(max-width, $bp-medium) { /* .product-collateral { @include accordion; @include accordionCollapse; } */ } @include bp(max-width, $bp-medium) { .product-view .product-shop, .product-view .add-to-cart-wrapper, .product-view .block-related, .product-img-box, .product-collateral { width: 100%; float: none; padding-right: 0; padding-left: 0; } .product-view .product-shop { //padding: 20px 15% 0; background: #fff; position: relative; margin: auto -30px; padding: 20px 30px; box-sizing: content-box; > div { padding: 20px 15% 0; } } } @include bp(max-width, $bp-small) { .catalog-product-view { .main-container { padding-bottom: 0; } .product-collateral { margin-bottom: 0; padding-bottom: 15px; padding-top: 0; } } .product-view .product-shop { padding: 20px 15px 0; background: #fff; position: relative; margin: 0 -15px; box-sizing: content-box; > div { padding: 0; } } .product-view .product-img-box { position: relative; top: -30px; } } @include bp(min-width, $bp-medium + 1) { .product-view .product-shop .product-name { display: block; } .product-img-box .product-name { display: none; } } @include bp(max-width, $bp-xsmall) { .product-view .product-shop, .product-img-box, .product-collateral, .product-view .block-related, .box-collateral { margin-bottom: $trim-small; } } .product-view .ratings { .rating-links { clear: left; float: left; margin-top: 0; } } #product-attribute-specs-table { max-width: $max-std-formatted-width; border: 1px solid $c-table-border; th { border-right: 1px solid $c-table-border; border-bottom: 1px solid $c-table-border; } } /* -------------------------------------------- * * Catalog - Grouped Product List */ .grouped-items-table-wrapper { border: solid 1px $c-table-border; width: 100%; padding: $box-spacing; margin-bottom: 15px; tbody tr:last-child td { border-bottom: none; } @include bp(max-width, $bp-xsmall) { margin-bottom: $trim-small; } } .grouped-items-table { .name-wrapper { color: $c-text-primary; font-family: $f-stack-special; } .qty-wrapper { padding-top: $element-spacing; } .qty-label { margin-left: $element-spacing; } td { padding: 4px; &:last-child { width: 30%; text-align: left; } } .price-box{ text-align: right; } } /* -------------------------------------------- * * Catalog - Product Options */ .product-options { margin-top: 36px; width: 100%; clear: both; position: relative; } .product-options p.required { display: none; position: absolute; top: 6px; right: 15px; text-align: right; } @include bp(max-width, $bp-large) { .product-view .product-options .required { position: static; } } .product-options dt { margin: $gap 0 3px; font-weight: normal; } .product-options dt:first-child { margin-top: 0; } .product-options dd .qty-holder { display: block; padding: $gap 0 0 0; } .product-options dd .qty-holder .qty { width: 3em; } .product-options dd .qty-holder label { vertical-align: middle; } .product-options dd .qty-disabled { background: none; border: 0; padding: 0 2px; } .product-options dd { padding: 0; margin: 0 0 18px; border-bottom: 1px solid $c-black; @include bp(max-width, $bp-medium) { border-bottom: 0 none; margin: 0; } &:last-child { border-bottom: 0 none; } > .label { font-family: $f-stack-gt-extended-medium; font-size: $f-size-xxs; text-transform: uppercase; letter-spacing: 1.3px; margin-bottom: 14px; span { text-transform: capitalize; letter-spacing: normal; font-size: $f-size-xxs + 1; display: inline-block; border-bottom: 1px solid $c-text; padding-bottom: 3px; margin-left: 10px; } @include bp(max-width, $bp-small) { font-size: $f-size-xxs + 1; } } .color-swatch { display: inline-block; overflow: hidden; width: 12%; height: 15px; margin: 0 3% 18px; border: 1px solid #bbb; img { width: 100%; max-width: 100%; min-height: 22px; } &:first-of-type { margin-left: 0; } } .size-label { float: left; margin-right: 12px; span { display: none; } } a.size-swatch { font-family: $f-stack-gt-extended-medium; font-size: $f-size-xxs; color: $c-text; margin: 0 9px; display: inline-block; vertical-align: top; &.active { border-bottom: 1px solid $c-text; padding-bottom: 3px; } @include bp(max-width, $bp-medium) { margin: 0 17px; } @include bp(max-width, $bp-small) { font-size: $f-size-xxs + 1; } } } .product-options dl.last dd.last { border-bottom: 0; padding-bottom: 5px; margin-bottom: 0; } .product-options dd .input-text { width: 98%; } .product-options dd .input-box { padding-top: 0; } .product-options dd input.datetime-picker { width: 150px; } .product-options dd .time-picker { @include inline-block; padding: 2px 0; vertical-align: middle; } .product-options dd textarea { width: 98%; height: 8em; } .product-options dd select { width: 330px; max-width: 100%; } .product-options ul.options-list { margin-right: 5px; } .product-options ul.options-list li { line-height: 1.5; margin-bottom: 7px; } .product-options ul.options-list li:last-child { margin-bottom: 0; } .product-options ul.options-list .radio, .product-options ul.options-list .checkbox { float: left; margin-top: 5px; } .product-options ul.options-list .label { display: block; } .product-options ul.options-list label { font-weight: normal; } .product-options p.note { margin: 0; font-size: $f-size-xxs; } .product-options-bottom { //background-color: $c-module-background; padding: 0; //border: 1px solid $c-fieldset-border; border-top: 0; margin-bottom: $box-spacing; } .product-options-bottom:after { @include clearfix; } .product-options-bottom .product-pricing, .product-options-bottom .tier-prices { float: right; margin: 0; padding: 0 0 $gap; border: 0; background: 0; color: $c-text; @include bp(max-width, $bp-xlarge) { float: none; width: 100%; text-align: right; padding-bottom: $gap / 2; margin-bottom: $gap; border-bottom: 1px solid $c-fieldset-border; } } .product-options-bottom .tier-prices li { background: 0; padding: 2px 0; } .product-options-bottom .tier-prices .price, .product-options-bottom .tier-prices .benefit { color: $c-text; } /* "display: none" should be removed if products on site have a long list of product options and those product options */ /* affect the price so that the customer can see the updated price close to the "Add to Cart" button */ .product-options-bottom .price-box { display: none; float: right; margin: 0 0 $gap; padding: 0; } @include bp(max-width, $bp-xsmall) { .product-options-bottom .price-box .price-as-configured { text-align: right; .price-label { display: block; } } } .product-options-bottom .price-tax { float: left; } /* -------------------------------------------- * * Related Products */ /* Block: Related */ .block-related { li { margin-bottom: $element-spacing; } .block-title { border-bottom: none; h2 { @include h2(); margin-bottom: 0; } } .block-subtitle { margin-bottom: $element-spacing; } .product { margin-left: 20px; position: relative; } .checkbox { float: left; margin-top: 36px; } .product-details { margin-left: 90px; } .product-name { margin-bottom: 3px; } .product-details .price-box { margin: 2px 0 3px; a, p, span { float: left; margin-left: 3px; &:first-child { margin-left: 0; font-size: $f-size-xl; padding-right: 5px; padding-left: 5px; } } &:after { @include clearfix; } } .link-wishlist { display: none; } } /* -------------------------------------------- * * Upsell Products */ .box-up-sell { padding-bottom: $trim*3; h2 { font-family: $f-stack-gt-extended-medium; letter-spacing: 1.2px; font-size: $f-size-xxl+2; text-align: center; padding: $trim*2 0 $trim; } padding-top: $box-spacing-large; .ratings { display: none; } @include bp(max-width, $bp-medium) { display: none; } } .product-top:after { @include clearfix; } /* * Swatches */ .product-view { a.size-swatch { position: relative; } a.size-swatch .blocker { position: absolute; height: 100%; width: 100%; top: 0; left: 0; } a.size-swatch .blocker:after{ content: ""; position: absolute; border-top: 1px solid #000; width: 177%; transform: rotate(-45deg); transform-origin: 0% 0%; top: 13px; right: -5px; } .product-view .product-shop .product-options .label.price-change { margin: 5px 0 0; padding: 0; } .product-view .product-shop .product-options .price-box { margin: 0 0 3px; padding: 0; border-bottom: 0 none; } .product-options .price-box p { margin: 0; padding: 0; } } /* * Size Chart */ .size-chart-container { position: relative; .size-chart-button { position: absolute; right: 0; top: -41px; text-transform: uppercase; font-family: $f-stack-gt-extended-medium; font-size: $f-size-xxs; color: #8c8c8c; @include bp('max-width',$bp-medium) { top: -97px; } } }