Subversion Repositories SmartDukaan

Rev

Rev 10846 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
10582 lgm 1
@import 'common.less';
2
 
3
 
4
.rech-head{
5
  background:darken(@list-color2,5%);
6
  border-top:@list-color1 solid 1px;
7
  padding:0 3px;
8
  .boxsize;
9
  width:100%;
10
  position:relative;
11
  > div:nth-of-type(1), > div:nth-of-type(3){
12
    .float(left);
13
    width:49%;
14
    padding:10px 0;
15
    .font(1.6em);
16
    font-weight:bold;
17
    color:@grey;
18
    text-align:center;
19
    .boxsize;
20
    text-transform:uppercase;
21
    height:45px;
22
    line-height:22px;
23
  }
24
  > div:nth-of-type(3){
25
    .float(right)!important;  
26
  }
27
  > div:nth-of-type(2){
28
    .float(left);
29
    width:2%;
30
    margin: 5px 0 5px -0.5px;
31
    max-width:1px;
32
    height:35px;
33
    background:@grey;
34
    text-align:center;
35
    position: absolute;
36
    left: 50%;
37
  }
38
  .selected{
39
    color:@ltblue!important;
40
    border-bottom:@ltblue solid 5px;
41
  }
42
 
43
}
44
 
45
.dth-recharge{
46
  display:none;
47
}
48
 
49
form{
50
  padding:10px 0;
51
  background:@list-color2;
52
  fieldset{
53
    border:none;
54
  }
55
 
56
  label{
57
    font-weight:bold;
58
    display:block;
59
    .font(1.4em);
60
    color:@grey;
61
  }
62
  input,select{
63
    width:100%;
64
    appearance:none;
65
    -webkit-appearance:none;
66
    border:@list-color1 solid 1px;
67
    background-color:@white;
68
    color:@grey;
69
    border-radius:0;
70
    outline:none;
71
    padding:10px;
72
    display:block;
73
    .boxsize;
74
    .font(1.4em);
75
    margin:2px 0 8px 0;
76
  }
77
 
78
  .price{
79
    position:relative;
80
  }
81
  .price:before{
82
    content:'Rs';
83
    position:absolute;
84
  }
85
 
86
  select{
87
    background:url('../images/dropdown.PNG')no-repeat 99% 17px,@white;
88
    background-size:20px,100%;
89
  }
90
 
91
  input[type="submit"], input[type="button"]{
92
  margin:15px 0;
93
  background:@orange;
94
  color:@white;
95
  .font(1.8em);
96
  text-align:center;
97
  padding:10px 0;
98
  text-transform:uppercase;
99
  }
100
 
101
}
102
 
103
/*---------------------------------topup div -------------------------------*/
104
 
105
.topup-cont{
106
  padding:5px;
107
  p:first-child{
108
    color:@grey;
109
    .font(1.6em);
110
    margin:5px 0;
111
    font-weight:bold;
112
    .float(left);
113
  }
114
  .close{
115
    .float(right);
116
    width:20px;
117
    height:20px;
118
    background:url('../images/cancel.png')no-repeat center center;
119
    background-size:contain;
120
    margin: 3px 5px 0 0;
121
  }
122
  .topup-cont-head{
123
     width:100%!important;
124
      margin-top:10px;
125
      padding:5px 0;
126
       background:@grey;
127
      .boxsize;
128
    >div{
129
      .font(1.4em)!important;
130
      color:@white;
131
      border-right:@white solid 1px;
132
      background:@grey!important;
133
      margin:0!important;
134
      text-align:center!important;
135
    }
136
    >div:last-child{
137
      border-right:none;
138
    }
139
 
140
}  
141
.topup-cont-body{
142
  width:100%!important;
143
  >div{
144
    //border-bottom:lighten(@grey,45%) solid 1px;
145
  }
146
}
147
 
148
  .topup-cont-head >div:nth-of-type(1),.topup-cont-body >div:nth-of-type(3n+1){
149
    .font(1.2em);
150
      .float(left);
151
      width:22%;
152
      .boxsize;
153
      .boxsize;
154
      padding:7px 3px;
155
      text-align:center;
156
      background:@orange;
157
      color:@white;
158
      margin:3px 0;
159
  }
160
 
161
  .topup-cont-head >div:nth-of-type(2), .topup-cont-body >div:nth-of-type(3n+2){
162
      .font(1.2em);
163
      .float(left);
164
      width:23%;
165
      .boxsize;
166
      padding:7px 3px;
167
      text-align:center;
168
      text-overflow: ellipsis;
169
      overflow: hidden;
170
      white-space: nowrap;
171
      margin:3px 0;
172
  }
173
  .topup-cont-head >div:nth-of-type(3),.topup-cont-body >div:nth-of-type(3n+3){
174
    .font(1.2em);
175
      .float(left);
176
      width:55%;
177
      .boxsize;
178
      padding:7px 3px;
179
      text-align:left;
180
      margin:3px 0;
181
      text-overflow: ellipsis;
182
      overflow: hidden;
183
      white-space: nowrap;
184
  }
185
 
186
}
187
 
