Subversion Repositories SmartDukaan

/* *
 *
    Created By Akshit Sharma
 * 
 * */


/*---------------------------------less variabels--------------------------------------------*/
@blue:#3971b8;  //header background-color
@ltblue:#1fabf6;

@ltgrey:#c7c7c7; //border color
@white:#ffffff;
@grey: #555555; //heading color
@sub-list: #888888;
@lightgrey:#f1f1f1;
@yellow:#f5bd11; 
@orange:#ff7201;
@green:rgb(80, 194, 95);

@list-color1:#e5e6e0;
@list-color2:#f2f3ef;
@extgrey:#f3f3f3;
@black:#000000;
/*-------------------------------CSS for Common Elements---------------------------------------*/
body{
  float:left;
  width:100%;
}
* {
  padding: 0;
  margin: 0;
}

*::-webkit-scrollbar { 
    //display: none; 
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  color:#000;
}

input, select, a, div {
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
}

input:active, select:active, a:active, .btn:active{
  background:rgba(0,0,0,0.2);
}

body {

  font: 0.625em Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: subpixel-antialiased;
}

img {
 outline: none;
 border: 0;
 border-style: none;
}

input{
  outline:0;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
}

input[type="checkbox"]{
   -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
}

select{
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
}

.ellip {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clear {
  clear: both;
}
.tcenter {
  text-align: center;
}
.tright {
  text-align: right;
}

.left {
  float: left;
}

.right {
  float: right;
}
.uppercase
{
  text-transform: uppercase !important;
}

.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display:block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1px;
}

/*------------------for ie10-------------------*/
select::-ms-expand {
  display: none;
  color: @white;
}
select::selection {
  background-color: black;
}
input[type="checkbox"]::-ms-check {
  display: none;
}

/*-------------------------------------------*/


/*-----------------------mixins -----------------------------*/

.float(@fl:left){
  float:@fl;
}
.boxsize{
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
}

.font(@ft:2.0em) {
  font: normal @ft/1.2em Helvetica, Arial, sans-serif;
}

/*-----------------------------------------------------------*/

header{
  background:@blue;
  .menu{
    .float(left);
    width:40px;
    height:45px;
    background:url("../images/sprite1.png")no-repeat;
    background-position:0 0;
    background-size: 107px;
  }
  h1{
    display:inline-block;
     height:40px;
    a{
      display: block;
      height: 40px;
    }
    img{
     height:40px;
    }
  }
  .profile{
    .float(right);
    width:40px;
    height:45px;
    background: url("../images/sprite1.png") no-repeat center center;
    background-size: 139px;
    background-position: -8px -56px;
  }

  .profile.selected-pr{
      background: url("../images/sprite1.png") no-repeat;
      background-size: 139px;
      background-position: -91px -56px;
  }
  .cart{
     display:block;
    .float(right);
    width:40px;
    height:45px;
    background: url("../images/sprite1.png") no-repeat;
    background-size: 104px;
    position: relative;
    background-position: -65px 2px;
    position:relative;
    span{
      position: absolute;
      right: 19px;
      background: #F1C618;
      top: 25px;
      border-radius: 43px;
      -o-border-radius: 43px;
      width: 15px;
      height: 15px;
      text-align: center;
      line-height: 15px;
      font-weight:bold;
      color: @blue;
    }
  }
}

.search-box{
  width:100%;
  padding:5px 2% 5px;
  background:@list-color2;
  .boxsize();
  .search-hldr{
    background:@white;
    padding:2px;
    border:@ltgrey solid 1px;
    .boxsize;
    input{
      border:0;
      appearance:none;
      -webkit-appearance:none;
       -moz-appearance: none;
      .float(left);
      width:80%;
      padding:5px;
      color:@grey;
      .boxsize;
      .font(1.4em);
      line-height: 25px;
      margin:0;
      display:block;
    }
    .search{
      .float(right);
      width:20%;
      height:35px;
      background:url("../images/search.PNG")no-repeat center center, @orange;
      background-size:20px,100%;
      max-width: 45px;
    }
  }
}

#search-result{
  left:0;
  width:96%;
  margin:0 2% 5px;
  .boxsize();
  background:@white;
  .font(1.4em);
  border-top:none;
  position: absolute;
  z-index: 15;
  box-shadow: 0px 8px 11px -3px rgba(0,0,0,0.4);
    div{
      color:@grey;
      border-left:@ltgrey solid 1px;
      border-right:@ltgrey solid 1px;
      text-transform:capitalize;
      a{
        display:block;
        padding:5px 2px 5px 7px;
      }
    .highlight{
    color:@blue;
    }
  }
  div:last-child{
  border-bottom:@ltgrey solid 1px;
  }
}

