halleyx-ui-framework 5.4.1 → 5.4.2

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

@@ -1,488 +0,0 @@
-// .switch-containerr-regular {
-//   //     width: -moz-fit-content;
-//   width: fit-content;
-//   // padding: 14px 16px 14px 16px;
-//   border: 1px solid var(--hlx-color-primary);
-//   box-sizing: border-box;
-//   border-radius: 8px;
-//   display: flex;
-//   flex-direction: row;
-//   height: 38px;
-//   .switch-item-regular input[type='radio'] {
-//     position: absolute;
-//     opacity: 0;
-//     width: 0;
-//     height: 0;
-//   }
-
-//   .switch-item-regular input[type='radio']:checked + label {
-//     background-color: #007aff;
-//     color: #fff;
-//   }
-
-//   .switch-item-regular {
-//     padding: 10px 14px 10px 14px;
-//     background: var(--hlx-color-white);
-//     text-align: center;
-//     cursor: pointer;
-//     border-radius: 7px;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-
-//     font-size: 14px;
-//     color: var(--hlx-text-color-primary);
-//     // width: 100%;
-
-//     .content-regular {
-//       display: flex;
-//       cursor: pointer;
-//       font-size: 14px;
-//       flex-direction: row;
-//       align-items: center;
-//       justify-content: center;
-//       i {
-//         font-size: var(--hlx-icon-size-sm);
-//         margin-right: 8px;
-//       }
-//     }
-//   }
-//   .noborder {
-//     border: none;
-//   }
-//   .border {
-//     border-right: 1px solid var(--hlx-color-primary);
-//     border-top-right-radius: 0px;
-//     border-bottom-right-radius: 0px;
-//     // border: none;
-//   }
-//   .selected-switch-regular {
-//     color: var(--hlx-color-white);
-//     background: var(--hlx-color-primary);
-//   }
-//   .noradius {
-//     border-radius: 0;
-//   }
-//   // .radius {
-//   // }
-//   .noleftradius {
-//     border-top-left-radius: 0px;
-//     border-bottom-left-radius: 0px;
-//   }
-// }
-// .switch-containerr-tab-top {
-//   //     width: -moz-fit-content;
-//   width: fit-content;
-//   // padding: 14px 16px 14px 16px;
-//   // border-top: 1px solid var(--hlx-border-color);
-//   box-sizing: border-box;
-//   border-radius: 6px;
-//   display: flex;
-//   flex-direction: row;
-//   height: 38px;
-//   .switch-item-tab-top {
-//     padding: 10px 14px 10px 14px;
-//     background: var(--hlx-color-white);
-//     text-align: center;
-//     cursor: pointer;
-//     border-radius: 6px;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-
-//     font-size: 14px;
-//     color: var(--hlx-text-color-primary);
-//     // width: 100%;
-
-//     .content-tab-top {
-//       display: flex;
-//       font-size: 14px;
-//       flex-direction: row;
-//       cursor: pointer;
-//       align-items: center;
-//       justify-content: center;
-//       i {
-//         font-size: var(--hlx-icon-size-sm);
-//         margin-right: 8px;
-//       }
-//       input[type='radio'] {
-//         position: absolute;
-//         opacity: 0;
-//         width: 0;
-//         height: 0;
-//       }
-//     }
-//   }
-//   .noborder {
-//     border: none;
-//   }
-//   // .border{
-//   //   border-right: 1px solid var(--hlx-color-primary);
-//   //   border-top-right-radius: 0px;
-//   //   border-bottom-right-radius: 0px;
-//   //   // border: none;
-//   // }
-//   .selected-switch-tab-top {
-//     color: var(--hlx-color-primary);
-//     border-top: 2px solid var(--hlx-color-primary);
-//     border-top-right-radius: 0px;
-//     border-top-left-radius: 0px;
-//     // background: var(--hlx-color-primary);
-//   }
-//   .noradius {
-//     border-radius: 0;
-//   }
-//   // .radius {
-//   // }
-//   .noleftradius {
-//     border-top-left-radius: 0px;
-//     border-bottom-left-radius: 0px;
-//   }
-// }
-// .switch-containerr-tab-bottom {
-//   //     width: -moz-fit-content;
-//   width: fit-content;
-//   // padding: 14px 16px 14px 16px;
-//   // border-bottom: 1px solid var(--hlx-border-color);
-//   box-sizing: border-box;
-//   border-radius: 6px;
-//   display: flex;
-//   flex-direction: row;
-//   height: 38px;
-//   .switch-item-tab-bottom {
-//     padding: 10px 14px 10px 14px;
-//     background: var(--hlx-color-white);
-//     text-align: center;
-//     cursor: pointer;
-//     // border-radius: 6px;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     justify-content: center;
-
-//     font-size: 14px;
-//     color: var(--hlx-text-color-primary);
-//     border-bottom: 2px solid transparent;
-//     // width: 100%;
-
-//     .content-tab-bottom {
-//       display: flex;
-//       cursor: pointer;
-//       font-size: 14px;
-//       flex-direction: row;
-//       align-items: center;
-//       justify-content: center;
-//       i {
-//         font-size: var(--hlx-icon-size-sm);
-//         margin-right: 8px;
-//       }
-//       input[type='radio'] {
-//         position: absolute;
-//         opacity: 0;
-//         width: 0;
-//         height: 0;
-//       }
-//     }
-//   }
-//   .noborder {
-//     border: none;
-//   }
-//   // .border{
-//   //   border-right: 1px solid var(--hlx-color-primary);
-//   //   border-top-right-radius: 0px;
-//   //   border-bottom-right-radius: 0px;
-//   //   // border: none;
-//   // }
-//   .selected-switch-tab-bottom {
-//     color: var(--hlx-color-primary);
-//     border-bottom: 2px solid var(--hlx-color-primary);
-//     border-top-right-radius: 0px;
-//     border-top-left-radius: 0px;
-//   }
-//   .noradius {
-//     border-radius: 0;
-//   }
-//   // .radius {
-//   // }
-//   .noleftradius {
-//     border-top-left-radius: 0px;
-//     border-bottom-left-radius: 0px;
-//   }
-// }
-
-// .switchselectvalue {
-//   border: none;
-//   background-color: var(--hlx-color-primary) !important;
-//   color: var(--hlx-color-white) !important;
-// }
-.hlx-btn-switch-group {
-  .hlx-switch-btn {
-    outline: none !important;
-  }
-  .hlx-switch-btn {
-    font-family: var(--hlx-font-type-content);
-    display: inline-flex;
-    align-items: center;
-    letter-spacing: 0.14px;
-    // padding: 10px 14px;
-    padding: .5em .7em;
-    margin-bottom: 0;
-    font-size: 14px;
-    font-weight: 400;
-    // line-height: 1.42857143;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -ms-touch-action: manipulation;
-    touch-action: manipulation;
-    cursor: pointer;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    background-image: none;
-    border: 2px solid transparent;
-    border-radius: 4px;
-    // border-color: var(--hlx-color-primary);
-    border-color: var(--hlx-color-primary);
-    border-width: thin;
-    &.--border-bottom,
-    &.--border-top {
-      border-color: transparent;
-      border: none;
-      border-radius: 0 !important;
-      // border-width: unset;
-    }
-  }
-
-  & > .hlx-switch-btn:last-child:not(:first-child),
-  & > .dropdown-toggle:not(:first-child) {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  & > .hlx-switch-btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-    border-radius: 0;
-  }
-
-  & .hlx-switch-btn + .hlx-switch-btn,
-  & .hlx-switch-btn + &,
-  & & + .hlx-switch-btn,
-  & & + & {
-    margin-left: -1px;
-  }
-
-  .hlx-switch-btn-default {
-    color: var(--hlx-text-color-primary);
-    // background-color: #fff;
-    border-color: var(--hlx-color-primary);
-    border-width: thin;
-    &.--border-bottom,
-    &.--border-top {
-      border: 2px solid;
-      border-color: transparent;
-    }
-
-    &:hover,
-    &:focus {
-      color: var(--hlx-text-color-primary);
-      background-color: va(--hlx-text-color-secondary);
-      // border-color: #adadad;
-      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      &.--border-bottom {
-        color: var(--hlx-color-primary) !important;
-        background-color: transparent !important;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        // border: 2px solid transparent;
-
-        // border-color: transparent;
-      }
-    }
-    &:focus {
-      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-    }
-    // &:focus {
-    //   color: var(--hlx-text-color-primary);
-    //   background-color: #e6e6e6;
-    //   border-color: #8c8c8c;
-    // }
-  }
-  .hlx-switch-btn:active {
-    background-image: none;
-    outline: 0;
-    -webkit-box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0px 0px 2px 0px rgba(0, 0, 0, 0.125);
-    // border-width: thin;
-
-    &.--border-bottom {
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      // border-width: 2px;
-      // border-width: unset;
-
-      // border-bottom-color: var(--hlx-color-primary);
-    }
-  }
-  .hlx-switch-btn-read-only {
-    color: var(--hlx-text-color-primary);
-    // background-color: #fff;
-    border-color: var(--hlx-color-primary);
-    border-width: thin;
-    &.--border-bottom,
-    &.--border-top {
-      border: 2px solid;
-      border-color: transparent;
-      &:active{
-        color:inherit !important;
-      }
-    }
-
-    &:hover,
-    &:focus {
-      cursor: default;
-      color: var(--hlx-text-color-primary);
-      background-color: va(--hlx-text-color-secondary);
-      // border-color: #adadad;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-      &.--border-bottom {
-        color: inherit !important;
-        background-color: transparent !important;
-        -webkit-box-shadow: none;
-        box-shadow: none;
-        // border: 2px solid transparent;
-
-        // border-color: transparent;
-      }
-    }
-    &:focus {
-      -webkit-box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-      box-shadow: inset 0px 0px 2px 1.3px rgba(0, 0, 0, 0.125);
-    }
-    // &:focus {
-    //   color: var(--hlx-text-color-primary);
-    //   background-color: #e6e6e6;
-    //   border-color: #8c8c8c;
-    // }
-  }
-
-
-
-  .hlx-switch-btn.focus,
-  .hlx-switch-btn:focus,
-  .hlx-switch-btn:hover {
-    color: var(--hlx-text-color-primary);
-    text-decoration: none;
-    z-index: 0;
-  }
-
-  &,
-  &-vertical {
-    position: relative;
-    display: flex;
-    flex-wrap: nowrap;
-
-    width: 100%;
-    // flex-wrap: wrap;
-    align-items: center;
-    align-content: center;
-  }
-
-  .hlx-switch-btn-default.active,
-  .hlx-switch-btn-default:active,
-  .open > .dropdown-toggle.hlx-switch-btn-default {
-    color: var(--hlx-text-color-primary);
-    // background-color: va(--hlx-text-color-secondary);
-  }
-
-  .hlx-switch-btn-active {
-    background-color: var(--hlx-color-primary) !important;
-    color: white;
-    // border-color: #265e4b;
-    border-width: thin;
-
-    z-index: 5;
-    &:focus {
-      box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.125);
-    }
-    &.--border-bottom {
-      border-width: unset;
-
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      border-color: transparent !important ;
-      border-bottom-color: var(--hlx-color-primary) !important ;
-      // border-radius: 2.6px !important;
-      border-bottom-left-radius: 1.8px !important;
-      border-bottom-right-radius: 1.8px !important;
-      border: 2px solid;
-    }
-  }
-
-  .hlx-switch-btn-active:hover {
-    color: #fff;
-    background-color: var(--hlx-color-primary);
-    // border-color: #265e4b;
-    z-index: 5;
-    &.--border-bottom {
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      border-color: transparent;
-    }
-  }
-  .hlx-switch-btn-active.focus,
-  .hlx-switch-btn-active:focus {
-    color: white;
-    background-color: var(--hlx-color-primary);
-    // border-color: #265e4b;
-    &.--border-bottom {
-      color: var(--hlx-color-primary) !important;
-      background-color: transparent !important;
-      border-color: transparent;
-    }
-  }
-  & > .hlx-switch-btn:first-child:not(:last-child):not(.dropdown-toggle) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  & > .hlx-switch-btn:first-child {
-    margin-left: 0;
-  }
-  &-vertical > .hlx-switch-btn,
-  & > .hlx-switch-btn {
-    position: relative;
-    float: left;
-  }
-
-  & > .hlx-switch-btn:first-child:not(:last-child):not(.dropdown-toggle) {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  & > .hlx-switch-btn:first-child {
-    margin-left: 0;
-  }
-
-  .hlx-switch-btn.active.focus,
-  .hlx-switch-btn.active:focus,
-  .hlx-switch-btn.focus,
-  .hlx-switch-btn:active.focus,
-  .hlx-switch-btn:active:focus,
-  .hlx-switch-btn:focus {
-    outline: thin dotted;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-
-  & > .hlx-switch-btn.active,
-  & > .hlx-switch-btn:active,
-  & > .hlx-switch-btn:focus {
-    z-index: 2;
-  }
-}

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

@@ -1,241 +0,0 @@
-.pagination-container {
-  // display: grid;
-  // grid-template-columns: 200px auto;
-  align-items: center;
-  font-size: 14px !important;
-}
-tr:last-child {
-  td:first-child {
-    border-bottom-left-radius: 5px !important;
-  }
-  td:last-child {
-    border-bottom-right-radius: 5px !important;
-  }
-}
-td.fixed-column-left {
-  position: sticky !important;
-  z-index: 250 !important;
-  left: 0 !important;
-  background: white;
-  box-shadow: inset -8px 0px 12px -16px #222222;
-  text-overflow: ellipsis;
-  // overflow: hidden;
-  white-space: nowrap;
-}
-th.fixed-column-left {
-  position: sticky !important;
-  z-index: 300 !important;
-  left: 0 !important;
-  background: white;
-  box-shadow: inset -8px 0px 12px -16px #222222;
-  text-overflow: ellipsis;
-  // overflow: hidden;
-  white-space: nowrap;
-}
-td.fixed-column-right {
-  position: sticky !important;
-  z-index: 250 !important;
-  right: 0 !important;
-  background: white;
-  box-shadow: inset 8px 0px 12px -16px #222222;
-  text-overflow: ellipsis;
-  // overflow: hidden;
-  white-space: nowrap;
-}
-th.fixed-column-right {
-  position: sticky !important;
-  z-index: 300 !important;
-  right: 0 !important;
-  background: white;
-  box-shadow: inset 8px 0px 12px -16px #222222;
-  text-overflow: ellipsis;
-  // overflow: hidden;
-  white-space: nowrap;
-}
-
-.table-v2-container {
-  // height: 100%;
-  .hlxTableV2 {
-    thead .table-v2-merge-head th {
-      max-height: 40px !important;
-      z-index: 260;
-      white-space: nowrap;
-    }
-    thead .table-v2-head th {
-      max-height: 40px !important;
-      z-index: 260;
-      white-space: nowrap;
-    }
-  }
-}
-// ----------------------------------------- Basic table css -----------------------------------------
-.hlxTableV2 {
-  border-collapse: separate !important;
-  border-spacing: 0;
-  width: 100%;
-  display: block;
-  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;
-  }
-}
-
-// ----------------------------------------- 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;
-  }
-}
-
-.verticalBorder {
-  th,
-  td {
-    border-right: 1px solid #d8d8d8;
-  }
-  th:last-child,
-  td:last-child {
-    border-right: none;
-  }
-}
-
-.horizontalBorder {
-  td {
-    border-bottom: 1px solid #d8d8d8;
-  }
-  tr:last-child td {
-    border-bottom: none;
-  }
-}
-
-// ----------------------------------------- Borders css -----------------------------------------
-.rowHover {
-  tr:hover {
-    background: #e4fff5;
-  }
-}
-
-// ----------------------------------------- Theme css -----------------------------------------
-.lightTheme {
-  th {
-    background: white;
-  }
-}
-.primaryTheme {
-  th {
-    background: #54bd95;
-    color: black;
-  }
-}
-.greyTheme {
-  th {
-    background: #edecec;
-    color: black;
-  }
-}
-
-// ----------------------------------------- striped row css -----------------------------------------
-
-.stripedRow {
-  tr:nth-child(even) {
-    background: #e4fff5;
-  }
-}
-
-// --------------------------------------------Sort-icon ---------------------------------------------------
-.table-head {
-  display: flex;
-  .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;
-    }
-
-    i {
-      font-size: 12px;
-      margin-left: 5px;
-      cursor: pointer;
-      &:hover {
-        color: var(--hlx-color-primary-dark);
-      }
-    }
-  }
-}
-
-.sorting-icon {
-  color: #265e4b;
-}
-
-.icon-vertical-dots {
-  font-size: 20px;
-  position: relative;
-  cursor: pointer;
-  &:hover {
-    background-color: var(--hlx-color-primary-light);
-    border-radius: 20px;
-  }
-}
-
-.icon-gear {
-  font-size: 24px;
-  cursor: pointer;
-}
-
-.action-gear {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.example-2-style {
-  margin-top: -116px;
-  margin-left: -65px;
-  position: relative;
-}