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;

/*-------------------------------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;

   -moz-appearance: none;

}

select{

   -moz-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/menu.PNG")no-repeat center center;

    background-size:26px;

  }

  h1{

    display:inline-block;

     height:40px;

    a{

      display: block;

      height: 40px;

    }

    img{

     height:40px;

    }

  }

  .profile{

    .float(right);

    width:40px;

    height:45px;

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

    background-size:28px;

  }

  .profile.selected-pr{

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

    background-size:28px;

  }

  .cart{

     display:block;

    .float(right);

    width:40px;

    height:45px;

    background:url("../images/cart.PNG")no-repeat center center;

    background-size:30px;

    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/mobile-12.png")no-repeat 7px center, @green;

    background-size:18px,100%;

    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/dish.png")no-repeat 7px center, @ltblue;

    background-size: 30px,100%;

    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:2px;

    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-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;

    .font(2.0em);

    //padding:4px 8px;

    margin:5px 0 0;

    //border-bottom:lighten(@grey, 50%) solid 1px;

    //border-left:lighten(@grey, 20%) solid 4px;

    div{

      display:inline-block;

      border-left:@ltblue solid 5px;

      padding:5px 5px 5px 7px;

    }

  }

  .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);

    overflow: hidden;

    text-overflow: ellipsis;

    -ms-text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    white-space: normal;

    //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;

  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%;

  }

  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;

      }

}

/*-------------------------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); }

}