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