bfg-common 1.0.0

package/assets/scss/common/normalize.scss

@@ -0,0 +1,320 @@
+@import 'mixins';
+* {
+  box-sizing: border-box;
+}
+html.dark-theme body {
+  * {
+    color: #e9ecef;
+  }
+  .main-container {
+    background: #1b2a32;
+  }
+}
+
+* button:focus {
+  outline: none;
+}
+body span,
+body p,
+body *,
+body {
+  @include text();
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+body p {
+  margin: 0;
+  color: #565656;
+}
+
+b {
+  font-weight: bolder;
+}
+
+.flex {
+  display: flex;
+}
+.inline-block {
+  display: inline-block;
+}
+.table-row {
+  display: table-row;
+}
+.table-cell {
+  display: table-cell;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
+.flex-align-center {
+  @include flex($align: center);
+}
+.flex-align-start {
+  @include flex($align: flex-start);
+}
+.flex-space-between {
+  @include flex($just: space-between);
+}
+.flex-justify-end {
+  @include flex($just: flex-end);
+}
+.flex-justify-center {
+  @include flex($just: center);
+}
+.flex-direction-column {
+  @include flex($dir: column);
+}
+
+.z-index-1 {
+  z-index: 1;
+}
+.z-index-10 {
+  z-index: 10;
+}
+.z-index-100 {
+  z-index: 100;
+}
+.z-index-1000 {
+  z-index: 1000;
+}
+.z-index-10000 {
+  z-index: 10000;
+}
+.z-index-100000 {
+  z-index: 100000;
+}
+.z-index-1000000 {
+  z-index: 1000000;
+}
+
+.relative {
+  position: relative;
+}
+.absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.absolute-cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.text-ellipsis {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.pre-line {
+  white-space: pre-line;
+}
+
+.color-red {
+  color: red;
+}
+
+.div-disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.pointer {
+  cursor: pointer !important;
+}
+
+.default {
+  cursor: default !important;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+//
+//a.active,
+//a.router-link-active {
+//  pointer-events: none;
+//}
+
+.no-selection {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -ms-user-select: none;
+}
+
+.fill-parent {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  overflow: visible;
+}
+.horizontal {
+  flex-direction: row;
+}
+.vertical {
+  flex-direction: column;
+}
+.gutter {
+  background-color: #eee;
+  transition-property: background-color;
+  transition-delay: 0.25s;
+  transition-duration: 0.25s;
+}
+
+.clr-icon {
+  display: inline-block;
+  margin: 0;
+  height: 16px;
+  width: 16px;
+  vertical-align: middle;
+}
+
+.select {
+  select {
+    appearance: none;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: 0 0;
+    height: 1.2rem;
+    color: #000;
+    display: inline-block;
+    min-width: 3rem;
+    border-bottom: 1px solid #9a9a9a;
+    background: linear-gradient(180deg, transparent 95%, #0095d3 0) no-repeat;
+    background-size: 0 100%;
+    transition: background-size 0.2s ease;
+    position: relative;
+    padding: 0 1.1rem 0 0.3rem;
+    cursor: pointer;
+    width: 100%;
+    z-index: 2;
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    height: 0.5rem;
+    width: 0.5rem;
+    top: 0.3499998rem;
+    right: 0.3rem;
+    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3Cstyle%3E.cls-1%7Bfill%3A%239a9a9a%3B%7D%3C%2Fstyle%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Ctitle%3ECaret%3C%2Ftitle%3E%0A%20%20%20%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M6%2C9L1.2%2C4.2a0.68%2C0.68%2C0%2C0%2C1%2C1-1L6%2C7.08%2C9.84%2C3.24a0.68%2C0.68%2C0%2C1%2C1%2C1%2C1Z%22%2F%3E%0A%3C%2Fsvg%3E%0A);
+    background-repeat: no-repeat;
+    background-size: contain;
+    vertical-align: middle;
+    margin: 0;
+  }
+}
+
+.signpost-trigger {
+  position: relative;
+  overflow: unset;
+}
+
+.tooltip-content {
+  position: absolute;
+  top: calc(100% + 12px);
+  left: 50%;
+  background-color: var(--tooltip-content-bg-color);
+  color: var(--tooltip-content-text-color) !important;
+  border-radius: 3px;
+  padding: 4px 6px;
+  z-index: 9999;
+  &.right {
+    left: inherit;
+    right: 50%;
+    &::before {
+      left: inherit;
+      right: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid var(--tooltip-content-bg-color);
+    }
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: -8px;
+    left: 0;
+    border-left: 5px solid var(--tooltip-content-bg-color);
+    border-bottom: 6px solid var(--tooltip-content-bg-color);
+    border-top: 6px solid transparent;
+    border-right: 5px solid transparent;
+  }
+}
+.tooltip {
+  .tooltip-content {
+    &.tooltip-top-left {
+      &.error {
+        background-color: var(--tooltip-content-error-bg-color);
+        color: white;
+        &::before {
+          border-left: 5px solid transparent;
+          border-bottom: 6px solid transparent;
+          border-top: 6px solid var(--tooltip-content-error-bg-color);
+          border-right: 5px solid var(--tooltip-content-error-bg-color);
+        }
+      }
+    }
+    &.tooltip-top-right {
+      &.error {}
+    }
+  }
+}
+
+li {
+  list-style-type: none;
+  &::marker {
+    content: '';
+  }
+}
+
+//.main-container:has(.notification-bar) {
+//  height: calc(100vh - 36px);
+//}
+.dropdown-menu {
+  &.position-right {
+    left: auto;
+    right: 0;
+    min-width: 30ch;
+  }
+}
+.description {
+  color: var(--global-font-color) !important;
+}
+
+/* after refactoring */
+
+.related-objects {
+  &__list {
+  }
+  &__item {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+  &__heading {
+    color: var(--global-text-color3) !important;
+  }
+  &__link {
+    cursor: pointer;
+    color: var(--global-text-color2) !important;
+    margin-left: 4px;
+  }
+  .footer {
+    height: 30px;
+  }
+}

package/assets/scss/common/theme.scss

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

package/assets/scss/common/utilities.scss

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

package/assets/scss/common/variables.scss

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

package/assets/scss/main.scss

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