@salaxy/ng1/less/salaxy-component/credit-transfer.less

AngularJS libraries for Salaxy platform (Palkkaus.fi)

.credit-transfer-container {
  display: table;
  width:100%;

  .payment-per-worker-container{
    margin-bottom:20px;
    thead{
      tr{
          border-bottom: 1px solid #333;
         
      }
    }
    tbody{
      tr{
        border-bottom:1px dashed #ddd;
        td{
          padding-top:5px;
        }
      }
      
      
    }
  }
  
}
.sct-qrcode {
  min-height: 160px !important;
  position: relative !important;
  div {
    svg {
      float: right !important;
      max-width: 150px !important;
    }
  }
  img {
    float: right !important;
    max-width: 150px !important;
  }
  
}
.sct-filled-content-message {
  font-size: 14px;
  line-height: 16px;
  text-transform: uppercase;
  position: relative;
  top: 15%;
}
.salaxy-credit-transfer .salaxy-credit-transfer-official {
    font-size: 11px;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    height:  unset; // 483.81px; // calc(101.6 / 210 * 1000px);
    margin-top: 10px;
    max-width: 100%;
    min-width: unset;
    width: 100%;
  
    .sct-filled-content {
      font-size: 13px;
    }
  
    .sct-filled-content-main {
      font-size: 14px;
      line-height: 16px;
      text-transform: uppercase;
    }
  
    .sct-col, .sct-row {
      float: left;
      position: relative;
    }
    > .sct-row,
    .sct-col > .sct-row {
      clear: both;
      width: 100%;
    }
  
    > .sct-row1 {
      height: calc(31 / 46 * 483.81px);
      border-top: 1px dashed black;
      > .sct-col {
        text-align: right;
      }
      > .sct-col1 {
        width: calc(8 / 80 * 100%);
        > .sct-row1 {
          padding: 12px 5px 0 0;
        }
        > .sct-row2 {
          padding: 10px 5px 0 0;
        }
        > .sct-row3 {
          padding: 2px 5px 0 0;
          .sct-label-signature {
            position: absolute;
            bottom: 5px;
            right: 5px;
          }
          .sct-label-credit-transfer {
            -webkit-transform-origin: 0% 0%;
            -moz-transform-origin: 0% 0%;
            -o-transform-origin: 0% 0%;
            transform-origin: 0% 0%;
            transform: rotate(-90deg);
            position: absolute;
            width: calc(14 / 46 * 483.81px);
            top: calc(14 / 46 * 483.81px);
            left: 0;
            text-align: center;
            font-weight: 700;
            font-size: 12px;
          }
        }
        > .sct-row4 {
          padding: 7px 5px 0 0;
        }
      }
      > .sct-col2,
      > .sct-col3 {
        width: calc(36 / 80 * 100%);
      }
      > .sct-col1,
      > .sct-col2 {
        .sct-row1 {
          height: calc(8 / 46 * 483.81px);
          border-bottom: 2px solid black;
        }
        .sct-row2 {
          height: calc(5 / 46 * 483.81px);
          border-bottom: 2px solid black;
        }
        .sct-row3 {
          height: calc(14 / 46 * 483.81px);
          border-bottom: 2px solid black;
        }
        .sct-row4 {
          height: calc(4 / 46 * 483.81px);
        }
      }
      > .sct-col2 {
        > .sct-row {
          padding: 5px 10px;
          text-align: left;
        }
        > .sct-row1,
        > .sct-row2 {
          border-left: 2px solid black;
        }
        > .sct-row3 {
          .sct-guideline-signature {
            position: absolute;
            bottom: 15px;
            left: 10px;
            width: calc(100% - 10px);
            border-bottom: 1px solid black;
          }
        }
        > .sct-row4 {
          padding-top: 12px;
          border-left: 1px solid black;
        }
      }
      > .sct-col3 {
        border-left: 2px solid black;
        .sct-row1 {
          height: calc(23 / 46 * 483.81px);
          border-bottom: 2px solid black;
          .sct-filled-content-main {
            position: absolute;
            top: 30%;
            left: 10px;
            text-align: left;
          }
        }
        .sct-row2 {
          height: calc(4 / 46 * 483.81px);
          border-bottom: 2px solid black;
          > .sct-col2 {
            padding: 13px 10px 10px 10px;
          }
        }
        .sct-row3 {
          height: calc(4 / 46 * 483.81px);
          > .sct-col2 {
            padding: 13px 10px 10px 10px;
            text-align: left;
          }
          > .sct-col3 {
            width: 50%;
            padding: 13px 15px 10px 10px;
            text-align: right;
            .sct-label-euro {
              position: absolute;
              top: 2px;
              left: 5px;
            }
            .sct-filled-content-main {
              width: 100%;
            }
          }
        }
        .sct-row2 .sct-col,
        .sct-row3 .sct-col {
          height: calc(4 / 46 * 483.81px);
        }
        .sct-row2 .sct-col1,
        .sct-row3 .sct-col1,
        .sct-row3 .sct-col2 {
          border-right: 2px solid black;
        }
        .sct-row2 .sct-col1,
        .sct-row3 .sct-col1 {
          width: 17%;
          text-align: left;
          padding: 3px;
        }
        .sct-row3 .sct-col2 {
          width: 33%;
        }
      }
    }
    > .sct-row2 {
      /* 
        height: calc(13 / 46 * 483.81px); // Original height left room for Terms of clearance which is now removed.
      */
      border-top: 2px solid black;
      .barcode{
        margin-top:5px;
      }
    }
    
  @media screen and (max-width:891px) {
    
    font-size: 8px;
    max-width: 100%;
    min-width: unset;
    width: 100%;
    height: unset;
    margin-top: 10px;
    .sct-filled-content-main {
      font-size:12px;
      line-height: 0.95em;
    }
    > .sct-row1 > .sct-col2 > .sct-row{
      padding:5px 6px; 
    }
    angular-barcode{   
      margin-top: 10px;
      display: table;
      img.barcode{
        max-width:100%;
      }
    }    
    > .sct-row2 #terms-of-clearance{
      margin-bottom:15px;
    }
  }

 
}


