initial docker setup
This commit is contained in:
GotPPay
366
frontend/src/containers/orders/style/ProcessContainer.scss
Normal file
366
frontend/src/containers/orders/style/ProcessContainer.scss
Normal file
@@ -0,0 +1,366 @@
|
||||
@import '../../../styleConstants.scss';
|
||||
$border-width: 5px;
|
||||
$link-line-height: 1.5rem;
|
||||
|
||||
#order-info {
|
||||
.subtitle {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.canceled {
|
||||
border-left: $border-width $canceled-status-color solid;
|
||||
}
|
||||
|
||||
.production {
|
||||
border-left: $border-width $production-status-color solid;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.canceled {
|
||||
background: $canceled-status-color;
|
||||
}
|
||||
|
||||
.production {
|
||||
background: $production-status-color;
|
||||
}
|
||||
|
||||
.open {
|
||||
background: $open-status-color;
|
||||
}
|
||||
|
||||
.done {
|
||||
background: $done-status-color;
|
||||
}
|
||||
|
||||
.in-progress {
|
||||
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;
|
||||
height: 10rem;
|
||||
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;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 4rem 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.document-link {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
#my-support-mail-text {
|
||||
width: 16rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user