guify/src/components/title.js

A simple GUI for inspecting and changing JS variables

var css = require('dom-css');

export default (root, opts, theme) => {

  var container = require('./partials/container')(root, opts.label)
  css(container, {
      'margin-top': '2%',
      'margin-bottom': '1%',
  });

  var background = container.appendChild(document.createElement('div'));
  css(background, {
    'box-sizing': 'border-box',
    left: 0,
    width: '100%',
    display: 'inline-block',
    height: '20px',
    verticalAlign: 'top',
  });

  var label = background.appendChild(document.createElement('div'));
  label.innerHTML = '■ ' + opts.label + ' ■';
  css(label, {
    color: theme.text1,
    display: 'inline-block',
    verticalAlign: 'sub',
    //"padding-left": "4%",
    //"padding-right": "4%",
    //"font-weight": "bold",
  });
}