From: Ian Weller Date: Tue, 9 Aug 2016 13:37:44 +0000 (-0400) Subject: added woocommerce styling X-Git-Tag: v1.0.0^2~19 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=e7684af70027c19b06cef4a54d963db9ad6bea83;p=WP-Themes%2Fdevdemo.git added woocommerce styling --- diff --git a/scss/plugins/_woocommerce.scss b/scss/plugins/_woocommerce.scss new file mode 100644 index 0000000..6262869 --- /dev/null +++ b/scss/plugins/_woocommerce.scss @@ -0,0 +1,1156 @@ + +/* WooCommerce */ +.woocommerce-wrapper #container { + max-width: 700px; + margin: 0 auto; +} +main.woocommerce, +div.woocommerce { + font-family: Arial; + ul, ol, li { +/* list-style: none;*/ + } + #woo-quick-display { + background-color: white; + border-radius: 3px; + border: 1px solid lightgrey; + padding: 5px; + font-size: 16px; + margin-bottom: 25px; + > div { + text-align: center; + } + .button { + border-radius: 3px; + display: inline; + margin-left: 15px; + margin-top: 12px; + padding: 2px 8px; + float: right; + margin: 12px 0 0 18px; + background-color: #476e70; + color: white; + &:hover { + background-color: $blue; + } + } + h3 { + padding-top: 0; + text-align: center; + } + p { + margin-bottom: 0; + } + } + ul.products, .products ol, .products dl { + list-style-type: none; + } + .woocommerce-error, + .woocommerce-info, + .woocommerce-message, + .woocommerce-noreviews, + p.no-comments { + border-left: 0.618em solid rgba(0, 0, 0, 0); + clear:both; + margin-bottom: 20px; + margin-left: 0px; + font-family: arial, sans-serif; + font-weight: bold; + min-height: 55px; + padding-top: 7px; + line-height: 1.2; + .button { + margin: 5px; + float: left; + padding: 5px; + border-radius: 3px; + } + } + #respond input#submit.alt, a.button.alt, button.button.alt, input.button.alt { + background-color: #476e70; + color: white; + &:hover { + background-color: $blue; + } + } + .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals { + float: right; + margin-bottom: 40px; + width: 100%; + } + h1.product_title { + color: $green; + line-height: 1.2; + font-size: 40px; + } + .onsale { + display: none; + } + .page-numbers { + list-style-type: none; + display: flex; + li { + margin: 0 10px; + } + } + #text [class*="column"] + [class*="column"]:last-child { + float: left; + } + #text > .product { + margin-bottom: 20px; + } + .product.type-product { + color: black; + display: block; + a.button { + padding: 5px; + border-radius: 3px; + } + a.button:hover { + color: $black; + } + > div { + padding: 5px; + border-radius: 5px; + } + .tab-description { + display: inline-block; + } + .woocommerce-tabs ul.tabs li.active::before { + + } + .woocommerce-tabs ul.tabs li::before { + box-shadow: 2px 2px 0 $blue; + border-width: 0 1px 1px 0; + } + .woocommerce-tabs ul.tabs li::after, .woocommerce-tabs ul.tabs li::before { + border-color: $blue; + } + .woocommerce-tabs ul.tabs li::after { + box-shadow: -2px 2px 0 $blue; + } + .woocommerce-tabs ul.tabs li::after, .woocommerce-tabs ul.tabs li::before { + border-color: $blue; + } + .woocommerce-tabs { + width: 100%; + clear:both; + /* display: table;*/ + .wc-tab { + padding: 10px; + border: 1px solid lightgrey; + } + ul.wc-tabs { + &:before { + border-bottom-color: lightgrey; + } + &:after { + + } + li { + margin-right: 8px; + background-color: white; + color: $orange; + border: 1px solid $blue; + border-bottom: 0; + display: inline-block; + color: $blue; + &:before { + border-bottom-color: $blue; + box-shadow: 0; + } + &:after { + border-bottom-color: $blue; + } + &:hover { + background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0; + a { + color: white + } + } + a { + display: block; + } + @media #{$large-up} { + /* margin-left: -35px;*/ + } + @media #{$medium-only} { + /* margin-left: -23px;*/ + } + + @media #{$small-only} { + width: 50%; + margin: 0; + font-size: 14px; + text-align: center; + a { + font-size: 14px; + } + &:nth-child(2n) { + float: right; + } + } + } + + li.active { + border-bottom-color: $blue; + background-color: $blue; + border-width: 2px; + color: white; + &:before { + box-shadow: 0; + box-shadow: 1px 1px 0 $blue; + } + &:after { + box-shadow: -2px 2px 0 $blue; + } + &:hover { + background: $blue; + } + a:hover { + color: white; + } + @media #{$small-only} { + border-width: 1px; + } + } + @media #{$small-only} { + padding-left: 0; + } + } + .tabs .reviews_tab, + .tabs .additional_information_tab { + display: none; + } + > div.panel { + background-color: white; + } + p.stars { + a { + font-size: 20px; + padding: 0 10px; + } + a.active { + background-color: $black; + border-radius: 2px; + } + } + + } + .sku_wrapper { + display: none; + } + } + #address_form { + small { + display: inline-block; + font-size: 100%; + padding: 9px; + } + } + #tiptip_content { + font-family: Arial; + font-size: 12px; + } + .single_variation_wrap .quantity { + float: right; + margin-bottom: 10px; + input { + display: inline-block; + background-color: white; + height:40px; + width: 50px; + padding: 0; + margin: 0 5px; + } + } + #payment .payment_methods { + .form-row.place-order { + text-align: center; + } + ul.payment_methods { + list-style-type: none; + } + .payment_box > p { + margin: 0; + } + .payment_box fieldset { + margin: 0; + padding: 10px 10px 0; + } + .payment_box fieldset .form-row { + width: 100%; + } + @media #{$large-up} { + .payment_box fieldset .form-row { + width: 31%; + float: left; + } + .payment_box fieldset .clear { + clear: none; + } + } + .payment_box fieldset .form-row label { + padding: 0; + } + select[name="wc-intuit-qbms-test-condition"] { + margin: 0; + } + #wc-intuit-qbms-account-number{ + max-width: 200px; + } + } + .pf-content { + margin-top: 20px; + } + table.shop_table { + width: 100%; + .coupon { + display: none; + } + .product-thumbnail { + display: none; + @media #{$large-up} { + display: default; + } + + } + .quantity { + display:table; + .input-text { + margin: 0; + } + .minus, + .plus { + background-color: transparent; + box-shadow: none; + color: #a46497; + font-weight: 700; + width: 50px; + height: 40px; + } + } + } + .quantity .minus:hover, .quantity .plus:hover { + background-color: transparent; + color: inherit !important; + } + .checkout { + #customer_details { + display: inline-block; + width: 100%; + max-width: 600px; + } + .woocommerce-billing-fields, + .woocommerce-shipping-fields { + margin: 0 auto 40px; + max-width: 600px; + padding: 20px; + border: 1px solid $secondary-color; + p { + margin-bottom: 15px; + input { + margin-bottom: 15px; + } + } + } + } + #content-wrapper.woocommerce-wrapper { + .content { + padding: 20px 5px; + } + @media #{$small-only} { + .main { + padding: 0; + } + } + } + #content { + margin-top: 25px; + } + .woocommerce-ordering select.orderby { + max-width: 200px; + } + main.page-inside #content-wrapper #main-content #main-text.shop-cat-list { + padding: 0 6px; + } + main.page-inside #content-wrapper #main-content #main-text.shop-cat-list .shop-cat-list-content > div { + padding: 0; + } + main.page-inside #content-wrapper .content { + border-bottom: 3px solid #c5aa6d; + box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.8); + } + #content-wrapper.woocommerce-wrapper .main.woo-single-product { + padding: 20px 3%; + } + nav.top-bar .top-bar-section > ul > li.drop > ul.dropdown .woocommerce { + .products { + position: inherit; + border: 0 !important; + } + .product-category { + margin-bottom: 0; + height: 25px; + } + .product-category h3 { + font-size: 12px; + font-weight: normal; + padding: 0.5em 20px; + } + .product-category:hover h3 { + color: #25c2e6 !important; + } + img { + display: none; + } + } + .left-off-canvas-menu > ul > li.has-dropdown > ul.dropdown .woocommerce { + .products { + position: inherit; + border: 0 !important; + } + .product-category { + margin-bottom: 0; + height: 28px; + } + .product-category h3 { + color: white; + font-size: 12px; + font-weight: normal; + padding: 0.5em 20px; + } + img { + display: none; + } + a { + margin-left: 40px; + padding: 0; + } + } + #payment .payment_methods label { + padding: 0 0 20px; + margin: 0; + width: 80%; + } + #shipping_method input[type="checkbox"]+label, input[type="radio"]+label { + margin-left: 25px; + } + .cart_item .product-name { + min-width: 160px; + font-size: 15px; + font-weight: bold; + } + .woocommerce-checkout-review-order-table .product-quantity { + float: right; + } + #content .cart_item td.product-name dl.variation dd, dd p, dt { + font-size: 12px; + font-weight: normal; + margin-bottom: 0; + line-height: 1; + } + #content td.product-name dl.variation { + dd, dt { + margin-bottom: 0; + } + + } + #content .product.type-product .variations_form .variations { + margin: 0 auto; + width: auto; + min-width: 190px; + max-width: 220px; + } + .variations tbody, + .variations tbody tr { + display: block; + } + .page-numbers li { + float: left; + } + .related.products { + margin-top: 30px; + } + h3#ship-to-different-address { + font-weight: bold; + } + .woocommerce-breadcrumb { + display: none; + } + + /* General CSS */ + #content .product.type-product { + .product_meta { + clear: both; + padding-top: 25px; + } + .product_meta a { + display: initial; + } + .product_meta .posted_in { + display: none; + } + .variations_form a.reset_variations { + display: none !important; + } + .variations_form { + clear: both; + display: table; + width: 100%; + margin-bottom: 20px; + .variations { + display: block; + margin: 0 auto; + width: auto; + min-width: 190px; + max-width: 220px; + border: 0; + margin-top: 30px; + ul { + border: 1px solid darkgrey; + margin-left: 0; + text-align: left; + } + display: block; +/* @media #{$large-up} { + display: inline-block; + width: 50%; + }*/ + .label { + display: block; + } + .label label { + color: white; + } + .value { + padding-right: 0; + display: block; + fieldset { + border: none; + padding-top: 0; + padding-bottom: 0; + margin-top: 0; + margin-bottom: 0; + p { + margin-bottom: 5px; + } + } + } + input[type="file"], input[type="checkbox"], input[type="radio"], select { + margin-bottom: 0; + margin-right: 0; + } + select { + background-color: $blue; + border-radius: 5px; + color: white; + border: none; + } + select * { + background-color: lightblue; + color: black; + } + } + .single_variation_wrap { + margin: 0 auto; + float: right; + clear: both; + .single_variation { + padding: 10px; + float: right; + @media #{$small-only} { + float:none; + text-align: center; + } + } + } + .variations_button button { + border-radius: 3px; + font-size: 16px; + margin: 12px 0 0; + padding: 8px 28px; + } + @media #{$medium-down} { + + .variations, + .single_variation_wrap, + .single_variation_wrap .variations_button, + .single_variation_wrap .variations_button .quantity { + text-align:center; + float: none; + margin-left: auto; + margin-right: auto; + clear: both; + } + .single_variation_wrap .variations_button .quantity { + clear: none; + } + } + @media #{$small-only} { + .single_variation_wrap { + width: 100%; + } + } + } + h1.product_title { + color: #0f789f; + font-size: 24px; + font-family: open sans; + font-weight: bold; + line-height: 1; + margin: 0 auto; + width: 90%; + } + .single_add_to_cart_button { + border-radius: 3px; + clear: both; + float: right; + @media #{$medium-down} { + float:none; + } + background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0; + font-size: 16px; + margin: 12px 0 0; + padding: 8px 28px; + border:1px solid transparent; + &:hover, &:focus { + background-color: white; + border:1px solid $blue; + } + } + > div { + float: left; + } + .related.products { + width: 100%; + } + .quantity, .qty { + float: right; + @media #{$small-only} { + float:none; + margin: 0 auto; + } + display:table; + height: 25px; + padding: 2px 0 2px 5px; + .input-text { + margin: 0; + } + .minus, + .plus { + background-color: transparent; + box-shadow: none; + color: #a46497; + font-weight: 700; + width: 50px; + height: 40px; + } + .minus:hover, + .plus:hover { + background-color: transparent; + color: inherit !important; + } + } + .cart-qty-label { + float: none; + text-align: center; + clear: both; + margin-left: 5px; + } + .price { + color: transparent; + margin-bottom: 0; + font-size: 32px; + margin: 0; + float: right; + text-align: right; + @media #{$small-only} { + float:none; + text-align: center; + } + display: block; + line-height: 1.0; + > * { + height: 40px; + } + span { + color: $orange; + font-size: 40px; + margin-top: -2px; + } + span:nth-child(2) { + display: none; + } + del { + color: $blue; + } + } + .price.price-single { + clear: both; + float: none; + text-align: left; + padding-bottom: 5px; + span { + color: black; + font-size: 22px; + } + @media #{$medium-down} { + text-align: center; + } + } + .stock { + color: black; + float: right; + @media #{$small-only} { + float:none; + text-align: center; + } + clear: both; + font-size: 14px; + } + @media #{$small-only} { + margin-top: 20px; + .images { + width: auto; + max-width: 260px; + margin: 0 auto; + float: none; + } + .summary.entry-summary { + width: 100%; + } + .summary.entry-summary h1 { + font-size: 32px; + } + } + .related .products .product.type-product h3 { + font-size: 13px; + font-weight: normal; + } + .summary.entry-summary > div[itemprop="description"] { + margin: 0 auto; + text-align: left; + width: 80%; + } + } + .shop_table.shop_table_responsive.cart { + margin-top: 20px; + } + .wc-proceed-to-checkout { + text-align: center; + } + /* End General CSS */ + + + /* Product Detail page */ + .main.woo-single-product #content { + .type-product { + .images { + .woocommerce-main-image.zoom { + display: block; + height:220px; + overflow: hidden; + border: 1px solid lightgrey; + border-radius: 2px; + } + .woocommerce-main-image.zoom .wp-post-image { + min-height: 220px; + width: 100%; + } + width: 40%; + @media #{$small-only} { + width: 100%; + } + #wpb_wiz_img_id { + height: 220px; + } + + } + .summary.entry-summary { + width: 60%; + @media #{$small-only} { + width: 100%; + } + } + .cart, + .price, + .quantity, + .qty, + .stock, + .single_variation_wrap, + .single_variation_wrap .single_variation { + float:none; + text-align: center; + margin: 0 auto; + } + + .single_add_to_cart_button, + .single_add_to_cart_button button { + text-align: center; + margin-top: 12px; + float: none; + } + .woo-qty-wrapper { + margin: 0 auto; + width: 100px; + } + .cart-qty-label { + float:left; + clear: none; + text-align: center; + } + } + .thumbnails > a { + padding: 0px; + height: 35px; + overflow: hidden; + border: 1px solid lightgrey; + border-radius: 2px; + img { + min-height: 35px; + min-width: 100%; + } + } + .product.has-default-attributes.has-children { + > .images { + opacity: 1; + } + } + .entry-summary .product_title { + margin-bottom: 10px; + } + /* Related products */ + .related ul.products li.product:last-child, + .related ul.products li.product { + width: 33.33%; + height: 300px; + @media #{$small-only} { + width: 50%; + height: 260px; + } + float: left; + clear: none; + padding: 10px; + margin: 0; + img { + padding-right: 0; + max-height: 172px; + max-width: 207px; + padding-right: 15px; + width: 100%; + } + [itemprop="description"] { + display: none; + } + .price span.amount { + font-size: 22px; + } + .price > * { + height: 20px; + } + form.cart { + display: none; + } + } + /* End Related products */ + } + /* End product detail page */ + + /* Products page */ + #content ul.products { + display: table; + margin: 0 auto; + position: relative; + width: 100%; + @media #{$small-only} { + max-width: 470px; + padding: 0; + } + mark { + background-color: transparent; + } + li.product.type-product { + border: medium none; + height: auto; + padding: 10px; + clear: both; + width: 100%; + border: none; + margin: 0 auto 10px; + .variations_form { + clear: both; + display: table; + width: 100%; + margin-bottom: 20px; + .variations { + float: right; + @media #{$medium-down} { + float: none; + } + } + } + h3 { + font-size: 16px; + text-align: left; + padding: 10px 0 0; + } + @media #{$medium-down} { + margin-bottom: 25px; + h3 { + text-align: center; + } + } + .product-list-link { + display: block; + height:220px; + float: none; + margin: 0 auto; + max-width: 266px; + overflow: hidden; + border: 1px solid lightgrey; + border-radius: 2px; + .wp-post-image { + min-height: 220px; + width: 100%; + } + } + .product-list-link-wrapper { + padding-right: 15px; + } + .wp-post-image { + margin-bottom: 0; + border: none; + padding-right: 15px; + } + > div { + margin: 0 auto; + padding: 5px; + border-radius: 5px; + width: 100%; + img { + /* border: 2px solid $black;*/ + border-radius: 3px; + } + } + h3 { + font-weight: normal; + } + .count { + background-color: transparent; + } + & > div { + background-color: white; + h3 { + color: $orange; + font-size: 24px; + margin-top: -2px; + } + } + p.products-short-desc { + line-height: 1.3; + margin-bottom: 0; + } + .woocommerce-variation-availability { + float: right; + @media #{$small-only} { + float:none; + text-align: center; + } + } + .woocommerce-variation-availability .stock { + margin-bottom: 0; + } + .more { + display: inline; + float: right; + + @media #{$medium-down} { + float: none; + } + margin-left: 5px; + color: $blue; + } + .products-qty-contain { + span { + margin-left: 5px; + } + } + .cart { + float: right; + text-align: right; + clear: both; + @media #{$small-only} { + float:none; + text-align: center; + } + } + .products-add-to-cart { + button { + width: 100%; + } + clear: both; + float: right; + } + } + .added_to_cart { + border: 1px solid lightgrey; + border-radius: 4px; + } + a { + text-decoration: none; + &:hover { + text-shadow: none; + } + } + } + /* End Products page */ + header.title { + box-shadow: none; + } +}/* End WooCommerce */ + +.pp_content .pp_gallery { + height: 0; + overflow: hidden; + width: 0; +} +#woo-quick-cart-image { + img { + width: 24px; + } + > div { + float: left; + } + clear: none; + display: block; + float: left; + height: 26px; + padding: 2px; + width: 25px; +} +.woo-quick-cart-totals { + width:105px; + @media #{$medium-up} { + margin-left:30px; + margin-top: 10px; + } +} +#woo-quick-checkout { + button { + float: right; + } +} +#cart-login { + > div { + float: left; + display: block; + text-align: center; + padding: 0 5px; + } + a { + color: black; + } + a:hover { + color: $blue; + } +} +/* Product categories */ +#main-content ul.products li.product-category.product, +#content ul.products li.product-category.product { + width: 33.33%; + @media #{$small-only} { + width: 50%; + } + float: left; + padding: 20px; + margin: 0; + .products-image-container { + height: 200px; + } +} + +/*#content ul.products li.product-category.product, +#content .woocommerce-page ul.products li.product-category.product { + @media #{$small-only} { + float: none; + margin: 0 auto 30px; + } +}*/ +/* End product categories */ + +/* Button styles */ +main .woocommerce #respond input#submit.alt:hover, main .woocommerce a.button.alt:hover, main .woocommerce button.button.alt:hover, main .woocommerce input.button.alt:hover { + background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0; + border:1px solid $blue; +} +main .woocommerce #respond input#submit.alt, main .woocommerce a.button.alt, main .woocommerce button.button.alt, main .woocommerce input.button.alt { + background: rgba(0, 0, 0, 0) url("../assets/repeating-pattern.jpg") repeat scroll 0 0; + border:1px solid white; +} +/* End Button styles */ + +main.woocommerce ul.products li.product,main.woocommerce-page ul.products li.product,main.woocommerce-page[class*="columns-"] ul.products li.product,main.woocommerce[class*="columns-"] ul.products li.product { + clear: none; +} + + + /* Sidebar */ +.woocommerce { + .shop-sidebar { + margin-bottom: 20px; + } + .shop-sidebar ul.products > li.product { + width: 100%; + margin-bottom: 0px; + background-color: white; + } + .shop-sidebar ul.products { + margin-top: 0; + } + .shop-sidebar ul.products > li.product > a > h3 { + padding: 5px 0; + text-align: left; + font-weight: bold; + color: white; + line-height: 1.1; + } + .shop-sidebar { + list-style: outside none none; + margin-left: 0; + } + .shop-sidebar .products { + margin: 20px 0 0; + } + .shop-sidebar > li { + background: none repeat scroll 0 0 #2F4D4F; + // border-bottom: 1px solid #ffffff; + padding: 2px 0 2px 15px; + &:first-child { + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + &:last-child { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + } + a { + color: white; + text-transform: uppercase; + } + } + #sidebar-category .shop-sidebar ul.products li.current { + h3 { + color: $blue; + } + + &:hover h3 { + color: white; + } + } + + .shop-sidebar ul.products > li.product > a > div > img { + display: none; + } +} + /* End sidebar */ \ No newline at end of file diff --git a/woocommerce.php b/woocommerce.php index aaf913f..11b6652 100644 --- a/woocommerce.php +++ b/woocommerce.php @@ -4,7 +4,7 @@
- +