old-new-wiaas/frontend/src/containers/orders/style/ProcessContainer.scss

@import '../../../styleConstants.scss';
$border-width: 5px;
$link-line-height: 1.5rem;

#order-info {
    .subtitle {
        margin-top: 0.5rem;
    }

    .reference{
        word-break: break-all;
    }

    .project-name{
        word-break: break-all;
    }

    .info-color {
        margin-top: 0.2rem;
        padding-left: 0.2rem;
    }

    .no-process {
        background: $open-status-color;
    }

    .processing {
        border-left: $border-width $processing-status-color solid;
    }

    .cancelled {
        border-left: $border-width $canceled-status-color solid;
    }

    .completed {
        border-left: $border-width $production-status-color solid;
        background: $production-status-color;
    }

    .end-of-life {
        border-left: $border-width $end-of-life-status-color solid;
    }

    .wiaas-box-container {
        padding: 0;
    }

    .components-link {
        position: relative;
        height: $link-line-height;

        .link-line {
            position: absolute;
            background: $borderColor;
            width: 3px;
            top: 0;
            left: 49%;
            height: $link-line-height;
            z-index: 0;
        }
    }

    .package-name-link {
        font-size: $font-size-big;
        font-weight: $font-weight;
        text-align: left;
        color: $title-color;
    }
}

.order-process{

    .no-process-info {
        background: $whiteColor;
        padding: 1rem;
        font-size: $font-size-normal;
        font-weight: $font-weight;
    }
}

.order-step{
    .wiaas-box-container {
        padding: 0;
    }
}

.step-circle-layer {
    text-align: center;
}

.step-circle {
    z-index: 1;
    margin-top: $link-line-height;
    position: relative;
    border-radius: 50%;
    text-align: center;
    width: 3rem;
    height: 3rem;
    color: $whiteColor;
    line-height: 1rem;
    padding: 0.5rem;
    display: inline-block;
    font-weight: $font-weight;
    font-size: $font-size-small;
}

.step-line{
    position: absolute;
    background: $borderColor;
    width: 2%;
    top: 0;
    left: 49%;
    height: 100%;
    z-index: 0;
}

.order-step:last-child .step-line{
    height: 50%;
}

.step-box-layer {
    margin-top: $link-line-height;
    position: relative;
}

.step-box {
    background: $whiteColor;
    border-radius: 1.5px;

    .wiaas-main-title {
        font-size: $font-size-small;
    }
}

.end-of-life {
    background: $end-of-life-status-color;
}

.cancelled {
    background: $canceled-status-color;
}

.completed {
    background: $production-status-color;
}

.open {
    background: $open-status-color;
}

.complete {
    background: $done-status-color;
}

.processing {
    background: $in-progress-status-color;
}

.pending {
    background: $in-progress-status-color;
}

.inactive {
    background: $inactive-status-color;
}

.step-comment {
    margin-top: 1rem;
    font-size: $font-size-small;
}

.new-comment-button {
    background-color: $whiteColor;
    color: $darkGreyColor;
    font-size: $font-size-small;
    cursor: pointer;
    margin-top: 0.5rem;
}

.support-mail-button {
    background-color: $whiteColor;
    color: $darkGreyColor;
    font-size: $font-size-small;
    cursor: pointer;
    margin-top: 0.5rem;
    float: right;
}

.upload-file-drop-zone {
    width: 100%;
    border: 3px dashed $borderColor;
    padding: 2rem;
    cursor: pointer;
    border-radius: 4px;
}

.upload-file-accept {
    border: 3px dashed $greenColor;
    background: rgba(52, 195, 136, 0.1);
}

.upload-file-drop-zone:hover{
    border: 3px dashed $greenColor;
    background: rgba(52, 195, 136, 0.1);
}

.status-icon {
    width: $font-size-xsmal;
    height: $font-size-xsmal;
    display: inline-block;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.drop-zone-text {
    text-align: center;
}

.document-link {
    cursor: pointer;
    word-wrap: break-word;

    .step-comment {
        padding: 0.5rem 1rem 1rem;
        font-size: $font-size-small;
    }
}

.order-package-info {
    background: $whiteColor;
    padding-bottom: 1rem;

    .document-link {
        cursor: pointer;
        word-wrap: break-word;
        font-size: $font-size-small;
    }

    .price-info-btn {
        margin-left: 1rem;
        cursor: pointer;
    }

    .price-info-popover {
        max-width: 50rem;
    }

    .link-to-docs{
        cursor: pointer;
        color: $blueColor;
        font-weight: 600;
    }
}

#order-info-description {
    background: $whiteColor;
    padding-bottom: 1rem;

    .terms-link {
        cursor: pointer;
        margin-top: 1rem;
    }

    .terms-label {
        display: inline-block;
    }

    .installation-date-per-package {
        font-weight: $font-weight;
    }
}

#order-comments {
    background: $whiteColor;

    .order-coments-body{
        margin: 1rem 0;
    }

    .order-comment {
        margin-top: 0.5rem;
        font-size: $font-size-small;
        background: rgba(43, 98, 121, 0.2);
        padding: 0.5rem;
        border-radius: $box-radius;
    }

    .mine {
        background: rgba(113, 194, 191, 0.2);
    }

    .order-comment-header {
        font-weight: $font-weight;
    }
}

.confirmation-proposed {
    color: $pending-status-color;
}

.confirmation-accepted {
    color: $done-status-color;
}

.confirmation-declined {
    color: $canceled-status-color;
}

.confirmation-canceled {
    color: $invalid-status-color;
}

.confirmation-invalid {
    color: $invalid-status-color;
}

#order-documents{
    .document-link-big {
        display: inline-block;
        cursor: pointer;
        padding: 1rem;
        margin-bottom: 3px;
        text-align: center;
        font-size: $font-size-small;
    }

    .document-link-big a {
        color: $blueColor;
    }

    .document-link-big:hover {
        margin-bottom: 0;
        color: $title-color;
        border-bottom: $blueColor 3px solid;
    }
}

#send-support-mail-container {
    .support-details {
        margin-top: 1rem;
    }

    .package-name {
        font-weight: $font-weight;
    }

    .order-package-details {
        margin-bottom: 1.5rem;
    }
}

#my-support-mail-text {
    width: 50rem;
    height: 10rem;
}

@media all and (max-width: 1032px) {
     #my-support-mail-text {
         width: 22rem;
     }
}

@media all and (max-width: 768px) {

     .drop-zone-text {
         text-align: center;
         font-size: 1rem;
     }

     .document-link {
         font-size: $font-size-small;
     }

     #my-support-mail-text {
         width: 16rem;
     }
}