dfx-jekyll-mdl/_sass/_asciidoc.scss

.title {
    font-weight: bold;
    color: $primary-color;
}

.listingblock,
.literalblock {
    @extend .admonition;

    pre {
        background: $grey-color-light;
    }

    pre.nowrap,
    pre[class].nowrap {
        overflow-x: auto;
        white-space: pre;
        word-wrap: normal;
    }
}

.exampleblock {
    @extend .admonition;
    background: $yellow-100;

    .title {
        color: $primary-color;
    }
}

.imageblock {
    @extend .admonition;
    padding: 0;

    img {
        width: 100%;
    }

    .title {
        padding: 16px;
    }
}

.admonitionblock {
    @extend .admonition;
    padding: 16px 16px 16px 0;
    td.icon {
        width: 55px;
        padding: 0;
        text-align: center;

        .fa {
            font-family: 'Material Icons';
            font-weight: normal;
            font-style: normal;
            font-size: 36px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
        }

        .icon-note:after {
            content: "info";
        }

        .icon-important:after {
            content: "announcement";
        }

        .icon-caution:after {
            content: "warning";
        }

        .icon-warning:after {
            content: "warning";
        }

        .icon-tip:after {
            content: "lightbulb_outline";
        }
    }

    &.note {
        background: $blue-200;
    }

    &.tip {
        background: $green-200;
    }

    &.warning {
        background: $red-300;
    }

    &.important {
        background: $orange-200;
    }

    &.caution {
        background: $orange-200;
    }
}


/* Numbers & Code excerpts */
.conum{
  &[data-value] {
      display: inline-block;
      color: $grey-50 !important;
      background-color: $grey-800;
      -webkit-border-radius: 100px;
      border-radius: 100px;
      text-align: center;
      font-size: 0.75em;
      width: 1.67em;
      height: 1.67em;
      line-height: 1.67em;
      font-style: normal;
      font-weight: bold;

      * {
          color: #grey-50 !important;
      }

      +b {
          display: none;
      }

      &:after {
          content: attr(data-value);
      }
  }
  &:not([data-value]):empty {
      display: none;
  }
}

pre .conum[data-value] {
    position: relative;
    top: -.125em;
}

b.conum * {
    color: inherit!important;
}

.quoteblock {
    blockquote {
        border: none;
    }

    blockquote:before {

    }

    .attribution {
        text-align: right;
    }
}



table.tableblock{
    max-width:100%;
    border-collapse: collapse;
    position: relative;
    border: 1px solid rgba(0,0,0,.12);
    border-collapse: collapse;
    /* white-space: nowrap; */
    font-size: 13px;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);margin: 16px 0px;
   }

  td>.paragraph:last-child p>p:last-child,
  th>p:last-child,
  td>p:last-child {
    margin-bottom:0
  }

table.grid-all th.tableblock,table.grid-all td.tableblock{/* border-width:0 1px 1px 0; */}
table.grid-all tfoot>tr>th.tableblock,table.grid-all tfoot>tr>td.tableblock{border-width:1px 1px 0 0}
table.grid-cols th.tableblock,table.grid-cols td.tableblock{border-width:0 1px 0 0}
table.grid-all *>tr>.tableblock:last-child,table.grid-cols *>tr>.tableblock:last-child{border-right-width:0}
table.grid-rows th.tableblock,table.grid-rows td.tableblock{border-width:0 0 1px 0}
table.grid-all tbody>tr:last-child>th.tableblock,table.grid-all tbody>tr:last-child>td.tableblock,table.grid-all thead:last-child>tr>th.tableblock,table.grid-rows tbody>tr:last-child>th.tableblock,table.grid-rows tbody>tr:last-child>td.tableblock,table.grid-rows thead:last-child>tr>th.tableblock{border-bottom-width:0}
table.grid-rows tfoot>tr>th.tableblock,table.grid-rows tfoot>tr>td.tableblock{border-width:1px 0 0 0}

table.frame-all{border-width:1px}
table.frame-sides{border-width:0 1px}
table.frame-topbot{border-width:1px 0}



table thead th,table tfoot th, tbody tr th,tbody tr th p,tfoot tr th,tfoot tr th p{
  font-weight:bold;
}


tbody tr th{
    line-height:1.6;
}

p.tableblock{
  font-size:1em;
  >code:only-child{background:none;padding:0}
}

table.tableblock {
    td, th {
      position: relative;
      vertical-align: middle;
      height: 48px;
      border-top: 1px solid rgba(0, 0, 0, 0.12);
      border-bottom: 1px solid rgba(0, 0, 0, 0.12);
      padding-top: 12px;
      box-sizing: border-box;
      &:first-of-type {
        padding-left: 24px;
      }
      &:last-of-type {
        padding-right: 24px;
      }
  }

  tr {
      position: relative;
      min-height: 48px;
      transition-duration: .28s;
      transition-timing-function: cubic-bezier(.4,0,.2,1);
      transition-property: background-color;
      &:hover { background-color: #eeeeee; }
  }
}