1 files changed, 630 insertions, 0 deletions
diff --git a/src/styles.css b/src/styles.css
new file mode 100644
index 0000000..2528e5d
--- /dev/null
+++ b/src/styles.css
@@ -0,0 +1,630 @@
+/*
+ * Copyright (c) 2022. Deutsche Telekom AG
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+
+/* https://www.w3schools.com/css/css3_variables.asp */
+:root {
+  --alert-transparency: 0.9;
+  --light-gray: #f5f5f5;
+  --dark-gray: #5a5858;
+  --active-gray: #d9d9d9;
+  --black: #000;
+  --white: #fff;
+  --danger: #d90000;
+  --secondary: #ededed;
+  --major: #fad4b8;
+  --minor: #fecb00;
+  --intense-blue: #00a0de;
+
+}
+
+/* ########################################
+ *           Colors
+ * ########################################
+ */
+
+
+.blue {
+  color: var(--blue);
+}
+
+.orange {
+  color: #ffa500;
+}
+
+.red {
+  color: #ff0000;
+}
+
+.green {
+  color: #008000;
+}
+
+.dark-gray {
+  color: var(--dark-gray);
+}
+.black {
+  color: var(--black);
+}
+
+.max-w-100px {
+  max-width: 100px;
+}
+.max-w-120px {
+  max-width: 120px;
+}
+
+.right-10 {
+  right: 10px;
+}
+.opacity-1 {
+  opacity: 1 !important;
+}
+
+.alert {
+  z-index: 1;
+}
+
+.alert-primary {
+  background-color: #cce5ff !important;
+}
+.alert-secondary {
+  background-color: #e2e3e5 !important;
+}
+.alert-success {
+  background-color: #d4edda !important;
+}
+.alert-info {
+  background-color: #d1ecf1 !important;
+}
+.alert-warning {
+  background-color: #fff3cd !important;
+}
+.alert-danger {
+  color: var(--red) !important;
+  background-color: #f8d7da !important;
+}
+.alert-light {
+  background-color: #fefefe !important;
+}
+.alert-dark {
+  background-color: #d6d8d9 !important;
+}
+
+.navbar-collapse.in {
+  display: block !important;
+}
+
+.btn {
+  max-height: 40px;
+}
+.max-w-fit-content {
+  max-width: fit-content;
+}
+.btn-delete-bg {
+  background-position: center;
+  background-image: url('assets/images/icons/delete-icon.svg');
+}
+
+.opacity-1 {
+  opacity: 1 !important;
+}
+
+button[aria-label='Close']:focus {
+  outline: none;
+}
+
+.breadcrumb-item a {
+  color: var(--blue) !important;
+}
+.bg-lightGray {
+  background-color: var(--light-gray);
+}
+/* Make pagination responsive: https://github.com/twbs/bootstrap/issues/23504#issuecomment-592757850 */
+ul.pagination {
+  margin-bottom: 0;
+  flex-wrap: wrap;
+}
+
+/* Allow other elements to be in line with the pagination */
+ngb-pagination {
+  display: inline-block;
+}
+
+.form-control:disabled,
+.form-control[readonly],
+option:disabled {
+  background-color: #e9ecef !important;
+  opacity: 1 !important;
+}
+
+/*
+  Red asterisk that is not visible to screen readers
+  https://stackoverflow.com/questions/26634156/can-i-prevent-after-pseudo-element-from-being-read-by-screen-readers#26634352
+*/
+.required:after {
+  content: '';
+  display: inline-block;
+  width: 0.5em;
+  height: 0.5em;
+  background-image: url(src/assets/images/icons/Asterisk.svg);
+  background-size: 0.5em 0.5em;
+  vertical-align: top;
+  margin-left: 0.15em;
+  margin-top: 0.1em;
+}
+
+.breadcrumb-item::before {
+  margin-top: 4px;
+}
+.uuid-cell {
+  width: 350px;
+  min-width: 350px;
+  max-width: 350px;
+}
+.btn-invisible {
+  background-color: initial;
+  border: none;
+}
+.dropdown-toggle::after {
+  height: 6px !important;
+}
+
+#deployment-summary-accordion > .card {
+  border-radius: 0.25rem;
+}
+
+/* Override the (overly large) padding of the accordion header element */
+#deployment-summary-accordion > .card > .card-header {
+  padding-left: 17px;
+  padding-right: 17px;
+}
+
+/* add a scrollbar to the content area of the accordion */
+#deployment-summary-accordion > .card > div[id^='panel-'] {
+  max-height: 50vh;
+  overflow: auto;
+}
+
+/* telekom-styles is removing the bottom border on this element otherwise*/
+.accordion .card:first-of-type {
+  border: 1px solid #b2b2b2 !important;
+}
+.w-20px {
+  width: 20px !important;
+}
+
+/* override the telekom-styles behaviour: Pagination is too small */
+.pagination-sm .page-link {
+  line-height: 1.8 !important;
+}
+
+/* adding focus to buttons with class btn-default */
+.btn-default:focus {
+  outline: 5px auto var(--cyan) !important;
+  outline-offset: -2px !important;
+}
+
+.border-blue {
+  border-color: var(--light-blue) !important;
+}
+.ngx-charts-outer {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.outline-blue {
+  border: 1px solid var(--light-blue) !important;
+  border-radius: 0.25rem;
+}
+.outline-grey {
+  border-color: 1px solid var(--secondary);
+  border-radius: 0.25rem;
+}
+
+.border-radius-top-none {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.accordion .card:last-of-type {
+  border-top-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
+}
+
+.text-align-start {
+  text-align: start;
+}
+
+.row-active {
+  background-color: var(--active-gray) !important;
+  border: 1px solid var(--light-blue) !important;
+  border-radius: 0.25rem;
+}
+
+.accordion > .card > .card-header {
+  padding-left: 0 !important;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.draggable {
+  cursor: grab;
+}
+
+.draggable:active {
+  cursor: grabbing;
+}
+
+/* used for perceivedSeverity: major in the alarm list */
+.table-major {
+  background-color: var(--major) !important;
+}
+
+/* for ng-bootstraps nav tabs in the alarm details. Hovering over elements looks weird otherwise */
+.no-border-hover:hover > a {
+  border-bottom: none !important;
+}
+
+/* Prevent [sort icons] from breaking into a new line in table headers */
+th {
+  white-space: nowrap;
+}
+
+/* Override calc() to achieve same height of inputs and buttons */
+.form-control {
+  height: auto !important;
+}
+.active-badge {
+  box-shadow: 0 0 2pt 2pt var(--light-blue);
+}
+
+.badge {
+  font-size: 100% !important;
+}
+
+.badge-major {
+  color: var(--dark);
+  background-color: var(--major);
+}
+
+/* Context menu overrides */
+.ngx-contextmenu {
+  box-shadow: 0 0 17px 0 rgba(0, 0, 0, 0.59);
+}
+.ngx-contextmenu > .dropdown-menu > li > a:hover {
+  text-decoration: none !important;
+}
+
+.border-radius {
+  border-radius: 0.25rem !important;
+}
+
+.form-control.is-invalid,
+.was-validated .form-control:valid {
+  background-image: url('assets/images/icons/triangular-warning-sign.svg') !important;
+  background-position: right calc(0.75em + 0.1875rem) center !important;
+}
+
+.no-border {
+  border: none !important;
+}
+.border-gray {
+  border: 1px solid var(--gray);
+}
+
+.btn-outline-secondary {
+  color: var(--dark-gray) !important;
+  border-color: var(--dark-gray) !important;
+}
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus,
+.btn-outline-secondary:not(:focus),
+.btn-outline-secondary:active {
+  color: var(--gray-dark) !important;
+  background-color: var(--light-gray) !important;
+  border-color: var(--light-gray) !important;
+}
+
+.node-content-wrapper,
+.tree-children {
+  position: relative;
+}
+
+.node-content-wrapper::before,
+.tree-children::after {
+  content: '';
+  position: absolute;
+}
+
+.node-content-wrapper::before {
+  height: 28px;
+  top: -13px;
+  width: 20px;
+  left: -26px;
+}
+
+.tree-node-level-1 > tree-node-wrapper > .node-wrapper > .node-content-wrapper::before {
+  display: none;
+}
+
+.tree-node-leaf > .node-wrapper > .node-content-wrapper::before {
+  width: 25px;
+}
+
+.tree-children::after {
+  height: 100%;
+  top: -15px;
+  left: 6px;
+}
+
+.toggle-children-placeholder {
+  width: 13px !important;
+}
+
+tree-node:last-child > .tree-node > .tree-children::after {
+  border-left: none;
+}
+
+.toggle-children-wrapper {
+  padding: 2px 3px 5px 0;
+}
+
+.toggle-children {
+  z-index: 1;
+  width: 11px !important;
+  height: 11px !important;
+}
+
+.toggle-children-wrapper-expanded .toggle-children {
+  top: 1px;
+  left: 1px;
+}
+
+.attribute-pane-title {
+  color: var(--primary);
+  max-width: 60%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap !important;
+  display: inline-block;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.mr-15-px {
+  margin-right: 15px;
+}
+
+.bg-color-blue {
+  background-color: var(--light-blue);
+}
+
+/* styling for switch that we are using in attribute pane for showing and hiding the attributes */
+/* ------------------------------------------------------------------------------------- */
+.attribute-pane-switch {
+  height: 0;
+  width: 0;
+  visibility: hidden;
+}
+
+.label-for-switch {
+  cursor: pointer;
+  text-align: -9999px;
+  width: 40px;
+  height: 20px;
+  background: var(--active-gray);
+  display: block;
+  border-radius: 100px;
+  position: relative;
+  border: 1px solid var(--primary);
+}
+
+.label-for-switch::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 1px;
+  width: 18px;
+  height: 18px;
+  background: var(--primary);
+  border-radius: 90px;
+  transition: 0.3s;
+}
+
+#switch:checked + .label-for-switch {
+  background: var(--primary);
+}
+
+#switch:checked + .label-for-switch:after {
+  right: calc(18px - 1px);
+  transform: translateX(100%);
+  background: var(--active-gray);
+}
+
+.label-for-switch:active:after {
+  width: 18px;
+}
+
+.text-for-switch {
+  font-size: 11px;
+}
+/* ------------------------------------------------------------------------------------- */
+
+.toggle-children-wrapper-collapsed .toggle-children,
+.toggle-children-wrapper-expanded .toggle-children {
+  top: 2.4px;
+}
+.node-custom-content-wrapper {
+  padding: 2px 5px !important;
+}
+.node-content-wrapper{
+  padding: 0 !important;
+}
+
+/* Display definition lists in a tabular style */
+/* https://stackoverflow.com/questions/1687733/what-html-markups-to-use-for-displaying-label-value-data#1687759 */
+dt { float: left; clear: left; width: 6em; font-weight: bold; }
+.ml-2px{
+  margin-left: 2px;
+}
+.overflow-y-scroll{
+  overflow-y: scroll;
+}
+
+.alarm-color-critical-outline {
+  color: var(--white);
+  background-color: var(--danger) !important;
+}
+.alarm-color-cleared-outline {
+  color: var(--black);
+  border: 1px solid var(--black);
+}
+
+.alarm-color-major-outline {
+  border: 1px solid var(--major);
+  color: var(--major);
+}
+
+.alarm-color-minor-outline {
+  border: 1px solid var(--minor);
+  color: var(--minor);
+}
+
+.alarm-color-warning-outline {
+  color: var(--intense-blue);
+  border: 1px solid var(--intense-blue);
+}
+
+.alarm-color-indeterminate-outline {
+  border: 1px solid var(--secondary);
+  color: var(--secondary);
+}
+
+.leaflet-div-icon-hide {
+  background: none;
+  border: none;
+}
+
+.alarm-severity-counter {
+  background-color: white;
+  border-radius: 4px;
+  margin: 0 2px;
+  padding: 0 0.25rem !important;
+}
+
+.bc-icon {
+  color: var(--primary);
+}
+
+.hover-bg-gray:hover {
+  background-color: rgb(237, 237, 237);
+  width: 100% !important;
+}
+
+.pulse{
+  z-index: 10!important;
+  height: 180px;
+  width: 180px;
+  background: linear-gradient(
+  var(--danger),
+  #d97e87
+  );
+  position: absolute;
+  margin: auto;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 50px;
+  color: #ffffff;
+}
+.pulse:before,
+.pulse:after{
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background-color: var(--danger);
+  border-radius: 50%;
+  z-index: -1;
+  opacity: 0.7;
+}
+.pulse:before{
+  animation: pulse 2s ease-out infinite;
+}
+.pulse:after{
+  animation: pulse 2s 1s ease-out infinite;
+}
+@keyframes pulse{
+  100%{
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+tree-viewport{
+  overflow-x: auto !important;
+  display: flex !important;
+}
+.node-content-wrapper{
+  border: 1px solid rgba(0,0,0,0);
+}
+.node-content-wrapper-focused, .node-content-wrapper-focused:hover{
+  border: 1px solid var(--primary);
+}
+
+.backdropClass{
+  z-index: 1050 !important;
+}
+
+.table > :not(:first-child) {
+  border-top: none !important;
+}
+
+.leaflet-top,
+.leaflet-bottom {
+    z-index: 998 !important;
+  }
+
+.btn-invisible:focus {
+  border: 2px solid black;
+  border-radius: 4px;
+  outline: 0;
+}
+
+/*override onap styles*/
+.btn-secondary:focus {
+  background-color: #5c636a !important;
+  border-color: #565e64 !important;
+}
+
+.close:not(:disabled):not(.disabled) {
+  cursor: pointer;
+}
+
+.close::before {
+  display: block;
+  width: 16px;
+  height: 16px;
+  content: " ";
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.81,14.99l-6.99-7l6.99-7c0.24-0.24,0.2-0.63-0.04-0.83c-0.24-0.2-0.59-0.2-0.79,0l-6.99,7l-6.99-7 C0.75-0.08,0.36-0.04,0.16,0.2c-0.2,0.24-0.2,0.59,0,0.79l6.99,7l-6.99,7c-0.24,0.24-0.2,0.63,0.04,0.83c0.24,0.2,0.59,0.2,0.79,0 l6.99-7l6.99,7c0.24,0.24,0.59,0.24,0.83,0.04C16.04,15.66,16.08,15.26,15.81,14.99C15.85,15.03,15.81,15.03,15.81,14.99z' fill='%23262626'/%3E%3C/svg%3E");
+}