Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
12694 anikendra 1 
/* *
2 
 *
3 
    Created By Akshit Sharma
4 
 *
5 
 * */
6 
 
7 
 
8 
/*---------------------------------less variabels--------------------------------------------*/
9 
@blue:#3971b8;  //header background-color
10 
@ltblue:#1fabf6;
11 
 
12 
@ltgrey:#c7c7c7; //border color
13 
@white:#ffffff;
14 
@grey: #555555; //heading color
15 
@sub-list: #888888;
16 
@lightgrey:#f1f1f1;
17 
@yellow:#f5bd11;
18 
@orange:#ff7201;
19 
@green:rgb(80, 194, 95);
20 
 
21 
@list-color1:#e5e6e0;
22 
@list-color2:#f2f3ef;
23 
/*-------------------------------CSS for Common Elements---------------------------------------*/
24 
body{
25 
  float:left;
26 
  width:100%;
27 
}
28 
* {
29 
  padding: 0;
30 
  margin: 0;
31 
}
32 
 
33 
*::-webkit-scrollbar {
34 
    //display: none;
35 
}
36 
a {
37 
  text-decoration: none;
38 
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
39 
  color:#000;
40 
}
41 
 
42 
input, select, a, div {
43 
  -webkit-tap-highlight-color: rgba(0,0,0,0.2);
44 
}
45 
 
46 
input:active, select:active, a:active, .btn:active{
47 
  background:rgba(0,0,0,0.2);
48 
}
49 
 
50 
body {
51 
 
52 
  font: 0.625em Helvetica, Arial, sans-serif;
53 
  -webkit-font-smoothing: subpixel-antialiased;
54 
}
55 
 
56 
img {
57 
 outline: none;
58 
 border: 0;
59 
 border-style: none;
60 
}
61 
 
62 
input{
63 
  outline:0;
64 
    -webkit-appearance: none;
65 
    -moz-appearance: none;
66 
    -o-appearance:none;
67 
    appearance: none;
68 
}
69 
 
70 
input[type="checkbox"]{
71 
   -webkit-appearance: none;
72 
    -moz-appearance: none;
73 
    -o-appearance:none;
74 
    appearance: none;
75 
}
76 
 
77 
select{
78 
    -webkit-appearance: none;
79 
    -moz-appearance: none;
80 
    -o-appearance:none;
81 
    appearance: none;
82 
}
83 
 
84 
.ellip {
85 
  white-space: nowrap;
86 
  overflow: hidden;
87 
  text-overflow: ellipsis;
88 
}
89 
.clear {
90 
  clear: both;
91 
}
92 
.tcenter {
93 
  text-align: center;
94 
}
95 
.tright {
96 
  text-align: right;
97 
}
98 
 
99 
.left {
100 
  float: left;
101 
}
102 
 
103 
.right {
104 
  float: right;
105 
}
106 
.uppercase
107 
{
108 
  text-transform: uppercase !important;
109 
}
110 
 
111 
.clearfix:after {
112 
    content: " ";
113 
    display: block;
114 
    clear: both;
115 
    visibility: hidden;
116 
    line-height: 0;
117 
    height: 0;
118 
}
119 
 
120 
.clearfix {
121 
    display:block;
122 
}
123 
 
124 
html[xmlns] .clearfix {
125 
    display: block;
126 
}
127 
 
128 
* html .clearfix {
129 
    height: 1px;
130 
}
131 
 
132 
/*------------------for ie10-------------------*/
133 
select::-ms-expand {
134 
  display: none;
135 
  color: @white;
136 
}
137 
select::selection {
138 
  background-color: black;
139 
}
140 
input[type="checkbox"]::-ms-check {
141 
  display: none;
142 
}
143 
 
144 
/*-------------------------------------------*/
145 
 
146 
 
147 
/*-----------------------mixins -----------------------------*/
148 
 
149 
.float(@fl:left){
150 
  float:@fl;
151 
}
152 
.boxsize{
153 
  box-sizing:border-box;
154 
  -webkit-box-sizing:border-box;
155 
  -moz-box-sizing:border-box;
156 
}
157 
 
