halleyx-ui-framework 4.1.8 → 4.2.0

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

@@ -1,150 +1,148 @@
-
 @import './common/var.scss';
 
-.component-heading, .component-side-heading{
-    font-family: Quicksand;
-    margin:50px 0 20px 0;
+.component-heading,
+.component-side-heading {
+  font-family: Quicksand;
+  margin: 50px 0 20px 0;
 }
-.component-heading{
-    font-family: Quicksand;
-    margin: 50px 0 20px 0;
-    display: flex;
-    align-items: center;
-  &>img{
+.component-heading {
+  font-family: Quicksand;
+  margin: 50px 0 20px 0;
+  display: flex;
+  align-items: center;
+  & > img {
     width: 35px;
     object-fit: cover;
     margin-left: 5px;
     height: auto;
+  }
 }
+.component-side-heading {
+  margin: 30px 0 20px 0;
+  font-size: 20px;
 }
-.component-side-heading{
-    margin: 30px 0 20px 0;
-  font-size: 20px ;
-
-}
-.component-description{
-    font-size: 14px;
-    line-height: 2;
-    // text-indent: 50px;
+.component-description {
+  font-size: 14px;
+  line-height: 2;
+  // text-indent: 50px;
 }
-.icon-size{
-    list-style-type: none;
-    font-size: 14px;
-    
-    li{
-        font-family: OpenSans;
-        margin: 20px 20px 20px 0;
+.icon-size {
+  list-style-type: none;
+  font-size: 14px;
 
-    }
+  li {
+    font-family: OpenSans;
+    margin: 20px 20px 20px 0;
+  }
 }
-.notes{
-    padding: 10px;
-    font-size: 14px;    
-    width: 100%;
-    background-color: $primary-color-light;
-    border-left: 3px solid $primary-color-dark;
-    border-radius: 5px;
-    display: inline-flex;
-    .note-title{
-        font-weight: bold;
-    }
-    .note-body{
-        margin-left: 10px;
-        word-spacing: 2px;
-    }
+.notes {
+  padding: 10px;
+  font-size: 14px;
+  width: 100%;
+  background-color: $primary-color-light;
+  border-left: 3px solid $primary-color-dark;
+  border-radius: 5px;
+  display: inline-flex;
+  .note-title {
+    font-weight: bold;
+  }
+  .note-body {
+    margin-left: 10px;
+    word-spacing: 2px;
+  }
 }
-.component-example{
+.component-example {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 40px 0;
+  border: 1px solid $border-color;
+  border-radius: 5px;
+
+  .example-body {
+    height: 100%;
     display: flex;
+    padding: 20px;
+    gap: 15px;
+    overflow: inherit;
     flex-direction: column;
-    justify-content: space-between;
-    margin: 40px 0;
-    border: 1px solid $border-color;
-    border-radius: 5px;
+  }
+  .example-body1 {
+    height: 300px;
+    padding: 20px;
+    overflow: visible;
+  }
+  .example-body2 {
+    height: 66px;
+    padding: 20px;
+    display: flex;
+    justify-content: space-evenly;
+    overflow: visible;
+  }
+  .example-body4 {
+    // height: 66px;
+    padding: 20px;
+    display: flex;
+    justify-content: space-evenly;
+    overflow: visible;
+  }
+  .example-body3 {
+    height: 100%;
+    display: flex;
+    padding: 20px;
+    overflow: auto;
+    flex-direction: column;
+  }
 
-    .example-body{
-        height: 100%;
-        display: flex;
-        padding: 20px;
-        gap: 15px;
-        overflow: inherit;
-        flex-direction: column;
-    }
-    .example-body1{
-        height: 300px;
-        padding: 20px;
-        overflow: visible;
-    }
-    .example-body2{
-        height: 66px;
-        padding: 20px;
-        display: flex;
-        justify-content: space-evenly;
-        overflow: visible;
-    }
-    .example-body4{
-        // height: 66px;
-        padding: 20px;
-        display: flex;
-        justify-content: space-evenly;
-        overflow: visible;
+  .example-footer {
+    height: 40px;
+    display: flex;
+    padding: 0 20px;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid $border-color;
+    .icon-code-regular::before {
+      font-size: var(--hlx-icon-size-sm);
+      color: $font-color;
     }
-    .example-body3{
-        height: 100%;
-        display: flex;
-        padding: 20px;
-        overflow: auto;
-        flex-direction: column;
+    .icon {
+      font-size: 14px !important;
+      margin-left: 10px;
+      height: 30px;
+      width: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      &:hover {
+        cursor: pointer;
+        background-color: $primary-color-light;
+        color: $primary-color;
+      }
     }
-    
-    .example-footer{
-        height: 40px;
-        display: flex;
-        padding: 0 20px;
-        justify-content: flex-end;
-        align-items: center;
-        border-top: 1px solid $border-color;
-        .icon-code-regular::before{
-            font-size: var(--hlx-icon-size-sm);
-            color: $font-color;
-        }
-        .icon{
-            font-size: 14px !important;
-            margin-left: 10px;
-            height: 30px;
-            width: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 5px;
-            &:hover{
-                cursor: pointer;
-                background-color: $primary-color-light;
-                color: $primary-color;
-            }
-        }
-        .active-icon {
-            margin-left: 10px;
-            height: 30px;
-            width: 30px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 5px;
-            background-color: $primary-color;
-            color: white;
-            .icon-code-regular::before{
-                font-size: var(--hlx-icon-size-md);
-                color: white
-            }
-            &:hover{
-                cursor: pointer;
-                background-color: $primary-color-light;
-                color: $primary-color;
-            }
-        }
+    .active-icon {
+      margin-left: 10px;
+      height: 30px;
+      width: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 5px;
+      background-color: $primary-color;
+      color: white;
+      .icon-code-regular::before {
+        font-size: var(--hlx-icon-size-md);
+        color: white;
+      }
+      &:hover {
+        cursor: pointer;
+        background-color: $primary-color-light;
+        color: $primary-color;
+      }
     }
+  }
 }
 
-.hljs{
-    font-size: 14px !important;
+.hljs {
+  font-size: 14px !important;
 }

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

@@ -1,31 +1,30 @@
-.tempp-container{
-    color: var(--hlx-text-color-primary);
-    font-size: var(--hlx-font-content-size-sm);
-    position: relative;
-    width: fit-content;
-    margin-bottom: 8px;
+.tempp-container {
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size-sm);
+  position: relative;
+  width: fit-content;
+  margin-bottom: 8px;
 }
-.options-container{
-    // display: none;
-    // 
-    // top: 20px;
-    border: 1px solid var(--hlx-border-color);
-    position: absolute;
-    border-radius: 5px;
-        width: -moz-fit-content;
-      width: fit-content;
-      z-index: 2000;
-      background: var(--hlx-color-white);
-      max-height: 200px;
-      overflow-y: auto;
-      color: var(--hlx-text-color-primary);
-      font-family: var(--font-family);
+.options-container {
+  // display: none;
+  //
+  // top: 20px;
+  border: 1px solid var(--hlx-border-color);
+  position: absolute;
+  border-radius: 5px;
+  width: -moz-fit-content;
+  width: fit-content;
+  z-index: 2000;
+  background: var(--hlx-color-white);
+  max-height: 200px;
+  overflow-y: auto;
+  color: var(--hlx-text-color-primary);
+  font-family: var(--font-family);
 
-// top: 0;
-  
+  // top: 0;
 
-.option{
-    padding:0 0.75rem 0 0.75rem;
+  .option {
+    padding: 0 0.75rem 0 0.75rem;
     font-size: var(--hlx-font-content-size-sm);
     height: 38px;
     display: flex;
@@ -33,27 +32,27 @@
     align-items: center;
     justify-content: flex-start;
     cursor: pointer;
-    i{
-        font-size: var(--hlx-icon-size-xs);
-color: var(--hlx-text-color-primary);        }
-&:hover{
-    background:var(--hlx-color-primary-light);
-} 
-}
-    .selected-context-menu{
-        background: var(--hlx-color-primary);
-        color: var(--hlx-color-white);
-        i{
-            color: var(--hlx-color-white);
-        }
+    i {
+      font-size: var(--hlx-icon-size-xs);
+      color: var(--hlx-text-color-primary);
+    }
+    &:hover {
+      background: var(--hlx-color-primary-light);
+    }
+  }
+  .selected-context-menu {
+    background: var(--hlx-color-primary);
+    color: var(--hlx-color-white);
+    i {
+      color: var(--hlx-color-white);
+    }
 
-        &:hover{
-            background: var(--hlx-color-primary);
-            color: var(--hlx-color-white);
-            i{
-                color: var(--hlx-color-white);
-            }
-        }
-    }         
-        
+    &:hover {
+      background: var(--hlx-color-primary);
+      color: var(--hlx-color-white);
+      i {
+        color: var(--hlx-color-white);
+      }
+    }
+  }
 }

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

@@ -1,117 +1,115 @@
-  .flow-diagram-container{
-     display: flex;
-     width: 100vw;
-     height: 100vh;
-     background-color: rgb(226, 226, 226);
-     &-left{
-        width:6vw;
-        height: 100vh;
-        // background-color: #4e4;
+.flow-diagram-container {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgb(226, 226, 226);
+  &-left {
+    width: 6vw;
+    height: 100vh;
+    // background-color: #4e4;
+    display: flex;
+    flex-direction: column;
+    // justify-content: space-evenly;
+    #circle {
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      border: 1px solid black;
+      margin: 10px;
+      cursor: all-scroll;
+    }
+    #double-circle {
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      border: 1px solid black;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 10px;
+      cursor: all-scroll;
+      #normal-circle {
+        width: 30px;
+        height: 30px;
+        border-radius: 30px;
+        border: 1px solid black;
+      }
+    }
+    #dark-circle {
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      border: 2px solid black;
+      margin: 10px;
+      cursor: all-scroll;
+    }
+    #rectangle {
+      width: 40px;
+      height: 30px;
+      border-radius: 6px;
+      margin: 10px;
+      border: 1px solid black;
+      cursor: all-scroll;
+    }
+  }
+  &-right {
+    width: 90vw;
+    height: 100vh;
+    background-color: rgb(255, 255, 255);
+    overflow: scroll;
+    padding: 20px;
+    .dropzone {
+      width: 100vw;
+      height: 100vh;
+      background-color: white;
+      #circle {
+        width: 60px;
+        height: 60px;
+        border-radius: 60px;
+        border: 1px solid black;
+        // margin: 20px;
+        cursor: all-scroll;
+      }
+      #double-circle {
+        width: 60px;
+        height: 60px;
+        border-radius: 60px;
+        border: 1px solid black;
         display: flex;
-        flex-direction: column;
-        // justify-content: space-evenly;
-        #circle{
-            width: 40px;
-            height:40px;
-            border-radius: 40px;
-            border: 1px solid black;
-            margin: 10px;
-            cursor: all-scroll;
+        align-items: center;
+        justify-content: center;
+        // margin: 20px;
+        cursor: all-scroll;
+        #normal-circle {
+          width: 50px;
+          height: 50px;
+          border-radius: 50px;
+          border: 1px solid black;
         }
-        #double-circle{
-            width: 40px;
-            height:40px;
-            border-radius: 40px; 
-            border: 1px solid black;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 10px;
-            cursor: all-scroll;
-            #normal-circle{
-                width: 30px;
-                height:30px;
-                border-radius: 30px; 
-                border: 1px solid black; 
-                
-            }
-        }
-        #dark-circle{
-            width: 40px;
-            height:40px;
-            border-radius: 40px; 
-            border: 2px solid black;
-            margin: 10px;
-            cursor: all-scroll;
-        }
-        #rectangle{
-            width:40px;
-            height:30px;
-            border-radius: 6px;
-            margin:10px;
-            border:1px solid black;
-            cursor: all-scroll;
-        }
-     }
-     &-right{
-        width:90vw;
-        height:100vh;
-        background-color: rgb(255, 255, 255);
-        overflow: scroll;
-        padding: 20px;
-        .dropzone{
-            width:100vw;
-            height:100vh;
-            background-color: white;
-            #circle{
-                width: 60px;
-                height:60px;
-                border-radius: 60px;
-                border: 1px solid black;
-                // margin: 20px;
-                cursor: all-scroll;
-            }
-            #double-circle{
-                width: 60px;
-                height:60px;
-                border-radius: 60px; 
-                border: 1px solid black;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                // margin: 20px;
-                cursor: all-scroll;
-                #normal-circle{
-                    width: 50px;
-                    height:50px;
-                    border-radius: 50px; 
-                    border: 1px solid black; 
-                    
-                }
-            }
-            #dark-circle{
-                width: 60px;
-                height:60px;
-                border-radius: 60px; 
-                border: 2px solid black;
-                // margin: 20px;
-                cursor: all-scroll;
-            }
-            #rectangle{
-                width:140px;
-                height:80px;
-                border-radius: 6px;
-                margin:10px;
-                border:1px solid black;
-                cursor: all-scroll;
-            }
-            .addrect{
-                border: none;
-                border-radius: 8px;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-            }
-        }
-     }
-  }
+      }
+      #dark-circle {
+        width: 60px;
+        height: 60px;
+        border-radius: 60px;
+        border: 2px solid black;
+        // margin: 20px;
+        cursor: all-scroll;
+      }
+      #rectangle {
+        width: 140px;
+        height: 80px;
+        border-radius: 6px;
+        margin: 10px;
+        border: 1px solid black;
+        cursor: all-scroll;
+      }
+      .addrect {
+        border: none;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}