halleyx-ui-framework 4.1.7 → 4.1.9

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

@@ -1,8 +1,8 @@
-@use "sass:map";
-@use "sass:math";
+@use 'sass:map';
+@use 'sass:math';
 /*/* Element Chalk Variables */
-@import "../mixins/config.scss";
-@import "../mixins/functions.scss";
+@import '../mixins/config.scss';
+@import '../mixins/functions.scss';
 
 $--types: primary, success, warning, error, info;
 
@@ -11,6 +11,7 @@ $--types: primary, success, warning, error, info;
 $--colors: () !default;
 $--colors: map.deep-merge(
   (
+<<<<<<< HEAD
     "white": #ffffff,
     "black": #000000,
     "primary": (
@@ -18,45 +19,58 @@ $--colors: map.deep-merge(
       "base": #54bd95,
       "light": #a8dec9,
       "lighter": #e4fff5,
+=======
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'dark': #265e4b,
+      'base': #54bd95,
+      'light': #a8dec9,
+      'lighter': #e4fff5,
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
     ),
-    "success": (
-      "dark": #00954a,
-      "base": #02b55c,
-      "light": #dcf9ea,
+    'success': (
+      'dark': #00954a,
+      'base': #02b55c,
+      'light': #dcf9ea,
     ),
-    "warning": (
-      "dark": #ff9500,
-      "base": #f8a523,
-      "light": #f9ecd7,
+    'warning': (
+      'dark': #ff9500,
+      'base': #f8a523,
+      'light': #f9ecd7,
     ),
-    "error": (
-      "dark": #fc3232,
-      "base": #ff5050,
-      "light": #ffe8e8,
+    'error': (
+      'dark': #fc3232,
+      'base': #ff5050,
+      'light': #ffe8e8,
     ),
-    "info": (
-      "dark": #0065b2,
-      "base": #2879b7,
-      "light": #d8edfc,
+    'info': (
+      'dark': #0065b2,
+      'base': #2879b7,
+      'light': #d8edfc,
     ),
-    "link": (
-      "dark": #143c5b,
-      "base": #2879b7,
-      "light": #d8edfc,
+    'link': (
+      'dark': #143c5b,
+      'base': #2879b7,
+      'light': #d8edfc,
     ),
-    "disable": (
-      "dark": #6f5c90,
-      "base": #ece9f1,
-      "text": #d0c9d6,
+    'disable': (
+      'dark': #6f5c90,
+      'base': #ece9f1,
+      'text': #d0c9d6,
     ),
-    
-    "sidebar": ( 
-      "base": #001723,
+<<<<<<< HEAD
+=======
+
+    'sidebar': (
+      'base': #001723,
     ),
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
   ),
   $--colors
 );
 
+<<<<<<< HEAD
 $--color-white: map.get($--colors, "white") !default;
 $--color-black: map.get($--colors, "black") !default;
 /*Primary colors*/
@@ -90,6 +104,41 @@ $--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;
+=======
+$--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;
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
 
 $--text-color: () !default;
 $--text-color: map.merge(
@@ -115,10 +164,17 @@ $--text-color: map.merge(
 $--border-color: () !default;
 $--border-color: map.merge(
   (
+<<<<<<< HEAD
     "": #d8d8d8,
     "dark": #a6a6a6,
     "light": #ebebeb,
     "lighter": #f7f7f7,
+=======
+    '': #d8d8d8,
+    'dark': #a6a6a6,
+    'light': #ebebeb,
+    'lighter': #f7f7f7,
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
   ),
   $--border-color
 );
@@ -126,8 +182,13 @@ $--border-color: map.merge(
 $--variables: () !default;
 $--variables: map.merge(
   (
+<<<<<<< HEAD
     "border-radius": 5px,
     "border-radius-round": 100px,
+=======
+    'border-radius': 5px,
+    'border-radius-round': 100px,
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
   ),
   $--variables
 );
@@ -136,7 +197,11 @@ $--line-height: map.merge(
   (
     xs: 1.125rem,
     sm: 1.25rem,
+<<<<<<< HEAD
     "": 1.5rem,
+=======
+    '': 1.5rem,
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
     lg: 1.75rem,
     xl: 1.875rem,
     xxl: 2rem,
@@ -146,6 +211,7 @@ $--line-height: map.merge(
 $--font: () !default;
 $--font: map.deep-merge(
   (
+<<<<<<< HEAD
     "type": (
       "title": "QuickSand",
       "content": "OpenSans",
@@ -163,12 +229,32 @@ $--font: map.deep-merge(
       "sm": 0.875rem,
       "lg": 1.125rem,
       "xl": 1.25rem,
+=======
+    '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,
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
     ),
   ),
   $--font
 );
 
 /*Fonts*/
+<<<<<<< HEAD
 $dev: false;
 @debug "#{$dev}";
 $--font-path: "../fonts" !default;
@@ -177,6 +263,16 @@ $--font-pathd: -font-path($dev);
 $--font-display: "auto" !default;
 $--font-type-content: map.get($--font, "type", "content");
 $--font-type-title: map.get($--font, "type", "title");
+=======
+$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');
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff
 $--icon: () !default;
 $--icon: map.merge(
   (
@@ -195,6 +291,7 @@ $border-color-secondary: #ebebeb; /*changed as border-color-light*/
 
 $grey: #ebebeb; /*changed as border-color-light*/
 
+<<<<<<< HEAD
   $primary-success-dark: #00954a;
   $primary-success: #02b55c;
   $secondary-success: #dcf9ea;
@@ -325,3 +422,133 @@ $icon-md: 1.5rem;  /*changed as icon-size-md*/
     font-family: $content-font;
   }
   
+=======
+$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;
+}
+>>>>>>> e228589b7454afaad5ef2dc5b2a15128ee2deeff

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;
 }