halleyx-ui-framework 11.7.94 → 11.7.96

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

@@ -0,0 +1,141 @@
+.theme {
+  background: var(--hlx-color-primary) !important;
+  border: 1px solid var(--hlx-color-primary) !important;
+}
+.grey {
+  background: var(--hlx-border-color-lighter) !important;
+  border: 1px solid var(--hlx-border-color) !important;
+}
+.draggable {
+  user-select: none;
+  height: 40px;
+  font-size: 14px;
+  width: 100%;
+  border: 1px solid var(--hlx-border-color);
+  border-radius: 5px;
+  box-sizing: border-box;
+  padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-bottom: 10px;
+}
+
+.handle {
+  cursor: move;
+  font-size: var(--hlx-icon-size-md);
+  color: var(--hlx-text-color-primary);
+}
+
+.button {
+  margin-top: 35px;
+}
+.flip-list-move {
+  transition: transform 0.5s;
+}
+.no-move {
+  transition: transform 0s;
+}
+.ghost {
+  opacity: 0.5;
+  background: var(--hlx-color-primary)-light;
+}
+.list-group {
+  min-height: 20px;
+}
+
+// input[type='checkbox']:checked {
+//   content: '\e964';
+// }
+// // .list-group-item {
+// //   cursor: move;
+// // }
+// // .list-group-item i {
+// //   cursor: pointer;
+// // }
+
+// /* The container */
+// .check-container {
+//   display: flex;
+//   align-items: center;
+//   position: relative;
+//   padding-left: 25px;
+//   font-size: 14px;
+//   -webkit-user-select: none;
+//   -moz-user-select: none;
+//   -ms-user-select: none;
+//   user-select: none;
+// }
+
+// /* Hide the browser's default checkbox */
+// .check-container input {
+//   position: absolute;
+//   opacity: 0;
+//   height: 0;
+//   width: 0;
+// }
+
+// /* Create a custom checkbox */
+// .checkmark {
+//   position: absolute;
+//   left: 0;
+//   height: 16px;
+//   width: 16px;
+//   background-color: var(--hlx-border-color-lighter);
+//   border-radius: 3px;
+//   border: 1px solid var(--hlx-border-color);
+// }
+
+// /* On mouse-over, add a grey background color */
+// // .check-container:hover input ~ .checkmark {
+// //   // background-color:#FFF1D3;
+// // }
+// .check-container input:disabled:checked ~ .checkmark {
+//   cursor: not-allowed;
+//   background: var(--hlx-border-color-lighter);
+//   border: 1px solid var(--hlx-border-color);
+// }
+// .check-container input:disabled ~ .checkmark {
+//   cursor: not-allowed;
+//   background: var(--hlx-border-color-lighter);
+// }
+// .check-container input:disabled:checked ~ .checkmark:after {
+//   left: 5px;
+//   top: 2px;
+//   width: 4px;
+//   height: 8px;
+//   border: solid var(--hlx-border-color);
+//   border-radius: 1px;
+//   border-width: 0 2px 2px 0px;
+//   transform: rotate(45deg);
+// }
+
+// /* When the checkbox is checked, add a blue background */
+// .check-container input:checked ~ .checkmark {
+//   background-color: var(--hlx-color-primary);
+//   border: 1px solid var(--hlx-color-primary);
+// }
+
+// /* Create the checkmark/indicator (hidden when not checked) */
+// .checkmark:after {
+//   content: '';
+//   position: absolute;
+//   display: none;
+// }
+
+// /* Show the checkmark when checked */
+// .check-container input:checked ~ .checkmark:after {
+//   display: block;
+// }
+
+// /* Style the checkmark/indicator */
+// .check-container .checkmark:after {
+//   left: 5px;
+//   top: 2px;
+//   width: 4px;
+//   height: 8px;
+//   border: solid white;
+//   border-radius: 1px;
+//   border-width: 0 2px 2px 0px;
+//   transform: rotate(45deg);
+// }

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

@@ -0,0 +1,128 @@
+.sidenav-right,
+.sidenav-left {
+  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+  -moz-box-sizing: border-box; /* Firefox, other Gecko */
+  box-sizing: border-box;
+  // height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  right: 0;
+  background-color: rgb(255, 255, 255);
+  overflow-x: hidden;
+  transition: width 0.2s;
+  padding: 10px;
+  font-size: 14px;
+  display: none;
+}
+.sidenav-top {
+  width: 100%;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  background-color: white;
+  overflow-x: hidden;
+  transition: width 0.2s;
+  box-sizing: border-box;
+  padding: 10px;
+  font-size: 14px;
+}
+.sidenav-bottom {
+  width: 100%;
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  overflow-x: hidden;
+  transition: width 0.2s;
+  box-sizing: border-box;
+  padding: 10px;
+  font-size: 14px;
+}
+
+.header-panel-right,
+.header-panel-left,
+.header-panel-top,
+.header-panel-bottom {
+  height: 7vh;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title-right,
+  .title-left,
+  .title-top,
+  .title-bottom {
+    min-width: 70px;
+  }
+}
+.body-panel-right,
+.body-panel-left {
+  height: 84vh;
+  // padding: 20px 0px;
+}
+.footer-panel-right,
+.footer-panel-left {
+  height: 6vh;
+}
+
+.header-panel-top,
+.header-panel-bottom {
+  height: 15%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .title-right,
+  .title-left,
+  .title-top,
+  .title-bottom {
+    min-width: 70px;
+  }
+}
+.body-panel-top,
+.body-panel-bottom {
+  padding: 20px 0px;
+  height: 70%;
+}
+.footer-panel-top,
+.footer-panel-bottom {
+  height: 15%;
+}
+
+.sidenav-margin-right,
+.sidenav-margin-left {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  background-color: #000;
+  opacity: 50%;
+  overflow-x: hidden;
+}
+.sidenav-margin-top {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 50%;
+  overflow-x: hidden;
+}
+.sidenav-margin-bottom {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  background-color: #000;
+  opacity: 50%;
+  overflow-x: hidden;
+}

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

