Subversion Repositories SmartDukaan

@import "common.less";

.shipping-head{
  border-top:@list-color1 solid 1px;
  position:relative;
  .boxsize;
  width:100%;
  border: #FFF solid 1px;
  border-left: none;
  border-right: none;
  .shipping, .payment{
    .float(left);
    width:50%;
    padding:10px 0;
    .font(1.6em);
    font-weight:bold;
    color:@white;
    text-align:center;
    .boxsize;
    text-transform:uppercase;
    height:45px;
    line-height:28px;
    position: relative;
    background:@ltblue;
  }
  .payment{
        .float(right)!important;
        color:@white;  
        background:lighten(@grey,20%);
        padding-left: 7%;
  }
  
  .shipping:after 
    {
    content: "";
    position: absolute;
    top: 0px;
    right: -22px;
    border-style: solid;
    border-width: 22px 0 22px 22px;
    border-color: transparent @ltblue;
    display: block;
    width: 0;
    z-index: 1;
    }
    
     .payment:before 
    {
      content: "";
      position: absolute;
      top: -3px;
      left: 0;
      border-style: solid;
      border-width: 25px 0 25px 25px;
      border-color: rgba(0, 0, 0, 0) #FFF;
      display: block;
      width: 0;
      z-index: 0;
    }
}

select{
    width:100%;
    appearance:none;
    -webkit-appearance:none;
    border:@list-color1 solid 1px;
    color:@grey;
    border-radius:0;
    outline:none;
    padding:10px;
    display:block;
    .boxsize;
    .font(1.4em);
    margin:2px 0 8px 0;
    background:url('../images/dropdown.PNG')no-repeat 99% 16px,@white;
    background-size:20px,100%;
  }

