halleyx-ui-framework 5.4.2 → 5.4.3

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;
+        }
+  
+      }
+    
+  }
+  }
+}

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

@@ -0,0 +1,46 @@
+@import './common/var.scss';
+//Roboto Slab
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500&display=swap');
+//Merriweather
+@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700;1,900&display=swap');
+//Playfair Display and lora
+@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Playfair+Display:ital,wght@0,400;0,500;1,400;1,500&display=swap');
+// PT Serif
+@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+//Best Sans Serif Fonts
+//Montserrat
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+//Poppins
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+//Best Display Fonts
+//Bebas neue
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
+//mono space fonts
+//roboto mono
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,400;0,500;0,700;1,100;1,200;1,700&display=swap');
+
+@debug "#{$--font-pathd}";
+@font-face {
+  font-family: Opensans;
+  src: url('#{$font-path}/OpenSans.ttf') format('opentype');
+  // src: url("#{$font-path}/OpenSans.ttf") format("opentype");
+}
+@font-face {
+  font-family: QuickSand;
+  src: url('#{$font-path}/Quicksand.ttf') format('opentype');
+}
+
+@font-face {
+  font-family: Pacifico;
+  src: url('#{$font-path}/Pacifico.ttf') format('opentype');
+}
+@font-face {
+  font-family: OstrichSans;
+  src: url('#{$font-path}/ostrich-regular.ttf') format('opentype');
+}
+@font-face {
+  font-family: JosefinSans;
+  src: url('#{$font-path}/JosefinSans-Regular.ttf') format('opentype');
+}