halleyx-ui-framework 1.0.4

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

@@ -0,0 +1,468 @@
+// *,
+// ::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

@@ -0,0 +1,150 @@
+@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

@@ -0,0 +1,116 @@
+/* // 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;
+    // 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;
+  }
+}