Packages

ex_debug_toolbar

0.4.5
0.5.0 0.4.6 retired 0.4.5 0.4.4 0.4.3 0.4.2 0.4.1 0.4.0 0.3.15 0.3.14 0.3.12 0.3.11 0.3.10 0.3.9 0.3.8 0.3.6 0.3.5 0.3.4 0.3.3 0.3.2 0.3.1 0.3.0 0.2.3 0.2.2 0.2.1 0.2.0 0.1.19 0.1.18 0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.10 0.1.9 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

A debug web toolbar for Phoenix projects to display all sorts of information about request

HexDocs

Current section

Files

Jump to
Readme
46 Versions
11 Dependencies
0 Dependants
Files
Activity
ex_debug_toolbar web static css toolbar.scss
Raw

web/static/css/toolbar.scss 

#ex-debug-toolbar {
  $panel-max-height: 200px;
  @import "_reset";
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857;
  color: #333333;
  background-color: #fff;
  // namespacing to avoid conflicts
  @import "bootstrap";
  @import "prismjs/themes/prism";
  @import "prismjs/plugins/line-numbers/prism-line-numbers";
  @import "prismjs/plugins/line-highlight/prism-line-highlight";
  @import "xterm/dist/xterm";
  @import "xterm/dist/addons/fullscreen/fullscreen";
  // TOOLBAR
  .navbar {
    min-height: 30px;
    height: 30px;
  }
  .navbar-nav.nav > li > span {
    @extend a;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    cursor: pointer;
    &> i {
      margin-right: 5px;
    }
  }
  .navbar-brand {
    padding: 2px 2px;
    height: 30px;
    img {
      height: 100%;
    }
  }
  .toolbar-item {
    margin-right: 5px;
    .label { // FIX ME
      position: relative;
      top: -2px;
    }
  }
  // SLIDE UP PANELS
  .panel {
    margin-bottom: 0;
    bottom: 30px;
    display: none;
    .panel-body {
      padding: 5px 15px;
      max-height: $panel-max-height;
      overflow-y: auto;
    }
    .panel-heading {
      padding: 5px 15px;
    }
    .table {
      margin-top: 0;
      margin-bottom: 0;
      caption {
        padding-top: 4px;
        padding-bottom: 4px;
      }
      td, th {
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 1px;
        padding-bottom: 1px;
        p {
          margin: 0;
        }
      }
    }
  }
  .nowrap {
    white-space:nowrap;
  }
  table {
    .hljs {
      background: unset;
      padding: unset;
    }
  }
  .pointer {
    cursor: pointer;
  }
  #terminal-container {
    width: auto;
    height: 480px;
  }
  .modal-top-action {
    margin-right: 10px;
  }
  .fullscreen {
    .modal-dialog {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .modal-content {
      height: auto;
      min-height: 100%;
      border-radius: 0;
    }
    #terminal-container {
      height: 100%;
    }
  }
  .xterm.fullscreen {
    top: 55px;
  }
  #code-snippet-container {
    margin-top: 40px;
    position: fixed;
    left: 50%;
  }
  #breakpoint .panel-body {
    height: $panel-max-height;
  }
  // Historic flag
  .historic-flag {
    display: none;
    .back-to-current-request {
      font-weight: bold;
      color: black;
      font-size: 0.85em;
      text-decoration: underline;
    }
  }
  .historic-request {
    .historic-flag {
      display: block;
    }
    .navbar {
      background-color: #ececdb;
    }
  }
  .history-point {
    cursor: pointer;
    &.active {
      cursor: default;
    }
    &.prev-request {
      display: none;
    }
    .history-collapse {
      display: none;
    }
  }
}