github.com/hernad/nomad@v1.6.112/ui/app/styles/components/variables.scss (about)

     1  /**
     2   * Copyright (c) HashiCorp, Inc.
     3   * SPDX-License-Identifier: MPL-2.0
     4   */
     5  
     6  .section.single-variable {
     7    margin-top: 1.5rem;
     8  
     9    .back-link {
    10      text-decoration: none;
    11      color: #363636;
    12      position: relative;
    13      top: 4px;
    14    }
    15  }
    16  
    17  .variable-title {
    18    .toggle {
    19      font-size: 0.8rem;
    20      margin-left: 1rem;
    21      position: relative;
    22      top: -0.25rem;
    23      .toggler {
    24        margin-right: 0.25rem;
    25      }
    26    }
    27    .copy-button {
    28      position: relative;
    29      top: 3px;
    30    }
    31  }
    32  
    33  .new-variables {
    34    & > div {
    35      margin-bottom: 1rem;
    36    }
    37  
    38    .path-input {
    39      height: 2.25em;
    40  
    41      &:disabled {
    42        background-color: #f5f5f5;
    43      }
    44      &.error {
    45        color: $red;
    46        border-color: $red;
    47      }
    48    }
    49  
    50    .duplicate-path-error {
    51      position: relative;
    52      animation: slide-in 0.3s ease-out;
    53    }
    54  
    55    .path-namespace {
    56      display: grid;
    57      grid-template-columns: 6fr 1fr;
    58      gap: 0 1rem;
    59    }
    60  
    61    .key-value {
    62      display: grid;
    63      grid-template-columns: 1fr 4fr 130px;
    64      gap: 0 1rem;
    65      align-items: end;
    66  
    67      input.error {
    68        color: $red;
    69        border-color: $red;
    70      }
    71  
    72      .value-label {
    73        display: grid;
    74        grid-template-columns: 1fr auto;
    75        & > span {
    76          grid-column: -1 / 1;
    77        }
    78      }
    79  
    80      button.show-hide-values {
    81        height: 100%;
    82        box-shadow: none;
    83        margin-left: -2px;
    84        border-color: $grey-blue;
    85      }
    86  
    87      .key-value-error {
    88        grid-column: -1 / 1;
    89        position: relative;
    90        animation: slide-in 0.3s ease-out;
    91        margin: 0;
    92      }
    93    }
    94  
    95    .editor-wrapper {
    96      &.error {
    97        .CodeMirror {
    98          box-shadow: 0 0 0 3px $red;
    99        }
   100        .help {
   101          padding: 1rem 0;
   102          font-size: 1rem;
   103        }
   104      }
   105    }
   106  
   107    .notification.conflict {
   108      color: $text;
   109  
   110      p {
   111        margin-bottom: 1rem;
   112      }
   113  
   114      pre {
   115        background: black;
   116        color: $white;
   117        max-height: 500px;
   118        overflow: auto;
   119        code {
   120          height: 100%;
   121        }
   122      }
   123  
   124      .options {
   125        margin: 1rem 0;
   126      }
   127    }
   128  
   129    footer {
   130      display: grid;
   131      grid-auto-columns: max-content;
   132      grid-auto-flow: column;
   133      gap: 1rem;
   134  
   135      .button.is-info.is-inverted.add-more[disabled] {
   136        border-color: #dbdbdb;
   137        box-shadow: 0 2px 0 0 rgb(122 122 122 / 20%);
   138      }
   139    }
   140  }
   141  
   142  table.path-tree {
   143    tr {
   144      cursor: pointer;
   145      &.inaccessible {
   146        cursor: not-allowed;
   147      }
   148      svg {
   149        margin-bottom: -2px;
   150        margin-right: 10px;
   151      }
   152    }
   153  }
   154  
   155  .section .notification.related-entities {
   156    --blue: #1563ff;
   157    display: flex;
   158    align-items: center;
   159    gap: 0.5rem;
   160    &.notification {
   161      align-items: center;
   162    }
   163    a {
   164      color: $blue;
   165      display: inline-flex;
   166      align-items: center;
   167      gap: 0.25rem;
   168    }
   169  }
   170  
   171  .related-entities-hint {
   172    margin: 0.5rem 0;
   173    code {
   174      background-color: lighten($grey-lighter, 8%);
   175      border: 1px solid $grey-lighter;
   176      padding: 0 0.25rem;
   177      border-radius: 4px;
   178    }
   179  }
   180  
   181  .job-template-hint {
   182    margin-top: 0.5rem;
   183    code {
   184      background-color: #eee;
   185      padding: 0.25rem;
   186    }
   187    .copy-button {
   188      display: inline-block;
   189      padding-left: 0;
   190      position: relative;
   191      top: -5px;
   192      button,
   193      .button {
   194        background-color: transparent;
   195        padding-right: 0.25rem;
   196      }
   197    }
   198  }
   199  
   200  table.variable-items {
   201    // table-layout: fixed;
   202    td.value-cell {
   203      width: 80%;
   204      & > div {
   205        display: grid;
   206        grid-template-columns: auto auto 1fr;
   207        gap: 0.5rem;
   208        & > code {
   209          white-space: pre-wrap;
   210        }
   211      }
   212    }
   213  }
   214  
   215  @keyframes slide-in {
   216    0% {
   217      top: 10px;
   218      opacity: 0;
   219    }
   220  
   221    100% {
   222      top: 0px;
   223      opacity: 1;
   224    }
   225  }