nomad/ui/app/styles/components/variables.scss

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

.section.single-variable {
  margin-top: 1.5rem;
}

$hdsLabelTopOffset: 26px;
$hdsInputHeight: 35px;

.variable-title {
  margin-bottom: 2rem;
  z-index: $z-base;

  .hds-page-header__main {
    flex-direction: unset;
  }
  .copy-variable span {
    color: var(--token-color-foreground-primary);
  }
}

.new-variables {
  & > div {
    margin-bottom: 1rem;
  }

  .duplicate-path-error {
    position: relative;
    animation: slide-in 0.3s ease-out;
  }

  .path-namespace {
    display: grid;
    grid-template-columns: 6fr 1fr;
    gap: 0 1rem;
    align-items: start;
    .namespace-dropdown {
      white-space: nowrap;
      width: auto;
      position: relative;
      top: $hdsLabelTopOffset;
      height: $hdsInputHeight;
    }
  }

  .key-value {
    display: grid;
    grid-template-columns: 1fr 4fr 130px;
    gap: 0 1rem;
    align-items: start;

    input.error {
      color: $red;
      border-color: $red;
    }

    .value-label {
      display: grid;
      grid-template-columns: 1fr auto;
      & > span {
        grid-column: -1 / 1;
      }
    }

    .delete-entry-button {
      position: relative;
      top: $hdsLabelTopOffset;
      height: $hdsInputHeight;
    }

    button.show-hide-values {
      height: 100%;
      box-shadow: none;
      margin-left: -2px;
      border-color: $grey-blue;
    }

    .key-value-error {
      grid-column: -1 / 1;
      position: relative;
      animation: slide-in 0.3s ease-out;
      margin: 0;
    }
  }

  .editor-wrapper {
    &.error {
      .CodeMirror {
        box-shadow: 0 0 0 3px $red;
      }
      .help {
        padding: 1rem 0;
        font-size: 1rem;
      }
    }
  }

  .notification.conflict {
    color: $text;

    p {
      margin-bottom: 1rem;
    }

    pre {
      background: black;
      color: $white;
      max-height: 500px;
      overflow: auto;
      code {
        height: 100%;
      }
    }

    .options {
      margin: 1rem 0;
    }
  }

  footer {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    gap: 1rem;
  }
}

table.path-tree {
  tr {
    cursor: pointer;
    &.inaccessible {
      cursor: not-allowed;
    }
    svg {
      margin-bottom: -2px;
      margin-right: 10px;
    }
  }
}

.related-entities {
  margin-bottom: 2rem;
}

.related-entities-hint {
  margin: 0.5rem 0;
  code {
    background-color: lighten($grey-lighter, 8%);
    border: 1px solid $grey-lighter;
    padding: 0 0.25rem;
    border-radius: 4px;
  }
}

table.variable-items {
  // table-layout: fixed;
  td.value-cell {
    width: 80%;
    & > div {
      display: grid;
      grid-template-columns: auto auto 1fr;
      gap: 0.5rem;
      & > code {
        white-space: pre-wrap;
      }
    }
  }
}

.job-variables-intro {
  margin-bottom: 1rem;
  ul li {
    list-style-type: disc;
    margin-left: 2rem;
    code {
      white-space-collapse: preserve-breaks;
      display: inline-flex;
    }
  }
}

.job-variables-message {
  p {
    margin-bottom: 1rem;
  }
}

@keyframes slide-in {
  0% {
    top: 10px;
    opacity: 0;
  }

  100% {
    top: 0px;
    opacity: 1;
  }
}