halleyx-ui-framework 5.4.0 → 5.4.2

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

@@ -1,467 +0,0 @@
-// *,
-// ::before,
-// ::after {
-// }
-
-#sidebar-body {
-  --sub-color: #b6cefc;
-  --normal-font-size: 1rem;
-  --small-font-size: 0.875rem;
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 2rem 0 0 6.75rem;
-  font-family: var(--hlx-font-type-content);
-  font-size: 14px;
-  transition: 0.5s;
-}
-
-[id^='navbar-'].hlx-sidebar-container {
-  .nav-items {
-    max-height: 75%;
-    overflow: none auto;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    justify-content: center;
-    align-items: center;
-  }
-  .config-nav {
-    margin-top: auto;
-    max-height: 25%;
-    overflow: none auto;
-  }
-  .logo-container {
-    display: flex;
-    grid-template-columns: -webkit-max-content -webkit-max-content;
-    grid-template-columns: max-content max-content;
-    flex-direction: column;
-    align-items: flex-start;
-    &.extended {
-      img {
-        /* position: absolute; */
-        cursor: pointer;
-        max-width: 100%;
-        max-height: 100%;
-        animation: logoopacitor 1s ease-in-out;
-      }
-      @keyframes logoopacitor {
-        0% {
-          opacity: 0;
-        }
-        30% {
-          opacity: 0.1;
-        }
-        50% {
-          opacity: 0.35;
-        }
-        70% {
-          opacity: 0.75;
-        }
-        100% {
-          opacity: 1;
-        }
-      }
-    }
-    &.collapsed {
-      img {
-        width: 30px;
-        //  margin-top: 10px;
-        cursor: pointer;
-        //animation: collapsed 1s ease-out;
-        image-rendering: auto;
-      }
-    }
-    @keyframes collapsed {
-      50% {
-        opacity: 0.8;
-      }
-      100% {
-        max-width: 50px;
-        opacity: 1;
-      }
-    }
-    span {
-      transition: 1s;
-      cursor: pointer;
-    }
-  }
-
-  h1 {
-    margin: 0;
-  }
-
-  ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  a {
-    text-decoration: none;
-  }
-  .nav {
-    display: flex;
-    height: 83%;
-    flex-direction: column;
-    justify-content: space-between;
-    overflow: hidden;
-  }
-
-  .nav_brand {
-    width: 220px;
-    height: 35px;
-    margin: 1.4rem 10px;
-    display: flex;
-    grid-template-columns: -webkit-max-content -webkit-max-content;
-    grid-template-columns: max-content max-content;
-    flex-direction: row-reverse;
-    align-items: center;
-    justify-content: center;
-    align-content: center;
-    .collapsible .toggler {
-      // position: relative;
-      i {
-        display: none;
-        /* position: absolute;
-      font-size: 1rem;
-
-      bottom: 6px;
-      left: 10px;
-      cursor: pointer;*/
-
-        ::after {
-          content: '';
-          width: 50px;
-          height: 50px;
-        }
-      }
-    }
-  }
-
-  .nav_toggle {
-    font-size: 1.25rem;
-    padding: 0.75rem;
-    cursor: pointer;
-  }
-
-  .nav_logo {
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 3rem;
-  }
-
-  .nav_link {
-    display: flex;
-    grid-template-columns: -webkit-max-content -webkit-max-content;
-    grid-template-columns: max-content max-content;
-    align-items: center;
-    -moz-column-gap: 0.75rem;
-    column-gap: 0.75rem;
-    padding: 0.75rem;
-    color: white;
-    border-radius: 0.5rem;
-    // margin-bottom: 1rem;
-    transition: 0.3s;
-    cursor: pointer;
-    i {
-      // font-size: 1.5rem;
-      font-size: 1.6rem;
-    }
-  }
-
-  .nav_link:hover {
-    // background-color: var(--hlx-color-primary);
-    color: var(--hlx-color-primary);
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  .nav_icon {
-    font-size: 1.25rem;
-  }
-
-  .nav_name {
-    // font-size: var(--small-font-size);
-    font-size: 14px;
-  }
-
-  .expander {
-    width: calc(var(--nav-width) + 9.25rem);
-  }
-
-  .body-pd {
-    padding: 2rem 0 0 16rem;
-  }
-
-  // .active {
-  //   // background-color: var(--hlx-color-primary);
-  //     // background-color: red;
-  //     &::before{
-  //       content: "";
-  //       border: solid var(--hlx-color-primary);
-  //       position: absolute;
-  //       top: 1%;
-  //       left: -7%;
-  //       /* height: 4%; */
-  //       bottom: 91%;
-
-  //     }
-
-  // }
-
-  .collapse {
-    grid-template-columns: 20px max-content 1fr;
-  }
-
-  .collapse_link {
-    justify-self: flex-end;
-    transition: 0.5s;
-  }
-
-  .collapse_menu {
-    display: none;
-    padding: 0.75rem 2.25rem;
-  }
-
-  .collapse_sublink {
-    color: var(--sub-color);
-    font-size: var(--small-font-size);
-  }
-
-  .collapse_sublink:hover {
-    color: white;
-  }
-
-  .showCollapse {
-    display: block;
-    transition: 5s;
-  }
-
-  .rotate {
-    transform: rotate(180deg);
-    transition: 1s;
-  }
-
-  &.hlx-sidebar-container {
-    user-select: none;
-    position: relative;
-    top: 0;
-    left: 0;
-    width: var(--nav-width);
-    padding: 0.8rem 0.6rem;
-    background-color: var(--hlx-color-sidebar);
-    color: white;
-    height: 100vh;
-    width: 260px;
-    transition: 0.45s ease-in-out;
-    z-index: var(--z-fixed);
-    .nav_brand {
-      position: relative;
-      .toggler i {
-        display: none;
-      }
-    }
-
-    &.collpasible.toggler {
-      i {
-        display: inline-block;
-      }
-      &:hover {
-        background: var(--hlx-color-primary);
-      }
-      i {
-        position: absolute;
-
-        font-size: 0.5rem;
-        // color: #969393;
-        color: white;
-        cursor: pointer;
-      }
-    }
-    &.collapsible:not(.collapse-shrink):hover .toggler {
-      position: absolute;
-
-      width: 20px;
-      border-radius: 50%;
-      right: -13%;
-      top: 40%;
-      height: 20px;
-      display: flex;
-      background: var(--hlx-color-primary);
-      color: white;
-      align-content: center;
-      justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-direction: column;
-      box-shadow: 0 0 5px -2px black;
-      cursor: pointer;
-      i {
-        display: block;
-        position: absolute;
-
-        // font-size: var(--hlx-icon-size-xs);
-        font-size: 16px;
-        // color: #969393;
-        color: white;
-        cursor: pointer;
-      }
-      &:hover {
-        background: var(--hlx-color-primary);
-      }
-      &:hover i {
-        color: white;
-        font-weight: 900;
-      }
-    }
-    .nav {
-      // height: 100%;
-      .nav-items {
-        position: relative;
-        gap: 2px;
-        overflow: none auto;
-        display: flex;
-        height: 100%;
-        max-height: none;
-        flex-direction: column;
-        flex-wrap: wrap;
-        align-content: flex-start;
-        justify-content: flex-start;
-        align-items: flex-start;
-        li {
-          width: 100%;
-          transition: 0.15s cubic-bezier(1, -0.33, 0, 1.12);
-          &:has(a.active) {
-            border-left: 2px solid var(--hlx-color-primary);
-            // transition: .25s ease-in-out;
-            a {
-              color: var(--hlx-color-primary);
-            }
-          }
-          // &.active{
-          //   // background-color: red;
-          //   &::before{
-          //     content: "";
-          //     border: solid var(--hlx-color-primary);
-          //     position: absolute;
-          //     top: 1%;
-          //     left: -7%;
-          //     /* height: 4%; */
-          //     bottom: 91%;
-
-          //   }
-          // }
-          &.separator {
-            margin-top: auto;
-          }
-          & > i {
-            // font-size: 1.5rem;
-            font-size: 1.6rem;
-          }
-        }
-      }
-    }
-  }
-  &.hlx-sidebar-container.collapse-shrink {
-    height: 100vh;
-    width: 72px !important;
-    transition: 0.45s ease-in-out;
-    &.collapsible:hover .toggler {
-      position: absolute;
-      // transition: .62s cubic-bezier(0.65, 0.05, 0.36, 1);
-      width: 20px;
-      border-radius: 50%;
-      right: -39%;
-      top: 37%;
-      height: 20px;
-      display: flex;
-      background: var(--hlx-color-primary);
-      color: white;
-      align-content: center;
-      justify-content: center;
-      align-items: center;
-      flex-wrap: wrap;
-      flex-direction: column;
-      box-shadow: 0 0 5px -2px black;
-      cursor: pointer;
-      i {
-        display: block;
-        position: absolute;
-
-        // font-size: var(--hlx-icon-size-xs);
-        // color: #969393;
-        color: white;
-        cursor: pointer;
-      }
-      &:hover {
-        background: var(--hlx-color-primary);
-      }
-      &:hover i {
-        color: white;
-        font-weight: 900;
-      }
-    }
-    .nav {
-      // height: 89% !important;
-      .nav-items {
-        // max-height: 75%;
-        overflow: none auto;
-        display: flex;
-        box-sizing: border-box;
-        flex-direction: column;
-        flex-wrap: wrap;
-        align-content: flex-start;
-        justify-content: flex-start;
-        align-items: flex-start;
-        li {
-          flex-shrink: 0;
-        }
-      }
-    }
-    .nav_brand {
-      position: relative;
-      height: 35px;
-      width: 100%;
-      margin: 0.9rem 0px 1.1rem;
-      .collapsible .toggler {
-        transition: 0.62s cubic-bezier(0.65, 0.05, 0.36, 1);
-        right: -62.2%;
-        cursor: pointer;
-      }
-      // .logo-container {
-      //   i {
-      //     /* cursor: pointer;
-      //     font-weight: 600;
-      //     font-size: 2.5rem;*/
-      //   }
-      // }
-    }
-    .nav_link {
-      display: flex;
-      grid-template-columns: -webkit-max-content -webkit-max-content;
-      grid-template-columns: max-content max-content;
-      -moz-column-gap: 0.75rem;
-      column-gap: 0.75rem;
-      padding: 0.65rem;
-      color: white;
-      border-radius: 0.5rem;
-      // margin-bottom: 1rem;
-      transition: 0.3s;
-      cursor: pointer;
-      flex-direction: column;
-      flex-wrap: wrap;
-      align-items: center;
-      justify-content: center;
-      align-content: center;
-      i {
-        font-size: 2rem;
-      }
-    }
-    z-index: var(--z-fixed);
-    .shrink {
-      display: none;
-      transition: 1s ease-in-out;
-    }
-  }
-}

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

@@ -1,140 +0,0 @@
-@mixin margin(
-  $margin-top: 0,
-  $margin-right: 0,
-  $margin-down: 0,
-  $margin-left: 0
-) {
-  margin: $margin-top $margin-right $margin-down $margin-left;
-}
-@mixin flex-prop {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.right-container-signup {
-  background-color: #ffffff;
-  width: 50%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  .login-form {
-    width: 400px;
-    .sign-in-text {
-      display: flex;
-      width: 100%;
-      justify-content: flex-start;
-      h2 {
-        color: var(--hlx-text-color-primary);
-        font-weight: lighter;
-        margin-bottom: 15px;
-        font-size: 24px;
-      }
-    }
-    .forgot-pssword {
-      color: var(--hlx-text-color-primary);
-      font-size: 14px;
-      margin-bottom: 15px;
-      float: right;
-      cursor: pointer;
-      &:hover {
-        color: var(--hlx-color-primary);
-      }
-    }
-    .quotes-container {
-      font-size: 14px;
-      .black-frame {
-        color: var(--hlx-text-color-primary);
-        .signup-text {
-          text-decoration: none;
-          cursor: pointer;
-          color: var(--hlx-color-primary);
-        }
-      }
-    }
-
-    button {
-      width: 100%;
-      border-radius: 4px;
-      border: none;
-      margin-bottom: 15px;
-      padding: 10px 24px 10px 24px;
-      color: #fff;
-      background-color: var(--hlx-color-primary);
-      cursor: pointer;
-    }
-    // button:hover{
-    //     background-color: var(--hlx-color-primary)-dark;
-    //     color: var(--hlx-color-primary);
-    // }
-  }
-  .create-password {
-    margin-bottom: 15px;
-  }
-}
-
-.hlx-signup-container {
-  width: 100%;
-  height: 98%;
-  display: flex;
-  padding: 0;
-  background-color: var(--hlx-border-color-lighter);
-
-  & > .hlx-signup-left-container {
-    display: flex;
-    height: 100%;
-    width: 50%;
-    .left-sec {
-      width: 85%;
-      .header-logo {
-        height: 20%;
-        img {
-          min-width: 190px;
-          padding: 15px;
-          width: 65%;
-        }
-      }
-      .img-collage {
-        margin-top: 25px;
-        max-height: 75%;
-        width: 90%;
-        margin-left: 45px;
-        img {
-          width: 100%;
-        }
-      }
-    }
-  }
-
-  & > .dividers {
-    width: 7%;
-    display: flex;
-    flex-direction: column;
-
-    background-color: var(--hlx-border-color-lighter);
-    .dashedline-start {
-      height: 40%;
-      width: 45%;
-      margin: 0 12px -40px;
-      border-right: 1.8px dashed var(--hlx-color-primary);
-    }
-    .symbol-x {
-      color: var(--hlx-color-primary);
-      margin-left: 0;
-      font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
-      font-size: xx-large;
-    }
-    .symbol2-x {
-      color: var(--hlx-border-color-dark);
-      @include margin(10px, 0, 0, 50%);
-      font-family: 'Open Sans', 'Helvetica Neue', sans-serif;
-      font-size: xx-large;
-    }
-    .dashedline-end {
-      height: 58%;
-      margin: -45px 8px;
-      border-left: 1.97px dashed var(--hlx-color-primary);
-      width: 45%;
-    }
-  }
-}

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

@@ -1,117 +0,0 @@
-/* // Base Colors */
-// $shade-0: #fff !default;
-// $teal: #1abc9c !default;
-
-#hlx-slide-control-0003.range-slider {
-  //   margin: 60px 0 0 0%;
-  width: 100%;
-  /* // Range Slider */
-  $range-width: 100% !important;
-
-  $range-handle-color: var(--hlx-color-primary);
-  // $range-handle-color-hover: $teal !default;
-  $range-handle-size: 20px !default;
-
-  $range-track-color: var(--hlx-border-color-light) !default;
-  $range-track-height: 5px !default;
-
-  // $range-label-color: $shade-10 !default;
-  $range-label-width: 60px !default;
-
-  .range-slider {
-    width: $range-width;
-  }
-
-  .range-slider__range {
-    -webkit-appearance: none;
-    appearance: none;
-    // width: calc(100% - (#{$range-label-width + 13px}));
-    width: 100%;
-    height: $range-track-height;
-    border-radius: 5px;
-    background: $range-track-color;
-    /* outline: none; */
-
-    /* border:solid; */
-    padding: 0;
-    margin: 0;
-
-    /* // Range Handle */
-    &::-webkit-slider-thumb {
-      appearance: none;
-      width: $range-handle-size;
-      height: $range-handle-size;
-      border-radius: 50%;
-      border: 1px solid white;
-      background: $range-handle-color;
-      cursor: pointer;
-      transition: background 0.11s ease-in-out;
-
-      // &:hover {
-      //   /* background: $range-handle-color-hover; */
-      // }
-    }
-
-    //   &:active::-webkit-slider-thumb {
-    //     /* background: $range-handle-color-hover; */
-    //   }
-
-    &::-moz-range-thumb {
-      width: $range-handle-size;
-      height: $range-handle-size;
-      border: 0;
-      border-radius: 50%;
-      background: $range-handle-color;
-      cursor: pointer;
-      transition: background 0.5s ease-in-out;
-    }
-
-    //   &:active::-moz-range-thumb {
-    //     background: $range-handle-color-hover;
-    //   }
-
-    /* // Focus state */
-    //   &:focus {
-    //     &::-webkit-slider-thumb {
-    //       /* box-shadow: 0 0 0 3px $shade-0, 0 0 0 6px $teal; */
-    //     }
-    //   }
-  }
-
-  /* // Range Label */
-  /* .range-slider__value {
-                display: inline-block;
-                position: relative;
-                width: $range-label-width;
-                color: $shade-0;
-                line-height: 20px;
-                text-align: center;
-                border-radius: 3px;
-                background: $range-label-color;
-                padding: 5px 10px;
-                margin-left: 8px;
-                
-                &:after {
-                    position: absolute;
-                    top: 8px;
-    left: -7px;
-    width: 0;
-    height: 0;
-    border-top: 7px solid transparent;
-    border-right: 7px solid $range-label-color;
-    border-bottom: 7px solid transparent;
-    content: "";
-}
-} */
-
-  /* // Firefox Overrides */
-  ::-moz-range-track {
-    background: $range-track-color;
-    border: 0;
-  }
-
-  input::-moz-focus-inner,
-  input::-moz-focus-outer {
-    border: 0;
-  }
-}