iguazio.dashboard-react-controls 3.2.15 → 3.2.16

package/dist/scss/common.scss

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