188
.plans-btn{
189
  text-align:center;
190
  margin:10px 0 8px;
191
  padding:10px;
192
  background:@white;
193
  border:@list-color1 solid 1px;
194
  p{
195
    .font(1.6em);
196
    color:@grey;
197
  }
198
  >div{
199
    padding:6px 0;
200
    width:40%;
201
    background:@ltblue;
202
    color:@white;
203
    .font(1.4em);
204
    margin-top:5px;
205
  }
206
  >div:nth-of-type(1){
207
    .float(left);
208
  }
209
  >div:last-child{
210
    .float(right);
211
  }
212
}
213
 
214
/*-----------------------------------recharge-onfirmation---------------------------------*/
215
 
216
.conf-head{
217
  width:100%;
218
  background:@list-color2;
219
  margin-top:1px;
220
  padding:5px 10px;
221
  .boxsize;
222
  color:@grey;
223
  .font(1.6em);
224
  font-weight:bold; 
225
}
226
.conf-cont{
227
  background: @list-color2;
228
   padding:0px 10px 10px 10px;
229
  .conf-div{
230
     color:@grey;
231
    .font(1.4em);
232
    > div{
233
      .float(left);
234
      width:50%;
235
    }
236
    // >div:nth-of-type(2n+1){
237
      // min-width:130px;
238
    // }
239
    >div:nth-of-type(odd){
240
 
241
    }
242
  }
243
  .pay-now{
244
    margin-top:10px;
245
    background: @orange;
246
    text-transform: uppercase;
247
    color: @white;
248
    padding: 10px;
249
    text-align: center;
250
    .font(1.6em);
251
  }
252
}
253
 
254
.coupon-code{
255
  margin-top:10px;
256
  border:@list-color1 solid 1px;
257
  background:@white;
258
  >div:nth-of-type(1){
259
    padding:10px 5px;
260
    background:@grey;
261
    color:@white;
262
    .font(1.4em);
263
  }
264
  >div:nth-of-type(2){
265
    padding:10px 5px 10px;
266
    input[type="text"]{
267
    color:@grey;
268
      .float(left);
269
      .boxsize;
270
      width:55%;
271
      border:@list-color2 solid 1px;
272
      padding:0 4px;
273
      height:30px;
274
      line-height:30px;
275
      display:block;
276
  }
277
  .apply-coupon{
278
    .font(1.4em);
279
      .float(right);
280
      width:40%;
281
      background:@ltblue;
282
      color:@white;
283
      height:30px;
284
      line-height:30px;
285
      text-align:center;
286
  }
287
 }
288
}
289
 
290
.gd-total{
291
    border:lighten(@grey,45%) solid 1px;
292
    background:@white;
293
    margin-top:10px;
294
    color:@grey;
295
      >div:nth-of-type(1){
296
        .float(left);
297
         width:60%;
298
        .font(1.6em);
299
        .boxsize;
300
        padding:10px 5px;
301
        border-right:lighten(@grey,45%) solid 1px;
302
      }
303
      >div:nth-of-type(2){
304
        .float(left);
305
        width:40%;
306
        .font(1.6em);
307
        .boxsize;
308
        padding:10px 5px;
309
        text-align:center;
310
      }
311
    }
312
 
313
#captcha, #clickCaptcha{
314
  text-align:center;
315
  margin:10px 0;
