Subversion Repositories SmartDukaan

Rev

Rev 10650 | Rev 10813 | 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;
10660 lgm 299
      border:none;
10582 lgm 300
    }
301
 
302
    input[type="text"], input[type="number"] , input[type="date"]{
303
      width: 100%;
304
      appearance: none;
305
      -webkit-appearance: none;
306
      border: #E5E6E0 solid 1px;
307
      color: #555;
308
      border-radius: 0;
309
      outline: none;
310
      padding: 10px;
311
      display: block;
312
      box-sizing: border-box;
313
      -webkit-box-sizing: border-box;
314
      -moz-box-sizing: border-box;
315
      font: normal 1.4em/1.2em Helvetica, Arial, sans-serif;
316
      margin: 2px 0 8px 0;
317
      }
318
 
319
/*----------------------error-msg---------------------------*/
320
 
321
.error_msg{
322
  padding:5px 5px 5px 28px;
323
  display:block;
324
  border:#fc1f1f dashed 1px;
325
  color:#fc1f1f;
326
  .font(1.4em);
327
  margin:0 5px;
328
  background:url(../images/error-notification.png)no-repeat 5px center;
329
  background-size:20px;
330
}
331
 
332
/*-----------------------payment-hldr-------------------------------*/
333
.payment-cont{
334
  .shipping-head{
335
  border-top:@list-color1 solid 1px;
336
  position:relative;
337
  .boxsize;
338
  width:100%;
339
  border: #FFF solid 1px;
340
  border-left: none;
341
  border-right: none;
342
  .shipping, .payment{
343
    .float(left);
344
    width:50%;
345
    padding:10px 0;
346
    .font(1.6em);
347
    font-weight:bold;
348
    color:@white;
349
    text-align:center;
350
    .boxsize;
351
    text-transform:uppercase;
352
    height:45px;
353
    line-height:28px;
354
    position: relative;
355
    background:@ltblue;
356
    background:lighten(@grey,20%);
357
    color:@white;  
358
  }
359
  .payment{
360
        .float(right)!important;
361
        color:@white;  
362
        background:lighten(@grey,20%);
363
        padding-left: 7%;
364
  }
365
  .selected{
366
    color:@white!important;
367
    background:@ltblue!important;
368
  }
369
 
370
  .shipping:after 
371
    {
372
    content: "";
373
    position: absolute;
374
    top: 0px;
375
    right: -22px;
376
    border-style: solid;
377
    border-width: 22px 0 22px 22px;
378
    //border-color: transparent @ltblue;
379
    border-color: transparent lighten(@grey,20%);
380
    display: block;
381
    width: 0;
382
    z-index: 1;
383
    }
384
 
385
     .payment:before 
386
    {
387
      content: "";
388
      position: absolute;
389
      top: -3px;
390
      left: 0;
391
      border-style: solid;
392
      border-width: 25px 0 25px 25px;
393
      border-color: rgba(0, 0, 0, 0) #FFF;
394
      display: block;
395
      width: 0;
396
      z-index: 0;
397
    }
398
 
399
}
400
 
401
.payment-hldr{
402
  background:@list-color2;
403
  padding:5px 5px 10px;
404
  .hldr-sub{
405
    margin-top:10px;
406
    background:@white;
407
    border:lighten(@grey,45%) solid 1px;
408
    >div:nth-of-type(1){
409
      color:@ltblue;
410
      font-weight:bold;
411
    }
412
    form fieldset{
413
      border:none;
414
    }
415
 
416
    .cc-hldr{
417
      border:lighten(@grey,45%) solid 1px;
418
      border-bottom:none;
419
      width: 100%;
420
      .boxsize;
421
     div{
422
      .float(left);
423
      width: 50%;
424
      box-sizing: border-box;
425
      -webkit-box-sizing: border-box;
426
      -moz-box-sizing: border-box;
427
      .font(1.4em);
428
      color: @white;
429
      background: @grey;
430
      padding: 10px 0;
431
      text-align: center;
432
    }
433
    .selected{
434
      background: @white!important;
435
      color: @ltblue!important;
436
      font-weight:bold;
437
    }
438
    }
439
 
440
    > .card{
441
      color:@grey;
442
      padding:7px 5px;
443
      .font(1.6em);
444
      border-top:lighten(@grey,45%) solid 1px;
445
      >span{
446
        .float(right);
447
      }
448
    } 
449
    > .card:first-child{
450
      border-top:none;
451
    }   
452
  }  
453
  .credit-cards{
454
    padding:0 5px 5px 5px;
455
    .in-india, .out-india{
456
      width:100%;
457
      padding:20px 0 10px; 
458
      border:lighten(@grey,45%) solid 1px;
459
      border-top:none;
460
      .boxsize;
461
      p{
462
        text-align:center;
463
        .font(1.2em);
464
        margin:10px 0 0 0;
465
        color:@grey;
466
        .float(left);
467
        width:100%;
468
      }
469
    }
470
  }
471
 
472
  .info-hldr{
473
    form fieldset{
474
      border:none;
475
    }
476
    padding:0 5px 5px 5px;
477
    .info-cap{
478
      color:@grey;
479
      .font(1.2em);
480
    }
481
    .emi-hldr{
482
      border:lighten(@grey,45%) solid 1px;
483
      border-bottom:none;
484
        .emi-head{
485
          border-bottom:lighten(@grey,45%) solid 1px;
486
          .font(1.2em);
487
          font-weight:bold;
488
          background:@list-color1;
489
          >div{
490
          .float(left);
491
          width:33.3%;
492
          color:@grey;
493
          text-align:center;
494
          padding:7px 2px;
495
          .boxsize;
496
          }
497
        }
498
        .emi-body{
499
          border-bottom:lighten(@grey,45%) solid 1px;
500
          .font(1.2em);
501
          color:@grey;
502
          >div{
503
          .float(left);
504
          width:33.3%;
505
          text-align:center;
506
          padding:7px 2px;
507
          .boxsize;
508
          }
509
        }
510
         .emi-body.selected{
511
            background:lighten(@green, 10%);
512
            color:@white!important;
513
            box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
514
        }
515
    }
516
  }
517
 
518
 
519
    .c-box{
520
      padding:0 5px;
521
       div{
522
        float:left;
523
        width:30%;
524
        .boxsize;
525
        text-align:center;
526
        padding:2px;
527
        border:@white solid 2px;
10650 lgm 528
        //opacity: 0.6;
10582 lgm 529
        img{
530
          width:80%;
531
          height: 50px;
10650 lgm 532
          max-width:90px;
10582 lgm 533
        }
534
      }
535
      div:nth-of-type(3n+2){
536
        margin:0 5%;
537
      }
538
      .selected{
539
        border:@ltblue solid 2px;
540
        opacity: 1;
541
      }
542
      p{
543
        clear:both;
544
      }
545
    }
546
 
547
 
548
 
549
  .c-info{
550
    color:@grey;
551
    .font(1.4em);
552
    padding:0 0 20px; 
553
    text-align:center;
554
  }
555
  .payment-btn{
556
    appearance:none;
557
    -webkit-appearance:none;
558
    border:none;
559
    width:100%;
560
    background:@orange;
561
    color:@white;
562
    .font(1.8em);
563
    padding:8px 0;
564
    margin:15px 0 10px;
565
  }
566
 
567
 
568
}
569
}
570
 