.shipping-cont{
  padding:10px 5px;
  background:@list-color2;
  form{
    fieldset{border:none;}
    padding:5px 0;
  }
  label{
    font-weight:bold;
    display:block;
    .font(1.4em);
    color:@grey;
    margin-top:5px;
    span{
      color:red;
    }
  }
  input[type="submit"]{
    .float(left);
    width:100%;
    margin:10px 0;
    background:@orange;
    color:@white;
    .font(1.8em);
    text-align:center;
    padding:8px 0;
    text-transform:uppercase;
    appearance: none;
    -webkit-appearance: none;
     -moz-appearance: none;
    border:none;
  }
  
  .deliver-info{
    border:lighten(@grey,45%) solid 1px;
    >div:nth-of-type(1){
      .float(left);
      width:50%;
      .boxsize;
      .font(1.4em);
      background:@grey;
      padding:10px 0;
      color:@white;
      text-align:center;
    }
    >div:nth-of-type(2){
      .float(left);
      width:50%;
      .boxsize;
      .font(1.4em);
      color:@white;
      background:@grey;
      padding:10px 0;
      text-align:center;
    }
    .selected{
      background:@white!important;
      color:@ltblue!important;
      font-weight:bold!important;
    }
    
    .deliver-here, .pickup{
      background:@white;
      padding:5px;
    }
    .deliver-address,.pickup-spot{
      padding:5px;
      .font(1.2em);
      color:@grey;
      border-bottom:lighten(@grey,45%) solid 1px;
      position:relative;
      .cancel-btn{
        position:absolute;
        bottom:4px;
        right:0;
        width:48px;
        //height:20px;
        //background:url('../images/cancel.png')no-repeat center center;
        background-size:contain;
        text-decoration: underline;
        color: red;
      }
    }
    .add-address{
      padding-top:10px;
      .font(1.2em);
      color:@grey;
      text-align:right;
      text-decoration: underline;
      text-decoration-color: lighten(@grey,45%);
    }
    .selected-add{
      border: dashed 1px #c8c8c8;
      background:url('../images/check-sh.png')no-repeat 99% 4px;
      background-size:20px;
      .cancel-btn{
        display:none;
      }
    }
  }
  .summary-head{
    margin-top:10px;
    background:@white;
    padding:10px 6px;
    .font(1.4em);
    font-weight:bold;
    color:@grey;
    border:lighten(@grey,45%) solid 1px;
    text-transform:capitalize;
    >span{
      .float(right);
    }
  }
  
  .order-summary{
    border:lighten(@grey,45%) solid 1px;
    border-top:none;
    background:@white;
    .os-head,.pd-summ{
      border-bottom:lighten(@grey,45%) solid 1px;
    }
    .os-head > div{
      font-weight:bold;
      .font(1.4em);
      text-transform:capitalize;
    }
    .os-head >div:nth-of-type(1),.pd-summ>div:nth-of-type(1){
      .float(left);
      width:45%;
      .boxsize;
      border-right:lighten(@grey,45%) solid 1px;
      .boxsize;
      padding:5px 3px;
    }
    .os-head > div:nth-of-type(2),.pd-summ>div:nth-of-type(2){
      .float(left);
      width:30%;
      .boxsize;
      padding:5px 3px;
      text-align:center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .os-head > div:nth-of-type(3),.pd-summ>div:nth-of-type(3){
      .float(left);
      width:25%;
      .boxsize;
      padding:5px 3px;
      text-align:center;
      border-left:lighten(@grey,45%) solid 1px;
    }
    .pd-summ>div>div{
      .font(1.4em);
      border:none!important;
      text-transform:capitalize;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .pd-summ>div>span{
      color:lighten(@grey,20%);
    }
    .pd-summ>div:nth-of-type(2){
      .font(1.4em);
    }
    .add-ons{
      >div:nth-of-type(1){
        .float(left);
        .font(1.4em);
        width:75%;
        padding:5px 3px;
        .boxsize;
        text-transform:capitalize;
      }
      >div:nth-of-type(2){
        .float(left);
        .font(1.4em);
        width:25%;
        padding:5px 3px;
        text-align:center;
        .boxsize;
        text-transform:capitalize;
      }
    }
    
  }
  
}
.gd-total{
    border:lighten(@grey,45%) solid 1px;
    border-bottom:none;
    background:@white;
    margin-top:10px;
    color:@grey;
      >div:nth-of-type(odd){
        .float(left);
         width:60%;
        .font(1.6em);
        .boxsize;
        padding:10px 5px;
        border-right:lighten(@grey,45%) solid 1px;
        border-bottom:lighten(@grey,45%) solid 1px;
      }
      >div:nth-of-type(even){
        .float(left);
        width:40%;
        .font(1.6em);
        .boxsize;
        padding:10px 5px;
        text-align:center;
        border-bottom:lighten(@grey,45%) solid 1px;
      }
      >div.discount{
        color:tomato !important;
      }
    }
      
    .procced-btn{
      display:block;
      width:100%;
      margin:10px 0;
      background:@orange;
      color:@white;
      .font(1.8em);
      text-align:center;
      padding:8px 0;
      text-transform:uppercase;
      appearance: none;
      -webkit-appearance: none;
      border:none;
    }
    
    input[type="text"], input[type="number"] , input[type="date"]{
      width: 100%;
      appearance: none;
      -webkit-appearance: none;
       -moz-appearance: none;
      border: #E5E6E0 solid 1px;
      color: #555;
      border-radius: 0;
      outline: none;
      padding: 10px;
      display: block;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      font: normal 1.4em/1.2em Helvetica, Arial, sans-serif;
      margin: 2px 0 8px 0;
      }
.gd-discount{
color:#FF7201 !important;
}
/*----------------------error-msg---------------------------*/

.error_msg{
  padding:5px 5px 5px 28px;
  display:block;
  border:#fc1f1f dashed 1px;
  color:#fc1f1f;
  .font(1.4em);
  margin:0 5px;
  background:url(../images/error-notification.png)no-repeat 5px center;
  background-size:20px;
  margin-bottom: 10px;
}

/*-----------------------payment-hldr-------------------------------*/
.payment-cont{
  .shipping-head{
  border-top:@list-color1 solid 1px;
  position:relative;
  .boxsize;
  width:100%;
  border: #FFF solid 1px;
  border-left: none;
  border-right: none;
  .shipping, .payment{
    .float(left);
    width:50%;
    padding:10px 0;
    .font(1.6em);
    font-weight:bold;
    color:@white;
    text-align:center;
    .boxsize;
    text-transform:uppercase;
    height:45px;
    line-height:28px;
    position: relative;
    background:@ltblue;
    background:lighten(@grey,20%);
    color:@white;  
  }
  .payment{
        .float(right)!important;
        color:@white;  
        background:lighten(@grey,20%);
        padding-left: 7%;
  }
  .selected{
    color:@white!important;
    background:@ltblue!important;
  }
  
  .shipping:after 
    {
    content: "";
    position: absolute;
    top: 0px;
    right: -22px;
    border-style: solid;
    border-width: 22px 0 22px 22px;
    //border-color: transparent @ltblue;
    border-color: transparent lighten(@grey,20%);
    display: block;
    width: 0;
    z-index: 1;
    }
    
     .payment:before 
    {
      content: "";
      position: absolute;
      top: -3px;
      left: 0;
      border-style: solid;
      border-width: 25px 0 25px 25px;
      border-color: rgba(0, 0, 0, 0) #FFF;
      display: block;
      width: 0;
      z-index: 0;
    }
  
}

.payment-hldr{
  background:@list-color2;
  padding:5px 5px 10px;
  .hldr-sub{
    margin-top:10px;
    background:@white;
    border:lighten(@grey,45%) solid 1px;
    >div:nth-of-type(1){
      color:@ltblue;
      font-weight:bold;
    }
    form fieldset{
      border:none;
    }
    
    .cc-hldr{
      border:lighten(@grey,45%) solid 1px;
      border-bottom:none;
      width: 100%;
      .boxsize;
     div{
      .float(left);
      width: 50%;
      box-sizing: border-box;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      .font(1.4em);
      color: @white;
      background: @grey;
      padding: 10px 0;
      text-align: center;
    }
    .selected{
      background: @white!important;
      color: @ltblue!important;
      font-weight:bold;
    }
    }
    
    > .card{
      color:@grey;
      padding:7px 5px;
      .font(1.6em);
      border-top:lighten(@grey,45%) solid 1px;
      >span{
        .float(right);
      }
    } 
    > .card:first-child{
      border-top:none;
    }   
  }  
  .credit-cards{
    padding:0 5px 5px 5px;
    .in-india, .out-india{
      width:100%;
      padding:20px 0 10px; 
      border:lighten(@grey,45%) solid 1px;
      border-top:none;
      .boxsize;
      p{
        text-align:center;
        .font(1.2em);
        margin:10px 0 0 0;
        color:@grey;
        .float(left);
        width:100%;
      }
    }
  }
  
  .info-hldr{
    form fieldset{
      border:none;
    }
    padding:0 5px 5px 5px;
    .info-cap{
      color:@grey;
      .font(1.2em);
    }
    .emi-hldr{
      border:lighten(@grey,45%) solid 1px;
      border-bottom:none;
        .emi-head{
          border-bottom:lighten(@grey,45%) solid 1px;
          .font(1.2em);
          font-weight:bold;
          background:@list-color1;
          >div{
          .float(left);
          width:33.3%;
          color:@grey;
          text-align:center;
          padding:7px 2px;
          .boxsize;
          }
        }
        .emi-body{
          border-bottom:lighten(@grey,45%) solid 1px;
          .font(1.2em);
          color:@grey;
          >div{
          .float(left);
          width:33.3%;
          text-align:center;
          padding:7px 2px;
          .boxsize;
          }
        }
         .emi-body.selected{
            background:lighten(@green, 10%);
            color:@white!important;
            box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
        }
    }
  }
  
      
    .c-box{
      padding:0 5px;
       div{
        float:left;
        width:30%;
        .boxsize;
        text-align:center;
        padding:2px;
        border:@white solid 2px;
        //opacity: 0.6;
        img{
          width: 80%;
          height: 25px;
          max-width: 90px;
        }
      }
      div:nth-of-type(3n+2){
        margin:0 5%;
      }
      .selected{
        border:@ltblue solid 2px;
        opacity: 1;
      }
      p{
        clear:both;
      }
    }
    
    
  
  .c-info{
    color:@grey;
    .font(1.4em);
    padding:0 0 20px; 
    text-align:center;
  }
  .payment-btn{
    appearance:none;
    -webkit-appearance:none;
    border:none;
    width:100%;
    background:@orange;
    color:@white;
    .font(1.8em);
    padding:8px 0;
    margin:15px 0 10px;
  }
  
  
}
}


/*-----------------------------orderconfirmation page------------------------------------*/

.order-conf{
  padding:10px 5px;
  background:@list-color2;
  >p:nth-of-type(1){
    color:@orange;
    .font(1.8em);
    font-weight:bold;
    text-align:center;
  }
  >p:nth-of-type(2){
    margin-top:5px;
    color:@grey;
    .font(1.6em);
    text-align:center;
    span{
      color:@orange;
    }
  }
  .ordered-item{
    background:@white;
    border:lighten(@grey,45%) solid 1px;
    padding:5px;
    margin-top:5px;
    >div:first-child{
      margin-top: 10px;
      .font(1.6em);
      color:@grey;
      span{
        font-weight:bold;
      }
    }
    .ordered-item-head{
      width:100%!important;
      margin-top:10px;
      padding:5px 0;
       background:@grey;
      .boxsize;
      > div{
        color:@white;
      }
    }
    .ordered-item-body{
      width:100%!important;
    }
     .ordered-item-head  >div:nth-of-type(1), .ordered-item-body > div:nth-of-type(1){
       .font(1.2em);
      .float(left);
      width:45%;
      .boxsize;
      border-right:@white solid 1px;
      .boxsize;
      padding:5px 3px;
    }
    .ordered-item-head > div:nth-of-type(2),  .ordered-item-body > div:nth-of-type(2){
      .font(1.2em);
      .float(left);
      width:30%;
      .boxsize;
      padding:5px 3px;
      text-align:center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .ordered-item-head > div:nth-of-type(3),  .ordered-item-body > div:nth-of-type(3){
      .font(1.2em);
      .float(left);
      width:25%;
      .boxsize;
      padding:5px 3px;
      text-align:center;
      border-left:@white solid 1px;
    }
    
    .tt-price, .ddate-div, .or-status{
      .font(1.4em);
       color:@grey;
       margin-top:3px;
       text-align:right;
       >span:first-child{
         display:inline-block;
         width:50%;
       }
       >span:last-child{
         display:inline-block;
         width:40%;
       }
    }
 
  }
}

.insured{
  background:url('../images/insured.png')no-repeat 100% center;
  background-size:55px;
}

#clickCaptcha{
  margin:5px 0 10px;
  text-decoration:underline;
}


#ccAddress.update-address{
  border:lighten(@grey,45%) solid 1px;
  background:@white;
  padding:5px;
  margin-top:10px;
  h3{
    color:@grey;
    .font(1.6em);
    margin-bottom:5px;
  }
}

  .payment-error-hldr{
  padding:10px;
.payment-error{
  text-align:center;
  .font(1.4em);
  color:@grey;
  margin-top:10%;
}
.btn{
  background:@orange;
  text-align:center;
  .font(1.4em);
  color:@white;
  padding:8px 0;
  margin:10px auto 30px;
  display:block;
  width:80%;

}
}