158 
.font(@ft:2.0em) {
159 
  font: normal @ft/1.2em Helvetica, Arial, sans-serif;
160 
}
161 
 
162 
/*-----------------------------------------------------------*/
163 
 
164 
header{
165 
  background:@blue;
166 
  .menu{
167 
    .float(left);
168 
    width:40px;
169 
    height:45px;
170 
    background:url("../images/sprite1.png")no-repeat;
171 
    background-position:0 0;
172 
    background-size: 107px;
173 
  }
174 
  h1{
175 
    display:inline-block;
176 
     height:40px;
177 
    a{
178 
      display: block;
179 
      height: 40px;
180 
    }
181 
    img{
182 
     height:40px;
183 
    }
184 
  }
185 
  .profile{
186 
    .float(right);
187 
    width:40px;
188 
    height:45px;
189 
    background: url("../images/sprite1.png") no-repeat center center;
190 
    background-size: 139px;
191 
    background-position: -8px -56px;
192 
  }
193 
 
194 
  .profile.selected-pr{
195 
      background: url("../images/sprite1.png") no-repeat;
196 
      background-size: 139px;
197 
      background-position: -91px -56px;
198 
  }
199 
  .cart{
200 
     display:block;
201 
    .float(right);
202 
    width:40px;
203 
    height:45px;
204 
    background: url("../images/sprite1.png") no-repeat;
205 
    background-size: 104px;
206 
    position: relative;
207 
    background-position: -65px 2px;
208 
    position:relative;
209 
    span{
210 
      position: absolute;
211 
      right: 19px;
212 
      background: #F1C618;
213 
      top: 25px;
214 
      border-radius: 43px;
215 
      -o-border-radius: 43px;
216 
      width: 15px;
217 
      height: 15px;
218 
      text-align: center;
219 
      line-height: 15px;
220 
      font-weight:bold;
221 
      color: @blue;
222 
    }
223 
  }
224 
}
225 
 
226 
.search-box{
227 
  width:100%;
228 
  padding:5px 2% 5px;
229 
  background:@list-color2;
230 
  .boxsize();
231 
  .search-hldr{
232 
    background:@white;
233 
    padding:2px;
234 
    border:@ltgrey solid 1px;
235 
    .boxsize;
236 
    input{
237 
      border:0;
238 
      appearance:none;
239 
      -webkit-appearance:none;
240 
       -moz-appearance: none;
241 
      .float(left);
242 
      width:80%;
243 
      padding:5px;
244 
      color:@grey;
245 
      .boxsize;
246 
      .font(1.4em);
247 
      line-height: 25px;
248 
      margin:0;
249 
      display:block;
250 
    }
251 
    .search{
252 
      .float(right);
253 
      width:20%;
254 
      height:35px;
255 
      background:url("../images/search.PNG")no-repeat center center, @orange;
256 
      background-size:20px,100%;
257 
      max-width: 45px;
258 
    }
259 
  }
260 
}
261 
 
262 
#search-result{
263 
  left:0;
264 
  width:96%;
265 
  margin:0 2% 5px;
266 
  .boxsize();
267 
  background:@white;
268 
  .font(1.4em);
269 
  border-top:none;
270 
  position: absolute;
271 
  z-index: 15;
272 
  box-shadow: 0px 8px 11px -3px rgba(0,0,0,0.4);
273 
    div{
274 
      color:@grey;
275 
      border-left:@ltgrey solid 1px;
276 
      border-right:@ltgrey solid 1px;
277 
      text-transform:capitalize;
278 
      a{
279 
        display:block;
280 
        padding:5px 2px 5px 7px;
281 
      }
282 
    .highlight{
283 
    color:@blue;
284 
    }
285 
  }
286 
  div:last-child{
287 
  border-bottom:@ltgrey solid 1px;
288 
  }
289 
}
290 
 