316
}
317
 
318
#coupon_msg{
319
  //background:@green;
320
}
321
/*----------------------error-msg---------------------------*/
322
 
323
.error_msg{
324
  padding:5px;
325
  display:block;
326
  border:red dotted 1px;
327
  background:@list-color2;
328
  color:red;
329
  .font(1.4em);
330
  margin:10px;
331
}
332
 
333
@import 'common.less';
334
 
335
 
336
.rech-head{
337
  background:darken(@list-color2,5%);
338
  border-top:@list-color1 solid 1px;
339
  padding:0 3px;
340
  .boxsize;
341
  width:100%;
342
  position:relative;
343
  > div:nth-of-type(1), > div:nth-of-type(3){
344
    .float(left);
345
    width:49%;
346
    padding:10px 0;
347
    .font(1.6em);
348
    font-weight:bold;
349
    color:@grey;
350
    text-align:center;
351
    .boxsize;
352
    text-transform:uppercase;
353
    height:45px;
354
    line-height:22px;
355
  }
356
  > div:nth-of-type(3){
357
    .float(right)!important;  
358
  }
359
  > div:nth-of-type(2){
360
    .float(left);
361
    width:2%;
362
    margin: 5px 0 5px -0.5px;
363
    max-width:1px;
364
    height:35px;
365
    background:@grey;
366
    text-align:center;
367
    position: absolute;
368
    left: 50%;
369
  }
370
  .selected{
371
    color:@ltblue!important;
372
    border-bottom:@ltblue solid 5px;
373
  }
374
 
375
}
376
 
377
.dth-recharge{
378
  display:none;
379
}
380
 
381
form{
382
  padding:10px;
383
  background:@list-color2;
384
  fieldset{
385
    border:none;
386
  }
387
 
388
  label{
389
    font-weight:bold;
390
    display:block;
391
    .font(1.4em);
392
    color:@grey;
393
  }
394
  input,select{
395
    width:100%;
396
    appearance:none;
397
    -webkit-appearance:none;
398
    border:@list-color1 solid 1px;
399
    background-color:@white;
400
    color:@grey;
401
    border-radius:0;
402
    outline:none;
403
    padding:10px;
404
    display:block;
405
    .boxsize;
406
    .font(1.4em);
407
    margin:2px 0 8px 0;
408
  }
409
 
410
  .price{
411
    position:relative;
412
  }
413
  .price:before{
414
    content:'Rs';
415
    position:absolute;
416
  }
417
 
418
  select{
419
    background:url('../images/dropdown.PNG')no-repeat 99% 17px,@white;
420
    background-size:20px,100%;
421
  }
422
 
423
  input[type="submit"]{
424
  margin:15px 0;
425
  background:@orange;
426
  color:@white;
427
  .font(1.8em);
428
  text-align:center;
429
  padding:10px 0;
430
  text-transform:uppercase;
431
  }
432
 
433
}
434
 
435
/*---------------------------------topup div -------------------------------*/
436
 
437
.topup-cont{
438
  padding:5px;
439
  p:first-child{
440
    color:@grey;
441
    .font(1.6em);
442
    margin:5px 0;
443
    font-weight:bold;
444
    .float(left);
445
  }
446
  .close{
447
    .float(right);
448
    width:20px;
449
    height:20px;
450
    background:url('../images/cancel.png')no-repeat center center;
451
    background-size:contain;
452
    margin: 3px 5px 0 0;
453
  }
454
  .topup-cont-head{
455
     width:100%!important;
456
      margin-top:10px;
457
      padding:5px 0;
458
       background:@grey;
459
      .boxsize;
460
    >div{
461
      .font(1.4em)!important;
462
      color:@white;
463
      border-right:@white solid 1px;
464
      background:@grey!important;
465
      margin:0!important;
466
      text-align:center!important;
467
    }
468
    >div:last-child{
469
      border-right:none;
470
    }
471
 
472
}  
473
.topup-cont-body{
474
  width:100%!important;
475
  >div{
476
    //border-bottom:lighten(@grey,45%) solid 1px;
477
  }
478
}
479
 
480
  .topup-cont-head >div:nth-of-type(1),.topup-cont-body >div:nth-of-type(3n+1){
481
    .font(1.2em);
482
      .float(left);
483
      width:22%;
484
      .boxsize;
485
      .boxsize;
486
      padding:7px 3px;
487
      text-align:center;
488
      background:@orange;
489
      color:@white;
490
      margin:3px 0;
491
  }
492
 
493
  .topup-cont-head >div:nth-of-type(2), .topup-cont-body >div:nth-of-type(3n+2){
494
      .font(1.2em);
495
      .float(left);
496
      width:23%;
497
      .boxsize;
498
      padding:7px 3px;
499
      text-align:center;
500
      text-overflow: ellipsis;
501
      overflow: hidden;
502
      white-space: nowrap;
503
      margin:3px 0;
504
  }
505
  .topup-cont-head >div:nth-of-type(3),.topup-cont-body >div:nth-of-type(3n+3){
506
    .font(1.2em);
507
      .float(left);
508
      width:55%;
509
      .boxsize;
510
      padding:7px 3px;
511
      text-align:left;
512
      margin:3px 0;
513
      text-overflow: ellipsis;
514
      overflow: hidden;
515
      white-space: nowrap;
516
  }
517
 
518
}
519
 
