fwf-3661:Added styles for task variable modal

AOT-Technologies · Nov 10, 2024 · 688ca41 · 688ca41
1 parent 3cf5a35
commit 688ca41
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 0 deletions.
diff --git a/forms-flow-theme/scss/_modal.scss b/forms-flow-theme/scss/_modal.scss
@@ -593,3 +593,67 @@
     border: none;
   }     
 }
+.task-variable-modal {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  .modal-body {
+    padding: 0px !important;
+  }
+  .info-pill-container{
+    padding:32px 40px ;
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+  }
+  .form-field-container{
+    width: 80%;
+    float: left;
+    background: var(--Light-Gray, #F1F1F1); 
+    padding: 32px 40px;
+  }
+  .field-details-container{
+    padding: 32px 40px ;
+    width: 20%;
+    float: right;
+    background: #FFF;
+  }
+  .pill-container{
+    min-height: 6rem;
+    gap: 4px;
+    display: flex;
+    flex-wrap: wrap;
+    padding: var(--spacer-050) var(--spacer-100);
+    align-items: flex-start;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: var(--Rem, 16px);
+    border: 1px solid var(--ff-gray-300, #AFB4B6);
+    background: var(--ff-white, #FFF);    
+  }
+  // .clear-all-icon{
+  //   position: absolute;
+  //   right: 4%;
+  //   top: 33%;
+  //   cursor: pointer;
+  // }
+  .select-text{
+    color: var(--ff-gray-400);
+    font-size: var(--ff--font-size-sm);
+  }
+  .selected-var-text{
+    color: var(--ff-dark);
+    font-size: var(--ff--font-size-sm);
+    padding-bottom: 8px;
+  }
+
+ .details-section{
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  .text-bold{
+    font-weight: 700;
+    font-size: 16px;
+    word-break: break-all;
+   }
+ }
+}
diff --git a/forms-flow-theme/scss/external/formio.scss b/forms-flow-theme/scss/external/formio.scss
@@ -39,3 +39,19 @@
       font-size: var(--font-size-xs) !important;
     }
   }
+
+  .form-hilighter  [ref="webform"]  .formio-component{
+    // &:hover{
+    //   border: 2px solid;
+    //   border-style: dashed;
+    // }
+  }
+  .formio-hilighted{
+    box-sizing: border-box;
+    border-radius: var(--Rem_5, 8px);
+    border: 2px dashed var(--ff-base-600);
+    padding: 8px 10px;
+  }
+  .formio-component {
+    transition: border 0.05s ease, padding 0.3s ease; 
+  }