//////////////////////////////////////////////////////////////////// // // // E-COMMERCE // // // //////////////////////////////////////////////////////////////////// // Shared Classes // ----------------------------------------------------------------- .price { color:$accent; font-weight:bold;} .sold-out { color:$grayLight; } .discount { color:darken($green, 15%);} .paid_green {color: $green;} .paid_red {color: $red;} // Header Dropdowns // ----------------------------------------------------------------- #links-user { margin-right: 5px; > li { z-index: 100; position: relative; > a { font-size: $baseFontSize - 3; color:#959ea3; text-transform: uppercase; &:hover { color:#fff; i { color: $linkColor;} } } } .dropdown-menu { margin: 0; // override default ul padding: 15px 20px; background-color: $white; border: 1px solid #d1d1d1; @include box-shadow(0px 1px 5px 0px rgba(0, 0, 0, .25)); z-index: 101; > li > a { padding-left: 0; padding-right: 0; color: $textColor; &:hover, &:focus, &:active { @include remove-gradient(); color: $linkColor; } } > .active > a, > .active > a:hover, > .active > a:focus, > .active > a:active { @include remove-gradient(); color: $linkColor; } } } #loginBox { a { padding:0 !important;} } // User Login Form // ----------------------------------------------------------------- #user-login-form, #user-forgot-form, #user-form { #register-label, #forgot-label {display:none;} } #user-login-form { label.required {background:none; padding:0; margin:0;} } #user-form { width:auto; #membershipTypeId-label label { font-size: 21px; border-bottom: 1px solid #E5E5E5; line-height: 44px; background: none; margin:0 0 $baseLineHeight 0; padding-left: 0;} #membershipTypeId-element { margin-bottom: $baseLineHeight;} } [class*="span"] { > #user-forgot-form { max-width: 500px; margin: 0 auto;} } #user-login-form { max-width:280px; margin:0 auto; } .user_login_form { #user-short-login-form-autologin-element, #user-short-login-form-autologin-element label, #user-short-login-form-links-element { white-space: nowrap; font-size: $baseFontSize - 2; margin-bottom: 0; } #btnSubmit-element { margin-bottom: $baseLineHeight/2; text-align:center; } } .register-membership { margin-bottom: $baseLineHeight; background-color: $wellBackground; border: 1px solid darken($wellBackground, 7%); @include border-radius($baseBorderRadius); @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); .main-description { padding:$baseLineHeight; } .register-cost { padding:$baseLineHeight/2 $baseLineHeight; background-color: $accent; color: $white; span { color: inherit; font-size: $baseFontSize + 3;} } } // Featured products // ----------------------------------------------------------------- #featured-products { background-color:transparent !important; //height:300px !important; // need to update height in template also .rsSlide, .rsOverflow {background-color:transparent !important;} .rsContent { text-align: center;} .rsArrow { width:32px;} .rsArrowIcn { background-color: #000; background-color: rgba(0,0,0,0.1); *background-color: #000; &:hover {background-color: rgba(0,0,0,0.9);} margin-top: -60px; } h5 { line-height: normal; margin:5px 0 0;} } // Product Detail // ----------------------------------------------------------------- .side_block h2 > a.active {color: $grayDarker;} #product { h2.hdr-product { @include font-shorthand(40px, 200, 45px); } .price { font-size: 30px; + p {color: $grayDarker;} small { font-size: $baseFontSize; color: red; font-weight: normal;} } form.cart_form { @include clearfix(); dt, dd { float: left; margin-right: 10px; } label.required { background:none;} input.quantity {width: 40px;} label.quantity_label {line-height: 32px;} } } #products-list { h5, .price { font-size: $baseFontSize + 3; } li { border:1px solid #fff; padding:10px; @include transition(all ease 0.2s); > a { text-align: center; display: block; } &:hover {border:1px solid #999; @include transition(all ease 0.2s); @include box-shadow(1px 1px 3px rgba(0,0,0,0.15));} form, dd { margin-bottom: 0;} } } #shopping-cart td {vertical-align: middle!important;} #product-images { width: 100%; //max-height: 278px; //min-height: 278px; background: none repeat scroll 0 0 transparent; margin-bottom: $baseLineHeight - 10; .rsOverflow { margin-bottom: 15px; } .rsContent { a { position: absolute; bottom: 30px; right: 8px; font-size: 28px; color: rgba(white, .6); &:hover:after { content: "Zoom In"; display: block; position: absolute; top: -110%; right: -9px; font-size: 15px; white-space: nowrap; background: #000; padding: 4px 4px 4px 4px; color: #fff; } } } &.rsDefault .rsThumb.rsNavSelected img {opacity: .5;} &.rsDefault .rsThumb {background-color: #f5f5f5 !important;} .rsOverflow, .rsSlide, .rsVideoFrameHolder, .rsThumbs, .rsThumb.rsNavSelected { background: none repeat scroll 0 0 transparent; color: #000; } .rsSlide { cursor: pointer; // &:after { // position: absolute; // z-index: 5; // content: "\f00e"; // color: #FFF; // font-family: FontAwesome; // font-size: 24px; // display: block; // right: 5px; // bottom: 33px; // opacity: 0.75; // } } &.rsFullscreen { .rsOverflow, .rsSlide, .rsVideoFrameHolder, .rsThumbs, .rsThumb.rsNavSelected { background: none repeat scroll 0 0 #010101; color: #000; } .rsGCaption { text-align: center; font-size: 0.9em; } .rsImg { position: absolute; top: 50%; left: 50%; -moz-transform: translateY(-50%) translateX(-50%); /* Для Firefox */ -ms-transform: translateY(-50%) translateX(-50%); /* Для IE */ -webkit-transform: translateY(-50%) translateX(-50%); /* Для Safari, Chrome, iOS */ -o-transform: translateY(-50%) translateX(-50%); /* Для Opera */ transform: translateY(-50%) translateX(-50%); } } .rsSlide img { width: auto; max-width: 100%; height: auto; } .rsThumb { //height:70px; text-align: center; } /*.rsThumbsContainer { width:100% !important; -webkit-transform:none !important; -moz-transform:none !important;}*/ .rsThumbsHor { @include clearfix(); height: auto; text-align: center; -webkit-transform:none !important; -moz-transform:none !important; } .rsThumb img { width:auto !important; display: inline-block; } .rsThumbsArrow { height: 100%; bottom: 0 !important; top: auto; } // .rsThumb { // width: auto; // height: 45px; // padding: 10px; // border: 1px solid #e1e1e1; // border: 1px solid rgba(#aaa,0.5); // margin-bottom: 10px; // display:inline-block; // float:none; // overflow: visibleg; // img { // height: 45px; // width: auto; // } // } // /*.rsThumb.rsNavSelected img { // @include opacity(70); // }*/ .rsGCaption { width: 100%; padding-left: 0; padding-right: 0; left: 0; bottom: 0; > .rsCaption { display: block; padding: 0 6px; } } } // Post Checkout Screen // ----------------------------------------------------------------- .pre_check { text-align: center; margin-bottom: $baseLineHeight; .ecommerce_login_form { max-width:280px; margin:0 auto; text-align: left; } &.new_cust { .btn { min-width:170px; } .or { line-height: $baseLineHeight * 2.5; font-weight: bold; } .plus { color:$accent;} } .btn {padding:8px 20px;} #forgot-label { display:none;} } // Billing Form // ----------------------------------------------------------------- #ecommerce-form { margin-bottom: $baseLineHeight; #billing-element { width:48%; float:left; } #shipping-element { width:48%; float:right; } #serviceShipping-element { clear:both;} #fieldset-submitGroup { border: 0 none; margin: 0; padding: 0; text-align: center; } > dl > dd > fieldset { border-width: 3px 1px 1px 1px; border-color: $accent $grayLighter $grayLighter $grayLighter; border-style: solid; margin-bottom: $baseLineHeight; padding: 20px 30px; @include box-sizing(border-box); legend { color: $black; padding: 0 10px; font-size: $baseFontSize * 1.45; margin: 0; width: auto; border: none; &:before { display: block; float: left; width: 24px; height: 24px; margin: 12px 12px 0 0; text-align: center; background: $accent; color: $white; font-size: 14px; line-height: 24px; font-weight: bold; @include border-radius(12px); } } } #fieldset-servicePayment { margin:0;} #fieldset-billing legend:before { content: "1"} #fieldset-shipping legend:before { content: "2"} #fieldset-serviceShipping legend:before { content: "3"} #fieldset-servicePayment legend:before { content: "4"} #fieldset-orderSummary legend:before { content: "5"} #serviceShipping-type-label, #servicePayment-type-label, #servicePayment-usePromoCodeValue-label, #servicePayment-useGiftCardValue-label { display:none;} #fieldset-orderSummary #cartSummary { background:none; border:none; padding-top: 0;} &.no-shipping { #shipping-element, #serviceShipping-element { display: none;} #billing-element { width: 100%; float:none;} #fieldset-billing legend:before { content: "1"} #fieldset-servicePayment legend:before { content: "2"} #fieldset-orderSummary legend:before { content: "3"} } &.no-payment { #servicePayment-element { display: none;} #fieldset-billing legend:before { content: "1"} #fieldset-shipping legend:before { content: "2"} #fieldset-serviceShipping legend:before { content: "3"} #fieldset-orderSummary legend:before { content: "4"} } table.order td {vertical-align: middle !important;} } // Shipping Section #fieldset-serviceShipping { > dl { @include clearfix(); > dd { float: left; width: 30%; margin-left: 2%; &#serviceShipping-typeGroup-element {margin-left: 0;} &#serviceShipping-rateGroup-element { float: right; .alert { font-weight: normal; margin-top: $baseLineHeight / 2; } } table.radiolist td label { margin-right: 5px; white-space: nowrap; } } } #serviceShipping-type-element { label { display:block; height:33px; } input { margin:0; padding:0; vertical-align: middle; } span { display:inline-block; line-height:33px; padding-left:50px; margin-left: 10px; background-repeat: no-repeat; background-position: 0 center; } .ups { background-image: url('../images/ecommerce/ups.png');} .usps { background-image: url('../images/ecommerce/usps.png');} .fedEx { background-image: url('../images/ecommerce/fedex.png');} .manual { background-image: url('../images/ecommerce/manual.png');} br { display:none;} } #serviceShipping-upsMethod-element, #serviceShipping-fedExMethod-element { clear:left;} #serviceShipping-upsTitle-element, #serviceShipping-uspsTitle-element, #serviceShipping-fedExTitle-element, #serviceShipping-manualTitle-element { display:inline-block; line-height:33px; padding-left:50px; margin-left: 10px; background-repeat: no-repeat; background-position: 0 center; } #serviceShipping-upsTitle-element { background-image: url('../images/ecommerce/ups.png'); } #serviceShipping-uspsTitle-element { background-image: url('../images/ecommerce/usps.png'); } #serviceShipping-fedExTitle-element { background-image: url('../images/ecommerce/fedex.png'); } #serviceShipping-manualTitle-element { background-image: url('../images/ecommerce/manual.png'); } } // Payment Section #fieldset-servicePayment { > dl { @include clearfix(); > dd { float: left; width: 30%; margin-left: 3%; &#servicePayment-typeGroup-element {margin-left: 0;} &#servicePayment-additionalGroup-element { float: right;} } } #servicePayment-authorizeNetCardCode, #servicePayment-linkPointCardCode { width:85px; margin-right: 5px; } .tooltip-inner { max-width: 450px;} } #servicePayment-fieldset-authorizeNetMethods, #servicePayment-fieldset-linkPointMethods, #servicePayment-fieldset-PayPalStandardMethods, #servicePayment-fieldset-PayPalExpressCheckoutMethods { padding-top:50px; background-position: 0 0; background-repeat: no-repeat; } #servicePayment-fieldset-authorizeNetMethods, #servicePayment-fieldset-linkPointMethods { background-image:url('../images/ecommerce/payment_cc.png'); } #servicePayment-fieldset-PayPalStandardMethods, #servicePayment-fieldset-PayPalExpressCheckoutMethods { background-image:url('../images/ecommerce/payment_cc_paypal.png'); } #servicePayment-PayPalExpressCheckoutMethods-element, #servicePayment-PayPalStandardMethods-element { padding:0;} #servicePayment-authorizeNetTitle-element { display:none;} #helper-cc { text-align: left; width: 440px; line-height: 18px; h3 { color: $white;} img { margin:0 15px 10px 0; float: left; } } #servicePayment-additionalGroup-element { fieldset { padding: 15px 15px 3px; background-color: $grayLighter; @include border-radius(4px); } dd {@include clearfix();} input.text, .btn { float: left; width: 115px; } input.text { margin-right: 5px;} } #shipping-asBilling-element, #servicePayment-type-element, #servicePayment-usePromoCode-element, #servicePayment-useGiftCard-element { input { float: left; width: 16px; height: $baseLineHeight; position: relative; } label { display: block; @include clearfix(); padding-left: 20px; margin-bottom: 0px; line-height: normal; input { margin-left: -20px;} } br { display:none;} } #servicePayment-usePromoCodeStatic-label, #servicePayment-usePromoCodeValue-label, #servicePayment-useGiftCardStatic-label { display:none !important;} // Floated Summary #checkout-total { @include box-sizing(border-box); width: 100%; margin-bottom: 0; position: fixed; z-index: 200; left: 0; bottom: 0; &.affix-bottom { position: relative; } } // Confirmation #small-submit-form { #noteGroup-element{ float:left; width:55%; textarea { height:85px;} } #submitGroup-element { float:right; width:38%; #fieldset-submitGroup dl { text-align: right; margin-top: $baseLineHeight + 5; .btn { margin-bottom: $baseLineHeight / 2; &.btn-link { display: block; padding-left: 0; padding-right: 0; text-align: right; &:hover { text-decoration: none; } } } } } } /* SHOPPING CART */ .quick-sc, .sc { border-collapse: collapse; tfoot td { background: #f2f2f2; color: $grayDarker; } } .quick-sc { margin-bottom: $baseLineHeight / 2; .col_title {min-width: 150px;} td {vertical-align: middle} } .sc { .cell_quantity { > div {white-space: nowrap;} input {width: 40px;} } tfoot td {font-size: $baseFontSize + 1;} + p { margin: $baseLineHeight 0 0; text-align: right; .btn { margin-bottom: $baseLineHeight / 2; white-space: nowrap; } } } .cart_sum { text-align: right; border-top: 1px solid $tableBorder; padding: 12px 8px; background-color: #f1f1f1; font-size: $baseFontSize + 1; color: $grayDarker; strong { display: inline-block; min-width: 90px; } } .cart_total { margin-bottom: $baseLineHeight; background-color: #e7e7e7; font-size: $baseFontSize + 3; } .cart_sum { div { display: table-row; .lbl-sum { vertical-align: top; text-align: right; width: 100%; } strong { white-space: nowrap; &.discount { small { font-weight: normal; line-height: 15px; display: block; margin-bottom: 5px; } } } .lbl-sum, strong { display: table-cell;} &.hidden { display:none;} } } .sc, .order { margin-bottom: 0; } .order-info { margin-bottom: $baseLineHeight; } .notes-order { border: 1px solid $tableBorder; background: #fafafa; padding: 10px; } //Checkout Footer #checkout-footer { padding-top: $baseLineHeight; } @media all and (min-width: 768px) and (max-width: 979px) { // Products #products-list { h5, .price { font-size: $baseFontSize; } } #product { .row {margin: 0;} .span4 { float: none; margin: 0; width: 100%; } h2.hdr-product { @include font-shorthand(28px, 200, 32px); } .price {font-size: 22px;} } #fieldset-servicePayment { > dl > dd { float: left; width: 45%; margin-left: 3%; &#servicePayment-typeGroup-element {margin-left: 0;} &#servicePayment-additionalGroup-element { float: none; clear: left; width: 100%; margin-left: 0; } } } } @media only screen and (max-width: 767px) { // Products #products-list { h5, .price { font-size: $baseFontSize; } } #product-images { max-width:600px !important; margin:0 auto; @include clearfix();} #product { .row {margin: 0;} .span4 { float: none; margin: 0; width: 100%; } h2.hdr-product { @include font-shorthand(28px, 200, 32px); } .price {font-size: 22px;} } // Responsive tables .tbl-fluid { table, thead, tbody, tfoot, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 35%; text-align: left !important; width: 100% !important; min-height:$baseLineHeight; @include box-sizing(border-box); &.empty { padding: 10px; text-align: center; } } td:before { position: absolute; top: 8px; left: 6px; width: 30%; padding-right: 10px; white-space: nowrap; } .order, .sc { td:nth-of-type(1):before { content: "IMAGE"; } td:nth-of-type(2):before { content: "NAME"; } td:nth-of-type(3):before { content: "QTY"; } td:nth-of-type(4):before { content: "PRICE"; } td:nth-of-type(5):before { content: "TOTAL"; } td.empty:nth-of-type(1):before, tfoot td:nth-of-type(1):before {content: " ";} } .sc + p {text-align: center;} .order-history { td:nth-of-type(1):before { content: "#"; } td:nth-of-type(2):before { content: "SUBMITTED"; } td:nth-of-type(3):before { content: "TOTAL"; } td:nth-of-type(4):before { content: "PAID"; } td:nth-of-type(5):before { content: "STATUS"; } td:nth-of-type(6):before { content: "SHIPPING"; } td:nth-of-type(7):before { content: "OPTIONS"; } } [id^="app-event-history-historylist-"] { td:nth-of-type(1):before { content: "DATE"; } td:nth-of-type(2):before { content: "NAME"; } td:nth-of-type(3):before { content: "PAID ON"; } td:nth-of-type(4):before { content: "PAYMENT"; } td:nth-of-type(5):before { content: "CREATED BY"; } td:nth-of-type(6):before { content: "OPTIONS"; } } [id^="app-user-memberdirectory-memberdirectorylist-"] { td:nth-of-type(1):before { content: "#"; } td:nth-of-type(2):before { content: "NAME"; } td:nth-of-type(3):before { content: "COMPANY"; } td:nth-of-type(4):before { content: "JOINED"; } } } // Cart Summary .cart_sum { div .lbl-sum {text-align: left;} } // Checkout form #ecommerce-form { #billing-element, #shipping-element { width:100%; float:none; } > dl > dd > fieldset { padding: 10px 15px; legend { font-size: $baseFontSize * 1.2; padding: 0 5px; &:before { margin: 12px 5px 0 0;} } } #fieldset-serviceShipping, #fieldset-servicePayment { > dl > dd { float: none; width: 100%; margin-left: 0; &#serviceShipping-rateGroup-element, &#servicePayment-additionalGroup-element {float: none;} } } } #small-submit-form { #noteGroup-element, #submitGroup-element{ float:none; width:100%; } #submitGroup-element { #fieldset-submitGroup dl { margin-top: 0; text-align: center; dd {margin-bottom: 0;} .btn.btn-link { text-align: center; margin-bottom: 0; } } } } #checkout-footer { padding-top: 10px;} } #product-categories { a img { max-height: 225px; background-color: #F5F5F5; vertical-align: middle; display: block; } } @media only screen and (max-device-width: 1280px) and (-webkit-device-pixel-ratio: 2) and (orientation:landscape) { #product-images { width:75%; margin:0 auto;} } @media only screen and (max-width: 640px) { #products-list, #product-categories { img {max-height: 240px;} } } @media only screen and (max-width: 480px) { #product-images { width:80%; margin:0 auto;} } @media only screen and (max-width: 320px) { #helper-cc { width: 305px; } #servicePayment-additionalGroup-element { input.text { width: 90px; } .btn { width: 110px; } } } // Featured products // ----------------------------------------------------------------- #featured-reviews-wrapper { padding: 0 15px; margin-bottom: 10px; @include box-sizing (border-box); #featured-reviews { background-color:transparent !important; //min-height:110px !important; // need to update height in template also //margin: 0 30px; width: auto; .rsSlide, .rsOverflow {background-color:transparent !important;} .rsContent { text-align: center; width: auto; color: $textColor;} .rsArrow { width:30px;} .rsArrowIcn { margin-top: -50px; background-image: none; } .rsArrowLeft { left: 0; &:hover { background: none; &:after { color: $accent; } } &:after{ content: "\f104"; font-family: FontAwesome; display: block; color: #5F5F5F; font-size: 35px; top: 45%; position: absolute; left: -55px; } } .rsArrowRight { right: 0; &:hover { background: none; &:after { color: $accent; } } &:after{ content: "\f105"; font-family: FontAwesome; display: block; color: #5F5F5F; font-size: 35px; top: 45%; right: -55px; position: absolute; } } .date { font-size: 11px;} h4 { line-height: normal; margin:10px 0;} p.review { font-size: $baseFontSize - 1; /*min-height: 100px;*/} } div.text-center { margin-top: 10px; } } #quick-shopping-cart-container { min-width: 400px; tbody tr td a {padding: 4px 0 !important;} }