520
.plans-btn{
521
  text-align:center;
522
  margin:10px 0 8px;
523
  padding:10px;
524
  background:@white;
525
  border:@list-color1 solid 1px;
526
  p{
527
    .font(1.6em);
528
    color:@grey;
529
  }
530
  >div{
531
    padding:6px 0;
532
    width:40%;
533
    background:@ltblue;
534
    color:@white;
535
    .font(1.4em);
536
    margin-top:5px;
537
  }
538
  >div:nth-of-type(1){
539
    .float(left);
540
  }
541
  >div:last-child{
542
    .float(right);
543
  }
544
}
545
 
546
/*-----------------------------------recharge-confirmation---------------------------------*/
547
 
548
.conf-head{
549
  width:100%;
550
  background:@list-color2;
551
  margin-top:1px;
552
  padding:5px 10px;
553
  .boxsize;
554
  color:@grey;
555
  .font(1.6em);
556
  font-weight:bold; 
557
}
558
.conf-cont{
559
  background: @list-color2;
560
   padding:0px 10px 10px 10px;
561
  .conf-div{
562
     color:@grey;
563
    .font(1.4em);
564
    > div{
565
      .float(left);
566
      width:50%;
567
    }
568
    // >div:nth-of-type(2n+1){
569
      // min-width:130px;
570
    // }
571
    >div:nth-of-type(odd){
572
 
573
    }
574
  }
575
  .pay-now{
576
    margin-top:10px;
577
    background: @orange;
578
    text-transform: uppercase;
579
    color: @white;
580
    padding: 10px;
581
    text-align: center;
582
    .font(1.6em);
583
  }
584
}
585
 
586
.coupon-code{
587
  margin-top:10px;
588
  border:@list-color1 solid 1px;
589
  background:@white;
590
  >div:nth-of-type(1){
591
    padding:10px 5px;
592
    background:@grey;
593
    color:@white;
594
    .font(1.4em);
595
  }
596
  >div:nth-of-type(2){
597
    padding:10px 5px 10px;
598
    input[type="text"]{
599
    color:@grey;
600
      .float(left);
601
      .boxsize;
602
      width:55%;
603
      border:@list-color2 solid 1px;
604
      padding:0 4px;
605
      height:30px;
606
      line-height:30px;
607
      display:block;
608
  }
609
  .apply-coupon{
610
    .font(1.4em);
611
      .float(right);
612
      width:40%;
613
      background:@ltblue;
614
      color:@white;
615
      height:30px;
616
      line-height:30px;
617
      text-align:center;
618
  }
619
 }
620
}
621
 
622
.gd-total{
623
    border:lighten(@grey,45%) solid 1px;
624
    background:@white;
625
    margin-top:10px;
626
    color:@grey;
627
      >div:nth-of-type(1){
628
        .float(left);
629
         width:60%;
630
        .font(1.6em);
631
        .boxsize;
632
        padding:10px 5px;
633
        border-right:lighten(@grey,45%) solid 1px;
634
      }
635
      >div:nth-of-type(2){
636
        .float(left);
637
        width:40%;
638
        .font(1.6em);
639
        .boxsize;
640
        padding:10px 5px;
641
        text-align:center;
642
      }
643
    }