.recharge-head{
  .font(2em);
  margin-top:5px;
  padding:5px 5px 5px 7px;
  color:@grey;
  border-left:@ltblue solid 5px;
}
.offers{
  background:@list-color2;
  text-transform: capitalize;
  color:@white;
  padding:10px 5px;
  a:nth-of-type(1){
    color:@white;
    display:block;
    background:url("../images/sprite1.png")no-repeat, @green;
    background-size:92px,100%;
    background-position: -27px -110px;
    width: 100%;
    padding: 10px 0;
    border-radius:2px;
    -o-border-radius:2px;
    .boxsize;
    .float(left);
      text-align:center;
      .font(1.8em); 
      padding-left: 22px;
      
  }
  a:nth-of-type(2){
    display:block;
    color:@white;
    background:url("../images/sprite1.png")no-repeat, @ltblue;
    background-size: 111px,100%;
    background-position: -33px -89px;
    width: 100%;
    padding: 10px 8px 10px 36px;
    .boxsize;
    .float(right);
    .font(1.8em);
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius:2px;
    -o-border-radius:2px;
    margin-top:7px;
  }
  
}

.menu-cat{
  .cat-head{
    padding:10px 0 10px 7px;
    .font(2.2em);
    color:@grey;
    text-transform: capitalize;
    border-left:@ltblue solid 5px;
  }
  .cat{
    padding:6px 8px 6px 8px;
    margin-bottom:1px;
    color:@grey;
    .font(1.8em);
    .icon-hldr{
      display:inline-block;
      width:30px;
      height:30px;
      .float(left);
    }  
    div{
      padding-left:5px;
      margin-top:5px;
      .float(left);
      text-transform:uppercase;
    }
    span:nth-of-type(2){
      .float(right);
      margin-top:4px;
    }
  }
  .cat.odd{
    background:@list-color1;    
  }
  .cat.even{
    background:@list-color2;    
  }
  .cat:last-child{
    margin-bottom:0!important;
  }
  .cat-sub{
    width:100%;
    padding:0 45px;
    margin-bottom:5px;
    .boxsize;
    a{
      display:block;
      padding:8px 0;
      .font(1.8em);
      color:@sub-list;
      border-bottom:@lightgrey solid 1px;
      text-transform: capitalize;
    }
  }
}

.recommended-pd{
  border-bottom:lighten(@grey, 50%) solid 1px;
  .head{
    text-transform: capitalize;
    //background:@lightgrey;
    color:@grey;
    //padding:4px 8px;
    margin:5px 0 0;
    //border-bottom:lighten(@grey, 50%) solid 1px;
    //border-left:lighten(@grey, 20%) solid 4px;
    div:nth-of-type(1){
      display:inline-block;
      border-left:@ltblue solid 5px;
      padding:5px 5px 5px 7px;
      .font(2.0em);
    }
    div:nth-of-type(2){
      .float(right);
      .font(1.4em);
      color:@grey;
      border-bottom:lighten(@grey,30%) solid 1px;
      margin-top: 7px;
      margin-right: 5px;
    }
  }
  .rec-hldr{
    overflow:auto;
    .rec-wrapper{
      display:inline-block;
      white-space: nowrap;  
    }
  .rec-product{
    margin:10px 0;
    display:inline-block;
    width:180px;
    border-right:lighten(@grey, 50%) solid 1px;
    text-align:center;
    padding:5px;
    .boxsize; 
    img{
      height:100px;
    }
  .pd-name{
    color:@grey;
    .font(1.4em);
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    //-webkit-line-clamp: 2;
    //-webkit-box-orient: vertical;
    //min-height:34px;
  }
  .pd-desc{
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .font(1.1em);
    padding-top:5px;
  }
  .pd-price{
    text-align:center;
    padding-top: 5px;
    span{
      display:inline-block;
    }
    span:nth-of-type(1){
      .font(1.2em);
      font-weight:bold;
      color:@grey;
    }
    span:nth-of-type(2){
      color:@grey;
      .font(1.2em);
      text-decoration: line-through;
      padding:0 5px;
    }
    span:nth-of-type(3){
    color:@grey;
    .font(1.2em);
    font-weight:bold;
    }
  }
  }
  }
}
.features{
  margin:0 0 10px;
  border-top:2px solid @white;
  a{
    width:25%;
    color:@sub-list;
    text-align:center;
    height:95px;
    border-right:@white solid 2px;
    .boxsize;
    .float(left);
    p{
      margin-top: 48px;
      padding:0 3px; 

    }
  }
  .on-time{
    background:url("../images/on-time.PNG")no-repeat center 13px,@lightgrey;
    background-size:30px,100%;
  }
  .in-store{
    background:url("../images/in-store.PNG")no-repeat center 12px,@lightgrey;
    background-size:33px,100%;
  }
  .emi{
    background:url("../images/emi.PNG")no-repeat center 20px,@lightgrey;
    background-size:42px,100%;
  }
  .insure{
    background:url("../images/insure.PNG")no-repeat center 12px,@lightgrey;
    background-size:27px,100%;
    border-right:none;
  }
  div:nth-of-type(4){
    border-right:none;
  }
}