291 
.recharge-head{
292 
  .font(2em);
293 
  margin-top:5px;
294 
  padding:5px 5px 5px 7px;
295 
  color:@grey;
296 
  border-left:@ltblue solid 5px;
297 
}
298 
.offers{
299 
  background:@list-color2;
300 
  text-transform: capitalize;
301 
  color:@white;
302 
  padding:10px 5px;
303 
  a:nth-of-type(1){
304 
    color:@white;
305 
    display:block;
306 
    background:url("../images/sprite1.png")no-repeat, @green;
307 
    background-size:92px,100%;
308 
    background-position: -27px -110px;
309 
    width: 100%;
310 
    padding: 10px 0;
311 
    border-radius:2px;
312 
    -o-border-radius:2px;
313 
    .boxsize;
314 
    .float(left);
315 
      text-align:center;
316 
      .font(1.8em);
317 
      padding-left: 22px;
318 
 
319 
  }
320 
  a:nth-of-type(2){
321 
    display:block;
322 
    color:@white;
323 
    background:url("../images/sprite1.png")no-repeat, @ltblue;
324 
    background-size: 111px,100%;
325 
    background-position: -33px -89px;
326 
    width: 100%;
327 
    padding: 10px 8px 10px 36px;
328 
    .boxsize;
329 
    .float(right);
330 
    .font(1.8em);
331 
    text-align:center;
332 
    white-space: nowrap;
333 
    overflow: hidden;
334 
    text-overflow: ellipsis;
335 
    border-radius:2px;
336 
    -o-border-radius:2px;
337 
    margin-top:7px;
338 
  }
339 
 
340 
}
341 
 
342 
.menu-cat{
343 
  .cat-head{
344 
    padding:10px 0 10px 7px;
345 
    .font(2.2em);
346 
    color:@grey;
347 
    text-transform: capitalize;
348 
    border-left:@ltblue solid 5px;
349 
  }
350 
  .cat{
351 
    padding:6px 8px 6px 8px;
352 
    margin-bottom:1px;
353 
    color:@grey;
354 
    .font(1.8em);
355 
    .icon-hldr{
356 
      display:inline-block;
357 
      width:30px;
358 
      height:30px;
359 
      .float(left);
360 
    }
361 
    div{
362 
      padding-left:5px;
363 
      margin-top:5px;
364 
      .float(left);
365 
      text-transform:uppercase;
366 
    }
367 
    span:nth-of-type(2){
368 
      .float(right);
369 
      margin-top:4px;
370 
    }
371 
  }
372 
  .cat.odd{
373 
    background:@list-color1;
374 
  }
375 
  .cat.even{
376 
    background:@list-color2;
377 
  }
378 
  .cat:last-child{
379 
    margin-bottom:0!important;
380 
  }
381 
  .cat-sub{
382 
    width:100%;
383 
    padding:0 45px;
384 
    margin-bottom:5px;
385 
    .boxsize;
386 
    a{
387 
      display:block;
388 
      padding:8px 0;
389 
      .font(1.8em);
390 
      color:@sub-list;
391 
      border-bottom:@lightgrey solid 1px;
392 
      text-transform: capitalize;
393 
    }
394 
  }
395 
}
396 
 
