Subversion Repositories SmartDukaan

Rev

Rev 10582 | Rev 10650 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
10582 lgm 1
@import "common.less";
2
 
3
.shipping-head{
4
  border-top:@list-color1 solid 1px;
5
  position:relative;
6
  .boxsize;
7
  width:100%;
8
  border: #FFF solid 1px;
9
  border-left: none;
10
  border-right: none;
11
  .shipping, .payment{
12
    .float(left);
13
    width:50%;
14
    padding:10px 0;
15
    .font(1.6em);
16
    font-weight:bold;
17
    color:@white;
18
    text-align:center;
19
    .boxsize;
20
    text-transform:uppercase;
21
    height:45px;
22
    line-height:28px;
23
    position: relative;
24
    background:@ltblue;
25
  }
26
  .payment{
27
        .float(right)!important;
28
        color:@white;  
29
        background:lighten(@grey,20%);
30
        padding-left: 7%;
31
  }
32
 
33
  .shipping:after 
34
    {
35
    content: "";
36
    position: absolute;
37
    top: 0px;
38
    right: -22px;
39
    border-style: solid;
40
    border-width: 22px 0 22px 22px;
41
    border-color: transparent @ltblue;
42
    display: block;
43
    width: 0;
44
    z-index: 1;
45
    }
46
 
47
     .payment:before 
48
    {
49
      content: "";
50
      position: absolute;
51
      top: -3px;
52
      left: 0;
53
      border-style: solid;
54
      border-width: 25px 0 25px 25px;
55
      border-color: rgba(0, 0, 0, 0) #FFF;
56
      display: block;
57
      width: 0;
58
      z-index: 0;
59
    }
60
}
61
 
62
select{
63
    width:100%;
64
    appearance:none;
65
    -webkit-appearance:none;
66
    border:@list-color1 solid 1px;
67
    color:@grey;
68
    border-radius:0;
69
    outline:none;
70
    padding:10px;
71
    display:block;
72
    .boxsize;
73
    .font(1.4em);
74
    margin:2px 0 8px 0;
75
    background:url('../images/dropdown.png')no-repeat 99% 16px,@white;
76
    background-size:20px,100%;
77
  }
78
 