footer{
    border-top:@ltgrey solid 1px;
    color:@ltblue;
    padding: 10px 2px 10px 2px;
    text-align:center;
    a{
      color:@grey;
      text-transform: uppercase;
      padding: 0px 10px;
      border-right: 1px solid @ltgrey;
    } 
    a:last-child{
  border-right:none;
  } 
}


/*----------------slider css--------------------------*/


/*----------------------------slider css--------------------------------------------*/

.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}

/*#mySwipe div a img{
 width:100%;
 height:200px;
}*/
.swipe-wrap div a{
  width:100%;
 display:block;
}

.swipe-wrap div a img{
  width:100%;
}

.slider-circles{
  margin-top: 5px;
  text-align:center;
  .circle {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    -o-border-radius: 8px;
    background:@blue;
    border:@white solid 2px;
    .boxsize;
    margin-right: 4px;
    display: inline-block;
    }
    .circle.selected {
      background: @blue;
      border:none;
      }
}

#prev{
  width:30px;
  height:30px;
  background:rgba(0,0,0,0.6);
  position:absolute;
  top:50%;
  left:0;
  margin-top:-15px;
  display:none;
  background:url("../images/left_arrow.png")no-repeat center center, rgba(0,0,0,0.6);
  background-size:15px, 100%;
}

#next{
  width:30px;
  height:30px;
  position:absolute;
  top:50%;
  right:0;
  margin-top:-15px;
  display:none;
  background:url("../images/right_arrow1.png")no-repeat center center, rgba(0,0,0,0.6);
  background-size:15px, 100%;
}

/*-------------------------menu-----------------------------*/

.side-menu{
  display:none;
  position:absolute;
  top:45px;
  left:0;
  z-index:14;
  width:85%;
  box-shadow: 2px 18px 38px -12px rgba(0, 0, 0, 0.5);
  background:@white;
  .menu-head{
    padding:12px;
    .font(1.8em);
    background:@orange;
    color:@white;
    >a{
      .float(right);
      width:22px;
      height:22px;
      background:url("../images/home.png")no-repeat center center;
      background-size:20px;
    }
  }
  .cat-title{
    padding: 3px 0 3px 6px;
    background:@list-color1;
    border-bottom:@white solid 1px;
    span{
      display: inline-block;
      width: 30px;
      height: 30px;
      .float(left);
    }
    div{
      color: @grey;
      .font(1.6em);
      font-weight:bold;
      padding-left: 5px;
      margin-top: 7px;
      .float(left);
      text-transform: uppercase;
    }
  }
  .cat-sub{
    width:100%;
    background:@list-color2;
    color:@grey;
    border-bottom:@white solid 1px;
    a{
      .font(1.6em);
      .float(left);
      padding:7px 0 7px 49px;
      display:block;
      text-transform: capitalize;
      width:100%;
      .boxsize;
    }
  }
  
}

.mask{
  position:absolute;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0);
  top:45px;
  left:0;
  z-index:10;
  display:none;
}

/*---------------------------------profile-pverlay--------------------------*/

.profile-overlay{  
  width:85%;
  position:absolute;
   z-index:14;
  top:45px;
  right:0;
  .boxsize;
  background:@list-color2;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
  text-align: right;
  >div:first-child{
    padding:12px;
    .font(1.8em);
    background:@orange;
    color:@white;
  }
  a{
    display:block;
    color:@grey;
    .font(1.6em);
    font-weight:bold;
    padding:10px 20px 10px 10px;
    width:100%;
    background:@list-color1;
    border-bottom:@white solid 1px;
    .boxsize;
    > span{
     .float(left);
     font-weight:normal;
    }
  }
}

.sucess-reg{
  padding:5px;
  margin:5px;
  color:@green;
  border:@green dashed 1px;
  .font(1.4em);
}


