bfg-common 1.2.20 → 1.2.21

package/assets/scss/common/theme.scss

@@ -1,230 +1,230 @@
-@import "variables.scss";
-:root {
-  --scrollbar-thumb: #bbb;
-  --scrollbar-track: #eee;
-
-  --global-font-color: #{$--grey-200};
-  --global-font-color2: #{$light-black};
-  --global-font-color3: #{$--grey-200};
-  --global-font-color4: #{$--grey-100};
-  --global-font-color5: #{$light-black};
-  --global-font-color6: #{$--grey-800};
-  --global-font-color7: #{$--grey-900};
-  --global-border-color: #ccc;
-  --global-border-colo2: #{$--grey-100};
-  --global-bg-color: #{$white};
-  --global-bg-color2: #{$light-grey-100};
-  --global-text-color: #5659b8;
-  --global-text-color2: #{$--blue-150};
-  --global-text-color3: #{$--grey-100};
-  --block-view-bg-color: #{$light-grey};
-  --block-view-bg-color2: #{$white};
-  --block-view-bg-color3: #{$white};
-  --block-view-bg-color4: #{$light-grey};
-  --block-view-bg-color5: #{$white};
-  --block-border-color: #{$--grey-850};
-
-  --main-color-mode: #{$black};
-
-  --modal-bg-color: #fff;
-  --modal-other-bg-color: #fff;
-
-  --close-icon: #8c8c8c;
-  --arrows-icon: #000;
-  --info-icon: #{$--blue-150};
-  --title-color: #e9ecef;
-  --triger-icon-color: #{$--grey-200}; //#666
-  --ellipsis-vertical-icon-color: #{$--grey-100};
-
-  --progress-color: #{$--blue-100};
-  --progress-bg-color: #{$--grey-900};
-  --progress-value-bg-color: #61b715; // equal in dark and white modes
-
-  --dropdown-bg-color: #fff;
-  --dropdown-item-color: #0072a3;
-
-  /*  UI_I_Button Variables light mode  */
-  /* outline */
-  --btn-outline-border-color: #0079b8;
-  --btn-outline-hover-bg-color: #e1f1f6;
-  --btn-outline-hover-color: #004d8a;
-  --btn-outline-box-shadow-color: #0095d3;
-  /* primary */
-  --btn-primary-color: #{$white};
-  --btn-primary-border-color: #{$--blue-100};
-  --btn-primary-hover-bg-color: #004d8a;
-  --btn-primary-hover-color: #e1f1f6;
-  --btn-primary-box-shadow-color: #0095d3;
-  --btn-primary-disabled-color: #666;
-  --btn-primary-disabled-bg-color:#ccc;
-  /* warning */
-  --btn-warning-color: #{$white};
-  --btn-warning-bg-color: #{$--red-200};
-  --btn-warning-hover-bg-color: #{$--red-150};
-  --btn-warning-box-shadow-color: #{$--red-50};
-  /* link */
-  --btn-link-color: #0079b8;
-  --btn-link-hover-color: #004d8a;
-  --btn-link-disabled: #{$--grey-150};
-
-  /*  Form Input Label Variables light mode  */
-  --form-label-color: #000;
-  --form-input-color: #000;
-  --form-input-border-color: #9a9a9a;
-
-  /*  Checkbox Variables light mode  */
-  --checkbox-label-color: #454545;
-  --checkbox-background-color: #0079b8;
-  --checkbox-border-color: #575757;
-  --checkbox-mark-color: #fff;
-  --checkbox-mark-background-color: #737373;
-  --checkbox-value-active-color: #61b715;
-
-  /*  Select Variables light mode  */
-  --select-color: #000;
-
-  /*  NavBar Variables light mode  */
-  --nav-link-color: #454545;
-  --nav-link-active-color: #000;
-  --nav-active-box-shadow-color: #0079b8;
-  --nav-link-hover-color: #666666;
-  --nav-panel-border-color: #ccc;
-
-  --gutter-bg-color: #eee;
-  --gutter-hover-bg-color: #0079b8;
-  --gutter-active-bg-color: #a6d8e7;
-
-  /*  Items Row Variables light mode  */
-  --row-hover-bg-color: #{$light-grey-100};
-  --row-hover-border-color:  #{$--grey-200};
-  --row-selected-text-color:  #{$white};
-  --row-selected-bg-color:  #{$--blue-800};
-
-  /*  Vertical Steps Variables light mode  */
-  --vertical-steps-active-color: #fff;
-  --vertical-steps-complete-color: #454545;
-  --vertical-steps-active-bg-color:  #{$--blue-800};
-  --vertical-steps-complete-bg-color:  #{$light-grey-100};
-  --vertical-steps-hover-border-color: #{$--grey-200};
-  --vertical-nav-active-item-color: #fff;
-  --vertical-nav-active-bg-color: #29414e;
-  --vertical-nav-hover-item-color: #29414e;
-
-  /*  Tooltip Variables light mode  */
-  --tooltip-content-text-color: #{$white};
-  --tooltip-content-bg-color: #{$black};
-  --tooltip-content-error-bg-color: #{#C92100};
-}
-
-:root.dark-theme {
-  --scrollbar-thumb: #29414e;
-  --scrollbar-track: #17242B;
-
-  --global-font-color: #{$--grey-800};
-  --global-font-color2: #{#eaedf0};
-  --global-font-color3: #{$light-white-100};
-  --global-font-color4: #{$light-white-100};
-  --global-font-color5: #{$light-black};
-  --global-border-color: #495865;
-  --global-border-colo2: #{$light-white-100};
-  --global-bg-color: #17242b;
-  --global-bg-color2: #{$--blue-950};
-  --global-text-color: #{$--blue-200};
-  --global-text-color2: #{$--blue-200};
-  --global-text-color3: #{$--grey-700};
-  --block-view-bg-color: #{$--blue-800};
-  --block-view-bg-color2: #{$--blue-750};
-  --block-view-bg-color3: #{$--blue-800};
-  --block-view-bg-color4: #{$--blue-700};
-  --block-view-bg-color5: #{$--blue-700};
-  --block-border-color: #{$black};
-
-  --main-color-mode: #{$light-white};
-
-  --modal-bg-color: #29414e;
-  --modal-other-bg-color: #22343c;
-
-  --close-icon: #{$light-grey};
-  --arrows-icon: #e9ecef;
-  --info-icon: #{$--grey-800};
-  --title-color: #565656;
-  --triger-icon-color: #fff;
-  --ellipsis-vertical-icon-color: #{$light-white-100};
-
-  --progress-color: #{$--blue-250};
-  --progress-bg-color: #{$--blue-900};
-
-  --dropdown-bg-color: #1b2a32;
-  --dropdown-item-color: #79c6e6;
-
-  /*  Button Variables dark mode  */
-            /* outline */
-  --btn-outline-border-color: #89cbdf;
-  --btn-outline-hover-bg-color: hsla(0,0%,100%,.1);
-  --btn-outline-hover-color: #57c8ea;
-  --btn-outline-box-shadow-color: #000;
-            /* primary */
-  --btn-primary-color: #{$black};
-  --btn-primary-border-color: #{$--blue-250};
-  --btn-primary-hover-bg-color: #57c8ea;
-  --btn-primary-hover-color: #000;
-  --btn-primary-box-shadow-color: #0065ad;
-  --btn-primary-disabled-bg-color: #fff;
-  --btn-primary-disabled-color: #000;
-  /* warning */
-  --btn-warning-color: #{$black};
-  --btn-warning-bg-color: #{$--red-300};
-  --btn-warning-hover-bg-color: #{$--red-400};
-  --btn-warning-box-shadow-color: #{$--red-100};
-            /* link */
-  --btn-link-color: #89cbdf;
-  --btn-link-hover-color: #57c8ea;
-  --btn-link-disabled: #{$white};
-
-  /*  Form Input Label Variables dark mode  */
-  --form-label-color: #adbbc4;
-  --form-input-color: #e9ecef;
-  --form-input-border-color: #adbbc4;
-
-  /*  Checkbox Variables dark mode  */
-  --checkbox-label-color: #acbac3;
-  --checkbox-background-color: #4aaed9;
-  --checkbox-border-color: #e9ecef;
-  --checkbox-mark-color: #000;
-  --checkbox-mark-background-color: #fff;
-  --checkbox-value-active-color: #61b715;
-
-  /*  Select Variables light mode  */
-  --select-color: #000;
-
-  /*  NavBar Variables dark mode  */
-  --nav-link-color: #acbac3;
-  --nav-link-active-color: #fff;
-  --nav-active-box-shadow-color: #4aaed9;
-  --nav-link-hover-color: #acbac3;
-  --nav-panel-border-color: #495865;
-
-  --gutter-bg-color: #25333d;
-  --gutter-hover-bg-color: #495a67;
-  --gutter-active-bg-color: #495a67;
-
-  /*  Items Row Variables light mode  */
-  --row-hover-bg-color: #{$--blue-950};
-  --row-hover-border-color: #{$white};
-  --row-selected-text-color:  #{$black};
-  --row-selected-bg-color:  #{$light-blue};
-
-   /*  Vertical Steps Variables dark mode  */
-   --vertical-steps-active-color: #000;
-   --vertical-steps-complete-color: #acbac3;
-   --vertical-steps-active-bg-color: #{$light-blue};
-   --vertical-steps-complete-bg-color:  #{$--blue-950};
-   --vertical-steps-hover-border-color: #{$white};
-   --vertical-nav-active-item-color: #{$black};
-   --vertical-nav-active-bg-color: #d8e3e9;
-   --vertical-nav-hover-item-color: #d8e3e9;
-
-  /*  Tooltip Variables light mode  */
-  --tooltip-content-text-color: #{$black};
-  --tooltip-content-bg-color: #{$white};
-}
+@import "variables.scss";
+:root {
+  --scrollbar-thumb: #bbb;
+  --scrollbar-track: #eee;
+
+  --global-font-color: #{$--grey-200};
+  --global-font-color2: #{$light-black};
+  --global-font-color3: #{$--grey-200};
+  --global-font-color4: #{$--grey-100};
+  --global-font-color5: #{$light-black};
+  --global-font-color6: #{$--grey-800};
+  --global-font-color7: #{$--grey-900};
+  --global-border-color: #ccc;
+  --global-border-colo2: #{$--grey-100};
+  --global-bg-color: #{$white};
+  --global-bg-color2: #{$light-grey-100};
+  --global-text-color: #5659b8;
+  --global-text-color2: #{$--blue-150};
+  --global-text-color3: #{$--grey-100};
+  --block-view-bg-color: #{$light-grey};
+  --block-view-bg-color2: #{$white};
+  --block-view-bg-color3: #{$white};
+  --block-view-bg-color4: #{$light-grey};
+  --block-view-bg-color5: #{$white};
+  --block-border-color: #{$--grey-850};
+
+  --main-color-mode: #{$black};
+
+  --modal-bg-color: #fff;
+  --modal-other-bg-color: #fff;
+
+  --close-icon: #8c8c8c;
+  --arrows-icon: #000;
+  --info-icon: #{$--blue-150};
+  --title-color: #e9ecef;
+  --triger-icon-color: #{$--grey-200}; //#666
+  --ellipsis-vertical-icon-color: #{$--grey-100};
+
+  --progress-color: #{$--blue-100};
+  --progress-bg-color: #{$--grey-900};
+  --progress-value-bg-color: #61b715; // equal in dark and white modes
+
+  --dropdown-bg-color: #fff;
+  --dropdown-item-color: #0072a3;
+
+  /*  UI_I_Button Variables light mode  */
+  /* outline */
+  --btn-outline-border-color: #0079b8;
+  --btn-outline-hover-bg-color: #e1f1f6;
+  --btn-outline-hover-color: #004d8a;
+  --btn-outline-box-shadow-color: #0095d3;
+  /* primary */
+  --btn-primary-color: #{$white};
+  --btn-primary-border-color: #{$--blue-100};
+  --btn-primary-hover-bg-color: #004d8a;
+  --btn-primary-hover-color: #e1f1f6;
+  --btn-primary-box-shadow-color: #0095d3;
+  --btn-primary-disabled-color: #666;
+  --btn-primary-disabled-bg-color:#ccc;
+  /* warning */
+  --btn-warning-color: #{$white};
+  --btn-warning-bg-color: #{$--red-200};
+  --btn-warning-hover-bg-color: #{$--red-150};
+  --btn-warning-box-shadow-color: #{$--red-50};
+  /* link */
+  --btn-link-color: #0079b8;
+  --btn-link-hover-color: #004d8a;
+  --btn-link-disabled: #{$--grey-150};
+
+  /*  Form Input Label Variables light mode  */
+  --form-label-color: #000;
+  --form-input-color: #000;
+  --form-input-border-color: #9a9a9a;
+
+  /*  Checkbox Variables light mode  */
+  --checkbox-label-color: #454545;
+  --checkbox-background-color: #0079b8;
+  --checkbox-border-color: #575757;
+  --checkbox-mark-color: #fff;
+  --checkbox-mark-background-color: #737373;
+  --checkbox-value-active-color: #61b715;
+
+  /*  Select Variables light mode  */
+  --select-color: #000;
+
+  /*  NavBar Variables light mode  */
+  --nav-link-color: #454545;
+  --nav-link-active-color: #000;
+  --nav-active-box-shadow-color: #0079b8;
+  --nav-link-hover-color: #666666;
+  --nav-panel-border-color: #ccc;
+
+  --gutter-bg-color: #eee;
+  --gutter-hover-bg-color: #0079b8;
+  --gutter-active-bg-color: #a6d8e7;
+
+  /*  Items Row Variables light mode  */
+  --row-hover-bg-color: #{$light-grey-100};
+  --row-hover-border-color:  #{$--grey-200};
+  --row-selected-text-color:  #{$white};
+  --row-selected-bg-color:  #{$--blue-800};
+
+  /*  Vertical Steps Variables light mode  */
+  --vertical-steps-active-color: #fff;
+  --vertical-steps-complete-color: #454545;
+  --vertical-steps-active-bg-color:  #{$--blue-800};
+  --vertical-steps-complete-bg-color:  #{$light-grey-100};
+  --vertical-steps-hover-border-color: #{$--grey-200};
+  --vertical-nav-active-item-color: #fff;
+  --vertical-nav-active-bg-color: #29414e;
+  --vertical-nav-hover-item-color: #29414e;
+
+  /*  Tooltip Variables light mode  */
+  --tooltip-content-text-color: #{$white};
+  --tooltip-content-bg-color: #{$black};
+  --tooltip-content-error-bg-color: #{#C92100};
+}
+
+:root.dark-theme {
+  --scrollbar-thumb: #29414e;
+  --scrollbar-track: #17242B;
+
+  --global-font-color: #{$--grey-800};
+  --global-font-color2: #{#eaedf0};
+  --global-font-color3: #{$light-white-100};
+  --global-font-color4: #{$light-white-100};
+  --global-font-color5: #{$light-black};
+  --global-border-color: #495865;
+  --global-border-colo2: #{$light-white-100};
+  --global-bg-color: #17242b;
+  --global-bg-color2: #{$--blue-950};
+  --global-text-color: #{$--blue-200};
+  --global-text-color2: #{$--blue-200};
+  --global-text-color3: #{$--grey-700};
+  --block-view-bg-color: #{$--blue-800};
+  --block-view-bg-color2: #{$--blue-750};
+  --block-view-bg-color3: #{$--blue-800};
+  --block-view-bg-color4: #{$--blue-700};
+  --block-view-bg-color5: #{$--blue-700};
+  --block-border-color: #{$black};
+
+  --main-color-mode: #{$light-white};
+
+  --modal-bg-color: #29414e;
+  --modal-other-bg-color: #22343c;
+
+  --close-icon: #{$light-grey};
+  --arrows-icon: #e9ecef;
+  --info-icon: #{$--grey-800};
+  --title-color: #565656;
+  --triger-icon-color: #fff;
+  --ellipsis-vertical-icon-color: #{$light-white-100};
+
+  --progress-color: #{$--blue-250};
+  --progress-bg-color: #{$--blue-900};
+
+  --dropdown-bg-color: #1b2a32;
+  --dropdown-item-color: #79c6e6;
+
+  /*  Button Variables dark mode  */
+            /* outline */
+  --btn-outline-border-color: #89cbdf;
+  --btn-outline-hover-bg-color: hsla(0,0%,100%,.1);
+  --btn-outline-hover-color: #57c8ea;
+  --btn-outline-box-shadow-color: #000;
+            /* primary */
+  --btn-primary-color: #{$black};
+  --btn-primary-border-color: #{$--blue-250};
+  --btn-primary-hover-bg-color: #57c8ea;
+  --btn-primary-hover-color: #000;
+  --btn-primary-box-shadow-color: #0065ad;
+  --btn-primary-disabled-bg-color: #fff;
+  --btn-primary-disabled-color: #000;
+  /* warning */
+  --btn-warning-color: #{$black};
+  --btn-warning-bg-color: #{$--red-300};
+  --btn-warning-hover-bg-color: #{$--red-400};
+  --btn-warning-box-shadow-color: #{$--red-100};
+            /* link */
+  --btn-link-color: #89cbdf;
+  --btn-link-hover-color: #57c8ea;
+  --btn-link-disabled: #{$white};
+
+  /*  Form Input Label Variables dark mode  */
+  --form-label-color: #adbbc4;
+  --form-input-color: #e9ecef;
+  --form-input-border-color: #adbbc4;
+
+  /*  Checkbox Variables dark mode  */
+  --checkbox-label-color: #acbac3;
+  --checkbox-background-color: #4aaed9;
+  --checkbox-border-color: #e9ecef;
+  --checkbox-mark-color: #000;
+  --checkbox-mark-background-color: #fff;
+  --checkbox-value-active-color: #61b715;
+
+  /*  Select Variables light mode  */
+  --select-color: #000;
+
+  /*  NavBar Variables dark mode  */
+  --nav-link-color: #acbac3;
+  --nav-link-active-color: #fff;
+  --nav-active-box-shadow-color: #4aaed9;
+  --nav-link-hover-color: #acbac3;
+  --nav-panel-border-color: #495865;
+
+  --gutter-bg-color: #25333d;
+  --gutter-hover-bg-color: #495a67;
+  --gutter-active-bg-color: #495a67;
+
+  /*  Items Row Variables light mode  */
+  --row-hover-bg-color: #{$--blue-950};
+  --row-hover-border-color: #{$white};
+  --row-selected-text-color:  #{$black};
+  --row-selected-bg-color:  #{$light-blue};
+
+   /*  Vertical Steps Variables dark mode  */
+   --vertical-steps-active-color: #000;
+   --vertical-steps-complete-color: #acbac3;
+   --vertical-steps-active-bg-color: #{$light-blue};
+   --vertical-steps-complete-bg-color:  #{$--blue-950};
+   --vertical-steps-hover-border-color: #{$white};
+   --vertical-nav-active-item-color: #{$black};
+   --vertical-nav-active-bg-color: #d8e3e9;
+   --vertical-nav-hover-item-color: #d8e3e9;
+
+  /*  Tooltip Variables light mode  */
+  --tooltip-content-text-color: #{$black};
+  --tooltip-content-bg-color: #{$white};
+}

