halleyx-ui-framework 11.7.94 → 11.7.95

package/dist/src/assets/styles/common/var.scss

@@ -0,0 +1,327 @@
+@use 'sass:map';
+@use 'sass:math';
+/*/* Element Chalk Variables */
+// @import '../mixins/config.scss';
+// @import '../mixins/functions.scss';
+@use '../mixins/config' as *;
+@use '../mixins/functions' as *;
+
+$--types: primary, success, warning, error, info;
+
+/* Color
+-------------------------- */
+$colors: () !default;
+$colors: map.deep-merge(
+  (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'dark': #265e4b,
+      'base': #54bd95,
+      'light': #a8dec9,
+      'lighter': #e4fff5,
+    ),
+    'success': (
+      'dark': #00954a,
+      'base': #02b55c,
+      'light': #dcf9ea,
+    ),
+    'warning': (
+      'dark': #ff9500,
+      'base': #f8a523,
+      'light': #f9ecd7,
+    ),
+    'error': (
+      'dark': #fc3232,
+      'base': #ff5050,
+      'light': #ffe8e8,
+    ),
+    'info': (
+      'dark': #0065b2,
+      'base': #2879b7,
+      'light': #d8edfc,
+    ),
+    'link': (
+      'dark': #143c5b,
+      'base': #2879b7,
+      'light': #d8edfc,
+    ),
+    'disable': (
+      'dark': #6f5c90,
+      'base': #ece9f1,
+      'text': #d0c9d6,
+    ),
+
+    'sidebar': (
+      'base': #001723,
+    ),
+  ),
+  $colors
+);
+
+$color-white: map.get($colors, 'white') !default;
+$color-black: map.get($colors, 'black') !default;
+/*Primary colors*/
+$color-primary-dark: map.get($colors, 'primary', 'dark') !default;
+$color-primary: map.get($colors, 'primary', 'base') !default;
+$color-primary-light: map.get($colors, 'primary', 'light') !default;
+$color-primary-lighter: map.get($colors, 'primary', 'lighter') !default;
+/*success colors*/
+$color-success-dark: map.get($colors, 'success', 'dark') !default;
+$color-success: map.get($colors, 'success', 'base') !default;
+$color-success-light: map.get($colors, 'success', 'light') !default;
+/*warning colors*/
+$color-warning-dark: map.get($colors, 'warning', 'dark') !default;
+$color-warning: map.get($colors, 'warning', 'base') !default;
+$color-warning-light: map.get($colors, 'warning', 'light') !default;
+/*error colors*/
+$color-error-dark: map.get($colors, 'error', 'dark') !default;
+$color-error: map.get($colors, 'error', 'base') !default;
+$color-error-light: map.get($colors, 'error', 'light') !default;
+/*info colors*/
+$color-info-dark: map.get($colors, 'info', 'dark') !default;
+$color-info: map.get($colors, 'info', 'base') !default;
+$color-info-light: map.get($colors, 'info', 'light') !default;
+/*link colors*/
+$color-link-dark: map.get($colors, 'link', 'dark') !default;
+$color-link: map.get($colors, 'link', 'base') !default;
+$color-link-light: map.get($colors, 'link', 'light') !default;
+/*disable colors*/
+$color-disable-dark: map.get($colors, 'disable', 'dark') !default;
+$color-disable: map.get($colors, 'disable', 'base') !default;
+$color-disable-text: map.get($colors, 'disable', 'text') !default;
+
+$color-sidebar: map.get($colors, 'sidebar', 'base') !default;
+
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': #191a15,
+    'secondary': #fbfbfb,
+    'disable': #d0c9d6,
+    'tree': #222f2b,
+  ),
+  $text-color
+);
+$text-color: () !default;
+$text-color: map.merge(
+  (
+    'primary': #191a15,
+    'secondary': #fbfbfb,
+    'disable': #d0c9d6,
+    'tree': #222f2b,
+  ),
+  $text-color
+);
+/*Borders*/
+$border-color: () !default;
+$border-color: map.merge(
+  (
+    '': #d8d8d8,
+    'dark': #a6a6a6,
+    'light': #ebebeb,
+    'lighter': #f7f7f7,
+  ),
+  $border-color
+);
+/*variables*/
+$--variables: () !default;
+$--variables: map.merge(
+  (
+    'border-radius': 5px,
+    'border-radius-round': 100px,
+  ),
+  $--variables
+);
+$line-height: () !default;
+$line-height: map.merge(
+  (
+    xs: 1.125rem,
+    sm: 1.25rem,
+    '': 1.5rem,
+    lg: 1.75rem,
+    xl: 1.875rem,
+    xxl: 2rem,
+  ),
+  $line-height
+);
+$font: () !default;
+$font: map.deep-merge(
+  (
+    'type': (
+      'title': 'QuickSand',
+      'content': 'OpenSans',
+    ),
+    'header-size': (
+      '': 2.25rem,
+      'sm': 1.875rem,
+      'lg': 3rem,
+      'xl': 3.75rem,
+      'xxl': 4.5rem,
+    ),
+    'content-size': (
+      '': 1rem,
+      'xs': 0.75rem,
+      'sm': 0.875rem,
+      'lg': 1.125rem,
+      'xl': 1.25rem,
+    ),
+  ),
+  $font
+);
+
+/*Fonts*/
+$dev: true;
+// @debug '#{$dev}';
+$font-path: '../fonts' !default;
+$font-pathd: -font-path($dev);
+// @debug '#{$font-pathd}';
+$font-display: 'auto' !default;
+$font-type-content: map.get($font, 'type', 'content');
+$font-type-title: map.get($font, 'type', 'title');
+$icon: () !default;
+$icon: map.merge(
+  (
+    xs: 1rem,
+    sm: 1.25rem,
+    md: 1.5rem,
+    lg: 2rem,
+    xl: 2.25rem,
+  ),
+  $icon
+);
+
+$border-color-base: #d8d8d8; /*changed as border-color*/
+
+$border-color-secondary: #ebebeb; /*changed as border-color-light*/
+
+$grey: #ebebeb; /*changed as border-color-light*/
+
+$grey-light: #f7f7f7; /*changed as border-color-lighter*/
+
+$grey-dark: #a6a6a6; /*changed as border-color-dark*/
+
+$font-path: $font-pathd;
+
+$primary-success-dark: #00954a;
+$primary-success: #02b55c;
+$secondary-success: #dcf9ea;
+
+$primary-error-dark: #fc3232;
+$primary-error: #ff5050;
+$secondary-error: #ffe8e8;
+
+$primary-info-dark: #0065b2;
+$primary-info: #2879b7;
+$secondary-info: #d8edfc;
+
+$primary-warning-dark: #ff9500;
+$primary-warning: #f8a523;
+$secondary-warning: #f9ecd7;
+
+$primary-link: #2879b7;
+
+$secondary-link: #d8edfc;
+
+$primary-color: #54bd95;
+
+$primary-bg-light: #a8dec9;
+
+$primary-color-dark: #265e4b;
+
+$primary-disabled: #ece9f1;
+$primary-disabled-text: #d0c9d6;
+
+$primary-color-light: #a8dec9;
+$primary-color-light-opacity: #e4fff5;
+
+$secondary-color: #ffffff;
+
+$secondary-color-green-light: #dcfae9;
+
+$secondary-color-red: #ff5050;
+
+$secondary-color-blue: #2879b7;
+
+$secondary-color-blue-light: #d8edfc;
+
+$secondary-color-dark: #161c28;
+
+$primary-text-color: #fbfbfb;
+
+/*Testing
+  $--dev:$dev;
+  */
+
+$font-color: #191a15; /*changed as text-color-primary*/
+
+$sidebar-color: #222938; /*changed as color-sidebar*/
+
+$primary-tree-text: #222f2b; /*changed as text-color-tree*/
+
+$gradiant-left: linear-gradient(to left, #54bd95, #265e4b);
+
+$gradiant-right: linear-gradient(to right, #54bd95, #265e4b);
+
+$gradiant-down: linear-gradient(180deg, #54bd95, #265e4b);
+
+$gradiant-up: linear-gradient(360deg, #54bd95, #265e4b);
+
+$border-radius: 5px; /*changed as border-radius*/
+
+$border-radius-round: 100px; /*changed as border-radius-round*/
+
+/* Standard font styles */
+
+$title-font: QuickSand; /*changed as font-type-tittle*/
+
+$content-font: OpenSans; /*changed as font-type-content*/
+
+$icon-xs: 1rem; /*changed as icon-size-xs*/
+
+$icon-sm: 1.25rem; /*changed as icon-size-sm*/
+
+$icon-md: 1.5rem; /*changed as icon-size-md*/
+
+$icon-lr: 2rem; /*changed as icon-size-lg*/
+
+$icon-xl: 2.25rem; /*changed as icon-size-xl*/
+
+$header-font-size: 20px; /*changed as icon-size-tittle*/
+
+/* Standard header font styles */
+
+$font-h-xxl: 4.5rem; /*changed as font-header-size-xxl*/
+
+$font-h-xl: 3.75rem; /*changed as font-header-size-xl*/
+
+$font-h-lg: 3rem; /*changed as font-header-size-lg*/
+
+$font-h-md: 2.25rem; /*changed as font-header-size*/
+
+$font-h-sm: 1.875rem; /*changed as font-header-size-sm*/
+/*line-height*/
+$line-height-xxl: 2rem; /*changed as line-height-tittle*/
+$line-height-xl: 1.875rem; /*changed as line-height-tittle*/
+$line-height-lg: 1.75rem; /*changed as line-height-tittle*/
+$line-height-md: 1.5rem; /*changed as line-height-tittle*/
+$line-height-sm: 1.25rem; /*changed as line-height-tittle*/
+$line-height-xs: 1.125rem; /*changed as line-height-tittle*/
+/* Standard content font styles */
+
+$font-c-xl: 1.25rem; /*changed as font-content-size-xl*/
+
+$font-c-lg: 1.125rem; /*changed as font-content-size-lg*/
+
+$font-c-md: 1rem; /*changed as font-content-size*/
+
+$font-c-sm: 0.875rem; /*changed as font-content-size-sm*/
+
+$font-c-xs: 0.75rem; /*changed as font-content-xs*/
+
+.right-panel {
+  font-family: $content-font;
+}
+.left-panel {
+  font-family: $content-font;
+}

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

@@ -0,0 +1,150 @@
+@use './common/var.scss' as *;
+@use "sass:map";
+
+.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 {
+    width: 35px;
+    object-fit: cover;
+    margin-left: 5px;
+    height: auto;
+  }
+}
+.component-side-heading {
+  margin: 30px 0 20px 0;
+  font-size: 20px;
+}
+.component-description {
+  font-size: 14px;
+  line-height: 2;
+  // text-indent: 50px;
+}
+.icon-size {
+  list-style-type: none;
+  font-size: 14px;
+
+  li {
+    font-family: 'Open Sans';
+    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;
+  }
+}
+.component-example {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  margin: 40px 0;
+  border: 1px solid  map.get($border-color, "");
+  border-radius: 5px;
+
+  .example-body {
+    height: 100%;
+    display: flex;
+    padding: 20px;
+    gap: 15px;
+    overflow: inherit;
+    flex-direction: column;
+    font-family: 'Open Sans' !important;
+  }
+  .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-footer {
+    height: 40px;
+    display: flex;
+    padding: 0 20px;
+    justify-content: flex-end;
+    align-items: center;
+    border-top: 1px solid  map.get($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;
+      }
+    }
+  }
+}
+
+.hljs {
+  font-size: 14px !important;
+}

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

@@ -0,0 +1,58 @@
+.temppp-container {
+  color: var(--hlx-text-color-primary);
+  font-size: var(--hlx-font-content-size-sm);
+  position: relative;
+  width: max-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: max-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;
+
+  .option {
+    padding: 0 0.75rem 0 0.75rem;
+    font-size: var(--hlx-font-content-size-sm);
+    height: 38px;
+    display: flex;
+    flex-direction: row;
+    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);
+    }
+
+    &:hover {
+      background: var(--hlx-color-primary);
+      color: var(--hlx-color-white);
+      i {
+        color: var(--hlx-color-white);
+      }
+    }
+  }
+}

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

@@ -0,0 +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;
+    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;
+        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;
+      }
+    }
+  }
+}