397 
.recommended-pd{
398 
  border-bottom:lighten(@grey, 50%) solid 1px;
399 
  .head{
400 
    text-transform: capitalize;
401 
    //background:@lightgrey;
402 
    color:@grey;
403 
    //padding:4px 8px;
404 
    margin:5px 0 0;
405 
    //border-bottom:lighten(@grey, 50%) solid 1px;
406 
    //border-left:lighten(@grey, 20%) solid 4px;
407 
    div:nth-of-type(1){
408 
      display:inline-block;
409 
      border-left:@ltblue solid 5px;
410 
      padding:5px 5px 5px 7px;
411 
      .font(2.0em);
412 
    }
413 
    div:nth-of-type(2){
414 
      .float(right);
415 
      .font(1.4em);
416 
      color:@grey;
417 
      border-bottom:lighten(@grey,30%) solid 1px;
418 
      margin-top: 7px;
419 
      margin-right: 5px;
420 
    }
421 
  }
422 
  .rec-hldr{
423 
    overflow:auto;
424 
    .rec-wrapper{
425 
      display:inline-block;
426 
      white-space: nowrap;
427 
    }
428 
  .rec-product{
429 
    margin:10px 0;
430 
    display:inline-block;
431 
    width:180px;
432 
    border-right:lighten(@grey, 50%) solid 1px;
433 
    text-align:center;
434 
    padding:5px;
435 
    .boxsize;
436 
    img{
437 
      height:100px;
438 
    }
439 
  .pd-name{
440 
    color:@grey;
441 
    .font(1.4em);
442 
    text-align:center;
443 
    white-space: nowrap;
444 
    overflow: hidden;
445 
    text-overflow: ellipsis;
446 
    //-webkit-line-clamp: 2;
447 
    //-webkit-box-orient: vertical;
448 
    //min-height:34px;
449 
  }
450 
  .pd-desc{
451 
    text-align:center;
452 
    white-space: nowrap;
453 
    overflow: hidden;
454 
    text-overflow: ellipsis;
455 
    .font(1.1em);
456 
    padding-top:5px;
457 
  }
458 
  .pd-price{
459 
    text-align:center;
460 
    padding-top: 5px;
461 
    span{
462 
      display:inline-block;
463 
    }
464 
    span:nth-of-type(1){
465 
      .font(1.2em);
466 
      font-weight:bold;
467 
      color:@grey;
468 
    }
469 
    span:nth-of-type(2){
470 
      color:@grey;
471 
      .font(1.2em);
472 
      text-decoration: line-through;
473 
      padding:0 5px;
474 
    }
475 
    span:nth-of-type(3){
476 
    color:@grey;
477 
    .font(1.2em);
478 
    font-weight:bold;
479 
    }
480 
  }
481 
  }
482 
  }
483 
}
484 
.features{
485 
  margin:0 0 10px;
486 
  border-top:2px solid @white;
487 
  a{
488 
    width:25%;
489 
    color:@sub-list;
490 
    text-align:center;
491 
    height:95px;
492 
    border-right:@white solid 2px;
493 
    .boxsize;
494 
    .float(left);
495 
    p{
496 
      margin-top: 48px;
497 
      padding:0 3px;
498 
 
499 
    }
500 
  }
501 
  .on-time{
502 
    background:url("../images/on-time.PNG")no-repeat center 13px,@lightgrey;
503 
    background-size:30px,100%;
504 
  }
505 
  .in-store{
506 
    background:url("../images/in-store.PNG")no-repeat center 12px,@lightgrey;
507 
    background-size:33px,100%;
508 
  }
509 
  .emi{
510 
    background:url("../images/emi.PNG")no-repeat center 20px,@lightgrey;
511 
    background-size:42px,100%;
512 
  }
513 
  .insure{
514 
    background:url("../images/insure.PNG")no-repeat center 12px,@lightgrey;
515 
    background-size:27px,100%;
516 
    border-right:none;
517 
  }
518 
  div:nth-of-type(4){
519 
    border-right:none;
520 
  }
521 
}
522 
 
523 
footer{
524 
    border-top:@ltgrey solid 1px;
525 
    color:@ltblue;
526 
    padding: 10px 2px 10px 2px;
527 
    text-align:center;
528 
    a{
529 
      color:@grey;
530 
      text-transform: uppercase;
531 
      padding: 0px 10px;
532 
      border-right: 1px solid @ltgrey;
533 
    }
534 
    a:last-child{
535 
  border-right:none;
536 
  }
537 
}
538 
 
539 
 
540 
/*----------------slider css--------------------------*/
541 
 
542 
 
543 
/*----------------------------slider css--------------------------------------------*/
544 
 
545 
.swipe {
546 
  overflow: hidden;
547 
  visibility: hidden;
548 
  position: relative;
549 
}
550 
.swipe-wrap {
551 
  overflow: hidden;
552 
  position: relative;
553 
}
554 
.swipe-wrap > div {
555 
  float:left;
556 
  width:100%;
557 
  position: relative;
558 
}
559 
 
560 
/*#mySwipe div a img{
561 
 width:100%;
562 
 height:200px;
563 
}*/
564 
.swipe-wrap div a{
565 
  width:100%;
566 
 display:block;
567 
}
568 
 