571
 
572
/*-----------------------------orderconfirmation page------------------------------------*/
573
 
574
.order-conf{
575
  padding:10px 5px;
576
  background:@list-color2;
577
  >p:nth-of-type(1){
578
    color:@orange;
579
    .font(1.8em);
580
    font-weight:bold;
581
    text-align:center;
582
  }
583
  >p:nth-of-type(2){
584
    margin-top:5px;
585
    color:@grey;
586
    .font(1.6em);
587
    text-align:center;
588
    span{
589
      color:@orange;
590
    }
591
  }
592
  .ordered-item{
593
    background:@white;
594
    border:lighten(@grey,45%) solid 1px;
595
    padding:5px;
596
    margin-top:5px;
597
    >div:first-child{
598
      margin-top: 10px;
599
      .font(1.6em);
600
      color:@grey;
601
      span{
602
        font-weight:bold;
603
      }
604
    }
605
    .ordered-item-head{
606
      width:100%!important;
607
      margin-top:10px;
608
      padding:5px 0;
609
       background:@grey;
610
      .boxsize;
611
      > div{
612
        color:@white;
613
      }
614
    }
615
    .ordered-item-body{
616
      width:100%!important;
617
    }
618
     .ordered-item-head  >div:nth-of-type(1), .ordered-item-body > div:nth-of-type(1){
619
       .font(1.2em);
620
      .float(left);
621
      width:45%;
622
      .boxsize;
623
      border-right:@white solid 1px;
624
      .boxsize;
625
      padding:5px 3px;
626
    }
627
    .ordered-item-head > div:nth-of-type(2),  .ordered-item-body > div:nth-of-type(2){
628
      .font(1.2em);
629
      .float(left);
630
      width:30%;
631
      .boxsize;
632
      padding:5px 3px;
633
      text-align:center;
634
      text-overflow: ellipsis;
635
      overflow: hidden;
636
      white-space: nowrap;
637
    }
638
    .ordered-item-head > div:nth-of-type(3),  .ordered-item-body > div:nth-of-type(3){
639
      .font(1.2em);
640
      .float(left);
641
      width:25%;
642
      .boxsize;
643
      padding:5px 3px;
644
      text-align:center;
645
      border-left:@white solid 1px;
646
    }
647
 
648
    .tt-price, .ddate-div, .or-status{
649
      .font(1.4em);
650
       color:@grey;
651
       margin-top:3px;
652
       text-align:right;
653
       >span:first-child{
654
         display:inline-block;
655
         width:50%;
656
       }
657
       >span:last-child{
658
         display:inline-block;
659
         width:40%;
660
       }
661
    }
662
 
663
  }
664
}
665
 
666
.insured{
667
  background:url('../images/insured.png')no-repeat 100% center;
668
  background-size:55px;
669
}
670
 
671
#clickCaptcha{
672
  margin:5px 0 10px;
673
  text-decoration:underline;
674
}
675
 
676
 
677
#ccAddress.update-address{
678
  border:lighten(@grey,45%) solid 1px;
679
  background:@white;
680
  padding:5px;
681
  margin-top:10px;
682
  h3{
683
    color:@grey;
684
    .font(1.6em);
685
    margin-bottom:5px;
686
  }
687
}
10633 lgm 688
 
689
  .payment-error-hldr{
690
  padding:10px;
691
.payment-error{
692
  text-align:center;
693
  .font(1.4em);
694
  color:@grey;
695
  margin-top:10%;
696
}
697
.btn{
698
  background:@orange;
699
  text-align:center;
700
  .font(1.4em);
701
  color:@white;
702
  padding:8px 0;
703
  margin:10px auto 30px;
704
  display:block;
705
  width:80%;
706
 
707
}
708
}