Subversion Repositories SmartDukaan

@import "common.less";

.pd-info-head{

  width:100%;

  background:@list-color2;

  margin-top:1px;

  padding:5px 10px;

  .boxsize;

  .name-hldr{

    width:100%;

  div:nth-of-type(1){

    .float(left);

    width:80%;

    padding-top:7px;

  span{

    color:@grey;

  }

  span:nth-of-type(1){

     .font(2.0em);

    text-transform: capitalize;

  }

  span:nth-of-type(2){

     .font(1.8em);

  }

  }

  div:nth-of-type(2){

    .float(right);

    width:15%;

    height:35px;

    background:url("../images/grid-view.png")no-repeat center center, lighten(@sub-list, 2%);

    background-size:20px, 100%;

    max-width:35px;

  }

  .list-icon{

    background:url("../images/list-view.png")no-repeat center center, lighten(@sub-list, 2%)!important;

    background-size:20px, 100%!important;

  }

  }

}

  .filter-div{

    position:relative;

    background:rgba(242,243,239,0.6);

    border-top:@list-color1 solid 1px;

    border-bottom:@list-color1 solid 1px;

    width:100%;

    color:@grey;

    >div:nth-of-type(1), >div:nth-of-type(2){

      .float(left);

      width:50%;

      padding:10px 2px;

      text-align:center;

      .boxsize;

      .font(1.6em);

      position:relative;

      white-space: nowrap;

      overflow: hidden;

      text-overflow: ellipsis;

    }

    .filter.filter-selected > span{

      background:url("../images/filter-selected.png")no-repeat left top!important;

      background-size: 14px!important;

      color:@green!important;

    }

    > div:nth-of-type(1){

      border-right:@list-color1 solid 1px;

    }

    > div:nth-of-type(1) span{

      display:inline-block;

      background:url("../images/sort.png")no-repeat left center;

      background-size: 14px;

      padding-left: 17px;

    }

    > div:nth-of-type(2) span{

      display:inline-block;

      background:url("../images/filter.png")no-repeat left top;

      background-size: 14px;

      padding-left: 17px;

    }

  }

  .pd-list{

    width: 100%;

    padding: 10px 5px;

    display: block;

    position: relative;

    border-bottom:@list-color1 solid 1px;

    .boxsize;

    .pd-image{

      width: 120px;

      height: 130px;

      position: absolute;

      background: url("../images/default-img.jpg") no-repeat center center;

      background-size: contain;

    }

    .pd-info{

      position: relative;

      min-height: 130px;

      padding: 0px 0px 0px 125px;

      .boxsize;

      color:@grey;

      .pdt-name{

        .font(1.6em);

        margin-top:5px;

      }

      .pdt-price{

        .font(1.6em);

        margin-top:10px;

        span{

          display:inline-block;

        }

        span.pr{

          //font-weight:bold;

          //color:@ltblue;

        }

        span.pr-linethrough{

          text-decoration: line-through;

          color:@sub-list;

          display: inline-block;

          padding: 0 1px;

        }

        span.pr-original{

          //font-weight:bold;

          //color:@ltblue;

        }

      }

      .pdt-spec{

        margin-top:10px;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp: 4;

        -webkit-box-orient: vertical;

        .font(1.4em);

      }

      .pdt-offertext,.pdt-offercolors{

        color: #888888;

        margin-top:10px;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp: 4;

        -webkit-box-orient: vertical;

        .font(1.2em);

      }      

    }

  }

  .pdt-offertext{

	color:tomato !important;

  } 

/*------------------------------grid view css---------------------------*/

  .grid{

  .pd-list{

    width:50%;

    .float(left);

    .boxsize;

    border-bottom: @list-color1 solid 1px;

    height: 227px;

    .pd-image{

      position: static;

      margin: 0 auto;

    }

    .pd-info{

      padding:0;

      text-align:center;

      min-height: 71px;

        .pdt-name{

          overflow: hidden;

          text-overflow: ellipsis;

          display: -webkit-box;

          -webkit-line-clamp: 2;

          -webkit-box-orient: vertical;

          //height:42px;

        }

        .pdt-spec{

          display:none;

          } 

    }

  }

  .pd-list:nth-of-type(odd){

    border-right: @list-color1 solid 1px;

  }

}

.sort-by{

  position:absolute;

  display:none;

  z-index:11;

  .font(1.6em);

  background: @white;

  top: 40px;

  left:0;

  width:100%;

  text-align:center;

  .boxsize;

  box-shadow: 0px 11px 30px 0px rgba(0, 0, 0, 0.4);

  > div{

    background:@list-color2;

    padding:10px 0;

    color:@grey;

    border-bottom:@white solid 1px;

    //border-right:@list-color1 solid 1px;

  }

  div:nth-of-type(1){

    //border-top:@list-color1 solid 1px;

  }

  div:last-child{

    border-bottom:@list-color1 solid 1px;

  }

  div.selected{

    background:lighten(@green, 10%);

    color:@white!important;

    box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);

  }

}

