halleyx-ui-framework 11.7.80 → 11.7.81-beta.2

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

@@ -1,141 +0,0 @@
-.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

@@ -1,128 +0,0 @@
-.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

@@ -1,75 +0,0 @@
-* {
-  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

@@ -1,332 +0,0 @@
-@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;
-        }
-  
-      }
-    
-  }
-  }
-}