Subversion Repositories SmartDukaan

Rev

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