iguazio.dashboard-react-controls 3.2.14 → 3.2.15

package/dist/scss/common.scss

@@ -1,1056 +0,0 @@
-@use './colors';
-@use './borders';
-@use './variables';
-@use './shadows';
-@use './mixins';
-
-:root {
-  --chipBlockMarginRight: 5px;
-  --tipArrowLength: 10px;
-  --tipIconLength: 16px;
-  --tipArrowOffset: 20px;
-  --amethystColor: #{colors.$amethyst};
-  --brightTurquoiseColor: #{colors.$brightTurquoise};
-  --ceriseRedColor: #{colors.$ceriseRed};
-  --cornflowerBlueTwoColor: #{colors.$cornflowerBlueTwo};
-  --doveGrayColor: #{colors.$doveGray};
-  --grandisColor: #{colors.$grandis};
-  --javaColor: #{colors.$java};
-  --mulledWineColor: #{colors.$mulledWine};
-  --mischkaColor: #{colors.$mischka};
-}
-
-/* =========== GENERAL ============= */
-
-#root {
-  z-index: 1;
-  display: flex;
-  flex: 1;
-  width: 100%;
-  isolation: isolate;
-}
-
-#overlay_container {
-  position: fixed;
-  bottom: 0;
-  z-index: 2;
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-}
-
-button {
-  padding: 0;
-  font-family: Roboto, sans-serif;
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-
-  &:active,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-input,
-textarea {
-  overflow-x: hidden;
-  font-weight: normal;
-  font-size: 15px;
-  font-family: Roboto, sans-serif;
-  font-style: normal;
-  line-height: 18px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  border: 0;
-  color: inherit;
-  background-color: transparent;
-  padding: 0;
-  resize: none;
-
-  &::placeholder {
-    color: colors.$spunPearl;
-  }
-
-  &::-webkit-input-placeholder {
-    /* Chrome/Opera/Safari */
-    color: colors.$spunPearl;
-  }
-
-  &::-moz-placeholder {
-    /* Firefox 19+ */
-    color: colors.$spunPearl;
-  }
-
-  &:-ms-input-placeholder {
-    /* IE 10+ */
-    color: colors.$spunPearl;
-  }
-
-  &:-moz-placeholder {
-    /* Firefox 18- */
-    color: colors.$spunPearl;
-  }
-
-  &:disabled {
-    background: transparent;
-    cursor: not-allowed;
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-    box-shadow: none;
-  }
-}
-
-.link {
-  color: colors.$cornflowerBlue;
-  cursor: pointer;
-  line-height: 20px;
-
-  &:hover {
-    text-decoration: underline;
-    text-underline-offset: 3px;
-  }
-}
-
-.warning-text {
-  color: colors.$amaranth;
-  padding: 5px 0;
-  line-height: 1.5;
-  font-size: 13px;
-}
-
-[class*='igz-transition'] {
-  transition: opacity 200ms ease-in-out;
-}
-
-.igz-transition {
-  &-enter {
-    opacity: 0;
-  }
-
-  &-enter-active {
-    opacity: 1;
-  }
-
-  &-exit {
-    opacity: 1;
-  }
-
-  &-exit-active {
-    opacity: 0;
-  }
-}
-
-.d-flex {
-  display: flex;
-}
-
-.visibility-hidden {
-  visibility: hidden;
-}
-
-.data-ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.wrap {
-  white-space: pre-wrap;
-}
-
-iframe {
-  width: 100%;
-  height: 100%;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-*,
-::after,
-::before {
-  box-sizing: border-box;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: rgba(colors.$black, 0.1);
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: rgba(colors.$black, 0.25);
-  border-radius: 10px;
-
-  &:hover {
-    background-color: rgba(colors.$black, 0.4);
-  }
-}
-
-/* =========== CONTENT ============= */
-
-.content {
-  position: relative;
-  flex-direction: column;
-  min-width: 800px;
-  padding: 15px 24px 10px;
-  background-color: colors.$white;
-  overflow: auto;
-  min-height: 0;
-
-  @include mixins.displayFlex;
-
-  @media screen and (min-width: 1300px) {
-    padding: 15px 64px 15px;
-  }
-
-  &__header {
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: space-between;
-    min-height: 70px;
-    padding: 14px 24px;
-    background-color: colors.$white;
-    box-shadow: shadows.$headerShadow;
-
-    .btn {
-      &_register {
-        text-transform: capitalize;
-      }
-    }
-  }
-
-  .table-container {
-    position: relative;
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    background-color: colors.$white;
-
-    .no_data {
-      margin: auto;
-      color: colors.$mulledWine;
-    }
-  }
-
-  &-wrapper {
-    display: flex;
-    flex: 1 1;
-    flex-direction: column;
-    min-width: 100%;
-    min-height: 0;
-  }
-
-  &__action-bar-wrapper {
-    display: flex;
-    flex-flow: row wrap;
-    align-items: center;
-    background-color: colors.$white;
-
-    &_hidden {
-      display: none;
-    }
-
-    .content-menu {
-      flex: 0;
-      margin-right: 20px;
-      margin-bottom: 15px;
-
-      &__item {
-        white-space: nowrap;
-      }
-    }
-  }
-
-  &__history-back-link-wrapper {
-    padding-bottom: 5px;
-
-    .history-back-link__title {
-      max-width: 100%;
-    }
-  }
-
-  .action-bar {
-    display: flex;
-    flex: 1;
-    align-items: flex-start;
-    justify-content: flex-end;
-    width: 100%;
-    margin-bottom: 15px;
-
-    &_hidden {
-      display: none;
-    }
-
-    &__filters {
-      &-item {
-        &:not(:last-child) {
-          margin: 0 15px 0 0;
-        }
-      }
-    }
-  }
-}
-
-/* =========== CONTENT MENU ============= */
-
-.content-menu {
-  display: inline-flex;
-  align-items: center;
-  width: 100%;
-  min-height: 40px;
-
-  &__tabs-wrapper {
-    overflow-x: hidden;
-  }
-
-  &__tabs {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    list-style-type: none;
-    transition: transform 0.2s ease-in-out;
-
-    @include mixins.resetSpaces;
-  }
-
-  &__tab {
-    align-items: center;
-    margin: 0 15px 0 0;
-    padding: 5px;
-    color: colors.$topaz;
-    font-weight: 400;
-    line-height: 1;
-    white-space: nowrap;
-    text-align: center;
-    text-transform: capitalize;
-    cursor: pointer;
-
-    &:first-child {
-      padding-left: 0;
-    }
-
-    &-xs {
-      font-size: 16px;
-    }
-
-    &-sm {
-      font-size: 16px;
-
-      @media screen and (min-width: 1300px) {
-        font-size: 18px;
-      }
-    }
-
-    &-md {
-      font-size: 18px;
-
-      @media screen and (min-width: 1300px) {
-        font-size: 20px;
-      }
-    }
-
-    &-lg {
-      font-size: 20px;
-
-      @media screen and (min-width: 1300px) {
-        font-size: 22px;
-      }
-    }
-
-    &::after {
-      display: block;
-      width: 100%;
-      padding-bottom: 5px;
-      border-width: 2px;
-      border-bottom: 2px solid colors.$cornflowerBlue;
-      transform: scale(0);
-      opacity: 0;
-      transition: all 0.3s ease-in-out;
-      content: '';
-    }
-
-    &:hover:not([class*='_active']) {
-      &::after {
-        transform: scale(1);
-        opacity: 0.6;
-      }
-    }
-
-    & > * {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-
-      &.content-menu__tab-tip {
-        gap: 5px;
-      }
-
-      &.content-menu__tab-icon {
-        gap: 5px;
-
-        & > * {
-          svg {
-            width: 17px;
-            height: 17px;
-
-            path {
-              fill: colors.$topaz;
-            }
-          }
-        }
-      }
-    }
-
-    &.content-menu__tab_active {
-      svg {
-        path {
-          fill: colors.$cornflowerBlue;
-        }
-      }
-    }
-
-    &_active {
-      color: colors.$primary;
-      font-weight: 700;
-      pointer-events: none;
-
-      .content-menu__tab-tip {
-        svg {
-          pointer-events: auto;
-        }
-      }
-
-      &::after {
-        transform: scale(1);
-        opacity: 1;
-      }
-
-      a {
-        cursor: default;
-      }
-
-      .content-menu__tab-icon {
-        svg {
-          path {
-            fill: colors.$cornflowerBlue;
-          }
-        }
-      }
-    }
-  }
-
-  &_disabled {
-    pointer-events: none;
-
-    a {
-      cursor: not-allowed;
-    }
-  }
-
-  &__preview {
-    color: colors.$spunPearl;
-    font-size: 10px;
-  }
-
-  .tabs-slider {
-    &__arrow {
-      display: flex;
-      width: 30px;
-      min-width: fit-content;
-      max-width: 24px;
-      border-radius: 8px;
-
-      &_left {
-        padding-top: 3px;
-        transform: rotate(180deg);
-      }
-
-      &_right {
-        padding-bottom: 3px;
-      }
-
-      &_hidden {
-        display: none;
-      }
-
-      &_disabled {
-        pointer-events: none;
-
-        & path {
-          fill: colors.$spunPearl;
-        }
-      }
-
-      &:hover:not(.details-menu__arrow_disabled) {
-        background-color: colors.$mulledWineThree;
-        cursor: pointer;
-      }
-
-      svg {
-        align-self: center;
-      }
-    }
-  }
-}
-
-/* =========== TABLE ============= */
-
-.table {
-  position: relative;
-  width: 100%;
-  text-align: left;
-  border-spacing: 0;
-
-  .table {
-    &-row {
-      display: flex;
-      flex-direction: row;
-      min-width: 100%;
-      min-height: 50px;
-      background-color: inherit;
-
-      &:not(.parent-row_expanded) > * {
-        position: relative;
-        display: inline-flex;
-        flex: 1;
-        align-items: center;
-        border-bottom: borders.$tableRowBorder;
-
-        @include mixins.tableDet(8px, 5px, 8px, 10px);
-
-        &:first-child {
-          padding-left: 30px;
-        }
-
-        &.table-cell {
-          &-name {
-            position: sticky;
-            left: 0;
-            z-index: 1;
-            min-width: 250px;
-            padding-right: 10px;
-          }
-
-          &-icon {
-            position: sticky;
-            right: 0;
-            justify-content: center;
-            max-width: 85px;
-            padding: 0;
-
-            @include mixins.tableColumnFlex(0, 50px);
-
-            & > :first-child {
-              padding: 0;
-            }
-
-            &__run-icon {
-              margin-bottom: -2px;
-              transform: rotate(-90deg) scale(1.2);
-            }
-          }
-        }
-      }
-
-      &.parent-row {
-        &:not(.parent-row_expanded) {
-          &:not(.parent-row_without-actions) {
-            .table-cell-icon {
-              .actions-menu {
-                &__container_extended {
-                  &::before {
-                    background: linear-gradient(
-                      90deg,
-                      rgba(255, 255, 255, 0) 0%,
-                      rgba(245, 247, 255, 1) 100%
-                    );
-                  }
-                }
-              }
-            }
-
-            &:hover {
-              .table-cell-icon {
-                .actions-menu {
-                  &__container {
-                    display: flex;
-
-                    &_extended {
-                      background-color: colors.$ghostWhite;
-
-                      &::before {
-                        background: linear-gradient(
-                          90deg,
-                          rgba(255, 255, 255, 0) 0%,
-                          rgba(245, 247, 255, 1) 100%
-                        );
-                      }
-                    }
-
-                    .btn {
-                      min-width: 24px;
-                      padding: 0;
-                      border: none;
-
-                      &:hover {
-                        background-color: transparent;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        .expand-arrow {
-          position: absolute;
-          left: 5px;
-          cursor: pointer;
-        }
-
-        .best-iteration {
-          position: absolute;
-          top: auto;
-          bottom: auto;
-          left: 5px;
-          margin-top: 3px;
-        }
-
-        &_expanded {
-          flex-direction: column;
-          border: 0;
-
-          .table-row {
-            &:hover {
-              .table-cell-icon {
-                .actions-menu {
-                  &__container {
-                    display: flex;
-                  }
-                }
-              }
-            }
-          }
-
-          .row_grouped-by {
-            position: sticky;
-            top: #{variables.$headerRowHeight}px;
-            z-index: 3;
-            padding: 0;
-            background-color: colors.$white;
-
-            .expand-arrow {
-              transform: rotate(90deg);
-            }
-          }
-        }
-      }
-
-      .checkbox {
-        position: absolute;
-        left: 8px;
-        margin: 0;
-      }
-    }
-
-    &-header {
-      position: sticky;
-      top: 0;
-      z-index: 3;
-      min-width: 100%;
-
-      &-row {
-        min-height: #{variables.$headerRowHeight}px;
-      }
-
-      &__cell {
-        min-width: 75px;
-
-        @include mixins.tableHeader;
-
-        &:first-child {
-          border-radius: 4px 0 0 0;
-        }
-
-        &:last-child {
-          border-radius: 0 4px 0 0;
-        }
-      }
-    }
-
-    &-body {
-      position: relative;
-      z-index: 2;
-
-      &__cell {
-        .status {
-          display: flex;
-          flex: 0 1 12px;
-          align-items: center;
-          justify-content: center;
-          min-width: 12px;
-          margin-left: 5px;
-
-          & > * {
-            margin: 0;
-          }
-        }
-      }
-
-      .table-row {
-        background-color: colors.$white;
-
-        &:hover,
-        &_active {
-          background-color: colors.$ghostWhite;
-        }
-
-        & > * {
-          background-color: inherit;
-        }
-      }
-    }
-  }
-
-  &-main {
-    display: flex;
-    flex: 1;
-    flex-flow: column nowrap;
-    overflow-y: auto;
-    will-change: scroll-position;
-  }
-
-  &.table-with-details {
-    .table-cell-name {
-      min-width: 240px;
-      max-width: 240px;
-    }
-  }
-
-  &-fixed {
-    table-layout: fixed;
-  }
-}
-
-/* =========== FORM TABLE ============= */
-
-.form-table {
-  $tableHeaderHeight: 50px;
-
-  width: 100%;
-  max-height: 500px;
-  overflow: hidden;
-  overflow-y: auto;
-  background-color: colors.$white;
-
-  .form-table__row {
-    display: flex;
-    align-items: center;
-    min-height: $tableHeaderHeight;
-    border-bottom: borders.$primaryBorder;
-    background-color: colors.$white;
-    padding: 5px 0;
-
-    &.form-table__row_excluded {
-      .form-table__cell {
-        color: colors.$spunPearl;
-      }
-    }
-
-    &.form-table__row_hidden {
-      display: none;
-    }
-
-    &:not(.no-hover):hover {
-      &:not(.form-table__row_invalid) {
-        background-color: colors.$alabaster;
-      }
-
-      .form-table__actions-cell {
-        visibility: visible;
-      }
-    }
-
-    &.form-table__row_active {
-      background-color: colors.$alabaster;
-
-      .form-table__cell {
-        &:not(.form-table__actions-cell) {
-          padding-top: 6px;
-          padding-bottom: 6px;
-        }
-      }
-    }
-
-    &.form-table__row_invalid {
-      background-color: rgba(colors.$amaranth, 0.15);
-    }
-
-    &_multiline {
-      display: flex;
-      flex: 1;
-      flex-wrap: wrap;
-    }
-  }
-
-  .form-table__header-row,
-  .form-table__sub-header-row,
-  .form-table__action-row {
-    position: sticky;
-    z-index: 3;
-    height: $tableHeaderHeight;
-  }
-
-  .form-table__header-row {
-    border-top: borders.$primaryBorder;
-    font-size: 18px;
-    font-weight: bold;
-    top: 0;
-  }
-
-  .form-table__sub-header-row {
-    border: unset;
-    font-size: 16px;
-    font-weight: bold;
-    top: $tableHeaderHeight;
-  }
-
-  .form-table__action-row {
-    bottom: 0;
-    border: unset;
-
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      min-width: 44px;
-      padding: 10px;
-      color: colors.$cornflowerBlue;
-      font-size: 15px;
-      line-height: 18px;
-
-      svg {
-        width: 20px;
-        height: 20px;
-
-        rect {
-          fill: colors.$cornflowerBlue;
-        }
-      }
-    }
-  }
-
-  .form-table__cell {
-    display: flex;
-    overflow: hidden;
-    align-items: center;
-    padding: 3px 10px;
-    color: colors.$primary;
-
-    &.disabled {
-      color: colors.$spunPearl;
-    }
-
-    .form-table__name {
-      display: flex;
-      overflow: hidden;
-
-      &.form-table__name_with-asterisk {
-        &::after {
-          content: ' * ';
-          color: colors.$amaranth;
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-
-  .form-table__cell_min {
-    flex: 0.1;
-    min-width: 30px;
-  }
-
-  .form-table__cell_1 {
-    flex: 1;
-  }
-
-  .form-table__cell_2 {
-    flex: 2;
-  }
-
-  .form-table__cell_3 {
-    flex: 3;
-  }
-
-  .form-table__cell_4 {
-    flex: 4;
-  }
-
-  .form-table__cell_5 {
-    flex: 5;
-  }
-
-  .form-table__actions-cell {
-    flex: 0 1 auto;
-    visibility: hidden;
-    justify-content: flex-end;
-    min-width: variables.$actionsCellWidth;
-    padding: 0;
-
-    & > * {
-      margin: 0 5px 0 0;
-    }
-  }
-}
-
-.form-table_disabled {
-  .form-table__row {
-    &:not(.no-hover):hover {
-      .form-table__actions-cell {
-        visibility: hidden;
-      }
-    }
-  }
-
-  .form-table__action-row {
-    button {
-      color: colors.$spunPearl;
-
-      svg {
-        rect {
-          fill: colors.$spunPearl;
-        }
-      }
-    }
-  }
-}
-
-/* =========== HIDDEN CHIPS ============= */
-
-.chip-block-hidden {
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  top: unset;
-  right: unset;
-  left: unset;
-  bottom: unset;
-  width: min-content;
-  height: min-content;
-  min-width: 250px;
-  max-width: 100%;
-  max-height: 100%;
-  padding: 10px;
-  background-color: colors.$white;
-  border-radius: variables.$mainBorderRadius;
-  box-shadow: shadows.$hiddenChipsBlockShadow;
-  z-index: 9;
-  opacity: 0;
-
-  &__scrollable-container {
-    overflow: auto;
-    display: flex;
-    width: 100%;
-    flex-flow: row wrap;
-  }
-
-  &_bottom {
-    &::after {
-      @include mixins.hiddenChipBlockArrow();
-
-      top: -6px;
-    }
-  }
-
-  &_top {
-    &::before {
-      @include mixins.hiddenChipBlockArrow();
-
-      top: calc(100% - 6px);
-    }
-  }
-
-  &_left {
-    &::before,
-    &::after {
-      right: 15px;
-    }
-  }
-
-  &_visible {
-    opacity: 1;
-  }
-}
-
-/* =========== SORT ============= */
-
-.sortable-header {
-  &-cell {
-    position: relative;
-    border: 0;
-    border-radius: 0;
-    cursor: pointer;
-
-    .sort-icon {
-      position: absolute;
-      top: auto;
-      right: 2px;
-      bottom: auto;
-      display: none;
-    }
-
-    &_active {
-      background-color: colors.$alabaster;
-
-      .sort-icon {
-        display: block;
-      }
-    }
-
-    &:hover {
-      .sort-icon {
-        display: block;
-      }
-    }
-
-    label {
-      cursor: pointer;
-    }
-  }
-
-  &-label {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding-right: 25px;
-  }
-}