bfg-common 1.5.20 → 1.5.22

package/assets/scss/common/normalize.scss

@@ -1,361 +1,339 @@
-@import 'mixins';
-* {
-  box-sizing: border-box;
-}
-
-html:not(.is-new-view) {
-  &.dark-theme body {
-    *:not(select, option, svg, path, circle, rect, line, defs, g, clipPath, .alert-text) {
-      color: #e9ecef;
-    }
-    select {
-      color: #adbbc4;
-
-      option {
-        color: #000000;
-      }
-    }
-    .main-container {
-      background: #1b2a32;
-    }
-  }
-
-  input,
-  textarea {
-    font-family: sans-serif !important;
-  }
-}
-
-[dir="rtl"] {
-  .tree-node-text {
-    text-align: right;
-  }
-}
-
-* button:focus {
-  outline: none;
-}
-body span,
-body p,
-body *,
-body {
-  @include text();
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-body p {
-  margin: 0;
-}
-html:not(.is-new-view) {
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  body p {
-    color: #565656;
-  }
-}
-
-b {
-  font-weight: bolder;
-}
-.font-weight-bold {
-  font-weight: 700;
-}
-
-.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;
-}
-
-.word-break-all {
-  word-break: break-all;
-}
-
-.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;
-    //top: 2px;
-    //right: -16px;
-    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;
-  }
-}
+@import 'mixins';
+* {
+  box-sizing: border-box;
+}
+
+html:not(.is-new-view) {
+  &.dark-theme body {
+    *:not(select, option, svg, path, circle, rect, line, defs, g, clipPath, .alert-text) {
+      color: #e9ecef;
+    }
+    select {
+      color: #adbbc4;
+
+      option {
+        color: #000000;
+      }
+    }
+    .main-container {
+      background: #1b2a32;
+    }
+  }
+
+  input,
+  textarea {
+    font-family: sans-serif !important;
+  }
+}
+
+[dir="rtl"] {
+  .tree-node-text {
+    text-align: right;
+  }
+}
+
+* button:focus {
+  outline: none;
+}
+body span,
+body p,
+body *,
+body {
+  @include text();
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+body p {
+  margin: 0;
+}
+html:not(.is-new-view) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  body p {
+    color: #565656;
+  }
+}
+
+b {
+  font-weight: bolder;
+}
+.font-weight-bold {
+  font-weight: 700;
+}
+
+.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);
+}
+
+.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;
+}
+
+.word-break-all {
+  word-break: break-all;
+}
+
+.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: var(--z-dropdown);
+  }
+
+  &:after {
+    position: absolute;
+    content: '';
+    height: 0.5rem;
+    width: 0.5rem;
+    top: 0.3499998rem;
+    right: 0.3rem;
+    //top: 2px;
+    //right: -16px;
+    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: var(--z-popover);
+  &.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;
+  }
+}