From f6481088e3aedb9c6d447d92b8508aad00dc55cd Mon Sep 17 00:00:00 2001 From: James Koster Date: Mon, 28 Nov 2016 14:57:36 +0000 Subject: [PATCH] price filter widget #12038 --- assets/css/twenty-seventeen.css | 2 +- assets/css/twenty-seventeen.scss | 70 ++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) diff --git a/assets/css/twenty-seventeen.css b/assets/css/twenty-seventeen.css index 504978bfeb9..e53e8f7b47f 100644 --- a/assets/css/twenty-seventeen.css +++ b/assets/css/twenty-seventeen.css @@ -1 +1 @@ -@charset "UTF-8";.onsale,.woocommerce-loop-product__title{text-transform:uppercase;font-weight:800}.price del,.woocommerce-product-gallery .flex-control-thumbs img,ul.products li.product .button.loading{opacity:.5}@font-face{font-family:star;src:url(../fonts/star.eot);src:url(../fonts/star.eot?#iefix) format("embedded-opentype"),url(../fonts/star.woff) format("woff"),url(../fonts/star.ttf) format("truetype"),url(../fonts/star.svg#star) format("svg");font-weight:400;font-style:normal}@font-face{font-family:WooCommerce;src:url(../fonts/WooCommerce.eot);src:url(../fonts/WooCommerce.eot?#iefix) format("embedded-opentype"),url(../fonts/WooCommerce.woff) format("woff"),url(../fonts/WooCommerce.ttf) format("truetype"),url(../fonts/WooCommerce.svg#WooCommerce) format("svg");font-weight:400;font-style:normal}.woocommerce-breadcrumb{padding-bottom:2em;margin-bottom:4em;border-bottom:1px solid #eee;font-size:13px;font-size:.8125rem}.woocommerce-breadcrumb a{box-shadow:0 1px 0 #0f0f0f;-webkit-transition:box-shadow ease-in-out 130ms;-moz-transition:box-shadow ease-in-out 130ms;transition:box-shadow ease-in-out 130ms}.woocommerce-breadcrumb a:hover{box-shadow:0 3px 0 #0f0f0f}.woocommerce-pagination{padding-top:2em;margin-top:4em;border-top:1px solid #eee;font-size:13px;font-size:.8125rem}.woocommerce-pagination ul.page-numbers{padding:0}.woocommerce-pagination .next.page-numbers,.woocommerce-pagination .prev.page-numbers,.woocommerce-pagination a.page-numbers,.woocommerce-pagination span.page-numbers{padding:.5em 1em;background:#ddd;display:inline-block;font-size:1em;float:none;line-height:1.5;border-radius:2px;-webkit-transition:background-color ease-in-out .3s;-moz-transition:background-color ease-in-out .3s;transition:background-color ease-in-out .3s}ul.products li.product .added_to_cart,ul.products li.product .button{-webkit-transition:box-shadow ease-in-out 130ms;-moz-transition:box-shadow ease-in-out 130ms}.woocommerce-pagination span.page-numbers{background-color:#fff}.woocommerce-pagination a.page-numbers:hover{background-color:#767676;color:#fff}.onsale{background-color:#fff;position:absolute;top:0;left:0;display:inline-block;padding:.5em 1em;font-size:13px;font-size:.8125rem}.required{color:#b22222}.woocommerce-error,.woocommerce-info,.woocommerce-message{margin-bottom:1.5em;padding:2em}.woocommerce-message{background:teal;color:#fff}.woocommerce-error{background:#b22222;color:#fff}.woocommerce-info,.woocommerce-store-notice{background:#4169e1;color:#fff}.woocommerce-store-notice{padding:1em;position:absolute;top:0;left:0;width:100%;z-index:999}.admin-bar .woocommerce-store-notice{top:32px}.woocommerce-store-notice__dismiss-link{float:right;color:#fff}.woocommerce-store-notice__dismiss-link:hover{text-decoration:underline;color:#fff}.woocommerce-result-count{padding:.75em 0}ul.products li.product{list-style:none}ul.products li.product .price,ul.products li.product .star-rating{display:block;margin-bottom:.75em}ul.products li.product .button{box-shadow:0 1px 0 #0f0f0f;transition:box-shadow ease-in-out 130ms}ul.products li.product .button:hover{box-shadow:0 3px 0 #0f0f0f}ul.products li.product .added_to_cart{box-shadow:0 1px 0 #0f0f0f;transition:box-shadow ease-in-out 130ms;margin-left:.5em}ul.products li.product .added_to_cart:hover{box-shadow:0 3px 0 #0f0f0f}.star-rating{overflow:hidden;position:relative;height:1em;line-height:1;font-size:1em;width:5.4em;font-family:star}.star-rating::before{content:'\73\73\73\73\73';float:left;top:0;left:0;position:absolute}.star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}.star-rating span::before{content:'\53\53\53\53\53';top:0;position:absolute;left:0}.woocommerce-loop-product__title{font-size:13px;font-size:.8125rem;letter-spacing:.15em}a.remove{display:inline-block;width:1em;height:1em;line-height:1;text-align:center;border-radius:100%;box-shadow:none!important;-webkit-box-shadow:none!important;border:1px solid #000}a.remove:hover{background:#000;color:#fff!important}dl.variation dt{float:left;clear:both;margin-right:.25em;display:inline-block}dl.variation dd{margin:0}.single-product div.product{position:relative}.single-product .single-featured-image-header{display:none}.single-product .summary,.single-product .summary p.price{margin-bottom:2em}.single-product .woocommerce-product-rating{margin-bottom:2em;line-height:1}.single-product .woocommerce-product-rating .star-rating{float:left;margin-right:.25em}.single-product form.cart .quantity{float:left;margin-right:.5em}.single-product form.cart input{width:5em}.single-product .woocommerce-variation-add-to-cart .button{padding-top:.72em;padding-bottom:.72em}table.variations label{margin:0}table.variations select{margin-right:.5em}.woocommerce-product-gallery{position:relative;margin-bottom:2em}.woocommerce-product-gallery figure{margin:0}.woocommerce-product-gallery .flex-control-thumbs li{list-style:none;float:left;cursor:pointer}.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1}.woocommerce-product-gallery img{display:block}.woocommerce-product-gallery--columns-3 .flex-control-thumbs li{width:33.3333%}.woocommerce-product-gallery--columns-4 .flex-control-thumbs li{width:25%}.woocommerce-product-gallery--columns-5 .flex-control-thumbs li{width:20%}.woocommerce-product-gallery__trigger{position:absolute;top:1em;right:1em;z-index:99}.woocommerce-tabs{margin-bottom:2em}.woocommerce-tabs li{margin-right:1em}.woocommerce-tabs li.active a{box-shadow:0 3px 0 #0f0f0f}.woocommerce-tabs a{box-shadow:0 1px 0 #0f0f0f;-webkit-transition:box-shadow ease-in-out 130ms;-moz-transition:box-shadow ease-in-out 130ms;transition:box-shadow ease-in-out 130ms}.woocommerce-tabs a:hover{box-shadow:0 3px 0 #0f0f0f}.woocommerce-tabs #comments{padding-top:0}.woocommerce-tabs .comment-reply-title{font-size:22px;font-size:1.375rem;font-weight:300;line-height:1.4;margin:0 0 .75em;display:block}.woocommerce-tabs #reviews li.comment{list-style:none;margin-right:0}.woocommerce-tabs #reviews li.comment .avatar{max-height:36px;width:auto}.woocommerce-tabs #reviews p.stars a{position:relative;height:1em;width:1em;text-indent:-999em;display:inline-block;text-decoration:none;box-shadow:none}.woocommerce-tabs #reviews p.stars a::before{display:block;position:absolute;top:0;left:0;width:1em;height:1em;line-height:1;font-family:WooCommerce;content:'\e021';text-indent:0}.woocommerce-tabs #reviews p.stars a:hover~a::before{content:'\e021'}.woocommerce-tabs #reviews p.stars.selected a.active::before,.woocommerce-tabs #reviews p.stars:hover a::before{content:'\e020'}.woocommerce-tabs #reviews p.stars.selected a.active~a::before{content:'\e021'}.woocommerce-tabs #reviews p.stars.selected a:not(.active)::before{content:'\e020'}.widget .product_list_widget{margin-bottom:1.5em}.widget .product_list_widget a{display:block;box-shadow:none}.widget .product_list_widget a:hover{box-shadow:none}.widget .product_list_widget li{padding:1.5em 0}.widget .product_list_widget li a.remove{float:right}.widget .product_list_widget img{display:none}.widget_shopping_cart .buttons a{display:inline-block;margin:0 .5em 0 0}.widget_layered_nav .chosen:before{content:"×";display:inline-block;width:1em;height:1em;line-height:1;text-align:center;border-radius:100%;border:1px solid #000;margin-right:.25em}@media screen and (min-width:48em){.has-sidebar.woocommerce-page:not(.error404) #primary{width:74%}.has-sidebar.woocommerce-page:not(.error404) #secondary{width:20%}} \ No newline at end of file +@charset "UTF-8";.onsale,.woocommerce-loop-product__title{text-transform:uppercase;font-weight:800}.price del,.woocommerce-product-gallery .flex-control-thumbs img,ul.products li.product .button.loading{opacity:.5}@font-face{font-family:star;src:url(../fonts/star.eot);src:url(../fonts/star.eot?#iefix) format("embedded-opentype"),url(../fonts/star.woff) format("woff"),url(../fonts/star.ttf) format("truetype"),url(../fonts/star.svg#star) format("svg");font-weight:400;font-style:normal}@font-face{font-family:WooCommerce;src:url(../fonts/WooCommerce.eot);src:url(../fonts/WooCommerce.eot?#iefix) format("embedded-opentype"),url(../fonts/WooCommerce.woff) format("woff"),url(../fonts/WooCommerce.ttf) format("truetype"),url(../fonts/WooCommerce.svg#WooCommerce) format("svg");font-weight:400;font-style:normal}.woocommerce-breadcrumb{padding-bottom:2em;margin-bottom:4em;border-bottom:1px solid #eee;font-size:13px;font-size:.8125rem}.woocommerce-breadcrumb a{box-shadow:0 1px 0 #0f0f0f;-webkit-transition:box-shadow ease-in-out 130ms;-moz-transition:box-shadow ease-in-out 130ms;transition:box-shadow ease-in-out 130ms}.woocommerce-breadcrumb a:hover{box-shadow:0 3px 0 #0f0f0f}.woocommerce-pagination{padding-top:2em;margin-top:4em;border-top:1px solid #eee;font-size:13px;font-size:.8125rem}.woocommerce-pagination ul.page-numbers{padding:0}.woocommerce-pagination .next.page-numbers,.woocommerce-pagination .prev.page-numbers,.woocommerce-pagination a.page-numbers,.woocommerce-pagination span.page-numbers{padding:.5em 1em;background:#ddd;display:inline-block;font-size:1em;float:none;line-height:1.5;border-radius:2px;-webkit-transition:background-color ease-in-out .3s;-moz-transition:background-color ease-in-out .3s;transition:background-color ease-in-out .3s}ul.products li.product .added_to_cart,ul.products li.product .button{-webkit-transition:box-shadow ease-in-out 130ms;-moz-transition:box-shadow ease-in-out 130ms}.woocommerce-pagination span.page-numbers{background-color:#fff}.woocommerce-pagination a.page-numbers:hover{background-color:#767676;color:#fff}.onsale{background-color:#fff;position:absolute;top:0;left:0;display:inline-block;padding:.5em 1em;font-size:13px;font-size:.8125rem}.required{color:#b22222}.woocommerce-error,.woocommerce-info,.woocommerce-message{margin-bottom:1.5em;padding:2em}.woocommerce-message{background:teal;color:#fff}.woocommerce-error{background:#b22222;color:#fff}.woocommerce-info,.woocommerce-store-notice{background:#4169e1;color:#fff}.woocommerce-store-notice{padding:1em;position:absolute;top:0;left:0;width:100%;z-index:999}.admin-bar .woocommerce-store-notice{top:32px}.woocommerce-store-notice__dismiss-link{float:right;color:#fff}.woocommerce-store-notice__dismiss-link:hover{text-decoration:underline;color:#fff}.woocommerce-result-count{padding:.75em 0}ul.products li.product{list-style:none}ul.products li.product .price,ul.products li.product .star-rating{display:block;margin-bottom:.75em}ul.products li.product .button{box-shadow:0 1px 0 #0f0f0f;transition:box-shadow ease-in-out 130ms}ul.products li.product .button:hover{box-shadow:0 3px 0 #0f0f0f}ul.products li.product .added_to_cart{box-shadow:0 1px 0 #0f0f0f;transition:box-shadow ease-in-out 130ms;margin-left:.5em}ul.products li.product .added_to_cart:hover{box-shadow:0 3px 0 #0f0f0f}.star-rating{overflow:hidden;position:relative;height:1em;line-height:1;font-size:1em;width:5.4em;font-family:star}.star-rating::before{content:'\73\73\73\73\73';float:left;top:0;left:0;position:absolute}.star-rating span{overflow:hidden;float:left;top:0;left:0;position:absolute;padding-top:1.5em}.star-rating span::before{content:'\53\53\53\53\53';top:0;position:absolute;left:0}.woocommerce-loop-product__title{font-size:13px;font-size:.8125rem;letter-spacing:.15em}a.remove{display:inline-block;width:1em;height:1em;line-height:1;text-align:center;border-radius:100%;box-shadow:none!important;-webkit-box-shadow:none!important;border:1px solid #000}a.remove:hover{background:#000;color:#fff!important}dl.variation dt{float:left;clear:both;margin-right:.25em;display:inline-block}dl.variation dd{margin:0}.single-product div.product{position:relative}.single-product .single-featured-image-header{display:none}.single-product .summary,.single-product .summary p.price{margin-bottom:2em}.single-product .woocommerce-product-rating{margin-bottom:2em;line-height:1}.single-product .woocommerce-product-rating .star-rating{float:left;margin-right:.25em}.single-product form.cart .quantity{float:left;margin-right:.5em}.single-product form.cart input{width:5em}.single-product .woocommerce-variation-add-to-cart .button{padding-top:.72em;padding-bottom:.72em}table.variations label{margin:0}table.variations select{margin-right:.5em}.woocommerce-product-gallery{position:relative;margin-bottom:2em}.woocommerce-product-gallery figure{margin:0}.woocommerce-product-gallery .flex-control-thumbs li{list-style:none;float:left;cursor:pointer}.woocommerce-product-gallery .flex-control-thumbs img.flex-active,.woocommerce-product-gallery .flex-control-thumbs img:hover{opacity:1}.woocommerce-product-gallery img{display:block}.woocommerce-product-gallery--columns-3 .flex-control-thumbs li{width:33.3333%}.woocommerce-product-gallery--columns-4 .flex-control-thumbs li{width:25%}.woocommerce-product-gallery--columns-5 .flex-control-thumbs li{width:20%}.woocommerce-product-gallery__trigger{position:absolute;top:1em;right:1em;z-index:99}.woocommerce-tabs{margin-bottom:2em}.woocommerce-tabs li{margin-right:1em}.woocommerce-tabs li.active a{box-shadow:0 3px 0 #0f0f0f}.woocommerce-tabs a{box-shadow:0 1px 0 #0f0f0f;-webkit-transition:box-shadow ease-in-out 130ms;-moz-transition:box-shadow ease-in-out 130ms;transition:box-shadow ease-in-out 130ms}.woocommerce-tabs a:hover{box-shadow:0 3px 0 #0f0f0f}.woocommerce-tabs #comments{padding-top:0}.woocommerce-tabs .comment-reply-title{font-size:22px;font-size:1.375rem;font-weight:300;line-height:1.4;margin:0 0 .75em;display:block}.woocommerce-tabs #reviews li.comment{list-style:none;margin-right:0}.woocommerce-tabs #reviews li.comment .avatar{max-height:36px;width:auto}.woocommerce-tabs #reviews p.stars a{position:relative;height:1em;width:1em;text-indent:-999em;display:inline-block;text-decoration:none;box-shadow:none}.woocommerce-tabs #reviews p.stars a::before{display:block;position:absolute;top:0;left:0;width:1em;height:1em;line-height:1;font-family:WooCommerce;content:'\e021';text-indent:0}.woocommerce-tabs #reviews p.stars a:hover~a::before{content:'\e021'}.woocommerce-tabs #reviews p.stars.selected a.active::before,.woocommerce-tabs #reviews p.stars:hover a::before{content:'\e020'}.woocommerce-tabs #reviews p.stars.selected a.active~a::before{content:'\e021'}.woocommerce-tabs #reviews p.stars.selected a:not(.active)::before{content:'\e020'}.widget .product_list_widget{margin-bottom:1.5em}.widget .product_list_widget a{display:block;box-shadow:none}.widget .product_list_widget a:hover{box-shadow:none}.widget .product_list_widget li{padding:1.5em 0}.widget .product_list_widget li a.remove{float:right}.widget .product_list_widget img{display:none}.widget_shopping_cart .buttons a{display:inline-block;margin:0 .5em 0 0}.widget_layered_nav .chosen:before{content:"×";display:inline-block;width:1em;height:1em;line-height:1;text-align:center;border-radius:100%;border:1px solid #000;margin-right:.25em}.widget_price_filter .price_slider{margin-bottom:1em}.widget_price_filter .price_slider_amount{text-align:right;line-height:2.4;font-size:.8751em}.widget_price_filter .price_slider_amount .button{float:left;padding:.4em 1em}.widget_price_filter .ui-slider{position:relative;text-align:left;margin-left:.5em;margin-right:.5em}.widget_price_filter .ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1em;height:1em;background-color:#000;border-radius:1em;cursor:ew-resize;outline:0;top:-.3em;margin-left:-.5em}.widget_price_filter .ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;border-radius:1em;background-color:#000}.widget_price_filter .price_slider_wrapper .ui-widget-content{border-radius:1em;background-color:#666;border:0}.widget_price_filter .ui-slider-horizontal{height:.5em}.widget_price_filter .ui-slider-horizontal .ui-slider-range{top:0;height:100%}.widget_price_filter .ui-slider-horizontal .ui-slider-range-min{left:-1px}.widget_price_filter .ui-slider-horizontal .ui-slider-range-max{right:-1px}@media screen and (min-width:48em){.has-sidebar.woocommerce-page:not(.error404) #primary{width:74%}.has-sidebar.woocommerce-page:not(.error404) #secondary{width:20%}} \ No newline at end of file diff --git a/assets/css/twenty-seventeen.scss b/assets/css/twenty-seventeen.scss index b0ea0bc4570..7d5455b74b2 100644 --- a/assets/css/twenty-seventeen.scss +++ b/assets/css/twenty-seventeen.scss @@ -536,6 +536,76 @@ table.variations { } } +.widget_price_filter { + .price_slider { + margin-bottom: 1em; + } + + .price_slider_amount { + text-align: right; + line-height: 2.4; + font-size: 0.8751em; + + .button { + float: left; + padding: .4em 1em; + } + } + + .ui-slider { + position: relative; + text-align: left; + margin-left: 0.5em; + margin-right: 0.5em; + } + + .ui-slider .ui-slider-handle { + position: absolute; + z-index: 2; + width: 1em; + height: 1em; + background-color: #000; + border-radius: 1em; + cursor: ew-resize; + outline: none; + top: -0.3em; + margin-left: -0.5em; + } + + .ui-slider .ui-slider-range { + position: absolute; + z-index: 1; + font-size: 0.7em; + display: block; + border: 0; + border-radius: 1em; + background-color: #000; + } + + .price_slider_wrapper .ui-widget-content { + border-radius: 1em; + background-color: #666; + border: 0; + } + + .ui-slider-horizontal { + height: 0.5em; + } + + .ui-slider-horizontal .ui-slider-range { + top: 0; + height: 100%; + } + + .ui-slider-horizontal .ui-slider-range-min { + left: -1px; + } + + .ui-slider-horizontal .ui-slider-range-max { + right: -1px; + } +} + /** * Layout stuff */