/*---------------------------------------loader css-----------------------------------*/

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  z-index: 2000;
  position: fixed;
  height: 60px;
  width: 60px;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.pace.pace-inactive .pace-activity {
  display: none;
}

.pace-activity {
    position: fixed;
    z-index: 2000;
    display: block;
    position: absolute;
    left: 4px;
    top: 4px;
    height: 30px;
    width: 30px;
    border-width: 10px;
    border-style: double;
    border-color: #3971B8 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
    border-radius: 50px;
    -o-border-radius: 8px;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}


.pace-activity:before {
  content: ' ';
  position: absolute;
  top: 4px;
  left: 0px;
  height: 20px;
  width: 20px;
  display: block;
  border-width: 0px;
  border-style: solid;
  border-color: #FF8700 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
  border-radius: 54px;
  -o-border-radius: 54px;
}


@-webkit-keyframes spin {
  100% { -webkit-transform: rotate(359deg); }
}

@-moz-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
}

@-o-keyframes spin {
  100% { -moz-transform: rotate(359deg); }
}

@keyframes spin {
  100% {  transform: rotate(359deg); }
}

/*welcome popup*/

.welcome-popup{
  display:none;
  background:rgba(0,0,0,0.6);
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  bottom:0;
  z-index:1000;
}
  .popup{
    display:none;
    z-index:1010;
    position:absolute;
    width:80%;
    left:10%;
    top:20%;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance:none;
    appearance: none;
    background:@blue;
    .boxsize;
    padding:20px 10px;
    text-align:center;
    img{
      width:50%;
      max-width:250px;
      margin-bottom:15px;
    }
    p{
      .font(1.4em);
      margin-bottom:20px;
      color:@white;
    }
    .m-btn{
      .font(1.6em);
      padding:8px 0;
      background:@orange;
      color:@white;
      margin-bottom:20px;
      text-transform:uppercase;
    }
    .desktop-link{
      text-decoration:underline;
      .font(1.4em);
      color:@white;
    }
  }
a.hpdl{
    color: #FFFFFF;
    float: right;
    font-size: 1.4em;
    line-height: 45px;
    cursor: pointer;
}
a.hpdl:hover{text-decoration:underline;}

.disable-selection {
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer */
   -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}

.recommended-cart-pd{
  border-bottom:lighten(@grey, 50%) solid 1px;
  .head{
    text-transform: capitalize;
    //background:@lightgrey;
    color:@grey;
    //padding:4px 8px;
    margin:5px 0 0;
    //border-bottom:lighten(@grey, 50%) solid 1px;
    //border-left:lighten(@grey, 20%) solid 4px;
    div:nth-of-type(1){
      display:inline-block;
      border-left:@ltblue solid 5px;
      padding:5px 5px 5px 7px;
      .font(2.0em);
    }
    div:nth-of-type(2){
      .float(right);
      .font(1.4em);
      color:@grey;
      border-bottom:lighten(@grey,30%) solid 1px;
      margin-top: 7px;
      margin-right: 5px;
    }
  }
  .rec-cart-hldr{
    overflow:auto;
    .rec-cart-wrapper{
      display:inline-block;
      white-space: nowrap;  
    }
  .rec-cart-product{
    margin:10px 0;
    display:inline-block;
    width:180px;
    border-right:lighten(@grey, 50%) solid 1px;
    text-align:center;
    padding:5px;
    .boxsize; 
    img{
      height:100px;
    }
  .pd-cart-name{
    color:@grey;
    .font(1.2em);
    text-align:center;
    white-space: normal;
    word-wrap: break-word;
    //overflow: hidden;
    //text-overflow: ellipsis;
    //-webkit-line-clamp: 2;
    //-webkit-box-orient: vertical;
    //min-height:34px;
  }
  .pd-cart-desc{
    text-align:center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    .font(1.1em);
    padding-top:5px;
  }
  .pd-cart-price{
    text-align:center;
    padding-top: 5px;
    span{
      display:inline-block;
    }
    span:nth-of-type(1){
      .font(1.2em);
      font-weight:bold;
      color:@grey;
    }
    span:nth-of-type(2){
      color:@grey;
      .font(1.2em);
      text-decoration: line-through;
      padding:0 5px;
    }
    span:nth-of-type(3){
    color:@grey;
    .font(1.2em);
    font-weight:bold;
    }
  }
  .quickbuy-hldr{
  background:@list-color2;
  padding:2px;
  .quickbuy-btn{
    background:@orange;
    text-transform:uppercase;
    color:@white;
    padding:6px;
    text-align:center;
    .font(1.2em);
    }
  }
  }
  }
}