569 
.swipe-wrap div a img{
570 
  width:100%;
571 
}
572 
 
573 
.slider-circles{
574 
  margin-top: 5px;
575 
  text-align:center;
576 
  .circle {
577 
    width: 8px;
578 
    height: 8px;
579 
    border-radius: 8px;
580 
    -o-border-radius: 8px;
581 
    background:@blue;
582 
    border:@white solid 2px;
583 
    .boxsize;
584 
    margin-right: 4px;
585 
    display: inline-block;
586 
    }
587 
    .circle.selected {
588 
      background: @blue;
589 
      border:none;
590 
      }
591 
}
592 
 
593 
#prev{
594 
  width:30px;
595 
  height:30px;
596 
  background:rgba(0,0,0,0.6);
597 
  position:absolute;
598 
  top:50%;
599 
  left:0;
600 
  margin-top:-15px;
601 
  display:none;
602 
  background:url("../images/left_arrow.png")no-repeat center center, rgba(0,0,0,0.6);
603 
  background-size:15px, 100%;
604 
}
605 
 
606 
#next{
607 
  width:30px;
608 
  height:30px;
609 
  position:absolute;
610 
  top:50%;
611 
  right:0;
612 
  margin-top:-15px;
613 
  display:none;
614 
  background:url("../images/right_arrow1.png")no-repeat center center, rgba(0,0,0,0.6);
615 
  background-size:15px, 100%;
616 
}
617 
 
618 
/*-------------------------menu-----------------------------*/
619 
 
620 
.side-menu{
621 
  display:none;
622 
  position:absolute;
623 
  top:45px;
624 
  left:0;
625 
  z-index:14;
626 
  width:85%;
627 
  box-shadow: 2px 18px 38px -12px rgba(0, 0, 0, 0.5);
628 
  background:@white;
629 
  .menu-head{
630 
    padding:12px;
631 
    .font(1.8em);
632 
    background:@orange;
633 
    color:@white;
634 
    >a{
635 
      .float(right);
636 
      width:22px;
637 
      height:22px;
638 
      background:url("../images/home.png")no-repeat center center;
639 
      background-size:20px;
640 
    }
641 
  }
642 
  .cat-title{
643 
    padding: 3px 0 3px 6px;
644 
    background:@list-color1;
645 
    border-bottom:@white solid 1px;
646 
    span{
647 
      display: inline-block;
648 
      width: 30px;
649 
      height: 30px;
650 
      .float(left);
651 
    }
652 
    div{
653 
      color: @grey;
654 
      .font(1.6em);
655 
      font-weight:bold;
656 
      padding-left: 5px;
657 
      margin-top: 7px;
658 
      .float(left);
659 
      text-transform: uppercase;
660 
    }
661 
  }
662 
  .cat-sub{
663 
    width:100%;
664 
    background:@list-color2;
665 
    color:@grey;
666 
    border-bottom:@white solid 1px;
667 
    a{
668 
      .font(1.6em);
669 
      .float(left);
670 
      padding:7px 0 7px 49px;
671 
      display:block;
672 
      text-transform: capitalize;
673 
      width:100%;
674 
      .boxsize;
675 
    }
676 
  }
677 
 
678 
}
679 
 
680 
.mask{
681 
  position:absolute;
682 
  width:100%;
683 
  height:100%;
684 
  background:rgba(0,0,0,0);
685 
  top:45px;
686 
  left:0;
687 
  z-index:10;
688 
  display:none;
689 
}
690 
 
691 
/*---------------------------------profile-pverlay--------------------------*/
692 
 
693 
.profile-overlay{
694 
  width:85%;
695 
  position:absolute;
696 
   z-index:14;
697 
  top:45px;
698 
  right:0;
699 
  .boxsize;
700 
  background:@list-color2;
701 
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.5);
702 
  text-align: right;
703 
  >div:first-child{
704 
    padding:12px;
705 
    .font(1.8em);
706 
    background:@orange;
707 
    color:@white;
708 
  }