.filter-by{

  position:absolute;

  z-index:11;

  top: 40px;

  right:0;

  width:100%;

  background:@white;

  box-shadow: 0px 11px 30px 0px rgba(0, 0, 0, 0.4);

  .filter-head{

    width:100%;

    text-align:center;

    .font(1.6em);

    .clear{

      width:30%;

      .float(left);

      padding:8px 0; 

      background:@grey;

      color:@white;

    }

    .apply{

      width:70%;

      .float(right);

      padding:8px 0;

      background:@orange;

      color:@white;

    }

  }

  .filter-name{

    background:@list-color2;

    font-weight:bold;

    padding: 8px 12px 8px 12px;

    .font(1.6em);

    color:@grey;

    margin:1px 0;

    span{

      .float(right);

    }

  }

  .filter-options{

    position:relative;

    div.opt{

      padding: 8px 12px 8px 12px;

      color:@grey;

      .font(1.4em);

      border-bottom:@list-color2 solid 1px;

      span{

        .float(right);

      }

    }

    div.selected{

      background:lighten(@green, 10%);

      color:@white!important;

      box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);

    }

    .sub-filter{

      div{

        padding: 7px 25px 7px 25px;

        color:@grey;

        .font(1.4em);

        border-bottom:@list-color2 solid 1px;

          span{

          .float(right);

        }

      }

    }

  }

}

.refine-mask{

  position: absolute;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0);

  top: 40px;

  left: 0;

  z-index: 10;

  display: none;

}

/*------------------------------grid view css ends---------------------------*/

.load-more{

  background:@orange;

  color:@white;

  width:50%;

  margin:10px auto;

  max-width:250px;

  text-align:center;

  padding:10px 0;

  .font(1.8em);

  border-radius:3px;

}

/*---------------------------------no-ui-slider css----------------------------------*/

    .noUiSlider, .noUiSlider * {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  display: block;

  cursor: default;

}

.noUiSlider {

  position: relative;

}

.noUiSlider a {

  position: absolute;

  z-index: 1;

  background: #1fabf6;

}

.noUiSlider a:nth-child(2) {

  background: inherit !important;

}

.noUiSlider.vertical a {

  width: 100%;

  bottom: 0;

}

.noUiSlider.horizontal a {

  height: 100%;

  right: 0;

  border-radius: 10px;

}

@media screen and (-ms-high-contrast: active) , (-ms-high-contrast: none) {

  .noUiSlider:before, body.TOUCH, .noUiSlider div {

    -ms-touch-action: none;

  }

  .noUiSlider:before {

    display: block;

    position: absolute;

    width: 150%;

    left: -25%;

    height: 400%;

    top: -150%;

    content: "";

    z-index: -1;

  }

  .noUiSlider.vertical:before {

    width: 400%;

    left: -150%;

    height: 150%;

    top: -25%;

  }

}

.noUiSlider {

  border-radius: 5px;

}

.noUiSlider.connect a, .noUiSlider.connect.lower {//

  background: #dddddd;

}

.noUiSlider, .noUiSlider.connect.lower a {

  background: #dddddd;//

  box-shadow: inset 0px 1px 7px #b6b4a8

}

.noUiSlider.disabled, .noUiSlider.disabled.connect.lower a {

  background: #ccc;

  box-shadow: none;

}

.noUiSlider div {

  height: 25px;

  width: 25px;

  background: #efefe7;

  border-radius:20px;

}

.noUiSlider.horizontal a:nth-of-type(1) div {

  background: #1FABF6;

}

.noUiSlider.horizontal a:nth-of-type(2) div {

  background: #1FABF6;

}

.noUiSlider.disabled div {

  background: transparent;

}

.noUiSlider.horizontal {

  // width: 85%;

  // left:6%;

  height: 10px;

  background-color: #F2F3EF;

  margin: 20px 0;

  border-radius: 10px;

}

.noUiSlider.horizontal div {

  margin: -9px 0 0 -9px;

}

.noUiSlider.vertical {

  width: 10px;

  height: 300px;

}

.noUiSlider.vertical div {

  margin: -9px 0 0 -5px;

}

.slider-input{

  position: absolute;

  left: 0%;

  border: #1FABF6 solid 1px;

  color:#555555;

  display: inline-block;

  height: 18px;

  line-height: 20px;

  text-align: center;

  min-width: 50px;

  border-radius: 5px;

  -webkit-appearance:none;

}

.slider-input:before {

  content: "";

  position: absolute;

  bottom: -8px;

  left: 15px;

  border-width: 8px 11px 0;

  border-style: solid;

  border-color: #1FABF6 transparent;

  display: block;

  width: 0;

}

.slider-input:after {

  content: "";

  position: absolute;

  bottom: -6px;

  left: 17px;

  border-width: 6px 9px 0;

  border-style: solid;

  border-color: #fff transparent;

  display: block;

  width: 0;

}

span.slider-input:nth-of-type(1){

  left:0%;

}

span.slider-input:nth-of-type(2){

  left:98%;

}

/*

#exFR {

  position: relative;

  right: 0%;

  border: #dddddd solid 1px;

  display: inline;

  padding: 5px 0;

  text-align: center;

  width: 40px;

  border-radius: 5px;

  -webkit-appearance:none;

}*/

.oprice{

  float:left;

  width:30px;

  padding:5px;

  text-align:center;

  border-radius:8px;

  box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,0.4);

  margin-bottom:10px;

}

.oprice.max{

  float: right;

}

.empty-list{

  height: 100px;

  margin-top: 10px;

}

.empty-msg{

  .font(1.6em);

  margin:10px 0;

  color:@grey;

}

.ch-filter{

  padding: 10px 5%;

  overflow: hidden;

}

.couponhelptext{

  color: #888888;

  font: 1.6em/1.2em Helvetica,Arial,sans-serif;

  margin: 5px auto;

  text-align: center;

  .coupontext{

    font-weight : bold;

    color : #000000;

  }

}

.pricetype{

  font-weight:bold;

  margin-right:5px;

}

.pdeal-price{

  .pr-original{

    color:tomato;

  }

}