644
 
645
#captcha, #clickCaptcha{
646
  text-align:center;
647
  margin:10px 0;
648
}
649
 
650
#coupon_msg{
651
  //background:@green;
652
}
653
 
654
.conf-cont .mobile-recharge{
655
      padding:0px;
656
}
657
 
658
/*----------------------error-msg---------------------------*/
659
 
660
.error_msg{
661
  padding:5px;
662
  display:block;
663
  border:red dotted 1px;
664
  background:@list-color2;
665
  color:red;
666
  .font(1.4em);
667
  margin:10px;
668
}
669
 
670
/*----------------------payment-hldr-------------------------*/
671
 
672
.payment-hldr{
673
  background:@list-color2;
674
  padding:5px 5px 10px;
675
  .hldr-sub{
676
    margin-top:10px;
677
    background:@white;
678
    border:lighten(@grey,45%) solid 1px;
679
    >div:nth-of-type(1){
680
      color:@ltblue;
681
      font-weight:bold;
682
    }
683
    form{
684
    background:@white;
685
    padding:0;
686
    }
687
    form fieldset{
688
      border:none;
689
    }
690
 
691
    .cc-hldr{
692
      border:lighten(@grey,45%) solid 1px;
693
      border-bottom:none;
694
      width: 100%;
695
      .boxsize;
696
     div{
697
      .float(left);
698
      width: 50%;
699
      box-sizing: border-box;
700
      -webkit-box-sizing: border-box;
701
      -moz-box-sizing: border-box;
702
      .font(1.4em);
703
      color: @white;
704
      background: @grey;
705
      padding: 10px 0;
706
      text-align: center;
707
    }
708
    .selected{
709
      background: @white!important;
710
      color: @ltblue!important;
711
      font-weight:bold;
712
    }
713
    }
714
 
715
    > .card{
716
      color:@grey;
717
      padding:7px 5px;
718
      .font(1.6em);
719
      border-top:lighten(@grey,45%) solid 1px;
720
      >span{
721
        .float(right);
722
      }
723
    } 
724
    > .card:first-child{
725
      border-top:none;
726
    }   
727
  }  
728
  .credit-cards{
729
    padding:0 5px 5px 5px;
730
    .in-india, .out-india{
731
      width:100%;
732
      padding:20px 0 10px; 
733
      border:lighten(@grey,45%) solid 1px;
734
      border-top:none;
735
      .boxsize;
736
      p{
737
        text-align:center;
738
        .font(1.2em);
739
        margin:10px 0 0 0;
740
        color:@grey;
741
        .float(left);
742
        width:100%;
743
      }
744
    }
745
  }
746
 
747
  .info-hldr{
748
    form fieldset{
749
      border:none;
750
    }
751
    padding:0 5px 5px 5px;
752
    .info-cap{
753
      color:@grey;
754
      .font(1.2em);
755
    }
756
    .emi-hldr{
757
      border:lighten(@grey,45%) solid 1px;
758
      border-bottom:none;
759
        .emi-head{
760
          border-bottom:lighten(@grey,45%) solid 1px;
761
          .font(1.2em);
762
          font-weight:bold;
763
          background:@list-color1;
764
          >div{
765
          .float(left);
766
          width:33.3%;
767
          color:@grey;
768
          text-align:center;
769
          padding:7px 2px;
770
          .boxsize;
771
          }
772
        }
773
        .emi-body{
774
          border-bottom:lighten(@grey,45%) solid 1px;
775
          .font(1.2em);
776
          color:@grey;
777
          >div{
778
          .float(left);
779
          width:33.3%;
780
          text-align:center;
781
          padding:7px 2px;
782
          .boxsize;
783
          }
784
        }
785
         .emi-body.selected{
786
            background:lighten(@green, 10%);
787
            color:@white!important;
788
            box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
789
        }
790
    }
791
  }
792
 
793
 
794
    .c-box{
795
      padding:0 5px;
796
       div{
797
        float:left;
798
        width:30%;
799
        .boxsize;
800
        text-align:center;
801
        padding:2px;
802
        border:@white solid 2px;
803
        opacity: 0.6;
804
        img{
805
          width:80%;
806
          height: 50px;
807
        }
808
      }
809
      div:nth-of-type(3n+2){
810
        margin:0 5%;
811
      }
812
      .selected{
813
        border:@ltblue solid 2px;
814
        opacity: 1;
815
      }
816
      p{
817
        clear:both;
818
      }
819
    }
820
 
821
 
822
 
823
  .c-info{
824
    color:@grey;
825
    .font(1.4em);
826
    padding:0 0 20px; 
827
    text-align:center;
828
  }
829
  .payment-btn{
830
    appearance:none;
831
    -webkit-appearance:none;
832
    border:none;
833
    width:100%;
834
    background:@orange;
835
    color:@white;
836
    .font(1.8em);
837
    padding:8px 0;
838
    margin:15px 0 10px;
839
  }
840
 
841
 
842
}
843
 