79
.shipping-cont{
80
  padding:10px 5px;
81
  background:@list-color2;
82
  form{
83
    fieldset{border:none;}
84
    padding:5px 0;
85
  }
86
  label{
87
    font-weight:bold;
88
    display:block;
89
    .font(1.4em);
90
    color:@grey;
91
    span{
92
      color:red;
93
    }
94
  }
95
  input[type="submit"]{
96
    .float(left);
97
    width:100%;
98
    margin:10px 0;
99
    background:@orange;
100
    color:@white;
101
    .font(1.8em);
102
    text-align:center;
103
    padding:8px 0;
104
    text-transform:uppercase;
105
    appearance: none;
106
    -webkit-appearance: none;
107
    border:none;
108
  }
109
 
110
  .deliver-info{
111
    border:lighten(@grey,45%) solid 1px;
112
    >div:nth-of-type(1){
113
      .float(left);
114
      width:50%;
115
      .boxsize;
116
      .font(1.4em);
117
      background:@grey;
118
      padding:10px 0;
119
      color:@white;
120
      text-align:center;
121
    }
122
    >div:nth-of-type(2){
123
      .float(left);
124
      width:50%;
125
      .boxsize;
126
      .font(1.4em);
127
      color:@white;
128
      background:@grey;
129
      padding:10px 0;
130
      text-align:center;
131
    }
132
    .selected{
133
      background:@white!important;
134
      color:@ltblue!important;
135
      font-weight:bold!important;
136
    }
137
 
138
    .deliver-here, .pickup{
139
      background:@white;
140
      padding:5px;
141
    }
142
    .deliver-address,.pickup-spot{
143
      padding:5px;
144
      .font(1.2em);
145
      color:@grey;
146
      border-bottom:lighten(@grey,45%) solid 1px;
147
      position:relative;
148
      .cancel-btn{
149
        position:absolute;
150
        top:4px;
151
        right:1%;
152
        width:20px;
153
        height:20px;
154
        background:url('../images/cancel.png')no-repeat center center;
155
        background-size:contain;
156
      }
157
    }
158
    .add-address{
159
      padding-top:10px;
160
      .font(1.2em);
161
      color:@grey;
162
      text-align:right;
163
      text-decoration: underline;
164
      text-decoration-color: lighten(@grey,45%);
165
    }
166
    .selected-add{
167
      border: dashed 1px #c8c8c8;
168
      background:url('../images/check-sh.png')no-repeat 99% 4px;
169
      background-size:20px;
170
      .cancel-btn{
171
        display:none;
172
      }
173
    }
174
  }
175
  .summary-head{
176
    margin-top:10px;
177
    background:@white;
178
    padding:10px 6px;
179
    .font(1.4em);
180
    font-weight:bold;
181
    color:@grey;
182
    border:lighten(@grey,45%) solid 1px;
183
    text-transform:capitalize;
184
    >span{
185
      .float(right);
186
    }
187
  }
188
 
189
  .order-summary{
190
    border:lighten(@grey,45%) solid 1px;
191
    border-top:none;
192
    background:@white;
193
    .os-head,.pd-summ{
194
      border-bottom:lighten(@grey,45%) solid 1px;
195
    }
196
    .os-head > div{
197
      font-weight:bold;
198
      .font(1.4em);
199
      text-transform:capitalize;
200
    }
201
    .os-head >div:nth-of-type(1),.pd-summ>div:nth-of-type(1){
202
      .float(left);
203
      width:45%;
204
      .boxsize;
205
      border-right:lighten(@grey,45%) solid 1px;
206
      .boxsize;
207
      padding:5px 3px;
208
    }
209
    .os-head > div:nth-of-type(2),.pd-summ>div:nth-of-type(2){
210
      .float(left);
211
      width:30%;
212
      .boxsize;
213
      padding:5px 3px;
214
      text-align:center;
215
      text-overflow: ellipsis;
216
      overflow: hidden;
217
      white-space: nowrap;
218
    }
219
    .os-head > div:nth-of-type(3),.pd-summ>div:nth-of-type(3){
220
      .float(left);
221
      width:25%;
222
      .boxsize;
223
      padding:5px 3px;
224
      text-align:center;
225
      border-left:lighten(@grey,45%) solid 1px;
226
    }
227
    .pd-summ>div>div{
228
      .font(1.4em);
229
      border:none!important;
230
      text-transform:capitalize;
231
      text-overflow: ellipsis;
232
      overflow: hidden;
233
      white-space: nowrap;
234
    }
235
    .pd-summ>div>span{
236
      color:lighten(@grey,20%);
237
    }
238
    .pd-summ>div:nth-of-type(2){
239
      .font(1.4em);
240
    }
241
    .add-ons{
242
      >div:nth-of-type(1){
243
        .float(left);
244
        .font(1.4em);
245
        width:75%;
246
        padding:5px 3px;
247
        .boxsize;
248
        text-transform:capitalize;
249
      }
250
      >div:nth-of-type(2){
251
        .float(left);
252
        .font(1.4em);
253
        width:25%;
254
        padding:5px 3px;
255
        text-align:center;
256
        .boxsize;
257
        text-transform:capitalize;
258
      }
259
    }
260
 
261
  }
262
 
263
}
264
.gd-total{
265
    border:lighten(@grey,45%) solid 1px;
266
    background:@white;
267
    margin-top:10px;
268
    color:@grey;
269
      >div:nth-of-type(1){
270
        .float(left);
271
         width:60%;
272
        .font(1.6em);
273
        .boxsize;
274
        padding:10px 5px;
275
        border-right:lighten(@grey,45%) solid 1px;
276
      }
277
      >div:nth-of-type(2){
278
        .float(left);
279
        width:40%;
280
        .font(1.6em);
281
        .boxsize;
282
        padding:10px 5px;
283
        text-align:center;
284
      }
285
    }
286
 
287
    .procced-btn{
288
      display:block;
289
      width:100%;
290
      margin:10px 0;
291
      background:@orange;
292
      color:@white;
293
      .font(1.8em);
294
      text-align:center;
295
      padding:8px 0;
296
      text-transform:uppercase;
297
      appearance: none;
298
      -webkit-appearance: none;
299
    }
300
 
301
    input[type="text"], input[type="number"] , input[type="date"]{
302
      width: 100%;
303
      appearance: none;
304
      -webkit-appearance: none;
305
      border: #E5E6E0 solid 1px;
306
      color: #555;
307
      border-radius: 0;
308
      outline: none;
309
      padding: 10px;
310
      display: block;
311
      box-sizing: border-box;
312
      -webkit-box-sizing: border-box;
313
      -moz-box-sizing: border-box;
314
      font: normal 1.4em/1.2em Helvetica, Arial, sans-serif;
315
      margin: 2px 0 8px 0;
316
      }
317
 
318
/*----------------------error-msg---------------------------*/
319
 
320
.error_msg{
321
  padding:5px 5px 5px 28px;
322
  display:block;
323
  border:#fc1f1f dashed 1px;
324
  color:#fc1f1f;
325
  .font(1.4em);
326
  margin:0 5px;
327
  background:url(../images/error-notification.png)no-repeat 5px center;
328
  background-size:20px;
329
}
330
 
