halleyx-ui-framework 5.4.2 → 5.4.4

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

@@ -0,0 +1,244 @@
+[id^="hlx-pagination-container-hlx-"] {
+  // display: grid;
+  // width: 100%;
+  // justify-content: end;
+  .hlx-pagination-input-value-hidden{
+    display: none;
+  }
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 0.875em;
+  justify-content: space-between;
+  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;
+    flex-wrap: wrap;
+    & > .hlx-select-container {
+      width: 60px;
+    }
+    & > p.rpp-title {
+      min-width: max-content;
+      // margin-right: 7%;
+    }
+    & > p.rpp-result {
+      min-width: max-content;
+      // margin-left: 8px;
+    }
+  }
+  .pagination-and-goto {
+    display: flex;
+    align-items: center;
+    &.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;
+        }
+      }
+    }
+    & .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;
+        max-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;
+          min-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');
+          }
+          // & > i:last-child {
+          // margin-left: -26px;
+          // }
+        }
+        &.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 {
+          cursor: default;
+          .dec-icon {
+            display: block;
+          }
+          &::before {
+            content: "";
+          }
+        }
+        &.inc:hover {
+          cursor: default;
+
+          .dec-icon {
+            display: block;
+          }
+          &::before {
+            content: "";
+          }
+        }
+      }
+    }
+  }
+
+  &.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;
+      }
+    }
+  }
+}
+// @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: 740px) {
+  [id^="hlx-pagination-container-hlx-"] {
+    &.rows-per-page:not(.go-to) {
+      grid-template-columns: auto;
+      grid-template-rows: auto;
+      gap: 14px;
+    }
+    &.rows-per-page.go-to {
+      grid-template-columns: 1fr 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,191 @@
+.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;
+    justify-content: space-between;
+
+    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;
+      margin-right: 10px;
+      &: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;
+}
+