halleyx-ui-framework 4.1.8 → 4.2.0

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

@@ -1,14 +1,14 @@
 .pagination-container {
-    // display: grid;
-    // grid-template-columns: 200px auto;
-    align-items: center;
-    font-size: 14px !important;
+  // display: grid;
+  // grid-template-columns: 200px auto;
+  align-items: center;
+  font-size: 14px !important;
 }
-tr:last-child{
-  td:first-child{
+tr:last-child {
+  td:first-child {
     border-bottom-left-radius: 5px !important;
   }
-  td:last-child{
+  td:last-child {
     border-bottom-right-radius: 5px !important;
   }
 }
@@ -19,8 +19,8 @@ td.fixed-column-left {
   background: white;
   box-shadow: inset -8px 0px 12px -16px #222222;
   text-overflow: ellipsis;
-      // overflow: hidden;
-      white-space: nowrap;
+  // overflow: hidden;
+  white-space: nowrap;
 }
 th.fixed-column-left {
   position: sticky !important;
@@ -29,8 +29,8 @@ th.fixed-column-left {
   background: white;
   box-shadow: inset -8px 0px 12px -16px #222222;
   text-overflow: ellipsis;
-      // overflow: hidden;
-      white-space: nowrap;
+  // overflow: hidden;
+  white-space: nowrap;
 }
 td.fixed-column-right {
   position: sticky !important;
@@ -39,8 +39,8 @@ td.fixed-column-right {
   background: white;
   box-shadow: inset 8px 0px 12px -16px #222222;
   text-overflow: ellipsis;
-      // overflow: hidden;
-      white-space: nowrap;
+  // overflow: hidden;
+  white-space: nowrap;
 }
 th.fixed-column-right {
   position: sticky !important;
@@ -49,20 +49,20 @@ th.fixed-column-right {
   background: white;
   box-shadow: inset 8px 0px 12px -16px #222222;
   text-overflow: ellipsis;
-      // overflow: hidden;
-      white-space: nowrap;
+  // overflow: hidden;
+  white-space: nowrap;
 }
 
-.table-v2-container{
+.table-v2-container {
   // height: 100%;
   .hlxTableV2 {
     thead .table-v2-merge-head th {
-      max-height: 40px  !important;
+      max-height: 40px !important;
       z-index: 260;
       white-space: nowrap;
     }
     thead .table-v2-head th {
-      max-height: 40px  !important;
+      max-height: 40px !important;
       z-index: 260;
       white-space: nowrap;
     }
@@ -70,175 +70,172 @@ th.fixed-column-right {
 }
 // ----------------------------------------- Basic table css -----------------------------------------
 .hlxTableV2 {
-    border-collapse: separate !important;
-    border-spacing: 0;
-    width: 100%; 
+  border-collapse: separate !important;
+  border-spacing: 0;
+  width: 100%;
   display: block;
-    overflow-x: auto;
-    overflow-y: auto;
-    white-space: nowrap; 
+  overflow-x: auto;
+  overflow-y: auto;
+  white-space: nowrap;
   border-collapse: collapse;
-    font-family: "OpenSans";
-    background: white;
-    th,
-    td {
-      padding: 4px 8px;
-      font-weight: 100;
-      font-size: 14px;
-    }
-    th{
-      width: 100%;
-      min-width: 100px;
-      text-overflow: ellipsis;
-      // overflow: hidden;
-      white-space: nowrap;
-      height: 40px  !important;
-    }
-    td{
-      width: 1%;
-      min-width: max-content;
-      text-overflow: ellipsis;
-      // overflow: hidden;
-      white-space: nowrap;
-      height: 40px !important;
-    }
+  font-family: 'OpenSans';
+  background: white;
+  th,
+  td {
+    padding: 4px 8px;
+    font-weight: 100;
+    font-size: 14px;
+  }
+  th {
+    width: 100%;
+    min-width: 100px;
+    text-overflow: ellipsis;
+    // overflow: hidden;
+    white-space: nowrap;
+    height: 40px !important;
+  }
+  td {
+    width: 1%;
+    min-width: max-content;
+    text-overflow: ellipsis;
+    // overflow: hidden;
+    white-space: nowrap;
+    height: 40px !important;
   }
-  
-  // ----------------------------------------- Bold headers css -----------------------------------------
-  .boldHeaders {
-    th {
-      font-weight: bold;
-    }
+}
+
+// ----------------------------------------- Bold headers css -----------------------------------------
+.boldHeaders {
+  th {
+    font-weight: bold;
   }
-  
-  // ----------------------------------------- Borders css -----------------------------------------
-  
-  .tableBorder {
-    border: solid #ccc 1px;
-    -moz-border-radius: 6px;
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-  }
-  
-  .headerBorder {
-    th {
-      border-bottom: 1px solid #d8d8d8;
-    }
+}
+
+// ----------------------------------------- Borders css -----------------------------------------
+
+.tableBorder {
+  border: solid #ccc 1px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+}
+
+.headerBorder {
+  th {
+    border-bottom: 1px solid #d8d8d8;
   }
-  
-  .verticalBorder {
-    th,
-    td {
-      border-right: 1px solid #d8d8d8;
-    }
-    th:last-child,
-    td:last-child {
-      border-right: none;
-    }
+}
+
+.verticalBorder {
+  th,
+  td {
+    border-right: 1px solid #d8d8d8;
   }
-  
-  .horizontalBorder {
-    td {
-      border-bottom: 1px solid #d8d8d8;
-    }
-    tr:last-child td {
-      border-bottom: none;
-    }
+  th:last-child,
+  td:last-child {
+    border-right: none;
   }
-  
-  // ----------------------------------------- Borders css -----------------------------------------
-  .rowHover {
-      tr:hover {
-          background: #e4fff5;
-      }
+}
+
+.horizontalBorder {
+  td {
+    border-bottom: 1px solid #d8d8d8;
   }
-  
-  // ----------------------------------------- Theme css -----------------------------------------
-  .lightTheme {
-      th {
-          background: white;
-      }
+  tr:last-child td {
+    border-bottom: none;
   }
-  .primaryTheme {
-      th {
-          background: #54bd95;
-          color: black;
-      }
+}
+
+// ----------------------------------------- Borders css -----------------------------------------
+.rowHover {
+  tr:hover {
+    background: #e4fff5;
   }
-  .greyTheme {
-      th {
-          background: #edecec;
-          color: black;
-      }
+}
+
+// ----------------------------------------- Theme css -----------------------------------------
+.lightTheme {
+  th {
+    background: white;
   }
-  
-  // ----------------------------------------- striped row css -----------------------------------------
-  
-  .stripedRow {
-      tr:nth-child(even) {
-          background: #e4fff5;
-      }
+}
+.primaryTheme {
+  th {
+    background: #54bd95;
+    color: black;
+  }
+}
+.greyTheme {
+  th {
+    background: #edecec;
+    color: black;
   }
+}
 
+// ----------------------------------------- striped row css -----------------------------------------
 
-  // --------------------------------------------Sort-icon ---------------------------------------------------
-.table-head{
+.stripedRow {
+  tr:nth-child(even) {
+    background: #e4fff5;
+  }
+}
+
+// --------------------------------------------Sort-icon ---------------------------------------------------
+.table-head {
   display: flex;
-  .table-sort{
+  .table-sort {
     position: relative;
     display: flex;
     flex-direction: column;
-      .icon-filled-arrow-up{
-        font-size: 10px;
-        position: absolute;
-        top:5px;
-      }
-      .icon-filled-arrow-down{
-        font-size: 10px;
-        position: absolute;
-        top:11px;
-      }
+    .icon-filled-arrow-up {
+      font-size: 10px;
+      position: absolute;
+      top: 5px;
+    }
+    .icon-filled-arrow-down {
+      font-size: 10px;
+      position: absolute;
+      top: 11px;
+    }
 
-    i{
+    i {
       font-size: 12px;
-      margin-left:5px;
+      margin-left: 5px;
       cursor: pointer;
-      &:hover{
-        color:var(--hlx-color-primary-dark)
+      &:hover {
+        color: var(--hlx-color-primary-dark);
       }
     }
   }
 }
 
-.sorting-icon{
-  color: #265E4B;
-
+.sorting-icon {
+  color: #265e4b;
 }
 
-.icon-vertical-dots{
+.icon-vertical-dots {
   font-size: 20px;
   position: relative;
   cursor: pointer;
-  &:hover{
+  &:hover {
     background-color: var(--hlx-color-primary-light);
     border-radius: 20px;
   }
 }
 
-
-.icon-gear{
+.icon-gear {
   font-size: 24px;
   cursor: pointer;
 }
 
 .action-gear {
-  width:100%;
-  display:flex;
-  justify-content:center
+  width: 100%;
+  display: flex;
+  justify-content: center;
 }
 
 .example-2-style {
   margin-top: -116px;
   margin-left: -65px;
   position: relative;
-}
+}

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

@@ -1,55 +1,54 @@
-
-.tab-content{
-    font-size: 16px;
+.tab-content {
+  font-size: 16px;
 }
 
 .tabs_header {
-    width: 100%;
-    margin-top: 0px;
-    margin-bottom: 10px;
-    list-style: none;
-    padding: 0;
-    display: flex;
+  width: 100%;
+  margin-top: 0px;
+  margin-bottom: 10px;
+  list-style: none;
+  padding: 0;
+  display: flex;
+  border-bottom: 1px solid var(--hlx-border-color);
+  overflow-x: auto;
+}
+
+.tabs_header li {
+  border: 2px solid transparent;
+  font-size: 14px;
+  min-width: 100px;
+  white-space: nowrap;
+  text-align: center;
+  padding: 10px 10px;
+  margin-right: 10px;
+  cursor: pointer !important;
+  transition: 0.4s all ease-out;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.tabs_header li#top.selected {
+  border-top: 2px solid var(--hlx-color-primary);
+  color: var(--hlx-color-primary);
+}
+.tabs_header li#bottom.selected {
+  border-bottom: 2px solid var(--hlx-color-primary);
+  color: var(--hlx-color-primary);
+}
+
+.tab-arrows {
+  display: flex;
+  i {
+    cursor: pointer;
     border-bottom: 1px solid var(--hlx-border-color);
-    overflow-x: auto;
-  }
-  
-  .tabs_header li {
-    border: 2px solid transparent;
-    font-size: 14px;
-    min-width: 100px;
-    white-space: nowrap;
-    text-align: center;
-    padding: 10px 10px;
-    margin-right: 10px;
-    cursor: pointer !important;
-    transition: 0.4s all ease-out;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .tabs_header li#top.selected {
-    border-top: 2px solid var(--hlx-color-primary);
-    color: var(--hlx-color-primary);
-  }
-  .tabs_header li#bottom.selected {
-    border-bottom: 2px solid var(--hlx-color-primary);
-    color: var(--hlx-color-primary);
-  }
-  
-  .tab-arrows {
+    height: 44px;
     display: flex;
-    i {
-      cursor: pointer;
-      border-bottom: 1px solid var(--hlx-border-color);
-      height: 44px;
-      display: flex;
-      align-items: center;
-      z-index: 100;
-      position: relative;
-      font-size: var(--hlx-icon-size-md);
-    }
+    align-items: center;
+    z-index: 100;
+    position: relative;
+    font-size: var(--hlx-icon-size-md);
   }
-  
-  .tabs_header::-webkit-scrollbar {
-    display: none;
-  }
+}
+
+.tabs_header::-webkit-scrollbar {
+  display: none;
+}

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

@@ -10,7 +10,7 @@
   width: -moz-max-content;
   width: max-content;
   font-weight: 500;
-  letter-spacing: .005em;
+  letter-spacing: 0.005em;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
@@ -69,10 +69,10 @@
 
   &.success {
     background-color: var(--hlx-color-success-light);
-    color: getCssVar("color", "success");
+    color: getCssVar('color', 'success');
     &:hover {
       cursor: default;
-      background-color: getCssVar("color", "success");
+      background-color: getCssVar('color', 'success');
       color: var(--hlx-color-success-light);
     }
   }