iguazio.dashboard-react-controls 3.2.14 → 3.2.15

package/dist/scss/mixins.scss

@@ -1,1231 +0,0 @@
-@use './colors';
-@use './borders';
-@use './variables';
-
-@mixin fixed {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-@mixin displayFlex {
-  display: flex;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-@mixin tableDet($topPadding, $rightPadding, $bottomPadding, $leftPadding) {
-  padding: $topPadding $rightPadding $bottomPadding $leftPadding;
-  text-align: left;
-}
-
-@mixin detailsMetadataStatisticsTable {
-  &__table {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    align-items: flex-start;
-
-    &-wrapper {
-      min-width: 100%;
-    }
-
-    &-header {
-      position: sticky;
-      top: 0;
-      z-index: 3;
-      display: flex;
-      min-width: 100%;
-      padding: 15px 10px;
-      color: colors.$topaz;
-      font-weight: bold;
-      background-color: colors.$white;
-      border-bottom: borders.$secondaryBorder;
-
-      .header-item {
-        text-transform: capitalize;
-      }
-    }
-
-    &-item {
-      display: flex;
-      align-items: center;
-      min-width: 70px;
-      padding: 0 5px;
-    }
-
-    &-row {
-      display: flex;
-      flex-direction: row;
-      min-width: 100%;
-      height: 45px;
-      border-bottom: borders.$secondaryBorder;
-    }
-  }
-}
-
-@mixin detailsItem {
-  color: colors.$topaz;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 24px;
-}
-
-@mixin jobsFilter($item, $left) {
-  position: relative;
-  margin-right: 16px;
-
-  &::before {
-    position: absolute;
-    top: 11px;
-    left: $left;
-    color: colors.$topaz;
-    content: $item;
-  }
-
-  &::after {
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    content: url('../images/dropdown.svg');
-  }
-}
-
-@mixin statusState($color, $bordered) {
-  display: inline-block;
-  width: 8px;
-  height: 8px;
-  min-width: 8px;
-  border-radius: 50%;
-
-  @if $bordered == true {
-    background-color: transparent;
-    border: 1.5px solid $color;
-  } @else {
-    background-color: $color;
-  }
-}
-
-@mixin chipFont($color) {
-  color: $color;
-
-  .item-icon-close {
-    svg {
-      path {
-        fill: $color;
-      }
-    }
-  }
-}
-
-@mixin editableChipFont($fontColor) {
-  color: $fontColor;
-
-  .input-label-key {
-    color: $fontColor;
-  }
-
-  .input-label-value {
-    color: $fontColor;
-  }
-
-  .edit-label-separator {
-    color: $fontColor;
-  }
-
-  .item-icon-close {
-    svg {
-      path {
-        fill: $fontColor;
-      }
-    }
-  }
-}
-
-@mixin chipButtonAddColor($color) {
-  svg {
-    rect,
-    path {
-      fill: $color;
-    }
-  }
-
-  &:hover {
-    svg {
-      rect,
-      path {
-        fill: colors.$white;
-      }
-    }
-  }
-}
-
-@mixin chipButtonAddBackground($color, $hoverColor) {
-  background-color: $color;
-
-  &:hover {
-    background-color: $hoverColor;
-  }
-}
-
-@mixin chipButtonAddSize($size) {
-  width: $size;
-  height: $size;
-}
-
-@mixin chipBackground($isChipButtonAdd) {
-  @if $isChipButtonAdd == true {
-    &_orange {
-      @include chipButtonAddBackground(colors.$grandisTwo, colors.$sorbus);
-    }
-
-    &_purple {
-      @include chipButtonAddBackground(colors.$amethystTwo, colors.$amethyst);
-    }
-
-    &_green {
-      @include chipButtonAddBackground(colors.$javaTwo, colors.$java);
-    }
-
-    &_grey {
-      @include chipButtonAddBackground(colors.$mulledWineThree, colors.$topaz);
-    }
-  } @else {
-    &_none {
-      background-color: transparent;
-    }
-
-    &_green {
-      background-color: colors.$javaTwo;
-    }
-
-    &_grey {
-      background-color: colors.$mulledWineThree;
-    }
-
-    &_orange {
-      background-color: colors.$grandisTwo;
-    }
-
-    &_purple {
-      background-color: colors.$amethystTwo;
-    }
-
-    &_amethyst {
-      background-color: colors.$amethyst;
-    }
-
-    &_sorbus {
-      background-color: colors.$sorbus;
-    }
-
-    &_java {
-      background-color: colors.$java;
-    }
-  }
-}
-
-@mixin chipBorder() {
-  &_transparent {
-    border: borders.$transparentBorder;
-  }
-
-  &_green {
-    border: borders.$resultsBorder;
-  }
-
-  &_grey {
-    border: borders.$primaryBorder;
-  }
-
-  &_orange {
-    border: borders.$parametersBorder;
-  }
-
-  &_purple {
-    border: borders.$labelBorder;
-  }
-
-  &_primary {
-    border-radius: 4px;
-  }
-
-  &_secondary {
-    border-radius: 20px;
-  }
-}
-
-@mixin chipDensity($isEditMode, $isChipAddButton) {
-  @if $isChipAddButton == true {
-    &_dense {
-      @include chipButtonAddSize(26px);
-    }
-
-    &_normal {
-      @include chipButtonAddSize(32px);
-    }
-
-    &_medium {
-      @include chipButtonAddSize(34px);
-    }
-  } @else {
-    &_dense {
-      height: 26px;
-    }
-
-    &_normal {
-      height: 32px;
-      padding: 8px 15px;
-    }
-
-    &_medium {
-      height: 34px;
-      padding: 8px 15px;
-      font-size: 15px;
-
-      @if $isEditMode == false {
-        .item-icon-close {
-          transform: scale(1.2);
-        }
-      }
-    }
-  }
-}
-
-@mixin chipsFont($component) {
-  @if $component == EditableChip {
-    &_primary {
-      @include editableChipFont(colors.$primary);
-    }
-
-    &_green {
-      @include editableChipFont(colors.$chateauGreen);
-    }
-
-    &_white {
-      @include editableChipFont(colors.$white);
-    }
-
-    &_orange {
-      @include editableChipFont(colors.$sorbus);
-    }
-
-    &_purple {
-      @include editableChipFont(colors.$amethyst);
-    }
-
-    &_disabled {
-      @include editableChipFont(colors.$spunPearl);
-    }
-  } @else if $component == Chip {
-    &_white {
-      @include chipFont(colors.$white);
-    }
-
-    &_green {
-      @include chipFont(colors.$chateauGreen);
-    }
-
-    &_purple {
-      @include chipFont(colors.$amethyst);
-    }
-
-    &_primary {
-      @include chipFont(colors.$primary);
-    }
-
-    &_orange {
-      @include chipFont(colors.$sorbus);
-    }
-  } @else if $component == ButtonAddChip {
-    &_primary {
-      @include chipButtonAddColor(colors.$topaz);
-    }
-
-    &_green {
-      @include chipButtonAddColor(colors.$chateauGreen);
-    }
-
-    &_orange {
-      @include chipButtonAddColor(colors.$sorbus);
-    }
-
-    &_purple {
-      @include chipButtonAddColor(colors.$amethyst);
-    }
-  }
-}
-
-@mixin hiddenChipBlockArrow() {
-  position: absolute;
-  z-index: -10;
-  display: block;
-  width: 12px;
-  height: 12px;
-  background-color: colors.$white;
-  transform: rotate(-45deg);
-  content: '';
-}
-
-@mixin tableColumn($flex) {
-  &_container {
-    display: flex;
-    flex: $flex;
-    align-items: flex-end;
-    height: 100%;
-
-    &_item {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      height: 55px;
-    }
-  }
-}
-
-@mixin tableDisplay($flex) {
-  display: flex;
-  flex: $flex;
-}
-
-@mixin artifactsTableHeader($flex, $lineHeight) {
-  flex: $flex;
-  line-height: $lineHeight;
-}
-
-@mixin tableHeader {
-  background-color: colors.$magnoliaWhite;
-  font-weight: bold;
-  font-size: 14px;
-}
-
-@mixin resetSpaces {
-  margin: 0;
-  padding: 0;
-}
-
-@mixin tableColumnFlex($flex, $minWidth) {
-  flex: $flex;
-  min-width: $minWidth;
-}
-
-@mixin newItemSidePanelTable {
-  position: relative;
-  width: 100%;
-  border-bottom: borders.$primaryBorder;
-
-  .table {
-    &__header {
-      color: colors.$topaz;
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 24px;
-    }
-
-    &__body {
-      display: flex;
-      align-items: flex-end;
-
-      &-column {
-        width: 100%;
-
-        .input {
-          padding: 25px 10px 11px;
-
-          &:not(.input_invalid) {
-            border: none;
-          }
-
-          &__label-floating {
-            left: 10px;
-          }
-        }
-      }
-    }
-
-    &__subheader {
-      text-transform: capitalize;
-    }
-
-    &__cell {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      min-width: 5px;
-      padding: 10px;
-      color: colors.$primary;
-
-      &_disabled {
-        color: colors.$spunPearl;
-      }
-
-      &-checkbox {
-        flex: 0.16;
-        padding: 0;
-
-        svg {
-          margin: 0;
-        }
-      }
-
-      &-actions {
-        width: 44px;
-        max-width: 44px;
-        padding: 0;
-      }
-    }
-
-    &__row {
-      position: relative;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      height: 55px;
-      border-top: borders.$primaryBorder;
-
-      .tip-container {
-        display: none;
-      }
-
-      &:hover {
-        background-color: colors.$alabaster;
-
-        .table__cell {
-          &-actions {
-            .actions-menu {
-              &__container {
-                display: block;
-
-                .btn {
-                  padding: 0;
-                  border: none;
-
-                  &:hover {
-                    background-color: transparent;
-                  }
-                }
-              }
-            }
-          }
-
-          .btn_delete {
-            display: block;
-          }
-        }
-
-        .tip-container {
-          display: flex;
-        }
-      }
-
-      &-add-item {
-        display: flex;
-        align-items: center;
-
-        input {
-          border: none;
-          border-radius: unset;
-        }
-      }
-    }
-  }
-
-  .input-row {
-    &-wrapper {
-      display: flex;
-      width: 100%;
-      margin: 0 -1px 0 -1px;
-      border: borders.$primaryBorder;
-
-      .select {
-        flex: 1;
-        margin: 1px 0;
-        padding: 0;
-        border: none;
-
-        &__label {
-          padding: 0;
-        }
-      }
-    }
-
-    &__item {
-      width: 100%;
-      height: 100%;
-
-      &::placeholder {
-        font-style: italic;
-      }
-    }
-  }
-
-  .edit-row {
-    background-color: colors.$alabaster;
-
-    .input {
-      width: 100%;
-      margin: -1px;
-      padding: 10px;
-      border: borders.$primaryBorder;
-      border-radius: 2px;
-
-      &_invalid {
-        border: 1px solid colors.$amaranth;
-      }
-    }
-
-    .border-none {
-      border: none;
-    }
-
-    .table__cell {
-      &_edit {
-        min-width: 175px;
-        padding: 10px 0;
-
-        .select {
-          width: 100%;
-          border-radius: 2px;
-
-          &__value {
-            min-width: unset;
-          }
-
-          &__label {
-            padding-left: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .no-hover {
-    .add-input {
-      padding: 0;
-    }
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-}
-
-@mixin newItemSidePanel {
-  .new-item-side-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
-    width: 900px;
-    height: 100%;
-    overflow-y: scroll;
-    background-color: colors.$wildSand;
-
-    &-container {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(colors.$mineshaft, 0.75);
-    }
-
-    &__body {
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-    }
-
-    &__accordion {
-      margin: 16px 40px 0;
-      background-color: colors.$white;
-      border: borders.$primaryBorder;
-      border-radius: 4px;
-
-      &.accordion__container.open {
-        height: auto;
-
-        .accordion__body {
-          min-height: 100px;
-          overflow: visible;
-        }
-      }
-
-      &:first-child {
-        margin-top: 0;
-      }
-
-      &:last-child {
-        margin-bottom: 16px;
-      }
-    }
-
-    &__expand-icon {
-      position: absolute;
-      top: 16px;
-      left: -16px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      margin: 0;
-      background: colors.$malibu;
-      border-radius: 50%;
-
-      &:hover {
-        background-color: colors.$cornflowerBlue;
-      }
-
-      svg {
-        path {
-          fill: colors.$white;
-        }
-      }
-    }
-
-    &__item {
-      z-index: 1;
-      height: 100%;
-      min-height: 64px;
-      padding: 22px 25px;
-    }
-
-    .input-wrapper {
-      flex: 1;
-    }
-
-    &__buttons-container {
-      display: flex;
-      flex: 0.1;
-      align-items: center;
-      justify-content: flex-end;
-      margin-top: 16px;
-      margin-bottom: 16px;
-      padding: 0 40px;
-    }
-
-    .add-input {
-      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;
-      }
-    }
-
-    .disabled {
-      color: colors.$doveGray;
-      cursor: not-allowed;
-    }
-
-    .no-border {
-      border-bottom: none;
-
-      &_top {
-        border-top: none;
-      }
-    }
-
-    .btn {
-      &-add {
-        rect {
-          min-width: 44px;
-          fill: colors.$cornflowerBlue;
-        }
-      }
-
-      &__schedule {
-        margin-top: 16px;
-        margin-left: auto;
-      }
-    }
-  }
-}
-
-@mixin panelTitle {
-  position: relative;
-  margin: 36px 90px 33px 55px;
-
-  .panel-title {
-    &__container {
-      width: 100%;
-    }
-
-    &__input {
-      width: 100%;
-      margin-bottom: 5px;
-      padding: 4px;
-      font-weight: 300;
-      font-size: 36px;
-      line-height: 42px;
-
-      &:disabled {
-        border: none;
-        user-select: none;
-      }
-
-      &-wrapper {
-        user-select: none;
-
-        &::after {
-          position: absolute;
-          top: 0;
-          left: 0;
-          z-index: 2;
-          display: block;
-          width: 100%;
-          height: 100%;
-          content: '';
-        }
-      }
-    }
-
-    &__name {
-      margin-bottom: 6px;
-      font-weight: 300;
-      font-size: 36px;
-      line-height: 42px;
-    }
-
-    &__labels {
-      &-container {
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        padding: 0 15px;
-        border: borders.$primaryBorder;
-        border-radius: 4px;
-      }
-
-      &-text {
-        margin-right: 10px;
-        color: colors.$primary;
-        font-size: 15px;
-        line-height: 18px;
-      }
-
-      &-wrapper {
-        display: flex;
-        flex-wrap: wrap;
-        width: 650px;
-
-        .chips-wrapper {
-          flex-wrap: wrap;
-          width: 100%;
-
-          .chip_short {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-
-    &__schedule {
-      display: flex;
-      align-items: center;
-      margin-bottom: 18px;
-
-      svg {
-        margin-right: 18px;
-        cursor: pointer;
-      }
-    }
-
-    &__btn_close {
-      position: absolute;
-      top: -20px;
-      right: -75px;
-      height: 24px;
-    }
-  }
-}
-
-@mixin panelSection {
-  .panel-section {
-    &__title {
-      display: flex;
-      margin-bottom: 22px;
-
-      h5 {
-        display: flex;
-        align-items: center;
-        margin: 0;
-        color: colors.$primary;
-        font-weight: bold;
-        font-size: 17px;
-        line-height: 20px;
-        letter-spacing: 0.03em;
-        text-transform: uppercase;
-      }
-    }
-
-    &__body {
-      position: relative;
-      display: flex;
-      flex-flow: row wrap;
-      margin-bottom: 45px;
-    }
-  }
-
-  &:last-child {
-    .panel-section__body {
-      margin-bottom: 0;
-    }
-  }
-}
-
-@mixin schedule {
-  margin: 0 40px;
-
-  .schedule {
-    &-tabs {
-      display: flex;
-      flex: 1;
-
-      &__item {
-        padding: 10px 24px;
-        color: colors.$topaz;
-        font-weight: bold;
-        cursor: pointer;
-
-        &_active {
-          color: colors.$cornflowerBlue;
-          border-bottom: 3px solid colors.$cornflowerBlue;
-        }
-      }
-    }
-
-    &-content {
-      position: relative;
-      padding: 24px;
-      background-color: colors.$white;
-      border: borders.$primaryBorder;
-      border-radius: 4px;
-
-      h3 {
-        color: colors.$primary;
-        text-transform: uppercase;
-      }
-
-      .input {
-        min-width: 230px;
-
-        &-container {
-          display: none;
-        }
-      }
-
-      .select {
-        min-width: 190px;
-      }
-
-      .checkbox-container {
-        display: none;
-        margin: 23px 0;
-        padding: 10px 10px 10px 0;
-      }
-
-      .input-container,
-      .date-picker-container {
-        .input-wrapper {
-          margin-right: 15px;
-        }
-      }
-
-      .cron {
-        &-error {
-          position: relative;
-          display: none;
-          padding: 13px 48px;
-          color: #e54158;
-          background: rgba(colors.$amaranth, 0.1);
-          border: 1px solid colors.$amaranth;
-          border-radius: 2px;
-
-          &.show-error {
-            display: block;
-          }
-
-          .error-icon {
-            position: absolute;
-            top: 10px;
-            left: 15px;
-            width: 24px;
-            height: 24px;
-            padding: 6px;
-            background: colors.$amaranth;
-            border-radius: 15px;
-          }
-        }
-
-        &-string {
-          min-width: 100%;
-          border: borders.$primaryBorder;
-          border-radius: 4px;
-        }
-
-        &-link {
-          display: inline-block;
-          margin: 8px 0;
-        }
-      }
-    }
-  }
-}
-
-@mixin statsAddBorderAndTextColor($border, $textColor) {
-  &.selected {
-    border: $border;
-
-    .stats__counter {
-      color: $textColor;
-    }
-  }
-
-  &:hover {
-    border: $border;
-  }
-}
-
-@mixin stats() {
-  &_total {
-    @include statsAddBorderAndTextColor(borders.$totalBorder, colors.$black);
-  }
-
-  &_running {
-    @include statsAddBorderAndTextColor(borders.$runningBorder, colors.$pictonBlue);
-  }
-
-  &_failed {
-    @include statsAddBorderAndTextColor(borders.$failedBorder, colors.$amaranth);
-  }
-
-  &_completed {
-    @include statsAddBorderAndTextColor(borders.$completedBorder, colors.$brightTurquoise);
-  }
-}
-
-@mixin gradient($type) {
-  @if $type == 'card' {
-    background: linear-gradient(180deg, colors.$brightTurquoise 4px, colors.$white 4px);
-  } @else {
-    background: linear-gradient(88.84deg, #d873e1 5.49%, #fc658f 57.67%, #ffb971 107.73%);
-  }
-}
-
-@mixin fieldWrapper {
-  display: flex;
-  flex: 1;
-  flex-flow: row nowrap;
-  position: relative;
-  width: 100%;
-  color: colors.$primary;
-  background-color: transparent;
-  border: borders.$primaryBorder;
-  border-radius: 4px;
-}
-
-@mixin inputSelectField {
-  position: relative;
-  display: flex;
-  flex-flow: column nowrap;
-  height: 100%;
-  width: 100%;
-
-  &__label {
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-    color: colors.$topaz;
-    font-size: 12px;
-    text-align: left;
-    background-color: transparent;
-
-    &::first-letter {
-      text-transform: uppercase;
-    }
-
-    &-mandatory {
-      color: colors.$amaranth;
-    }
-
-    &-disabled {
-      color: colors.$spunPearl;
-
-      .form-field__label-mandatory {
-        color: colors.$spunPearl;
-      }
-    }
-  }
-
-  &__wrapper {
-    @include fieldWrapper;
-
-    &-disabled {
-      border: borders.$disabledBorder;
-      color: colors.$spunPearl;
-      cursor: not-allowed;
-    }
-
-    &-invalid {
-      border: borders.$errorBorder;
-    }
-
-    &.without-border {
-      border-color: transparent;
-    }
-
-    &-dense {
-      height: variables.$fieldDense;
-    }
-
-    &-normal {
-      height: variables.$fieldNormal;
-    }
-
-    &-medium {
-      height: variables.$fieldMedium;
-    }
-
-    &-chunky {
-      height: variables.$fieldChunky;
-    }
-  }
-
-  &__control {
-    position: relative;
-    display: flex;
-    flex: 1;
-    align-items: center;
-    overflow: hidden;
-  }
-
-  &__icons {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    min-height: 25px;
-
-    & > * {
-      display: flex;
-      align-items: center;
-      padding: 0 4px;
-
-      &:last-child {
-        margin-right: 4px;
-      }
-    }
-  }
-}
-
-@mixin radioCheckReadonly {
-  input {
-    pointer-events: none;
-    opacity: 0.5;
-
-    ~ label,
-    ~ .label {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-  }
-}
-
-@mixin radioCheckField {
-  position: relative;
-  background: colors.$white;
-  border: 1px solid colors.$malibu;
-  color: colors.$malibu;
-  appearance: none;
-  margin: 0;
-  outline: 0;
-  cursor: pointer;
-
-  &:checked {
-    &:hover {
-      color: colors.$cornflowerBlue;
-
-      &:disabled {
-        color: colors.$spunPearl;
-        border-color: currentColor;
-      }
-    }
-  }
-
-  &:disabled {
-    color: colors.$spunPearl;
-    border-color: currentColor;
-    cursor: not-allowed;
-    pointer-events: none;
-
-    &:hover {
-      color: colors.$spunPearl;
-      border-color: currentColor;
-    }
-
-    ~ label,
-    ~ .label {
-      color: colors.$spunPearl;
-      cursor: not-allowed;
-    }
-  }
-
-  @keyframes pulse-animation {
-    20% {
-      box-shadow: 0 0 0 0 rgba(colors.$cornflowerBlue, 0.5);
-    }
-    100% {
-      box-shadow: 0 0 0 6px rgba(colors.$cornflowerBlue, 0);
-    }
-  }
-
-  &:not(:disabled) {
-    &:focus,
-    &:active {
-      animation: pulse-animation 0.5s ease-out;
-    }
-
-    &:hover {
-      color: colors.$cornflowerBlue;
-      border-color: currentColor;
-    }
-  }
-
-  ~ label,
-  ~ .label {
-    display: flex;
-    flex: 1;
-    align-items: center;
-    position: relative;
-    cursor: pointer;
-    font-size: 1em;
-    padding: 0 0 0 0.45em;
-    height: inherit;
-    user-select: none;
-    white-space: nowrap;
-  }
-}
-
-//TODO: Delete after removing Textarea and Input and using DRC components
-@mixin fieldWrapperOld {
-  position: relative;
-  width: 100%;
-  padding: 18px 16px;
-  color: #4b4760;
-  background-color: transparent;
-  border: borders.$primaryBorder;
-  border-radius: 4px;
-}