Subversion Repositories SmartDukaan

Rev

Rev 10633 | Rev 10660 | 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;
10650 lgm 527
        //opacity: 0.6;
10582 lgm 528
        img{
529
          width:80%;
530
          height: 50px;
10650 lgm 531
          max-width:90px;
10582 lgm 532
        }
533
      }
534
      div:nth-of-type(3n+2){
535
        margin:0 5%;
536
      }
537
      .selected{
538
        border:@ltblue solid 2px;
539
        opacity: 1;
540
      }
541
      p{
542
        clear:both;
543
      }
544
    }
545
 
546
 
547
 
548
  .c-info{
549
    color:@grey;
550
    .font(1.4em);
551
    padding:0 0 20px; 
552
    text-align:center;
553
  }
554
  .payment-btn{
555
    appearance:none;
556
    -webkit-appearance:none;
557
    border:none;
558
    width:100%;
559
    background:@orange;
560
    color:@white;
561
    .font(1.8em);
562
    padding:8px 0;
563
    margin:15px 0 10px;
564
  }
565
 
566
 
567
}
568
}
569
 
570
 
571
/*-----------------------------orderconfirmation page------------------------------------*/
572
 
573
.order-conf{
574
  padding:10px 5px;
575
  background:@list-color2;
576
  >p:nth-of-type(1){
577
    color:@orange;
578
    .font(1.8em);
579
    font-weight:bold;
580
    text-align:center;
581
  }
582
  >p:nth-of-type(2){
583
    margin-top:5px;
584
    color:@grey;
585
    .font(1.6em);
586
    text-align:center;
587
    span{
588
      color:@orange;
589
    }
590
  }
591
  .ordered-item{
592
    background:@white;
593
    border:lighten(@grey,45%) solid 1px;
594
    padding:5px;
595
    margin-top:5px;
596
    >div:first-child{
597
      margin-top: 10px;
598
      .font(1.6em);
599
      color:@grey;
600
      span{
601
        font-weight:bold;
602
      }
603
    }
604
    .ordered-item-head{
605
      width:100%!important;
606
      margin-top:10px;
607
      padding:5px 0;
608
       background:@grey;
609
      .boxsize;
610
      > div{
611
        color:@white;
612
      }
613
    }
614
    .ordered-item-body{
615
      width:100%!important;
616
    }
617
     .ordered-item-head  >div:nth-of-type(1), .ordered-item-body > div:nth-of-type(1){
618
       .font(1.2em);
619
      .float(left);
620
      width:45%;
621
      .boxsize;
622
      border-right:@white solid 1px;
623
      .boxsize;
624
      padding:5px 3px;
625
    }
626
    .ordered-item-head > div:nth-of-type(2),  .ordered-item-body > div:nth-of-type(2){
627
      .font(1.2em);
628
      .float(left);
629
      width:30%;
630
      .boxsize;
631
      padding:5px 3px;
632
      text-align:center;
633
      text-overflow: ellipsis;
634
      overflow: hidden;
635
      white-space: nowrap;
636
    }
637
    .ordered-item-head > div:nth-of-type(3),  .ordered-item-body > div:nth-of-type(3){
638
      .font(1.2em);
639
      .float(left);
640
      width:25%;
641
      .boxsize;
642
      padding:5px 3px;
643
      text-align:center;
644
      border-left:@white solid 1px;
645
    }
646
 
647
    .tt-price, .ddate-div, .or-status{
648
      .font(1.4em);
649
       color:@grey;
650
       margin-top:3px;
651
       text-align:right;
652
       >span:first-child{
653
         display:inline-block;
654
         width:50%;
655
       }
656
       >span:last-child{
657
         display:inline-block;
658
         width:40%;
659
       }
660
    }
661
 
662
  }
663
}
664
 
665
.insured{
666
  background:url('../images/insured.png')no-repeat 100% center;
667
  background-size:55px;
668
}
669
 
670
#clickCaptcha{
671
  margin:5px 0 10px;
672
  text-decoration:underline;
673
}
674
 
675
 
676
#ccAddress.update-address{
677
  border:lighten(@grey,45%) solid 1px;
678
  background:@white;
679
  padding:5px;
680
  margin-top:10px;
681
  h3{
682
    color:@grey;
683
    .font(1.6em);
684
    margin-bottom:5px;
685
  }
686
}
10633 lgm 687
 
688
  .payment-error-hldr{
689
  padding:10px;
690
.payment-error{
691
  text-align:center;
692
  .font(1.4em);
693
  color:@grey;
694
  margin-top:10%;
695
}
696
.btn{
697
  background:@orange;
698
  text-align:center;
699
  .font(1.4em);
700
  color:@white;
701
  padding:8px 0;
702
  margin:10px auto 30px;
703
  display:block;
704
  width:80%;
705
 
706
}
707
}