709 
  a{
710 
    display:block;
711 
    color:@grey;
712 
    .font(1.6em);
713 
    font-weight:bold;
714 
    padding:10px 20px 10px 10px;
715 
    width:100%;
716 
    background:@list-color1;
717 
    border-bottom:@white solid 1px;
718 
    .boxsize;
719 
    > span{
720 
     .float(left);
721 
     font-weight:normal;
722 
    }
723 
  }
724 
}
725 
 
726 
.sucess-reg{
727 
  padding:5px;
728 
  margin:5px;
729 
  color:@green;
730 
  border:@green dashed 1px;
731 
  .font(1.4em);
732 
}
733 
 
734 
 
735 
/*---------------------------------------loader css-----------------------------------*/
736 
 
737 
.pace {
738 
  -webkit-pointer-events: none;
739 
  pointer-events: none;
740 
  z-index: 2000;
741 
  position: fixed;
742 
  height: 60px;
743 
  width: 60px;
744 
  margin: auto;
745 
  top: 0;
746 
  left: 0;
747 
  right: 0;
748 
  bottom: 0;
749 
}
750 
 
751 
.pace.pace-inactive .pace-activity {
752 
  display: none;
753 
}
754 
 
755 
.pace-activity {
756 
    position: fixed;
757 
    z-index: 2000;
758 
    display: block;
759 
    position: absolute;
760 
    left: 4px;
761 
    top: 4px;
762 
    height: 30px;
763 
    width: 30px;
764 
    border-width: 10px;
765 
    border-style: double;
766 
    border-color: #3971B8 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
767 
    border-radius: 50px;
768 
    -o-border-radius: 8px;
769 
    -webkit-animation: spin 1s linear infinite;
770 
    -moz-animation: spin 1s linear infinite;
771 
    -o-animation: spin 1s linear infinite;
772 
    animation: spin 1s linear infinite;
773 
}
774 
 
775 
 
776 
.pace-activity:before {
777 
  content: ' ';
778 
  position: absolute;
779 
  top: 4px;
780 
  left: 0px;
781 
  height: 20px;
782 
  width: 20px;
783 
  display: block;
784 
  border-width: 0px;
785 
  border-style: solid;
786 
  border-color: #FF8700 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
787 
  border-radius: 54px;
788 
  -o-border-radius: 54px;
789 
}
790 
 
791 
 
792 
@-webkit-keyframes spin {
793 
  100% { -webkit-transform: rotate(359deg); }
794 
}
795 
 
796 
@-moz-keyframes spin {
797 
  100% { -moz-transform: rotate(359deg); }
798 
}
799 
 
800 
@-o-keyframes spin {
801 
  100% { -moz-transform: rotate(359deg); }
802 
}
803 
 
804 
@keyframes spin {
805 
  100% {  transform: rotate(359deg); }
806 
}
807 
 
808 
/*welcome popup*/
809 
 
810 
.welcome-popup{
811 
  display:none;
812 
  background:rgba(0,0,0,0.6);
813 
  position:absolute;
814 
  width:100%;
815 
  height:100%;
816 
  top:0;
817 
  left:0;
818 
  bottom:0;
819 
  z-index:1000;
820 
}
821 
  .popup{
822 
    display:none;
823 
    z-index:1010;
824 
    position:absolute;
825 
    width:80%;
826 
    left:10%;
827 
    top:20%;
828 
    -webkit-appearance: none;
829 
    -moz-appearance: none;
830 
    -o-appearance:none;
831 
    appearance: none;
832 
    background:@blue;
833 
    .boxsize;
834 
    padding:20px 10px;
835 
    text-align:center;
836 
    img{
837 
      width:50%;
838 
      max-width:250px;
839 
      margin-bottom:15px;
840 
    }
841 
    p{
842 
      .font(1.4em);
843 
      margin-bottom:20px;
844 
      color:@white;
845 
    }
846 
    .m-btn{
847 
      .font(1.6em);
848 
      padding:8px 0;
849 
      background:@orange;
850 
      color:@white;
851 
      margin-bottom:20px;
852 
      text-transform:uppercase;
853 
    }
854 
    .desktop-link{
855 
      text-decoration:underline;
856 
      .font(1.4em);
857 
      color:@white;
858 
    }
859 
  }