331
/*-----------------------payment-hldr-------------------------------*/
332
.payment-cont{
333
  .shipping-head{
334
  border-top:@list-color1 solid 1px;
335
  position:relative;
336
  .boxsize;
337
  width:100%;
338
  border: #FFF solid 1px;
339
  border-left: none;
340
  border-right: none;
341
  .shipping, .payment{
342
    .float(left);
343
    width:50%;
344
    padding:10px 0;
345
    .font(1.6em);
346
    font-weight:bold;
347
    color:@white;
348
    text-align:center;
349
    .boxsize;
350
    text-transform:uppercase;
351
    height:45px;
352
    line-height:28px;
353
    position: relative;
354
    background:@ltblue;
355
    background:lighten(@grey,20%);
356
    color:@white;  
357
  }
358
  .payment{
359
        .float(right)!important;
360
        color:@white;  
361
        background:lighten(@grey,20%);
362
        padding-left: 7%;
363
  }
364
  .selected{
365
    color:@white!important;
366
    background:@ltblue!important;
367
  }
368
 
369
  .shipping:after 
370
    {
371
    content: "";
372
    position: absolute;
373
    top: 0px;
374
    right: -22px;
375
    border-style: solid;
376
    border-width: 22px 0 22px 22px;
377
    //border-color: transparent @ltblue;
378
    border-color: transparent lighten(@grey,20%);
379
    display: block;
380
    width: 0;
381
    z-index: 1;
382
    }
383
 
384
     .payment:before 
385
    {
386
      content: "";
387
      position: absolute;
388
      top: -3px;
389
      left: 0;
390
      border-style: solid;
391
      border-width: 25px 0 25px 25px;
392
      border-color: rgba(0, 0, 0, 0) #FFF;
393
      display: block;
394
      width: 0;
395
      z-index: 0;
396
    }
397
 
398
}
399
 
400
.payment-hldr{
401
  background:@list-color2;
402
  padding:5px 5px 10px;
403
  .hldr-sub{
404
    margin-top:10px;
405
    background:@white;
406
    border:lighten(@grey,45%) solid 1px;
407
    >div:nth-of-type(1){
408
      color:@ltblue;
409
      font-weight:bold;
410
    }
411
    form fieldset{
412
      border:none;
413
    }
414
 
415
    .cc-hldr{
416
      border:lighten(@grey,45%) solid 1px;
417
      border-bottom:none;
418
      width: 100%;
419
      .boxsize;
420
     div{
421
      .float(left);
422
      width: 50%;
423
      box-sizing: border-box;
424
      -webkit-box-sizing: border-box;
425
      -moz-box-sizing: border-box;
426
      .font(1.4em);
427
      color: @white;
428
      background: @grey;
429
      padding: 10px 0;
430
      text-align: center;
431
    }
432
    .selected{
433
      background: @white!important;
434
      color: @ltblue!important;
435
      font-weight:bold;
436
    }
437
    }
438
 
439
    > .card{
440
      color:@grey;
441
      padding:7px 5px;
442
      .font(1.6em);
443
      border-top:lighten(@grey,45%) solid 1px;
444
      >span{
445
        .float(right);
446
      }
447
    } 
448
    > .card:first-child{
449
      border-top:none;
450
    }   
451
  }  
452
  .credit-cards{
453
    padding:0 5px 5px 5px;
454
    .in-india, .out-india{
455
      width:100%;
456
      padding:20px 0 10px; 
457
      border:lighten(@grey,45%) solid 1px;
458
      border-top:none;
459
      .boxsize;
460
      p{
461
        text-align:center;
462
        .font(1.2em);
463
        margin:10px 0 0 0;
464
        color:@grey;
465
        .float(left);
466
        width:100%;
467
      }
468
    }
469
  }
470
 
471
  .info-hldr{
472
    form fieldset{
473
      border:none;
474
    }
475
    padding:0 5px 5px 5px;
476
    .info-cap{
477
      color:@grey;
478
      .font(1.2em);
479
    }
480
    .emi-hldr{
481
      border:lighten(@grey,45%) solid 1px;
482
      border-bottom:none;
483
        .emi-head{
484
          border-bottom:lighten(@grey,45%) solid 1px;
485
          .font(1.2em);
486
          font-weight:bold;
487
          background:@list-color1;
488
          >div{
489
          .float(left);
490
          width:33.3%;
491
          color:@grey;
492
          text-align:center;
493
          padding:7px 2px;
494
          .boxsize;
495
          }
496
        }
497
        .emi-body{
498
          border-bottom:lighten(@grey,45%) solid 1px;
499
          .font(1.2em);
500
          color:@grey;
501
          >div{
502
          .float(left);
503
          width:33.3%;
504
          text-align:center;
505
          padding:7px 2px;
506
          .boxsize;
507
          }
508
        }
509
         .emi-body.selected{
510
            background:lighten(@green, 10%);
511
            color:@white!important;
512
            box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
513
        }
514
    }
515
  }
516
 
517
 
518
    .c-box{
519
      padding:0 5px;
520
       div{
521
        float:left;
522
        width:30%;
523
        .boxsize;
524
        text-align:center;
525
        padding:2px;
526
        border:@white solid 2px;
527
        opacity: 0.6;
528
        img{
529
          width:80%;
530
          height: 50px;
531
        }
532
      }
533
      div:nth-of-type(3n+2){
534
        margin:0 5%;
535
      }
536
      .selected{
537
        border:@ltblue solid 2px;
538
        opacity: 1;
539
      }
540
      p{
541
        clear:both;
542
      }
543
    }
544
 
545
 
546
 
547
  .c-info{
548
    color:@grey;
549
    .font(1.4em);
550
    padding:0 0 20px; 
551
    text-align:center;
552
  }
553
  .payment-btn{
554
    appearance:none;
555
    -webkit-appearance:none;
556
    border:none;
557
    width:100%;
558
    background:@orange;
559
    color:@white;
560
    .font(1.8em);
561
    padding:8px 0;
562
    margin:15px 0 10px;
563
  }
564
 
565
 
566
}
567
}
568
 
