halleyx-ui-framework 4.1.8 → 4.2.0

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

@@ -16,7 +16,7 @@
   transition: 0.5s;
 }
 
-[id^="navbar-"].hlx-sidebar-container {
+[id^='navbar-'].hlx-sidebar-container {
   .nav-items {
     max-height: 75%;
     overflow: none auto;
@@ -132,7 +132,7 @@
       cursor: pointer;*/
 
         ::after {
-          content: "";
+          content: '';
           width: 50px;
           height: 50px;
         }
@@ -414,7 +414,6 @@
         align-content: flex-start;
         justify-content: flex-start;
         align-items: flex-start;
-
         li {
           flex-shrink: 0;
         }

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

@@ -1,150 +1,140 @@
-@mixin margin($margin-top:0,$margin-right:0,$margin-down:0,$margin-left:0){
-    margin: $margin-top $margin-right $margin-down $margin-left;
-} 
+@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;
-    
+  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;
-                }
-
-        
+.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);
-
+  width: 100%;
+  height: 98%;
+  display: flex;
+  padding: 0;
+  background-color: var(--hlx-border-color-lighter);
 
-&>.hlx-signup-left-container{
+  & > .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%;
-            }
+    .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%;
-            }
-
+      }
+      .img-collage {
+        margin-top: 25px;
+        max-height: 75%;
+        width: 90%;
+        margin-left: 45px;
+        img {
+          width: 100%;
         }
+      }
     }
-    
-    }
+  }
 