844
/*-------------recharge-confirmation-----------------------*/
845
 
846
.r-hldr{
847
  background:@list-color1;
848
  //padding:0 10px 10px 10px;
849
  .r-head{
850
    .font(1.6em);
851
    font-weight:bold;
852
    background:@list-color2;
853
    color:@grey;
854
    padding:5px 10px;
855
    //border-bottom:@white solid 2px;
856
  }
857
  .r-cont{
858
    padding:0 10px;
859
    >div{
860
      padding:5px;
861
      .font(1.4em);
862
      .float(left);
863
      width:40%;
864
      color:@grey;
865
      .boxsize;
866
      padding-right:5px;
867
    }
868
    >div:nth-of-type(1){
869
      font-weight:bold;
870
    }
871
  }
872
 
873
  .r-info{
874
    padding:10px;
875
  }
876
    .r-info-head{
877
     width:100%!important;
878
      //margin-top:10px;
879
      padding:5px 0;
880
       background:@grey;
881
      .boxsize;
882
    >div{
883
      .font(1.4em)!important;
884
      color:@white!important;
885
      border-right:@white solid 1px;
886
      background:@grey!important;
887
      margin:0!important;
888
      text-align:center!important;
889
    }
890
    >div:last-child{
891
      border-right:none;
892
    }
893
 
894
}  
895
 
896
.r-info-head >div:nth-of-type(1),.r-info-body >div:nth-of-type(1){
897
      .font(1.2em);
898
      .float(left);
899
      width:40%;
900
      .boxsize;
901
      padding:7px 3px;
902
      text-align:center;
903
      color:@grey;
904
      margin:3px 0;
905
  }
906
 
907
  .r-info-head >div:nth-of-type(2), .r-info-body >div:nth-of-type(2){
908
      .font(1.2em);
909
      .float(left);
910
      width:30%;
911
      .boxsize;
912
      padding:7px 3px;
913
      text-align:center;
914
      text-overflow: ellipsis;
915
      overflow: hidden;
916
      white-space: nowrap;
917
      margin:3px 0;
918
      color:@grey;
919
      text-align:center;
920
  }
921
  .r-info-head >div:nth-of-type(3),.r-info-body >div:nth-of-type(3){
922
    .font(1.2em);
923
      .float(left);
924
      width:30%;
925
      .boxsize;
926
      padding:7px 3px;
927
      text-align:left;
928
      margin:3px 0;
929
      text-overflow: ellipsis;
930
      overflow: hidden;
931
      white-space: nowrap;
932
      color:@grey;
933
      text-align:center;
934
  }
935
}
936
 
937
.update-address{
938
  margin:10px 0;
939
}
940
 
941
/*-------------recharge-faq-----------------------*/
942
.faq-hldr{
943
  background:@list-color1;
944
  h2{
945
    background:@list-color1;
946
    padding:10px;
947
    color:@grey;
948
    .font(2.0em);
949
    border-top:@white solid 1px;
950
    border-bottom:@white solid 1px;
951
  }
952
  .faq-question{
953
    color:@grey;
954
    .font(1.4em);
955
    margin-top:10px;
956
    padding:0 10px;
957
  }
958
  .faq-answer{
959
    color:@grey;
960
    .font(1.2em);
961
    padding:0 10px;
962
  }
963
}