halleyx-ui-framework 1.0.4

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

@@ -0,0 +1,101 @@
+.parent {
+    display: none;
+}
+.parent:first-child {
+    display: block;
+}
+.db-row {
+    display: flex;
+    width: 100%;
+    // height: 60px;
+    i {
+        cursor: pointer;
+    }
+}
+
+#other {
+    height: 40px;
+    display: flex;
+    align-items: center;
+}
+
+#obj.db-row {
+    min-height: 40px;
+}
+
+#obj.db-row:not(:first-of-type) {
+    margin-left: -40px;
+  }
+
+  .array-string {
+    display: flex;
+    margin-top: 6px;
+  }
+
+  .array-index {
+    display: flex;
+  }
+.div-with-arrow {
+    margin-left: 4px;
+    margin-top: 8px;
+    // margin-bottom: 16px;
+}
+
+.colon-key {
+    display: flex;
+    width: 150px !important;
+    word-break: break-all;
+    margin-right: 20px;
+}
+
+#other {
+    padding: 4px;
+    border-radius: 5px;
+}
+#other:hover {
+    background: var(--hlx-color-primary-lighter);
+    .enable-edit{
+        margin-left: 1rem;
+        margin-bottom: 3px;
+        display: flex !important;
+    }
+}
+
+.array-index-parent:has(.array-index) {
+    border-right: 1px solid #d8d8d8;
+    padding-right: 4px;
+    margin-top: 6px;
+    margin-bottom: 16px;
+}
+.array-index-parent:has(.array-string) {
+    // border-right: 1px solid #d8d8d8;
+    // width: 150px;
+    word-break: break-all;
+  }
+
+  .colon-value {
+    word-break: break-all;
+    display: flex;
+    align-items: flex-end;
+    min-width: 250px;
+
+    .cancel-edit {
+        color: var(--error);
+        font-size: 1.5rem;
+        margin-left: 4px;
+    }
+    .icon-check-square-filled {
+        color: #54bd95;
+        font-size: 1.5rem;
+    }
+  }
+
+  #other.db-row {
+    .radio-container {
+        align-items: center;
+    }
+
+    .radio-checkmark {
+        margin-top: 4px;
+    }
+  }

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