@media print {
  .salaxy-credit-transfer .salaxy-credit-transfer-official {
    font-size: 8px;
    max-width: 100%;
    min-width: unset;
    width: 100%;
    
    > .sct-row1 {
      height: calc(28 / 46 * 483.81px);
      > .sct-col1, > .sct-col2 {
        .sct-row1 {
          height: calc(7 / 46 * 483.81px);
        }
        .sct-row2 {
          height: calc(5 / 46 * 483.81px);
          border-bottom: 2px solid black;
        }
        .sct-row3 {
          height: calc(12 / 46 * 483.81px);
          border-bottom: 2px solid black;
          .sct-label-credit-transfer{
            font-size: 9px;
            width:calc(12 / 46 * 483.81px);
            top: calc(12 / 46 * 483.81px);
          }
        }
        .sct-row4 {
          height: calc(4 / 46 * 483.81px);
        }
      }
      > .sct-col3 {
        border-left: 2px solid black;
        .sct-row1 {
          height: calc(20 / 46 * 483.81px);
          .sct-qrcode {
            min-height: 140px !important;
            position: relative !important;
            div {
              svg {
                float: right !important;
                max-width: 150px !important;
              }
            }
            img {
              float: right !important;
              max-width: 150px !important;
            }
          }
          .sct-filled-content-message {
            font-size: 14px;
            line-height: 16px;
            text-transform: uppercase;
            position: relative;
            top: 15%;
          }
        }
        .sct-row2 {
          height: calc(4 / 46 * 483.81px);
        }
        .sct-row3 {
          height: calc(4 / 46 * 483.81px);
        }
        .sct-row2 .sct-col,
        .sct-row3 .sct-col {
          height: calc(4 / 46 * 483.81px);
        }
      }
    }
    > .sct-row2 {
      height: calc(11 / 46 * 483.81px);
    }
  }

  .payment-per-worker-container{clear:both;
    &.sxyFullPrint{
      display:block;
    }
    &.sxySecurePrint{
      display:none;
    }
  }
  .modal{
    position: absolute;
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
    height: auto !important;  
  }
  .modal-open{
      salaxy-navi-starter-layout{display:none;}
      overflow:visible;
    .modal.in .modal-dialog {
      -webkit-transform: translate(0, 0);
      background-color: #fff !important;
      transform: translate(0, 0);
      width: 100%;
      margin-top: 0;
      height: auto !important;  
      visibility: visible !important;
      /**Remove scrollbar for printing.**/
      overflow: visible !important;
    }
    .salaxy-component .modal-body {
      height: auto !important;  
      width: 100%;
    }
    .salaxy-component .modal-header{
      display:none;
    }
    .modal-content{border:none;}
    .btn{display: none;}
  }
}