uml diagram type box

by Richard Hunter

HTML

<div class="container">
  <div xmlns="http://www.w3.org/1999/xhtml" class="type-box">
    <div class="type-box__title-container">
      HelloWorld
    </div>
    <div class="type-box__prop-container">
      <div class="type-box__prop">
        <span class="type-box__visibility">+</span>
        <span class="type-box__prop-name">someProp</span>
        <span class="type-box__prop-type">String</span>
      </div>
      <div class="type-box__prop">
        <span class="type-box__visibility">+</span>
        <span class="type-box__prop-name">someProp</span>
        <span class="type-box__prop-type">String</span>
      </div>
    </div>
    <div class="type-box__method-container">
      <div class="type-box__prop">
        <span class="type-box__visibility">+</span>
        <span class="type-box__method-name">someMethod</span>
        <span class="type-box__method-args">arg1: string; arg2: number</span>
        <span class="type-box__method-return-type">String</span>
      </div>



    </div>
  </div>

  <dialog class="type-box-editor">
    <div class="type-box-editor__header">
      <div class="type-box-editor__title-container">
        <input value="HelloWorld" size="10" />
      </div>
      <select class="type-box-editor__mode-selector">
        <option>class</option>
        <option>abstract class</option>
        <option>interface</option>
      </select>
    </div>
    <div class="type-box-editor__prop-container">
      <button>add property</button>
      <div class="type-box-editor__prop">
        <span>+</span><input value="someProp"><input value="String">
        <button>del</button>
      </div>
      <div class="type-box-editor__prop">
        <span>+</span><input value="someProp"><input value="String" />
        <button>del</button>
      </div>
    </div>
    <div class="type-box-editor__method-container">
      <button>add method</button>
      <div class="type-box-editor__method">
        <span>+</span>
        <input value="someMethod">
       ...

CSS

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.container {
  display: flex;
  align-items: flex-start;
}

.type-box {
  background: #ffffce;
  border: solid 1px black;
  font-family: courier;
  display: inline-block;
}


.type-box__title-container {
  padding: 10px;
  line-height: 16px;
  font-size: 16px;
}

.type-box__prop-container,
.type-box__method-container {
  padding: 10px;
  border-top: solid 1px black;
  font-size: 14px;
  line-height: 20px;
}

.type-box__prop {
  display: flex;
  align-items: center;
}

.type-box__visibility {
  margin-right: 2px;
}

.type-box__prop-name::after {
  content: ":";
  margin-right: 2px;
}

.type-box__method-args:before {
  content: '('
}

.type-box__method-args:after {
  content: ')'
}

.type-box__method-return-type:before {
  content: ':';
}

/* edit mode */

.type-box-editor {
  background: navy;
  color: white;
  border-color: violet;
  display: inline-block;

}

.type-box-editor__header {
  display: flex;
  padding: 2px;
}

.type-box-editor__title-container input {
  height: 16px;
  font-size: 14px;
  width: 100%;
  border: solid 1px transparent;
}

.type-box-editor__mode-selector {
  margin-left: auto;
}

.type-box-editor__prop-container,
.type-box-editor__method-container {
  border-top: solid 1px violet;
}

.type-box-editor__prop, 
.type-box-editor__method {
  display: flex;
  flex-wrap: nowrap;
}

.args-editor {
  background: navy;
  color: white;
  display: inline-block;
}