@@ -0,0 +1,221 @@
+[id^="hlx-pagination-container-hlx-"] {
+  display: grid;
+  width: 100%;
+  justify-content: end;
+  p {
+    font-size: var(--hlx-font-content-size-sm);
+    min-width: max-content;
+  }
+  &.rows-per-page:not(.go-to) {
+    justify-content: space-between;
+    grid-template-columns: 70px auto;
+  }
+  .hlx-rows-per-page-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    & > p.rpp-title {
+      min-width: max-content;
+      // margin-right: 7%;
+    }
+    & > p.rpp-result {
+      min-width: max-content;
+      margin-left: 8px;
+    }
+  }
+  &.go-to:not(.rows-per-page) {
+    grid-template-columns: 1fr auto;
+    .hlx-go-to-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      align-items: center;
+      .go-to-wrapper {
+        margin-left: auto;
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        align-items: center;
+      }
+      .input-area {
+        width: 70px;
+      }
+    }
+  }
+  &.rows-per-page.go-to {
+    grid-template-columns: 70px 1fr auto;
+    .hlx-go-to-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      gap: 10px;
+      align-items: center;
+      .go-to-wrapper {
+        margin-left: auto;
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+        align-items: center;
+      }
+      .input-area {
+        width: 70px;
+      }
+    }
+  }
+  & .hlx-pagination {
+    // margin-left: auto;
+    display: flex;
+    flex-flow: row unwrap;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    user-select: none;
+    font-size: var(--hlx-font-content-size-sm);
+    line-height: 24px;
+    letter-spacing: 0.005em;
+    font-weight: 500;
+    gap: 4px;
+    .nav {
+      color: var(--hlx-color-primary);
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      // width: 2em;
+      min-width: 35px;
+      min-height: 35px;
+      user-select: none;
+      // height: 2em;
+      display: flex;
+      flex-direction: row;
+      // background: $grey;
+      &.prev-btn,
+      &.next-btn {
+        font-size: 14px;
+        font-weight: bold;
+        max-width: 35px;
+        min-height: 35px;
+        i {
+          font-weight: bold;
+          font-size: var(--hlx-icon-size-xs);
+        }
+        &:hover {
+          cursor: pointer;
+          background: var(--hlx-color-primary-light);
+          // color:$border-color-secondary;
+          // color: getCssVar('color', 'primary');
+        }
+      }
+      &.background {
+        background: rgba(var(--hlx-color-disable-rgb), 0.6);
+      }
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      &:hover {
+        cursor: pointer;
+        background: var(--hlx-color-primary-light);
+
+        // color: getCssVar('color', 'primary');
+      }
+    }
+    .nav.disabled {
+      color: var(--hlx-border-color);
+    }
+    .page-btn {
+      /* padding: 10px; */
+      /* border: 1px solid; */
+      // width: 2em;
+
+      // height: 2em;
+      user-select: none;
+
+      min-width: 35px;
+      min-height: 35px;
+      display: flex;
+      justify-items: flex-start;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      // box-shadow: 1px 2px 11px -7px;
+      /* background: getCssVar('color', 'primary'); */
+      &.background {
+        background: rgba(var(--hlx-color-disable-rgb), $alpha: 0.4);
+      }
+      i {
+        font-size: var(--hlx-icon-size-sm);
+      }
+      &.hide {
+        display: none;
+      }
+      &.higlight {
+        border-radius: 50%;
+        // border:1px solid #f97a19; -->
+        // display: block;
+        background-color: var(--hlx-color-primary);
+        cursor: pointer;
+        // box-shadow: 0px 1px 8px -4px black;
+
+        color: white;
+      }
+      &.dec::before,
+      &.inc::before {
+        content: "...";
+      }
+      &:hover:not(.higlight) {
+        border-radius: 50%;
+        // border:1px solid #f97a19; -->
+        background: var(--hlx-color-primary-light);
+        cursor: pointer;
+        color: var(--hlx-text-color-primary);
+        transform: scale(1.01);
+      }
+      .dec-icon {
+        // font-size: 0.7rem;
+        display: none;
+      }
+      &.dec:hover {
+        .dec-icon {
+          display: block;
+        }
+        &::before {
+          content: "";
+        }
+      }
+      &.inc:hover {
+        .dec-icon {
+          display: block;
+        }
+        &::before {
+          content: "";
+        }
+      }
+    }
+  }
+}
+@media screen and (max-width: 800px) {
+  [id^="hlx-pagination-container-hlx-"] {
+    &.rows-per-page:not(.go-to) {
+      grid-template-columns: 70px;
+      grid-template-rows: 1fr 1fr;
+      gap: 14px;
+    }
+  }
+}
+@media screen and (max-width: 900px) {
+  [id^="hlx-pagination-container-hlx-"] {
+    &.rows-per-page:not(.go-to) {
+      grid-template-columns: 70px;
+      grid-template-rows: 1fr 1fr;
+      gap: 14px;
+    }
+    &.rows-per-page.go-to {
+      grid-template-columns: 70px auto;
+      grid-template-rows: auto auto;
+      gap: 23px;
+      justify-content: left;
+      .hlx-rows-per-page-container {
+        width: 70px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+
+// @import "./source_content", "./variables", "./component_layout", "./alert",
+//   "./badge", "./dottedPagination", "./buttons", "./importProgress", "./pagination", 
+//   "./sidebar", "./slideControl", "./stepControl", "./tree", "./cards", "./tabs",
+//   "./draggables", "./inputfields", "./inputitems","./loaders","./select","./modalwindow",
+//   "./tooltip","./table","./search", "./fileupload","./accordion", "./timeline",'./divider','./label',
+//   "./rating",'./dashboard','./breadcrumb','./tag','./signup','./texteditor','./treeSelect', './errorpage', './dataview', './speeddial','./imagegallery','./toggleButton','./colorpalette','./calendar',
+//   './newtable','./drawer','fonts';

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

@@ -0,0 +1,41 @@
+.rating-group {
+  display: inline-flex;
+  height: 40px;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 7px;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--hlx-icon-size-lg);
+}
+
+//   /* make hover effect work properly in IE */
+//   .rating__icon {
+//     pointer-events: none;
+//   }
+.full-star[read="false"] {
+  // background-color: red;
+  .rating__label:hover:not([class="rated"]) {
+    display: block;
+    // background: #000;
+  }
+}
+.rate-star-wrapper {
+  margin-left: -4%;
+}
+
+/* hide radio inputs */
+
+.rating__input {
+  position: absolute !important;
+  left: -9999px !important;
+}
+
+/* set icon padding and size */
+.rating__label {
+  cursor: pointer;
+  color: var(--hlx-color-primary);
+  // padding: 0 0.1em;
+  font-size: var(--hlx-icon-size-lg);
+  display: inline;
+}

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

@@ -0,0 +1,15 @@
+::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 20px;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #bdbdbd;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #bdbdbd;
+  }

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

@@ -0,0 +1,195 @@
+
+
+ .box{
+  margin: 10px;
+ }
+ .search-container {
+  font-family: var(--hlx-font-type-content);
+    width: 100%;
+    // margin-right: 50px;
+    height: 38px;
+    .search-1 {
+      // margin: 30px;
+      padding: 9px 12px 9px 12px;
+      background: white;
+      height: 38px;
+      width: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      border: solid 1px var(--hlx-border-color);
+      border-radius: 20px;
+      &:hover {
+        border: 1px solid var(--hlx-color-primary);
+      }
+      input {
+        display: block;
+        width: 90%;
+        height: 20px;
+        color: var(--hlx-text-color-primary);
+        background: transparent;
+        transition: all 0.3s ease;
+        // padding: 6px 0 6px 0px;
+        outline: none;
+        border: none;
+        font-size: 14px
+      }
+input::placeholder {
+  font-size: 14px
+}
+
+  
+      .icon-1 {
+        .icon-search-regular {
+          font-size: var(--hlx-icon-size-md);
+          color: var(--hlx-border-color);
+        }
+      }
+      
+    }
+    .search-1:hover > div > .icon-search-regular{
+      color: var(--hlx-color-primary)
+    }
+
+    .search-1 >input:focus + div > .icon-search-regular{
+      color: var(--hlx-color-primary-dark)
+    }
+    .search-1:focus-within{
+      border: 1px solid var(--hlx-color-primary-dark);
+    }
+  
+    .search-2 {
+      // margin: 30px;
+      width: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+  
+      input {
+        display: block;
+        width: 95%;
+        height: 38px;
+        color: var(--hlx-text-color-primary);
+        background: transparent;
+        transition: all 0.3s ease;
+        padding: 10px 12px;
+        font-size: 14px;
+        outline: none;
+        border: solid 1px var(--hlx-border-color);
+        border-radius: 20px;
+        &:hover {
+          border: 1px solid var(--hlx-color-primary);
+        }
+        &:focus {
+          border: 1px solid var(--hlx-color-primary-dark);
+        }
+      }
+      input:hover + label{
+        background: var(--hlx-color-primary)
+      }
+      input:focus + label{
+        background: var(--hlx-color-primary-dark)
+      }
+      .icon-2 {
+        width: 38px;
+        height: 38px;
+        margin-left: 10px;
+        border-radius: 100%;
+        background: var(--hlx-border-color-dark);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon-search-regular {
+          font-size: var(--hlx-icon-size-sm);
+          color: #fff;
+        }
+  
+      }
+    }
+  
+  
+    .search-3 {
+      // margin: 30px;
+      width: 100%;
+      position: relative;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+  
+      input {
+        display: block;
+        width: 95%;
+        height: 38px;
+        color: var(--hlx-text-color-primary);
+        background: transparent;
+        transition: all 0.3s ease;
+        padding: 10px 12px;
+        font-size: 14px;
+        outline: none;
+        border: solid 1px var(--hlx-border-color);
+        border-right: none;
+        border-radius: 20px 0 0 20px;
+        &:hover {
+          border: 1px solid var(--hlx-color-primary);
+          border-right: none;
+        }
+        &:focus {
+          border: 1px solid var(--hlx-color-primary-dark);
+          border-right: none;
+        }
+      }
+      input:hover + img{
+        content:url('https://components.halleyx.com/img/search3_hover.svg');
+      }
+      input:focus + img{
+        content:url('https://components.halleyx.com/img/search3_active.svg');
+      }
+
+      img{
+        position: relative;
+        right: 12px;
+      }
+
+      .search-3img{
+        content:url('https://components.halleyx.com/img/search3.svg');
+      }
+  // .mycircle{
+  //   width: 38px;
+  //   height: 38px;
+  //   border: 1px solid var(--hlx-border-color);
+  //   border-radius: 50%;
+  //   border-bottom-color: transparent;
+  //   border-right-color: transparent;
+  //   position: relative;
+  //   right: 20px;
+  //   transform: rotate(-46deg);
+  // }
+      .icon-3 {
+        width: 38px;
+        height: 38px;
+        position: relative;
+    right: 45px;
+        // margin-left: 10px;
+        border-radius: 100%;
+        background: var(--hlx-border-color);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .icon-search-regular {
+          font-size: var(--hlx-icon-size-md);
+          color: #fff;
+        }
+      }
+    }
+  }
+
+
+  input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  -webkit-appearance:none;
+}