package/assets/scss/common/utilities.scss

@@ -1,18 +1,18 @@
-.notifications-wrapper {
-  position: absolute;
-  top: 50px;
-  right: 0;
-  z-index: 9999;
-  overflow: hidden;
-  width: 434px;
-
-  h3 {
-    color: var(--global-font-color7);
-    margin-top: 6px;
-  }
-
-  p {
-    color: var(--global-font-color6);
-    line-height: 16px;
-  }
-}
+.notifications-wrapper {
+  position: absolute;
+  top: 50px;
+  right: 0;
+  z-index: 9999;
+  overflow: hidden;
+  width: 434px;
+
+  h3 {
+    color: var(--global-font-color7);
+    margin-top: 6px;
+  }
+
+  p {
+    color: var(--global-font-color6);
+    line-height: 16px;
+  }
+}

package/assets/scss/common/variables.scss

@@ -1,43 +1,43 @@
-$body-font-family: 'Open Sans';
-
-// common colors
-$white: #fff;
-$black: #000;
-
-$light-black: #303030;
-$light-white: #eaedf0;
-$light-white-100: #e9ecef;
-$light-grey: #fafafa;
-$light-grey-100: #e8e8e8;
-
-$light-blue: #d8e3e9;
-
-$--grey-100: #565656;
-$--grey-150: #575757;
-$--grey-200: #666666;
-$--grey-700: #929ba5;
-$--grey-800: #acbac3;
-$--grey-850: #ccc;
-$--grey-900: #ededed;
-
-$--blue-100: #0079b8;
-$--blue-150: #0072a3;
-$--blue-200: #49AFD9;
-$--blue-250: #4aaed9;
-$--blue-700: #1b2a32;
-$--blue-750: #21333b;
-$--blue-800: #29414e;
-$--blue-850: #28404d;
-$--blue-900: #31454e;
-$--blue-950: #324f61;
-
-
-
-$--red-50: #a32100;
-$--red-100: #c72100;
-$--red-150: #c92100;
-$--red-200: #e12200;
-$--red-300: #f55047;
-$--red-400: #ff6961;
-
-
+$body-font-family: 'Open Sans';
+
+// common colors
+$white: #fff;
+$black: #000;
+
+$light-black: #303030;
+$light-white: #eaedf0;
+$light-white-100: #e9ecef;
+$light-grey: #fafafa;
+$light-grey-100: #e8e8e8;
+
+$light-blue: #d8e3e9;
+
+$--grey-100: #565656;
+$--grey-150: #575757;
+$--grey-200: #666666;
+$--grey-700: #929ba5;
+$--grey-800: #acbac3;
+$--grey-850: #ccc;
+$--grey-900: #ededed;
+
+$--blue-100: #0079b8;
+$--blue-150: #0072a3;
+$--blue-200: #49AFD9;
+$--blue-250: #4aaed9;
+$--blue-700: #1b2a32;
+$--blue-750: #21333b;
+$--blue-800: #29414e;
+$--blue-850: #28404d;
+$--blue-900: #31454e;
+$--blue-950: #324f61;
+
+
+
+$--red-50: #a32100;
+$--red-100: #c72100;
+$--red-150: #c92100;
+$--red-200: #e12200;
+$--red-300: #f55047;
+$--red-400: #ff6961;
+
+

package/assets/scss/main.scss

@@ -1,13 +1,13 @@
-@import "clarity/clr-ui.min.css";
-@import "common/icons/icons";
-
-@import "common/utilities";
-
-@import "common/variables";
-@import "common/theme";
-@import "common/normalize";
-@import "common/global";
-@import "common/mixins";
-@import "common/animations";
-
-//@import "plugins/consoleVm.css";
+@import "clarity/clr-ui.min.css";
+@import "common/icons/icons";
+
+@import "common/utilities";
+
+@import "common/variables";
+@import "common/theme";
+@import "common/normalize";
+@import "common/global";
+@import "common/mixins";
+@import "common/animations";
+
+//@import "plugins/consoleVm.css";