File: /home/madepabj/hc-cosmetics.com/wp-content/themes/dbea/assets/scss/theme/_toolbar_list.scss
/***************************************************
scss file: assets/scss/theme/_toolbar_list.scss
+ Style for toolbar on listing page of WooCommerce
****************************************************/
.woocommerce{
nav.woocommerce-pagination {
@include clearfix();
label{ display: inline-block; font-weight: bold; color: $link-color; margin: 5px 7.5px 0 0; text-transform: uppercase; float: left; line-height: 24px; }
.page-numbers {
margin: 0 auto; list-style:none; padding: 0; display:inline-block; border:none; float: left;
li { display: inline-block; float: left; padding: 0; border:none;
> span, > a {
text-align: center; margin: 2.5px 2.5px; padding: 0 0; display: inline-block; width: 28px; height: 28px; line-height: 28px;
float: left; font-size: 1em; color: #FFF; background: $button-bg-color;
border: none; @include border-radius(2px);
&.next,
&.prev{
position: relative; overflow: hidden; font-size: 0px; text-align: center;
&:before{
font-size: 16px;
}
}
&.next{ margin-right: 0px;
&:before{ @include font-ionicons('\f10a', 28px); }
}
&.prev{
&:before{ @include font-ionicons('\f107', 28px); }
}
&.current{
color: #fff; background: $color1; border-color: $color1;
}
&:focus,
&:hover{
color: #fff; background: $color1; border-color: $color1;
}
}
&:last-child{
> span, > a { margin-right: 0px; }
}
}
}
}
}
.toolbar {
padding: 0; @include clearfix();
&.toolbar-top{
margin: -6px 0 10px; @include clearfix(); text-transform: uppercase;
height: 30px; line-height: 30px; position: relative;
.set-cols-number{
float: right;
@media(max-width: $screen-md-min){ display: none; }
.label-cols{ display: none; }
&.disable{ @include opacity(0.4);
.btn-col{ cursor: not-allowed; }
}
.btn-col{
vertical-align: middle; position: relative; color: $color; margin-left: 10px; font-size: 0; height: 12px; display: inline-block; cursor: pointer;
overflow: hidden;
&:first-child{ margin: 0 0; }
&:before {
content: ""; position: absolute; top: 0px; left: 0px; width: 8px; height: 100%; background: $color; @include transition(all 0.2s ease-out);
}
&.active{
border-color: $color1;
&:before{
background: $color1;
}
}
}
.btn-col[data-number="2"]{
width: 18px;
&:before{ box-shadow: 10px 0 0 $color, 20px 0 0 $color; }
&.active{
&:before{ box-shadow: 10px 0 0 $color1, 20px 0 0 $color1; }
}
}
.btn-col[data-number="3"]{
width: 28px;
&:before{ box-shadow: 10px 0 0 $color, 20px 0 0 $color; }
&.active{
&:before{ box-shadow: 10px 0 0 $color1, 20px 0 0 $color1; }
}
}
.btn-col[data-number="4"]{
width: 38px;
&:before{ box-shadow: 10px 0 0 $color, 20px 0 0 $color, 30px 0 0 $color; }
&.active{
&:before{ box-shadow: 10px 0 0 $color1, 20px 0 0 $color1, 30px 0 0 $color1; }
}
}
.btn-col[data-number="5"]{
width: 48px;
&:before{ box-shadow: 10px 0 0 $color, 20px 0 0 $color, 30px 0 0 $color, 40px 0 0 $color; }
&.active{
&:before{ box-shadow: 10px 0 0 $color1, 20px 0 0 $color1, 30px 0 0 $color1, 40px 0 0 $color1; }
}
}
.btn-col[data-number="6"]{
width: 58px;
&:before{ box-shadow: 10px 0 0 $color, 20px 0 0 $color, 30px 0 0 $color, 40px 0 0 $color, 50px 0 0 $color; }
&.active{
&:before{ box-shadow: 10px 0 0 $color1, 20px 0 0 $color1, 30px 0 0 $color1, 40px 0 0 $color1, 50px 0 0 $color1; }
}
}
.btn-col[data-number="7"]{
width: 68px;
&:before{ box-shadow: 10px 0 0 $color, 20px 0 0 $color, 30px 0 0 $color, 40px 0 0 $color, 50px 0 0 $color, 60px 0 0 $color; }
&.active{
&:before{ box-shadow: 10px 0 0 $color1, 20px 0 0 $color1, 30px 0 0 $color1, 40px 0 0 $color1, 50px 0 0 $color1, 60px 0 0 $color1; }
}
}
}
.sticky-filter-btn{ float: right; margin: 0 0 0 50px;
@media(max-width: $screen-xs-max){ margin: 0; float: left;
& + .set-cols-number{ display: none; }
}
}
.woocommerce-ordering{ float: right; margin: 0;
@media(max-width: $screen-phone){ margin-right: 0px;
body.use-sticky-filter & {
float: right;
}
}
}
.woocommerce-result-count{ float: left; color: $link-color;
@media (max-width: $screen-xs-max) {
margin-left: 0px;
body.use-sticky-filter & {
display: none;
}
}
@media(max-width: $screen-phone){ display: none; }
}
}
&.toolbar-bottom{
margin: 28px 0 0; @include clearfix(); position: relative; text-align: center;
.woocommerce-pagination{ margin: -2.5px 0; display: inline-block; }
}
.sticky-filter-btn{
display: inline-block; float: left; padding: 0 ; margin: 0 30px 0 0; font-weight: normal; color: $link-color;
cursor: pointer; position: relative; @include transition(all 0.25s ease-out);
span{ text-transform: uppercase; }
&:after{
@include font-ionicons('\f31b', 12px); font-size: 12px; text-align: center; margin-left: 6px;
@include transition(all 0.25s ease-out); position: relative; top: 0px;
}
&:hover,
&.active{
color: $color1;
&:after{ color: inherit; }
}
}
.woocommerce-ordering {
display: block; padding: 0 0; margin: 0 0; height: 30px; line-height: 30px; position: relative;
> .select2.select2-container{ height: 30px; line-height: 30px;vertical-align: top;
.select2-selection--single{
border: none; @include border-radius(0px); height: 30px; line-height: 30px;
.select2-selection__rendered{ height: 30px; line-height: 30px; padding: 0 14px 0 0; color: $link-color; text-align: right; }
.select2-selection__arrow{ height: 30px; line-height: 30px; top: 0px; right: 0px; width: 15px;
b{ font-size: 0px; position: static; border:none;
&:before{ @include font-ionicons('\f104', 30px); position: absolute; width: 12px; right: 0px; top: 0px; font-size: 12px; text-align: right; color: $link-color;
@include transition(all 0.25s ease-out); }
}
}
}
}
> .select2-container:not(.select2){
.select2-dropdown{
width: 224px !important; border: 1px solid $line-border-color; box-shadow: 0 0 10px rgba(0,0,0,0.2); @include border-radius(4px); padding: 0; overflow: hidden;
.select2-search{
padding: 10px 10px;
.select2-search__field{ height: auto; line-height: 28px; padding: 0 10px; border-color: $line-border-color; }
}
.select2-results {
.select2-results__options{
padding: 15px; background: #FFF; list-style: none; max-height: 250px; line-height: 24px;
li{
margin: 1px 0 0; padding: 3px 10px; text-transform: none;
&.select2-results__option--highlighted[aria-selected],
&.select2-results__option--highlighted[aria-selected],
&.select2-results__option--highlighted,
&:hover{
background: #ebebeb !important; color: inherit !important; @include border-radius(0);
}
&[aria-selected="true"],
&[data-selected="true"]{
background: #ebebeb !important;
}
}
}
}
}
}
select.orderby{
width: auto;
}
label{margin: 0 5px 0 0; display: none; }
.orderby-wrap{
position: relative;margin:0; padding: 0px;@include transition(all 0.2 ease-in);display: inline-block; line-height: 28px;
select.orderby{
border: none; padding: 0px 10px; background:#FFF; min-width: 170px;border: 1px solid $base-border-color; height:44px; line-height: 44px;
}
&:hover,
&:focus{
border-color: #CCC;
}
&:before{
position: absolute; content: ''; height: 5px; width: 9px; right: 10px; top: 12px; background: url(../img/ico-drop.png) no-repeat left top;
}
}
&:hover{
> .select2.select2-container{
.select2-selection--single{
.select2-selection__rendered{ color: $color1; }
.select2-selection__arrow{
b{
&:before{ color: $color1; }
}
}
}
}
}
}
.nbrItemPage {
.select, .selector1 {
select {
width: 65px;
}
}
}
.woocommerce-result-count{
display: inline-block; margin:0; padding: 0 0;
}
.woocommerce-pagination {
margin: 0;
}
.product-count {
display: none !important;
}
.showall {
display: none;
}
}