halleyx-ui-framework 4.1.8 → 4.2.0

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

@@ -1,231 +1,225 @@
-@mixin flex($direction:row,$wrap:nowrap,$justify-content:flex-start) {
-    display: flex;
-    flex-flow: $direction $wrap;
-    justify-content: $justify-content;
+@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);
-        @include flex(row,wrap);
-        height: 80%;
+.main-content {
+  &-body {
+    font-family: var(--hlx-font-type-content);
+    @include flex(row, wrap);
+    height: 80%;
+    width: 100%;
+    color: var(--hlx-text-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: 100%;
         width: 100%;
-        color: var(--hlx-text-color-primary);
-        &-upload{
-            @include flex(column,nowrap,space-between);
-            height: 100%;
-            width: 100%;
-            // border: 1px solid var(--hlx-border-color-dark);
-            border: none;
+        background-color: white;
+        border: 2px dashed var(--hlx-border-color);
+        border-radius: 5px;
+        // height: 250px;
+        padding: 16px 0 16px 0;
+        img {
+          width: 40%;
+          height: 40%;
+        }
+        .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;
-            // 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: 100%;
-                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:40%;
-                }
-                .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;
-                    }
-                }
-            }
+          }
         }
+      }
     }
-
+  }
 }
 
-.err{
-    border: 2px dashed var(--hlx-color-error) !important
+.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;
+.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);
-      border-radius: 17px;
-      background-color: #fff;
+      // left:85px;
+      // top: 10px;
+      margin-right: 16px;
+      background: var(--hlx-color-white);
+      padding: 5px;
+      height: 34px;
       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;
-      }
+      border-radius: 5px;
+      cursor: pointer;
+    }
   }
-  .upload-file{
+  &-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-text-color-primary);
+    // height: 20px;
+    // margin-top: 20px;
     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;
-        
+    p {
+      margin: 0;
+      padding: 0;
+      padding-right: 10px;
+      color: var(--hlx-text-color-primary);
+      font-size: 14px;
+      box-sizing: border-box;
     }
-}
-    &-container{
-        // position: relative;
-        display: flex;
-        flex-direction: row;
-        align-items: flex-end;
-        padding-bottom: 16px;
-        padding-top: 8px;
-
-
+    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;
     }
-    .filename-container{
-        display: flex;
-        flex-direction: column;
-        color:var(--hlx-text-color-primary);
-        // height: 20px;
-        // margin-top: 20px;
-        justify-content: center;
-        align-items: center;
-        p{
-            margin:0;
-            padding:0;
-            padding-right: 10px;
-            color: var(--hlx-text-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;
-        }
+    .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-text-color-primary);
-
+.cont {
+  font-size: 14px;
+  color: var(--hlx-text-color-primary);
 }
 
-.button-type-upload{
-    .filename-container{
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        color:var(--hlx-text-color-primary);
-        p{
-            margin:0;
-            padding:0;
-            padding-right: 10px;
-            color: var(--hlx-text-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
-        }
+.button-type-upload {
+  .filename-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    color: var(--hlx-text-color-primary);
+    p {
+      margin: 0;
+      padding: 0;
+      padding-right: 10px;
+      color: var(--hlx-text-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;
+    }
+  }
 }
 
 ::-webkit-input-placeholder {
-    font-family: OpenSans;
-    font-size: 14px;
-    color: var(--hlx-border-color-dark);
-  }
+  font-family: OpenSans;
+  font-size: 14px;
+  color: var(--hlx-border-color-dark);
+}

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

@@ -1,46 +1,46 @@
-@import "./common/var.scss";
+@import './common/var.scss';
 //Roboto Slab
-@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500&display=swap");
+@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");
+@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");
+@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");
+@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");
+@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");
+@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");
+@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");
+@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-pathd}/OpenSans.ttf") format("opentype");
+  src: url('#{$font-path}/OpenSans.ttf') format('opentype');
   // src: url("#{$font-path}/OpenSans.ttf") format("opentype");
 }
 @font-face {
   font-family: QuickSand;
-  src: url("#{$--font-pathd}/Quicksand.ttf") format("opentype");
+  src: url('#{$font-path}/Quicksand.ttf') format('opentype');
 }
 
 @font-face {
   font-family: Pacifico;
-  src: url("#{$--font-pathd}/Pacifico.ttf") format("opentype");
+  src: url('#{$font-path}/Pacifico.ttf') format('opentype');
 }
 @font-face {
   font-family: OstrichSans;
-  src: url("#{$--font-pathd}/ostrich-regular.ttf") format("opentype");
+  src: url('#{$font-path}/ostrich-regular.ttf') format('opentype');
 }
 @font-face {
   font-family: JosefinSans;
-  src: url("#{$--font-pathd}/JosefinSans-Regular.ttf") format("opentype");
+  src: url('#{$font-path}/JosefinSans-Regular.ttf') format('opentype');
 }

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

@@ -13,7 +13,7 @@
   [class^="icon-"], [class*=" icon-"] {
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: 'halley-icons-v6' !important;
-    speak: never;
+    // speak: never;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;