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 }