bfg-common 1.2.112 → 1.2.113

package/components/common/diagramMain/modals/editSettings/EditSettingsModal.vue

@@ -1,714 +1,825 @@
-<template>
-    <div>
-        <atoms-modal
-                :width="props.width"
-                :height="props.height"
-                :show="props.show"
-                :title="title"
-                :modal-loading="modalLoading"
-                class="diagram-action__edit"
-                @hide="onHideEditSettingsModal"
-                @submit="onSendDataRequest"
-        >
-            <template #modalBody>
-                <common-diagram-main-modals-edit-settings
-                        :items="props.items"
-                        :view-name="props.viewName"
-                        :initial-data="props.initialData"
-                        :adapters="props.adapters"
-                        :flag-send-data="flagSendData"
-                        @send-edit-data="onSendData"
-                        @change-edit-fields-data="onChangeEditFieldsData"
-                        @check-network-label="onCheckNetworkLabel"
-                />
-            </template>
-        </atoms-modal>
-        <div v-show="true" class="loader">
-            <i class="fa clr-tree-node-caret-icon spinner spinner" />
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import {
-    UI_I_ModalsInitialData,
-    UI_I_EditFieldsData,
-    UI_I_SwitchAdapters,
-} from '~/components/common/diagramMain/models/interfaces'
-
-// Props from up
-interface UI_I_PortViewSettingsModalProps {
-    show: boolean
-    viewName: string
-    width: string
-    height: string
-    title?: string
-    items: {
-        value: string
-        text: string
-    }[]
-    initialData?: UI_I_ModalsInitialData
-    adapters?: UI_I_SwitchAdapters
-}
-
-const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
-    initialData: () => ({}),
-    title: 'Network',
-    adapters: () => ({
-        totalPages: 0,
-        totalItems: 0,
-        items: [],
-    }),
-})
-
-const modalLoading = ref<boolean>(false)
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Title
-const title = computed(
-    () => props.title + localization.value.networkEditSettings
-)
-
-// Modal hiding
-const emits = defineEmits<{
-    (event: 'hide'): void
-    (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
-    (
-        event: 'send-edit-data',
-        type: string,
-        hideModal: () => void,
-        name?: string
-    ): void
-    (
-        event: 'check-network-label',
-        networkLabel: string,
-        cb: (error_message: string) => void,
-        hideLoader?: () => void
-    ): void
-}>()
-
-const onCheckNetworkLabel = (
-    networkLabel: string,
-    cb: (error_message: string) => void
-) => {
-    emits('check-network-label', networkLabel, cb)
-}
-
-const onHideEditSettingsModal = (): void => {
-    emits('hide')
-}
-
-const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
-    emits('change-edit-fields-data', newEditFieldsData)
-}
-
-const flagSendData = ref(true)
-
-const onSendDataRequest = () => {
-    flagSendData.value = !flagSendData.value
-}
-const onSendData = (type: string) => {
-    modalLoading.value = true
-    emits('send-edit-data', type, onHideEditSettingsModal, props.title)
-}
-</script>
-
-<style scoped lang="scss">
-:deep(.diagram-action__edit) {
-  .table-fixed-height {
-    min-height: 200px;
-    max-height: 227px;
-    overflow-y: auto;
-  }
-  .modal-content {
-    display: flex;
-    flex-direction: column;
-  }
-  .modal-header {
-    border-bottom: 1px solid #a6a6a6;
-    padding: 0;
-  }
-  .wizard-tab__container {
-    display: flex;
-    flex: 1 1 100%;
-    box-sizing: border-box;
-  }
-  .wizard-content__container {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    flex: 1 1 100%;
-    box-sizing: border-box;
-    order: 2;
-    overflow-y: auto;
-    padding: 16px 15px 10px 10px;
-  }
-  .wizard-content {
-    height: auto;
-    width: inherit;
-    margin: 0;
-  }
-  .flex-property-value-group {
-    margin-left: 10px;
-    flex: 1 0 0;
-
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: inner-spin-button;
-    }
-  }
-
-  .flex-property-value-group.overridable-dropdown {
-    max-width: 390px;
-    min-width: 366px;
-  }
-  .overridable-dropdown .flex-property-label-group {
-    flex-basis: auto;
-    padding-left: 0;
-    min-height: 36px;
-  }
-  .flex-property-value-group .select {
-    max-width: 300px;
-
-    select {
-      color: #565656;
-      height: 24px;
-    }
-
-    select:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-  }
-  .form-block {
-    margin: 12px 0 24px;
-  }
-  section.form-block {
-    margin-bottom: 0;
-    margin-top: 0;
-  }
-  .flex-property-value-group {
-    height: 36px;
-  }
-  .flex-property-label-group.dummy {
-    visibility: hidden;
-    flex-basis: auto;
-  }
-  label.normal-weight {
-    font-weight: 400;
-    position: relative;
-    display: inline-block;
-    min-height: 1.2rem;
-    padding-left: 1.1rem;
-    cursor: pointer;
-    line-height: 1.2rem;
-  }
-  .flex-property-label-group.large {
-    flex: 0 0 180px;
-    flex-basis: 210px;
-  }
-  .checkbox-inline {
-    position: relative;
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-    font-weight: 400;
-    cursor: pointer;
-
-    input:focus + label::before {
-      box-shadow: none;
-    }
-
-    label {
-      font-size: 11.05px;
-      margin-bottom: 5px;
-      padding-left: 22px;
-      line-height: 24px;
-    }
-    label.normal-font-size {
-      font-size: 13px;
-      margin-bottom: 0;
-    }
-    &.with-margin {
-      min-height: 20px;
-      margin-top: 10px;
-      margin-bottom: 10px;
-    }
-  }
-  .horizontal-flex-container {
-    margin-bottom: 5px;
-    min-height: 36px;
-    display: flex;
-    flex-direction: row;
-  }
-  .no-margin {
-    margin-bottom: 0;
-  }
-  .port-properties-vlanid-row {
-    padding-top: 8px;
-  }
-  .property-label-group {
-    width: 140px;
-  }
-  .property-value-group {
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: inner-spin-button;
-    }
-
-    margin-left: 10px;
-
-    fieldset {
-      display: flex;
-      flex-flow: column;
-      padding-left: 23px;
-    }
-
-    input:not([type='checkbox']) {
-      width: 280px;
-    }
-    .combobox-container {
-      width: 160px;
-
-      input {
-        width: 160px;
-      }
-    }
-  }
-  .sidenav {
-    width: 220px;
-    height: 100%;
-    padding: 10px 5px 10px 6px;
-    border: none;
-    background: none;
-
-    li {
-      width: 189px;
-      line-height: 20px;
-      display: inline-block;
-      text-decoration: none;
-      font-weight: 700;
-      color: #333;
-      font-size: 13px;
-      border-bottom: 1px solid transparent;
-      border-radius: 5px;
-      margin-top: 0;
-      margin-bottom: 7px;
-    }
-  }
-  // Todo will be deleted
-  div.edit-pg-failover-order-with-details {
-    flex: 1 1 auto;
-    flex-direction: column;
-    display: flex;
-  }
-  .flex-grow-auto {
-    flex: 1 0 auto;
-  }
-  .relative-container {
-    position: relative;
-  }
-  .fill-parent {
-    overflow: visible;
-    height: 100%;
-    width: 100%;
-  }
-  .absolute-container {
-    position: absolute;
-  }
-  .flex-row {
-    display: flex;
-    flex-direction: row;
-  }
-  .failover-order-master {
-    flex: 0 0 200px;
-    margin-right: 10px;
-    margin-bottom: 2px;
-  }
-  .absolute-container {
-    position: absolute;
-  }
-  .flex-column {
-    display: flex;
-  }
-  .flex-column {
-    flex-direction: column;
-  }
-
-  .k-widget {
-    height: 100%;
-    box-sizing: border-box;
-    border: none;
-    box-shadow: none;
-  }
-  .k-header.k-grid-toolbar {
-    background-color: #fff;
-    padding: 8px 0 3px;
-    border: none;
-  }
-  .k-grid-toolbar:first-child {
-    border-radius: 2px 2px 0 0;
-  }
-  .vui-action-bar ul {
-    margin: 0;
-  }
-  ol,
-  ul {
-    list-style-position: inside;
-    padding-left: 0;
-  }
-  .vui-action-bar ul li {
-    padding-right: 4px;
-    display: inline-block;
-    list-style: none;
-    vertical-align: middle;
-    line-height: 20px;
-  }
-  .k-grid .k-grid-header {
-    position: relative;
-    border-radius: 3px 3px 0 0;
-    overflow: hidden;
-    background-color: #fafafa;
-    padding-right: 18px;
-    border: none;
-
-    .k-grid-header-wrap {
-      display: none;
-      border-right: 0;
-      border-color: #ccc;
-    }
-  }
-  .k-grid-header table {
-    table-layout: fixed;
-  }
-  .k-grid-header-wrap > table {
-    margin-bottom: -1px;
-
-    col {
-      width: 150px;
-    }
-  }
-  .k-grid table {
-    width: 100%;
-    margin: 0;
-    max-width: none;
-    border-collapse: separate;
-    border-spacing: 0;
-    empty-cells: show;
-    border-width: 0;
-    outline: 0;
-  }
-  .k-grid-header thead tr {
-    height: 24px;
-  }
-  .k-grid-header th.k-header:first-child {
-    border-left: 1px solid #ddd;
-  }
-  .k-grid-header th.k-header {
-    color: #565656;
-    background-color: #fafafa;
-    font-size: 12px;
-    font-weight: 600;
-    border-left: #ddd 1px;
-    height: 24px;
-    vertical-align: middle;
-    padding: 0 0 0 12px;
-    border-bottom: none;
-  }
-  .k-grid-header th.k-header {
-    overflow: hidden;
-    border: solid #ccc;
-    border-width: 0 0 2px 1px;
-    padding: 0.5em 0.6em 0.4em;
-    font-weight: 400;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    text-align: left;
-  }
-  .k-header > .k-grid-filter {
-    margin-right: 3px !important;
-  }
-  .k-header > .k-grid-filter,
-  .k-header > .k-header-column-menu {
-    float: right;
-    margin: -0.5em -0.6em -0.4em;
-    padding: 0.5em 0.2em 0.4em;
-    position: relative;
-    z-index: 1;
-  }
-  .k-grid-content {
-    width: auto;
-    overflow-y: scroll;
-    padding-right: 3px;
-    height: 200px;
-  }
-  .k-selectable {
-    height: auto;
-
-    col {
-      width: 150px;
-    }
-  }
-  ul li span.disabled {
-    opacity: 0.4;
-    pointer-events: none;
-  }
-  .k-grid.k-widget .k-grid-content,
-  .k-grid.k-widget .k-grid-content-locked {
-    border-left: 1px solid #ddd;
-    border-right: 1px solid #ddd;
-  }
-  .k-grid-content {
-    background: #fff;
-  }
-  .no-column-header .k-grid-content {
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-  }
-  .k-grid-content {
-    min-height: 35px;
-  }
-  .k-grid-content,
-  .k-grid-content-locked,
-  .k-pager-wrap {
-    white-space: normal;
-  }
-  .k-grid-content {
-    position: relative;
-    zoom: 1;
-  }
-  .k-widget {
-    line-height: normal;
-  }
-  .k-grid-content table,
-  .k-grid-content-locked > table,
-  .k-grid-footer table,
-  .k-grid-header table {
-    table-layout: fixed;
-  }
-
-  .k-grid-content table,
-  .k-grid-content-locked > table,
-  .k-grid-footer table,
-  .k-grid-header table {
-    table-layout: fixed;
-  }
-  .k-grid table {
-    width: 100%;
-    margin: 0;
-    max-width: none;
-    border-collapse: separate;
-    border-spacing: 0;
-    empty-cells: show;
-    border-width: 0;
-    outline: 0;
-  }
-  .vui-datagrid.k-grid.k-widget .k-grid-content tbody tr,
-  .vui-datagrid.k-grid.k-widget .k-grid-content-locked tbody tr,
-  .k-grid.k-widget .k-grid-content tbody tr,
-  .k-grid.k-widget .k-grid-content-locked tbody tr {
-    background-color: #fff;
-    height: 24px;
-    color: #565656;
-    cursor: default;
-    user-select: none;
-
-    &.k-state-selected {
-      background-color: #29414e;
-      color: #ffffff;
-      border-bottom: 1px solid;
-      border-bottom-color: transparent;
-    }
-
-    &:not(.k-state-selected):hover {
-      background-color: #e8e8e8;
-      color: #454545;
-
-      td {
-        border-bottom: 1px solid #666666;
-      }
-    }
-
-    span {
-      //TODO set font size to 13px when will add font
-      //font-family: ProximaNova;
-      font-size: 95%;
-    }
-  }
-  .k-widget.k-grid .k-grid-content tbody tr {
-    color: #565656;
-  }
-  .k-grid.k-widget .k-grid-content tbody tr td,
-  .k-grid.k-widget .k-grid-content-locked tbody tr td {
-    border-width: 0 0 1px;
-    border-color: #ddd;
-    font-size: 13px;
-    font-weight: 400;
-    line-height: 24px;
-    padding: 0 12px;
-  }
-  .k-grid tr td {
-    border-style: solid;
-  }
-  .assigned-adapters-datagrid .assigned-pnic-sections {
-    font-weight: 700;
-    margin: 0 -9px;
-  }
-  .action-link-container {
-    cursor: pointer;
-
-    svg {
-      transform: translateY(3px);
-    }
-  }
-  ul li span:hover:not(.disabled) {
-    text-decoration: none;
-    background-color: #e9f6fd;
-    border: 1px solid #c7e9ff;
-  }
-  ul li span {
-    padding: 4px;
-    line-height: 22px;
-    border: 1px solid transparent;
-  }
-  .k-grid td * {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .k-scrollbar-vertical {
-    top: 0;
-    right: 0;
-    width: 17px;
-    height: 100%;
-    overflow-x: hidden;
-  }
-
-  .k-scrollbar {
-    position: absolute;
-    overflow: scroll;
-  }
-  .k-grid.k-widget .k-header.k-grid-toolbar {
-    background-color: #fff;
-    padding: 8px 0 3px;
-    border: none;
-    width: 100%;
-  }
-  .absolute-container {
-    position: initial;
-  }
-
-  .failover-order-details {
-    flex: 1 0 auto;
-    border-left: 1px solid #ddd;
-
-    & > div {
-      padding-left: 10px;
-    }
-    .no-items-selected-container {
-      display: -ms-flexbox;
-      display: flex;
-      -ms-flex-align: center;
-      align-items: center;
-      -ms-flex-pack: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
-    .no-items-selected-text {
-      font-size: 16px;
-      font-weight: 700;
-      color: #a0a0a0;
-    }
-    .absolute-container {
-      position: absolute;
-    }
-  }
-  .compact {
-    padding-top: 0;
-  }
-  .failover-order-with-details-title {
-    margin: 0 !important;
-    padding-top: 0 !important;
-  }
-  .element-disabled {
-    pointer-events: none;
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-  // Todo will be deleted
-  .danger-not-valid {
-    border: 2px solid red;
-    border-bottom: 1px solid #db2100;
-  }
-  .tooltip-field {
-    margin-right: 12px;
-  }
-  .property-value-group.tooltip-field-container {
-    width: 177.6px;
-  }
-  .adapter-icon-positioning {
-    transform: translate(-2px, 5px);
-  }
-
-  .wizard-content-port {
-    .horizontal-flex-container {
-      min-height: 24px;
-      margin-bottom: 0;
-    }
-
-    .radio {
-      min-height: 39px;
-      margin: 10px 0;
-    }
-
-    .form-block {
-      margin: 12px 0 24px 0;
-      padding-left: 23px;
-
-      &.form-block-ipv {
-        input[type='text'] {
-          width: 143px;
-        }
-
-        .horizontal-flex-container > label {
-          margin-right: 50px;
-        }
-      }
-    }
-
-    .edit-vmkernel-adapter-section {
-      padding-top: 12px;
-
-      label {
-        input[type='checkbox'] {
-          margin-right: 4px;
-          transform: translateY(1px);
-        }
-      }
-
-      .horizontal-flex-container {
-        margin-bottom: 5px;
-      }
-    }
-  }
-}
-
-.loader {
-  position: absolute;
-  z-index: 1000;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.3);
-
-  .spinner {
-    left: unset;
-  }
-}
-</style>
+<template>
+  <div>
+    <atoms-modal
+      :width="props.width"
+      :height="props.height"
+      :show="props.show"
+      :title="title"
+      :modal-loading="modalLoading"
+      :class="[
+        'diagram-action__edit',
+        {
+          'is-dark': props.isDarkMode,
+        },
+      ]"
+      @hide="onHideEditSettingsModal"
+      @submit="onSendDataRequest"
+    >
+      <template #modalBody>
+        <common-diagram-main-modals-edit-settings
+          :items="props.items"
+          :view-name="props.viewName"
+          :initial-data="props.initialData"
+          :adapters="props.adapters"
+          :flag-send-data="flagSendData"
+          @send-edit-data="onSendData"
+          @change-edit-fields-data="onChangeEditFieldsData"
+          @check-network-label="onCheckNetworkLabel"
+        />
+      </template>
+    </atoms-modal>
+    <div v-show="true" class="loader">
+      <i class="fa clr-tree-node-caret-icon spinner spinner" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_ModalsInitialData,
+  UI_I_EditFieldsData,
+  UI_I_SwitchAdapters,
+} from '~/components/common/diagramMain/models/interfaces'
+
+// Props from up
+interface UI_I_PortViewSettingsModalProps {
+  show: boolean
+  viewName: string
+  width: string
+  height: string
+  title?: string
+  items: {
+    value: string
+    text: string
+  }[]
+  initialData?: UI_I_ModalsInitialData
+  adapters?: UI_I_SwitchAdapters
+  isDarkMode: boolean
+}
+
+const props = withDefaults(defineProps<UI_I_PortViewSettingsModalProps>(), {
+  initialData: () => ({}),
+  title: 'Network',
+  adapters: () => ({
+    totalPages: 0,
+    totalItems: 0,
+    items: [],
+  }),
+})
+
+const modalLoading = ref<boolean>(false)
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Title
+const title = computed(
+  () => props.title + localization.value.networkEditSettings
+)
+
+// Modal hiding
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (
+    event: 'send-edit-data',
+    type: string,
+    hideModal: () => void,
+    name?: string
+  ): void
+  (
+    event: 'check-network-label',
+    networkLabel: string,
+    cb: (error_message: string) => void,
+    hideLoader?: () => void
+  ): void
+}>()
+
+const onCheckNetworkLabel = (
+  networkLabel: string,
+  cb: (error_message: string) => void
+) => {
+  emits('check-network-label', networkLabel, cb)
+}
+
+const onHideEditSettingsModal = (): void => {
+  emits('hide')
+}
+
+const onChangeEditFieldsData = (newEditFieldsData: UI_I_EditFieldsData) => {
+  emits('change-edit-fields-data', newEditFieldsData)
+}
+
+const flagSendData = ref(true)
+
+const onSendDataRequest = () => {
+  flagSendData.value = !flagSendData.value
+}
+const onSendData = (type: string) => {
+  modalLoading.value = true
+  emits('send-edit-data', type, onHideEditSettingsModal, props.title)
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.diagram-action__edit) {
+  .table-fixed-height {
+    min-height: 200px;
+    max-height: 227px;
+    overflow-y: auto;
+  }
+  .modal-content {
+    display: flex;
+    flex-direction: column;
+  }
+  .modal-header {
+    border-bottom: 1px solid #a6a6a6;
+    padding: 0;
+  }
+
+  .wizard-tab__container {
+    display: flex;
+    flex: 1 1 100%;
+    box-sizing: border-box;
+  }
+  .wizard-content__container {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex: 1 1 100%;
+    box-sizing: border-box;
+    order: 2;
+    overflow-y: auto;
+    padding: 16px 15px 10px 10px;
+  }
+  .wizard-content {
+    height: auto;
+    width: inherit;
+    margin: 0;
+  }
+  .flex-property-value-group {
+    margin-left: 10px;
+    flex: 1 0 0;
+
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: inner-spin-button;
+    }
+  }
+
+  .flex-property-value-group.overridable-dropdown {
+    max-width: 390px;
+    min-width: 366px;
+  }
+  .overridable-dropdown .flex-property-label-group {
+    flex-basis: auto;
+    padding-left: 0;
+    min-height: 36px;
+  }
+  .flex-property-value-group .select {
+    max-width: 300px;
+
+    select {
+      color: #565656;
+      height: 24px;
+    }
+
+    select:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+  .form-block {
+    margin: 12px 0 24px;
+  }
+  section.form-block {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+  .flex-property-value-group {
+    height: 36px;
+  }
+  .flex-property-label-group.dummy {
+    visibility: hidden;
+    flex-basis: auto;
+  }
+  label.normal-weight {
+    font-weight: 400;
+    position: relative;
+    display: inline-block;
+    min-height: 1.2rem;
+    padding-left: 1.1rem;
+    cursor: pointer;
+    line-height: 1.2rem;
+  }
+  .flex-property-label-group.large {
+    flex: 0 0 180px;
+    flex-basis: 210px;
+  }
+  .checkbox-inline {
+    position: relative;
+    display: inline-block;
+    margin-bottom: 0;
+    vertical-align: middle;
+    font-weight: 400;
+    cursor: pointer;
+
+    input:focus + label::before {
+      box-shadow: none;
+    }
+
+    label {
+      font-size: 11.05px;
+      margin-bottom: 5px;
+      padding-left: 22px;
+      line-height: 24px;
+    }
+    label.normal-font-size {
+      font-size: 13px;
+      margin-bottom: 0;
+    }
+    &.with-margin {
+      min-height: 20px;
+      margin-top: 10px;
+      margin-bottom: 10px;
+    }
+  }
+  .horizontal-flex-container {
+    margin-bottom: 5px;
+    min-height: 36px;
+    display: flex;
+    flex-direction: row;
+  }
+  .no-margin {
+    margin-bottom: 0;
+  }
+  .port-properties-vlanid-row {
+    padding-top: 8px;
+  }
+  .property-label-group {
+    width: 140px;
+  }
+  .property-value-group {
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: inner-spin-button;
+    }
+
+    margin-left: 10px;
+
+    fieldset {
+      display: flex;
+      flex-flow: column;
+      padding-left: 23px;
+    }
+
+    input:not([type='checkbox']) {
+      width: 280px;
+    }
+    .combobox-container {
+      width: 160px;
+
+      input {
+        width: 160px;
+      }
+    }
+  }
+  .sidenav {
+    width: 220px;
+    height: 100%;
+    padding: 10px 5px 10px 6px;
+    border: none;
+    background: none;
+
+    li {
+      width: 189px;
+      line-height: 20px;
+      display: inline-block;
+      text-decoration: none;
+      font-weight: 700;
+      color: #333;
+      font-size: 13px;
+      border-bottom: 1px solid transparent;
+      border-radius: 5px;
+      margin-top: 0;
+      margin-bottom: 7px;
+    }
+  }
+  // Todo will be deleted
+  div.edit-pg-failover-order-with-details {
+    flex: 1 1 auto;
+    flex-direction: column;
+    display: flex;
+  }
+  .flex-grow-auto {
+    flex: 1 0 auto;
+  }
+  .relative-container {
+    position: relative;
+  }
+  .fill-parent {
+    overflow: visible;
+    height: 100%;
+    width: 100%;
+  }
+  .absolute-container {
+    position: absolute;
+  }
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+  .failover-order-master {
+    flex: 0 0 200px;
+    margin-right: 10px;
+    margin-bottom: 2px;
+  }
+  .absolute-container {
+    position: absolute;
+  }
+  .flex-column {
+    display: flex;
+  }
+  .flex-column {
+    flex-direction: column;
+  }
+
+  .k-widget {
+    height: 100%;
+    box-sizing: border-box;
+    border: none;
+    box-shadow: none;
+  }
+  .k-header.k-grid-toolbar {
+    background-color: #fff;
+    padding: 8px 0 3px;
+    border: none;
+  }
+  .k-grid-toolbar:first-child {
+    border-radius: 2px 2px 0 0;
+  }
+  .vui-action-bar {
+    padding: 8px 0 3px;
+  }
+  .vui-action-bar ul {
+    margin: 0;
+  }
+  ol,
+  ul {
+    list-style-position: inside;
+    padding-left: 0;
+  }
+  .vui-action-bar ul li {
+    padding-right: 4px;
+    display: inline-block;
+    list-style: none;
+    vertical-align: middle;
+    line-height: 20px;
+  }
+  .k-grid .k-grid-header {
+    position: relative;
+    border-radius: 3px 3px 0 0;
+    overflow: hidden;
+    background-color: #fafafa;
+    padding-right: 18px;
+    border: none;
+
+    .k-grid-header-wrap {
+      display: none;
+      border-right: 0;
+      border-color: #ccc;
+    }
+  }
+  .k-grid-header table {
+    table-layout: fixed;
+  }
+  .k-grid-header-wrap > table {
+    margin-bottom: -1px;
+
+    col {
+      width: 150px;
+    }
+  }
+  .k-grid table {
+    width: 100%;
+    margin: 0;
+    max-width: none;
+    border-collapse: separate;
+    border-spacing: 0;
+    empty-cells: show;
+    border-width: 0;
+    outline: 0;
+  }
+  .k-grid-header thead tr {
+    height: 24px;
+  }
+  .k-grid-header th.k-header:first-child {
+    border-left: 1px solid #ddd;
+  }
+  .k-grid-header th.k-header {
+    color: #565656;
+    background-color: #fafafa;
+    font-size: 12px;
+    font-weight: 600;
+    border-left: #ddd 1px;
+    height: 24px;
+    vertical-align: middle;
+    padding: 0 0 0 12px;
+    border-bottom: none;
+  }
+  .k-grid-header th.k-header {
+    overflow: hidden;
+    border: solid #ccc;
+    border-width: 0 0 2px 1px;
+    padding: 0.5em 0.6em 0.4em;
+    font-weight: 400;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: left;
+  }
+  .k-header > .k-grid-filter {
+    margin-right: 3px !important;
+  }
+  .k-header > .k-grid-filter,
+  .k-header > .k-header-column-menu {
+    float: right;
+    margin: -0.5em -0.6em -0.4em;
+    padding: 0.5em 0.2em 0.4em;
+    position: relative;
+    z-index: 1;
+  }
+  .k-grid-content {
+    width: auto;
+    overflow-y: scroll;
+    padding-right: 3px;
+    height: 200px;
+  }
+  .k-selectable {
+    height: auto;
+
+    col {
+      width: 150px;
+    }
+  }
+  ul li span.disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+  .k-grid.k-widget .k-grid-content,
+  .k-grid.k-widget .k-grid-content-locked {
+    border-left: 1px solid #ddd;
+    border-right: 1px solid #ddd;
+  }
+  .k-grid-content {
+    background: #fff;
+  }
+  .no-column-header .k-grid-content {
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+  }
+  .k-grid-content {
+    min-height: 35px;
+  }
+  .k-grid-content,
+  .k-grid-content-locked,
+  .k-pager-wrap {
+    white-space: normal;
+  }
+  .k-grid-content {
+    position: relative;
+    zoom: 1;
+  }
+  .k-widget {
+    line-height: normal;
+  }
+  .k-grid-content table,
+  .k-grid-content-locked > table,
+  .k-grid-footer table,
+  .k-grid-header table {
+    table-layout: fixed;
+  }
+
+  .k-grid-content table,
+  .k-grid-content-locked > table,
+  .k-grid-footer table,
+  .k-grid-header table {
+    table-layout: fixed;
+  }
+  .k-grid table {
+    width: 100%;
+    margin: 0;
+    max-width: none;
+    border-collapse: separate;
+    border-spacing: 0;
+    empty-cells: show;
+    border-width: 0;
+    outline: 0;
+  }
+  .vui-datagrid.k-grid.k-widget .k-grid-content tbody tr,
+  .vui-datagrid.k-grid.k-widget .k-grid-content-locked tbody tr,
+  .k-grid.k-widget .k-grid-content tbody tr,
+  .k-grid.k-widget .k-grid-content-locked tbody tr {
+    background-color: #fff;
+    height: 24px;
+    color: #565656;
+    cursor: default;
+    user-select: none;
+
+    &.k-state-selected {
+      background-color: #29414e;
+      color: #ffffff;
+      border-bottom: 1px solid;
+      border-bottom-color: transparent;
+    }
+
+    &:not(.k-state-selected):hover {
+      background-color: #e8e8e8;
+      color: #454545;
+
+      td {
+        border-bottom: 1px solid #666666;
+      }
+    }
+
+    span {
+      //TODO set font size to 13px when will add font
+      //font-family: ProximaNova;
+      font-size: 95%;
+    }
+  }
+  .k-widget.k-grid .k-grid-content tbody tr {
+    color: #565656;
+  }
+  .k-grid.k-widget .k-grid-content tbody tr td,
+  .k-grid.k-widget .k-grid-content-locked tbody tr td {
+    border-width: 0 0 1px;
+    border-color: #ddd;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 24px;
+    padding: 0 12px;
+  }
+  .k-grid tr td {
+    border-style: solid;
+  }
+  .assigned-adapters-datagrid .assigned-pnic-sections {
+    font-weight: 700;
+    margin: 0 -9px;
+  }
+  .action-link-container {
+    cursor: pointer;
+
+    svg {
+      transform: translateY(3px);
+    }
+  }
+  ul li span:hover:not(.disabled) {
+    text-decoration: none;
+    background-color: #e9f6fd;
+    border: 1px solid #c7e9ff;
+  }
+  ul li span {
+    padding: 4px;
+    line-height: 22px;
+    border: 1px solid transparent;
+  }
+  .k-grid td * {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .k-scrollbar-vertical {
+    top: 0;
+    right: 0;
+    width: 17px;
+    height: 100%;
+    overflow-x: hidden;
+  }
+
+  .k-scrollbar {
+    position: absolute;
+    overflow: scroll;
+  }
+  .k-grid.k-widget .k-header.k-grid-toolbar {
+    background-color: #fff;
+    padding: 8px 0 3px;
+    border: none;
+    width: 100%;
+  }
+  .absolute-container {
+    position: initial;
+  }
+
+  .failover-order-details {
+    flex: 1 0 auto;
+    border-left: 1px solid #ddd;
+
+    & > div {
+      margin-left: 10px;
+    }
+    .no-items-selected-container {
+      display: -ms-flexbox;
+      display: flex;
+      -ms-flex-align: center;
+      align-items: center;
+      -ms-flex-pack: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+    .no-items-selected-text {
+      font-size: 16px;
+      font-weight: 700;
+      color: #a0a0a0;
+    }
+    .absolute-container {
+      position: absolute;
+    }
+  }
+  .compact {
+    padding-top: 0;
+  }
+  .failover-order-with-details-title {
+    margin: 0 !important;
+    padding-top: 0 !important;
+  }
+  .element-disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+  // Todo will be deleted
+  .danger-not-valid {
+    border: 2px solid red;
+    border-bottom: 1px solid #db2100;
+  }
+  .tooltip-field {
+    margin-right: 12px;
+  }
+  .property-value-group.tooltip-field-container {
+    width: 177.6px;
+  }
+  .adapter-icon-positioning {
+    transform: translate(-2px, 5px);
+  }
+
+  .wizard-content-port {
+    .horizontal-flex-container {
+      min-height: 24px;
+      margin-bottom: 0;
+    }
+
+    .radio {
+      min-height: 39px;
+      margin: 10px 0;
+    }
+
+    .form-block {
+      margin: 12px 0 24px 0;
+      padding-left: 23px;
+
+      &.form-block-ipv {
+        input[type='text'] {
+          width: 143px;
+        }
+
+        .horizontal-flex-container > label {
+          margin-right: 50px;
+        }
+      }
+    }
+
+    .edit-vmkernel-adapter-section {
+      padding-top: 12px;
+
+      label {
+        input[type='checkbox'] {
+          margin-right: 4px;
+          transform: translateY(1px);
+        }
+      }
+
+      .horizontal-flex-container {
+        margin-bottom: 5px;
+      }
+    }
+  }
+}
+
+.loader {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+
+:deep(.diagram-action__edit.is-dark) {
+  .property-label-group {
+    color: var(--main-color-mode2);
+  }
+  .flex-property-label-group {
+    color: var(--main-color-mode2);
+  }
+  .flex-property-value-group {
+    select {
+      color: #fff;
+    }
+  }
+  .failover-order-master {
+    .secondary-title label {
+      color: #fff;
+    }
+  }
+  .k-grid-content {
+    background-color: var(--modal-bg-color);
+  }
+  .vui-action-bar {
+    background-color: var(--pannel-bg-color);
+    color: var(--title-color);
+
+    .action-link-container:not(.disabled) {
+      &:hover {
+        background-color: #29414e;
+        border: 1px solid #c7e9ff;
+      }
+    }
+
+    svg {
+      fill: #fff;
+    }
+  }
+
+  .k-grid.k-widget .k-grid-content {
+    border-left: 1px solid #485764;
+    border-right: 1px solid #485764;
+    border-top: 1px solid #ddd;
+    border-bottom: 1px solid #ddd;
+
+    tbody tr {
+      background-color: var(--modal-bg-color);
+
+      td {
+        border-bottom: 1px solid #666666;
+        border-color: #666666;
+      }
+
+      &:hover {
+        background-color: #324f61;
+        color: var(--title-color);
+
+        td {
+          border-bottom: 1px solid #ffffff;
+        }
+      }
+
+      &.k-state-selected {
+        background-color: #d8e3e9;
+        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
+
+        td span {
+          color: #000;
+        }
+      }
+    }
+  }
+
+  .failover-order-details {
+    &.relative-container .absolute-container {
+      background-color: var(--pannel-bg-color);
+      color: var(--main-color-mode2);
+
+      &:has(.no-items-selected-container) {
+        background-color: transparent;
+      }
+    }
+
+    td span {
+      color: var(--main-color-mode2);
+    }
+    button span {
+      color: var(--main-color-mode2);
+
+      &:hover:not(.disabled) {
+        background-color: transparent;
+        border: 1px solid transparent;
+      }
+    }
+    button.active span {
+      color: #fff;
+    }
+  }
+
+  .select-adapter-info span {
+    color: var(--main-color-mode2);
+  }
+}
+</style>