569
 
570
/*-----------------------------orderconfirmation page------------------------------------*/
571
 
572
.order-conf{
573
  padding:10px 5px;
574
  background:@list-color2;
575
  >p:nth-of-type(1){
576
    color:@orange;
577
    .font(1.8em);
578
    font-weight:bold;
579
    text-align:center;
580
  }
581
  >p:nth-of-type(2){
582
    margin-top:5px;
583
    color:@grey;
584
    .font(1.6em);
585
    text-align:center;
586
    span{
587
      color:@orange;
588
    }
589
  }
590
  .ordered-item{
591
    background:@white;
592
    border:lighten(@grey,45%) solid 1px;
593
    padding:5px;
594
    margin-top:5px;
595
    >div:first-child{
596
      margin-top: 10px;
597
      .font(1.6em);
598
      color:@grey;
599
      span{
600
        font-weight:bold;
601
      }
602
    }
603
    .ordered-item-head{
604
      width:100%!important;
605
      margin-top:10px;
606
      padding:5px 0;
607
       background:@grey;
608
      .boxsize;
609
      > div{
610
        color:@white;
611
      }
612
    }
613
    .ordered-item-body{
614
      width:100%!important;
615
    }
616
     .ordered-item-head  >div:nth-of-type(1), .ordered-item-body > div:nth-of-type(1){
617
       .font(1.2em);
618
      .float(left);
619
      width:45%;
620
      .boxsize;
621
      border-right:@white solid 1px;
622
      .boxsize;
623
      padding:5px 3px;
624
    }
625
    .ordered-item-head > div:nth-of-type(2),  .ordered-item-body > div:nth-of-type(2){
626
      .font(1.2em);
627
      .float(left);
628
      width:30%;
629
      .boxsize;
630
      padding:5px 3px;
631
      text-align:center;
632
      text-overflow: ellipsis;
633
      overflow: hidden;
634
      white-space: nowrap;
635
    }
636
    .ordered-item-head > div:nth-of-type(3),  .ordered-item-body > div:nth-of-type(3){
637
      .font(1.2em);
638
      .float(left);
639
      width:25%;
640
      .boxsize;
641
      padding:5px 3px;
642
      text-align:center;
643
      border-left:@white solid 1px;
644
    }
645
 
646
    .tt-price, .ddate-div, .or-status{
647
      .font(1.4em);
648
       color:@grey;
649
       margin-top:3px;
650
       text-align:right;
651
       >span:first-child{
652
         display:inline-block;
653
         width:50%;
654
       }
655
       >span:last-child{
656
         display:inline-block;
657
         width:40%;
658
       }
659
    }
660
 
661
  }
662
}
663
 
664
.insured{
665
  background:url('../images/insured.png')no-repeat 100% center;
666
  background-size:55px;
667
}
668
 
669
#clickCaptcha{
670
  margin:5px 0 10px;
671
  text-decoration:underline;
672
}
673
 
674
 
675
#ccAddress.update-address{
676
  border:lighten(@grey,45%) solid 1px;
677
  background:@white;
678
  padding:5px;
679
  margin-top:10px;
680
  h3{
681
    color:@grey;
682
    .font(1.6em);
683
    margin-bottom:5px;
684
  }
685
}
10633 lgm 686
 
687
  .payment-error-hldr{
688
  padding:10px;
689
.payment-error{
690
  text-align:center;
691
  .font(1.4em);
692
  color:@grey;
693
  margin-top:10%;
694
}
695
.btn{
696
  background:@orange;
697
  text-align:center;
698
  .font(1.4em);
699
  color:@white;
700
  padding:8px 0;
701
  margin:10px auto 30px;
702
  display:block;
703
  width:80%;
704
 
705
}
706
}