-&>.dividers{
+  & > .dividers {
     width: 7%;
-    display:flex;
-    flex-direction:column;
-    
+    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);
+    .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;
+    .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; 
+    .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%;
+    .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

@@ -24,6 +24,7 @@
 
   .range-slider__range {
     -webkit-appearance: none;
+    appearance: none;
     // width: calc(100% - (#{$range-label-width + 13px}));
     width: 100%;
     height: $range-track-height;

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

@@ -1,14 +1,14 @@
-.feature-title{
-    color: #606266;
+.feature-title {
+  color: #606266;
+}
+.feature-content {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  code {
+    margin: 0;
+    border-radius: 4px;
+    padding: 0.15rem 0.5rem;
+    color: #303133;
+    background-color: #f5f7fa;
   }
-  .feature-content{
-        font-size: 0.875rem;
-      line-height: 1.25rem;
-      code{
-            margin: 0;
-      border-radius: 4px;
-      padding: .15rem .5rem;
-      color: #303133;
-      background-color: #f5f7fa;
-      }
-  }
+}

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

@@ -1,30 +1,29 @@
 @keyframes pop-in {
-    0% { 
-        transform: scale(0);
-    }
-    100% { 
-        transform: scale(1);
-    }
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
 }
 @keyframes pop-out {
-    0% {
-        transform: scale(1);
-    }
-    100% {
-        transform: scale(0);
-    }
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
 }
 
 @mixin circle($size) {
-  display: inline-block;  
+  display: inline-block;
   border-radius: 50%;
   @if $size == small {
     width: 38px;
     height: 38px;
     font-size: var(--hlx-icon-size-sm);
     line-height: 60px;
-  }
-  @else if $size == tiny {
+  } @else if $size == tiny {
     width: 38px;
     height: 38px;
     font-size: var(--hlx-icon-size-sm);
@@ -33,168 +32,158 @@
 }
 
 .speed-dial {
-    text-align: center;
-    display: inline-block;
-    width: 38px;
-    font-family: var(--hlx-font-type-content);
-    div,
-    div:hover,
-    div:active,
-    div:visited
-    div:focus 
-    {
-        text-decoration: none;
+  text-align: center;
+  display: inline-block;
+  width: 38px;
+  font-family: var(--hlx-font-type-content);
+  div,
+  div:hover,
+  div:active,
+  div:visited div:focus {
+    text-decoration: none;
+  }
+  .toggle {
+    cursor: pointer;
+    @include circle(small);
+    display: flex;
+    background: var(--hlx-color-primary);
+    border: none;
+    margin: 8px 0;
+    .circle {
+      i {
+        color: #fff;
+      }
     }
-    .toggle {
-        cursor: pointer;
-        @include circle(small);
-        display: flex;
-        background: var(--hlx-color-primary);
-        border: none;
-        margin: 8px 0;
-        .circle{
-            i{
-
-                color: #fff;
-            }
+  }
+  &:hover .dials .circle {
+    display: flex;
+    animation: pop-in 0.3s ease both;
+  }
+  .dials {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .circle {
+      cursor: pointer;
+      @include circle(tiny);
+      display: flex;
+      margin: 8px 0;
+      transform: scale(0);
+      background: #fff;
+      border: 1px solid var(--hlx-color-primary);
+      display: none;
+      // animation: pop-out .3s ease both;
+      &:hover {
+        background: var(--hlx-color-primary-light);
+        border: 1px solid var(--hlx-color-primary-dark);
+        i {
+          color: var(--hlx-color-primary-dark);
         }
+      }
     }
-    &:hover .dials .circle {
-        display: flex;
-        animation: pop-in .3s ease both;
-    }
-    .dials {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        .circle {
-            cursor: pointer;
-            @include circle(tiny);
-            display: flex;
-            margin: 8px 0;
-            transform: scale(0);
-            background: #fff;
-            border: 1px solid var(--hlx-color-primary);
-            display: none;
-            // animation: pop-out .3s ease both;
-            &:hover{
-                background: var(--hlx-color-primary-light);
-                border: 1px solid var(--hlx-color-primary-dark);
-                i{
-
-                    color: var(--hlx-color-primary-dark)
-                }
-            }
-        }
-        .circle.pop-in {
-            animation: pop-in .3s ease both;
-            &:hover{
-                background: var(--hlx-color-primary-light);
-                border: 1px solid var(--hlx-color-primary-dark);
-                i{
-
-                    color: var(--hlx-color-primary-dark)
-                }
-            }
-        }
-        @for $i from 0 through 6 {
-             li:nth-child(#{$i}) a { 
-                 animation-delay: $i * 0.1s; 
-             }
+    .circle.pop-in {
+      animation: pop-in 0.3s ease both;
+      &:hover {
+        background: var(--hlx-color-primary-light);
+        border: 1px solid var(--hlx-color-primary-dark);
+        i {
+          color: var(--hlx-color-primary-dark);
         }
+      }
     }
+    @for $i from 0 through 6 {
+      li:nth-child(#{$i}) a {
+        animation-delay: $i * 0.1s;
+      }
+    }
+  }
 }
 .speed-dial-horizontal {
-    font-family: var(--hlx-font-type-content);
-    text-align: center;
+  font-family: var(--hlx-font-type-content);
+  text-align: center;
+  display: flex;
+  flex-direction: row;
+  div,
+  div:hover,
+  div:active,
+  div:visited div:focus {
+    text-decoration: none;
+  }
+  .toggle {
+    cursor: pointer;
+    @include circle(small);
     display: flex;
-    flex-direction: row;
-    div,
-    div:hover,
-    div:active,
-    div:visited
-    div:focus 
-    {
-        text-decoration: none;
+    background: var(--hlx-color-primary);
+    border: none;
+    margin: 8px 8px 8px 0;
+    .circle {
+      i {
+        color: #fff;
+      }
     }
-    .toggle {
-        cursor: pointer;
-        @include circle(small);
-        display: flex;
-        background: var(--hlx-color-primary);
-        border: none;
-        margin: 8px 8px 8px 0;
-        .circle{
-            i{
-
-                color: #fff;
-            }
+  }
+  &:hover .dials .circle {
+    display: flex;
+    animation: pop-in 0.3s ease both;
+  }
+  .dials {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .circle {
+      cursor: pointer;
+      @include circle(tiny);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 8px;
+      transform: scale(0);
+      background: #fff;
+      border: 1px solid var(--hlx-color-primary);
+      display: none;
+      animation: pop-out 0.3s ease both;
+      &:hover {
+        background: var(--hlx-color-primary-light);
+        border: 1px solid var(--hlx-color-primary-dark);
+        i {
+          color: var(--hlx-color-primary-dark);
         }
+      }
     }
-    &:hover .dials .circle {
-        display: flex;
-        animation: pop-in .3s ease both;
-    }
-    .dials {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-        .circle {
-            cursor: pointer;
-            @include circle(tiny);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 8px;
-            transform: scale(0);
-            background: #fff;
-            border: 1px solid var(--hlx-color-primary);
-            display: none;
-            animation: pop-out .3s ease both;
-            &:hover{
-                background: var(--hlx-color-primary-light);
-                border: 1px solid var(--hlx-color-primary-dark);
-                i{
-
-                    color: var(--hlx-color-primary-dark)
-                }
-            }
-        }
-        .circle.pop-in {
-            animation: pop-in .3s ease both;
-            &:hover{
-                background: var(--hlx-color-primary-light);
-                border: 1px solid var(--hlx-color-primary-dark);
-                i{
-
-                    color: var(--hlx-color-primary-dark)
-                }
-            }
-        }
-        @for $i from 0 through 6 {
-             li:nth-child(#{$i}) a { 
-                 animation-delay: $i * 0.1s; 
-             }
+    .circle.pop-in {
+      animation: pop-in 0.3s ease both;
+      &:hover {
+        background: var(--hlx-color-primary-light);
+        border: 1px solid var(--hlx-color-primary-dark);
+        i {
+          color: var(--hlx-color-primary-dark);
         }
+      }
+    }
+    @for $i from 0 through 6 {
+      li:nth-child(#{$i}) a {
+        animation-delay: $i * 0.1s;
+      }
     }
+  }
 }
 
-.ic{
-    color: #fff !important;
-    font-size: var(--hlx-icon-size-sm) !important;
+.ic {
+  color: #fff !important;
+  font-size: var(--hlx-icon-size-sm) !important;
 }
 
-.ico{
-    i{
-        color: var(--hlx-color-primary);
-        font-size:var(--hlx-icon-size-sm);
-    }
-}
+.ico {
+  i {
+    color: var(--hlx-color-primary);
+    font-size: var(--hlx-icon-size-sm);
+  }
+}