halleyx-ui-framework 1.0.4

package/dist/src/assets/styles/texteditor.scss

@@ -0,0 +1,286 @@
+.container1222{
+    background-color: #ffffff;
+    width: 100%;
+    height:100%;
+    padding: 30px 30px;
+    // font-family: Arial, Helvetica, sans-serif;
+    /* position: absolute; */
+    /* transform: translate(-50%, -50%); */
+    /* left: 50%;
+    top: 50%; */
+    border-radius: 8px;
+    border: 1px solid var(--hlx-border-color);
+    // i{
+    //   font-size: 32px;
+    // }
+    // box-shadow: 0 25px 50px rgba(7, 20, 35, 0.2);
+    .options {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        // gap: 15px;
+        font-family:Opensans;
+       
+        select{
+          height:25px;
+          padding: 0px !important;
+        }
+        // background-color: aqua;
+        .option-button {
+            height: 35px;
+            width: 35px;
+            display: grid;
+            place-items: center;
+            // justify-content: center;
+            border-radius: 3px;
+            border: none;
+            background-color: #ffffff;
+            outline: none;
+            color: var(--hlx-text-color-primary);
+            i{
+              font-size: 24px;
+            }
+         
+            .bold-icon{
+              font-weight: bold;
+              font-size: 16px;
+            }
+            .italic-icon{
+              font-style: italic;
+              font-size: 16px;
+            }
+            .underline-icon{
+              text-decoration: underline;
+              font-size: 16px;
+            }
+            .strikethrough-icon{
+              text-decoration: line-through;
+              font-size: 16px;
+              // align-items: center;
+            }
+            .superscript-icon,.subscript-icon{
+              font-size: 16px;
+              sub{
+                font-size: 10px;
+              }
+              sup{
+                font-size: 10px;
+              }
+            }
+          }
+          .option-button:hover {
+            background-color: var(--hlx-color-primary);
+            color: var(--hlx-color-white);
+          }
+          select {
+            padding: 7px;
+            border: 1px solid #d4d4d4;
+            border-radius: 3px;
+          }
+          option{
+            height: 50px;
+          }
+          .input-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            label{
+              font-size: 14px;
+            }
+          }
+          input[type="color"] {
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+            background-color: transparent;
+            width: 40px;
+            height: 28px;
+            border: none;
+            cursor: pointer;
+          }
+          input[type="color"]::-webkit-color-swatch {
+            border-radius: 3px;
+            box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
+          }
+          input[type="color"]::-moz-color-swatch {
+            border-radius: 3px;
+            box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px #020929;
+          }
+          .texteditoractive {
+            background-color: #54bd95;
+            color: #ffffff;
+          }
+          .active {
+            background-color: #d8e3ff;
+            color: #1d46ff;
+          }
+          
+      }
+     
+      
+        #text-input,#text-input1 {
+    font-family: Arial, Helvetica, sans-serif;
+
+          margin-top: 10px;
+          border: 1px solid #dddddd;
+          border-radius: 7px;
+          padding: 20px;
+          height: 50vh;
+          // font-family: none !important;
+          /* overflow: hidden scroll; */
+        }
+  }
+
+
+
+.hello{
+  color: #000000;
+}
+
+
+.icon-link-alt-regular{
+  font-size: 18px;
+}
+#createLink{
+  // border: none;
+  // background-color: white;
+  // &:hover{
+  //   background-color: var(--hlx-color-primary);
+  //   color: var(--hlx-color-white);
+  //   border-radius: 8px;
+  // }
+}
+
+
+// .text-format{
+//   height:100px;
+//   width:200px;
+//   background-color: #1d46ff;
+//   display: flex;
+
+// }
+
+
+.specify{
+  display: flex;
+  width:200px;
+  justify-content: space-around;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+.specify1{
+  display: flex;
+  width:100px;
+  // background-color: #020929;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+.specify2{
+  display: flex;
+  width:100px;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+.specify3{
+  display: flex;
+  width:100px;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+
+.specify4{
+  display: flex;
+  width:50px;
+  justify-content: space-evenly;
+  border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+
+.specify5{
+  display: flex;
+  width:250px;
+  justify-content: space-evenly;
+  // border-right: 1px solid var(--hlx-border-color);
+  margin-bottom: 5px;
+}
+
+.specify7{
+  display: flex;
+  width:108px;
+  justify-content: space-evenly;
+  margin-bottom: 5px;
+  margin-left: 10px;
+  border-right: 1px solid var(--hlx-border-color);
+  border-left: 1px solid var(--hlx-border-color);
+}
+
+.specify8{
+  display: flex;
+  width:200px;
+  justify-content: space-around;
+  margin-bottom: 5px;
+  margin-right:10px;
+}
+.specify9{
+  display: flex;
+  width:80px;
+  justify-content: space-around;
+  margin-bottom: 5px;
+}
+
+
+
+.strike{
+  text-decoration: line-through;
+}
+
+// select{
+//   border-color:#d4d4d4;
+// }
+
+.texteditoractive32 {
+  background-color: var(--hlx-color-primary) !important;
+  color: var(--hlx-color-white) !important;
+  border-radius: 8px;
+}
+.url-link{
+  width:100%;
+}
+
+.link-input{
+  height:40px;
+  width:100%;
+  outline:none;
+  border:1px solid  var(--hlx-border-color);
+  border-radius: 5px;
+  font-family: 'OpenSans';
+}
+.link-save-button{
+  height:40px;
+  background-color: var(--hlx-color-primary);
+  color:var(--hlx-color-white);
+  width:30%;
+  border-radius: 5px;
+}
+
+.texteditor-head-title{
+  font-weight: bold;
+  font-size: 16px;
+  display: flex;
+  justify-content: flex-start;
+  font-family: 'QuickSand';
+}
+
+.adv-option-button {
+  height:35px;
+  width:35px;
+  cursor: pointer;
+  &:hover{
+    background-color: var(--hlx-color-primary);
+    color: var(--hlx-color-white);
+    border-radius: 6px;
+  }
+}

package/dist/src/assets/styles/timeline.scss

@@ -0,0 +1,382 @@
+.icon-horizontal-dots{
+    color:var(--hlx-text-color-primary) !important;
+    font-size: var(--hlx-font-content-size-sm)
+}
+.timeline-title-header{
+    font-family: var(--hlx-font-type-content);
+    font-size: 14px;
+    color: var(--hlx-text-color-primary);
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+}
+.timeline-sub-header{
+    font-family: var(--hlx-font-type-content);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 12px;
+    }.dot{
+        height: 7px;
+        width: 7px;
+        background: var(--hlx-color-primary-light);
+        margin-right: 7px;
+        border-radius: 100%;
+    }
+    
+.content-holder
+{
+    display: flex;
+    flex-direction: row;
+}
+.circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:38px;
+    width: 38px;
+    border-radius: 100%;
+    border: 1px solid var(--hlx-border-color);
+        i{
+        color:var(--hlx-border-color);
+        font-size: var(--hlx-font-content-size-sm)
+    }
+}
+.active-circle{
+    height:38px;
+    width: 38px;
+    border-radius: 100%;
+    border: 1px solid var(--hlx-color-primary-light) !important;
+    background: var(--hlx-color-primary-light);
+    color: var(--hlx-text-color-primary) !important;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    i{
+        color: var(--hlx-text-color-primary) !important;
+        font-size: var(--hlx-font-content-size-sm);
+        font-weight: bold;
+    }
+}
+
+
+    .timeline-content{
+        font-family: var(--hlx-font-type-content);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: var(--hlx-font-content-size-sm);
+        &-title{
+            margin-bottom: 25px;
+            height: 45px;
+            // margin-left: 10px
+        }
+    }
+.vertical-timeline-container{
+    font-family: var(--hlx-font-type-content);
+    display: flex;
+    flex-direction: column;
+ 
+    .first-element-container, .element-container{
+        width: 20px;
+            display: flex;
+            align-items: flex-start;
+    flex-direction: column;
+    .circle{
+        margin-right: 5px;
+    }
+    .active-circle{
+        margin-right: 5px;
+        color: var(--hlx-border-color-dark);
+    }
+    .connector{
+            border-left:1px dashed var(--hlx-border-color);
+            height: 50px;
+            width: 2px;
+        }
+.active-connector{
+            border-left:1px solid var(--hlx-color-primary)
+;
+            height: 50px;
+            width: 2px;
+        }
+
+        .connector{
+            border-left:1px dashed var(--hlx-border-color);
+            height: 50px;
+            width: 2px;
+            margin: 0 9px;
+        }
+        .active-connector{
+            border-left:1px solid var(--hlx-color-primary)
+;
+             height: 50px;
+            width: 2px;
+            margin: 0 9px;
+        }
+
+    }
+}
+
+.horizontal-timeline-container{
+    font-family: var(--hlx-font-type-content);
+        display: flex;
+    flex-direction: row;
+    width:100%;
+.circle{
+    width: 38px !important;
+}
+.active-circle{
+    width: 38px !important;
+    color: var(--hlx-color-primary);
+    border: 1px solid var(--hlx-color-primary) !important;
+}
+.element-container{
+    display: flex;
+    flex-direction: row;
+    width: 50%;
+        .connector{
+        width: 100%;
+        // background: var(--hlx-border-color);
+        border-bottom: 1px dashed var(--hlx-border-color);
+        height: 2px;
+        margin-top: 9px;
+    }
+        .active-connector{
+        width: 100%;
+        border-bottom: 1px solid var(--hlx-color-primary);
+;
+        height: 2px;
+        margin-top: 9px;
+    }
+}
+}
+
+.timeline-content-horizontal{
+    font-family: var(--hlx-font-type-content);
+    display: flex;
+    flex-direction: row;
+    margin-top: 5px;
+    font-size: var(--hlx-font-content-size-sm);
+    &-title{
+        display: flex;
+        flex-direction: column;
+    }
+
+}
+.element-container-horizontal{
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+
+}
+
+.btn{
+    margin: 30px 30px 0 auto;
+}
+
+.icon-info-bg{
+    background: var(--hlx-border-color);
+    font-size: var(--hlx-icon-size-sm);
+    margin-left: 10px;
+}
+
+.number-font-light{
+    color:white;
+    font-size: var(--hlx-font-content-size-xs);
+    font-weight: bold
+}
+.number-font-dark{
+    color:var(--hlx-color-primary);
+    font-size: var(--hlx-font-content-size-xs);
+    font-weight: bold
+}
+
+
+
+
+
+.t-parent{
+    display: flex;
+    width: 100%;
+    margin-left: 10%;
+    .t-sub-parent{
+      display: flex;
+      width: 100%;
+      
+    .t-cont{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-left: 16px;
+      margin-right: 16px;
+      .t-circle{
+        margin-bottom: 8px;
+
+      }
+      .t-title{
+        font-size: 14px;
+        // font-weight:200;
+        text-align: center;
+        width: 181px;
+        margin-left: -40px;
+        margin-top: -20px;
+      }
+      .t-sub-title{
+        font-size: 12px;
+        font-weight:500;
+        color: var(--hlx-border-color-dark);
+        text-align: center;
+        margin-left: -40px;
+        // margin-top: -20px;
+      }
+      
+      hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px dashed var(--hlx-border-color);
+      margin: 1em 0;
+      padding: 0;
+      width: 50px;
+      // transform: rotate(90deg);
+  }
+    }
+    .t-line{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        // margin-left: 4%;
+        hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px dashed var(--hlx-border-color);
+      margin: 1em 0;
+      padding: 0;
+      width: 100%;
+      // width: 50px;
+      // transform: rotate(90deg);
+  }
+      }
+    }
+  }
+  
+  .t-parent-v{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    .t-sub-parent-v{
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    
+    .t-cont-v{
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .t-circle-v{
+        margin-bottom: 8px;
+      }
+      .t-content-v{
+        display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      margin-left: 8px;
+        margin-top: 20px;
+      
+      .t-title-v{
+        font-size: 14px;
+        // font-weight:600;
+        line-height: 24px;
+        letter-spacing: 0.5%;
+        text-align: center;
+        text-align: center;
+      }
+      .t-sub-title-v{
+        font-size: 12px;
+        font-weight:500;
+        color: var(--hlx-border-color-dark);
+        line-height: 20px;
+        letter-spacing: 0.5%;
+        text-align: center;
+      }
+    }
+      
+      hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px dashed var(--hlx-border-color);
+      margin: 1em 0;
+      padding: 0;
+      width: 50px;
+      // transform: rotate(90deg);
+  }
+    }
+    .t-line-v{
+        width: 38px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 40px;
+        // margin-left: 4%;
+        // margin-top: 10px;
+        // margin-bottom: 10px;
+        hr {
+      display: block;
+      height: 1px;
+      border: 0;
+      border-top: 1px dashed var(--hlx-border-color);
+      margin: 1em 0;
+      padding: 0;
+      width: 100%;
+      // width: 50px;
+      transform: rotate(90deg);
+  }
+      }
+    }
+    
+    .icon-info-ot{
+      font-size: var(--hlx-icon-size-xs);
+        color: var(--hlx-border-color-dark);
+        margin-left: 8px;
+    }
+  }
+
+
+
+  .pri-bg{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height:38px;
+    width: 38px;
+    border-radius: 100%;
+    border: 1px solid var(--hlx-color-primary) !important;
+    background-color: var(--hlx-color-primary);
+    color: #fff;
+        i{
+        color: #fff;
+        font-size: var(--hlx-font-content-size-sm)
+    }
+
+  }
+
+  #circle{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+    height:38px;
+    width: 38px;
+    border-radius: 100%;
+    border: 1px solid var(--hlx-border-color);
+        i{
+        color:var(--hlx-border-color);
+        font-size: var(--hlx-font-content-size-sm)
+    }
+  }