@ima/devtools/src/components/molecule/hookEntry/hookEntry.module.less

IMA.js debugging panel in the Chrome Developer Tools window.

.container {
  position: relative;

  height: 60px;

  overflow: hidden;

  transition: 0.4s height;

  &--opened {
    height: 785px;

    background: var(--oc-gray-0);
  }

  &:hover {
    background: var(--oc-gray-0);
  }
}

.infoWrapper {
  display: flex;

  position: relative;

  padding: 10px;
  height: 60px;

  justify-content: space-between;
  align-items: center;

  transition: 0.4s opacity;

  cursor: pointer;
}

.formWrapper {
  padding: 10px 20px;
  width: 100%;
  height: 724px;
  overflow: auto;

  transition: 0.4s opacity;

  opacity: 0;

  &--opened {
    opacity: 1;
  }
}

.hookInfo {
  display: flex;

  flex-direction: column;

  font-size: 15px;

  user-select: none;

  h4 {
    margin-bottom: 2px;

    font-weight: 500;
  }

  p {
    font-size: 12px;
    color: var(--color-text-muted);
  }
}

.actions {
  display: flex;

  flex-direction: row;
  align-items: center;
}

.input {
  position: relative;

  margin-bottom: 10px;

  &[disabled] {
    cursor: not-allowed;
  }
}

.codeInput {
  border: 1px solid var(--oc-gray-4);
  border-radius: 3px;

  width: 100%;
  min-height: 600px;
  overflow: auto;

  font-family: var(--font-family-monospace);
  font-size: 12px;

  background: var(--color-white);

  &[disabled] {
    cursor: not-allowed;
  }

  textarea {
    &:focus {
      outline: none;
    }
  }
}

// Syntax highlighting
:global {
  .token.comment,
  .token.prolog,
  .token.doctype,
  .token.cdata {
    color: var(--oc-gray-5);
  }

  .token.punctuation {
    color: var(--oc-gray-6);
  }

  .namespace {
    opacity: 0.7;
  }

  .token.property,
  .token.tag,
  .token.boolean,
  .token.number,
  .token.constant,
  .token.symbol,
  .token.deleted {
    color: var(--oc-red-7);
  }

  .token.selector,
  .token.attr-name,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted {
    color: var(--oc-green-6);
  }

  .token.operator,
  .token.entity,
  .token.url,
  .language-css .token.string,
  .style .token.string {
    color: var(--oc-blue-5);
  }

  .token.atrule,
  .token.attr-value,
  .token.keyword {
    color: var(--oc-violet-7);
  }

  .token.function {
    color: var(--oc-orange-5);
  }

  .token.regex,
  .token.important,
  .token.variable {
    color: var(--oc-blue-5);
  }

  .token.important,
  .token.bold {
    font-weight: bold;
  }

  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }
}