Initial commit

api-wiaas/client/js/components/processes/processes.less

@@ -0,0 +1,219 @@
+@eye-open-color: #2184be;
+@eye-close-color: #C11B17;
+@layer-background: rgba(255, 255, 255, 0.7);
+
+.module-layer {
+    position: relative;
+    margin-top: 1%;
+    background: @layer-background;
+    margin-bottom: 3%;
+    padding-bottom: 2%;
+}
+
+#create-process-steps {
+    width: 100%;
+    padding: 1%;
+    margin-bottom: 2%;
+
+    .create-process-title {
+        margin-bottom: 1%;
+        font-weight: bold;
+        font-size: 120%;
+        text-align: center;
+    }
+
+    .processes-list {
+        background: #FFF;
+        height: 360px;
+        min-height: 360px;
+        overflow-y: scroll;
+        border: 1px solid #000;
+        border-radius: 5px;
+    }
+
+    .glyphicon-eye-open {
+        color: @eye-open-color;
+        font-size: 120%;
+    }
+
+    .glyphicon-eye-close {
+        color: @eye-close-color;
+        font-size: 120%;
+    }
+
+    .step-extra-action-radios {
+        display: inline-block;
+    }
+
+    .draggable-icon-steps {
+        color: #3c763d;
+        top: 50%;
+        font-size: 200%;
+        text-align: center;
+        position: absolute;
+    }
+
+    .create-process-name-input, .create-process-country-select{
+        height: 3rem;
+    }
+
+    .add-process-steps {
+        display: inline-block;
+        margin-top: 1%;
+        border-top: 2px solid #3bb9ff;
+        border-bottom: 2px solid #3bb9ff;
+        padding: 2%;
+        background: rgba(59, 185, 255, 0.1);
+
+        .create-processes-description {
+            display: inline-block;
+            margin-top: 2%;
+            width: 98%;
+
+            .package-label {
+                width: 30%;
+            }
+
+            .create-package-description-text {
+                width: 70%;
+            }
+        }
+    }
+}
+
+#edit-process-button {
+    margin: 2%;
+}
+
+#edit-processes-container {
+    margin-left: 1%;
+}
+
+#edit-process-and-steps-container {
+    height: 400px;
+    margin-bottom: 2%;
+    overflow: hidden;
+    position: relative;
+
+    .draggable-icon {
+        color: #3c763d;
+        left: 28.5%;
+        top: 50%;
+        font-size: 200%;
+        text-align: center;
+        position: absolute;
+    }
+}
+
+#edit-processes {
+    .module-layer;
+
+    .glyphicon-eye-open {
+        color: @eye-open-color;
+    }
+
+    .glyphicon-eye-close {
+        color: @eye-close-color;
+    }
+
+    .edit-processes-lists {
+        display: inline-block;
+        width: 95%;
+        border: 1px solid #000;
+        border-radius: 5px;
+        height: 400px;
+        overflow-y: scroll;
+        padding: 0;
+    }
+}
+
+#link-process-steps {
+    .module-layer;
+
+    .glyphicon-eye-open {
+        color: @eye-open-color;
+    }
+
+    .glyphicon-eye-close {
+        color: @eye-close-color;
+    }
+
+    .processes-list {
+        background: #FFF;
+        height: 360px;
+        min-height: 360px;
+        overflow-y: scroll;
+        border: 1px solid #000;
+        border-radius: 5px;
+    }
+
+    .process-selection-layer {
+        display: inline-block;
+        position: relative;
+        width: 100%;
+        height: 360px;
+        overflow: hidden;
+    }
+
+    .headers-col {
+        margin-top: 1%;
+        margin-bottom: 1%;
+        vertical-align: top;
+        text-align: center;
+    }
+
+    .process-draggable {
+        padding: 7px 5px;
+        cursor: pointer;
+        border: 1px solid #ddd;
+        font-weight: bold;
+        padding-left: 2%;
+    }
+
+    .process-draggable:hover {
+        background: rgba(223, 240, 216, 0.5);
+    }
+
+    .info-placeholder {
+        color: rgba(124, 128, 130, 0.7);
+        padding: 5%;
+    }
+
+    .info-step {
+        border: 1px solid #ddd;
+    }
+
+    .step-position {
+        display: inline-block;
+        width: 10%;
+        font-weight: bold;
+        vertical-align: middle;
+        background: rgba(59, 185, 255, 0.5);
+        border-right: 2px solid rgb(59, 185, 255);
+        padding: 5px 0 5px 5px;
+    }
+
+    .step-description {
+        display: inline-block;
+        width: 85%;
+        padding: 5px 3px;
+    }
+
+    .link-processes-button {
+        margin-top: 1%;
+        margin-bottom: 3%;
+    }
+
+    .draggable-icon {
+        color: #3c763d;
+        left: 31%;
+        top: 50%;
+        font-size: 200%;
+        text-align: center;
+        position: absolute;
+    }
+
+    .add-new-process{
+        margin: 1% 0;
+    }
+}