iguazio.dashboard-react-controls 3.0.4 → 3.1.1

package/dist/scss/common.scss

@@ -19,6 +19,8 @@
   --mischkaColor: #{colors.$mischka};
 }
 
+/* =========== GENERAL ============= */
+
 #root {
   z-index: 1;
   display: flex;
@@ -149,6 +151,613 @@ textarea {
   }
 }
 
+.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;
+
+  @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%;
+  }
+
+  &__action-bar-wrapper {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+
+    &_hidden {
+      display: none;
+    }
+
+    .content-menu {
+      flex: 0;
+      margin-right: 20px;
+      margin-bottom: 15px;
+
+      &__item {
+        white-space: nowrap;
+      }
+    }
+
+    .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;
+          }
+        }
+      }
+    }
+  }
+
+  &__history-back-link-wrapper {
+    padding-bottom: 5px;
+
+    .history-back-link__title {
+      max-width: 100%;
+    }
+  }
+}
+
+/* =========== 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;
 
@@ -340,6 +949,8 @@ textarea {
   }
 }
 
+/* =========== HIDDEN CHIPS ============= */
+
 .chip-block-hidden {
   position: fixed;
   display: flex;
@@ -394,3 +1005,47 @@ textarea {
     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;
+  }
+}