bkdotcom/PHPDebugConsole

View on GitHub
src/Debug/scss/_methods.scss

Summary

Maintainability
Test Coverage
ul.group-body {
  > li {
    margin: 0;
  }
}

.m_assert,
.m_clear,
.m_count,
.m_error,
.m_groupEndValue,
.m_info,
.m_log,
.m_warn {
  position: relative;
  width: fit-content; // previously using display: table;
  padding-left: 10px;
  text-indent: -10px;
  padding-right: 0.33em;
  word-break: break-word;
}
.m_table td,
.m_trace td {
  word-break: break-word;
  &.t_string {
    padding-left: 1em;
    text-indent: -0.75em;
  }
}
.m_assert {
  background-color: rgba(255, 204, 204, 0.75);
  > i {
    margin-right: 0.33em;
    margin-bottom: -0.2em;
    display: inline-block;
    line-height: 0.6em;
    vertical-align: text-bottom;
  }
}

.m_group {
  .group-header {
    width: fit-content;  // previously using display: table;
    white-space: nowrap;
    i.fa-warning {
      color: #cdcb06;
      margin-left: 0.33em;
    }
    i.fa-times-circle {
      color: #d8000c;
      margin-left: 0.33em;
    }
  }
  .group-body {
    display: none;
  }
  > ul {
    list-style: none;
    margin-left: 1em;
    border-left: 1px solid rgba(0, 0, 0, 0.25);
    padding-left: 0.25rem;
  }
  &.expanded {
    > .group-body {
      display: block;
    }
  }
}

.m_error,
.m_group.level-error > .group-body,
.m_group.level-error:not(.expanded) > .group-header > .level-error {
  background-color: $error-bg;
  color: $error-fg;
}

.m_info,
.m_group.level-info > .group-body,
.m_group.level-info:not(.expanded) > .group-header > .level-info {
  background-color: $info-bg;
  color: $info-fg;
}

.m_trace {
  .classname {
    color: #146314;
  }
}

.m_warn,
.m_group.level-warn > .group-body,
.m_group.level-warn:not(.expanded) > .group-header > .level-warn {
  background-color: $warn-bg;
  color: $warn-fg;
}

li[data-channel="general.phpError"] {
  > i + .t_string:nth-child(2) { font-weight: bold; }
  > .t_string:nth-child(4) {
    opacity: 0.7;
    &::before {
      content: "\A";
    }
    &::after {
      content: none;
    }
  }

  &.error-fatal {
    padding: 10px 10px 10px 20px; // extra left padding for text-indent
    border-left: solid 2px $error-fg;
    > .t_string:nth-child(2) {
      display: inline-block;
      margin-bottom: 5px;
      vertical-align: top;
      font-size: 1.2em;
    }
    > .t_string:nth-child(3)::before {
      content: "\A";
    }
  }
}