@@ -0,0 +1,75 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  // font-family: OpenSans;
+}
+
+.error-page-container {
+  font-family: var(--hlx-font-type-content);
+  height: 90%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 50px;
+  align-items: center;
+  text-align: left;
+
+  section:first-of-type {
+    display: flex;
+    justify-content: center;
+
+    img {
+      width: 90%;
+    }
+  }
+
+  section:last-of-type {
+    display: flex;
+    flex-direction: column;
+    row-gap: 30px;
+
+    h5 {
+      font-size: 50px;
+      line-height: 50px;
+      color: var(--hlx-text-color-primary);
+    }
+    h4 {
+      color: var(--hlx-text-color-primary);
+    }
+
+    p {
+      font-size: var(--hlx-font-content-size);
+      width: 80%;
+      line-height: 25px;
+      color: var(--hlx-text-color-primary);
+    }
+
+    button {
+      width: fit-content;
+      padding: 10px 20px;
+      background-color: var(--hlx-color-primary);
+      color: #fff;
+      font-size: var(--hlx-font-content-size);
+      height: 40px;
+      border: 0;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+  }
+}
+
+@media only screen and (max-width: 375px) {
+  .error-page-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    row-gap: 30px;
+
+    section:first-of-type {
+      img {
+        width: 80%;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,332 @@
+@mixin flex($direction: row, $wrap: nowrap, $justify-content: flex-start) {
+  display: flex;
+  flex-flow: $direction $wrap;
+  justify-content: $justify-content;
+}
+
+.main-content {
+  &-body {
+    font-family: var(--hlx-font-type-content);
+    font-weight:200;
+    @include flex(row, wrap);
+    // height: 80%;
+    // width: 100%;
+   color: var(--hlx-color-primary);
+    &-upload {
+      @include flex(column, nowrap, space-between);
+      height: 100%;
+      width: 100%;
+      // border: 1px solid var(--hlx-border-color-dark);
+      border: none;
+      border-radius: 5px;
+      // padding: 35px;
+      padding: 0px;
+      // padding-bottom: 20px;
+      .upload-footer {
+        padding-top: 5px;
+        color: var(--hlx-color-error);
+        font-style: italic;
+        font-size: var(--hlx-font-content-size-xs);
+        text-align: left !important;
+      }
+      .upload-panel {
+        @include flex(column, nowrap, center);
+        align-items: center;
+        height: 160px;
+        width: 100%;
+        background-color: white;
+        border: 2px dashed var(--hlx-border-color);
+        border-radius: 5px;
+        // height: 250px;
+        padding: 16px 0 16px 0;
+        img {
+          // width: 40%;
+          // height: auto;
+          display: block;
+          // width: 100%;
+          // height: auto;
+        }
+        .panel-items {
+          @include flex(column, nowrap, center);
+          align-items: center;
+          height: 100%;
+          font-size: 14px;
+          i {
+            font-size: 60px;
+
+            color: var(--hlx-border-color-dark);
+            // padding-top:10px;
+            padding-bottom: 8px;
+            cursor: pointer;
+          }
+          span {
+            // padding-top:10px;
+            // padding-bottom:10px;
+            cursor: pointer;
+          }
+        //   .or-text {
+        //     // padding-bottom:8px;
+        //   }
+          button {
+            margin-top: 8px;
+            // margin-bottom:10px;
+            border-radius: 5px;
+          }
+        }
+      }
+      .sm{
+        height: 70px;
+        width: 70px;
+        // img{
+        //   width: 80px
+        // }
+      }
+      .containere{
+        position: relative;
+      }
+      .containere:hover .overlay {
+        opacity: 1;
+      }
+ .overlay{
+  position: absolute; 
+  bottom: 0; 
+  background: rgb(0, 0, 0);
+  background: rgba(0, 0, 0, 0.5); /* Black see-through */
+  color: #f1f1f1; 
+  width: 100%;
+  transition: .5s ease;
+  opacity:0;
+  color: white;
+  font-size: 20px;
+  padding: 20px;
+  text-align: center;
+  border-radius: 0 0 5px 5px
+ }
+    }
+  }
+}
+
+.err {
+  border: 2px dashed var(--hlx-color-error) !important;
+}
+.secondary-button1 {
+  cursor: pointer;
+  box-sizing: border-box;
+  height: 30px;
+  min-width: 120px;
+  padding: 0px 20px;
+  color: var(--hlx-color-primary);
+  border-radius: 17px;
+  background-color: #fff;
+  border: 1px solid var(--hlx-color-primary);
+  &:active {
+    background-color: #fff;
+    border: 1px solid var(--hlx-color-primary-dark);
+    padding: 0px 20px;
+    color: var(--hlx-color-primary-dark);
+    outline: none;
+  }
+//   &:focus {
+//     // outline: 2px solid #ffffff;
+//     // box-shadow: 0 0 1px 4px #2b96e4;
+//   }
+}
+.upload-file {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  .icons {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 8px;
+
+    .icon-trash-regular {
+      // position:absolute;
+      // left:65px;
+      // right:20px;
+      font-size: var(--hlx-font-content-size-xl);
+      cursor: pointer;
+      color: var(--hlx-color-white);
+      background: var(--hlx-color-primary);
+      padding: 5px;
+      border-radius: 5px;
+    }
+
+    .icon-eye-regular {
+      font-size: var(--hlx-font-content-size-xl);
+      // position: relative;
+      color: var(--hlx-color-primary);
+      // left:85px;
+      // top: 10px;
+      margin-right: 16px;
+      background: var(--hlx-color-white);
+      padding: 5px;
+      height: 34px;
+      border: 1px solid var(--hlx-color-primary);
+      border-radius: 5px;
+      cursor: pointer;
+    }
+  }
+  &-container {
+    // position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    padding-bottom: 16px;
+    padding-top: 8px;
+  }
+  .filename-container {
+    display: flex;
+    flex-direction: column;
+   color: var(--hlx-color-primary);
+    // height: 20px;
+    // margin-top: 20px;
+    justify-content: center;
+    align-items: center;
+    p {
+      margin: 0;
+      padding: 0;
+      padding-right: 10px;
+     color: var(--hlx-color-primary);
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    i {
+      font-size: var(--hlx-font-content-size-xl);
+      cursor: pointer;
+      color: var(--hlx-color-white);
+      background: var(--hlx-color-primary);
+      padding: 5px;
+      border-radius: 5px;
+    }
+    .icon-file-check-regular {
+      font-size: 60px;
+      color: var(--hlx-border-color-dark);
+      background: var(--hlx-color-white);
+      left: 40px;
+    }
+  }
+}
+.cont {
+  font-size: 14px;
+ color: var(--hlx-color-primary);
+}
+
+.button-type-upload {
+  .filename-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+   color: var(--hlx-color-primary);
+    p {
+      margin: 0;
+      padding: 0;
+      padding-right: 10px;
+     color: var(--hlx-color-primary);
+      font-size: 14px;
+      box-sizing: border-box;
+    }
+    i {
+      font-size: var(--hlx-font-content-size-xl);
+      cursor: pointer;
+      color: var(--hlx-color-white);
+      background: var(--hlx-color-primary);
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 16px;
+    }
+    .icon-trash-regular {
+      font-size: var(--hlx-font-content-size-xl);
+      cursor: pointer;
+      color: var(--hlx-color-primary);
+      background: var(--hlx-color-white);
+      border: 1px solid var(--hlx-color-primary);
+      padding: 5px;
+      border-radius: 5px;
+      margin-left: 8px;
+    }
+  }
+}
+
+.text-btn-upload{
+  font-size: 0.875rem;
+  cursor: pointer;
+  color: var(--hlx-color-primary);
+  font-weight: bold;
+}
+.text-btn-uploadd{
+  font-size: 0.875rem;
+  cursor: pointer;
+  color: var(--hlx-color-primary);
+}
+
+.text-btn-icon{
+  font-size: 0.875rem;
+  cursor: pointer;
+  color: var(--hlx-color-primary);
+  font-size: var(--hlx-font-content-size-m);
+
+  align-items: center;
+}
+
+::-webkit-input-placeholder {
+  font-family: OpenSans;
+  font-size: 14px;
+  color: var(--hlx-border-color-dark);
+}
+
+.file-items{
+  height: 60%;
+  margin-top: 8px;
+  .item{
+    width: 100%;
+    border: 1px solid var(--hlx-border-color);
+    border-radius: 5px;
+    padding: 8px;
+    display: flex;
+    
+    .left{
+      width: 15%;
+      display: flex;
+        align-items: center;
+    }
+    .right{
+      width: 85%;
+      font-size: 14px;
+     color: var(--hlx-color-primary);
+      display: flex;
+      flex-direction: column;
+      .title{
+        display: flex;
+        justify-content: space-between;
+      }
+      .desc{
+        font-size:12px;
+        color: var(--hlx-border-color-dark);
+        margin: 0 0 4px 0;
+      }
+      .progress{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        padding-right: 8px;
+        .leftt{
+          width: 90%;
+          .progress-bar-container{
+            height: 3px !important;
+          }
+        }
+        .rightt{
+          width: 5%;
+          font-size: 12px;
+          margin-right: 8px;
+        }
+  
+      }
+    
+  }
+  }
+}