it3s/meppit

.site-page {

  .additional-info {
    margin-top: 20px;

    h2 {
      font-size: 1.1em;
      margin-bottom: 5px;
      display: inline-block;
    }
    span {
      display: inline-block;
    }

    textarea {
      width: 100%;
      height: 150px;
    }
  }
  .yaml-help {
    font-size: 0.9em;

    pre {
      border: solid 1px $soft-grey;
      border-radius: 4px;
      background-color: $transparent-grey;
      margin: 5px 0;
      padding: 5px;
      font-size: 0.8em;
    }
    code {
      background-color: $transparent-grey;
      border-radius: 4px;
    }

    ul {
      list-style: disc;
      padding-left: 30px;
    }
  }

  .json-table {
    .jh-root, .jh-type-object, .jh-type-array, .jh-key, .jh-value, .jh-root tr{
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
    }

    .jh-key, .jh-value{
      margin: 0;
      padding: 0.4em;
    }

    th.jh-key{ text-align: left; }

    .jh-type-object > tr, .jh-type-array > tr{
      border-bottom: 1px solid $ultra-soft-grey;
    }

    .jh-key{
      border-right: 1px solid $ultra-soft-grey;
      width: 35%;
    }

    .jh-empty{
     font-style: italic;
     // color: #999;
     font-size: small;
    }

    .jh-type-object, .jh-type-array{
      width: 100%;
      border-collapse: collapse;
    }

    .jh-object-key {
      vertical-align: top;
      color: $dark-grey;
      font-weight: bold;
    }

    .jh-array-key { display: none; }

    .jh-type-string{ font-style: italic; }

    .jh-type-object > tr:hover, .jh-type-array > tr:hover{
      background-color: lighten($meppit-light-blue, 5%);
      border-bottom: solid 1px $meppit-dark-blue !important;
      > .jh-key { border-right: solid 1px $meppit-dark-blue; }
    }
  }
}