github.com/emate/nomad@v0.8.2-wo-binpacking/ui/app/styles/components/json-viewer.scss (about)

     1  @mixin theme(
     2    $default-color: black,
     3    $string-color: green,
     4    $number-color: blue,
     5    $boolean-color: red,
     6    $null-color: #855A00,
     7    $undefined-color: rgb(202, 11, 105),
     8    $function-color: #FF20ED,
     9    $toggler-opacity: 0.6,
    10    $toggler-color: #45376F,
    11    $bracket-color: blue,
    12    $key-color: #00008B,
    13    $url-color: blue
    14  ) {
    15    font-family: monospace;
    16    &,
    17    a,
    18    a:hover {
    19      color: $default-color;
    20      text-decoration: none;
    21    }
    22  
    23    .json-formatter-row {
    24      margin-left: 1rem;
    25    }
    26  
    27    .json-formatter-children {
    28      &.json-formatter-empty {
    29        opacity: 0.5;
    30        margin-left: 1rem;
    31  
    32        &:after {
    33          display: none;
    34        }
    35        &.json-formatter-object:after {
    36          content: 'No properties';
    37        }
    38        &.json-formatter-array:after {
    39          content: '[]';
    40        }
    41      }
    42    }
    43  
    44    .json-formatter-string {
    45      color: $string-color;
    46      white-space: pre;
    47      word-wrap: break-word;
    48    }
    49  
    50    .json-formatter-number {
    51      color: $number-color;
    52    }
    53    .json-formatter-boolean {
    54      color: $boolean-color;
    55    }
    56    .json-formatter-null {
    57      color: $null-color;
    58    }
    59    .json-formatter-undefined {
    60      color: $undefined-color;
    61    }
    62    .json-formatter-function {
    63      color: $function-color;
    64    }
    65    .json-formatter-date {
    66      background-color: fade($default-color, 5%);
    67    }
    68    .json-formatter-url {
    69      text-decoration: underline;
    70      color: $url-color;
    71      cursor: pointer;
    72    }
    73  
    74    .json-formatter-bracket {
    75      color: $bracket-color;
    76    }
    77    .json-formatter-key {
    78      color: $key-color;
    79      cursor: pointer;
    80      padding-right: 0.2rem;
    81    }
    82  
    83    .json-formatter-constructor-name {
    84      cursor: pointer;
    85    }
    86  
    87    .json-formatter-toggler {
    88      line-height: 1rem;
    89      font-size: 1rem;
    90      vertical-align: baseline;
    91      opacity: $toggler-opacity;
    92      cursor: pointer;
    93      padding-right: 0.3rem;
    94  
    95      &:after {
    96        display: inline-block;
    97        transition: none;
    98        content: '+';
    99      }
   100    }
   101  
   102    // Inline preview on hover (optional)
   103    > a > .json-formatter-preview-text {
   104      opacity: 0;
   105      transition: opacity 0.15s ease-in;
   106      font-style: italic;
   107    }
   108  
   109    &:hover > a > .json-formatter-preview-text {
   110      opacity: 0.6;
   111    }
   112  
   113    // Open state
   114    &.json-formatter-open {
   115      > .json-formatter-toggler-link .json-formatter-toggler:after {
   116        transform: none;
   117        content: '-';
   118      }
   119      > .json-formatter-children:after {
   120        display: inline-block;
   121      }
   122      > a > .json-formatter-preview-text {
   123        display: none;
   124      }
   125      &.json-formatter-empty:after {
   126        display: block;
   127      }
   128    }
   129  }
   130  
   131  .json-formatter-nomad.json-formatter-row {
   132    @include theme(
   133      $grey,
   134      $nomad-green,
   135      $packer-blue,
   136      $consul-pink,
   137      $terraform-purple,
   138      $terraform-purple-dark,
   139      $white,
   140      0.6,
   141      $black,
   142      $grey-dark,
   143      $white,
   144      $blue
   145    );
   146  }